/* /dot-studio — Dot, alive on the page.

   The page conforms to the house (DESIGN.md): the .wrap container, the
   type roles, the 760 / 1000 / 1024 breakpoints, --accent on every
   interface control. Two exceptions are recorded there: the character
   stage is this page's opening, and motion is scoped to this page.
   --dot-* colours are only for Dot itself and inside product frames.
   The hairline under each stage is the floor Dot stands on. */

.ds { color: var(--ink); }
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
:where(.ds) :where(h1, h2, h3, p, figure, ol, ul) { margin: 0; }
.ds :is(h1, h2, h3) { font-weight: 550; letter-spacing: var(--ls-heading); text-wrap: balance; }
.ds p { text-wrap: pretty; }
.ds :is(a, button, input, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.ds button { font: inherit; cursor: pointer; }
.ds [hidden] { display: none !important; }

/* ── the character ─────────────────────────────────────────────── */
.dot-body { fill: var(--dot-body); }
.dot-eye { fill: var(--dot-eye); }
.dot-eye-shut { stroke: var(--dot-eye); }
.dot-shadow { fill: var(--dot-shadow); }
.dot-mark-fill { fill: var(--mark, var(--dot-cyan)); }
.dot-mark-ink { fill: var(--ink); }
.dot-mark-inkline { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dot-mark-puff { fill: var(--dot-puff); }
.dot-mark-body { fill: var(--dot-body); }
.ds-stage .dot-body { pointer-events: auto; }
/* A grabbable Dot takes the whole gesture, eyes included, so a drag on a
   phone moves Dot instead of scrolling the page. */
.ds-stage [data-grab] :is(.dot-body, .dot-face path) { pointer-events: auto; touch-action: none; }
.ds-stage [data-grab] { touch-action: none; cursor: grab; }
.ds-stage.is-holding [data-grab] { cursor: grabbing; }
.ds-stage .dot:focus { outline: none; }
/* Focus: a paper gap, then the ring, both following the body's outline. */
.dot-ring, .dot-ring-gap { fill: none; stroke-linejoin: round; display: none; pointer-events: none; }
.dot-ring { stroke: var(--focus); stroke-width: 14px; }
.dot-ring-gap { stroke: var(--paper); stroke-width: 6px; }
.ds-stage .dot:focus-visible :is(.dot-ring, .dot-ring-gap) { display: inline; }
[data-theme="dark"] .ds .dot-eye, [data-theme="dark"] .ds .dot-eye-shut { filter: drop-shadow(0 0 5px var(--dot-glow)); }

.ds-stage { position: relative; user-select: none; -webkit-user-select: none; }
.ds-stage > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ds-stage > .ds-still { position: absolute; width: auto; height: auto; }

/* ── controls ──────────────────────────────────────────────────── */
.ds-tool, .ds-button { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: var(--s2) var(--s4); border-radius: var(--r-pill); border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); font-size: var(--t-small); font-weight: 500; }
.ds-tool { padding-inline: 11px var(--s4); color: var(--ink-2); }
.ds-tool svg { width: 18px; height: 18px; }
@media (hover: hover) { .ds-tool:hover, .ds-button:hover { color: var(--ink); border-color: var(--ink-2); } }
.ds-button[aria-pressed]::after { content: ''; width: 26px; height: 16px; margin-left: var(--s1); border-radius: var(--r-pill); background: var(--rule-strong); box-shadow: inset -10px 0 0 2px var(--rule-strong), inset -10px 0 0 5px var(--paper); transition: background var(--d-hover) var(--ease-out), box-shadow var(--d-hover) var(--ease-out); }
.ds-button[aria-pressed="true"]::after { background: var(--accent); box-shadow: inset 10px 0 0 2px var(--accent), inset 10px 0 0 5px var(--paper); }
#ds-sound .ds-sound-waves { display: none; }
#ds-sound[aria-pressed="true"] { color: var(--ink); }
#ds-sound[aria-pressed="true"] .ds-sound-waves { display: inline; }
#ds-sound[aria-pressed="true"] .ds-sound-off { display: none; }
.ds-pause .ds-i-play, .ds-pause[aria-pressed="true"] .ds-i-pause { display: none; }
.ds-pause[aria-pressed="true"] .ds-i-play { display: inline; }
.ds-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.ds-range { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--t-caption); color: var(--ink-2); }
.ds-check { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: var(--t-small); color: var(--ink-2); cursor: pointer; }
.ds-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.ds input[type="range"] { accent-color: var(--accent); width: 100%; min-height: 32px; }
.ds-link { font-size: var(--t-small); }

/* ── the opening: the character stage (a recorded exception) ───── */
.ds-hero { position: relative; isolation: isolate; }
.ds-hero-inner { position: relative; min-height: clamp(520px, 72svh, 760px); padding-top: clamp(var(--s8), 6vw, var(--s12)); padding-bottom: var(--s10); }
.ds-hero-copy { position: relative; z-index: 1; }
/* The title is the stage's set, not a heading style: Dot wakes up as its
   full stop, so it is set large enough for a character to live in. */
.ds-title { font-size: clamp(4.5rem, 15vw, 13.25rem); line-height: .88; letter-spacing: -.06em; font-weight: 600; margin-left: -.04em; }
/* The full stop is a real circle on the baseline, so Dot can wake up
   exactly where it is. A visually hidden "." keeps the title whole. */
.ds-stop, .ds-outro-stop { display: inline-block; width: .15em; height: .15em; margin-left: .025em; border-radius: 50%; background: var(--dot-body); vertical-align: baseline; }
.ds.is-live .ds-stop { background: transparent; }
/* While Dot is away the title keeps its full stop, as a hollow ring. */
.ds.is-live .ds-stop.is-ring { box-shadow: inset 0 0 0 .02em var(--dot-body); }
.ds.is-live .ds-stop.is-back { background: var(--dot-body); animation: ds-plop 420ms var(--ease-out); }
@keyframes ds-plop { 0% { transform: translateY(-.12em) scale(1.3, .7); } 45% { transform: translateY(0) scale(.8, 1.25); } 100% { transform: none; } }
.ds-lede { margin-top: clamp(var(--s7), 4vw, var(--s10)); font-size: var(--t-section); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); font-weight: 550; }
.ds-claim { margin-top: var(--s4); max-width: 44ch; font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2); }
.ds-hint { margin-top: var(--s3); font-size: var(--t-lede); line-height: 1.5; color: var(--ink); }
.ds-hint-still { display: none; }
@media (prefers-reduced-motion: reduce) { .ds-hint-motion { display: none; } .ds-hint-still { display: inline; } }
/* The floor spans the container, not beyond it. */
.ds-hero-stage { position: absolute; inset: 0 max(var(--gutter), env(safe-area-inset-left)); z-index: 2; pointer-events: none; border-bottom: 1px solid var(--ink); }
.ds-hero-stage > .ds-still { right: 12%; bottom: 0; }
.ds-hero-tools { position: absolute; right: max(var(--gutter), env(safe-area-inset-right)); top: var(--s5); z-index: 3; display: flex; gap: var(--s2); }

/* ── sections ──────────────────────────────────────────────────── */
.ds-section { padding-top: var(--section-gap); }
/* Sections below the fold are laid out and painted only as they come
   near, so the first load does the opening and nothing else. */
.ds-section, .ds-outro { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
.ds-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5) var(--s10); align-items: end; margin-bottom: var(--s9); }
.ds-head h2 { font-size: var(--t-section); line-height: var(--lh-tight); }
.ds-head p { font-size: var(--t-prose); line-height: var(--lh-prose); color: var(--ink-2); max-width: 62ch; }

/* Diagrams: an SVG drawn at build time, with its labels set as HTML text
   over it, so they stay readable when the drawing scales down. */
.ds-diagram { position: relative; width: 100%; }
.ds-diagram > svg { display: block; width: 100%; height: 100%; }
.ds-labels { position: absolute; inset: 0; pointer-events: none; }
.ds-label { position: absolute; transform: translate(0, -50%); font-size: var(--t-caption); line-height: 1.2; color: var(--ink-2); white-space: nowrap; }
.ds-label[data-align="middle"] { transform: translate(-50%, -50%); }
.ds-label[data-align="end"] { transform: translate(-100%, -50%); }

/* ── made of almost nothing ────────────────────────────────────── */
.ds-anatomy { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s6) var(--s10); align-items: center; }
.ds-anatomy-fig { display: grid; gap: var(--s4); }
.ds-anatomy-fig .ds-leader { stroke: var(--rule-strong); stroke-dasharray: 2 3; fill: none; }
.ds-anatomy-fig .ds-lid { fill: var(--dot-body-2); }
.ds-anatomy-fig .ds-ghost { fill: none; stroke: var(--rule-strong); stroke-dasharray: 3 4; }
.ds-anatomy-fig .ds-range { max-width: 320px; }
.ds-anatomy-fig .ds-label { color: var(--ink); font-weight: 500; }
.ds-parts { list-style: none; padding: 0; display: grid; gap: var(--s4); }
.ds-parts li { font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-2); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.ds-parts strong { color: var(--ink); font-weight: 600; }

.ds-compare { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s6) var(--s10); align-items: end; margin-top: var(--s12); }
.ds-compare-stage { aspect-ratio: 16 / 7; border-bottom: 1px solid transparent; }
.ds-compare-stage > .ds-still { left: 22%; bottom: 28px; transform: translateX(-50%); }
.ds-compare figcaption { display: grid; gap: var(--s5); font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-2); }
.ds-compare figcaption strong { color: var(--ink); font-weight: 600; }

/* ── one engine, three places ──────────────────────────────────── */
.ds-proof-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.ds-proof-panel { display: grid; gap: var(--s3); align-content: start; }
.ds-proof-panel svg { display: block; width: 100%; height: auto; background: var(--paper-2); border-radius: var(--r-lg); overflow: hidden; }
.ds-proof-panel p { font-size: var(--t-caption); line-height: 1.45; color: var(--ink-2); }
.ds-proof-panel strong { display: block; font-size: var(--t-small); color: var(--ink); font-weight: 600; }
.ds-proof-floor { stroke: var(--ink); stroke-width: 1; }
.ds-proof-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s6); align-items: end; margin-top: var(--s5); }
.ds-proof-read { grid-column: 1 / -1; font-size: var(--t-small); color: var(--ink-2); min-height: 1.5em; }
.ds-proof[data-same="true"] .ds-proof-read { color: var(--ink); }
/* Laid on top of each other: if the three agree, one crisp Dot. */
.ds-proof.is-stacked .ds-proof-panels { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.ds-proof.is-stacked .ds-proof-panel { grid-area: 1 / 1; }
.ds-proof.is-stacked .ds-proof-panel p { display: none; }
.ds-proof.is-stacked .ds-proof-panel + .ds-proof-panel svg { background: transparent; opacity: .5; }

.ds-engine-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s8) var(--s10); margin-top: var(--s12); align-items: start; }
.ds-chart figcaption { margin-top: var(--s3); font-size: var(--t-caption); color: var(--ink-2); }
.ds-chart .ds-floor { stroke: var(--ink); }
.ds-chart .ds-tick { fill: var(--dot-body); }
.ds-chart .ds-curve { fill: none; stroke: var(--dot-body); stroke-width: 2; }
.ds-chart .ds-rest { stroke: var(--rule-strong); stroke-dasharray: 3 4; }
.ds-engine-copy { display: grid; gap: var(--s6); }
.ds-uses { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.ds-uses li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-body); color: var(--ink-2); }
.ds-uses strong { color: var(--ink); font-weight: 600; }
.ds-sample { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: var(--s3); align-items: stretch; }
.ds-sample-stage { border-radius: var(--r-lg); background: var(--paper-2); min-height: 120px; overflow: hidden; }
.ds-code { margin: 0; padding: var(--s4); border-radius: var(--r-lg); background: var(--paper-2); font: var(--t-caption)/1.7 var(--mono); overflow-x: auto; color: var(--ink); }

/* ── how are you, Dot? ─────────────────────────────────────────── */
.ds-mood-grid { display: grid; grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); gap: var(--s6) var(--s10); align-items: stretch; }
.ds-pad-wrap { display: flex; flex-direction: column; gap: var(--s5); }
/* The pad is the visual: a field that blends the four scene tints. */
.ds-pad { position: relative; aspect-ratio: 1; border-radius: var(--r-2xl); background: linear-gradient(90deg, var(--dot-scene-worried), var(--dot-scene-wired)); border: 1px solid var(--rule); touch-action: none; cursor: crosshair; overflow: hidden; isolation: isolate; }
.ds-pad::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--dot-scene-sleepy), var(--dot-scene-chuffed)); -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.ds-corner { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s3); font-size: var(--t-caption); color: var(--ink-2); }
.ds-corner svg { width: 40px; height: 40px; transition: transform var(--d-hover) var(--ease-out); }
.ds-corner[data-corner^="t"] { top: 0; } .ds-corner[data-corner^="b"] { bottom: 0; }
.ds-corner[data-corner$="l"] { left: 0; } .ds-corner[data-corner$="r"] { right: 0; }
.ds-corner.is-near { color: var(--ink); }
.ds-corner.is-near svg { transform: scale(1.15); }
.ds-pad-handle { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--paper), var(--shadow-card); pointer-events: none; }
.ds-pad.is-dragging .ds-pad-handle, .ds-pad:focus-visible .ds-pad-handle { box-shadow: 0 0 0 6px var(--paper), var(--shadow-lift); }
.ds-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.ds-scene { position: relative; border-radius: var(--r-2xl); background: var(--dot-scene-chuffed); min-height: 420px; overflow: hidden; display: flex; flex-direction: column; }
.ds-scene .ds-stage { flex: 1; min-height: 340px; }
.ds-scene .ds-still { left: 50%; bottom: 64px; transform: translateX(-50%); }
.ds-scene figcaption { position: absolute; left: var(--s6); top: var(--s5); right: var(--s6); display: flex; flex-direction: column; gap: var(--s1); }
.ds-scene figcaption strong { font-size: var(--t-title); font-weight: 550; letter-spacing: var(--ls-heading); color: var(--ink); }
.ds-scene figcaption span { font-size: var(--t-small); color: var(--ink-2); }

/* ── at work ───────────────────────────────────────────────────── */
.ds-work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8) var(--s6); }
.ds-vignette { display: flex; flex-direction: column; gap: var(--s3); }
.ds-vignette h3 { font-size: var(--t-title); line-height: var(--lh-tight); }
/* Each vignette is a product frame: Signal Studio's own interface. */
.ds-ui { position: relative; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); min-height: 290px; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); overflow: hidden; box-shadow: var(--shadow-card); }
.ds-ui-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); font-weight: 600; font-size: var(--t-small); position: relative; z-index: 3; }
.ds-ui-btn { min-height: 44px; padding: 6px var(--s3); border-radius: var(--r-md); border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); font-size: var(--t-caption); font-weight: 500; }
@media (hover: hover) { .ds-ui-btn:hover { border-color: var(--ink-2); } .ds-ui-primary:hover { opacity: .88; } }
.ds-ui-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ds-mini { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ds-ui-list { list-style: none; padding: 0; display: grid; gap: var(--s2); position: relative; z-index: 3; }
.ds-ui-list li { display: flex; align-items: center; gap: 10px; font-size: var(--t-small); padding: var(--s2) 10px; border-radius: var(--r-md); background: var(--paper-2); animation: ds-in 320ms var(--ease-out); }
.ds-ui-list li::before { content: ''; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--rule-strong); }
@keyframes ds-in { from { opacity: 0; transform: translateY(-6px); } }
.ds-ui-empty { font-size: var(--t-small); color: var(--ink-2); position: relative; z-index: 3; }
.ds-drop { position: relative; z-index: 1; flex: 1; min-height: 150px; border: 1.5px dashed var(--rule-strong); border-radius: var(--r-lg); display: grid; place-items: start center; padding-top: var(--s4); font-size: var(--t-small); color: var(--ink-2); }
.ds-drop.is-over { border-color: var(--dot-body); color: var(--ink); }
.ds-drop.is-done { border-style: solid; border-color: var(--dot-ok); color: var(--dot-ok); }
.ds-chip { position: absolute; z-index: 4; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--rule-strong); box-shadow: var(--shadow-card); font-size: var(--t-caption); cursor: grab; touch-action: none; user-select: none; }
.ds-chip svg { width: 14px; height: 14px; }
.ds-chip.is-dragging { cursor: grabbing; box-shadow: var(--shadow-lift); }
.ds-chip.is-gone { opacity: 0; transition: opacity 160ms; }
.ds-track { position: relative; z-index: 1; height: 10px; border-radius: var(--r-pill); background: var(--paper-3); margin-top: var(--s12); overflow: hidden; }
.ds-fill { position: absolute; inset: 0; background: var(--dot-body); border-radius: inherit; transform-origin: left; transform: scaleX(0); transition: transform 280ms var(--ease-out); }
.ds-fill.is-done { background: var(--dot-ok); }
.ds-ui-note { font: var(--t-machine)/1.4 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ds-field { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-caption); color: var(--ink-2); max-width: 260px; }
.ds-field input { font: inherit; font-size: var(--t-small); color: var(--ink); padding: 9px 11px; border-radius: var(--r-md); border: 1px solid var(--rule-strong); background: var(--paper); }
.ds-field.is-error input { border-color: var(--dot-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot-error) 18%, transparent); }
.ds-field.is-ok input { border-color: var(--dot-ok); }
.ds-field-msg { position: relative; z-index: 3; min-height: 1.4em; font-size: var(--t-caption); color: var(--dot-error); }
.ds-field-msg.is-ok { color: var(--dot-ok); }
.ds-ui-actions { position: relative; z-index: 3; display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ── films ─────────────────────────────────────────────────────── */
.ds-film-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s9) var(--s6); }
.ds-film-lead { grid-column: 1 / -1; }
.ds-film:not(.ds-film-lead) .ds-film-bar { flex-direction: column; align-items: stretch; gap: var(--s3); }
.ds-film:not(.ds-film-lead) .ds-film-controls { flex-basis: auto; }
.ds-film-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-2xl); overflow: hidden; background: var(--dot-set); }
.ds-film-stage { position: absolute; inset: 0; }
.ds-film-stage > svg { display: block; width: 100%; height: 100%; }
.ds-film-nojs { position: absolute; inset: 0; display: grid; place-content: center; padding: 10%; text-align: center; font-size: var(--t-small); color: var(--ink-2); gap: var(--s2); }
.ds-film-nojs span { display: block; }
.js .ds-film-nojs { display: none; }
.ds-film-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); margin-top: var(--s4); }
.ds-film-title h3 { font-size: var(--t-title); line-height: var(--lh-tight); }
.ds-film-title p { margin-top: var(--s1); font-size: var(--t-small); color: var(--ink-2); }
.ds-film-controls { display: flex; align-items: center; gap: var(--s3); flex: 0 1 360px; min-width: 200px; }
.ds-film-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.ds-film-play svg { width: 18px; height: 18px; }
.ds-film-play .ds-i-pause, .ds-film.is-playing .ds-film-play .ds-i-play { display: none; }
.ds-film.is-playing .ds-film-play .ds-i-pause { display: inline; }
.ds-film-scrub { flex: 1; min-width: 0; }
.ds-film-time { font: var(--t-machine)/1 var(--mono); color: var(--ink-2); min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
.ds-written { margin-top: 10px; font-size: var(--t-small); color: var(--ink-2); }
.ds-written summary { cursor: pointer; color: var(--accent); min-height: 44px; display: inline-flex; align-items: center; }
.ds-written p { margin-top: 6px; max-width: 64ch; line-height: var(--lh-body); }
/* The film sets: SVG fills from tokens so a set can follow the theme. */
/* Dot shorts: storyboards played live. The boards' own set tokens, mapped to
   the page's, so a short sits in the page's light and dark like the films. */
/* Off screen, the shorts cost the page no layout until they come near. */
.ds-shorts { content-visibility: auto; contain-intrinsic-size: auto 1200px; }
.ds-short-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s9) var(--s6); }
.ds-short-frame { --card: var(--paper); --paper-in: var(--paper); --line: var(--dot-set-3); --track: var(--dot-set-2); --keyside: var(--dot-set-3); --set: var(--dot-set);
  --muted: var(--dot-set-ink); --ok: var(--dot-ok); --red: var(--dot-error); --cyan: var(--dot-cyan); --peach: var(--dot-peach); --lime: var(--dot-lime); --rose: var(--dot-rose); }
.ds-short-frame .s-bg { fill: var(--dot-set); }
.ds-short-frame .s-card { fill: var(--card); stroke: var(--line); stroke-width: 1; }
.ds-short-frame .s-plain { fill: var(--card); }
.ds-short-frame .s-keyside { fill: var(--keyside); }
.ds-short-frame .s-track { fill: var(--track); }
.ds-short-frame .s-fill { fill: var(--dot-body); }
.ds-short-frame .s-done { fill: var(--ok); }
.ds-short-frame .s-ink { fill: var(--ink); }
.ds-short-frame .s-muted { fill: var(--muted); }
.ds-short-frame .s-red { fill: var(--red); }
.ds-short-frame .s-floor { stroke: var(--ink); stroke-width: .75; }
.ds-short-frame .s-tick { fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ds-short-frame .s-squiggle { fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ds-short-frame .s-marquee { fill: color-mix(in srgb, var(--dot-body) 8%, transparent); stroke: var(--dot-body); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ds-short-frame .s-cursor { fill: var(--ink); stroke: var(--paper); stroke-width: 1.4; stroke-linejoin: round; }
.ds-short-frame .s-type { font-family: var(--ui); font-weight: 600; letter-spacing: -.03em; }
.ds-short-frame .s-small { font-family: var(--ui); font-weight: 500; }
.ds-short-frame .s-key { font-family: var(--ui); font-weight: 600; }
/* Lights out: only the eyes are left. */
.ds-short-frame.is-dark .s-bg { fill: #0b0a11; }
.ds-short-frame.is-dark .dot-body { fill: #17152b; }
.ds-short-frame.is-dark .dot-shadow { display: none; }
.ds-short-frame.is-dark .dot-eye, .ds-short-frame.is-dark .dot-eye-shut { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .85)); }
/* ⌘Z: the rewind, as tape. */
.ds-short-frame.is-rewind::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--dot-body) 7%, transparent) 0 2px, transparent 2px 5px), color-mix(in srgb, var(--dot-body) 8%, transparent); }
.ds-short-frame.is-rewind::before { content: "◀◀"; position: absolute; top: 6%; right: 4%; z-index: 1; font: 600 var(--t-small)/1 var(--ui); letter-spacing: -.1em; color: var(--dot-body); }
/* Faces 2 on the page: welling eyes, and steam. */
.dot-eye-water { fill: color-mix(in srgb, var(--dot-cyan) 70%, var(--dot-white)); }
.dot-mark-steam { fill: var(--paper); stroke: var(--dot-set-ink); stroke-width: 1.4; stroke-linejoin: round; }
.fs-bg { fill: var(--dot-set); }
.fs-card { fill: var(--paper); stroke: var(--dot-set-3); }
.fs-soft { fill: var(--dot-set-2); }
.fs-mid { fill: var(--dot-set-3); }
.fs-line { stroke: var(--dot-set-3); }
.fs-floor { stroke: var(--ink); }
.fs-ink { fill: var(--ink); }
.fs-quiet { fill: var(--dot-set-ink); }
.fs-text { font-family: var(--ui); font-weight: 600; letter-spacing: -.03em; }
.fs-mono { font-family: var(--mono); font-weight: 500; letter-spacing: .04em; }
.fs-typo { stroke: var(--dot-error); fill: none; stroke-width: 3; stroke-linecap: round; }
.fs-caret { fill: var(--dot-body); }
.fs-toggle { fill: var(--dot-set-3); }
.fs-toggle.is-on { fill: var(--dot-body); }
.fs-knob { fill: var(--paper); }
.fs-dim { fill: var(--dot-set); }
.fs-c1 { fill: var(--dot-cyan); } .fs-c2 { fill: var(--dot-peach); } .fs-c3 { fill: var(--dot-lime); } .fs-c4 { fill: var(--dot-rose); } .fs-c5 { fill: var(--dot-body); }

/* ── out in the world ──────────────────────────────────────────── */
.ds-world-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8) var(--s6); }
.ds-object { display: flex; flex-direction: column; gap: var(--s3); }
.ds-object-art { position: relative; aspect-ratio: 1; border-radius: var(--r-2xl); background: var(--dot-set); display: grid; place-items: center; overflow: hidden; }
.ds-object-art > svg { width: 78%; height: auto; }
/* The sheet is its own card: it sits on the page, not in a second one. */
.ds-object-wide { grid-column: span 2; grid-row: span 2; }
.ds-object-wide .ds-object-art { aspect-ratio: auto; flex: 1; background: none; place-items: start center; }
.ds-object-wide .ds-object-art > svg { width: 100%; }
.ds-object-loader .ds-object-art > svg { width: 100%; height: 100%; }
.ds-object-loader .ds-still { width: 36%; }
/* The claimed sizes, shown at that size. */
.ds-actual { position: absolute; left: var(--s4); bottom: var(--s4); display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-card); font-size: var(--t-caption); color: var(--ink); }
/* The icon square is 180 of the drawing's 240 units: 29 px square. */
.ds-actual-icon, .ds-actual-icon svg { display: block; width: 38.67px; height: 38.67px; }
.ds-actual:has(.ds-actual-icon) { padding: 4px; }
.ds-actual-tab { display: block; width: 16px; height: 16px; }
.ds-object figcaption { font-size: var(--t-small); color: var(--ink-2); line-height: var(--lh-body); }
.ds-object figcaption strong { color: var(--ink); font-weight: 600; }

/* ── the finale: a bookend ─────────────────────────────────────── */
.ds-outro { padding-top: var(--section-gap); padding-bottom: var(--s10); text-align: center; }
.ds-outro-stage-wrap { position: relative; padding-top: var(--s12); }
.ds-outro-title { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.ds-outro-stop.is-dot { background: transparent; }
.ds-rider { position: absolute; inset: 0; pointer-events: none; }
.ds-credits { margin: var(--s6) auto 0; max-width: 52ch; font-size: var(--t-small); color: var(--ink-2); line-height: var(--lh-body); }
.ds-next { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--rule); font-size: var(--t-title); letter-spacing: var(--ls-heading); font-weight: 550; }

/* ── widths ────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .ds-head, .ds-mood-grid, .ds-anatomy, .ds-engine-grid, .ds-compare { grid-template-columns: minmax(0, 1fr); }
  .ds-head { align-items: start; }
  .ds-pad-wrap { max-width: 440px; }
  .ds-work-grid, .ds-film-list { grid-template-columns: 1fr; }
  .ds-short-list { grid-template-columns: 1fr 1fr; }
  .ds-film-bar { flex-direction: column; align-items: stretch; }
  .ds-film-controls { flex-basis: auto; }
  .ds-world-grid { grid-template-columns: 1fr 1fr; }
  .ds-object-wide { grid-row: auto; }
  .ds-object-wide .ds-object-art { aspect-ratio: 520 / 380; }
}
@media (max-width: 760px) {
  .ds-short-list { grid-template-columns: minmax(0, 1fr); }
  .ds-hero-inner { min-height: 560px; }
  .ds-hero-tools { top: auto; bottom: var(--s4); right: auto; left: max(var(--gutter), env(safe-area-inset-left)); }
  /* Icons only on a phone, so the three controls leave Dot room to land;
     each keeps its name for assistive technology. */
  .ds-hero-tools .ds-tool { width: 44px; padding: 0; justify-content: center; }
  .ds-hero-tools .ds-tool span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ds-proof-panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ds-proof-panel[data-proof="build"] { grid-column: 1 / -1; width: 50%; justify-self: center; }
  .ds-proof-bar { grid-template-columns: minmax(0, 1fr); }
  .ds-sample { grid-template-columns: minmax(0, 1fr); }
  .ds-sample-stage { min-height: 140px; }
  .ds-world-grid { gap: var(--s6) var(--s3); }
  .ds-object-wide { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .ds *, .ds *::before, .ds *::after { animation: none !important; transition-property: opacity, color, background-color, border-color, fill !important; }
}