/* intro.css — the voiced pre-roll that plays in front of a prospect-page exhibit. Shared by every prospect exhibit; per-exhibit data comes from window.INTRO_CFG. Everything is prefixed .io- / #io- so it cannot collide with the proposal page's own classes (.hx-, .b-, .m-, .hero-, .btn ...). The overlay is removed from the DOM at the end of the sequence, so nothing here can affect the page the spectator lands on. Deliberately a DARK console: the page underneath is warm paper, so the hand-off from tool → document reads as a change of place. The accent is the AGENCY orange (#E8622C), the same one the proposal page uses for its own chrome. */ #io-root{ --io-ink:#0B0D10; --io-panel:#14181D; --io-panel-2:#1B2027; --io-line:#2A313A; --io-text:#E8EAED; --io-dim:#8B95A1; --io-faint:#5A646F; --io-orange:#E8622C; --io-orange-soft:rgba(232,98,44,.16); --io-green:#3ECF8E; /* the prospect's own brand, injected from INTRO_CFG so the skeleton can drain into it */ --io-acc:#0e3d28; --io-acc-2:#FFC24B; --io-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace; --io-sans:'Lexend',-apple-system,'Segoe UI',sans-serif; position:fixed; inset:0; z-index:2147483000; background:var(--io-ink); color:var(--io-text); font-family:var(--io-sans); display:grid; place-items:center; padding:24px; overflow:hidden; animation:io-in .35s ease both; } #io-root *{box-sizing:border-box} @keyframes io-in{from{opacity:0}to{opacity:1}} /* the page underneath must not scroll while the overlay is up */ html.io-locked, html.io-locked body{overflow:hidden !important} /* intro.js loads synchronously in and sets this before the body paints, so the proposal page never flashes into view ahead of the overlay. Cleared the moment the overlay is in the DOM — and by a 3s safety timer if the script never gets that far. */ html.io-pending body{visibility:hidden} /* soft ambient glow so the flat dark doesn't read as a loading failure */ #io-root::before{ content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(60% 46% at 50% 8%, rgba(232,98,44,.10), transparent 70%), radial-gradient(50% 40% at 84% 88%, rgba(62,207,142,.06), transparent 70%); } /* ══ top chrome — the honesty badge and the way out ══════════════════════ */ .io-top{ position:absolute; top:0; left:0; right:0; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; } .io-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--io-mono); font-size:10.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--io-dim); background:rgba(255,255,255,.04); border:1px solid var(--io-line); border-radius:999px; padding:7px 14px; } .io-badge i{width:6px;height:6px;border-radius:50%;background:var(--io-orange);font-style:normal;animation:io-pulse 2s ease-in-out infinite} @keyframes io-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}} .io-skip,.io-mute{ font-family:var(--io-mono); font-size:11px; letter-spacing:.08em; color:var(--io-dim); background:rgba(255,255,255,.04); border:1px solid var(--io-line); border-radius:999px; padding:8px 15px; cursor:pointer; transition:color .2s, border-color .2s, background .2s; } .io-skip:hover,.io-mute:hover{color:var(--io-text); border-color:var(--io-faint); background:rgba(255,255,255,.07)} .io-top-r{display:flex;gap:8px;align-items:center} /* ══ hold screen — press play, sound on ═════════════════════════════════ */ .io-hold{ position:relative; z-index:3; text-align:center; max-width:600px; animation:io-rise .5s cubic-bezier(.2,.7,.2,1) both; } @keyframes io-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .io-hold .io-eyebrow{ font-family:var(--io-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--io-orange); margin-bottom:20px; } .io-hold h2{ font-size:clamp(26px,4.4vw,40px); font-weight:600; line-height:1.22; letter-spacing:-.02em; margin:0 0 16px; } .io-hold p{ font-size:clamp(14.5px,1.6vw,16.5px); line-height:1.65; color:var(--io-dim); margin:0 auto 32px; max-width:470px; } .io-play{ display:inline-flex; align-items:center; gap:12px; font-family:var(--io-sans); font-size:16px; font-weight:600; color:#fff; background:var(--io-orange); border:0; border-radius:999px; padding:16px 30px; cursor:pointer; box-shadow:0 12px 34px rgba(232,98,44,.32); transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s; } .io-play:hover{transform:translateY(-2px); box-shadow:0 16px 42px rgba(232,98,44,.42)} .io-play .io-tri{ width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18); display:grid;place-items:center;font-size:11px;padding-left:2px; } .io-sound{ margin-top:18px; font-family:var(--io-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--io-faint); } /* ══ the running stage ══════════════════════════════════════════════════ */ .io-stage{ position:relative; z-index:3; width:100%; max-width:1080px; /* stretch, not start — the tray is a sibling panel and should match the console's height rather than floating as a short box next to a tall one */ display:grid; grid-template-columns:minmax(0,1fr) 236px; gap:20px; align-items:stretch; } .io-stage[hidden]{display:none} .io-hold[hidden]{display:none} /* the console — one panel whose inner screen swaps per phase */ .io-console{ background:var(--io-panel); border:1px solid var(--io-line); border-radius:16px; overflow:hidden; min-height:400px; box-shadow:0 30px 80px rgba(0,0,0,.5); transition:transform .8s cubic-bezier(.5,0,.2,1), opacity .5s; } .io-console-bar{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--io-line); background:var(--io-panel-2); } .io-dots{display:flex;gap:6px} .io-dots i{width:9px;height:9px;border-radius:50%;background:#39414B;font-style:normal} .io-console-title{ font-family:var(--io-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--io-dim); } .io-console-body{padding:26px 28px 28px; position:relative} /* ── screens ── */ .io-screen{display:none} .io-screen.on{display:block; animation:io-fade .45s ease both} @keyframes io-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ── screen 1 · the operator form ── */ .io-form-head{margin-bottom:22px} .io-form-head h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0 0 5px} .io-form-head span{font-size:13px;color:var(--io-dim)} /* the form assembles itself on beat 0 rather than sitting there fully drawn while the narration talks over it */ .io-field{transition:opacity .45s, transform .45s cubic-bezier(.2,.7,.2,1)} .io-field.io-off,.io-btn.io-off{opacity:0; transform:translateY(7px)} .io-field{margin-bottom:15px} .io-field label{ display:block; font-family:var(--io-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--io-faint); margin-bottom:7px; } .io-box{ position:relative; display:flex; align-items:center; gap:2px; min-height:44px; padding:11px 14px; background:var(--io-panel-2); border:1px solid var(--io-line); border-radius:10px; font-size:14.5px; color:var(--io-text); line-height:1.45; transition:border-color .3s, background .3s; } .io-box.io-active{border-color:var(--io-orange); background:rgba(232,98,44,.06)} .io-box.io-filled{border-color:#39414B} .io-box.io-tall{min-height:70px; align-items:flex-start} .io-val{white-space:pre-wrap; word-break:break-word} .io-caret{ display:none; width:1.5px; height:18px; background:var(--io-orange); animation:io-blink 1s step-end infinite; margin-left:1px; flex:none; } .io-box.io-active .io-caret{display:inline-block} @keyframes io-blink{0%,100%{opacity:1}50%{opacity:0}} .io-tick{ margin-left:auto; flex:none; color:var(--io-green); font-size:13px; font-weight:700; opacity:0; transform:scale(.6); transition:opacity .3s, transform .3s cubic-bezier(.2,1.6,.4,1); } .io-tick.on{opacity:1; transform:none} .io-btn{ margin-top:20px; width:100%; display:flex; align-items:center; justify-content:center; gap:10px; font-family:var(--io-sans); font-size:15px; font-weight:600; color:#fff; background:var(--io-orange); border:0; border-radius:10px; padding:15px 20px; /* opacity/transform included so the beat-0 reveal (.io-off) animates like the fields do */ transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s, box-shadow .25s, filter .2s; box-shadow:0 10px 26px rgba(232,98,44,.24); } .io-btn.io-press{transition:transform .12s, box-shadow .25s, filter .2s} .io-btn.io-hover{box-shadow:0 14px 34px rgba(232,98,44,.36); filter:brightness(1.06)} .io-btn.io-press{transform:scale(.975); box-shadow:0 4px 12px rgba(232,98,44,.22)} /* ── screen 2 · the build stages ── */ .io-stages{display:flex; flex-direction:column; gap:0} .io-step{ display:flex; align-items:flex-start; gap:14px; padding:13px 0; border-bottom:1px solid rgba(42,49,58,.6); opacity:.3; transition:opacity .45s; } .io-step:last-child{border-bottom:0} .io-step.io-live{opacity:1} .io-step.io-done{opacity:.62} .io-step-ic{ flex:none; width:22px; height:22px; border-radius:50%; margin-top:1px; border:1.5px solid var(--io-line); display:grid; place-items:center; font-size:10px; color:var(--io-faint); transition:border-color .3s, background .3s, color .3s; } .io-step.io-live .io-step-ic{border-color:var(--io-orange); color:var(--io-orange)} .io-step.io-live .io-step-ic::after{ content:''; position:absolute; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--io-orange); border-top-color:transparent; animation:io-spin .8s linear infinite; } .io-step-ic{position:relative} @keyframes io-spin{to{transform:rotate(360deg)}} .io-step.io-done .io-step-ic{border-color:var(--io-green); background:rgba(62,207,142,.14); color:var(--io-green)} .io-step.io-done .io-step-ic::after{display:none} .io-step.io-skip .io-step-ic{border-color:var(--io-faint); color:var(--io-faint)} /* block, not inline — as spans these ran together on one line with the margin ignored */ .io-step-t{display:block; font-size:14.5px; font-weight:500; line-height:1.4} .io-step-s{display:block; font-size:12.5px; color:var(--io-dim); margin-top:3px; min-height:17px} .io-step-s b{color:var(--io-text); font-weight:600} /* the little visual each stage draws while it runs */ .io-viz{ margin-top:16px; height:150px; border-radius:11px; border:1px solid var(--io-line); background:var(--io-panel-2); position:relative; overflow:hidden; } .io-viz-pane{position:absolute; inset:0; opacity:0; transition:opacity .4s} .io-viz-pane.on{opacity:1} /* website wireframe */ .io-wire{padding:12px} .io-wire i{display:block; background:#2F3843; border-radius:3px; height:7px; margin-bottom:7px; opacity:0; font-style:normal; transform:translateX(-6px); transition:opacity .3s, transform .3s} .io-wire.go i{opacity:1; transform:none} .io-wire.go i:nth-child(1){transition-delay:.05s} .io-wire.go i:nth-child(2){transition-delay:.13s} .io-wire.go i:nth-child(3){transition-delay:.21s} .io-wire.go i:nth-child(4){transition-delay:.29s} .io-wire.go i:nth-child(5){transition-delay:.37s} .io-wire.go i:nth-child(6){transition-delay:.45s} .io-wire i.w1{width:38%;height:11px;background:#3A444F} .io-wire i.w2{width:76%} .io-wire i.w3{width:60%} .io-wire i.w4{width:88%;height:38px;border-radius:6px} .io-wire i.w5{width:44%} .io-wire i.w6{width:30%;height:14px;border-radius:999px;background:#454F5B} /* google listing */ .io-map{padding:12px; display:flex; gap:12px; align-items:stretch} .io-map-c{ flex:none; width:96px; border-radius:8px; background: linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/100% 17px, linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/17px 100%, #1F252C; position:relative; } .io-pin{ position:absolute; left:50%; top:42%; width:15px; height:15px; margin-left:-7.5px; border-radius:50% 50% 50% 0; background:var(--io-orange); transform:rotate(-45deg) translateY(-26px); opacity:0; transition:transform .5s cubic-bezier(.3,1.5,.5,1), opacity .3s; } .io-map.go .io-pin{transform:rotate(-45deg) translateY(0); opacity:1} .io-map-l{flex:1; display:flex; flex-direction:column; gap:6px; justify-content:center} .io-map-l i{display:block;height:7px;border-radius:3px;background:#2F3843;font-style:normal;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s} .io-map.go .io-map-l i{opacity:1;transform:none} .io-map.go .io-map-l i:nth-child(1){transition-delay:.22s} .io-map.go .io-map-l i:nth-child(2){transition-delay:.3s} .io-map.go .io-map-l i:nth-child(3){transition-delay:.38s} .io-map.go .io-map-l i:nth-child(4){transition-delay:.46s} .io-map-l i:nth-child(1){width:64%;height:10px;background:#3A444F} .io-map-l i:nth-child(2){width:40%} .io-map-l i:nth-child(3){width:80%} .io-map-l i:nth-child(4){width:52%} /* reviews */ .io-rev{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; height:100%} .io-stars{display:flex; gap:5px; font-size:19px; color:#39414B} .io-stars b{font-weight:400; transition:color .3s, transform .3s cubic-bezier(.2,1.6,.4,1)} .io-rev.go .io-stars b{color:var(--io-acc-2); transform:scale(1.12)} .io-rev.go .io-stars b:nth-child(1){transition-delay:.05s} .io-rev.go .io-stars b:nth-child(2){transition-delay:.14s} .io-rev.go .io-stars b:nth-child(3){transition-delay:.23s} .io-rev.go .io-stars b:nth-child(4){transition-delay:.32s} .io-rev.go .io-stars b:nth-child(5){transition-delay:.41s} .io-rev-n{font-size:27px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums} .io-rev-s{font-size:12.5px; color:var(--io-dim)} /* the page skeleton the tray drains into */ .io-skel{padding:11px; display:flex; flex-direction:column; gap:6px; height:100%} /* background .28s, not .6s: a CSS gradient can't tween, so the hero snaps to colour the instant .io-paint lands. A slow fade on the solid bars left them straggling behind it — short enough and they all arrive together, as the drained chips hit. */ .io-skel i{display:block; border-radius:4px; background:#2F3843; font-style:normal; opacity:0; transform:scale(.96); transform-origin:left center; transition:opacity .35s, transform .35s cubic-bezier(.2,1.4,.4,1), background .28s} .io-skel.go i{opacity:1; transform:none} .io-skel.go i:nth-child(1){transition-delay:.04s} .io-skel.go i:nth-child(2){transition-delay:.1s} .io-skel.go i:nth-child(3){transition-delay:.16s} .io-skel.go i:nth-child(4){transition-delay:.22s} .io-skel.go i:nth-child(5){transition-delay:.28s} .io-skel.go i:nth-child(6){transition-delay:.34s} .io-skel i.s-nav{height:13px; background:var(--io-line)} .io-skel i.s-hero{height:44px} .io-skel i.s-l{height:7px; width:70%} .io-skel i.s-l2{height:7px; width:52%} .io-skel i.s-cta{height:15px; width:34%; border-radius:999px} .io-skel i.s-row{height:24px} /* stage 07: the docked colours flow out of the tray and into the skeleton */ .io-skel.io-paint i.s-nav{background:var(--io-acc)} .io-skel.io-paint i.s-hero{background:linear-gradient(110deg,var(--io-acc),color-mix(in srgb,var(--io-acc) 62%, #000))} .io-skel.io-paint i.s-cta{background:var(--io-acc-2)} .io-skel.io-paint i.s-row{background:color-mix(in srgb,var(--io-acc) 26%, #2F3843)} /* stage 08: copy shimmering onto the wireframe */ .io-skel.io-copy i.s-l,.io-skel.io-copy i.s-l2{ background:linear-gradient(90deg,#3A444F 0%,#5C6874 40%,#3A444F 80%); background-size:220% 100%; animation:io-shim 1.1s ease-in-out infinite; } @keyframes io-shim{from{background-position:120% 0}to{background-position:-60% 0}} /* ══ deck mode · the approval gate ══════════════════════════════════════ The pitch-deck pipeline has a human in the middle — research is presented and approved before anything reaches the deck. That gate is the point of the sequence, so it gets its own screen rather than another spinner. */ /* The viz box is 150px for the page mode's little animations, but the approval list is the deck's payoff and has to show EVERY fact getting its verdict — at 150px it clipped to three of six. Deck mode gets a taller box; the list also scrolls, so a longer facts bank can never silently hide the thing the sequence is about. */ .io-mode-deck .io-viz{height:262px} /* deck mode carries six steps AND the tall approval box; tightening the step rows buys the list enough room to show every verdict at once instead of scrolling one out */ .io-mode-deck .io-step{padding:9px 0} .io-appr{padding:12px 13px; height:100%; display:flex; flex-direction:column; min-height:0} .io-appr-h{ font-family:var(--io-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--io-faint); margin-bottom:9px; flex:none; } .io-appr-list{display:flex; flex-direction:column; gap:5px; overflow-y:auto; min-height:0; flex:1} .io-ai{ display:flex; align-items:center; gap:9px; flex:none; background:var(--io-panel); border:1px solid var(--io-line); border-radius:8px; padding:5px 9px; font-size:11.5px; line-height:1.35; opacity:0; transform:translateY(5px); transition:opacity .35s, transform .35s, border-color .3s; } .io-ai.on{opacity:1; transform:none} .io-ai-id{ flex:none; font-family:var(--io-mono); font-size:10px; color:var(--io-faint); width:20px; } .io-ai-t{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .io-ai-v{ flex:none; width:19px; height:19px; border-radius:50%; display:grid; place-items:center; font-size:10px; border:1.5px solid var(--io-line); color:var(--io-faint); transition:border-color .3s, background .3s, color .3s; } .io-ai.io-ok{border-color:rgba(62,207,142,.35)} .io-ai.io-ok .io-ai-v{border-color:var(--io-green); background:rgba(62,207,142,.16); color:var(--io-green)} /* the honest one: modelled, not measured — kept and footnoted, never claimed as fact */ .io-ai.io-flag{border-color:rgba(232,98,44,.45); background:rgba(232,98,44,.07)} .io-ai.io-flag .io-ai-v{border-color:var(--io-orange); color:var(--io-orange)} .io-ai-note{ flex:none; font-family:var(--io-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--io-orange); border:1px solid rgba(232,98,44,.4); border-radius:999px; padding:2px 7px; opacity:0; transition:opacity .4s; } .io-ai.io-flag .io-ai-note{opacity:1} /* deck mode · the slides being laid out */ .io-slides{ padding:12px; height:100%; display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:1fr; gap:7px; } .io-slides i{ display:block; border-radius:4px; background:#2F3843; font-style:normal; opacity:0; transform:scale(.82); transition:opacity .3s, transform .3s cubic-bezier(.2,1.5,.4,1), background .3s; } .io-slides i.on{opacity:1; transform:none} .io-slides i.io-cover{background:var(--io-acc)} .io-slides i.io-hot{background:var(--io-acc-2)} /* ══ the tray — fills through 04–06, drains at 07 ═══════════════════════ */ .io-tray{ background:var(--io-panel); border:1px solid var(--io-line); border-radius:16px; padding:16px; min-height:400px; box-shadow:0 30px 80px rgba(0,0,0,.5); } .io-tray-h{ font-family:var(--io-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--io-faint); padding-bottom:11px; margin-bottom:13px; border-bottom:1px solid var(--io-line); } .io-tray-list{display:flex; flex-direction:column; gap:9px} .io-chip{ display:flex; align-items:center; gap:10px; background:var(--io-panel-2); border:1px solid var(--io-line); border-radius:10px; padding:10px 12px; font-size:12.5px; line-height:1.35; opacity:0; transform:translateX(16px) scale(.94); transition:opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1); } .io-chip.on{opacity:1; transform:none} /* drain: they fly left, toward the skeleton */ .io-chip.io-drain{opacity:0; transform:translateX(-190px) scale(.8); transition-duration:.75s} .io-chip-ic{ flex:none; width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-size:12px; background:rgba(255,255,255,.05); } /* deck mode: the fact's id tile is colour-coded by where the fact came from — site (theirs) · public (verifiable elsewhere) · assumed (modelled, footnoted) */ .io-chip-ic.io-src-site{background:rgba(62,207,142,.14); color:var(--io-green); font-family:var(--io-mono); font-size:9.5px} .io-chip-ic.io-src-public{background:rgba(120,170,255,.14); color:#7BA8FF; font-family:var(--io-mono); font-size:9.5px} .io-chip-ic.io-src-assumed{background:rgba(232,98,44,.16); color:var(--io-orange); font-family:var(--io-mono); font-size:9.5px} /* deck-scoped: in page mode the sub-line is prose ("pulled from Google"), not a tag */ .io-mode-deck .io-chip-s{text-transform:uppercase; letter-spacing:.09em; font-size:9.5px; font-family:var(--io-mono)} /* Explicit classes rather than a bare `.io-chip span`: that selector out-specified .io-sw and forced display:block onto the swatch row, which collapsed the swatches into a 1px sliver. Anything nested in a chip needs its own class. */ .io-chip-txt{min-width:0} .io-chip-b{display:block; font-weight:600; font-size:12.5px; color:var(--io-text)} .io-chip-s{display:block; color:var(--io-dim); font-size:11px; margin-top:1px} .io-sw{display:flex; gap:5px; margin-top:5px} .io-sw i{display:block; width:15px; height:15px; border-radius:4px; font-style:normal; border:1px solid rgba(255,255,255,.14)} .io-tray-empty{font-size:12px; color:var(--io-faint); font-style:italic; line-height:1.5} /* after the drain the tray would otherwise sit blank for the rest of the run, reading as a panel that lost its contents rather than one that spent them */ .io-tray-done{ display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.5; color:var(--io-green); opacity:0; transition:opacity .5s; } .io-tray-done.on{opacity:1} .io-tray-done span{color:var(--io-dim)} /* ══ caption ════════════════════════════════════════════════════════════ */ .io-cap{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:4; width:min(660px, calc(100vw - 48px)); text-align:center; font-size:15px; line-height:1.55; color:var(--io-text); background:rgba(11,13,16,.82); border:1px solid var(--io-line); border-radius:12px; padding:13px 20px; backdrop-filter:blur(8px); opacity:0; transition:opacity .35s; } .io-cap.on{opacity:1} /* ══ hand-off — the console becomes the browser and opens ═══════════════ */ .io-console.io-handoff{ position:fixed; z-index:6; transition:top .85s cubic-bezier(.6,0,.25,1), left .85s cubic-bezier(.6,0,.25,1), width .85s cubic-bezier(.6,0,.25,1), height .85s cubic-bezier(.6,0,.25,1), border-radius .85s ease, opacity .4s ease .55s; } #io-root.io-out{background:transparent; transition:background .7s ease} #io-root.io-out::before,#io-root.io-out .io-top,#io-root.io-out .io-tray,#io-root.io-out .io-cap{ opacity:0; transition:opacity .4s; } #io-root.io-gone{opacity:0; transition:opacity .45s; pointer-events:none} /* ══ responsive ═════════════════════════════════════════════════════════ */ @media (max-width:880px){ #io-root{padding:16px} .io-stage{grid-template-columns:minmax(0,1fr); gap:14px} .io-console{min-height:0} .io-tray{min-height:0; padding:14px} .io-tray-list{flex-direction:row; flex-wrap:wrap} .io-chip{flex:1 1 auto; min-width:132px} .io-chip.io-drain{transform:translateY(-120px) scale(.8)} .io-console-body{padding:20px} .io-viz{height:120px} .io-mode-deck .io-viz{height:190px} .io-cap{bottom:14px; font-size:13.5px; padding:11px 15px} } /* short viewports: the deck console is the tall one (six steps + the approval list), so shrink its viz first — the list scrolls rather than pushing the console off-screen */ @media (max-height:860px){ .io-mode-deck .io-viz{height:190px} } @media (max-height:680px){ .io-viz{height:108px} .io-mode-deck .io-viz{height:140px} .io-cap{bottom:12px} } /* ══ reduced motion — no theatre, but the sequence still reads ══════════ */ @media (prefers-reduced-motion:reduce){ #io-root *,#io-root *::before,#io-root *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }