/* ═══════════════════════════════════════════════════════════════════ demo-shell.css — the DEMO SHELL layer (.ds-* namespace only). Owns: the entry chooser, the presentation→tutorial handoff card and the persistent sandbox bottom bar. Rules this file obeys (demo-src/DEMO-DIRECTION.md): · derives every colour from the app's own tokens, never invents one · light AND dark (the theme flag is written to BOTH #root and by applyTheme(), so plain [data-theme=dark] selectors resolve here even though these elements are appended to document.body) · one saturated green mark per screen, one filled CTA · two easings, nothing bounces, nothing loops · everything degrades to an instant readable state under prefers-reduced-motion It styles NOTHING in the .dp-* (presentation) or .dt-* (tutorial) namespaces. The only app selectors it touches are layout offsets so the bottom bar never covers a control (see §5). ═══════════════════════════════════════════════════════════════════ */ /* ── §1 tokens ──────────────────────────────────────────────────── */ .ds-root{ --d-ink:var(--text); --d-ink-2:var(--text-2); --d-ink-3:var(--text-3); --d-page:var(--bg); --d-card:var(--surface); --d-card-2:var(--surface-2); --d-line:var(--border); --d-line-2:var(--border-2); --d-brand:var(--brand); --d-accent:var(--accent); --d-stage:var(--nav); --d-stage-2:var(--nav-2); --d-stage-fg:var(--nav-fg); --d-stage-fg-2:var(--nav-fg-2); --d-ease:cubic-bezier(.2,.8,.2,1); --d-ease-io:cubic-bezier(.4,0,.2,1); font-family:var(--font); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; } .ds-root *{box-sizing:border-box} .ds-root :focus-visible{outline:2px solid var(--ring,var(--d-accent));outline-offset:2px;border-radius:6px} /* screen-reader-only announcer */ .ds-live{position:fixed;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px} /* ── §2 shared type ─────────────────────────────────────────────── */ .ds-eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase; color:var(--d-ink-3);line-height:1.2; } .ds-dot{width:7px;height:7px;border-radius:50%;background:var(--d-brand);flex-shrink:0} .ds-headline{ font-size:clamp(30px,4.4vw,56px);line-height:1.06;font-weight:640; letter-spacing:-.025em;color:var(--d-ink);margin:20px 0 0; } .ds-support{ font-size:clamp(15px,1.35vw,19px);line-height:1.5;font-weight:400; color:var(--d-ink-2);max-width:46ch;margin:24px 0 0; } .ds-fine{font-size:12px;line-height:1.5;color:var(--d-ink-3);margin:0} /* ── §3 the chooser ─────────────────────────────────────────────── */ .ds-chooser{ position:fixed;inset:0;z-index:9500; background:var(--d-page); display:flex;flex-direction:column; overflow-y:auto;overflow-x:hidden; padding:0 clamp(24px,6vw,104px); } .ds-ch-top{ flex-shrink:0;height:72px;display:flex;align-items:center;justify-content:flex-end; } .ds-ch-inner{ flex:1;display:flex;flex-direction:column;justify-content:center; width:100%;max-width:1180px;margin:0 auto; padding:24px 0 56px; } .ds-ch-cards{ display:flex;gap:20px;align-items:stretch; margin:56px 0 0;flex-wrap:wrap; } .ds-ch-foot{margin:28px 0 0} /* card — one