/* Inside a Heartbeat, design pass 2026-09-27: "The Atlas". The page is the paper of an anatomy atlas, so the plates sit on it
   with no frame. Light only: the plates are drawn on white and multiply onto the paper.
   Colour meaning: blue and red are the blood, gold is the electrical signal and nothing else; every UI state is ink, with a shape. */
:root {
  --paper: #f3efe6; --paper2: #ebe5d8; --paper-hi: #fbfaf6;
  --ink: #16171b; --ink2: #4e4b45; --ctl: #77726a; --rule: rgba(22, 23, 27, .16); --rule2: rgba(22, 23, 27, .28);
  --red: #a3302a; --blue: #2a6bff; --gold: #ffb229; --night: #0b0d11;
  --serif: "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);    /* two-tone: ink on paper, paper on the dark grounds */
  --ease: cubic-bezier(.22, .8, .24, 1);
  --hdr: 76px; --stepH: 180px; --gut: clamp(16px, 4vw, 64px);
  --exploration-footer-bg: var(--paper2); --exploration-footer-ink: var(--ink); --exploration-footer-border: var(--rule2);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: clamp(15px, 0.86rem + 0.18vw, 17px)/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; padding-bottom: var(--consent-h, 0px); }
html.locked, body.locked { overflow: hidden; }
::selection { background: #e7c7bf; color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-underline-offset: 3px; }
img { max-width: 100%; }
svg { flex: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; min-height: 44px; display: inline-flex; align-items: center; background: var(--ink); color: var(--paper); padding: 0 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }
:where(a, button, [tabindex], summary, video):focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
kbd { font: 500 12px var(--mono); border: 1px solid var(--ctl); border-radius: 4px; padding: 0 5px; color: var(--ink); background: var(--paper-hi); }
em { font-style: italic; }
.f { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent;
  font: 600 16px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color .2s var(--ease), transform .2s var(--ease); }
.btn:hover { background: var(--paper2); }
.btn:active { transform: translateY(1px); }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: #2a2b31; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn small, .dur { font: 500 13px var(--mono); opacity: .78; }

/* ---------------------------------------------------------------- top bar */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; min-height: var(--hdr); padding: 0 clamp(16px, 3vw, 40px);
  background: rgba(243, 239, 230, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; white-space: nowrap; min-height: 44px; }
.brand img { height: 22px; width: auto; display: block; }
.brand span { color: var(--ink2); font-size: 15px; }
.tname { margin: 0; padding-left: 18px; border-left: 1px solid var(--rule2); font: 500 25px/1 var(--serif); letter-spacing: -.005em; white-space: nowrap; }
.acts { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.act { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 13px; border-radius: 999px; border: 0; background: none; font: 500 15px/1 var(--sans);
  text-decoration: none; white-space: nowrap; transition: background-color .2s var(--ease); }
.act:hover { background: var(--paper2); }
.act svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.act[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.create { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 7px 0 20px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap; }
.create i { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(243, 239, 230, .16); transition: transform .25s var(--ease); }
.create:hover i { transform: translate(2px, -1px); }
.create svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- hero: the plate on the page, no frame */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); column-gap: 32px; min-height: min(calc(100svh - var(--hdr)), 1000px); padding: 0 var(--gut); }
.hero-copy { align-self: center; padding: 32px 0 calc(110px + var(--consent-h, 0px)); max-width: 610px; }   /* while the consent card shows, the call to action rises above it */
h1 { margin: 0; font: 400 clamp(60px, 7.2vw, 128px)/.9 var(--serif); letter-spacing: -.025em; }
h1 span { display: block; }
.sub { margin: 18px 0 0; font: italic 400 clamp(23px, 2vw, 34px)/1.15 var(--serif); color: var(--red); }
.lede-sm { display: none; }
.what { list-style: none; margin: 28px 0 0; padding: 0; max-width: 48ch; color: var(--ink2); font-size: clamp(15.5px, .9rem + .2vw, 17.5px); }
.what li { padding: 9px 0; border-top: 1px solid var(--rule); }
.what li:last-child { border-bottom: 1px solid var(--rule); }
.what b { color: var(--ink); font-weight: 600; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-fig { margin: 0; align-self: center; display: flex; flex-direction: column; align-items: center; padding: 20px 0 92px; }
.hero-plate { position: relative; background: var(--paper); }
.hero-plate img { display: block; height: min(calc(100svh - var(--hdr) - 180px), 860px); width: auto; aspect-ratio: 4 / 5; }
.tag { position: absolute; left: 76%; bottom: 2.5%; white-space: nowrap; display: inline-flex; align-items: center; gap: 14px; padding: 7px 22px 7px 7px; border-radius: 999px; background: var(--paper-hi);
  border: 1.5px solid var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; line-height: 1.2; box-shadow: 0 14px 34px -16px rgba(22, 23, 27, .45); transition: transform .25s var(--ease); }
.tag:hover { transform: translateY(-2px); }
/* narrower screens: the tag moves under the plate, never over the anatomy */
@media (max-width: 1200px) { .tag { position: static; margin-top: 10px; align-self: flex-start; } .hero-plate { display: flex; flex-direction: column; align-items: center; } }
/* while the shared runtime's consent card shows, the hero's buttons come before the three lines so the card never covers them */
@media (min-width: 981px) { .consenting .hero-copy { display: flex; flex-direction: column; } .consenting .hero-cta { order: 1; margin-top: 24px; } .consenting .what { order: 2; margin-top: 26px; } }
.tag i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--paper); }
.tag i svg { width: 18px; height: 18px; fill: currentColor; margin-left: 3px; }
.tag small { display: block; margin-top: 2px; font: 500 12.5px var(--mono); color: var(--ink2); }
.figcap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; max-width: 100%; font: italic 400 17px/1.3 var(--serif); color: var(--ink2); }
.figcap b { font: 500 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); font-style: normal; }
.hero-key { display: inline-flex; gap: 14px; font: 500 13px/1.2 var(--sans); font-style: normal; color: var(--ink); }
.hero-key .k, .key .k { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hero-foot { position: absolute; left: var(--gut); right: var(--gut); bottom: 0; margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0 12px; border-top: 1.5px solid var(--ink); font: 500 12.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
/* the page's one authored moment: a single beat drawn along the rule under the hero */
.hero-foot .pulse { position: absolute; right: 22%; top: -26.5px; width: 180px; height: 28px; overflow: visible; }
.pulse path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: beat-draw 1.6s var(--ease) .5s both; }
@keyframes beat-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.hero-foot a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; }
.hero-foot a:hover { text-decoration: underline; }
.hero-foot a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- explorer */
.explore { padding: 28px var(--gut) clamp(48px, 6vw, 88px); scroll-margin-top: var(--hdr); overflow-anchor: none; }   /* the heart stays put while the caption changes length */
/* round 2: the plate on the left, its facing page on the right (the caption, the beat, what you see, then the text) */
.ex-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 29vw, 440px); grid-template-areas: "viewer head" "viewer stepper" "viewer panel"; grid-template-rows: auto auto 1fr;
  column-gap: clamp(28px, 3.5vw, 56px); align-items: start; max-width: 1720px; margin: 0 auto; }
.ex-head { grid-area: head; padding-top: 4px; }
.secno { margin: 0 0 6px; font: 500 15px/1 var(--serif); letter-spacing: .14em; color: var(--red); }
.ex-head h2 { font-size: clamp(34px, 1.6vw + 18px, 46px); }
.hint { margin: 10px 0 0; font-size: 15px; color: var(--ink2); }
.hint { transition: opacity .3s var(--ease); }
.hint.gone { opacity: 0; visibility: hidden; }   /* keeps its line, so nothing jumps under the visitor's finger */
h2 { margin: 0; font: 400 clamp(40px, 4.2vw, 72px)/1 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
h2 em { color: var(--red); }
.viewer { grid-area: viewer; grid-row: 1 / 4; position: sticky; top: calc(var(--hdr) + 14px); min-width: 0; background: var(--paper); container-type: inline-size; }
.viewer.has-key { position: static; }
.stepper { grid-area: stepper; min-width: 0; }
.panel { grid-area: panel; min-width: 0; }

/* frame and art box: on the plate look the frame is the page itself */
.frame { position: relative; height: max(300px, min(calc(100svh - var(--hdr) - 28px - var(--consent-h, 0px)), calc((100cqw - 260px) * 1.25))); container-type: size; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; overflow: hidden; user-select: none; -webkit-user-select: none; background: var(--night); }
.frame.paper { background: var(--paper); border-radius: 0; }
.frame.ground-wc { background: #f6efe3; }
.frame.ground-black { background: #010101; }
.frame.ground-dark { background: var(--night); }
.art { position: relative; width: min(100cqw, 80cqh); aspect-ratio: 4 / 5; flex: none; }
.art > img, .cmp-layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.frame.paper > .art > img, .hero-plate img, .cmp-layer.paper img { mix-blend-mode: multiply; filter: url(#paperclean);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent); mask-composite: intersect; }
.frame.feather > .art > img, .cmp-layer.feather img {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent); mask-composite: intersect; }
.frame.d3-ready > .art > img { visibility: hidden; }
.cmp-layer { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; container-type: size; background: var(--night); }
.cmp-layer[hidden] { display: none; }
.cmp-layer.paper { background: var(--paper); }
model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; background: transparent; --poster-color: transparent; }
model-viewer[hidden] { display: none !important; }

/* on-image caption: stage name, colour key, narration line */
.onimg-title { position: absolute; left: 3%; top: 2.5%; z-index: 5; max-width: 72%; padding: 2px 10px 5px; border-radius: 6px; pointer-events: none;
  font: 400 clamp(19px, 2.6cqh + 4px, 30px)/1.1 var(--serif); color: var(--ink); background: rgba(243, 239, 230, .86); }
.onimg-title .n { font: 500 max(12px, .56em)/1 var(--mono); vertical-align: .22em; margin-right: 5px; color: var(--ink2); }
.bottom-band { position: absolute; left: 3%; right: 3%; bottom: 2.4%; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.key { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; padding: 5px 10px; border-radius: 6px; font: 500 13px/1.35 var(--sans); color: var(--ink); background: rgba(243, 239, 230, .9); max-width: 100%; }
.key .kn { color: var(--ink2); font-weight: 400; white-space: normal; }
.key .sw, .hero-key .sw { display: inline-block; flex: none; }
.key.empty { font-style: italic; font-weight: 400; }
.key[hidden] { display: none; }
.lbl-name { margin: 0; padding: 4px 10px; border-radius: 6px; font: 600 13px/1.3 var(--sans); color: #fff; background: rgba(22, 23, 27, .9); }
.lbl-name[hidden] { display: none; }
.frame.comparing .key { display: none; }
.frame.comparing .onimg-title { background: var(--paper-hi); color: var(--ink); }
.caption { margin: 0; padding: 7px 12px; border-radius: 6px; font: 500 clamp(13px, 1.1cqw + 9px, 16px)/1.4 var(--sans); color: #fff; background: rgba(22, 23, 27, .9); max-width: 100%; }
.caption[hidden] { display: none; }
@container (max-width: 620px) { .speaking .key { display: none; } }
@container (max-height: 380px) { .key .kn { display: none; } .key { gap: 2px 10px; padding: 4px 8px; font-size: 12px; } .key .sw { width: 24px; } }
.frame:not(.paper) .onimg-title, .frame:not(.paper) .key { color: #efece6; background: rgba(11, 13, 17, .8); }
.frame:not(.paper) .onimg-title .n, .frame:not(.paper) .key .kn { color: #b9bcc3; }
.frame.ground-wc .onimg-title, .frame.ground-wc .key { color: var(--ink); background: rgba(251, 250, 246, .86); }
.frame.ground-wc .onimg-title .n, .frame.ground-wc .key .kn { color: var(--ink2); }
.frame-note { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); z-index: 6; margin: 0; width: max-content; max-width: 88%; padding: 8px 14px; border-radius: 10px;
  font-size: 14px; color: var(--paper); background: rgba(22, 23, 27, .92); text-align: center; }
.frame-note[hidden] { display: none; }

/* compare: images, split handle and side labels in one box sized to the image */
.cmp-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 44px; margin-left: -22px; z-index: 5; cursor: ew-resize; touch-action: pan-y; }
.cmp-handle[hidden] { display: none; }
.cmp-handle::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: var(--ink); box-shadow: 0 0 0 1px #fff; }
.cmp-handle .knob { touch-action: none; position: absolute; left: 6px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink); box-shadow: 0 1px 6px #0006; }
.cmp-handle .knob::before, .cmp-handle .knob::after { content: ""; position: absolute; top: 50%; margin-top: -5px; border: 5px solid transparent; }
.cmp-handle .knob::before { left: 3px; border-right-color: var(--ink); }
.cmp-handle .knob::after { right: 3px; border-left-color: var(--ink); }
.cmp-handle .side { position: absolute; top: calc(50% + 24px); padding: 3px 8px; border-radius: 5px; font: 600 12px/1.2 var(--sans); white-space: nowrap; color: var(--ink); background: rgba(251, 250, 246, .94); border: 1px solid rgba(22, 23, 27, .35); pointer-events: none; }
.cmp-handle .side.l { right: 30px; }
.cmp-handle .side.r { left: 30px; }
.cmp-handle:focus-visible { box-shadow: none; }
.cmp-handle:focus-visible .knob { box-shadow: var(--ring); }

/* labels: ink on paper, light on the dark grounds */
.lbl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.lbl text { font: 500 13.5px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.lbl polyline { stroke: var(--ink2); stroke-width: 1; fill: none; }
.lbl circle { fill: var(--ink); stroke: var(--paper-hi); stroke-width: 1.5; }
.lbl .num circle { fill: var(--ink); stroke: #fff; stroke-width: 1.5; }
.lbl .num text { fill: #fff; stroke: none; font: 600 12px var(--sans); pointer-events: none; }
.lbl .num { pointer-events: auto; cursor: pointer; }
.lbl .num circle.hit, .frame.dark-labels .lbl .num circle.hit { fill: transparent; stroke: none; }
.frame.dark-labels .lbl text { fill: #f1eee8; stroke: #0b0c10; }
.frame.dark-labels .lbl polyline { stroke: #d9d4ca; }
.frame.dark-labels .lbl circle { fill: #f1eee8; stroke: #0b0c10; }
.frame.dark-labels .lbl .num circle { fill: #f1eee8; stroke: #0b0c10; }
.frame.dark-labels .lbl .num text { fill: var(--ink); }

.fs { position: absolute; top: 10px; right: 10px; z-index: 6; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--paper-hi); color: var(--ink); border: 1.5px solid var(--ctl); }
.fs:hover { border-color: var(--ink); }
.fs svg { width: 18px; height: 18px; }
.fs[hidden] { display: none; }
.onimg-title { display: none; }
.frame:fullscreen .onimg-title { display: block; }
/* the end of the guided beat: a card on the plate that stays until the visitor chooses */
.endcard { position: absolute; z-index: 9; left: 50%; bottom: 5%; transform: translateX(-50%); width: min(540px, 92%); padding: 18px 20px 20px; border-radius: 16px; background: var(--paper-hi);
  border: 1.5px solid var(--ink); box-shadow: 0 24px 50px -24px rgba(22, 23, 27, .5); text-align: center; animation: rise .3s var(--ease); }
.endcard[hidden] { display: none; }
.end-t { margin: 0; font: 400 28px/1.1 var(--serif); }
.end-s { margin: 6px 0 14px; font-size: 14.5px; color: var(--ink2); }
.end-a { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.end-a .btn { min-height: 46px; padding: 0 16px; font-size: 14.5px; }

/* ---------------------------------------------------------------- the facing page: the caption, the beat, what you see */
.cap { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 12px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1.5px solid var(--ink); }
.cap-txt { margin: 0; min-width: 0; }
.cap .of { display: block; font: 500 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.cap .nm { display: block; margin-top: 4px; font: 400 clamp(22px, .7vw + 16px, 29px)/1.15 var(--serif); text-wrap: balance; }
.cap .term { display: block; margin-top: 5px; font-size: 14px; color: var(--ink2); }
.sq { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--ctl); background: transparent; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.sq:hover { border-color: var(--ink); background: var(--paper2); }
.sq svg, .close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.beat { margin-top: 14px; }
.beat-ecg { display: block; width: 100%; height: 24px; overflow: visible; }
.segs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--rule2); container-type: inline-size; }
.segs button { position: relative; min-height: 50px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: -2px; padding: 6px 4px 9px; border: 0; border-top: 3px solid transparent;
  background: none; text-align: left; font: 500 12.5px/1.2 var(--sans); color: var(--ink2); transition: background-color .2s var(--ease), color .2s var(--ease); }
.segs button b { font: 500 12px/1 var(--mono); }
.segs button:hover { color: var(--ink); background: var(--paper2); }
.segs button[aria-pressed="true"] { color: var(--ink); font-weight: 600; border-top-color: var(--ink); }
.segs button.done { color: var(--ink); }
.segs button.done::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 2px; background: var(--ink); }
.segs .prog { position: absolute; left: 4px; bottom: 2px; height: 4px; width: 0; max-width: calc(100% - 8px); border-radius: 2px; background: var(--gold); box-shadow: 0 0 0 1px var(--ink); display: none; }
.segs button.live .prog { display: block; }
@container (max-width: 380px) { .segs button { align-items: center; } .segs button span { display: none; } .segs button b { font-size: 14px; } }
.transport { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.btn.play { min-height: 52px; }
.tog { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 15px; border-radius: 999px; border: 1.5px solid var(--ctl); background: transparent; font: 600 14.5px/1 var(--sans); color: var(--ink);
  transition: border-color .2s var(--ease); }
.tog svg { width: 17px; height: 17px; }
.tog:hover { border-color: var(--ink); }
.tog[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tog[aria-pressed="true"]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.tog:disabled { opacity: .45; cursor: not-allowed; }
.viewrow { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule2); }
.vr-h { margin: 0 0 8px; font: 600 14.5px/1.2 var(--sans); }
.vlayers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.vlayers button { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 6px 4px 7px; border: 1.5px solid transparent; border-radius: 12px; background: none;
  font: 500 13px/1.2 var(--sans); color: var(--ink2); text-align: center; transition: background-color .2s var(--ease); }
.vlayers img { width: 100%; max-width: 64px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; background: #fff; border: 1px solid var(--rule); }
.vlayers button:hover { background: var(--paper2); color: var(--ink); }
.vlayers button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.vline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.vswitch { display: inline-flex; padding: 3px; border: 1.5px solid var(--ctl); border-radius: 999px; }
.vswitch button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 1.5px solid transparent; border-radius: 999px; background: none; font: 500 14px/1 var(--sans); color: var(--ink2); white-space: nowrap; }
.vswitch svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.vswitch button:hover { color: var(--ink); }
.vswitch button[aria-pressed="true"] { border-color: var(--ink); background: var(--paper-hi); color: var(--ink); font-weight: 600; }
.vhint { margin: 10px 0 0; font-size: 13.5px; color: var(--ink2); max-width: 60ch; }
.vlayers.muted, .segs.muted { opacity: .55; }
.more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink2); }
.more-h { width: 100%; margin-bottom: 2px; font-weight: 600; color: var(--ink); }
.more button { min-height: 40px; min-width: 44px; padding: 0; border: 0; background: none; font: 500 14px/1.2 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--ctl); text-underline-offset: 3px; }
.more button:hover { text-decoration-color: var(--ink); }
.more button[aria-pressed="true"] { font-weight: 600; text-decoration-thickness: 2px; text-decoration-color: var(--ink); }
.more button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.more-g { display: inline-flex; gap: 12px; }
.more-g[hidden], .more button[hidden] { display: none; }
.more .look-note { width: 100%; margin: 4px 0 0; font-size: 13px; }
.lbl-key { margin: 12px 0 0; padding: 10px 12px; list-style: none; columns: 2; column-gap: 16px; font-size: 13.5px; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); }
.lbl-key[hidden] { display: none; }
.lbl-key li { break-inside: avoid; padding: 2px 0; display: flex; gap: 8px; align-items: baseline; }
.lbl-key b { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 600 12px var(--sans); }

/* segmented controls: one outline, the pressed option filled with ink */
.seg { display: inline-flex; flex-wrap: nowrap; gap: 0; padding: 3px; border: 1.5px solid var(--ctl); border-radius: 999px; }
.seg button { min-height: 38px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: background-color .2s var(--ease); }
.seg button:hover { background: var(--paper2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); font-weight: 600; }
.seg button:disabled { opacity: .4; cursor: not-allowed; }
.seg[hidden] { display: none; }

/* ---------------------------------------------------------------- stage text */
.info { margin-top: 22px; padding-top: 16px; border-top: 1.5px solid var(--ink); }
.info .valves { margin-top: 2px; }
.kicker { margin: 0; font: 500 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.info h3 { margin: 6px 0 12px; font: 400 clamp(34px, 1.6vw + 20px, 46px)/1 var(--serif); letter-spacing: -.015em; }
.info p { margin: 10px 0; max-width: 62ch; }
.info p strong { font-weight: 600; }
#txtChambers { color: var(--ink2); }
.ecg-wrap { position: relative; margin: 6px 0 12px; }
.ecg { width: 100%; height: 48px; display: block; }
.ecg-marks { position: relative; height: 16px; font: 500 12px var(--mono); color: var(--ink2); }
.ecg-marks span { position: absolute; transform: translateX(-50%); top: 0; }
.ecg-caption { margin: 2px 0 0 !important; font-size: 13.5px; color: var(--ink2); }
.valves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 0 0 8px; font-size: 14.5px; }
.valves div { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--rule); padding: 7px 0; }
.valves dt { color: var(--ink2); }
.valves dd { margin: 0; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.vs { display: inline-block; flex: none; }
.vs.open { width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 50%; }
.vs.closed { width: 12px; height: 4px; background: currentColor; border-radius: 1px; }
.transcript { margin: 12px 0 6px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.transcript summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14.5px; font-weight: 600; }
.transcript p { margin: 0 0 12px; font: italic 400 19px/1.4 var(--serif); }
.src { font-size: 14px; color: var(--ink2); }
.src a, .sources a, .steps a:not(.mchip) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ctl); }
.group { padding: 16px 0; border-top: 1px solid var(--rule); }
.look { margin-top: 18px; border-top: 1.5px solid var(--ink); }
.glabel { margin: 0 0 10px; font: 600 14.5px/1.3 var(--sans); }
.look .seg { flex-wrap: wrap; border-radius: 22px; }
.look .seg + .seg, .look .linkbtn + .seg { margin-top: 8px; }
.linkbtn { display: block; margin-top: 6px; min-height: 44px; padding: 0; background: none; border: 0; font-size: 14.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ctl); }
.linkbtn[hidden] { display: none; }
.look-note, .legend { margin: 10px 0 0; font-size: 14px; color: var(--ink2); max-width: 62ch; }
.legend { padding-top: 12px; border-top: 1px solid var(--rule); }
.keys-line { margin: 12px 0 0; font-size: 13.5px; color: var(--ink2); }
@media (hover: none) { .keys-line { display: none; } }

/* ---------------------------------------------------------------- II the plates: a contact sheet of the 24 plates of one beat */
.plates { padding: clamp(56px, 7vw, 104px) var(--gut); border-top: 1.5px solid var(--ink); max-width: 1720px; margin: 0 auto; }
.pl-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin-bottom: 30px; }
.pl-head p { margin: 0 0 14px; color: var(--ink2); max-width: 52ch; }
.sheet { max-width: 980px; }
.sh-cols, .sh-row { display: grid; grid-template-columns: 120px repeat(6, minmax(0, 1fr)); gap: 6px; align-items: center; }
.sh-cols { margin-bottom: 6px; font-size: 13px; color: var(--ink2); }
.sh-cols b { font: 500 12px var(--mono); color: var(--ink); }
.sh-row { border-top: 1px solid var(--rule); padding: 4px 0; }
.sh-l { font: 400 19px/1.1 var(--serif); }
.sh-row button, .looks-g button { position: relative; display: block; padding: 0; border: 1.5px solid transparent; border-radius: 8px; background: var(--paper); transition: border-color .2s var(--ease), transform .25s var(--ease); }
.sh-row button:hover, .looks-g button:hover { border-color: var(--ink); transform: translateY(-2px); }
.sh-row img, .looks-g img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 7px; mix-blend-mode: multiply; filter: url(#paperclean); }
.looks { margin-top: 30px; }
.looks-h { margin: 0 0 10px; font: italic 400 19px/1.3 var(--serif); color: var(--ink2); }
.looks-g { display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); gap: 12px; }
.looks-g button { text-align: center; }
.looks-g button span { display: block; padding: 6px 0 4px; font-size: 14px; font-weight: 500; }
@media (max-width: 980px) {
  .plates { padding: 48px 16px; }
  .pl-head { grid-template-columns: 1fr; margin-bottom: 20px; }
  .sh-cols, .sh-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .sh-c0 { display: none; }
  .sh-cols span { font-size: 12px; text-align: center; }
  .sh-cols span b { display: block; }
  .sh-l { grid-column: 1 / -1; padding-top: 6px; font-size: 17px; }
}
@media (max-width: 560px) { .sh-cols span { font-size: 0; } .sh-cols span b { font-size: 12px; } }

/* ---------------------------------------------------------------- how it was made, on the page */
.made { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(56px, 7vw, 104px) var(--gut); border-top: 1.5px solid var(--ink); max-width: 1720px; margin: 0 auto; }
.poster { position: relative; display: block; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; box-shadow: 0 30px 60px -34px rgba(22, 23, 27, .6); }
.poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.poster:hover img { transform: scale(1.015); }
.poster .big { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.poster .big svg { width: 28px; height: 28px; fill: var(--ink); margin-left: 5px; }
.made-copy p { color: var(--ink2); max-width: 52ch; }
.made-copy h2 + p { margin-top: 18px; }
.receipt { font: 500 13px/1.5 var(--mono); letter-spacing: .04em; color: var(--ink) !important; padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.made-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }

/* ---------------------------------------------------------------- the end: take it with you */
.end { background: var(--paper2); padding: clamp(56px, 7vw, 104px) var(--gut) clamp(48px, 6vw, 80px); }
.end > * { max-width: 1720px; margin-left: auto; margin-right: auto; }
.end-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; margin-bottom: 34px; }
.end-head p { margin: 0; color: var(--ink2); max-width: 52ch; }
.index { list-style: none; margin: 0 auto; padding: 0; border-top: 1.5px solid var(--ink); }
.index li { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 8px 28px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--rule2); }
.index .k { font: 500 12.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.index h3 { margin: 0; font: 400 clamp(24px, 1vw + 18px, 32px)/1.1 var(--serif); }
.index p { margin: 5px 0 0; color: var(--ink2); max-width: 64ch; }
.index code { font: 500 13px var(--mono); }
.index .go { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; white-space: nowrap; }
.closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 40px; }
.closing .note { margin: 0; max-width: 60ch; font: italic 400 20px/1.35 var(--serif); color: var(--ink2); }

/* ---------------------------------------------------------------- footer (the shared runtime restyles it after import) */
/* scoped with the footer attribute (and the runtime's id for its links) so these beat the later-loaded runtime sheet without !important */
.foot[data-exploration-controls] { padding: 18px var(--gut) 32px; border-top: 1px solid var(--rule2); background: var(--paper2); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; color: var(--ink2); }
.foot[data-exploration-controls] [data-exploration-tools] { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; font-size: 13.5px; }
.foot[data-exploration-controls] [data-exploration-tools] a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); }
.foot[data-exploration-controls] #scenario-exploration-analytics .scenario-exploration-controls { font-size: 13px; justify-content: center; }

/* ---------------------------------------------------------------- the modal: How it was made */
.modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(22, 23, 27, .6);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); touch-action: none; overscroll-behavior: contain; animation: fade .25s var(--ease); }
.modal[hidden] { display: none; }
.modal-card { position: relative; width: min(1440px, 100%); height: 100%; overflow: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; background: var(--paper);
  border-radius: 18px; box-shadow: 0 40px 90px -30px rgba(10, 10, 12, .6); scrollbar-width: thin; scrollbar-color: var(--ctl) transparent; animation: rise .35s var(--ease); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.99); } }
.mhead { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.mhead h2 { font-size: clamp(28px, 1.4vw + 18px, 38px); }
.mhead h2:focus-visible { box-shadow: none; outline: none; }
.close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; font-weight: 600; }
.close:hover { background: var(--paper2); }
.mbody { padding: 22px 28px 36px; }
/* round 2: the film at the sheet's full width (as tall as the screen allows), its chapters under it */
.film { display: block; scroll-margin-top: 90px; }
.film-v video { display: block; width: min(100%, calc((100svh - 230px) * 16 / 9)); margin: 0 auto; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; }
.toc { margin-top: 20px; }
.chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: 32px; }
.toc h3 { margin: 0 0 6px; font: 400 26px/1.1 var(--serif); }
.toc h3 span { display: block; margin-top: 4px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.chapters { list-style: none; margin: 0; padding: 0; }
.chapters button { width: 100%; min-height: 36px; display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border: 0; background: none; text-align: left; font-size: 14.5px; }
.chapters button::after { content: ""; order: 2; flex: 1; border-bottom: 1px dotted var(--ctl); transform: translateY(-4px); min-width: 12px; }
.chapters button .nm { order: 1; }
.chapters button .t { order: 3; font: 500 12.5px var(--mono); color: var(--ink2); }
.chapters button:hover .nm { text-decoration: underline; }
.chapters button[aria-current="true"] .nm { font-weight: 600; }
.chapters button[aria-current="true"] .nm::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--ink); vertical-align: .1em; }
.dlede { max-width: 72ch; color: var(--ink2); margin: 20px 0 12px; }
/* the ten steps as a numbered stop rail */
.rail { position: relative; list-style: none; margin: 6px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.rail::before { content: ""; position: absolute; left: 5%; right: 5%; top: 17px; height: 2px; background: var(--ink); }
.rail li { position: relative; }
.rail a { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px 4px; text-align: center; text-decoration: none; font-size: 13px; line-height: 1.25; }
.rail b { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); font: 500 13px var(--mono); transition: background-color .2s var(--ease); }
.rail a:hover b { background: var(--paper2); }
.rail a:hover span { text-decoration: underline; }
/* downloads: one row of four */
.dlrow { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; border-top: 1.5px solid var(--ink); }
.dlrow a { display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 14px 0 16px; text-decoration: none; }
.dlrow .k { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.dlrow strong { font: 400 23px/1.15 var(--serif); text-decoration: underline; text-decoration-color: var(--ctl); text-underline-offset: 4px; }
.dlrow a:hover strong { text-decoration-color: var(--ink); }
.steps > li > * { min-width: 0; }.mh3 { margin: 34px 0 10px; font: 400 28px/1.1 var(--serif); }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.steps > li { display: grid; grid-template-columns: 190px minmax(0, 1.35fr) minmax(230px, .9fr); gap: 12px 28px; padding: 24px 0; border-bottom: 1px solid var(--rule2); scroll-margin-top: 80px; }
.steps .where { margin: 0; font: 500 12px/1.45 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.steps h4 { margin: 6px 0 0; font: 400 26px/1.1 var(--serif); }
.steps p { margin: 0 0 10px; max-width: 64ch; }
.steps img { width: 100%; height: auto; border-radius: 8px; margin-top: 4px; display: block; border: 1px solid var(--rule); }
.heroes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.heroes figure { margin: 0; }
.heroes figcaption { font-size: 13px; color: var(--ink2); margin-top: 4px; }
.card { margin: 0; font-size: 14.5px; }
.card dl { margin: 0; }
.card dt { display: inline-block; margin: 12px 0 4px; padding: 2px 7px; border: 1px solid var(--ink); border-radius: 4px; font: 600 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.card dt:first-child { margin-top: 0; }
.card dt.kept { background: var(--ink); color: var(--paper); }
.card dt.runner { border-style: dashed; }
.card dt.failed { border-color: var(--red); color: var(--red); }
.card dd { margin: 0; }
.card dd b { font-weight: 600; }
.card q { font: italic 400 17px/1.35 var(--serif); quotes: "\201C" "\201D"; }
.card .cost { display: block; margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); font: 500 12.5px var(--mono); }
.vtable { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.vtable th, .vtable td { padding: 7px 6px; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; }
.vtable thead th { color: var(--ink2); font-size: 13px; }
.vtable td { white-space: nowrap; }
.vtable td .vs { margin-right: 6px; vertical-align: middle; }
.vtable caption { caption-side: bottom; text-align: left; padding-top: 6px; font-size: 13px; color: var(--ink2); }
.table-scroll { overflow-x: auto; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 13.5px; }
.mchip, .tchip { border: 1px solid var(--ctl); border-radius: 999px; padding: 3px 11px; color: var(--ink); text-decoration: none; }
a.mchip { min-height: 32px; display: inline-flex; align-items: center; }
a.mchip:hover { border-color: var(--ink); background: var(--paper2); }
.tchip { color: var(--ink2); border-style: dashed; }
.prompt { margin-top: 10px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.prompt summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.prompt pre { white-space: pre-wrap; word-break: break-word; font: 12.5px/1.5 var(--mono); max-height: 260px; overflow: auto; margin: 6px 0 10px; color: var(--ink); }
.copy { min-height: 36px; margin-bottom: 10px; background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 0 14px; font-size: 13px; font-weight: 600; }
.mcols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.stack, .downloads, .sources { padding-left: 18px; }
.stack li, .downloads li, .sources li { margin: 6px 0; max-width: 68ch; }
.downloads a { text-underline-offset: 3px; }
.muted { color: var(--ink2); }
.models { width: 100%; border-collapse: collapse; font-size: 14px; }
.models td, .models th { border-bottom: 1px solid var(--rule); padding: 8px 6px; text-align: left; vertical-align: top; }
.models th { color: var(--ink2); font-weight: 500; font-size: 13px; }
.models td:nth-child(3), .models td:nth-child(4) { font: 500 13px var(--mono); white-space: nowrap; }
.models a.mchip { white-space: normal; }
.dtake { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 8px; }
.take { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 12px; border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; transition: background-color .2s var(--ease); }
.take:hover { background: var(--paper2); }
.take .tk { font: 500 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.take strong { font: 400 23px/1.15 var(--serif); }
.take .ti { font-size: 14px; color: var(--ink2); }
.dend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding-top: 20px; border-top: 1.5px solid var(--ink); }
.dend .btn { min-height: 46px; padding: 0 20px; font-size: 15px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1239px) { .tname { display: none; } }
@media (max-width: 1200px) and (min-width: 981px) { .ex-grid { grid-template-columns: minmax(0, 1fr) 340px; } .steps > li { grid-template-columns: 160px minmax(0, 1fr); } .steps .card { grid-column: 2; } }
@media (max-width: 1100px) { .act { padding: 0 10px; font-size: 14.5px; } }
@media (max-width: 980px) {
  .top { position: static; --hdr: 0px; }
  :root { --hdr: 0px; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 22px 16px 64px; }
  .hero-copy { display: contents; }
  h1 { order: 1; font-size: clamp(46px, 13vw, 76px); }
  h1 span { display: inline; }
  .sub { order: 2; margin-top: 8px; font-size: clamp(20px, 5.4vw, 28px); }
  .lede-sm { order: 3; display: block; margin: 8px 0 0; color: var(--ink2); font-size: 15px; }
  .hero-fig { order: 4; padding: 12px 0 0; }
  .hero-plate img { height: auto; width: min(84vw, calc((100svh - 290px) * .8)); min-width: 200px; }
  .tag { order: -1; margin: 0 0 10px; gap: 10px; padding: 5px 16px 5px 5px; font-size: 15px; }
  .tag i { width: 40px; height: 40px; }
  .what { order: 5; margin-top: 22px; font-size: 15.5px; }
  .hero-cta { order: 6; margin-top: 20px; }
  .btn { min-height: 50px; padding: 0 20px; font-size: 15.5px; }
  .hero-foot { left: 16px; right: 16px; }
  .explore { padding: 36px 16px 48px; }
  .ex-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "viewer" "stepper" "panel"; }
  .ex-head { margin-bottom: 14px; }
  .cap { margin-top: 8px; padding-top: 10px; }
  .vswitch button, .more button { min-height: 44px; }
  .viewer { grid-row: auto; position: relative; }
  .frame { height: min(calc((100vw - 32px) * 1.25), max(260px, calc(100svh - 250px))); }
  .made { grid-template-columns: 1fr; padding: 48px 16px; }
  .end { padding: 48px 16px 40px; }
  .end-head { grid-template-columns: 1fr; margin-bottom: 22px; }
  .index li { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
  .modal { padding: 0; }
  .modal-card { width: 100%; height: 100%; border-radius: 0; }
  .mhead { padding: 10px 16px; }
  .mbody { padding: 16px 16px 32px; }
  .rail { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 10px; }
  .rail::before { display: none; }
  .dlrow { grid-template-columns: 1fr 1fr; }
  .chapters button { min-height: 44px; }
  .seg button { min-height: 44px; }
  .steps > li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .steps .card { grid-column: auto; }
  .mcols, .dtake { grid-template-columns: 1fr; }
}
/* phones: the actions get their own labelled row under the brand */
@media (max-width: 799px) {
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand create" "acts acts"; gap: 0 12px; padding: 8px 16px 0; min-height: 0; }
  .brand { grid-area: brand; }
  .create { grid-area: create; }
  .acts { grid-area: acts; margin: 6px -6px 0; padding: 2px 0 4px; border-top: 1px solid var(--rule); justify-content: space-between; }
  .act { padding: 0 6px; gap: 5px; font-size: 13.5px; }
  .act svg { width: 16px; height: 16px; }
}
@media (max-width: 440px) { .act:not(#how-header) svg { display: none; } .act { padding: 0 6px; min-width: 44px; justify-content: center; } }   /* one name everywhere: "Play the beat" on phones too */
@media (max-width: 560px) {
  .lbl-key { columns: 1; }
  .rail { grid-template-columns: 1fr; }
  .rail a { flex-direction: row; text-align: left; gap: 12px; }
  .vswitch { width: 100%; } .vswitch button { flex: 1; justify-content: center; padding: 0 8px; }
  .what li { padding: 8px 0; }
}
@media (max-width: 380px) {
  .top { padding: 6px 12px 0; }
  .brand img { height: 19px; }
  .brand span { font-size: 12.5px; }
  .create { padding: 0 14px; font-size: 14px; }
  .create i { display: none; }
  .brand { gap: 6px; }
  .mhead h2 { font-size: 25px; }
  .act { padding: 0 6px; gap: 4px; font-size: 13px; }
  .act:not(#how-header) svg { display: none; }
  .act { min-width: 44px; justify-content: center; }
  .act svg { width: 15px; height: 15px; }
  .hero { padding: 16px 12px 60px; }
  .explore { padding: 28px 12px 40px; }
  .frame { height: min(calc((100vw - 24px) * 1.25), max(240px, calc(100svh - 285px))); }
  .cap .nm { font-size: 19px; }
  .cap { gap: 8px; }
  .btn { padding: 0 16px; font-size: 15px; }
  .hero-foot span { display: none; }

  .tag { white-space: nowrap; font-size: 14.5px; padding-right: 16px; }
  .tag small { display: none; }
}
/* landscape phones: one row of actions; the plate on the left, the controls and text on the right */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 520px) {
  .top { display: flex; min-height: 52px; padding: 4px 16px; }
  .acts { margin: 0 0 0 auto; padding: 0; border: 0; }
  .act { padding: 0 8px; font-size: 13.5px; }
  .hero { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; padding: 12px 16px 60px; }
  .hero-copy { display: block; align-self: center; padding: 0; }
  h1 { font-size: 44px; } h1 span { display: block; }
  .sub { font-size: 20px; }
  .lede-sm { display: block; }
  .what { display: none; }
  .hero-fig { grid-column: 2; grid-row: 1; padding: 0; }
  .hero-plate img { width: auto; height: calc(100svh - 124px); }
  .figcap { display: none; }
  .tag { position: absolute; margin: 0; left: auto; right: calc(100% + 14px); bottom: 10%; white-space: nowrap; }
  .tag small, #heroExplore { display: none; }
  .explore { padding: 12px 16px 40px; }
  .ex-grid { grid-template-columns: calc((100svh - 16px) * 0.8 + 2px) minmax(0, 1fr); grid-template-areas: "frame head" "frame stepper" "frame panel"; column-gap: 20px; }
  .viewer { display: contents; }
  .frame { grid-area: frame; grid-row: 1 / 4; align-self: start; position: sticky; top: 8px; height: calc(100svh - 16px); }
  .stepper { grid-area: stepper; }
  .ex-head h2 { font-size: 30px; }
  .ex-head .secno { display: none; }
  .film-v video { width: min(100%, calc((100svh - 80px) * 16 / 9)); }
  .ex-head { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { :where(a, button, [tabindex], summary):focus-visible { outline: 2px solid CanvasText; } .segs button[aria-pressed="true"], .seg button[aria-pressed="true"] { outline: 2px solid CanvasText; } }
@container (max-width: 340px) { .onimg-title { font-size: 17px; white-space: nowrap; padding: 2px 8px 4px; } }