/* System Labs — site styles. Cobalt chrome on near-white; the app is drawn in its own warm paper. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* site chrome */
  --bg: #FAFAF7;
  --ink: #1C1B18;
  --ink-soft: #5E5A54;
  --ink-faint: #A09A90;
  --brand: #2E55D6;
  --brand-ink: #15306E;
  --band: #15306E;
  --band-text: #EEF2FF;

  /* the app as it draws itself: cards, ribbon, keycaps, focus ring */
  --paper: #F4ECDE;
  --ribbon: #E6D8BC;
  --ribbon-ink: #46361F;
  --focus: #DDB880;
  --accent: #823F1D;
  --highlight: #E8D5AE;
  --line: rgba(90, 70, 48, .18);
  --line-strong: rgba(90, 70, 48, .32);
  --shade: rgba(90, 70, 48, .07);
  --guide: rgba(90, 70, 48, .45);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --measure: 62ch;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.015em; font-weight: 650; }
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem); letter-spacing: -0.03em; line-height: 1.04; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0; }
p + p { margin-top: var(--s2); }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }
code { font-family: var(--mono); font-size: .92em; background: var(--shade); padding: .1em .35em; border-radius: 4px; }
kbd.k { font-family: var(--font); font-size: .9em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; padding: 0 .35em; background: var(--paper); }
ol, ul { margin: 0; padding-left: 1.4em; }
li + li { margin-top: var(--s1); }
.muted { color: var(--ink-soft); }
.small { font-size: .94rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(100% - 2 * var(--s2), 1080px); margin-inline: auto; }
@media (min-width: 720px) { .wrap { width: min(100% - 2 * var(--s4), 1080px); } }

.skip { position: absolute; left: var(--s2); top: -100px; background: var(--ink); color: var(--paper); padding: var(--s1) var(--s2); border-radius: 8px; z-index: 50; }
.skip:focus { top: var(--s2); }

/* ---------- Header / footer ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 650; letter-spacing: -0.01em; font-size: 1.05rem; }
.brand .mark { width: 14px; height: 14px; border-radius: 4px; background: var(--ink); position: relative; }
.brand .mark::after { content: ""; position: absolute; inset: 4px 4px 3px 4px; border-radius: 2px; background: var(--paper); transform: rotate(-6deg); }
.nav { display: flex; gap: var(--s3); flex-wrap: wrap; }
.nav a { color: var(--ink-soft); text-decoration: none; font-size: .98rem; padding: 4px 0; border-bottom: 1.5px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }

footer { border-top: 1px solid var(--line); margin-top: var(--s7); padding: var(--s4) 0 var(--s5); color: var(--ink-soft); font-size: .94rem; }
footer .wrap { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
footer .links { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* ---------- Page blocks ---------- */
.hero { padding: var(--s6) 0 var(--s4); }
.hero .tag { margin-top: var(--s2); font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); color: var(--ink-soft); letter-spacing: -0.01em; }
.hero-lead { margin-top: var(--s3); color: var(--ink-soft); max-width: var(--measure); font-size: 1.1rem; }
.hero.center { text-align: center; padding: var(--s5) 0; }
.hero.center + .section { padding-top: 0; }
.hero.center .mark-icon { width: 88px; height: 88px; display: block; margin: 0 auto var(--s3); }
.hero.center h1 { text-wrap: balance; }
.hero.center .tag { max-width: 30em; margin-inline: auto; }
.hero.center .btn-row { justify-content: center; }
.section { padding: var(--s6) 0 0; }
.section > h2 { margin-bottom: var(--s3); }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--s6); margin-bottom: var(--s2); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s4); margin-bottom: var(--s1); }
.prose ul, .prose ol { margin-top: var(--s2); }
.cols { display: grid; gap: var(--s4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); } }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; gap: var(--s2); margin-top: var(--s3); }
.steps li::before { content: counter(step); width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 650; display: grid; place-items: center; font-size: .95rem; }
.steps li p { padding-top: 4px; }

.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--brand); color: #fff; text-decoration: none; padding: 13px 24px; border-radius: 999px; font-weight: 650; line-height: 1.2; border: 1.5px solid var(--brand); }
.btn:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
.btn.outline { background: transparent; color: var(--brand); }
.btn.outline:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); border-color: var(--brand); }
.btn svg { width: 16px; height: 16px; }
.btn-row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-top: var(--s4); }
.note { color: var(--ink-soft); font-size: .94rem; }
.btn-row + .note { margin-top: var(--s2); }

.product { display: grid; grid-template-columns: 72px 1fr; gap: var(--s3); align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: var(--s4); box-shadow: 0 1px 2px rgba(43,37,32,.05), 0 12px 32px -16px rgba(43,37,32,.25); }
.product img { width: 72px; height: 72px; display: block; }
.product h2 { font-size: 1.6rem; }
.product p { margin-top: var(--s1); color: var(--ink-soft); }
.product .cta { display: inline-block; margin-top: var(--s2); font-weight: 600; }
@media (max-width: 480px) { .product { grid-template-columns: 1fr; } }

.voice { max-width: 46ch; font-size: clamp(1.2rem, 1.05rem + 1vw, 1.65rem); line-height: 1.35; letter-spacing: -0.015em; }
.voice-band { background: var(--band); color: var(--band-text); margin-top: var(--s7); padding: var(--s7) 0; }
.voice-band .voice { max-width: 36ch; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem); line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }

.scene .cap { margin-top: var(--s2); color: var(--ink-soft); max-width: var(--measure); }
.scene .cap b { color: var(--ink); font-weight: 600; }

/* ---------- Scene tabs: radios come first in the section, then the chips, then the panels ---------- */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 var(--s3); }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); font-weight: 600; font-size: .9rem; line-height: 1.2; cursor: pointer; user-select: none; }
.chip svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chip:hover { border-color: var(--brand); }
.scenes > .scene { display: none; }
#scene-1:checked ~ .scenes > .scene:nth-child(1), #scene-2:checked ~ .scenes > .scene:nth-child(2), #scene-3:checked ~ .scenes > .scene:nth-child(3),
#scene-4:checked ~ .scenes > .scene:nth-child(4), #scene-5:checked ~ .scenes > .scene:nth-child(5), #scene-6:checked ~ .scenes > .scene:nth-child(6) { display: block; }
#scene-1:checked ~ .chips label[for="scene-1"], #scene-2:checked ~ .chips label[for="scene-2"], #scene-3:checked ~ .chips label[for="scene-3"],
#scene-4:checked ~ .chips label[for="scene-4"], #scene-5:checked ~ .chips label[for="scene-5"], #scene-6:checked ~ .chips label[for="scene-6"] { background: var(--brand); border-color: var(--brand); color: #fff; }
#scene-1:focus-visible ~ .chips label[for="scene-1"], #scene-2:focus-visible ~ .chips label[for="scene-2"], #scene-3:focus-visible ~ .chips label[for="scene-3"],
#scene-4:focus-visible ~ .chips label[for="scene-4"], #scene-5:focus-visible ~ .chips label[for="scene-5"], #scene-6:focus-visible ~ .chips label[for="scene-6"] { outline: 2px solid var(--brand); outline-offset: 3px; }

.qa dt { font-weight: 650; margin-top: var(--s3); }
.qa dd { margin: var(--s1) 0 0; color: var(--ink-soft); }
.contact { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: var(--s4); margin-top: var(--s3); }
.contact .mail { font-size: clamp(1rem, .7rem + 1.4vw, 1.5rem); font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Demo clock ----------
   Every demo runs one linear clock: --p goes 0 → 1 over --L seconds, so --s is the time in
   seconds. Everything else is a pure function of --s: appear at --t, hold until --u, ease
   over --d. Reduced motion sets --p to 1 and shows each demo's end state. */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.demo {
  --L: 16;
  --p: 0;
  --s: calc(var(--p) * var(--L));
  animation: clock calc(var(--L) * 1s) linear infinite;
  position: relative;
  container-type: inline-size;
  user-select: none;
}
@keyframes clock { from { --p: 0; } to { --p: 1; } }

/* progress helpers */
.k  { --k: clamp(0, calc((var(--s) - var(--t)) / var(--d, .4)), 1); --e: calc(var(--k) * var(--k) * (3 - 2 * var(--k))); }
.at { opacity: clamp(0, calc((var(--s) - var(--t)) / var(--d, .3)), 1); }
.on { opacity: calc(clamp(0, calc((var(--s) - var(--t)) / var(--d, .25)), 1) * clamp(0, calc((var(--u) - var(--s)) / var(--d, .25)), 1)); }
.off { opacity: calc(1 - clamp(0, calc((var(--s) - var(--t)) / var(--d, .3)), 1)); }
.fade { opacity: calc(clamp(0, calc(var(--s) / .45), 1) * clamp(0, calc((var(--L) - .2 - var(--s)) / .45), 1)); }
/* a value that is 1 between --t and --u */
.pulse { --v: calc(clamp(0, calc((var(--s) - var(--t)) / var(--d, .3)), 1) * clamp(0, calc((var(--u) - var(--s)) / var(--d, .3)), 1)); }

/* eased legs: leg n starts at --tn, lasts --dn; --en runs 0 → 1 */
.legs {
  --k1: clamp(0, calc((var(--s) - var(--t1, 999)) / var(--d1, .6)), 1); --e1: calc(var(--k1) * var(--k1) * (3 - 2 * var(--k1)));
  --k2: clamp(0, calc((var(--s) - var(--t2, 999)) / var(--d2, .6)), 1); --e2: calc(var(--k2) * var(--k2) * (3 - 2 * var(--k2)));
  --k3: clamp(0, calc((var(--s) - var(--t3, 999)) / var(--d3, .6)), 1); --e3: calc(var(--k3) * var(--k3) * (3 - 2 * var(--k3)));
  --k4: clamp(0, calc((var(--s) - var(--t4, 999)) / var(--d4, .6)), 1); --e4: calc(var(--k4) * var(--k4) * (3 - 2 * var(--k4)));
  --k5: clamp(0, calc((var(--s) - var(--t5, 999)) / var(--d5, .6)), 1); --e5: calc(var(--k5) * var(--k5) * (3 - 2 * var(--k5)));
  --k6: clamp(0, calc((var(--s) - var(--t6, 999)) / var(--d6, .6)), 1); --e6: calc(var(--k6) * var(--k6) * (3 - 2 * var(--k6)));
  --k7: clamp(0, calc((var(--s) - var(--t7, 999)) / var(--d7, .6)), 1); --e7: calc(var(--k7) * var(--k7) * (3 - 2 * var(--k7)));
  --k8: clamp(0, calc((var(--s) - var(--t8, 999)) / var(--d8, .6)), 1); --e8: calc(var(--k8) * var(--k8) * (3 - 2 * var(--k8)));
}
/* a pointer or touch walks from (--x0,--y0) by the deltas --xn,--yn, in % of the stage,
   plus optional em parts --exn,--eyn for targets inside a window's text */
.walk {
  left: calc((var(--x0) + var(--x1, 0) * var(--e1) + var(--x2, 0) * var(--e2) + var(--x3, 0) * var(--e3) + var(--x4, 0) * var(--e4) + var(--x5, 0) * var(--e5) + var(--x6, 0) * var(--e6) + var(--x7, 0) * var(--e7) + var(--x8, 0) * var(--e8)) * 1%
           + (var(--ex0, 0) + var(--ex1, 0) * var(--e1) + var(--ex2, 0) * var(--e2) + var(--ex3, 0) * var(--e3) + var(--ex4, 0) * var(--e4)) * 1em);
  top:  calc((var(--y0) + var(--y1, 0) * var(--e1) + var(--y2, 0) * var(--e2) + var(--y3, 0) * var(--e3) + var(--y4, 0) * var(--e4) + var(--y5, 0) * var(--e5) + var(--y6, 0) * var(--e6) + var(--y7, 0) * var(--e7) + var(--y8, 0) * var(--e8)) * 1%
           + (var(--ey0, 0) + var(--ey1, 0) * var(--e1) + var(--ey2, 0) * var(--e2) + var(--ey3, 0) * var(--e3) + var(--ey4, 0) * var(--e4)) * 1em);
}
/* a window moves by the deltas --xn,--yn in units of its own box (one slot on a board) */
.mover {
  transform: translate(calc((var(--x0, 0) + var(--x1, 0) * var(--e1) + var(--x2, 0) * var(--e2) + var(--x3, 0) * var(--e3) + var(--x4, 0) * var(--e4)) * 100%),
                       calc((var(--y0, 0) + var(--y1, 0) * var(--e1) + var(--y2, 0) * var(--e2) + var(--y3, 0) * var(--e3) + var(--y4, 0) * var(--e4)) * 100%));
}

/* typed text: each letter has --i; the string's --t is when typing starts, --dt the pace */
.type i { font-style: normal; white-space: pre; font-size: calc(var(--on) * 1em);
  --on: clamp(0, calc((var(--s) - var(--t) - var(--i) * var(--dt, .07)) * 40), 1); }
.caret { display: inline-block; width: .09em; height: 1em; background: var(--ink); vertical-align: -.12em; margin-left: .04em; border-radius: 1px;
  animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* ---------- Stage: a tinted board ----------
   A container's own cqw resolve against the viewport, so every stage sets its text size on its children. */
.stage { --tint: #D8E5F5; --tint-ink: #2A4A86; position: relative; border-radius: 16px; overflow: hidden; background: var(--tint); border: 1px solid color-mix(in srgb, var(--tint-ink) 18%, transparent); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 24px 60px -28px color-mix(in srgb, var(--tint-ink) 45%, transparent); }
.stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, color-mix(in srgb, var(--tint-ink) 22%, transparent) .09cqw, transparent .16cqw) 1.2cqw 1.2cqw / 2.4cqw 2.4cqw; pointer-events: none; }
.tint-sky { --tint: #D8E5F5; --tint-ink: #2A4A86; }
.tint-mint { --tint: #D5E8DC; --tint-ink: #2B5A47; }
.tint-lilac { --tint: #E3DDF2; --tint-ink: #4B3B82; }
.tint-blush { --tint: #F6DFDA; --tint-ink: #8B3D34; }
.tint-sand { --tint: #EFE6D3; --tint-ink: #6F5B32; }

/* ---------- Board: a stage with slots, one per --i ---------- */
.board { --cols: 3; --rows: 2; --stack: 5; --sx: mod(var(--stack), var(--cols)); --sy: round(down, calc(var(--stack) / var(--cols))); --hx: mod(var(--hole), var(--cols)); --hy: round(down, calc(var(--hole) / var(--cols))); aspect-ratio: 16 / 10; }
.board > * { font-size: 1.5cqw; }
.cells { position: absolute; inset: 4cqw 1.2cqw; --hid: 0; --cl: 0; }
.cell, .guide { --c: mod(var(--i), var(--cols)); --r: round(down, calc(var(--i) / var(--cols))); position: absolute; left: calc(var(--c) * 100% / var(--cols)); top: calc(var(--r) * 100% / var(--rows)); width: calc(100% / var(--cols)); height: calc(100% / var(--rows)); padding: .8em; }
.cell { opacity: calc(var(--vis, 1) * (1 - var(--hid))); }
.cell.pop { --vis: var(--k); --dx: calc(var(--sx) - var(--c)); --dy: calc(var(--sy) - var(--r)); transform: translate(calc((1 - var(--e)) * var(--dx) * 100%), calc((1 - var(--e)) * var(--dy) * 100%)) scale(calc(.9 + .1 * var(--e))); }
/* with --hid at 1 a stack cell is its padding, the ribbon (2.5em at .95em) and the stack's border */
.cell.stackcell { opacity: 1; height: calc(100% / var(--rows) - (100% / var(--rows) - 3.975em - 2px) * var(--hid)); }
.cell.lift { z-index: 3; }
.cell.lift2 { z-index: 4; }
@media (max-width: 640px) {
  .board { --cols: 2; --rows: 3; aspect-ratio: 3 / 4; }
  .board > * { font-size: 2.7cqw; }
  .board .ptr, .board .keys, .board .touch { display: none; }
}

/* ---------- Card window ---------- */
.win { position: relative; width: 100%; height: 100%; background: rgba(244,236,222,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: .7em; box-shadow: 0 .05em .1em rgba(43,37,32,.06), 0 .4em 1em -.3em rgba(43,37,32,.28), inset 0 1px 0 rgba(255,255,255,.7); overflow: hidden; --py: .8em; --px: 1em; padding: var(--py) var(--px); color: var(--ink); line-height: 1.35; }
.win .hd { font-weight: 650; font-size: 1.15em; line-height: 1.25; margin-bottom: .35em; min-height: 1.25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win .hd .ph { color: var(--ink-faint); font-weight: 500; }
.win .bd { color: var(--ink); }
.win .ln { display: flex; gap: .45em; align-items: baseline; min-height: 1.35em; }
.win .ln > span:not(.m):not(.mk) { min-width: 0; }
.win .ln.l1 { padding-left: 1.54em; }
.win .ln.nest { padding-left: calc(var(--e) * 1.54em); }
.win .ln.unnest { padding-left: calc((1 - var(--e)) * 1.54em); }
.win .m { color: var(--ink-soft); flex: none; min-width: 1em; text-align: center; }
.win .mk { display: grid; flex: none; align-self: center; }
.win .mk > * { grid-area: 1 / 1; }
.alt { display: grid; }
.alt > * { grid-area: 1 / 1; }
/* one nest level is the app's 20 pt; the -.45em takes back the flex gap, so a line with no indent sits flush */
.win .ind { flex: none; width: calc(var(--e) * 1.54em); margin-right: -.45em; }
.win .ind.un { width: calc((1 - var(--e)) * 1.54em); }
/* the app draws checkboxes as the square / checkmark.square symbols at 12 pt beside 13 pt text */
.win .m.chk { font-size: .92em; min-width: 0; align-self: center; }
.win.edit { border-color: var(--focus); box-shadow: 0 0 0 .07em var(--focus), 0 .4em 1em -.3em rgba(43,37,32,.28); }
/* editing that ends at --t (edit2) or starts at --t (editon) */
.win.edit2 { --ed: calc(1 - clamp(0, calc((var(--s) - var(--t)) / .3), 1)); }
.win.editon { --ed: clamp(0, calc((var(--s) - var(--t)) / .3), 1); }
.win.edit2, .win.editon { border-color: color-mix(in srgb, var(--focus) calc(var(--ed) * 100%), var(--line)); box-shadow: 0 0 0 .07em color-mix(in srgb, var(--focus) calc(var(--ed) * 100%), transparent), 0 .4em 1em -.3em rgba(43,37,32,.28); }
.win.edit2 .fbar, .win.editon .fbar { opacity: var(--ed); }
/* format bar and hover buttons as the app lays them out: borderless symbols inside the card's margin */
.win .fbar { position: absolute; left: var(--px); right: var(--px); bottom: var(--py); height: 1.85em; padding: 0 .46em; display: flex; align-items: center; gap: 1.08em; color: var(--ink-soft); }
.win .hov { position: absolute; top: var(--py); right: var(--px); display: flex; align-items: center; gap: .46em; color: var(--ink-soft); }
.win .hov .ttl { font-size: .85em; white-space: nowrap; }
.win .sum { color: var(--ink-soft); font-weight: 400; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.win .sum.alt { display: grid; }   /* spinner and summary share one spot */
.win .layer { position: absolute; left: 1em; right: 1em; top: calc(.8em + 1.8em); }
/* Clarity: --cl collapses every card; a card's own --own expands just that card */
.win .c-bd { opacity: max(calc(1 - var(--cl, 0)), var(--own, 0)); }
.win .c-sum { opacity: min(var(--cl, 0), calc(1 - var(--own, 0))); }
.spin { display: inline-block; width: .9em; height: .9em; border: .12em solid var(--line-strong); border-top-color: var(--ink-soft); border-radius: 50%; animation: spin .9s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The app's own SF Symbols (assets/symbols, drawn at 64 pt), as masks in the text color.
   1em is the symbol's point size; --w and --h are its size at 64 pt. */
.sym, .win .m.chk, .ribbon .more { display: inline-block; flex: none; width: calc(var(--w) * 1em / 64); height: calc(var(--h) * 1em / 64); background: currentColor; -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat; }
.sym.bold { --img: url(symbols/bold.png); --w: 54; --h: 56; }
.sym.italic { --img: url(symbols/italic.png); --w: 49; --h: 56; }
.sym.bullets { --img: url(symbols/list.bullet.png); --w: 79; --h: 57; }
.sym.numbers { --img: url(symbols/list.number.png); --w: 79; --h: 64; }
.sym.checklist { --img: url(symbols/checklist.png); --w: 87; --h: 75; }
.sym.refresh { --img: url(symbols/arrow.clockwise.png); --w: 67; --h: 79; }
.sym.compress { --img: url(symbols/rectangle.compress.vertical.png); --w: 84; --h: 89; }
.sym.expand { --img: url(symbols/rectangle.expand.vertical.png); --w: 87; --h: 86; }
.sym.trash { --img: url(symbols/trash.png); --w: 71; --h: 81; }
.win .m.chk { --img: url(symbols/square.png); --w: 74; --h: 69; }
.win .m.chk.done { --img: url(symbols/checkmark.square.png); }
.ribbon .more { --img: url(symbols/ellipsis.circle.png); --w: 75; --h: 75; }

/* ---------- Stack: the control center ---------- */
.stack { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background: rgba(244,236,222,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: .7em; box-shadow: 0 .05em .1em rgba(43,37,32,.06), 0 .4em 1em -.3em rgba(43,37,32,.28); overflow: hidden; color: var(--ink); }
.ribbon { flex: none; height: 2.5em; background: var(--ribbon); display: flex; align-items: center; gap: 1em; padding: 0 .9em; color: var(--ribbon-ink); font-size: .95em; white-space: nowrap; position: relative; overflow: hidden; }
.ribbon .b { font-weight: 600; }
.ribbon .clarity { font-weight: 600; color: color-mix(in srgb, var(--accent) calc(var(--cl, 0) * 100%), var(--ink-soft)); }
.ribbon .sp { flex: 1; }
/* eye / eye.slash and ellipsis.circle: 13 pt symbols beside the ribbon's 12 pt titles */
.ribbon .eye, .ribbon .more { flex: none; font-size: 1.08em; }
.ribbon .eye { position: relative; width: calc(99em / 64); height: calc(78em / 64); }
.ribbon .eye::before, .ribbon .eye::after { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url(symbols/eye.png) center / calc(99em / 64) auto no-repeat; mask: url(symbols/eye.png) center / calc(99em / 64) auto no-repeat; opacity: calc(1 - var(--hid, 0)); }
.ribbon .eye::after { -webkit-mask-image: url(symbols/eye.slash.png); mask-image: url(symbols/eye.slash.png); opacity: var(--hid, 0); }
.ribbon .rbadge { opacity: var(--hid, 0); position: absolute; right: 6.6em; top: 50%; transform: translateY(-50%); min-width: 1.5em; height: 1.5em; padding: 0 .4em; border-radius: .75em; background: rgba(244,236,222,.9); color: var(--ribbon-ink); font-weight: 650; font-size: .8em; display: grid; place-items: center; border: 1px solid var(--line); }
.area { flex: 1; position: relative; overflow: hidden; }
.area .win { position: absolute; inset: 0; width: auto; height: auto; border: 0; border-radius: 0; box-shadow: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.area .win .bd, .area .win .layer { padding-right: 1.8em; }
.badge { position: absolute; right: .7em; bottom: .6em; min-width: 1.6em; height: 1.6em; padding: 0 .45em; border-radius: .8em; background: var(--ribbon); color: var(--ribbon-ink); font-weight: 650; font-size: .8em; display: grid; place-items: center; border: 1px solid var(--line); z-index: 2; }
.badge span { grid-area: 1 / 1; }
.band { position: absolute; top: 0; bottom: 0; width: 7%; background: var(--shade); display: grid; place-items: center; color: var(--ink-soft); font-size: 1.4em; z-index: 2; }
.band.r { right: 0; } .band.l { left: 0; }

/* ---------- Pointer, touch, keycaps, guide ---------- */
.ptr { position: absolute; width: 1.2em; height: 1.73em; z-index: 10; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.ptr svg { width: 100%; height: 100%; display: block; }
.ring { position: absolute; left: -.65em; top: -.65em; width: 1.5em; height: 1.5em; border-radius: 50%; border: .08em solid var(--accent);
  --cc: clamp(0, calc((var(--s) - var(--tc)) / .35), 1); opacity: calc((1 - var(--cc)) * clamp(0, calc((var(--s) - var(--tc)) * 50), 1)); transform: scale(calc(.4 + var(--cc))); }
.touch { position: absolute; z-index: 10; display: flex; gap: .45em; pointer-events: none; }
.touch i { width: 1.7em; height: 1.7em; border-radius: 50%; background: rgba(43,37,32,.28); border: .08em solid rgba(244,236,222,.8); }
.keys { position: absolute; z-index: 10; display: flex; gap: .6em; }
.kbd { display: inline-grid; place-items: center; min-width: 2em; height: 2em; padding: 0 .5em; border-radius: .4em; color: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 .18em 0 var(--line-strong), 0 .4em .8em -.3em rgba(43,37,32,.4); font-weight: 600; font-family: var(--font);
  transform: translateY(calc(var(--pr, 0) * .14em)); background: color-mix(in srgb, var(--paper), var(--ribbon) calc(var(--pr, 0) * 100%)); }
.kbd.press { --pr: calc(clamp(0, calc((var(--s) - var(--t)) / .08), 1) * clamp(0, calc((var(--u) - var(--s)) / .08), 1)); }
.guide { pointer-events: none; z-index: 2; }
.guide::before { content: ""; display: block; width: 100%; height: 100%; border-radius: .7em; border: .1em dashed var(--guide); }
.guide.solid::before { border-style: solid; background: var(--shade); border-color: var(--ribbon-ink); }
.under { position: absolute; z-index: 0; }
.under .macwin { font-size: 1em; border-radius: 1cqw; box-shadow: 0 .8cqw 2cqw -.6cqw rgba(43,37,32,.28); }
.under .macwin .tb { padding: .6em .9em; font-size: .95em; gap: .5em; }
.under .macwin .tb .dots i { width: .8em; height: .8em; }
.under .macwin .pane { padding: 1em 1.2em; }
.under .macwin .row { padding: .55em 0; }
.under .macwin .row.quiet { font-size: 1em; }

/* ---------- Zoomed stages (one card, or the stack): windows sit at % positions, and
   everything inside them is in em, so pointers can aim at text with % + em ---------- */
.zoom { aspect-ratio: 16 / 10; }
.zoom > * { font-size: 2.8cqw; }
.zoom .win, .zoom .stack { position: absolute; width: auto; height: auto; }
/* the app's 16 × 12 pt margin, plus the text view's 5 pt line padding */
.zoom .win { --py: .92em; --px: 1.23em; padding: var(--py) calc(var(--px) + .38em); }
.zoom .win .hd { font-size: 1.31em; font-weight: 700; }
.zoom .win .layer { left: 1.77em; right: 1.77em; top: 3.02em; }
.zoom .ribbon { font-size: .92em; height: calc(40em / 12); gap: calc(14em / 12); }   /* 40 pt ribbon, 12 pt titles 14 pt apart */
.zoom .area .win { position: absolute; inset: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 640px) { .zoom { aspect-ratio: 4 / 3; } .zoom > * { font-size: 3cqw; } }

/* ---------- Mac window chrome for the illustrations ---------- */
.macwin { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 4px rgba(43,37,32,.05), 0 20px 50px -24px rgba(43,37,32,.35); overflow: hidden; font-size: .92rem; color: var(--ink); }
.macwin .tb { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--ribbon); color: var(--ribbon-ink); font-weight: 600; font-size: .9rem; }
.macwin .tb .dots { display: flex; gap: 6px; margin-right: 6px; }
.macwin .tb .dots i { width: 11px; height: 11px; border-radius: 50%; background: #CDB690; border: 1px solid rgba(90,70,48,.25); }
.macwin .pane { padding: 18px 20px; }
.macwin .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.macwin .row:last-child { border-bottom: 0; }
.macwin .row.quiet { color: var(--ink-soft); font-size: .88rem; }
.macwin .row.stackv { flex-direction: column; align-items: flex-start; gap: 8px; }
.macwin .mbtn { background: var(--paper); border: 1px solid var(--line-strong); border-radius: 7px; padding: 4px 12px; font-weight: 600; font-size: .86rem; box-shadow: 0 1px 0 rgba(90,70,48,.15); white-space: nowrap; }
.macwin .mbtn.primary { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.macwin .field { flex: 1; background: rgba(255,255,255,.55); border: 1px solid var(--line-strong); border-radius: 7px; padding: 5px 10px; letter-spacing: .2em; color: var(--ink-soft); font-family: var(--mono); overflow: hidden; }
.macwin .toggle { width: 34px; height: 20px; border-radius: 10px; background: var(--accent); position: relative; flex: none; }
.macwin .toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.macwin .shield { width: 22px; height: 26px; flex: none; background: var(--ink-soft); clip-path: polygon(50% 0, 100% 15%, 92% 70%, 50% 100%, 8% 70%, 0 15%); opacity: .8; }
.finder { display: grid; grid-template-columns: 34% 1fr; height: 100%; }
.finder .side { background: rgba(230,216,188,.55); padding: .6em 0; color: var(--ink-soft); }
.finder .side div { padding: .35em 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finder .side .sel { background: var(--highlight); color: var(--ink); font-weight: 600; }
.finder .list { padding: .4em 0; }
.finder .f { display: grid; grid-template-columns: 1em 1fr auto; gap: .6em; align-items: center; padding: .4em 1em; white-space: nowrap; }
.finder .f .ic { width: .85em; height: 1.05em; border: .09em solid var(--ink-soft); border-radius: .12em; position: relative; }
.finder .f .ic::after { content: ""; position: absolute; left: .15em; right: .15em; top: .25em; height: .08em; background: var(--ink-soft); box-shadow: 0 .2em 0 var(--ink-soft), 0 .4em 0 var(--ink-soft); }
.finder .f .when { color: var(--ink-soft); font-variant-numeric: tabular-nums; display: grid; }
.finder .f .when span { grid-area: 1 / 1; text-align: right; }
.finder .f.hl { background: color-mix(in srgb, var(--highlight) calc(var(--v, 0) * 100%), transparent); }
.files { aspect-ratio: 16 / 10; }
.files > * { font-size: 1.9cqw; }
.files .win { position: absolute; width: auto; height: auto; border-radius: 1.4cqw; padding: 1.6cqw 2cqw; }
.files .macwin { position: absolute; border-radius: 1.2cqw; display: flex; flex-direction: column; }
.files .finder { flex: 1; min-height: 0; grid-template-columns: 28% 1fr; font-size: .9em; }
.files .macwin .tb { padding: .55em .9em; font-size: .95em; gap: .5em; }
.files .macwin .tb .dots i { width: .75em; height: .75em; }
.files .macwin .tb .dots { margin-right: .4em; }
@media (max-width: 640px) { .files { aspect-ratio: 4 / 3; } .files > * { font-size: 2.6cqw; } }

/* ---------- Reduced motion: show the end state of every demo, still ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demo { animation: none; --p: 1; }
  .ptr, .touch, .caret, .keys, .spin, .guide { display: none !important; }
  .fade { opacity: 1; }
}