/* Demo stage, app-window kit, terminal, pointer, player controls, phone screens.
   Every size inside a scene is in em; the stage sets the scene's font size from its own width. */

.demo { container: demo / inline-size; }
.demo-stage { display: none; }
.js .demo-stage { display: block; position: relative; background: var(--side); border-radius: var(--wr); border: 1px solid var(--line); overflow: clip; aspect-ratio: 4 / 5; user-select: none; -webkit-user-select: none; }
@container demo (min-width: 880px) { .js .demo-stage { aspect-ratio: 16 / 10; } }
.meta .swap { display: inline-grid; }

.demo-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; margin-top: 12px; }
.demo-caption { flex: 1 1 100%; min-height: 40px; margin: 0; max-width: none; color: var(--text2); font-size: 13px; line-height: 20px; }
@container demo (min-width: 880px) { .demo-caption { flex: 1 1 0; min-height: 20px; } }
.demo-controls { display: flex; gap: 8px; }
.js .demo-steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.js .demo.static .demo-steps, .js .demo.failed .demo-steps { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
.demo-steps { margin: 12px 0 0; padding-left: 20px; list-style: decimal; color: var(--text2); font-size: 13px; line-height: 20px; }
.demo-steps li { max-width: 68ch; padding-left: 4px; }
.js .demo.failed .demo-stage, .js .demo.failed .demo-bar, .js .demo.static .demo-bar { display: none; }
.js .demo.failed .demo-steps, .js .demo.static .demo-steps { margin-top: 12px; }
.js .demo.static .demo-stage { display: block; }

/* The scene: compact first, wide from 880 px */
.scene { position: relative; padding: 1em; font: 400 max(11px, calc(100cqw / 32))/1.45 var(--font); color: var(--text); display: flex; flex-direction: column; gap: 1em; }
.scene .win { width: 100%; flex: none; }
.scene .term { width: 100%; flex: none; }
.scene .pointer { position: absolute; left: 0; top: 0; }
@container demo (min-width: 880px) {
  .scene { position: absolute; inset: 0; font-size: calc(100cqw / 84); display: block; padding: 0; }
  .scene .win { position: absolute; left: 2em; top: 2em; width: 80em; height: 48.5em; }
  .scene .term { position: absolute; left: 1em; bottom: 1em; width: 34em; }
  .scene .term.right { left: auto; right: 1em; }
  .scene .term.slim { width: 21em; }
  .scene .term.narrow { width: 30em; }
  .scene .term.wide { width: 46em; }
}

/* Reveal rules: elements carrying data-from, data-until, data-t0 or data-t1 are shown by the player */
[data-from], [data-until], [data-t0], [data-t1] { opacity: 0; transform: translateY(.6em); transition: opacity 250ms ease-out, transform 250ms ease-out; }
[data-x] { transform: none; transition: opacity 300ms ease-in-out; }
[data-from].on, [data-until].on, [data-t0].on, [data-t1].on { opacity: 1; transform: none; }
.nt, .nt * { transition: none !important; }
.reset [data-from], .reset [data-until], .reset [data-t0], .reset [data-t1] { transition-duration: 400ms; }
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; align-self: baseline; }
.swap > [data-until]:not([data-from]):not([data-t0]) { transform: none; }

/* App window */
.win { display: flex; flex-direction: column; min-height: 0; background: var(--win); border-radius: var(--wr); box-shadow: var(--shadow), 0 0 0 1px var(--line); overflow: hidden; }
.tb { display: flex; flex: none; align-items: center; gap: .6em; height: 3.7em; padding: 0 1em; border-bottom: 1px solid var(--line); }
.lights { display: flex; gap: .62em; margin-right: .5em; }
.lights i { width: .92em; height: .92em; border-radius: 50%; }
.appname { margin-right: .3em; font-size: 1.08em; font-weight: 600; white-space: nowrap; }
.ctl { display: inline-flex; align-items: center; gap: .5em; height: 2.15em; padding: 0 .75em; background: var(--win); color: var(--text); border: 1px solid var(--line); border-radius: .46em; white-space: nowrap; }
.ctl.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 500; }
.ctl.pressed { background: var(--hover); }
.ctl.primary.pressed { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
.ctl .ic { width: 1.1em; height: 1.1em; flex: none; }
.ctl.small { height: 1.85em; font-size: .92em; padding: 0 .7em; }
.srch { margin-left: auto; width: 14em; color: var(--text3); }
.tb-wide { display: none; }
.body { display: flex; flex: 1; min-height: 0; }
.sb { display: none; flex: none; width: 17em; padding: .9em .6em; background: var(--side); border-right: 1px solid var(--line); }
.nav { display: flex; align-items: center; height: 2.15em; padding: 0 .75em; margin-bottom: .15em; border-radius: .46em; white-space: nowrap; }
.nav.sel { background: var(--tint); font-weight: 600; }
.main { position: relative; flex: 1; min-width: 0; padding: 1.2em 1.2em; }
.head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2em .9em; margin-bottom: 1.1em; }
.head h1 { margin: 0; font-size: 1.62em; line-height: 1.35; font-weight: 600; letter-spacing: 0; }
.meta { color: var(--text2); font-size: .92em; }
@container demo (min-width: 880px) {
  .tb-wide { display: inline-flex; }
  .sb { display: block; }
  .main { padding: 1.2em 2em; }
  .head { margin-bottom: 1.3em; }
}

.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; align-items: start; }
@container demo (min-width: 880px) { .grid3 { gap: 1.2em; } }
.acard { padding: .7em; background: var(--win); border: 1px solid var(--line); border-radius: .77em; min-width: 0; }
.acard .top { display: flex; flex-direction: column; align-items: flex-start; gap: .2em; }
@container demo (min-width: 880px) { .acard .top { flex-direction: row; align-items: center; justify-content: space-between; } }
.acard h3 { display: flex; align-items: center; gap: .5em; margin: 0; font-size: 1em; line-height: 1.7em; font-weight: 600; }
.apills { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .5em; }
.thumb { display: flex; justify-content: center; margin-top: .7em; padding: .5em; background: var(--side); border-radius: .6em; }
.thumb .swap { width: 100%; }
.thumb .ph, .canvas .ph { width: 100%; }
.ic { display: inline-flex; }
.ic svg { width: 100%; height: 100%; }
@container demo (min-width: 880px) {
  .acard { padding: .9em; }
  .thumb { margin-top: .9em; padding: .9em; }
  .thumb .swap { width: 8.8em; }
}
.apill { display: inline-flex; align-items: center; gap: .46em; padding: 0 .65em; background: var(--hover); color: var(--text); border-radius: .77em; font-size: .92em; line-height: 1.75em; white-space: nowrap; }
.apill.good::before, .apill.caution::before { content: ""; width: .46em; height: .46em; border-radius: 50%; background: currentColor; }
.apill.good::before { color: var(--good); }
.apill.caution::before { color: var(--caution); }
.chip { display: inline-block; padding: 0 .46em; background: var(--hover); color: var(--text2); border-radius: .3em; font: 400 .92em/1.75em var(--mono); }
.cdot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--accent); }

/* Screen view (D2) */
.back { display: flex; align-items: center; gap: .3em; margin-bottom: .5em; font-size: .92em; }
.sv-title { display: flex; align-items: baseline; gap: .8em; margin-bottom: 1em; }
.sv-title h1 { margin: 0; font-size: 1.62em; line-height: 1.35; font-weight: 600; letter-spacing: 0; }
.sv-title .mono { color: var(--text2); font: 400 .92em/1.4 var(--mono); }
.main.sv { display: flex; flex-direction: column; }
.panes { display: flex; flex: 1; gap: 1em; min-height: 0; }
.canvas { position: relative; flex: none; width: 12em; padding: .8em; background: var(--side); border-radius: .77em; align-self: flex-start; }
.canvas .swap .ph { width: 100%; }
.right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .8em; }
.tabs { display: flex; gap: 1.1em; border-bottom: 1px solid var(--line); font-size: .92em; }
.tabs > span { padding: .45em 0 .55em; color: var(--text2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs > span.sel { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }
@container demo (min-width: 880px) {
  .canvas { width: 18.4em; padding: 1.1em; }
  .sv-title { margin-bottom: 1.2em; }
  .panes { gap: 1.6em; }
  .tabs { gap: 1.6em; }
}
.thread { padding: .8em; border: 1px solid var(--line); border-radius: .77em; }
.thread .row { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .6em; font-size: .92em; }
.thread .row b { font-weight: 600; }
.thread .row .swap > * { justify-self: start; }
@container demo (max-width: 340px) { .thread .row .swap { grid-template-columns: minmax(0, 1fr); max-width: 100%; } .thread .row .apill { white-space: normal; line-height: 1.35; padding-block: .2em; } }
@container demo (max-width: 340px) { .panes { gap: .7em; } .panes > .canvas { width: 10em; padding: .6em; } .panes .tabs { gap: .8em; } .panes .tabs > span:first-child { display: none; } .panes .sv-actions { flex-wrap: wrap; } .panes .reply { margin-left: .4em; } .panes .cbtn { font-size: 0; } }
.tabs .cnt { display: inline-block; vertical-align: top; max-width: 0; overflow: hidden; white-space: pre; transition: max-width 250ms ease-out, opacity 300ms ease-in-out; }
.tabs .cnt.on { max-width: 4em; }
.thread .row .meta { font-size: 1em; }
.thread p { margin: .5em 0 .6em; max-width: none; }
.crop { width: 12em; max-width: 100%; padding: .6em; margin: .5em 0 0; }
.reply { padding: .6em .8em; border: 1px solid var(--line); border-radius: .77em; margin-left: 1em; }
.reply .row { color: var(--text2); }
.reply p { margin: .25em 0 0; }
.field-l { font-weight: 600; font-size: .92em; }
.field { min-height: 3.6em; padding: .55em .75em; border: 1px solid var(--control-line); border-radius: .46em; background: var(--win); }
.field .ph-t { color: var(--text3); }
.sv-actions { display: flex; gap: .5em; margin-top: .1em; }

/* Region box, drawn over the picture */
.box { position: absolute; border: 2px solid var(--accent); background: var(--tint); border-radius: .3em; }
.marker { position: absolute; display: grid; place-items: center; box-sizing: border-box; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: 2px solid var(--marker-ring); font-size: 5.2cqw; font-weight: 600; line-height: 1; }

/* Compare (D3) */
.layers { display: grid; }
.layers > * { grid-area: 1 / 1; min-width: 0; }
.cmp-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1.4em; margin-bottom: 1.2em; }
.cmp-field { display: inline-flex; align-items: center; gap: .6em; }
.cmp-field > span:first-child { color: var(--text2); font-size: .92em; }
.cmp-sum { margin: 0; max-width: none; color: var(--text2); }
.cmp-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7em; }
.cmp-col { padding: .6em .8em .7em; border: 1px solid var(--line); border-radius: .77em; }
.cmp-col h3 { margin: 0 0 .3em; padding-left: .6em; font-size: 1em; font-weight: 600; line-height: 1.9em; }
.cmp-col h3 span { color: var(--text2); font-weight: 400; }
.cmp-row { display: flex; align-items: center; justify-content: space-between; gap: .6em; min-height: 2.15em; padding: 0 .6em; border-radius: .46em; transition: background-color 250ms; }
.cmp-row + .cmp-row { margin-top: .15em; }
.cmp-row.sel { background: var(--tint); font-weight: 600; }
.cmp-none { padding: 0 .6em; color: var(--text2); line-height: 2.15em; }
.cmp-pair { margin-top: .8em; padding: .8em 1em 1em; background: var(--side); border-radius: .77em; }
.cmp-pair h3 { margin: 0 0 .6em; font-size: 1em; font-weight: 600; line-height: 1.5em; }
.cmp-pair .pair { display: flex; justify-content: center; gap: 1em; }
.cmp-pair figure { display: flex; flex-direction: column; align-items: center; gap: .5em; flex: 1 1 0; min-width: 0; max-width: 16em; margin: 0; color: var(--text2); font-size: .92em; }
.cmp-pair .pclip { width: 100%; }
.cmp-pair figure .ph { width: 100%; }
@container demo (min-width: 880px) {
  .cmp-pick { margin-bottom: 1.2em; }
  .cmp-sum { margin-left: auto; }
  .cmp-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2em; }
  .cmp-pair .pair { gap: 2em; }
  .cmp-pair figure { flex: none; width: 17em; max-width: none; }
  .cmp-pair .pclip { height: 23em; overflow: hidden; }
  .grid3.big .thumb .swap { width: 11em; }
}

/* Design and device (D5) */
.main.sv > .tabs { margin-bottom: .9em; }
.cap-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; align-items: start; }
.cap-fig { position: relative; margin: 0; min-width: 0; }
.cap-l { position: absolute; z-index: 1; top: .7em; left: .9em; margin: 0; max-width: none; color: var(--text2); font-size: .92em; white-space: nowrap; }
.cap-l .l-short { display: none; }
@container demo (max-width: 440px) { .cap-l .l-long { display: none; } .cap-l .l-short { display: inline; } }
.cap-fig .canvas { width: 100%; padding-top: 2.4em; }
.cap-list { grid-column: 1 / -1; padding: .7em .8em; border: 1px solid var(--line); border-radius: .77em; }
.cap-row { display: flex; align-items: center; gap: .8em; min-height: 2.15em; }
@container demo (min-width: 880px) {
  .cap-wrap { grid-template-columns: auto auto minmax(0, 1fr); gap: 1.6em; }
  .cap-fig .canvas { width: 17.8em; height: 33.6em; padding: 2.4em 1.1em 1.1em; overflow: hidden; }
  .cap-list { grid-column: auto; }
}

/* Flow board (D4) */
.fboard { padding: .8em; border: 1px solid var(--line); border-radius: .77em; }
.fboard .top { display: flex; align-items: center; gap: .6em; margin-bottom: .6em; }
.fboard h3 { display: flex; align-items: center; gap: .5em; margin: 0; font-size: 1em; line-height: 1.7em; font-weight: 600; }
.fflow { display: flex; flex-direction: column; }
.fcol { display: flex; align-items: center; gap: .8em; }
.fcol .thumb { flex: none; width: 6.5em; margin: 0; padding: .5em; }
.fcol .ftxt { order: 2; }
.fcol .ftxt .swap { display: inline-grid; }
.fcol .ftxt .swap > * { justify-self: start; }
.flow-arrow { display: flex; align-items: center; gap: .8em; min-height: 3.4em; padding-left: 2.8em; color: var(--text2); }
.ar-box { position: relative; flex: none; width: 1.2em; height: 3em; }
.ar-box svg { position: absolute; left: 50%; top: 50%; width: 3em; height: 1.2em; margin: -.6em 0 0 -1.5em; transform: rotate(90deg); overflow: visible; }
.ar-box path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ar-label { font-size: .92em; white-space: nowrap; }
@container demo (min-width: 880px) {
  .fboard { padding: .9em 1.2em 1em; }
  .fflow { flex-direction: row; justify-content: space-between; }
  .fcol { flex-direction: column; align-items: stretch; gap: .5em; width: 13.5em; }
  .fcol .thumb { width: auto; padding: .9em; }
  .fcol .thumb .swap { width: 9.4em; }
  .fcol .ftxt { order: 0; display: flex; align-items: center; justify-content: space-between; }
  .flow-arrow { flex: 1; flex-direction: column; justify-content: center; gap: .3em; min-height: 0; padding: 2.6em 0 0; }
  .ar-box { width: 100%; max-width: 6.4em; height: 1.2em; }
  .ar-box svg { position: static; width: 100%; height: 1.2em; margin: 0; transform: none; }
}

/* Option board (D6) */
.xboard { padding: .8em; border: 1px solid var(--line); border-radius: .77em; }
.xboard .top { display: flex; align-items: center; gap: .6em; margin-bottom: .6em; }
.xboard h3 { margin: 0; font-size: 1em; line-height: 1.7em; font-weight: 600; }
.xboard .top .swap { display: inline-grid; }
.xopts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; }
.opt { padding: .5em; border-radius: .77em; transition: background-color 250ms; }
.opt.sel { background: var(--tint); }
.opt .thumb { margin: 0; padding: .5em; }
.opt-l { margin: .5em 0 0; text-align: center; max-width: none; }
.opt.sel .opt-l { font-weight: 600; }
.xnotes { margin-top: .9em; }
.xnotes p { margin: 0; max-width: none; line-height: 2em; }
.xnotes .meta { margin-right: .3em; }
@container demo (min-width: 880px) {
  .xboard { padding: .9em 1.2em 1em; }
  .xopts { grid-template-columns: repeat(3, 13em); justify-content: center; gap: 2em; }
  .opt { padding: .6em; }
  .opt .thumb { padding: .7em; }
  .opt .thumb .ph { width: 8.4em; margin: 0 auto; }
}

/* Files (D7): two plain panels, no app window */
.fpanel { min-width: 0; background: var(--win); border-radius: var(--wr); box-shadow: var(--shadow), 0 0 0 1px var(--line); overflow: hidden; }
.scene .fpanel { width: 100%; flex: none; }
.fp-bar { position: relative; display: flex; align-items: center; height: 2.7em; padding: 0 .9em; border-bottom: 1px solid var(--line); }
.fp-bar .lights { margin: 0; }
.fp-bar b { position: absolute; left: 0; right: 0; text-align: center; font-size: .92em; font-weight: 500; color: var(--text2); }
.fp-rows { padding: .6em .6em .8em; }
.frow { display: flex; align-items: center; gap: .7em; height: 2em; margin-bottom: .1em; padding-right: .6em; border-radius: .46em; font: 400 .92em/1 var(--mono); white-space: nowrap; transition: background-color 250ms, opacity 300ms; }
.frow.dir { font-weight: 600; }
.frow.pressed { background: var(--hover); }
.frow.sel { background: var(--tint); }
.fp-code { margin: 0; padding: .9em 1.1em 1em; font: 400 .86em/1.6 var(--mono); white-space: pre; overflow: hidden; color: var(--text); }
.tout { white-space: pre-wrap; overflow-wrap: anywhere; }
.fp-col { display: contents; }
@container demo (min-width: 880px) {
  .scene .fp-tree { position: absolute; left: 2em; top: 2em; width: 36em; height: 48.5em; }
  .fp-col { position: absolute; left: 40em; top: 2em; width: 42em; height: 48.5em; display: flex; flex-direction: column; gap: 2em; }
  .scene .fp-col .fp-file { flex: 1; width: auto; }
  .scene .fp-col .term { position: static; width: auto; }
  .fp-code { font-size: 1em; }
  .frow { height: 3em; font-size: 1em; }
}

/* Pointer and terminal (fixed colours live in the block below) */
.pointer { z-index: 30; width: 1.5em; height: 1.5em; opacity: 0; pointer-events: none; }
.pointer svg { width: 100%; height: 100%; }
.term { display: flex; flex-direction: column; z-index: 10; border-radius: var(--wr); box-shadow: var(--shadow), 0 0 0 1px var(--line); overflow: hidden; }
.term-bar { position: relative; display: flex; align-items: center; height: 2.3em; padding: 0 .9em; }
.term-bar .lights { margin: 0; }
.term-bar b { position: absolute; left: 0; right: 0; text-align: center; font-size: .92em; font-weight: 500; }
.term-body { padding: .5em 1em .9em; font: 400 .92em/1.55 var(--mono); height: 10.2em; overflow: hidden; }
.term.short .term-body { height: 5.2em; }
.tl { display: grid; grid-template-columns: 15ch 14ch 1fr; column-gap: 1ch; }
.tl .a { white-space: pre; }
.term.slim .tl { grid-template-columns: 12ch 5ch 1fr; }
.tl .r-short { display: none; }
@container demo (max-width: 340px) { .tl .r-long { display: none; } .tl .r-short { display: inline; } }
.term.long .tl { grid-template-columns: 20ch 14ch 1fr; }
.tq { display: flex; gap: 1ch; }
.tq span:last-child { flex: 1; min-width: 0; }
.tq.caret span:last-child::after { content: ""; display: inline-block; width: .55ch; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; }

/* Player controls */
.demo-controls .btn { min-height: 32px; padding: 0 12px; font-size: 13px; }
@media (max-width: 720px) { .demo-controls .btn { min-height: 44px; padding: 0 16px; } }

/* A demo keeps its size from the first paint. The player adds Pause and Replay to the bar after the scene loads,
   so the bar reserves their row now: the buttons beside the caption in the wide layout, under it in the compact
   one. Not reserved where they are never added (reduced motion, ?still=1, a scene that failed). */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.still) .demo:not(.failed) .demo-bar { min-height: 32px; }
  @container demo (max-width: 879px) { html.js:not(.still) .demo:not(.failed) .demo-bar { min-height: 80px; } }
  @media (max-width: 720px) { @container demo (max-width: 879px) { html.js:not(.still) .demo:not(.failed) .demo-bar { min-height: 92px; } } }
}

/* In the compact layout a scene is as tall as its content, which is a fixed number of em (the scene's font
   is max(11px, 100cqw / 32), see .scene), so the stage can be sized before the scene loads. --ch is a scene's
   content height in em, measured once per scene; a scene without a value keeps the 4 / 5 box and may grow when
   it loads. Update the value when a scene's compact layout changes. */
.demo[data-demo="capture"] { --ch: 61.6; --cs: 59.4; }
.demo[data-demo="comment"] { --ch: 52.4; --cs: 52.7; --cn: 54.1; }
.demo[data-demo="draw"] { --ch: 46.4; --cs: 46.4; }
.demo[data-demo="drift"] { --ch: 39.9; --cs: 39.9; }
.demo[data-demo="files"] { --ch: 63.7; --cs: 63.6; }
.demo[data-demo="flows"] { --ch: 70.9; --cs: 71; }
.demo[data-demo="options"] { --ch: 50; --cs: 49.8; }
.demo[data-demo="platform"] { --ch: 46.5; --cs: 44.5; }
.demo[data-demo="reviewqueue"] { --ch: 44.8; --cs: 43; }
.demo[data-demo="skeleton"] { --ch: 39; --cs: 39; }
.demo[data-demo="system"] { --ch: 44.7; --cs: 44.6; }
.demo[data-demo="timeline"] { --ch: 43.7; --cs: 43.7; }
.demo[data-demo="versions"] { --ch: 68.7; --cs: 69.1; --cm: 71.6; }
.demo[data-demo="waiting"] { --ch: 47.2; --cs: 44.4; }
/* Only until the scene is mounted (the stage has no .scene yet); after that the stage follows its content again, so a
   value that is a pixel off moves nothing and a scene that grows is never clipped. min-width: 0 because a min-height
   passes through aspect-ratio and would widen the stage to 4 / 5 of it. */
@container demo (max-width: 879px) { .js .demo-stage:not(:has(> .scene)) { width: 100%; min-width: 0; max-width: 100%; min-height: calc(var(--ch, 0) * max(11px, 100cqw / 32) + 2px); } }
/* Between 353 and 440 px two scenes wrap their text differently: --cm up to 440 px, --cn up to 400 px. */
@container demo (min-width: 353px) and (max-width: 440px) { .js .demo-stage:not(:has(> .scene)) { min-height: calc(var(--cm, var(--ch, 0)) * max(11px, 100cqw / 32) + 2px); } }
@container demo (min-width: 353px) and (max-width: 400px) { .js .demo-stage:not(:has(> .scene)) { min-height: calc(var(--cn, var(--cm, var(--ch, 0))) * max(11px, 100cqw / 32) + 2px); } }
/* Under 352 px the scene's font stops shrinking (11px) and its text wraps more, so its height in em differs: --cs. */
@container demo (max-width: 352px) { .js .demo-stage:not(:has(> .scene)) { min-height: calc(var(--cs, var(--ch, 0)) * 11px + 2px); } }
@media (prefers-reduced-motion: reduce) { [data-from], [data-until], [data-t0], [data-t1] { transition: none; } }

/* ===== FIXED COLOURS (the only place a colour is written outside tokens.css) =====
   The user's design pictures keep these colours in light and dark; the terminal and the traffic lights are other apps. */
.lights i:nth-child(1) { background: #FF5F57; }
.lights i:nth-child(2) { background: #FEBC2E; }
.lights i:nth-child(3) { background: #28C840; }
.term { background: #1C1C1E; color: #F2F2F7; }
.term-bar { background: #2C2C2E; }
.term-bar b { color: #AEAEB2; }
.tl .n { color: #F2F2F7; }
.tl .a, .tl .r, .tout { color: #AEAEB2; }
.tq span:first-child { color: #AEAEB2; }
.tq.caret span:last-child::after { background: #F2F2F7; }
.pointer svg path { fill: #1D1D1F; stroke: #FFFFFF; stroke-width: 1.2; stroke-linejoin: round; }

.crop { container-type: inline-size; background: #F3F3F1; border-radius: .4em; }
.cbtn { display: flex; align-items: center; justify-content: center; width: 82%; height: 1.7em; border-radius: .35em; background: #1F6F5C; color: #FFFFFF; font-size: .8em; font-weight: 600; white-space: nowrap; }
@container (max-width: 80px) { .cbtn { font-size: 0; } }
.ph { position: relative; container-type: inline-size; aspect-ratio: 390 / 844; background: #FFFFFF; border: 1px solid rgba(0,0,0,.14); border-radius: .9em; overflow: hidden; color: #1D1D1F; font-family: var(--font); line-height: 1.25; }
.pi { display: flex; flex-direction: column; height: 100%; padding: 4cqw 7cqw 0; }
.sbar { align-self: center; width: 26cqw; height: 3cqw; margin-bottom: 4cqw; border-radius: 2cqw; background: #E3E3E0; flex: none; }
.ph.dev .ptitle { margin-top: 4cqw; }
.ptitle { font-size: 10.5cqw; font-weight: 700; margin-bottom: 5cqw; letter-spacing: -.01em; }
.ptitle.c { font-size: 5.4cqw; text-align: center; margin-bottom: 4cqw; }
.psearch { flex: none; height: 7cqw; margin-bottom: 5cqw; border-radius: 3.5cqw; background: #EDEDEA; }
.psub { flex: none; margin: -3cqw 0 5cqw; font-size: 4.2cqw; color: #5C5C60; }
.covers { display: flex; gap: 2.6cqw; flex: none; }
.cv { flex: 1; aspect-ratio: 2 / 3; border-radius: 1.6cqw; }
.cv.c1 { background: #C9B79C; } .cv.c2 { background: #8FA89F; } .cv.c3 { background: #B98F8A; } .cv.c4 { background: #8B97B6; }
.plabel { margin: 7cqw 0 3cqw; font-size: 4.6cqw; font-weight: 600; color: #5C5C60; flex: none; }
.rcard { flex: none; padding: 5cqw; border-radius: 4cqw; background: #F3F3F1; }
.rc-top { display: flex; gap: 4cqw; align-items: center; margin-bottom: 4.5cqw; }
.rc-top .cv { flex: none; width: 13cqw; aspect-ratio: 2 / 3; background: #C9B79C; }
.rc-t { font-size: 5.2cqw; font-weight: 600; }
.rc-s { font-size: 3.8cqw; color: #5C5C60; margin-top: .8cqw; }
.rc-bar { height: 1.6cqw; margin-top: 2.6cqw; border-radius: 1cqw; background: #DEDEDA; }
.rc-bar i { display: block; width: 33%; height: 100%; border-radius: 1cqw; background: #1F6F5C; }
.gbtn { display: flex; align-items: center; justify-content: center; height: 12cqw; border-radius: 3cqw; background: #1F6F5C; color: #FFFFFF; font-size: 6.4cqw; font-weight: 600; white-space: nowrap; }
.gbtn.n { width: 76%; }
.gbtn.f { width: 100%; }
@container (max-width: 90px) { .gbtn { font-size: 0; } }
.prow { display: flex; align-items: center; gap: 4cqw; padding: 2.6cqw 0; border-bottom: 1px solid #ECECE9; flex: none; }
.prow .cv { flex: none; width: 9cqw; aspect-ratio: 2 / 3; }
.prow b { display: block; font-size: 4.2cqw; font-weight: 600; }
.prow u { display: block; margin-top: 1cqw; width: 22cqw; height: 2.4cqw; border-radius: 1cqw; background: #E3E3E0; }
.srow { display: flex; align-items: center; justify-content: space-between; padding: 3.6cqw 0; border-bottom: 1px solid #ECECE9; font-size: 4.6cqw; flex: none; }
.sw { position: relative; flex: none; width: 10cqw; height: 6cqw; border-radius: 3cqw; background: #DEDEDA; }
.sw::after { content: ""; position: absolute; top: .8cqw; left: .8cqw; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: #FFFFFF; }
.sw.on { background: #1F6F5C; }
.sw.on::after { left: 5.2cqw; }
.tabbar { display: flex; justify-content: space-around; align-items: center; margin: auto -7cqw 0; height: 14cqw; border-top: 1px solid #ECECE9; flex: none; }
.tabbar i { width: 5cqw; height: 5cqw; border-radius: 1.4cqw; background: #C9C9C6; }
.tabbar i:first-child { background: #1F6F5C; }
.pnav { display: flex; align-items: center; gap: 2cqw; margin-bottom: 5cqw; font-size: 4.4cqw; color: #1F6F5C; font-weight: 600; flex: none; }
.crow { display: flex; align-items: center; justify-content: space-between; padding: 3.6cqw 0; border-bottom: 1px solid #ECECE9; font-size: 4.6cqw; flex: none; }
.crow span:last-child { font-size: 3.6cqw; color: #7A7A7E; }
.para { flex: none; margin-bottom: 5cqw; }
.para u { display: block; height: 2.4cqw; margin-bottom: 2.4cqw; border-radius: 1cqw; background: #E3E3E0; }
.para u:last-child { width: 62%; }
.rtext { font-size: 5cqw; line-height: 1.5; margin-bottom: 5cqw; flex: none; color: #2A2A2C; }
.rhead { font-size: 7cqw; font-weight: 700; margin-bottom: 4cqw; flex: none; }