/* speedo-morph.css — GENERATED by scripts/assemble_speedo_hero.py (do not hand-edit). */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); .mh{ --color-bg:#101820; --color-surface:#1a2230; --color-border:#2a3240; --color-border-subtle:#1e2835; --color-text:#E8E6E1; --color-text-secondary:#8A8F98; --color-text-tertiary:#8a93a6; /* tertiary lifted #5a6070→#8a93a6 for AA contrast on #101820 (was 2.85:1) */ --color-volt:#CEFF00; --color-coral:#d9646e; --color-steel:#b6c2d4; --font-editorial:'Inter Tight','Inter',-apple-system,sans-serif; --font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; --font-mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace; --ease:cubic-bezier(0.4,0,0.2,1); --dur:0.2s; } .mh{max-width:1560px;width:100%;margin:0 auto;box-sizing:border-box;} /* ── header: Tier-1 headline + Tier-3 finding + Tier-2 encodings ── */ .rdl__head{padding:2px 6px 14px;} .rdl__headline{font-family:var(--font-editorial);font-size:23px;font-weight:700;letter-spacing:-0.01em;color:var(--color-text);line-height:1.08;} .rdl__finding{font-family:var(--font-sans);font-size:12.5px;font-weight:400;color:var(--color-text-secondary);margin-top:7px;max-width:780px;line-height:1.5;} .rdl__encodings{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;color:var(--color-text-secondary);margin-top:9px;} /* ── the shared stage: one bordered console, continuous thermal field behind both SVGs ── */ .rdl__stage{position:relative;border:1px solid var(--color-border);border-radius:8px;padding:6px 12px 12px; background: linear-gradient(100deg, rgba(60,120,182,0.07) 0%, rgba(16,24,32,0) 40%, rgba(16,24,32,0) 60%, rgba(214,100,112,0.07) 100%), radial-gradient(115% 78% at 50% 26%, rgba(26,34,48,0.50), rgba(16,24,32,0) 72%), #101820; box-shadow: inset 0 1px 0 rgba(176,194,212,0.04), 0 1px 2px rgba(0,0,0,0.35);} .rdl__svg{width:100%;display:block;overflow:visible;} #recipeSvg{margin-top:1px;} /* ── base dial tokens ── */ .rdl-band-divider{stroke:rgba(150,170,200,0.30);stroke-width:1;} .rdl-band-rim{fill:none;stroke:rgba(107,118,137,0.20);stroke-width:1;} .rdl-warm-lit{fill:none;stroke:var(--color-volt);stroke-width:2.0;opacity:0.42;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(206,255,0,0.40));} .rdl-scale-arc{fill:none;stroke:rgba(107,118,137,0.40);stroke-width:1;} .rdl-tick-minor{stroke:rgba(107,118,137,0.40);stroke-width:1;} .rdl-tick-major{stroke:rgba(150,162,182,0.70);stroke-width:1.4;} .rdl-tick-hot{stroke:var(--color-coral);stroke-width:1.4;opacity:0.90;} .rdl-tick-hot-major{stroke:var(--color-coral);stroke-width:1.7;opacity:0.95;} .rdl-redline{fill:none;stroke:var(--color-coral);stroke-width:3;opacity:0.85;stroke-linecap:round;} .rdl-floor{fill:none;stroke:rgba(107,118,137,0.52);stroke-width:1.2;} .rdl-floor-band{fill:rgba(107,118,137,0.14);stroke:none;} .rdl-track{fill:rgba(107,118,137,0.04);stroke:rgba(42,50,64,0.50);stroke-width:1;} .rdl-wedge{stroke:var(--color-border);stroke-width:1;} .rdl-wedge-fill{fill:rgba(107,118,137,0.18);} .rdl-wedge-edge{stroke:rgba(176,188,206,0.40);stroke-width:1;} .rdl-wedge-cap{stroke:rgba(184,196,214,0.82);stroke-width:2.6;stroke-linecap:round;fill:none;} .rdl-wedge-cap-key{stroke:var(--color-volt);stroke-width:1;opacity:0.52;fill:none;stroke-linecap:round;} .rdl-wg{transition:opacity 0.18s ease;} .rdl-wg.dim{opacity:0.26;} .rdl-wg.hi{opacity:1;} .rdl-wordmark{font-family:var(--font-mono);fill:var(--color-text-tertiary);opacity:0.5;} /* ── curved engine PLATES on the hub rim (Tier-2 gauge) ── */ .rdl-plate-housing{fill:#141c27;stroke-width:1.2;} .rdl-plate-cap{stroke-width:1;} .rdl-plate-text{font-family:var(--font-mono);font-weight:600;letter-spacing:0.13em;} /* ── peripheral scenario name plates (Tier-3 names — uniform steel, de-volted) ── */ .rdl-scn-plate-text{font-family:var(--font-editorial);font-weight:700;letter-spacing:0.015em;fill:var(--color-steel);} /* ── hub: turned-metal bezel ── */ .rdl-hub-face{fill:#121a26;stroke:none;} .rdl-bezel-lo{fill:none;stroke:rgba(38,48,62,0.95);stroke-width:1.4;} .rdl-bezel-hi{fill:none;stroke:rgba(150,166,190,0.34);stroke-width:1;} .rdl-engrave{stroke:rgba(124,140,164,0.30);stroke-width:1;} .rdl-engrave-ring{fill:none;stroke:rgba(124,140,164,0.16);stroke-width:1;} /* ── needle assembly ── */ .rdl-needle-blade{fill:var(--color-volt);opacity:0.30;} .rdl-needle-spine{stroke:var(--color-volt);stroke-width:1.7;opacity:1;stroke-linecap:round;} .rdl-needle-tail{fill:rgba(206,255,0,0.55);} .rdl-needle-pip{stroke:var(--color-volt);stroke-width:2.2;opacity:1;stroke-linecap:round;} .rdl-need-chip{font-family:var(--font-mono);font-weight:600;fill:var(--color-volt);text-transform:uppercase;letter-spacing:0.16em;} .rdl-need-chip-box{fill:rgba(16,24,32,0.94);stroke:rgba(206,255,0,0.50);stroke-width:1;} .rdl-need-connect{stroke:rgba(206,255,0,0.55);stroke-width:1;} /* ── volt beacon (lights last) ── */ .rdl-beacon-collar{fill:none;stroke:var(--color-volt);stroke-width:1.3;opacity:0.6;} .rdl-beacon-bloom{fill:var(--color-volt);opacity:0.18;} .rdl-hub-pin{fill:var(--color-volt);} /* ════════════ THE RECIPE — lower readout panel ════════════ */ .rcp-housing{fill:#141c27;stroke:rgba(120,136,160,0.22);stroke-width:1;} .rcp-housing-rim{fill:none;stroke:rgba(176,194,212,0.06);stroke-width:1;} .rcp-title{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;fill:var(--color-text-tertiary);} .rcp-tab{fill:#182230;stroke:rgba(120,136,160,0.28);stroke-width:1;} .rcp-tab-cap{stroke:rgba(120,136,160,0.34);stroke-width:1;} .rcp-colhead{font-family:var(--font-editorial);font-weight:600;font-size:11px;fill:var(--color-text);letter-spacing:-0.015em;text-anchor:middle;} .rcp-rowlbl{font-family:var(--font-sans);font-weight:600;font-size:11.5px;fill:var(--color-text);letter-spacing:-0.005em;} .rcp-cell-agree{fill:rgba(206,255,0,0.90);stroke:rgba(206,255,0,0.5);stroke-width:0.8;} .rcp-cell-disagree{fill:rgba(217,100,110,0.92);stroke:rgba(217,100,110,0.55);stroke-width:0.8;} .rcp-cell-na{fill:url(#na-hatch-rcp);stroke:rgba(120,132,150,0.36);stroke-width:0.8;} .rcp-divider{stroke:rgba(120,136,160,0.22);stroke-width:1;stroke-dasharray:2 3;} .rcp-disj-bracket{stroke:var(--color-coral);stroke-width:1.4;fill:none;opacity:0.92;stroke-linecap:round;} .rcp-disj-mark{font-family:var(--font-mono);font-weight:600;fill:var(--color-coral);font-size:11px;} .rcp-leg-lbl{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;fill:var(--color-text-secondary);} .rcp-plumb{stroke:rgba(120,136,160,0.20);stroke-width:1;stroke-dasharray:1.5 3;} .rcp-col-group{transition:opacity 0.18s ease;} .rcp-col-group.dim{opacity:0.20;} .rcp-col-group.hi{opacity:1;} /* ════════════ PLAYHEAD-DRIVEN ARRIVAL + 5-ACT MORPH SCROLLY (P2) ════════════ The v2.1 CSS one-shot is replaced by paintArrival(P) (inline transforms keyed off the playhead). transform-box/origin stay — they are the handles paintArrival writes to. */ #wedgeLayer,#scaleLayer,#needleAssembly,#beaconLayer,#recipeSvg{transform-box:view-box;} #wedgeLayer{transform-origin:560px 392px;} #needleAssembly{transform-origin:560px 392px;} #beaconLayer{transform-origin:560px 392px;} #dialSvg{will-change:opacity;} .dialwrap{position:relative;} #morphSvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;} #lv-layer{transform-box:view-box;transform-origin:600px 222px;} /* levers compress left during the Sankey */ /* scrolly: 240vh track + sticky pin while armed; centered when disarmed */ .mh-scrolly{position:relative;} .mh-pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;} body.is-armed .mh-scrolly{height:540vh;} /* longer reveal track → the 5 acts unfold over ~4 screens, with a real resting dwell on the formed sankey (2.3→2.6) before it morphs */ body.is-armed .mh-pin{position:sticky;top:var(--mh-mast,49px);} /* captions (one per act, crossfaded) + 5-act rail */ .caps{position:relative;height:20px;margin:6px 6px 0;} .cap{position:absolute;left:0;right:0;top:0;font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--color-text-secondary);opacity:0;} .mh-rail{display:flex;gap:6px;margin:12px 6px 0;flex-wrap:wrap;justify-content:center;} .mh-rail button{font-family:var(--font-mono);font-size:11px;letter-spacing:0.05em;text-transform:uppercase;color:var(--color-text-secondary);background:transparent;border:1px solid var(--color-border);border-radius:4px;padding:4px 9px;cursor:pointer;} .mh-rail button.on{color:var(--color-text);border-color:var(--color-volt);box-shadow:inset 0 -2px 0 var(--color-volt);} @media (prefers-reduced-motion: reduce){ body.is-armed .mh-scrolly{height:auto;} body.is-armed .mh-pin{position:static;} } /* ════════════ MOBILE (≤640px): stacked, cropped dial fills width, larger header ════════════ */ @media (max-width:640px){ .rdl__headline{font-size:20px;} .rdl__finding{font-size:13px;} .rdl__encodings{font-size:11px;letter-spacing:0.04em;} .rdl__stage{padding:4px 6px 8px;} } /* ── data-view show/hide (radial.css removed; the .mh hero replaces .rdl-embed) ── */ .instrument[data-view="speedometer"] .mh{display:block;} .instrument[data-view="speedometer"] .casc-embed{display:none;} .instrument[data-view="speedometer"] .instrument__grid{display:none;} .instrument[data-view="cascade"] .mh{display:none;} .instrument[data-view="cascade"] .casc-embed{display:block;} .instrument[data-view="cascade"] .instrument__grid{display:none;} /* ═══════════════ CINEMATIC FULL-SCREEN TAKEOVER ═══════════════ During the scroll-reveal the animation OWNS the viewport: the site header, the Views/Source toggles and the verdict all clear, and the dial+morph go full-bleed to use every pixel. On landing the chrome returns and the instrument settles into its framed, interactive state. (Disarmed / reduced-motion / mobile / ?p= keep the normal framed view with chrome — none of these rules apply without .is-armed.) */ body.is-armed .mh-pin{padding:6px 0;} /* — the deslop.media header STAYS through the takeover (operator: keep the brand top-left) — */ .px-top{z-index:62;} /* — the lede ("Where is AI going?") now rides INSIDE the pin, so the animation is pinned from the first pixel of scroll (no dead pre-scroll). It sits at the top during the reveal and persists as the figure's question on landing. — */ body.is-armed .mh-pin{justify-content:flex-start;} .mh-pin > .lede{max-width:1320px;width:100%;margin:0 auto;padding:0 32px;flex:0 0 auto;} body.is-armed .mh-pin > .lede h1{margin:0;font-size:clamp(26px,3.4vw,40px);line-height:1.05;} body.is-armed .mh-pin > .lede p{margin:3px 0 0;font-size:13px;} /* — central-dogma TRACKER at the top: Panel → Questions → Constraints → Scenarios → AI Speedometer, borderless breadcrumb with arrows; the current act is lit volt, passed acts brighten. — */ .mh-pin > .mh-rail{margin:7px auto 3px;max-width:1040px;width:100%;justify-content:center;gap:7px;align-items:center;} .mh-pin > .mh-rail button{border:0 !important;box-shadow:none !important;background:transparent; font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.11em;text-transform:uppercase; color:var(--color-text-tertiary);padding:2px 1px;transition:color .2s var(--ease);} .mh-pin > .mh-rail button:hover{color:var(--color-text-secondary);} .mh-pin > .mh-rail button.done{color:var(--color-text-secondary);} .mh-pin > .mh-rail button.on{color:var(--color-volt);} .mhRailArr{color:var(--color-text-tertiary);font-size:11px;opacity:.5;align-self:center;} /* the scrub is reversible now, so scrolling up replays — the Replay button is redundant */ #mhInstrument #speedoReplay{display:none;} /* ── SMOOTH SETTLE (operator: the old transition was "unsettling") ─────────────────────────────────── ROOT CAUSE of the old jank: the settle flipped three properties that REFLOW-SNAP — recipe display:none→ block, chrome height:0→auto — instantly, alongside a width transition. Reflows can't be GPU-smoothed. FIX: every element that changes now animates max-height + opacity (NEVER display/height:auto), and they ALL share one duration + easing, so the console — dial + recipe ATTACHED — settles as a single piece. ── */ #mhInstrument .instrument__bar,#mhInstrument .rdl__head,#mhInstrument .recipe-scroll{ overflow:hidden; transition:max-height .62s var(--ease),opacity .62s var(--ease),margin .62s var(--ease);} #mhInstrument .mh{transition:width .62s var(--ease),max-width .62s var(--ease);} /* TAKEOVER — chrome + recipe collapse to nothing via max-height (NOT display), so the dial owns the viewport and the pin still never exceeds one screen (no pre-stick scroll). */ body.is-armed:not(.speedo-settled) #mhInstrument .instrument__bar{opacity:0;pointer-events:none;max-height:0;min-height:0;margin:0;padding:0;} body.is-armed:not(.speedo-settled) #mhInstrument .rdl__head{opacity:0;max-height:0;margin:0;} body.is-armed:not(.speedo-settled) #mhInstrument .recipe-scroll{opacity:0;max-height:0;margin:0;} body.is-armed:not(.speedo-settled) #mhInstrument{padding:0;border:0;} body.is-armed:not(.speedo-settled) #mhInstrument .descend{display:none;} /* INVISIBLE BOX (operator 2026-06-11, CDO plan): the armed reveal stays inside its parent content column (#mhInstrument is already the centred 1256px column) instead of bleeding to the viewport edges. So the stage fills 100% of the column (margin:auto keeps it centred when the height clamp narrows it) and is height-capped to clear the header/lede/breadcrumb chrome (220px) and the fold. No more left:50%/translateX re-centring — that machinery only existed to recover the old overflow, and dropping it also removes the untransitioned width pop at the settle boundary. */ body.is-armed:not(.speedo-settled) #mhInstrument .mh{ max-width:none;width:min(100%, calc((100vh - 220px) * 1120 / 516));} body.is-armed:not(.speedo-settled) #mhInstrument .rdl__stage{ border-color:transparent;background:transparent;padding:0;box-shadow:none;} /* containment belt: nothing the morph draws may escape the box (e.g. the act-0 label) while armed; + a comfortable gap below the header block before the stage starts. */ body.is-armed:not(.speedo-settled) #mhInstrument #morphSvg{overflow:hidden;} #mhInstrument .rdl__stage{transition:margin .62s var(--ease);} body.is-armed:not(.speedo-settled) #mhInstrument .rdl__stage{margin-top:10px;} /* LANDED — chrome + recipe expand to natural height (generous max-height ceilings, no clip), the dial shrinks to its framed size: dial + recipe settle together as one attached console. */ body.is-armed.speedo-settled #mhInstrument .instrument__bar{opacity:1;max-height:170px;} body.is-armed.speedo-settled #mhInstrument .rdl__head{opacity:1;max-height:120px;} body.is-armed.speedo-settled #mhInstrument .recipe-scroll{opacity:1;max-height:420px;} body.is-armed.speedo-settled #mhInstrument .mh{ width:min(1700px, calc((100vw - 40px)), calc((100vh - 168px) * 1120 / 726));max-width:1700px;} .mh .rdl__stage{margin-top:2px;} /* ── mobile flow hero (rendered ≤640px only; desktop keeps the dome console) ── */ .mflow{display:none;} #mflowStage{position:relative;border-radius:8px;overflow:hidden;} #mflowStage svg{display:block;width:100%;height:auto;} #mflowCap{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:#7e8a9b;margin-top:8px;min-height:28px;} /* one-expert banner — editorial text, no volt box (operator 2026-06-11) */ .mh-srcnote{font-family:var(--font-sans);font-size:11.5px;color:var(--color-text-secondary); margin-top:8px;line-height:1.4;} .mh-srcnote b{font-weight:600;color:var(--color-text);} /* ── mobile: the controls bar must wrap cleanly, never clip (was: "CAPEX STRE…" cut off) ── */ @media (max-width:640px){ #mhInstrument .instrument__bar{flex-direction:column;align-items:stretch;gap:10px;} #mhInstrument .instrument__lead{flex-wrap:wrap;gap:8px;} #mhInstrument .instrument__ctrls{flex-direction:column;align-items:stretch;gap:10px;} #mhInstrument .ctl{min-width:0;flex-wrap:wrap;} #mhInstrument .segseg,#mhInstrument #evct{flex-wrap:wrap;overflow-x:auto;-webkit-overflow-scrolling:touch;} #mhInstrument .mh-srcnote{font-size:10.5px;} /* the DAG ties layer can't track the stacked single-column constraints → hide it */ .ties,#ties{display:none;} /* the 5-act rail is a scroll-morph aid; the morph is off on mobile → hide it */ .mh-rail{display:none;} /* RECIPE: 7 full-name columns don't fit 390px → swipe it horizontally at a readable size. Needs the #mhInstrument prefix: the settle rule (#mhInstrument .recipe-scroll{overflow:hidden}) otherwise out-specifies this and hard-clips the 900px table with no swipe. overflow-y stays hidden for the max-height settle clip; the morph is off on mobile so the swipe is safe. */ #mhInstrument .recipe-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; border:1px solid var(--color-border-subtle);border-radius:6px;margin-top:8px;} .recipe-scroll #recipeSvg{width:900px;min-width:900px;} /* CASCADE: the 5→7 fan is wider than the phone → swipe it horizontally */ #mhInstrument .casc__stage{overflow-x:auto;-webkit-overflow-scrolling:touch;} #mhInstrument .casc__svg{min-width:640px;} /* DIAL on mobile: the 900px swipe-dome rescue is RETIRED — the device-native 5-act flow → THE DIAL FACE (speedo-mobile-flow.js over the shared spine) is the mobile hero. */ #mhInstrument .dialwrap{display:none;} #mhInstrument .mflow{display:block;} /* TAP TARGETS: every primary control (Views / Source / evct chips via .segbtn; citation Group/Stance/Within via .citefeed .seg button) renders ~24px tall — ~half the 44px thumb minimum, and in the stacked layout the short height is the only hit area. Grow the hit box only (font-size unchanged). */ #mhInstrument .segbtn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;} .citefeed .seg button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;} /* A2: move controls below the dial (mobile diet 2026-06-11) */ #mhInstrument{display:flex;flex-direction:column;} #mhInstrument > .mh{order:1;} #mhInstrument > .instrument__bar{order:2;margin-top:18px;} /* A3: hide Model·soon placeholder */ #srcseg [data-soon]{display:none;} /* A4: hide Views/Cascade toggle — cascade is bad on mobile (interim) */ #viewswLabel,.viewsw{display:none;} } /* ── cascade view: bring it into the hero's visual language (was the "disliked" graphic) ── */ #mhInstrument .casc__title{font-family:var(--font-editorial);font-size:22px;font-weight:700; letter-spacing:-0.02em;color:var(--color-text);} #mhInstrument .casc__stage{padding:6px 12px 12px; background:linear-gradient(100deg, rgba(60,120,182,0.07) 0%, rgba(16,24,32,0) 40%, rgba(16,24,32,0) 60%, rgba(214,100,112,0.07) 100%), radial-gradient(115% 78% at 50% 26%, rgba(26,34,48,0.45), rgba(16,24,32,0) 72%), #101820; border:1px solid var(--color-border);border-radius:8px;} /* section rhythm — give the hero + cascade breathing room before the depth transition */ #mhInstrument .mh{margin-bottom:14px;} #mhInstrument .casc.casc-embed{margin-bottom:14px;} /* BUNDLE BUG (flag for P4): decomp-v3.css `.seg{position:absolute}` (the skyline's control) also catches the citefeed's `.seg` (#grpSeg/#stanceSeg/#sortSeg), which then escape to the page top-left — normally masked behind the sticky header, but the takeover hides the header and exposes them. Contain them back into flow. */ .citefeed .seg{position:relative;} /* ── operator 2026-06-11: KILL the "You're viewing" states toggle. The two forward states (Cap Holds / Capex Stress) are data-soon placeholders with no substrate, so the control is pointless clutter (you're always viewing Today). Hide the whole ev control by default; reveal it ONLY when the One-Expert picker is active — the picker shares this container (#exprSel) and must stay reachable. ── */ #mhInstrument .ctl--ev{display:none;} #mhInstrument .ctl--ev:has(#exprSel:not([hidden])){display:inline-flex;align-items:center;gap:7px;} /* ── machine channel: KEEP it (deslop's agent-discoverability surface, fully crawlable) but bound the ~9,900px raw-JSON 
 to a scroll box so it reads as a labelled data panel, not an unfinished
     debug dump dominating half the document. (emitted in