/* Simulation (round eleven, step 3): one page for the study, the audience and the validation, on the web system. Every
   value is a token from docs/brand/tokens.css; gaps are measured from the letters (base.css trims every heading and
   paragraph to cap height and baseline). Sections stand --interval apart (240; 120 under 1024). */

main { overflow-x: clip; }

/* ---------- 1. Hero, Pair (the how page's hero): copy in columns 1 to 7; the market in 8 to 12, a 4:5 sky panel on the
   held scale with its top on the headline's cap line, and a persona card standing over its lower left corner, one
   column and a gutter past its left edge, 48 below its foot. ---------- */
.hero { padding-top: var(--s11); align-items: start; }
.hero-copy { grid-column: 1 / span 6; }   /* column 7 stays empty, so the lead never meets the panel */
.hero h1 { white-space: nowrap; }
.hero .lead { margin-top: var(--s8); max-width: 30em; }
.hero-acts { display: flex; align-items: center; gap: var(--s5); margin-top: var(--s7); }
.hero-dev { grid-column: 8 / span 5; position: relative; margin: 0; padding-bottom: var(--s8); --over: calc((100% + var(--gutter)) / 5); }
.hero-world { position: relative; aspect-ratio: 4 / 5; outline: none; cursor: default; }
.hero-world:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ov { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }

/* The persona card: white, a 1 px line, padding 24; the unit as its mark, the number and segment, rows of label and
   value on hairlines, both headlines' intent as tallies, then the answer. */
.pcard { position: absolute; z-index: 2; left: calc(-1 * var(--over)); bottom: 0; width: 78%; padding: var(--s5); background: var(--page); box-shadow: inset 0 0 0 1px var(--line); }
.pc-h { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--s3); align-items: start; }
.pc-mk { fill: var(--ink); margin-top: -2px; }
.pc-n { font-weight: 500; color: var(--ink); }
.pc-of { margin-left: var(--s1); font: 400 var(--label)/1 var(--sans); color: var(--ink-3); }
.pc-s { margin-top: var(--s3); color: var(--ink-2); }
.pc-rows { margin: var(--s5) 0 0; }
.pc-rows > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--s3); align-items: center; min-height: 40px; box-shadow: inset 0 1px 0 var(--line); }
.pc-rows dt { font: 400 var(--label)/1 var(--sans); color: var(--ink-3); text-box: trim-both cap alphabetic; }
.pc-rows dd { margin: 0; display: flex; align-items: center; gap: var(--s3); min-width: 0; font: 400 var(--ui)/1.2 var(--sans); color: var(--ink); text-box: trim-both cap alphabetic; }
.pc-rows dd .num { font-size: var(--ui); min-width: 2ch; }
.pc-rows dd .ch-meter { flex: 1 1 auto; max-width: 120px; margin-left: auto; }
.pc-a { padding-top: var(--s4); box-shadow: inset 0 1px 0 var(--line); font: 400 var(--quote)/1.2 var(--serif); color: var(--ink); }
.pcard { transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease); }
.pcard.pre { opacity: 0; transform: translateY(8px); }
.pcard .sw-a { transition: opacity var(--t1) var(--ease); }
.pcard.swap .sw-a { opacity: 0; }

/* ---------- Chapters (A5): the label rule; 64 to the opener or the panel. Hero to the first chapter 160; chapter to
   chapter 240. ---------- */
.chapter { margin-top: var(--interval); }
.chapter.c1 { margin-top: var(--section-wide); }   /* the first chapter after the hero */
.rule { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s5); padding-bottom: var(--s3); box-shadow: inset 0 -1px 0 var(--line); }
/* The opener: the title in columns 1 to 5, the text and the steps in 7 to 12, cap lines level. */
.opener { margin-top: var(--s9); align-items: start; }
.o-t { grid-column: 1 / span 5; }
.o-r { grid-column: 7 / span 6; }
.o-r .body { max-width: 34em; }
.o-r .steps { margin-top: var(--s8); }
/* A stacked opener (the survey): the title, the text and the step in columns 1 to 7, so the step and the stills under
   it share one left edge. */
.opener.stack .o-t, .opener.stack .o-r { grid-column: 1 / span 7; }
.opener.stack .o-r { margin-top: var(--s5); }

/* ---------- The library (C2 on the parallax stage): 80 under the opener's last line; stage.js owns its layout. */
.library { margin-top: var(--s10); }
.stage .world .wn:not([href]) { cursor: default; text-decoration: none; }

/* ---------- Panel chapters (the brief, bring your own data): copy in columns 1 to 4 at the panel's vertical centre,
   64 under the rule; the panel from column 6 to the viewport's right edge, a sky opening on the held scale, the
   screen 80 % of it (at most 860) with its left edge on column 7. ---------- */
.chap { margin-top: var(--s9); align-items: center; }
.chap .copy { grid-column: 1 / span 4; }
.chap .copy .body { margin-top: var(--s5); max-width: 34em; }
.chap .copy .steps { margin-top: var(--s8); }
.own .chap { margin-top: 0; }
.own-act { margin-top: var(--s7); }
.panel { grid-column: 6 / -1; position: relative; padding-block: var(--s10);
  margin-right: calc((min(var(--content-max), 100vw - 2 * var(--margin)) - 100vw) / 2); }
.panel > canvas { z-index: 0; }
.panel > .scr { z-index: 1; width: min(80%, 860px); margin-left: calc((min(var(--content-max), 100vw - 2 * var(--margin)) + var(--gutter)) / 12); }

/* Product screens: the product's own chrome at the system's type sizes. */
.scr { position: relative; background: var(--page); box-shadow: inset 0 0 0 1px var(--line); container: scr / inline-size; }
.sb { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); height: 48px; padding: 0 var(--s5); box-shadow: inset 0 -1px 0 var(--line); }
.sb-t { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-box: none; line-height: 1.3; }
.sb-t span { color: var(--ink-2); }
.sb-r { color: var(--ink-2); white-space: nowrap; }
.sc { padding: var(--s5); }
.sb-r { display: flex; align-items: center; gap: var(--s3); }
.srow { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); }
.scr .chip { height: 28px; margin: 4px 0; font-size: 14px; }
.scr .ic { flex: none; color: var(--ink); }
/* The brief screen: the four inputs as chips, the file, what we found, the audience, Continue. */
.ins { display: flex; flex-wrap: wrap; column-gap: var(--s2); margin: var(--s2) 0 var(--s4); }
.drop { display: grid; grid-template-columns: 20px minmax(0, 1fr) 120px auto; column-gap: var(--s3); align-items: center; height: 64px; padding: 0 var(--s4); box-shadow: inset 0 0 0 1px var(--line); }
.drop .fn { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-box: none; line-height: 1.3; }
.drop .cap { white-space: nowrap; }
.found-h { margin-top: var(--s6); transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease); }
.found .add .link { font-size: 14px; }
.found { margin: var(--s3) calc(-1 * var(--s5)) 0; box-shadow: inset 0 -1px 0 var(--line); }
.found li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: var(--s3); align-items: center; min-height: 44px; padding: 0 var(--s5);
  box-shadow: inset 0 1px 0 var(--line); transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease); }
.found .k { font: 400 var(--label)/1 var(--sans); color: var(--ink-2); text-box: trim-both cap alphabetic; }
.found .v { font: 400 var(--ui)/1.3 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.found .cap { white-space: nowrap; }
.aud { margin-top: var(--s6); transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease); }
.aud-r { margin-top: var(--s3); display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: 48px; padding: 0 var(--s4); box-shadow: inset 0 0 0 1px var(--ink); }
.aud-v { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.aud-v .ui { color: var(--ink); white-space: nowrap; }
.aud-v .cap { white-space: nowrap; }
.aud-r .link { font-size: 14px; white-space: nowrap; }
.s1-foot { margin-top: var(--s5); }
.s1 .wait { opacity: 0; transform: translateY(8px); }
/* The match-score screen. */
.m-file { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: var(--s3); align-items: center; height: 56px; padding: 0 var(--s4); box-shadow: inset 0 0 0 1px var(--line); }
.m-file .fn { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-box: none; line-height: 1.3; }
.m-file .cap { white-space: nowrap; }
.m-top { margin-top: var(--s6); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s6); align-items: end; }
.m-top .big { font-size: 56px; }
.m-top .label { margin-top: var(--s4); color: var(--ink-2); font-weight: 400; }
.m-leg { margin-top: var(--s6); display: flex; gap: var(--s5); }
.m-leg span { display: inline-flex; align-items: center; gap: var(--s2); }
.m-leg i { width: 8px; height: 8px; display: block; }
.m-leg .i2 { background: var(--ink-2); } .m-leg .bl { background: var(--blue); }
.m-rows { margin-top: var(--s4); }
.m-row { padding: var(--s4) 0; box-shadow: inset 0 1px 0 var(--line); }
.m-row .mq { font: 400 var(--ui)/1.3 var(--sans); color: var(--ink); text-box: trim-both cap alphabetic; }
.m-pair { margin-top: var(--s3); display: grid; grid-template-columns: minmax(0, 1fr) 40px; column-gap: var(--s3); row-gap: var(--s1); align-items: center; }
.m-pair .meter { height: 16px; }
.m-pair .v { font: 500 14px/1 var(--sans); font-feature-settings: var(--num-features); text-align: right; color: var(--ink); }
.m-pair .v.i2 { color: var(--ink-2); }

/* ---------- The stills (section 19): 80 under the opener; two 4:5 stills side by side, 40 apart, the result across both
   under them, a line under each 24 below its still. ---------- */
.stills { margin-top: var(--s10); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); row-gap: var(--s9); }
.fig { margin: 0; min-width: 0; }
.f3 { grid-column: 1 / -1; }
.fig .st { aspect-ratio: 4 / 5; }
.f3 .st { aspect-ratio: 2 / 1; }
.fig figcaption { margin-top: var(--s5); color: var(--ink-2); text-wrap: pretty; }
.fig figcaption em { font-style: normal; color: var(--ink); }

/* ---------- Built from: the figure 80 under the opener. One row of population data on hairline rows at the left under
   a sunken header (its text on the rows' left edge, its fill 16 px past them), a held sky at the right where the persona
   it became stands ringed, a label over each, and one leader from the rows into the ring (ink-3 on the page, white in
   the sky). */
.built-fig { margin: var(--s10) 0 0; }
.bf-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.rec { grid-column: 1 / span 5; }
.rec .label { color: var(--ink-2); font-weight: 400; }
.rec-h { margin: var(--s4) calc(-1 * var(--s4)) 0; padding: var(--s3) var(--s4); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); background: var(--surface-sunken); }
.rec-h .ui { color: var(--ink); font-weight: 500; }
.rec-h .cap { color: var(--ink-2); white-space: nowrap; }
.rec dl { margin: 0; display: grid; }
.rec dl > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: var(--s3); padding: var(--s3) 0; box-shadow: inset 0 1px 0 var(--line); font: 400 var(--ui)/1.4 var(--sans); }
.rec dl > div:last-child { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.rec dt { color: var(--ink-2); } .rec dd { margin: 0; color: var(--ink); }
.rec dd.num { font-weight: 500; }
.bf-grid { position: relative; }
.bf-world { grid-column: 7 / span 6; }
.bf-world .label { color: var(--ink-2); font-weight: 400; }
.bf-world .bf-portal { margin-top: var(--s4); }
.bf-portal { aspect-ratio: 3 / 2; position: relative; overflow: hidden; }
.bf-lead { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bf-lead path { fill: none; stroke: var(--ink-3); stroke-width: 1; }
@media (max-width: 1023px) { .rec, .bf-world, .bf-portal { grid-column: 1 / -1; } .bf-world { margin-top: var(--s9); } }
/* ---------- Built from: the three source rows on hairlines, 40 under the body. ---------- */
.rule .label.r { color: var(--ink-2); font-weight: 400; }

/* ---------- Validation. The lens, 80 under the opener: two rings 320 across in columns 1 to 7, the recorded survey's
   in ink and Archetypes' in blue, that slide together as the block comes into view (--p) and settle 140 apart, the
   overlap filled with a lattice of ink units once they meet; the two dataset scores stacked in columns 9 to 12, their
   first cap line on the rings' top. Then the one-question device, 80 under. ---------- */
.lens-row { margin-top: var(--s10); align-items: start; }
.lens { grid-column: 1 / span 7; margin: 0; --travel: 0px; }
.lens svg { display: block; overflow: visible; }
.lens .ring { fill: none; stroke-width: 1.5px; }
.lens .ring.a { stroke: var(--ink); }
.lens .ring.b { stroke: var(--blue); stroke-width: 2px; }
.lens .ca { transform: translateX(calc((1 - var(--p, 1)) * -1 * var(--travel))); }
.lens .cb { transform: translateX(calc((1 - var(--p, 1)) * var(--travel))); }
.lens .units { fill: var(--ink); opacity: clamp(0, (var(--p, 1) - 0.8) * 5, 1); }
.lens-key { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); }
.lens-key span { display: inline-flex; align-items: center; gap: var(--s2); font: 400 14px/1 var(--sans); color: var(--ink-2); }
.lens-key span b { font-weight: 400; text-box: trim-both cap alphabetic; }
.lens-key i { width: 16px; height: 2px; background: var(--ink); }
.lens-key i.b { background: var(--blue); }
.lens-stats { grid-column: 9 / span 4; display: grid; row-gap: var(--s8); }   /* the lens ends in column 7; the stats start where the opener's text starts would overlap it, so 9 */
.lens-stats .ch-stat .big { font-size: 56px; }
.vd-head { margin-top: var(--s10); }
.vd-q { grid-column: 1 / span 8; }
.vd-q .quote { text-wrap: balance; }
.vd-row { margin-top: var(--s8); display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); column-gap: var(--gutter); }
.vd--engine { grid-column: 1 / span 8; }
.vd--prompt { grid-column: 10 / span 3; }
.vd { margin: 0; }
.vd-h { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); padding-top: var(--s4); box-shadow: inset 0 1px 0 var(--line); }
.vd-h .ui { color: var(--ink); text-box: trim-both cap alphabetic; display: inline-flex; align-items: center; gap: var(--s2); }
.vd-h .sw-line { width: 16px; height: 2px; background: currentColor; flex: none; }
.vd-h .sw-line.t-blue { color: var(--blue); }
.vd-h .sw-line.t-i2 { color: var(--ink-2); }
.vd-h .cap { padding-left: 24px; text-box: trim-both cap alphabetic; }
.vd-plot { margin-top: var(--s5); height: 240px; }
.vd-plot svg { display: block; overflow: visible; }
.vd-fill { fill: var(--curve-fill, var(--sky-light)); opacity: var(--p, 1); }
.vd-real { fill: none; stroke: var(--ink); stroke-width: 1.5px; stroke-linejoin: round; }
.vd-line { fill: none; stroke: currentColor; stroke-width: 2px; stroke-linejoin: round; }
.vd-line.t-blue { color: var(--blue); } .vd-line.t-i2 { color: var(--ink-2); }
.vd-base { fill: var(--line); }
.vd-ax { margin-top: var(--s3); display: flex; justify-content: space-between; font: 400 14px/1 var(--sans); color: var(--ink-2); font-feature-settings: var(--num-features); }
.vd-ax span { text-box: trim-both cap alphabetic; }

/* ---------- The report screen (the how page's screen 3). ---------- */
.sk { color: var(--ink-2); font-weight: 400; }
.sq { font: 400 24px/1.3 var(--serif); letter-spacing: -0.005em; color: var(--ink); text-wrap: balance; }
.sum { margin-top: var(--s5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.sum > div { padding: var(--s4) var(--s4) var(--s4) 0; display: grid; row-gap: var(--s3); align-content: start; }
.sum > div + div { padding-left: var(--s4); }
.sum .sv { font: 500 24px/1 var(--sans); font-feature-settings: var(--num-features); color: var(--ink); text-box: trim-both cap alphabetic; }
.sum .cap { text-wrap: pretty; }
.s3-seg { margin-top: var(--s6); flex-wrap: wrap; row-gap: var(--s2); }   /* wrapped, 12 from the label to the chips' border (their 4 px margin) */
.fl { display: flex; flex-wrap: wrap; column-gap: var(--s2); }
.s3-t { margin-top: var(--s2); }
.s3-t td { height: 44px; }
.s3-t .td-tally { display: flex; align-items: center; gap: var(--s3); }
.s3-t .td-tally .ch-meter { flex: 1 1 auto; }
.s3-t .td-tally .n { min-width: 4ch; text-align: right; }
.s3-notes { margin-top: var(--s5); padding-top: var(--s5); box-shadow: inset 0 1px 0 var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
.s3-notes > div { display: grid; row-gap: var(--s3); align-content: start; }
.s3-notes .ui { color: var(--ink-2); text-wrap: pretty; }
.s3-acts { margin-top: var(--s4); padding-top: var(--s2); box-shadow: inset 0 1px 0 var(--line); display: flex; align-items: center; gap: var(--s2); }
.s3-acts .sp { margin-left: auto; display: flex; gap: var(--s5); }
.s3-acts .link { font-size: 14px; }

/* ---------- The result in full (the system's charts): the rule, 240 under the report chapter; 64 to the question, its
   legend in columns 7 to 12 with the baselines level; 48 to the chart's first letters; 80 to "By segment", its copy in
   columns 1 to 4 and the grid in 5 to 12; 120 to the confidence head; 40 to the table. ---------- */
.result { margin-top: var(--interval); }
.r-head { margin-top: var(--s9); align-items: end; }
.r-q { grid-column: 1 / span 6; }
.r-leg { grid-column: 7 / span 6; display: grid; row-gap: var(--s4); }
.r-leg li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--s3); align-items: center; }
.r-leg .ui { color: var(--ink); text-box: trim-both cap alphabetic; }
.r-leg b { font-weight: 500; margin-right: var(--s2); }
.r-leg .lg { display: block; width: 16px; height: 8px; }
.r-leg .lg.a { box-shadow: inset 0 -1px 0 var(--ink-2); }
.r-leg .lg.b { background: var(--curve-fill); box-shadow: inset 0 1.5px 0 var(--curve-stroke); }
.r-chart { margin-top: calc(var(--s8) - var(--lift, 0px)); }
.r-grid { margin-top: var(--s10); align-items: start; }
.r-grid .copy { grid-column: 1 / span 4; }
.r-grid .body { margin-top: var(--s5); max-width: 24em; }
.g-chart { grid-column: 5 / span 8; }
.conf { margin-top: var(--s11); }
.c-head { align-items: start; }
.c-t { grid-column: 1 / span 6; }
.c-b { grid-column: 7 / span 6; max-width: 34em; }
.c-table { margin-top: var(--s7); }
.ctab { table-layout: fixed; }
.ctab th { vertical-align: bottom; line-height: 1.3; padding-bottom: var(--s4); text-wrap: balance; }
.ctab th:nth-child(1) { width: 12%; } .ctab th:nth-child(2) { width: 28%; }
.ctab td { height: auto; padding-top: var(--s5); padding-bottom: var(--s5); vertical-align: top; text-wrap: pretty; text-box: trim-both cap alphabetic; }
.ctab .cl { font: 500 var(--body)/1 var(--sans); color: var(--ink); }
.ctab .cm { color: var(--ink); }
.ctab .ci { color: var(--ink-2); }
.ctab tbody tr:last-child td { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.ctab .cih { display: none; }

/* ---------- The platform: a grey panel at 16:10, 80 under the opener, standing for the product's screens. ---------- */
.platform { margin-top: var(--interval); }
.ph-panel { margin-top: var(--s10); aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--ink) 5%, var(--page)); }
.c-table { container-type: inline-size; }

/* ---------- Close: a centred statement, 200 above and below, the actions 48 under it. ---------- */
.next { padding-block: var(--statement-space); text-align: center; }
.next-acts { margin-top: var(--s8); display: flex; justify-content: center; align-items: center; gap: var(--s5); }

/* ---------- 768 to 1023: the hero stands copy over market; the opener stacks; the panel runs from the content's left
   edge to the viewport's right. ---------- */
@media (max-width: 1023px) {
  .hero-copy { grid-column: 1 / span 10; }
  .hero-dev { grid-column: 6 / -1; margin-top: var(--s8); --over: calc((100% + var(--gutter)) / 7); }
  .o-t, .o-r { grid-column: 1 / -1; }
  .o-r { margin-top: var(--s5); }
  .lens, .lens-stats, .vd-q { grid-column: 1 / -1; }
  .r-q, .r-leg { grid-column: 1 / -1; }
  .r-leg { margin-top: var(--s5); }
  .r-grid .copy, .g-chart { grid-column: 1 / -1; }
  .g-chart { margin-top: var(--s8); }
  .c-t, .c-b { grid-column: 1 / -1; }
  .c-b { margin-top: var(--s5); max-width: 34em; }
  .lens-stats { margin-top: var(--s8); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  .chap .copy { grid-column: 1 / span 9; }
  .chap .panel { grid-column: 1 / -1; margin-top: var(--s8); }
  .panel > .scr { margin-left: calc((min(100%, 1075px) - min(80%, 860px)) / 2); }
}
/* ---------- Phones: the hero 64 under the nav, the market in columns 2 to 6 with a narrower card; panels bleed at both
   edges; the screen at 88 %. ---------- */
@media (max-width: 767px) {
  .hero { padding-top: var(--s9); }
  .hero-copy { grid-column: 1 / -1; }
  .hero-dev { grid-column: 2 / -1; padding-bottom: var(--s6); --over: calc((100% + var(--gutter)) / 5); }
  .pcard { width: 72%; padding: var(--s4); }
  .pc-rows > div { grid-template-columns: 80px minmax(0, 1fr); }
  .chap .copy { grid-column: 1 / -1; }
  .chap .panel { margin-left: calc(-1 * var(--margin)); padding-block: var(--s9); }
  .panel > .scr { width: calc(100% - 2 * var(--margin)); margin-left: var(--margin); }   /* on the page's margin, since the panel bleeds */
  .stills { grid-template-columns: minmax(0, 1fr); }
  .lens-stats { grid-template-columns: minmax(0, 1fr); }
  .vd-row { row-gap: var(--s8); }
  .vd--engine { grid-column: 1 / -1; }
  .vd--prompt { grid-column: 1 / -1; }
  .vd-plot { height: 200px; }
  .ctab, .ctab tbody, .ctab tr, .ctab td { display: block; width: auto; }
  .ctab thead { display: none; }
  .ctab tr { padding: var(--s5) 0; box-shadow: inset 0 1px 0 var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s3); row-gap: var(--s4); }
  .ctab tbody tr:last-child { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
  .ctab td, .ctab tbody tr:last-child td { padding: 0; box-shadow: none; }
  .ctab .cl, .ctab .cm { grid-column: 1 / -1; }
  .ctab .cih { display: block; margin-bottom: var(--s2); font: 400 var(--label)/1.3 var(--sans); color: var(--ink-3); text-box: trim-both cap alphabetic; }
  .fig .st { aspect-ratio: 1 / 1; }
  .f2 .st { aspect-ratio: 3 / 4; }   /* the bands' three lines and rows need the height */
  .f3 .st { aspect-ratio: 4 / 3; }   /* the result block and the curve need less than a square */
}
@container scr (max-width: 560px) {
  .sum { grid-template-columns: minmax(0, 1fr); }
  .sum > div + div { padding-left: 0; box-shadow: inset 0 1px 0 var(--line); }
  .s3-notes { grid-template-columns: minmax(0, 1fr); row-gap: var(--s5); }
  .s3-acts { flex-wrap: wrap; }
  .s3-acts .sp { margin-left: 0; width: 100%; }
  .drop { grid-template-columns: 20px minmax(0, 1fr) auto; padding: 0 var(--s3); }
  .drop .ch-meter { display: none; }
  .found { margin-inline: calc(-1 * var(--s4)); }
  .found li { grid-template-columns: 64px minmax(0, 1fr); padding: 0 var(--s4); }
  .found li > .cap, .found-h > .cap, .s1-foot > .cap, .aud-v .cap { display: none; }
  .s1-foot { justify-content: flex-end; }
  .aud-r { flex-wrap: wrap; row-gap: var(--s2); padding-block: var(--s3); }
}
@container scr (max-width: 460px) {
  .sb, .sc { padding-inline: var(--s4); }
  .sb-r { display: none; }
  .m-top .big { font-size: 48px; }
  .m-file { grid-template-columns: 20px minmax(0, 1fr); }
  .m-file .cap { display: none; }
}
[data-state="focus"] .hero-world { outline: 2px solid var(--ink); outline-offset: 3px; }