/* roshnai.css - Shayan's career as a manga in lights. Lahore tilework by day, kashi turquoise and
   saffron lines glowing on lapis by night, drawn as manga pages: frames, screentone, speed lines,
   narration boxes, speech bubbles and sound-effect bursts. The OS picks day or night; the Night
   button (sky.js) overrides it with data-theme on <html>. System fonts only.
   Sections: tokens, base, top bar, cover (sky, skyline, seal), pages and panels, bubbles and
   bursts, character file, interlude (world clock), lanterns, chapters, demos (shared parts for
   the playable panels), arcade, letters, footer, phones, motion, print. */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --bg: #ebe4d3;             /* lime plaster */
  --panel: #f8f4ea;
  --panel-2: #fffdf7;
  --ink: #13203b;            /* indigo ink, 14.7:1 on the panel */
  --ink-2: #4b5770;          /* 6.6:1 */
  --rule: #d6cdb7;
  --line: #7c8497;           /* control borders: 3.4:1 on the panel */
  --accent: #1d4f9c;         /* kashi cobalt: questions, 7.2:1 */
  --accent-soft: #e2e8f3;    /* cobalt stays 6.4:1 on it */
  --teal: #0e6f6a;           /* 5.5:1 */
  --gold: #7f5005;          /* ochre: marks and plan tags, about 6.2:1 on the panel, 4.9:1 on the hero lattice */
  --brick: #9c4128;          /* Mughal brick, 6:1 */
  --hatch: rgba(29, 79, 156, .2);
  --tick: #13203b;
  --shadow: 0 1px 0 rgba(19, 32, 59, .04), 0 26px 52px -34px rgba(19, 32, 59, .4);
  --glow: none;              /* text and stroke glow, night only */
  --glow-gold: none;
  --glow-f: none;            /* the same glow as a filter, for drawings */
  --lamp: 0;                 /* window lamps in the skyline, lit at night */
  --sky-1: #f3eee2;          /* hero: plaster, lighter toward the clock */
  --sky-2: #e6dfcc;
  --lattice: rgba(29, 79, 156, .075);
  --horizon: #1d4f9c;
  --star: transparent;
  --seal-a: #1d4f9c;         /* rosette and heart */
  --seal-b: #0e6f6a;         /* band */
  --seal-c: #9c4128;         /* rims and beads */
  --day-arc: rgba(142, 90, 6, .16);
  --panel-dark: #13203b;     /* dark panels: ink-blue with plaster text */
  --ink-dark: #f3efe4;
  --frame: #13203b;          /* panel frames and bubble outlines */
  --bubble: #fffdf7;
  --bubble-ink: #13203b;
  --pop: #f2b84b;            /* bursts and pop captions; their text is --pop-ink */
  --pop-ink: #13203b;
  --hot: #9c4128;
  --tone: rgba(29, 79, 156, .2);
  --speed: rgba(19, 32, 59, .07);
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Bold", "Arial Black", sans-serif;
  --rule-accent: rgba(29, 79, 156, .55);   /* the margin rule */
  --night-arc: rgba(29, 79, 156, .1);

  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", "Noto Serif", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0-10L2.9-7 7.1-7.1 7-2.9 10 0 7 2.9 7.1 7.1 2.9 7 0 10-2.9 7-7.1 7.1-7 2.9-10 0-7-2.9-7.1-7.1-2.9-7z'/%3E%3C/svg%3E");   /* the eight-point star, as a mask */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --pad: 48px;               /* page side padding */
  --bar: 52px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #070e20;
    --panel: #0c1730;
    --panel-2: #10203f;
    --ink: #e9eef5;          /* 15.3:1 on the panel */
    --ink-2: #9fb1c8;        /* 8.1:1 */
    --rule: #22355a;
    --line: #5d7398;         /* 3.7:1 */
    --accent: #62ddd3;       /* kashi turquoise, lit: 10.8:1 */
    --accent-soft: #113246;
    --teal: #62ddd3;
    --gold: #f2b84b;         /* saffron: 9.9:1 */
    --brick: #ec8a5e;
    --hatch: rgba(98, 221, 211, .22);
    --tick: #e9eef5;
    --shadow: 0 0 0 1px rgba(98, 221, 211, .06), 0 30px 60px -30px rgba(0, 0, 0, .9);
    --glow: 0 0 8px rgba(98, 221, 211, .45);
    --glow-gold: 0 0 7px rgba(242, 184, 75, .55);
    --glow-f: drop-shadow(0 0 3px rgba(98, 221, 211, .5));
    --lamp: .9;
    --sky-1: #12224a;
    --sky-2: #050b1a;
    --lattice: rgba(98, 221, 211, .07);
    --horizon: #62ddd3;
    --star: #dff6ff;
    --seal-a: #62ddd3;
    --seal-b: #8fb8ff;
    --seal-c: #f2b84b;
    --day-arc: rgba(255, 228, 170, .14);
    --panel-dark: #040915;
    --ink-dark: #e9eef5;
    --frame: #9fc4e6;
    --bubble: #eef3f9;
    --bubble-ink: #0b1630;
    --pop: #f2b84b;
    --pop-ink: #0b1630;
    --hot: #ec8a5e;
    --tone: rgba(98, 221, 211, .2);
    --speed: rgba(98, 221, 211, .07);
    --rule-accent: rgba(98, 221, 211, .5);
    --night-arc: rgba(98, 221, 211, .08);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070e20;
  --panel: #0c1730;
  --panel-2: #10203f;
  --ink: #e9eef5;
  --ink-2: #9fb1c8;
  --rule: #22355a;
  --line: #5d7398;
  --accent: #62ddd3;
  --accent-soft: #113246;
  --teal: #62ddd3;
  --gold: #f2b84b;
  --brick: #ec8a5e;
  --hatch: rgba(98, 221, 211, .22);
  --tick: #e9eef5;
  --shadow: 0 0 0 1px rgba(98, 221, 211, .06), 0 30px 60px -30px rgba(0, 0, 0, .9);
  --glow: 0 0 8px rgba(98, 221, 211, .45);
  --glow-gold: 0 0 7px rgba(242, 184, 75, .55);
  --glow-f: drop-shadow(0 0 3px rgba(98, 221, 211, .5));
  --lamp: .9;
  --sky-1: #12224a;
  --sky-2: #050b1a;
  --lattice: rgba(98, 221, 211, .07);
  --horizon: #62ddd3;
  --star: #dff6ff;
  --seal-a: #62ddd3;
  --seal-b: #8fb8ff;
  --seal-c: #f2b84b;
  --day-arc: rgba(255, 228, 170, .14);
  --panel-dark: #040915;
  --ink-dark: #e9eef5;
  --frame: #9fc4e6;
  --bubble: #eef3f9;
  --bubble-ink: #0b1630;
  --pop: #f2b84b;
  --pop-ink: #0b1630;
  --hot: #ec8a5e;
  --tone: rgba(98, 221, 211, .2);
  --speed: rgba(98, 221, 211, .07);
  --rule-accent: rgba(98, 221, 211, .5);
  --night-arc: rgba(98, 221, 211, .08);
}


/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 16px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--serif);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } }
:root[data-theme="dark"] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
p, li, dd, figcaption { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); }
ol, ul { margin: 0; padding: 0; }
dl, dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { overflow: visible; }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--accent); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
main:focus, section:focus { outline: none; }
.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.dot { display: none; }
.skip {
  position: absolute; left: 16px; top: -64px; z-index: 50;
  background: var(--panel); color: var(--accent); border: 1.5px solid var(--accent);
  padding: 10px 14px; font: 600 14px/1 var(--sans); text-decoration: none;
}
.skip:focus { top: 8px; }
html:not(.js) .js-only { display: none !important; }
html:not(.js) .l-art { display: none; }
.kicker {
  display: block; margin: 0 0 14px; color: var(--accent);
  font: 600 11.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
.kicker .coords { white-space: nowrap; margin-left: 10px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: none; color: var(--ink-2); }

/* buttons: a manga block with an offset shadow that presses in */
.btn, .d-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  font: 700 14.5px/1.15 var(--sans); letter-spacing: .01em; white-space: nowrap;
  color: var(--ink); background: var(--panel-2);
  border: 2.5px solid var(--frame); border-radius: 4px;
  box-shadow: 3px 3px 0 var(--frame);
  text-decoration: none;
  transition: transform .08s linear, box-shadow .08s linear;
}
.btn:hover, .d-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--panel-2) 80%, var(--accent)); }
.btn:active, .d-btn:active, .d-btn[aria-pressed="true"] { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--frame); }
.btn.primary, .d-btn.primary { background: var(--pop); color: var(--pop-ink); }
.btn.primary:hover, .d-btn.primary:hover { background: color-mix(in srgb, var(--pop) 88%, #fff); color: var(--pop-ink); }
.d-btn { min-height: 40px; padding: 0 13px; font-size: 14px; }
.d-btn[disabled] { opacity: .5; cursor: default; transform: none; box-shadow: 3px 3px 0 var(--frame); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--bar);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.topbar-in {
  max-width: 1180px; height: 100%; margin: 0 auto;
  padding: 0 calc(var(--pad) - 12px) 0 var(--pad);
  display: flex; align-items: center; gap: 12px;
}
.topbar .brand {
  display: inline-flex; align-items: center;
  font: 700 17px/1 var(--serif); letter-spacing: -.005em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand-star {
  flex: none; width: 15px; height: 15px; margin: 0 9px 0 0;
  background: var(--gold);
  -webkit-mask: var(--star-mask) center / contain no-repeat; mask: var(--star-mask) center / contain no-repeat;
}
.topbar .brand:hover { color: var(--accent); }
.tb-time {
  margin: 0 6px 0 auto;
  font: 500 12.5px/1 var(--mono); letter-spacing: .04em; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tb-time .tb-code { color: var(--gold); margin-right: 3px; }
.topbar nav { display: flex; align-items: center; gap: 2px; }
.tb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 12px;
  font: 500 14px/1 var(--sans); letter-spacing: .005em; white-space: nowrap;
  color: var(--ink); background: none; border: 0; border-radius: 3px; text-decoration: none;
}
.tb-btn:hover { color: var(--accent); }
.tb-btn.primary { color: var(--accent); font-weight: 600; }
.tb-btn.primary::before {
  content: ""; width: 9px; height: 9px; margin-right: 8px;
  background: currentColor;
  -webkit-mask: var(--star-mask) center / contain no-repeat; mask: var(--star-mask) center / contain no-repeat;
}
.tb-btn[aria-pressed="true"] { color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.tb-btn .short { display: none; }
/* the Night button: a crescent drawn with one inset shadow */
.tb-theme .moon {
  width: 13px; height: 13px; margin-right: 7px; border-radius: 50%;
  box-shadow: inset -4px -2px 0 0 currentColor; transform: rotate(-20deg);
}
/* forced colours drop box-shadow, which is all the crescent is */
@media (forced-colors: active) { .tb-theme .moon { forced-color-adjust: none; box-shadow: inset -4px -2px 0 0 ButtonText; } }


/* ---------- cover ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(55% 70% at 76% 40%, var(--sky-1), transparent 72%),
    linear-gradient(180deg, var(--sky-2), var(--bg) 92%);
  border-bottom: 3px solid var(--frame);
}
.sky { position: absolute; inset: 0; pointer-events: none; }
/* the girih lattice: one mask, so it takes the theme's colour */
.sky::before {
  content: ""; position: absolute; inset: 0;
  background: var(--lattice);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M48 14L58 38 82 48 58 58 48 82 38 58 14 48 38 38Z'/%3E%3Cpath d='M24 24H72V72H24Z'/%3E%3Cpath d='M48 0V14M48 82V96M0 48H14M82 48H96'/%3E%3Cpath d='M24 24L0 0M72 24L96 0M24 72L0 96M72 72L96 96'/%3E%3Ccircle cx='48' cy='48' r='6'/%3E%3C/svg%3E") 0 0 / 96px 96px repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M48 14L58 38 82 48 58 58 48 82 38 58 14 48 38 38Z'/%3E%3Cpath d='M24 24H72V72H24Z'/%3E%3Cpath d='M48 0V14M48 82V96M0 48H14M82 48H96'/%3E%3Cpath d='M24 24L0 0M72 24L96 0M24 72L0 96M72 72L96 96'/%3E%3Ccircle cx='48' cy='48' r='6'/%3E%3C/svg%3E") 0 0 / 96px 96px repeat;
}
.sky svg.stars { position: absolute; left: 0; top: 0; display: block; }
.st-dot { fill: var(--star); opacity: .8; }
.st-spark { stroke: var(--star); stroke-width: .7px; opacity: .75; }
.st-tw { fill: var(--star); opacity: 0; animation: rs-twinkle 5s ease-in-out infinite; }
@keyframes rs-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: .95; } }


.masthead {
  position: relative;
  display: flex; justify-content: space-between; gap: 12px;
  max-width: 1180px; margin: 0 auto; padding: 18px var(--pad) 0;
  font: 400 15px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.masthead span:first-child { letter-spacing: .32em; }
.cover-in {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  padding: clamp(16px, 4vh, 44px) var(--pad) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); column-gap: 40px; align-items: center;
}
.cover-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 20px; }
.cover-text .kicker { margin: 0; }
.title {
  font: 400 clamp(52px, 8.4vw, 112px)/.9 var(--display);
  letter-spacing: .01em; text-transform: uppercase;
  color: var(--ink); text-shadow: var(--glow), 4px 4px 0 var(--frame);
  margin: 0;
}
:root[data-theme="dark"] .title { text-shadow: var(--glow), 4px 4px 0 #071a2e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .title { text-shadow: var(--glow), 4px 4px 0 #071a2e; } }
.title .w { display: inline-block; white-space: nowrap; }
.title i { display: inline-block; font-style: normal; }
.js .title i { animation: rs-drop .5s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 45ms + 150ms); }
@keyframes rs-drop { from { opacity: 0; transform: translateY(-40px) rotate(-8deg); } to { opacity: 1; transform: none; } }
.cover-text .narr { max-width: 46ch; color: var(--ink); }
.cover-go { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.emblem { margin: 0; display: flex; flex-direction: column; align-items: center; }
.emblem .seal-art { width: min(300px, 26vw); aspect-ratio: 1; filter: var(--glow-f); }
.emblem .seal-art svg, .seal-mini svg { display: block; width: 100%; height: 100%; }
:is(.emblem, .ours-art) .rs-rosette path, :is(.emblem, .ours-art) .rs-heart path { stroke: var(--seal-a); }
:is(.emblem, .ours-art) .rs-band path { stroke: var(--seal-b); }
:is(.emblem, .ours-art) .rs-rings path, :is(.emblem, .ours-art) .rs-beads path { stroke: var(--seal-c); }
.seal-cap { margin-top: 12px; max-width: 30ch; font: 400 12.5px/1.5 var(--sans); color: var(--ink-2); text-align: center; text-wrap: balance; }
.stamp {
  position: absolute; right: max(24px, calc((100vw - 1180px) / 2 + 24px)); top: 64px;
  padding: 8px 14px 6px; border: 3px solid var(--hot); border-radius: 6px;
  font: 400 26px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--hot);
  transform: rotate(9deg); opacity: .85; text-align: center;
}
.stamp small { display: block; font-size: 12px; letter-spacing: .2em; }
.js .stamp { animation: rs-stamp .5s cubic-bezier(.2, 1.3, .4, 1) .9s both; }
@keyframes rs-stamp { from { opacity: 0; transform: rotate(18deg) scale(1.9); } to { opacity: .85; transform: rotate(9deg) scale(1); } }
html:not(.js) .skyline, html:not(.js) .emblem { display: none; }
html:not(.js) .cover-in { grid-template-columns: minmax(0, 1fr); padding-bottom: 40px; }
/* the skyline stands on the first page */
.skyline { position: relative; height: clamp(130px, 22vh, 200px); margin-top: -10px; pointer-events: none; }
.skyline svg { position: absolute; left: 0; bottom: 0; display: block; overflow: visible; }
.sl { fill: var(--bg); stroke: var(--horizon); stroke-width: 1.1px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sl.open { fill: none; }
.sl.wave { opacity: .6; }
.sl-svg { filter: var(--glow-f); }
.sl-link { fill: none; stroke: var(--gold); stroke-width: 1.1px; stroke-dasharray: 1.5 5; opacity: .75; }
/* the pulse on the link: an HTML dot moved by a transform animation (sky.js), so nothing repaints */
.sl-dot {
  position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: var(--glow-gold); pointer-events: none;
}
/* after five seconds the scene rests (sky.js adds .rs-still): no pulse, no twinkles */
.rs-still .sl-dot, .rs-still .st-tw { display: none; }
.rs-still .sl-lamps circle.tw { animation: none; }
.sl-node { fill: var(--gold); stroke: none; }
.sl-lamps circle { fill: var(--gold); opacity: var(--lamp, 0); }
.sl-lamps circle.tw { animation: rs-lamp 5s ease-in-out infinite; }
@keyframes rs-lamp { 0%, 100% { opacity: var(--lamp, 0); } 50% { opacity: calc(var(--lamp, 0) * .25); } }


/* ---------- pages and panels ---------- */
.page {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  padding: 64px var(--pad) 8px;
}
.page > .cap.pop:first-child { margin-bottom: 18px; }
.panels { display: grid; gap: 14px; margin-top: 18px; }
.panel {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 18px 22px;
  background: var(--panel); color: var(--ink);
  border: 3px solid var(--frame);
  box-shadow: var(--shadow);
}
.panel > * { position: relative; z-index: 1; }
.panel::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.panel.dark { background: var(--panel-dark); color: var(--ink-dark); }
.panel.dark .narr { color: var(--ink-dark); }
/* screentone: halftone dots fading in from one corner */
.tone::before {
  background-image: radial-gradient(var(--tone) 1.3px, transparent 1.6px); background-size: 7px 7px;
  -webkit-mask: radial-gradient(120% 90% at 100% 0, #000 10%, transparent 62%); mask: radial-gradient(120% 90% at 100% 0, #000 10%, transparent 62%);
}
.tone-br::before {
  background-image: radial-gradient(var(--tone) 1.3px, transparent 1.6px); background-size: 7px 7px;
  -webkit-mask: radial-gradient(120% 90% at 100% 100%, #000 10%, transparent 62%); mask: radial-gradient(120% 90% at 100% 100%, #000 10%, transparent 62%);
}
/* speed lines from a point off to the right */
.speed::before { background: repeating-conic-gradient(from 0deg at 84% 46%, var(--speed) 0 1.2deg, transparent 1.2deg 7deg); }
.panel .bubble { margin-top: auto; }
.narr { font: 400 17px/1.55 var(--serif); color: var(--ink); max-width: 64ch; }
.narr.center { text-align: center; margin: 0 auto; }

/* narration boxes */
.cap {
  display: inline-block; align-self: flex-start;
  padding: 6px 11px 5px;
  font: 700 12.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: var(--panel-2);
  border: 2px solid var(--frame);
}
.panel.dark .cap { background: var(--ink-dark); color: var(--panel-dark); border-color: var(--ink-dark); }
.cap.pop {
  background: var(--pop); color: var(--pop-ink); border: 2.5px solid var(--frame);
  font: 400 clamp(20px, 2.4vw, 28px)/1.1 var(--display); letter-spacing: .04em;
  padding: 8px 14px 6px; transform: rotate(-1.2deg);
  box-shadow: 4px 4px 0 var(--frame);
}
h2.cap.pop { display: inline-block; }

/* speech bubbles */
.bubble {
  position: relative; align-self: flex-start;
  max-width: 34ch; margin: 4px 6px 18px;
  padding: 11px 17px 10px;
  font: 700 15.5px/1.35 var(--sans);
  color: var(--bubble-ink); background: var(--bubble);
  border: 2.5px solid var(--frame); border-radius: 22px;
}
.bubble a { color: var(--bubble-ink); text-decoration-color: var(--hot); }
.bubble a:focus-visible { outline-color: var(--bubble-ink); }
.bubble::before, .bubble::after { content: ""; position: absolute; left: 28px; top: 100%; width: 0; height: 0; border-style: solid; transform: skewX(-25deg); }
.bubble::before { border-width: 15px 9px 0; border-color: var(--frame) transparent transparent; margin-top: 0; }
.bubble::after { border-width: 11px 6px 0; border-color: var(--bubble) transparent transparent; left: 31px; margin-top: -1px; }
.bubble.right { align-self: flex-end; margin-left: auto; }
.bubble.right::before, .bubble.right::after { left: auto; right: 28px; transform: skewX(25deg); }
.bubble.right::after { right: 31px; }

/* sound effects: a burst with lettering over it, breaking out of the panel corner */
.sfx-wrap { position: relative; align-self: flex-end; display: grid; place-items: center; pointer-events: none; }
.sfx-wrap.small { width: 120px; height: 120px; margin: -10px -28px -36px 0; }
.sfx-wrap.big { width: 200px; height: 200px; margin: -30px -40px -56px 0; }
.burst { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--pop); stroke: var(--frame); stroke-width: 2.5; overflow: visible; filter: var(--glow-f); }
.sfx {
  position: relative; transform: rotate(-10deg);
  font: 400 1.5rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase;
  color: var(--pop-ink);
}
.sfx-wrap.big .sfx { font-size: 2.5rem; }

/* pages arrive: panels slide in one after another, bursts pop */
.js .reveal .panel, .js .reveal .ch-text, .js .reveal .file-grid > * { opacity: 0; transform: translateY(20px); transition: transform .5s cubic-bezier(.2, .9, .3, 1), opacity .35s linear; }
.js .reveal.in .panel, .js .reveal.in .ch-text, .js .reveal.in .file-grid > * { opacity: 1; transform: none; }
.js .reveal.in .panel:nth-child(2) { transition-delay: .08s; }
.js .reveal.in .panel:nth-child(3) { transition-delay: .16s; }
.js .reveal.in .panel:nth-child(4) { transition-delay: .24s; }
.js .reveal.in .panel:nth-child(5) { transition-delay: .32s; }
.js .reveal .sfx-wrap { opacity: 0; transform: scale(.4) rotate(14deg); transition: transform .4s cubic-bezier(.2, 1.7, .4, 1) .35s, opacity .15s linear .35s; }
.js .reveal.in .sfx-wrap { opacity: 1; transform: none; }

/* ---------- character file ---------- */
.file-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: center; }
.bust svg { display: block; width: 100%; height: auto; }
.bust-tone { fill: var(--tone); }
.bust-fill { fill: var(--panel-2); stroke: var(--frame); stroke-width: 5; }
.bust-line { fill: none; stroke: var(--frame); stroke-width: 4; stroke-linecap: round; }
.bust-hair { fill: var(--frame); }
.bust-glass { fill: color-mix(in srgb, var(--accent) 30%, var(--panel-2)); stroke: var(--frame); stroke-width: 4; }
.bust-shine { fill: none; stroke: var(--panel-2); stroke-width: 6; stroke-linecap: round; }
.file-sheet { border: 3px solid var(--frame); background: var(--panel); padding: 20px 22px; box-shadow: var(--shadow); }
.stats { margin-top: 16px; display: grid; gap: 0; }
.stats > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 14px; padding: 8px 0; border-top: 1px solid var(--rule); }
.stats dt { font: 700 12px/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.stats dd { font: 400 16.5px/1.45 var(--serif); }
.stats .hot dt, .stats .hot dd { color: var(--gold); }
.stats .hot dd { font-weight: 700; }

/* ---------- interlude: the world clock ---------- */
.clock-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 10px; }
.astro { margin: 0; display: flex; flex-direction: column; align-items: center; }
.dial { position: relative; width: min(340px, 80vw); aspect-ratio: 1; margin: 26px 0 18px; touch-action: pan-y; }
.dial.live { cursor: grab; }
.dial.live:active { cursor: grabbing; }
.dial:focus-visible { outline: 2px solid var(--accent); outline-offset: 10px; border-radius: 50%; }
.dial-read {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
  font: 400 clamp(34px, 5vw, 48px)/1 var(--display); letter-spacing: .04em; color: var(--ink);
  text-shadow: var(--glow);
}
.dial-read small { display: block; margin-top: 6px; font: 600 11px/1 var(--mono); letter-spacing: .14em; color: var(--gold); }
.dial-read.shifted { color: var(--gold); }
.astro-cap { max-width: 36ch; font: 400 13px/1.5 var(--sans); color: var(--ink-2); text-align: center; }
.clock-side { display: flex; flex-direction: column; gap: 16px; }
.clock-side .zones { max-width: 420px; }
.hint { font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
.clock-tools { display: flex; flex-wrap: wrap; gap: 10px; }
/* every lantern lit: a burst where the reader is */
.lit-pop { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 120px; height: 120px; margin: 0; }
.lit-pop .sfx { font-size: 1.35rem; text-align: center; line-height: .95; }
html:not(.js) .astro { display: none; }
html:not(.js) .clock-grid { grid-template-columns: minmax(0, 1fr); }
.dial-art, .dial-art svg, .dial-codes { position: absolute; inset: 0; width: 100%; height: 100%; }
.dial-codes { pointer-events: none; }
.dial-svg { overflow: visible; }
.dial-svg path { fill: none; stroke: var(--ink-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.dial-svg .d-day { fill: var(--day-arc); stroke: none; }
.dial-svg .d-night { fill: var(--night-arc); stroke: none; }
.dial-svg .d-line { stroke: var(--line); }
.dial-svg .d-tick, .dial-svg .d-fine { stroke: var(--ink-2); opacity: .75; }
.dial-svg .d-sun { stroke: var(--gold); stroke-width: 1.4px; }
.dial-svg .d-moon { fill: var(--accent); stroke: none; }
.dial-svg .d-quarter { fill: var(--ink-2); stroke: none; opacity: .8; }
.dial-svg .d-index { stroke: var(--gold); stroke-width: 1.2px; }
.dial-svg .d-index.d-zone { stroke: var(--accent); }
.dial-svg .d-home { fill: var(--gold); stroke: none; }
.dial-svg .d-zone { fill: var(--accent); stroke: none; }
.dial-svg .d-you { stroke: var(--gold); stroke-width: 1.6px; }
.dial-svg .d-ring { transition: transform 1s linear; }
.d-code {
  position: absolute; transform: translate(-50%, -50%);
  font: 600 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--ink-2);
  white-space: nowrap;
}
.d-code.home { color: var(--gold); font-size: 11.5px; }
.d-code.you, .d-code.is-you { color: var(--gold); }

.zones {
  list-style: none; padding: 0; margin: 0;
  width: 100%; max-width: 330px;
  font: 400 13.5px/1.3 var(--sans); color: var(--ink);
}
.zones li { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; border-top: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); }
.zones li:first-child { border-top: 0; }
.zones .z-code { flex: none; width: 3.4em; font: 600 11px/1.3 var(--mono); letter-spacing: .06em; color: var(--ink-2); text-transform: uppercase; }
.zones .z-name { flex: 1 1 auto; min-width: 0; }
.zones .z-time { flex: none; font: 500 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.zones li[data-home] .z-code, .zones li[data-home] .z-time { color: var(--gold); }
.zones li.is-you .z-name, .zones li[data-zone="local"] .z-name { font-weight: 600; }
.zones li.is-you .z-code, .zones li[data-zone="local"] .z-code { color: var(--gold); }
.zones .z-you { margin-left: 4px; font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.zones { list-style: none; padding: 0; margin: 0; width: 100%; font: 400 14.5px/1.3 var(--sans); color: var(--ink); }
.zones li { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--rule); }
.zones li:first-child { border-top: 0; }
.zones .z-code { flex: none; width: 3.4em; font: 600 11.5px/1.3 var(--mono); letter-spacing: .06em; color: var(--ink-2); text-transform: uppercase; }
.zones .z-name { flex: 1 1 auto; min-width: 0; }
.zones .z-time { flex: none; font: 500 15px/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.zones li[data-home] .z-code, .zones li[data-home] .z-time { color: var(--gold); }
.zones li.is-you .z-name, .zones li[data-zone="local"] .z-name { font-weight: 600; }
.zones li.is-you .z-code, .zones li[data-zone="local"] .z-code { color: var(--gold); }
.zones .z-you { margin-left: 4px; font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.zones.shifted .z-time { color: var(--gold); }

/* ---------- lanterns ---------- */
.lantern-row {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
}
.lantern {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 4px 12px; text-align: center; text-decoration: none; color: var(--ink);
  border-radius: 6px;
}
.lantern:hover { color: var(--ink); }
.l-art { display: block; width: 74px; height: 128px; color: var(--ink-2); transition: color .4s linear, filter .4s linear, transform .4s var(--ease); transform-origin: 50% 0; }
.l-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.l-art .lt-line { fill: none; stroke: currentColor; stroke-width: 1.4px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.l-art .lt-glass { fill: color-mix(in srgb, currentColor 8%, transparent); stroke: currentColor; stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.l-art .lt-star { fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.l-art .lt-flame { fill: var(--gold); opacity: 0; transition: opacity .4s linear; }
.lantern:hover .l-art { transform: rotate(-4deg); }
.lantern.lit .l-art { color: var(--gold); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gold) 60%, transparent)); }
.lantern.lit .l-art .lt-glass { fill: color-mix(in srgb, var(--gold) 26%, transparent); }
.lantern.lit .l-art .lt-flame { opacity: 1; }
.l-num { font: 400 22px/1 var(--display); letter-spacing: .04em; color: var(--accent); }
.lantern.lit .l-num { color: var(--gold); }
.l-name { font: 700 14.5px/1.25 var(--sans); }
.l-years { font: 500 12px/1.2 var(--mono); color: var(--ink-2); }
.lights { margin-top: 10px; font: 600 13px/1.4 var(--mono); letter-spacing: .06em; color: var(--gold); text-align: center; }
.lights a { color: var(--gold); }

/* ---------- chapters ---------- */
.chapter-open { padding-top: 88px; }
.vlabel {
  position: absolute; left: max(8px, calc(var(--pad) - 36px)); top: 92px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 400 13px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2);
}
.ch-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.ch-body:not(:has(.ch-art)) { grid-template-columns: minmax(0, 1fr); }
.ch-text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ch-num {
  font: 400 clamp(84px, 13vw, 150px)/.8 var(--display);
  color: transparent; -webkit-text-stroke: 2px var(--accent);
  filter: var(--glow-f); margin-bottom: -6px;
}
.ch-title { font: 400 clamp(36px, 5.4vw, 64px)/1 var(--display); letter-spacing: .02em; text-transform: uppercase; text-shadow: var(--glow); }
.ch-meta { font: 600 13px/1.4 var(--mono); letter-spacing: .04em; color: var(--gold); }
.ch-role { font: 700 clamp(17px, 1.9vw, 22px)/1.25 var(--sans); color: var(--ink); max-width: 40ch; }
.ch-art svg { display: block; width: 100%; height: auto; }
.art-paper { fill: var(--panel-2); stroke: var(--frame); stroke-width: 5; }
.art-paper.thin { stroke-width: 3; }
.art-ink { fill: var(--frame); }
.art-tone { fill: var(--tone); }
.art-tone-box { fill: var(--tone); stroke: var(--frame); stroke-width: 3; }
.art-hot { fill: var(--hot); }
.art-wave { fill: none; stroke: var(--panel-2); stroke-width: 5; stroke-linecap: round; }
.art-line { fill: none; stroke: var(--frame); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

/* panel grids, one per page */
.pay-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pay-grid > .splash { grid-column: span 6; }
.pay-grid > .boss { grid-column: span 2; }
.pay-grid > .result { grid-column: span 6; padding-right: 230px; min-height: 190px; }
.pay-grid > .result .sfx-wrap.big { position: absolute; right: 18px; bottom: -34px; margin: 0; }
.pay-grid > .result .bubble.right { align-self: flex-start; margin-left: 6px; }
.night-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.night-grid > .app { grid-column: span 3; }
.night-grid > .night { grid-column: span 3; }
.night-grid > .releases { grid-column: span 6; }
.crew-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.crew-grid > .crew { grid-column: span 4; }
.crew-grid > .machines { grid-column: span 2; }
.crew-grid > .voice { grid-column: span 2; }
.crew-grid > .quiet { grid-column: span 4; }
.empg-grid, .ghar-grid, .pocket-grid, .exper-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 26px; }
.empg-grid > * { grid-column: span 3; }
.exper-grid > .apps { grid-column: span 3; }
.exper-grid > .tele { grid-column: span 3; }
.exper-grid > .sync { grid-column: span 6; }
.ghar-grid > .mirror, .ghar-grid > .outbox { grid-column: span 3; }
.ghar-grid > .cipher { grid-column: span 4; }
.ghar-grid > .tests { grid-column: span 2; }
.pocket-grid > .stream { grid-column: span 4; grid-row: span 2; }
.pocket-grid > .lock, .pocket-grid > .parts { grid-column: span 2; }

/* ---------- demos: shared parts for the playable panels ---------- */
/* A demo is div.demo[data-demo]. Without scripts it shows .demo-still; its script reveals .demo-live. */
.demo { position: relative; display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.demo-still { font: italic 400 15px/1.5 var(--serif); color: var(--ink-2); }
.panel.dark .demo-still { color: color-mix(in srgb, var(--ink-dark) 75%, transparent); }
.demo-live { display: flex; flex-direction: column; gap: 12px; }
.d-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.d-out { min-height: 1.5em; font: 600 14px/1.45 var(--sans); color: var(--gold); }
.panel.dark .d-out { color: var(--pop); }
/* inside a dark panel the frame colour can be dark too (day look): buttons, labels and focus use the panel's own light ink */
.panel.dark .d-btn { border-color: var(--ink-dark); box-shadow: 3px 3px 0 var(--ink-dark); }
.panel.dark .d-btn:active, .panel.dark .d-btn[aria-pressed="true"] { box-shadow: 1px 1px 0 var(--ink-dark); }
.panel.dark .d-label { color: color-mix(in srgb, var(--ink-dark) 78%, transparent); }
.panel.dark :focus-visible { outline-color: var(--pop); }
.d-label { font: 700 11.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.d-mono { font: 500 13px/1.45 var(--mono); font-variant-numeric: tabular-nums; }
.demo .d-note { font: 400 12.5px/1.45 var(--sans); color: var(--ink-2); }
.panel.dark .demo .d-note { color: color-mix(in srgb, var(--ink-dark) 74%, transparent); }
/* a small phone, for demos that show an app */
.d-phone {
  position: relative; width: 158px; flex: none;
  aspect-ratio: 9 / 17; padding: 12px 8px;
  background: var(--panel-dark); border: 3px solid var(--frame); border-radius: 22px;
  box-shadow: 4px 4px 0 var(--frame);
}
.d-phone::before { content: ""; position: absolute; left: 50%; top: 5px; width: 34px; height: 4px; margin-left: -17px; border-radius: 2px; background: var(--frame); opacity: .6; }
.d-screen { position: relative; height: 100%; overflow: hidden; border-radius: 12px; background: var(--panel-2); color: var(--ink); }
/* a counter: a big number with a label */
.d-count { display: flex; align-items: baseline; gap: 8px; }
.d-count b { font: 400 34px/1 var(--display); color: var(--ink); }
.panel.dark .d-count b { color: var(--ink-dark); }

/* ---------- off the clock: the arcade ---------- */
.arcade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.arcade > .demo {
  margin: 0; padding: 16px 16px 18px;
  background: var(--panel); border: 3px solid var(--frame); box-shadow: var(--shadow);
}
.arcade .d-title { font: 400 22px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }

/* ---------- letters to the author ---------- */
.end { padding-bottom: 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.contact-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.contact-note { font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); }
.ours {
  margin-top: 24px; width: min(560px, 100%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 20px; border: 3px solid var(--frame); background: var(--panel); box-shadow: var(--shadow);
}
.narr-ui { font: 400 16px/1.5 var(--serif); color: var(--ink); max-width: 44ch; }
.ours-field { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.ours-field label { font: 700 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ours-field input {
  min-height: 44px; width: min(280px, 70vw); padding: 0 12px;
  font: 600 16px/1.2 var(--sans); color: var(--ink); background: var(--panel-2);
  border: 2.5px solid var(--frame); border-radius: 4px;
}
.ours-art .seal-art { width: 200px; aspect-ratio: 1; filter: var(--glow-f); }
.ours-art .seal-art svg { display: block; width: 100%; height: 100%; }
.ours-out { font: 600 14px/1.45 var(--sans); color: var(--gold); min-height: 1.45em; }

/* ---------- footer ---------- */
.foot {
  max-width: 1180px; margin: 32px auto 0; padding: 18px var(--pad) 36px;
  display: flex; align-items: flex-start; gap: 14px;
  border-top: 1px solid var(--rule);
  font: 400 12.5px/1.55 var(--sans); color: var(--ink-2);
}
.seal-mini { flex: none; width: 28px; height: 28px; color: var(--gold); }
.seal-mini:empty { display: none; }
.colophon { max-width: 80ch; }

/* ---------- the playable panels and the arcade (one block per demo) ---------- */
/* -- demo: pay-retry -- */
/* pay-retry: Boss 1, the double charge. The same idempotency key, pressed again and again:
   tokens fly to the payment side, requests climb, charges stay at one per key. */
[data-demo="pay-retry"] { --pr-k: var(--pop); --pr-k-ink: var(--pop-ink); }
[data-demo="pay-retry"] [data-k="1"] { --pr-k: var(--accent); --pr-k-ink: var(--panel-2); }
[data-demo="pay-retry"] [data-k="2"] { --pr-k: var(--brick); --pr-k-ink: var(--panel-2); }
[data-demo="pay-retry"] [data-k="0"] { --pr-k: var(--pop); --pr-k-ink: var(--pop-ink); }

[data-demo="pay-retry"] .demo-live { max-width: 520px; }

/* the stage: your app on the left, the payment side on the right, two lanes between */
[data-demo="pay-retry"] .pr-stage {
  position: relative; display: flex; align-items: center;
  height: 118px; margin: 2px 0 0; padding: 0 4px 0 0;
}
[data-demo="pay-retry"] .pr-app { position: relative; z-index: 2; flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
[data-demo="pay-retry"] .pr-phone { display: block; width: 34px; height: 55px; overflow: visible; }
[data-demo="pay-retry"] .pr-ph-body { fill: var(--panel-2); stroke: var(--frame); stroke-width: 2.5; }
[data-demo="pay-retry"] .pr-ph-line { fill: none; stroke: var(--ink-2); stroke-width: 2.2; stroke-linecap: round; opacity: .55; }
[data-demo="pay-retry"] .pr-ph-btn { fill: var(--pop); stroke: var(--frame); stroke-width: 2; }
[data-demo="pay-retry"] .pr-tag {
  font: 700 10px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
}
[data-demo="pay-retry"] .pr-track { position: relative; z-index: 1; flex: 1 1 auto; min-width: 56px; align-self: stretch; }
/* two dashed lanes: requests go right on the upper one, answers come back on the lower */
[data-demo="pay-retry"] .pr-track::before,
[data-demo="pay-retry"] .pr-track::after {
  content: ""; position: absolute; left: 2px; right: 2px; height: 0;
  border-top: 2px dashed var(--line); opacity: .7;
}
[data-demo="pay-retry"] .pr-track::before { top: 44px; }
[data-demo="pay-retry"] .pr-track::after { top: 76px; opacity: .4; }

[data-demo="pay-retry"] .pr-box {
  position: relative; z-index: 3; flex: none;
  width: 96px; height: 88px; padding: 7px 6px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--panel-2); border: 2.5px solid var(--frame); border-radius: 7px;
  box-shadow: 3px 3px 0 var(--frame);
}
/* the slot the tokens slip into */
[data-demo="pay-retry"] .pr-box::before {
  content: ""; position: absolute; left: -3px; top: 26px; width: 6px; height: 26px;
  background: var(--frame); border-radius: 3px;
}
[data-demo="pay-retry"] .pr-till {
  display: flex; flex-wrap: wrap-reverse; align-content: flex-start; justify-content: center; gap: 3px 4px;
  width: 100%; flex: 1 1 auto; padding: 0 2px 1px;
  border-top: 2px solid var(--rule);
}
/* a charge: a coin in the key's colour drops into the till */
[data-demo="pay-retry"] .pr-coin {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pr-k); border: 2px solid var(--frame);
  box-shadow: inset 0 0 0 2px var(--pr-k), inset 0 0 0 3.5px var(--pr-k-ink);
}
[data-demo="pay-retry"] .pr-seen {
  position: absolute; left: 50%; top: -24px; transform: translateX(-50%);
  padding: 3px 7px; white-space: nowrap;
  font: 700 10.5px/1.1 var(--sans); letter-spacing: .04em;
  color: var(--bubble-ink); background: var(--bubble);
  border: 2px solid var(--frame); border-radius: 10px;
}

/* tokens: the request (a key on a pill) and the answer (a folded receipt) */
[data-demo="pay-retry"] .pr-tok,
[data-demo="pay-retry"] .pr-ans {
  position: absolute; left: 0; pointer-events: none;
  background: var(--pr-k); border: 2px solid var(--frame);
  will-change: transform, opacity;
}
[data-demo="pay-retry"] .pr-tok { top: 34px; width: 32px; height: 20px; border-radius: 10px; }
[data-demo="pay-retry"] .pr-tok svg { display: block; width: 100%; height: 100%; }
[data-demo="pay-retry"] .pr-tok .pr-kg { fill: none; stroke: var(--pr-k-ink); stroke-width: 2; stroke-linecap: round; }
/* speed lines behind a request in flight */
[data-demo="pay-retry"] .pr-tok::before,
[data-demo="pay-retry"] .pr-tok::after {
  content: ""; position: absolute; right: calc(100% + 3px); height: 2px; border-radius: 1px;
  background: linear-gradient(to left, var(--frame), transparent);
}
[data-demo="pay-retry"] .pr-tok::before { top: 3px; width: 16px; }
[data-demo="pay-retry"] .pr-tok::after { top: 11px; width: 24px; }
[data-demo="pay-retry"] .pr-ans { top: 68px; width: 14px; height: 17px; border-width: 1.5px; border-radius: 2px; }
[data-demo="pay-retry"] .pr-ans::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 4px; height: 2px;
  background: var(--pr-k-ink); opacity: .7; box-shadow: 0 4px 0 var(--pr-k-ink);
}

/* the burst over the payment side, on a new charge */
.demo[data-demo="pay-retry"] .pr-stage .sfx-wrap.pr-burst {
  position: absolute; z-index: 4; right: -14px; top: -20px;
  width: 78px; height: 78px; margin: 0;
  opacity: 1; transform: none; transition: none;
}
[data-demo="pay-retry"] .pr-burst .sfx { font-size: 1.05rem; }

/* the key, shown once */
[data-demo="pay-retry"] .pr-keyline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
[data-demo="pay-retry"] .pr-key {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 9px 3px 5px;
  background: var(--panel-2); border: 2px solid var(--frame); border-radius: 4px;
}
[data-demo="pay-retry"] .pr-key code { font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--ink); }
[data-demo="pay-retry"] .pr-swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--pr-k); border: 2px solid var(--frame); }

/* the two counters */
[data-demo="pay-retry"] .pr-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
[data-demo="pay-retry"] .pr-counts .d-count {
  flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 8px 10px 7px; min-width: 0;
  background: var(--panel-2); border: 2px solid var(--frame);
}
[data-demo="pay-retry"] .pr-counts .d-count b { display: inline-block; min-width: .6em; font-variant-numeric: tabular-nums; }
[data-demo="pay-retry"] .pr-c-chg { box-shadow: inset 4px 0 0 var(--hot); }
[data-demo="pay-retry"] .pr-c-chg b { color: var(--hot); }
[data-demo="pay-retry"] .pr-note { font: 400 12.5px/1.4 var(--sans); color: var(--ink-2); }

@media (max-width: 359px) {
  [data-demo="pay-retry"] .pr-box { width: 84px; }
  [data-demo="pay-retry"] .pr-app { width: 46px; }
}

/* -- demo: pay-later -- */
/* pay-later: Boss 2, the sleeping card. A bedroom at dusk, a saved card and a wall clock; the
   renewal spins the clock to night and charges the card while the customer sleeps. */
[data-demo="pay-later"] .demo-live { container-type: inline-size; max-width: 760px; }
[data-demo="pay-later"] .pl-body { display: flex; flex-direction: column; gap: 12px; }
[data-demo="pay-later"] .pl-scene {
  position: relative; margin: 2px 0 0;
  border: 2.5px solid var(--frame); background: var(--panel-2);
  box-shadow: 3px 3px 0 var(--frame);
  overflow: hidden;
}
[data-demo="pay-later"] .pl-art { display: block; width: 100%; height: auto; overflow: hidden; }
[data-demo="pay-later"] .pl-line { fill: none; stroke: var(--frame); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
[data-demo="pay-later"] .pl-bar-halo { fill: none; stroke: var(--panel-2); stroke-width: 6; }
[data-demo="pay-later"] .pl-dot { fill: var(--frame); opacity: .35; }
[data-demo="pay-later"] .pl-tone { stroke: none; }
[data-demo="pay-later"] .pl-cap { fill: var(--brick); stroke: var(--frame); stroke-width: 2; stroke-linejoin: round; }
[data-demo="pay-later"] .pl-brim-o { fill: none; stroke: var(--frame); stroke-width: 7; stroke-linecap: round; }
[data-demo="pay-later"] .pl-brim { fill: none; stroke: var(--panel-2); stroke-width: 3.4; stroke-linecap: round; }
[data-demo="pay-later"] .pl-pom { fill: var(--panel-2); stroke: var(--frame); stroke-width: 2; }
[data-demo="pay-later"] .pl-dim { fill: var(--panel-dark); opacity: 0; pointer-events: none; }
[data-demo="pay-later"] .pl-paper { fill: var(--panel-2); stroke: var(--frame); stroke-width: 2.5; stroke-linejoin: round; }
[data-demo="pay-later"] .pl-dusk { fill: color-mix(in srgb, var(--pop) 42%, var(--panel-2)); }
[data-demo="pay-later"] .pl-sun { fill: var(--pop); stroke: var(--frame); stroke-width: 2; }
[data-demo="pay-later"] .pl-night { fill: var(--panel-dark); opacity: 0; }
[data-demo="pay-later"] .pl-stars { opacity: 0; }
[data-demo="pay-later"] .pl-stars path { fill: var(--ink-dark); }
[data-demo="pay-later"] .pl-moon { fill: var(--pop); transform: translateY(72px); }
[data-demo="pay-later"] .pl-tick { fill: none; stroke: var(--frame); stroke-width: 2; stroke-linecap: round; }
[data-demo="pay-later"] .pl-hand { fill: none; stroke: var(--frame); stroke-width: 3.2; stroke-linecap: round; }
[data-demo="pay-later"] .pl-hand-m { stroke-width: 2.2; }
[data-demo="pay-later"] .pl-pin { fill: var(--hot); }
[data-demo="pay-later"] .pl-phone { fill: var(--frame); }
[data-demo="pay-later"] .pl-hair { fill: var(--frame); }
[data-demo="pay-later"] .pl-ear { fill: var(--panel-2); stroke: var(--frame); stroke-width: 1.5; }
[data-demo="pay-later"] .pl-blanket { fill: color-mix(in srgb, var(--accent) 34%, var(--panel-2)); stroke: var(--frame); stroke-width: 2.5; stroke-linejoin: round; }
[data-demo="pay-later"] .pl-fold { fill: none; stroke: var(--frame); stroke-width: 1.8; stroke-linecap: round; opacity: .55; }
[data-demo="pay-later"] .pl-z path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the card and its slip */
[data-demo="pay-later"] .pl-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
[data-demo="pay-later"] .pl-card {
  position: relative; flex: none; width: 128px; height: 80px;
  padding: 10px 11px; display: flex; flex-direction: column; justify-content: space-between;
  color: var(--panel-2);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, var(--frame)));
  border: 2.5px solid var(--frame); border-radius: 10px;
  box-shadow: 3px 3px 0 var(--frame);
}
[data-demo="pay-later"] .pl-chip {
  width: 20px; height: 15px; border-radius: 3px;
  background: var(--pop); border: 1.5px solid var(--frame);
  box-shadow: inset 0 -5px 0 -3px var(--frame);
}
[data-demo="pay-later"] .pl-dots {
  display: block; width: 74px; height: 6px;
  background: radial-gradient(circle, currentColor 2px, transparent 2.4px) 0 0 / 9px 6px repeat-x;
  opacity: .9;
}
[data-demo="pay-later"] .pl-cname { font: 700 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
[data-demo="pay-later"] .pl-ring {
  position: absolute; inset: -3px; border-radius: 12px;
  border: 3px solid var(--pop); opacity: 0; pointer-events: none;
}
[data-demo="pay-later"] .pl-stamp {
  position: absolute; right: -10px; top: 18px;
  padding: 5px 9px 3px;
  font: 400 21px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--pop-ink); background: var(--pop);
  border: 2.5px solid var(--frame); border-radius: 4px;
  box-shadow: 2px 2px 0 var(--frame);
  transform: rotate(-12deg);
}
[data-demo="pay-later"] .pl-slip {
  position: relative; flex: 1 1 120px; min-width: 0; min-height: 80px;
  padding: 8px 10px 10px;
  background: var(--panel-2); border: 2px dashed var(--line);
}
[data-demo="pay-later"] .pl-slip.paid { border: 2px solid var(--frame); }
[data-demo="pay-later"] .pl-due { display: flex; flex-direction: column; gap: 6px; }
[data-demo="pay-later"] .pl-due-t { font: 600 14px/1.35 var(--sans); color: var(--ink-2); }
[data-demo="pay-later"] .pl-receipt { display: flex; flex-direction: column; gap: 5px; }
[data-demo="pay-later"] .pl-r-paid { display: flex; align-items: center; gap: 6px; font: 700 14.5px/1.3 var(--sans); color: var(--ink); }
[data-demo="pay-later"] .pl-r-paid .d-mono { font-weight: 700; }
[data-demo="pay-later"] .pl-tickmark { flex: none; width: 20px; height: 20px; }
[data-demo="pay-later"] .pl-tickmark path { fill: none; stroke: var(--teal); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 0; }
[data-demo="pay-later"] .pl-r-note { font: 400 13px/1.35 var(--sans); color: var(--ink-2); }

[data-demo="pay-later"] .pl-ctl { justify-content: space-between; }
[data-demo="pay-later"] .pl-time { display: inline-flex; align-items: baseline; gap: 7px; }
[data-demo="pay-later"] .pl-time .d-mono { font-size: 17px; font-weight: 700; color: var(--ink); min-width: 5ch; }
[data-demo="pay-later"] .d-btn[aria-disabled="true"] { cursor: default; opacity: .8; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--frame); }

/* wide panels (tablets): the room on the left, the card and its slip beside it */
@container (min-width: 560px) {
  [data-demo="pay-later"] .pl-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(190px, 1fr); align-items: start; gap: 14px; }
  [data-demo="pay-later"] .pl-row { flex-direction: column; }
  [data-demo="pay-later"] .pl-slip { flex: none; }
  [data-demo="pay-later"] .pl-ctl { justify-content: flex-start; gap: 18px; }
}

/* -- demo: pay-3ds -- */
/* pay-3ds: Boss 3, the bank's challenge. A phone checkout; Pay opens the bank's sheet
   ("Is this you?"), and the route beside it shows the detour out to the bank and back. */
[data-demo="pay-3ds"] .p3-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 16px; }
[data-demo="pay-3ds"] .p3-phone-wrap { position: relative; flex: none; padding: 0 4px 4px 0; }
[data-demo="pay-3ds"] .d-screen { font-family: var(--sans); }

/* the checkout */
[data-demo="pay-3ds"] .p3-app { position: relative; inset: auto; flex: 1 0 auto; display: flex; flex-direction: column; gap: 9px; padding: 12px 10px 10px; }
[data-demo="pay-3ds"] .d-phone { aspect-ratio: auto; min-height: 298px; display: flex; flex-direction: column; }
[data-demo="pay-3ds"] .d-screen { height: auto; flex: 1 0 auto; display: flex; flex-direction: column; }
[data-demo="pay-3ds"] .p3-h { padding-bottom: 6px; border-bottom: 2px solid var(--rule); font: 700 13px/1.1 var(--sans); letter-spacing: .02em; color: var(--ink); }
[data-demo="pay-3ds"] .p3-item { display: flex; align-items: center; gap: 8px; }
[data-demo="pay-3ds"] .p3-thumb {
  flex: none; width: 30px; height: 30px; border: 2px solid var(--frame); border-radius: 5px;
  background: radial-gradient(var(--tone) 1.1px, transparent 1.4px) 0 0 / 5px 5px, var(--panel);
}
[data-demo="pay-3ds"] .p3-thumb-b { background: radial-gradient(var(--tone) 1.1px, transparent 1.4px) 0 0 / 5px 5px, color-mix(in srgb, var(--pop) 35%, var(--panel-2)); }
[data-demo="pay-3ds"] .p3-total {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 7px; border-top: 2px dashed var(--rule);
  font: 700 11.5px/1 var(--sans); color: var(--ink);
}
[data-demo="pay-3ds"] .p3-total i { display: block; width: 38px; height: 7px; border-radius: 4px; background: var(--ink); opacity: .75; }
[data-demo="pay-3ds"] .p3-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; }
[data-demo="pay-3ds"] .p3-bars i { display: block; height: 5px; border-radius: 3px; background: var(--ink-2); opacity: .45; }
[data-demo="pay-3ds"] .p3-bars i:first-child { width: 90%; }
[data-demo="pay-3ds"] .p3-bars i:last-child { width: 55%; }
[data-demo="pay-3ds"] .p3-card { display: flex; align-items: center; gap: 7px; font: 600 11.5px/1.2 var(--sans); color: var(--ink-2); }
[data-demo="pay-3ds"] .p3-cardmark {
  flex: none; width: 20px; height: 14px; border-radius: 3px;
  background: var(--accent); border: 1.5px solid var(--frame);
  box-shadow: inset 0 3px 0 0 var(--frame);
}
[data-demo="pay-3ds"] .p3-pay {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: 38px; padding: 0 8px;
  font: 700 13.5px/1 var(--sans); color: var(--pop-ink); background: var(--pop);
  border: 2px solid var(--frame); border-radius: 7px; box-shadow: 2px 2px 0 var(--frame);
}
[data-demo="pay-3ds"] .p3-pay:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--frame); }
[data-demo="pay-3ds"] .p3-pay[disabled] { cursor: default; }
[data-demo="pay-3ds"] .p3-spin {
  display: none; width: 13px; height: 13px; border-radius: 50%;
  border: 2.2px solid var(--pop-ink); border-top-color: transparent;
}
[data-demo="pay-3ds"] .p3-pay.busy .p3-spin { display: block; }

/* the result, in the middle of the screen */
[data-demo="pay-3ds"] .p3-res {
  position: absolute; left: 8px; right: 8px; top: 40px; bottom: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--panel-2); text-align: center;
  font: 700 13.5px/1.25 var(--sans); color: var(--ink);
}
[data-demo="pay-3ds"] .p3-res[hidden] { display: none; }
[data-demo="pay-3ds"] .p3-mark { width: 50px; height: 50px; }
[data-demo="pay-3ds"] .p3-ring { fill: var(--panel); stroke: var(--frame); stroke-width: 2.5; }
[data-demo="pay-3ds"] .p3-tick { fill: none; stroke: var(--teal); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 0; }
[data-demo="pay-3ds"] .p3-cross { fill: none; stroke: var(--hot); stroke-width: 4; stroke-linecap: round; }

/* the bank's sheet */
[data-demo="pay-3ds"] .p3-dim { position: absolute; inset: 0; background: var(--panel-dark); opacity: .5; }
[data-demo="pay-3ds"] .p3-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 10px 11px;
  background: var(--panel); color: var(--ink);
  border-top: 2.5px solid var(--frame); border-radius: 14px 14px 0 0;
}
[data-demo="pay-3ds"] .p3-sheet::before {
  content: ""; position: absolute; left: 50%; top: 5px; width: 26px; height: 3px; margin-left: -13px;
  border-radius: 2px; background: var(--line);
}
[data-demo="pay-3ds"] .p3-bank {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font: 700 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
[data-demo="pay-3ds"] .p3-bank svg { flex: none; width: 18px; height: 17px; }
[data-demo="pay-3ds"] .p3-bank-art { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
[data-demo="pay-3ds"] .p3-q { font: 400 22px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
[data-demo="pay-3ds"] .p3-answers { display: flex; flex-direction: column; gap: 7px; }
[data-demo="pay-3ds"] .p3-yes,
[data-demo="pay-3ds"] .p3-no {
  width: 100%; min-height: 34px; padding: 0 8px;
  font: 700 12.5px/1 var(--sans); border: 2px solid var(--frame); border-radius: 7px;
}
[data-demo="pay-3ds"] .p3-yes { color: var(--pop-ink); background: var(--pop); box-shadow: 2px 2px 0 var(--frame); }
[data-demo="pay-3ds"] .p3-no { color: var(--ink); background: var(--panel-2); }
[data-demo="pay-3ds"] .p3-yes:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--frame); }
[data-demo="pay-3ds"] .d-screen button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-demo="pay-3ds"] .p3-check { display: flex; flex-direction: column; gap: 7px; padding: 6px 0 4px; }
[data-demo="pay-3ds"] .p3-bar { display: block; height: 9px; border: 2px solid var(--frame); border-radius: 5px; overflow: hidden; background: var(--panel-2); }
[data-demo="pay-3ds"] .p3-bar i { display: block; height: 100%; background: var(--teal); transform-origin: 0 50%; }
[data-demo="pay-3ds"] .p3-check-t { font: 600 12px/1.2 var(--sans); color: var(--ink-2); }

/* the burst, breaking out of the phone's corner */
.demo[data-demo="pay-3ds"] .p3-phone-wrap .sfx-wrap.p3-burst {
  position: absolute; z-index: 3; left: -18px; top: -20px;
  width: 80px; height: 80px; margin: 0;
  opacity: 1; transform: none; transition: none;
}
[data-demo="pay-3ds"] .p3-burst .sfx { font-size: 1.1rem; }

/* the route: out to the bank and back */
[data-demo="pay-3ds"] .p3-route { flex: 1 1 118px; min-width: 118px; display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
[data-demo="pay-3ds"] .p3-map { position: relative; height: 132px; }
[data-demo="pay-3ds"] .p3-path { position: absolute; left: 0; top: 0; width: 40px; height: 132px; overflow: visible; }
[data-demo="pay-3ds"] .p3-path-bg { fill: none; stroke: var(--line); stroke-width: 2.5; stroke-dasharray: 4 5; stroke-linecap: round; }
[data-demo="pay-3ds"] .p3-path-on {
  fill: none; stroke: var(--pop); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset .55s cubic-bezier(.4, 0, .2, 1);
}
[data-demo="pay-3ds"] .p3-steps { list-style: none; margin: 0; padding: 0; }
[data-demo="pay-3ds"] .p3-steps li {
  position: absolute; left: 0; right: 0; padding-left: 46px; transform: translateY(-50%);
  font: 600 13px/1.2 var(--sans); color: var(--ink-2);
  transition: color .3s linear;
}
[data-demo="pay-3ds"] .p3-steps li::before {
  content: ""; position: absolute; left: 3px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border-radius: 50%; background: var(--panel-2); border: 2.5px solid var(--line);
  transition: background-color .3s linear, border-color .3s linear, transform .3s cubic-bezier(.2, 1.6, .4, 1);
}
[data-demo="pay-3ds"] .p3-steps li[data-step="app"] { top: 12px; }
[data-demo="pay-3ds"] .p3-steps li[data-step="bank"] { top: 66px; }
[data-demo="pay-3ds"] .p3-steps li[data-step="bank"]::before { left: 25px; }
[data-demo="pay-3ds"] .p3-steps li[data-step="back"] { top: 120px; }
[data-demo="pay-3ds"] .p3-steps li[data-state] { color: var(--ink); }
[data-demo="pay-3ds"] .p3-steps li[data-state="on"]::before { background: var(--pop); border-color: var(--frame); transform: scale(1.25); }
[data-demo="pay-3ds"] .p3-steps li[data-state="done"]::before { background: var(--teal); border-color: var(--frame); }
[data-demo="pay-3ds"] .p3-steps li[data-state="stop"]::before { background: var(--hot); border-color: var(--frame); }

/* -- demo: pager -- */
/* pager: the night shift, in a dark panel (text is --ink-dark there). A phone buzzes with a
   failed webhook; "On it" walks the ticket across the team's tracker: triage, routed, fixed. */
[data-demo="pager"] .demo-live { max-width: 600px; }
[data-demo="pager"] { --pg-ink: var(--ink-dark); --pg-soft: color-mix(in srgb, var(--ink-dark) 40%, transparent); }
.demo[data-demo="pager"] p.d-out { color: var(--pop); }
[data-demo="pager"] .d-btn { border-color: var(--ink-dark); box-shadow: 3px 3px 0 var(--ink-dark); }
[data-demo="pager"] .d-btn:active { box-shadow: 1px 1px 0 var(--ink-dark); }
[data-demo="pager"] .d-btn[aria-disabled="true"] { cursor: default; opacity: .8; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink-dark); }
[data-demo="pager"] .d-label { color: color-mix(in srgb, var(--ink-dark) 72%, transparent); }

/* the call: a phone and its speech bubble */
[data-demo="pager"] .pg-call { display: flex; align-items: center; gap: 18px; padding: 4px 0 0 14px; min-height: 112px; }
[data-demo="pager"] .pg-phone { flex: none; width: 60px; height: 98px; }
[data-demo="pager"] .pg-phone svg { display: block; width: 100%; height: 100%; overflow: visible; }
[data-demo="pager"] .pg-body { fill: color-mix(in srgb, var(--ink-dark) 10%, var(--panel-dark)); stroke: var(--pg-ink); stroke-width: 3; }
[data-demo="pager"] .pg-glass { fill: var(--bubble); }
[data-demo="pager"] .pg-speaker { stroke: var(--pg-ink); stroke-width: 2.4; stroke-linecap: round; }
[data-demo="pager"] .pg-home { fill: none; stroke: var(--pg-ink); stroke-width: 2; }
[data-demo="pager"] .pg-alert-bg { fill: var(--hot); }
[data-demo="pager"] .pg-bang { stroke: var(--bubble); stroke-width: 4.5; stroke-linecap: round; }
[data-demo="pager"] .pg-bang-dot { fill: var(--bubble); }
[data-demo="pager"] .pg-ok { opacity: 0; }
[data-demo="pager"] .pg-ok-bg { fill: var(--teal); }
[data-demo="pager"] .pg-ok-tick { fill: none; stroke: var(--bubble); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
[data-demo="pager"] .pg-bars { stroke: var(--bubble-ink); stroke-width: 3; stroke-linecap: round; opacity: .3; }
[data-demo="pager"] .pg-buzz { fill: none; stroke: var(--pop); stroke-width: 3; stroke-linecap: round; }
[data-demo="pager"] .pg-call.calm .pg-buzz { opacity: 0; }
[data-demo="pager"] .pg-call.calm .pg-alert { opacity: 0; }
[data-demo="pager"] .pg-call.calm .pg-ok { opacity: 1; }

[data-demo="pager"] .pg-talk { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
[data-demo="pager"] .pg-talk .bubble { margin: 0; max-width: 100%; }
[data-demo="pager"] .pg-talk .pg-say { align-self: flex-start; font-size: 17px; }
/* the tail points left, at the phone */
[data-demo="pager"] .pg-say::before {
  left: auto; right: 100%; top: 50%; margin-top: -9px;
  border-width: 9px 16px 9px 0; border-color: transparent var(--frame) transparent transparent;
  transform: skewY(-24deg);
}
[data-demo="pager"] .pg-say::after {
  left: auto; right: calc(100% - 4px); top: 50%; margin-top: -6px;
  border-width: 6px 12px 6px 0; border-color: transparent var(--bubble) transparent transparent;
  transform: skewY(-24deg);
}
[data-demo="pager"] .pg-talk .pg-reply { align-self: flex-end; margin-bottom: 14px; }

/* the team's tracker */
[data-demo="pager"] .pg-board {
  position: relative; padding: 10px 10px 12px;
  border: 2px solid var(--pg-soft); border-radius: 6px;
  background: color-mix(in srgb, var(--ink-dark) 5%, transparent);
}
[data-demo="pager"] .pg-board-h { margin-bottom: 8px; }
[data-demo="pager"] .pg-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-demo="pager"] .pg-col { min-width: 0; padding: 0 6px; border-left: 2px dashed color-mix(in srgb, var(--ink-dark) 25%, transparent); }
[data-demo="pager"] .pg-col:first-child { border-left: 0; padding-left: 0; }
[data-demo="pager"] .pg-col:last-child { padding-right: 0; }
[data-demo="pager"] .pg-col-h {
  display: block; padding-bottom: 5px; margin-bottom: 7px;
  font: 700 11.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-dark) 70%, transparent);
  border-bottom: 3px solid color-mix(in srgb, var(--ink-dark) 18%, transparent);
  transition: color .25s linear, border-color .25s linear;
}
[data-demo="pager"] .pg-col.lit .pg-col-h { color: var(--pop); border-bottom-color: var(--pop); }
[data-demo="pager"] .pg-slot { min-height: 62px; }
[data-demo="pager"] .pg-ticket {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 7px 8px 7px 10px;
  color: var(--bubble-ink); background: var(--bubble);
  border-radius: 4px; box-shadow: inset 5px 0 0 var(--hot), 2px 2px 0 color-mix(in srgb, var(--ink-dark) 35%, transparent);
  transition: box-shadow .3s linear;
}
[data-demo="pager"] .pg-ticket.ok { box-shadow: inset 5px 0 0 var(--teal), 2px 2px 0 color-mix(in srgb, var(--ink-dark) 35%, transparent); }
[data-demo="pager"] .pg-t-title { font: 700 12.5px/1.2 var(--sans); padding-left: 2px; overflow-wrap: break-word; }
[data-demo="pager"] .pg-t-foot { display: flex; align-items: center; justify-content: space-between; min-height: 20px; }
[data-demo="pager"] .pg-t-who { width: 20px; height: 20px; border-radius: 50%; background: var(--pop); border: 1.5px solid var(--bubble-ink); overflow: hidden; visibility: hidden; }
[data-demo="pager"] .pg-t-who svg { display: block; width: 100%; height: 100%; }
[data-demo="pager"] .pg-who-head, [data-demo="pager"] .pg-who-body { fill: var(--bubble-ink); }
[data-demo="pager"] .pg-ticket.owned .pg-t-who { visibility: visible; }
[data-demo="pager"] .pg-t-ok { width: 20px; height: 20px; visibility: hidden; }
[data-demo="pager"] .pg-t-ok path { fill: none; stroke: var(--teal); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 0; }
[data-demo="pager"] .pg-ticket.ok .pg-t-ok { visibility: visible; }
[data-demo="pager"] .pg-lens { position: absolute; left: 0; top: 0; width: 34px; height: 34px; opacity: 0; pointer-events: none; overflow: visible; }
[data-demo="pager"] .pg-lens-glass { fill: color-mix(in srgb, var(--pop) 22%, transparent); stroke: var(--pop); stroke-width: 3.2; }
[data-demo="pager"] .pg-lens-handle { stroke: var(--pop); stroke-width: 4.5; stroke-linecap: round; }

.demo[data-demo="pager"] .pg-board .sfx-wrap.pg-burst {
  position: absolute; z-index: 3; right: -18px; top: -30px;
  width: 84px; height: 84px; margin: 0;
  opacity: 1; transform: none; transition: none;
}
[data-demo="pager"] .pg-burst .sfx { font-size: 1.1rem; }

@media (max-width: 400px) {
  [data-demo="pager"] .pg-call { gap: 14px; padding-left: 6px; }
  [data-demo="pager"] .pg-col-h { font-size: 10.5px; letter-spacing: .04em; }
  [data-demo="pager"] .pg-col { padding: 0 4px; }
  [data-demo="pager"] .pg-ticket { padding: 6px 3px 6px 8px; }
  [data-demo="pager"] .pg-t-title { font-size: 10.5px; padding-left: 0; }
}

/* -- demo: merge -- */
/* merge: the crew. A change waiting for review, with the visitor as the reviewer: request changes
   (a comment, a fix, round two) or approve, then merge: the branch joins main and the card is stamped. */
[data-demo="merge"] .mg-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 14px 14px 16px;
  background: var(--panel-2); border: 2.5px solid var(--frame); border-radius: 6px;
  box-shadow: 4px 4px 0 var(--frame);
}
[data-demo="merge"] .mg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
[data-demo="merge"] .mg-graph { flex: none; width: 100px; height: 44px; overflow: visible; }
[data-demo="merge"] .mg-main { fill: none; stroke: var(--frame); stroke-width: 3; stroke-linecap: round; }
[data-demo="merge"] .mg-branch { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
[data-demo="merge"] .mg-join { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-demo="merge"] .mg-dot { fill: var(--panel-2); stroke: var(--frame); stroke-width: 2.5; }
[data-demo="merge"] .mg-dot-b { fill: var(--accent); }
[data-demo="merge"] .mg-dot-fix, [data-demo="merge"] .mg-dot-merge { opacity: 0; transform-box: fill-box; transform-origin: center; }
[data-demo="merge"] .mg-dot-merge { fill: var(--pop); }
[data-demo="merge"] .mg-card.fixed .mg-dot-fix { opacity: 1; }
[data-demo="merge"] .mg-card.merged .mg-dot-merge { opacity: 1; }
[data-demo="merge"] .mg-card.merged .mg-join { stroke-dashoffset: 0; }

[data-demo="merge"] .mg-titles { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
[data-demo="merge"] .mg-title { font: 700 16px/1.25 var(--sans); color: var(--ink); }
[data-demo="merge"] .mg-meta { font: 400 13px/1.4 var(--sans); color: var(--ink-2); }
[data-demo="merge"] .mg-meta code { font-size: 12px; padding: 1px 5px; border-radius: 3px; background: var(--panel); border: 1px solid var(--rule); color: var(--ink); }
[data-demo="merge"] .mg-status {
  flex: none; padding: 5px 11px 4px; border-radius: 999px;
  font: 700 12px/1.2 var(--sans); letter-spacing: .03em; white-space: nowrap;
  color: var(--ink); background: var(--panel); border: 2px solid var(--frame);
}
[data-demo="merge"] .mg-status[data-status="changes"] { color: var(--hot); border-color: var(--hot); }
[data-demo="merge"] .mg-status[data-status="approved"] { color: var(--teal); border-color: var(--teal); }
[data-demo="merge"] .mg-status[data-status="merged"] { color: var(--pop-ink); background: var(--pop); border-color: var(--frame); }

/* who wrote it, who reviews it */
[data-demo="merge"] .mg-people { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
[data-demo="merge"] .mg-who { display: flex; align-items: center; gap: 8px; }
[data-demo="merge"] .mg-who-t { display: flex; flex-direction: column; gap: 1px; }
[data-demo="merge"] .mg-name { font: 700 14px/1.2 var(--sans); color: var(--ink); }
[data-demo="merge"] .mg-av { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--frame); overflow: visible; }
[data-demo="merge"] .mg-av > svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
[data-demo="merge"] .mg-av-a { background: color-mix(in srgb, var(--teal) 30%, var(--panel-2)); }
[data-demo="merge"] .mg-av-you { background: var(--pop); }
[data-demo="merge"] .mg-av-head { fill: var(--panel-2); stroke: var(--frame); stroke-width: 2; }
[data-demo="merge"] .mg-av-body { fill: var(--frame); }
[data-demo="merge"] .mg-av-hair { fill: var(--frame); }
[data-demo="merge"] .mg-arrow { position: relative; width: 34px; height: 2px; background: var(--line); }
[data-demo="merge"] .mg-arrow::after {
  content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px;
  border-top: 2px solid var(--line); border-right: 2px solid var(--line); transform: rotate(45deg);
}
[data-demo="merge"] .mg-badge {
  position: absolute; right: -6px; bottom: -5px; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--frame); background: var(--teal); visibility: hidden;
}
[data-demo="merge"] .mg-badge svg { display: block; width: 100%; height: 100%; }
[data-demo="merge"] .mg-badge path { fill: none; stroke: var(--panel-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
[data-demo="merge"] .mg-badge-ask { display: none; }
[data-demo="merge"] .mg-card[data-badge] .mg-badge { visibility: visible; }
[data-demo="merge"] .mg-card[data-badge="ask"] .mg-badge { background: var(--hot); }
[data-demo="merge"] .mg-card[data-badge="ask"] .mg-badge-ok { display: none; }
[data-demo="merge"] .mg-card[data-badge="ask"] .mg-badge-ask { display: inline; }

/* the diff: bars, not code */
[data-demo="merge"] .mg-diff {
  display: flex; flex-direction: column; gap: 2px; padding: 0 0 6px;
  background: var(--panel); border: 2px solid var(--frame); border-radius: 4px; overflow: hidden;
  transition: opacity .3s linear;
}
[data-demo="merge"] .mg-file { display: flex; align-items: center; gap: 8px; padding: 6px 9px; margin-bottom: 3px; border-bottom: 2px solid var(--rule); }
[data-demo="merge"] .mg-file-icon { width: 11px; height: 14px; border: 2px solid var(--ink-2); border-radius: 2px 5px 2px 2px; }
[data-demo="merge"] .mg-file i { display: block; width: 34%; height: 6px; border-radius: 3px; background: var(--ink-2); opacity: .55; }
[data-demo="merge"] .mg-ln { position: relative; height: 16px; margin: 0 6px; border-radius: 2px; color: var(--ink-2); }
[data-demo="merge"] .mg-ln::before {
  content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px;
}
[data-demo="merge"] .mg-ln::after {
  content: ""; position: absolute; left: 24px; top: 5px; height: 6px;
  width: min(calc(100% - 34px), var(--w, 50%)); border-radius: 3px; background: currentColor; opacity: .35;
}
[data-demo="merge"] .mg-ln.del { color: var(--hot); background: color-mix(in srgb, var(--hot) 13%, transparent); }
[data-demo="merge"] .mg-ln.add { color: var(--teal); background: color-mix(in srgb, var(--teal) 15%, transparent); }
[data-demo="merge"] .mg-ln.del::after, [data-demo="merge"] .mg-ln.add::after { opacity: .7; }
[data-demo="merge"] .mg-ln.del::before { background: linear-gradient(currentColor, currentColor) center / 8px 2.4px no-repeat; }
[data-demo="merge"] .mg-ln.add::before {
  background: linear-gradient(currentColor, currentColor) center / 8px 2.4px no-repeat,
              linear-gradient(currentColor, currentColor) center / 2.4px 8px no-repeat;
}
[data-demo="merge"] .mg-card.merged .mg-diff { opacity: .55; }

/* the review thread */
[data-demo="merge"] .mg-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
[data-demo="merge"] .mg-c {
  position: relative; align-self: flex-start; max-width: min(46ch, 100%);
  padding: 7px 12px 6px; border: 2px solid var(--frame); border-radius: 14px;
  font: 600 13.5px/1.35 var(--sans); color: var(--bubble-ink); background: var(--bubble);
}
[data-demo="merge"] .mg-c-who { font-weight: 800; }
[data-demo="merge"] .mg-c.you { border-color: var(--hot); box-shadow: 2px 2px 0 var(--hot); }
[data-demo="merge"] .mg-c.dev { align-self: flex-end; box-shadow: 2px 2px 0 var(--frame); }
[data-demo="merge"] .mg-c.resolved { opacity: .6; box-shadow: none; }
[data-demo="merge"] .mg-c.resolved .mg-c-text { text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* the stamp and the burst */
[data-demo="merge"] .mg-stamp {
  position: absolute; left: 50%; top: 58%; z-index: 2;
  padding: 6px 16px 3px; pointer-events: none;
  font: 400 clamp(30px, 6vw, 46px)/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--hot); background: color-mix(in srgb, var(--panel-2) 82%, transparent);
  border: 4px solid var(--hot); border-radius: 8px;
  box-shadow: inset 0 0 0 3px var(--panel-2), inset 0 0 0 5px var(--hot);
  transform: translate(-50%, -50%) rotate(-9deg);
}
.demo[data-demo="merge"] .mg-card .sfx-wrap.mg-burst {
  position: absolute; z-index: 3; right: -22px; bottom: -82px;
  width: 104px; height: 104px; margin: 0;
  opacity: 1; transform: none; transition: none;
}
[data-demo="merge"] .mg-burst .sfx { font-size: 1.25rem; }

[data-demo="merge"] .mg-ctl { min-height: 44px; }
[data-demo="merge"] .demo-live { container-type: inline-size; }
@container (max-width: 330px) {
  [data-demo="merge"] .mg-arrow { display: none; }
  [data-demo="merge"] .mg-people { gap: 8px 16px; }
}

@media (max-width: 719px) {
  .demo[data-demo="merge"] .mg-card .sfx-wrap.mg-burst { right: -10px; bottom: -74px; width: 88px; height: 88px; }
  [data-demo="merge"] .mg-card { padding: 12px 11px 14px; }
}

/* -- demo: tenants -- */
/* tenants: one inspection app, re-themed per tenant. Two screen layers crossfade; the config card beside
   the phone lists what changed. Tenant colours come from the page tokens, so day and night both work. */
[data-demo="tenants"] [data-t="a"] { --t1: var(--accent); --t2: var(--gold); --tf: var(--sans); --tr: 6px; }
[data-demo="tenants"] [data-t="b"] { --t1: var(--gold); --t2: var(--accent); --tf: var(--serif); --tr: 999px; }
[data-demo="tenants"] [data-t="c"] { --t1: var(--hot); --t2: var(--teal); --tf: var(--mono); --tr: 0; }

[data-demo="tenants"] .tn-pick .d-btn { flex: 1 1 0; min-width: 0; padding: 0 8px; }
[data-demo="tenants"] .tn-stage {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px;
}
[data-demo="tenants"] .tn-device { position: relative; flex: none; }
[data-demo="tenants"] .tn-phone { width: 168px; }

/* the screen: two stacked layers, one shown */
[data-demo="tenants"] .d-screen { background: var(--panel-2); }
[data-demo="tenants"] .tn-layer {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--t1) 7%, var(--panel-2));
  opacity: 0; transform: scale(1.06);
  transition: opacity .3s linear, transform .45s var(--ease);
}
[data-demo="tenants"] .tn-layer.is-on { opacity: 1; transform: none; z-index: 1; }
[data-demo="tenants"] .tn-bar {
  flex: none; display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px;
  background: var(--t1); color: var(--panel-2);
  font: 700 13px/1 var(--tf); letter-spacing: .01em;
  border-bottom: 3px solid var(--t2);
}
[data-demo="tenants"] .tn-bar .tn-mark { width: 17px; height: 17px; flex: none; }
[data-demo="tenants"] .tn-bar .tn-mark path { fill: var(--panel-2); fill-rule: evenodd; }
[data-demo="tenants"] .tn-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-demo="tenants"] .tn-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 12px; min-height: 0; }
[data-demo="tenants"] .tn-h { font: 700 14px/1.1 var(--tf); color: var(--ink); }
[data-demo="tenants"] .tn-row { display: flex; justify-content: space-between; gap: 6px; font: 500 10.5px/1.3 var(--sans); color: var(--ink-2); }
[data-demo="tenants"] .tn-v { font: 600 10.5px/1.3 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-demo="tenants"] .tn-list { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 7px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
[data-demo="tenants"] .tn-list li { display: flex; align-items: center; gap: 7px; }
[data-demo="tenants"] .tn-box { flex: none; width: 11px; height: 11px; border: 2px solid var(--t1); border-radius: min(var(--tr), 3px); }
[data-demo="tenants"] .tn-box.on { background: var(--t1); }
[data-demo="tenants"] .tn-line { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--ink-2); opacity: .3; }
[data-demo="tenants"] .tn-list li:nth-child(1) .tn-line { flex: 0 1 78%; }
[data-demo="tenants"] .tn-list li:nth-child(2) .tn-line { flex: 0 1 60%; }
[data-demo="tenants"] .tn-list li:nth-child(3) .tn-line { flex: 0 1 70%; }
[data-demo="tenants"] .tn-feats { display: flex; flex-direction: column; gap: 5px; }
[data-demo="tenants"] .tn-feat {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 26px; padding: 0 4px 0 7px;
  border: 1.5px solid var(--t1); border-radius: min(var(--tr), 8px);
  background: color-mix(in srgb, var(--t1) 9%, var(--panel-2));
  transform-origin: 50% 0;
  transition: opacity .18s linear, transform .32s cubic-bezier(.2, 1.6, .4, 1);
}
[data-demo="tenants"] .tn-feat .tn-k { font: 700 9.5px/1 var(--sans); letter-spacing: .02em; color: var(--t1); }
[data-demo="tenants"] .tn-feat.is-off { opacity: 0; transform: scaleY(.4) scaleX(.85); }
[data-demo="tenants"] .tn-thumbs { display: flex; gap: 3px; }
[data-demo="tenants"] .tn-thumbs i {
  position: relative; width: 20px; height: 16px; border-radius: min(var(--tr), 3px); overflow: hidden;
  background: color-mix(in srgb, var(--t1) 28%, var(--panel-2));
}
[data-demo="tenants"] .tn-thumbs i::before { content: ""; position: absolute; left: -3px; bottom: -6px; width: 16px; height: 14px; background: var(--t1); transform: rotate(45deg); }
[data-demo="tenants"] .tn-thumbs i::after { content: ""; position: absolute; right: 3px; top: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--t2); }
[data-demo="tenants"] .tn-thumbs i:nth-child(2)::before { left: 4px; }
[data-demo="tenants"] .tn-thumbs i:nth-child(3)::before { left: -8px; }
[data-demo="tenants"] .tn-sig { width: 54px; height: 16px; }
[data-demo="tenants"] .tn-sig path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
[data-demo="tenants"] .tn-feat.is-drawing .tn-sig path { stroke-dashoffset: 100; }
[data-demo="tenants"] .tn-feat.is-draw .tn-sig path { transition: stroke-dashoffset .7s ease-in-out .12s; }
[data-demo="tenants"] .tn-none { height: 26px; border: 1.5px dashed var(--rule); border-radius: min(var(--tr), 8px); }
[data-demo="tenants"] .tn-go {
  margin-top: auto; display: flex; align-items: center; justify-content: center; height: 28px;
  font: 700 11.5px/1 var(--tf); color: var(--panel-2); background: var(--t1);
  border-radius: var(--tr); box-shadow: 2px 2px 0 var(--t2);
}

/* the layer arrives in beats: the bar drops, the rows rise, the button pops */
[data-demo="tenants"] .tn-layer .tn-bar { transform: translateY(-100%); transition: transform .38s cubic-bezier(.2, 1.3, .4, 1) .05s; }
[data-demo="tenants"] .tn-layer .tn-body > * { opacity: 0; transform: translateY(8px); transition: opacity .25s linear, transform .35s var(--ease); }
[data-demo="tenants"] .tn-layer .tn-body > :nth-child(2) { transition-delay: .06s; }
[data-demo="tenants"] .tn-layer .tn-body > :nth-child(3) { transition-delay: .1s; }
[data-demo="tenants"] .tn-layer .tn-body > :nth-child(4) { transition-delay: .14s; }
[data-demo="tenants"] .tn-layer .tn-body > :nth-child(5) { transition-delay: .18s; }
[data-demo="tenants"] .tn-layer .tn-body > .tn-go { transform: scale(.7); transition: opacity .2s linear .22s, transform .4s cubic-bezier(.2, 1.7, .4, 1) .22s; }
[data-demo="tenants"] .tn-layer.is-on .tn-bar,
[data-demo="tenants"] .tn-layer.is-on .tn-body > * { opacity: 1; transform: none; }
/* the layer on its way out keeps its parts still and resets them once it is gone */
[data-demo="tenants"] .tn-layer:not(.is-on) .tn-bar,
[data-demo="tenants"] .tn-layer:not(.is-on) .tn-body > *,
[data-demo="tenants"] .tn-layer:not(.is-on) .tn-body > .tn-go { transition: opacity 0s linear .32s, transform 0s linear .32s; }

/* the burst beside the phone */
[data-demo="tenants"] .tn-fx { position: absolute; right: -34px; top: -22px; z-index: 2; width: 84px; height: 84px; pointer-events: none; opacity: 0; transform: scale(.3) rotate(20deg); }
[data-demo="tenants"] .tn-fx .sfx-wrap { width: 84px; height: 84px; margin: 0; }
[data-demo="tenants"] .tn-fx .sfx { font-size: 1.05rem; }
[data-demo="tenants"] .tn-fx.is-pop { opacity: 1; transform: none; transition: opacity .1s linear, transform .35s cubic-bezier(.2, 1.8, .4, 1); }
[data-demo="tenants"] .tn-fx.is-out { opacity: 0; transform: scale(1.15); transition: opacity .3s linear, transform .3s linear; }

/* the config card */
[data-demo="tenants"] .tn-config {
  flex: 1 1 210px; max-width: 320px; margin: 0;
  background: var(--panel-2); border: 2.5px solid var(--frame); box-shadow: 3px 3px 0 var(--frame);
}
[data-demo="tenants"] .tn-cfg { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 9px; border-top: 1px solid var(--rule); }
[data-demo="tenants"] .tn-cfg:first-child { border-top: 0; }
[data-demo="tenants"] .tn-cfg dd { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font: 600 14px/1.3 var(--sans); color: var(--ink); }
[data-demo="tenants"] .tn-cfg dd.d-mono { font: 600 13px/1.3 var(--mono); }
[data-demo="tenants"] .tn-cfg .tn-mark { width: 18px; height: 18px; flex: none; }
[data-demo="tenants"] .tn-cfg .tn-mark path { fill: var(--t1); fill-rule: evenodd; }
[data-demo="tenants"] .tn-sw { display: inline-flex; gap: 3px; }
[data-demo="tenants"] .tn-sw i { width: 16px; height: 16px; border: 1.5px solid var(--frame); background: var(--t1); }
[data-demo="tenants"] .tn-sw i:nth-child(2) { background: var(--t2); }
[data-demo="tenants"] .tn-sw i:nth-child(3) { background: color-mix(in srgb, var(--t1) 12%, var(--panel-2)); }
[data-demo="tenants"] .tn-config .flash { animation: tn-flash .5s var(--ease) 1; }
@keyframes tn-flash { 0% { opacity: .2; transform: translateX(-6px); } 100% { opacity: 1; transform: none; } }

/* feature toggles: a small switch and its name */
[data-demo="tenants"] .tn-toggles { gap: 6px 8px; }
[data-demo="tenants"] .tn-tog {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 9px 0 6px;
  font: 700 12.5px/1 var(--sans); color: var(--ink); background: var(--panel);
  border: 2px solid var(--frame); border-radius: 999px;
}
[data-demo="tenants"] .tn-tog:hover { background: color-mix(in srgb, var(--panel) 80%, var(--accent)); }
[data-demo="tenants"] .tn-switch { position: relative; width: 26px; height: 15px; flex: none; border-radius: 8px; border: 1.5px solid var(--line); background: var(--panel-2); }
[data-demo="tenants"] .tn-switch::after {
  content: ""; position: absolute; left: 1.5px; top: 1.5px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--line); transition: transform .22s cubic-bezier(.2, 1.5, .4, 1);
}
[data-demo="tenants"] .tn-tog[aria-pressed="true"] .tn-switch { background: var(--t1); border-color: var(--t1); }
[data-demo="tenants"] .tn-tog[aria-pressed="true"] .tn-switch::after { background: var(--panel-2); transform: translateX(11px); }

[data-demo="tenants"] .tn-note { font: 400 12.5px/1.45 var(--sans); color: var(--ink-2); }

@media (forced-colors: active) {
  [data-demo="tenants"] .tn-switch::after, [data-demo="tenants"] .tn-box.on, [data-demo="tenants"] .tn-sw i { forced-color-adjust: none; background: CanvasText; }
}

/* -- demo: crm -- */
/* crm: a small live dashboard. Counts update as rows arrive; the list itself only changes when the
   visitor asks (the pill), filters or turns a page, so the page being read never jumps. */
[data-demo="crm"] { --cr-row: 34px; --cr-hi: var(--pop); --cr-hi-o: .55; }
/* at night the fresh-row glow is turquoise, so light text stays legible on it */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-demo="crm"] { --cr-hi: var(--accent); --cr-hi-o: .28; } }
:root[data-theme="dark"] [data-demo="crm"] { --cr-hi: var(--accent); --cr-hi-o: .28; }
[data-demo="crm"] .demo-live { container-type: inline-size; }
[data-demo="crm"] [data-s="new"] { --st: var(--accent); }
[data-demo="crm"] [data-s="open"] { --st: var(--gold); }
[data-demo="crm"] [data-s="closed"] { --st: var(--ink-2); }

/* top: the Live toggle and the live counts */
[data-demo="crm"] .cr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
[data-demo="crm"] .cr-live { gap: 9px; }
[data-demo="crm"] .cr-dot { position: relative; width: 11px; height: 11px; flex: none; border-radius: 50%; border: 2px solid var(--hot); background: transparent; }
[data-demo="crm"] .cr-live[aria-pressed="true"] .cr-dot { background: var(--hot); }
[data-demo="crm"] .cr-dot i { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--hot); opacity: 0; }
[data-demo="crm"] .cr-dot.ping i { animation: cr-ping .9s ease-out 1; }
@keyframes cr-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
[data-demo="crm"] .cr-paused { color: var(--hot); }
[data-demo="crm"] .cr-kpis { display: flex; gap: 6px; margin-left: auto; }
[data-demo="crm"] .cr-kpi {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; padding: 4px 8px 5px;
  background: var(--panel-2); border: 2px solid var(--frame); border-top: 5px solid var(--st);
}
[data-demo="crm"] .cr-kpi b { display: block; font: 400 22px/1 var(--display); letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums; }
[data-demo="crm"] .cr-kpi span { font: 700 10px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
[data-demo="crm"] .cr-kpi { position: relative; }
[data-demo="crm"] .cr-plus {
  position: absolute; right: -6px; top: -12px; padding: 2px 5px;
  font: 700 11px/1 var(--mono); font-style: normal; color: var(--pop-ink); background: var(--pop);
  border: 1.5px solid var(--frame); border-radius: 999px; pointer-events: none;
  animation: cr-plus .9s ease-out 1 both;
}
@keyframes cr-plus { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 25% { opacity: 1; transform: translateY(-2px) scale(1.1); } 70% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-12px); } }
[data-demo="crm"] .cr-kpi b.bump { animation: cr-bump .45s cubic-bezier(.2, 1.8, .4, 1) 1; }
@keyframes cr-bump { 0% { transform: scale(1.45); } 100% { transform: none; } }

/* filter chips */
[data-demo="crm"] .cr-chips { gap: 6px; }
[data-demo="crm"] .cr-chip {
  min-height: 34px; padding: 0 12px;
  font: 700 13px/1 var(--sans); color: var(--ink); background: var(--panel-2);
  border: 2px solid var(--frame); border-radius: 999px;
  transition: transform .08s linear;
}
[data-demo="crm"] .cr-chip:hover { background: color-mix(in srgb, var(--panel-2) 80%, var(--accent)); }
[data-demo="crm"] .cr-chip[aria-pressed="true"] { background: var(--frame); color: var(--panel-2); }
[data-demo="crm"] .cr-chip:active { transform: scale(.94); }

/* the burst when new rows come in */
[data-demo="crm"] .cr-wrap { position: relative; }
[data-demo="crm"] .cr-fx { position: absolute; right: -26px; top: -40px; z-index: 4; width: 78px; height: 78px; pointer-events: none; opacity: 0; transform: scale(.3) rotate(18deg); }
[data-demo="crm"] .cr-fx .sfx-wrap { width: 78px; height: 78px; margin: 0; }
[data-demo="crm"] .cr-fx .sfx { font-size: 1rem; }
[data-demo="crm"] .cr-fx.is-pop { opacity: 1; transform: none; transition: opacity .1s linear, transform .35s cubic-bezier(.2, 1.8, .4, 1); }
[data-demo="crm"] .cr-fx.is-out { opacity: 0; transform: scale(1.15); transition: opacity .3s linear, transform .3s linear; }
@container (max-width: 400px) { [data-demo="crm"] .cr-fx { right: -10px; } }

/* the board: the table, with the pill floating over its header */
[data-demo="crm"] .cr-board { position: relative; background: var(--panel-2); border: 2.5px solid var(--frame); box-shadow: 3px 3px 0 var(--frame); overflow: hidden; }
[data-demo="crm"] .cr-table { width: 100%; border-collapse: collapse; table-layout: fixed; font: 500 13.5px/1.2 var(--sans); }
[data-demo="crm"] .cr-c1 { width: 42%; }
[data-demo="crm"] .cr-c2 { width: 30%; }
[data-demo="crm"] .cr-c3 { width: 28%; }
[data-demo="crm"] .cr-table th {
  height: 32px; padding: 0 10px; text-align: left;
  font: 700 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 2px solid var(--frame); background: var(--panel);
}
[data-demo="crm"] .cr-table th:last-child, [data-demo="crm"] .cr-table td:last-child { text-align: right; }
[data-demo="crm"] .cr-table td {
  position: relative; height: var(--cr-row); padding: 0 10px;
  border-top: 1px solid var(--rule); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-demo="crm"] .cr-table tbody tr:first-child td { border-top: 0; }
[data-demo="crm"] .cr-name { font-weight: 700; }
[data-demo="crm"] .cr-time { font: 500 12.5px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
[data-demo="crm"] .cr-st {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 7px;
  font: 700 11.5px/1 var(--sans); color: var(--ink);
  border: 1.5px solid var(--st); border-radius: 999px;
  background: color-mix(in srgb, var(--st) 12%, transparent);
}
[data-demo="crm"] .cr-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st); }
[data-demo="crm"] .cr-empty td { color: var(--ink-2); font: italic 400 14px/1.2 var(--serif); }
/* rows just brought in glow once, then settle */
[data-demo="crm"] tr.is-fresh td::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cr-hi); opacity: 0;
  animation: cr-fresh 2.2s ease-out 1;
}
[data-demo="crm"] tr.is-fresh td:first-child::after { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; background: var(--hot); animation: cr-fade 2.2s ease-in 1 forwards; }
[data-demo="crm"] tr.is-fresh td { isolation: isolate; }
@keyframes cr-fresh { 0% { opacity: var(--cr-hi-o); } 100% { opacity: 0; } }
@keyframes cr-fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
/* rows arrive: they drop in from the top, one after another */
[data-demo="crm"] tbody.drop tr { animation: cr-drop .42s cubic-bezier(.2, 1.3, .4, 1) both; }
[data-demo="crm"] tbody.drop tr:nth-child(2) { animation-delay: .04s; }
[data-demo="crm"] tbody.drop tr:nth-child(3) { animation-delay: .08s; }
[data-demo="crm"] tbody.drop tr:nth-child(4) { animation-delay: .12s; }
[data-demo="crm"] tbody.drop tr:nth-child(5) { animation-delay: .16s; }
@keyframes cr-drop { 0% { opacity: 0; transform: translateY(-14px); } 100% { opacity: 1; transform: none; } }
/* a page turn slides the rows in from the side it came from */
[data-demo="crm"] tbody.from-r tr { animation: cr-from-r .3s var(--ease) both; }
[data-demo="crm"] tbody.from-l tr { animation: cr-from-l .3s var(--ease) both; }
[data-demo="crm"] tbody.fade tr { animation: cr-fadein .25s linear both; }
@keyframes cr-from-r { 0% { opacity: 0; transform: translateX(22px); } 100% { opacity: 1; transform: none; } }
@keyframes cr-from-l { 0% { opacity: 0; transform: translateX(-22px); } 100% { opacity: 1; transform: none; } }
@keyframes cr-fadein { 0% { opacity: 0; } 100% { opacity: 1; } }

/* the pill: floats over the header, so it never pushes a row */
[data-demo="crm"] .cr-pill {
  position: absolute; left: 50%; top: 3px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 13px 0 10px;
  font: 700 12.5px/1 var(--sans); color: var(--pop-ink); background: var(--pop);
  border: 2px solid var(--frame); border-radius: 999px; box-shadow: 2px 2px 0 var(--frame);
  transform: translateX(-50%); white-space: nowrap;
}
[data-demo="crm"] .cr-pill:hover { background: color-mix(in srgb, var(--pop) 85%, var(--panel-2)); }
[data-demo="crm"] .cr-pill.enter { animation: cr-pill-in .45s cubic-bezier(.2, 1.6, .4, 1) 1; }
[data-demo="crm"] .cr-pill.grow { animation: cr-pill-grow .35s cubic-bezier(.2, 1.8, .4, 1) 1; }
@keyframes cr-pill-in { 0% { opacity: 0; transform: translate(-50%, -26px); } 100% { opacity: 1; transform: translateX(-50%); } }
@keyframes cr-pill-grow { 0% { transform: translateX(-50%) scale(1.15); } 100% { transform: translateX(-50%); } }
[data-demo="crm"] .cr-up { width: 0; height: 0; border-style: solid; border-width: 0 5px 7px; border-color: transparent transparent currentColor; }

/* pagination */
[data-demo="crm"] .cr-pages { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
[data-demo="crm"] .cr-page { color: var(--ink-2); text-align: center; }
[data-demo="crm"] .cr-pages .d-btn[aria-disabled="true"] { opacity: .45; cursor: default; transform: none; box-shadow: 3px 3px 0 var(--frame); }

[data-demo="crm"] .cr-note { font: 400 12.5px/1.45 var(--sans); color: var(--ink-2); }

@container (max-width: 400px) {
  [data-demo="crm"] .cr-kpis { margin-left: 0; width: 100%; }
  [data-demo="crm"] .cr-kpi { flex: 1 1 0; min-width: 0; }
  [data-demo="crm"] .cr-table td, [data-demo="crm"] .cr-table th { padding: 0 7px; }
  [data-demo="crm"] .cr-c1 { width: 40%; }
  [data-demo="crm"] .cr-c2 { width: 31%; }
  [data-demo="crm"] .cr-c3 { width: 29%; }
  [data-demo="crm"] .cr-time { font-size: 11.5px; }
  [data-demo="crm"] .cr-chip { padding: 0 10px; }
}
@media (forced-colors: active) {
  [data-demo="crm"] .cr-st::before, [data-demo="crm"] .cr-live[aria-pressed="true"] .cr-dot { forced-color-adjust: none; background: CanvasText; }
}

/* -- demo: mirror -- */
/* mirror: "Right to left" (GharSathi). One app screen in English and in Urdu; Urdu mirrors the
   whole layout with a flip. The Urdu labels are drawn strokes (demo-mirror.js), never real text. */
[data-demo="mirror"] .demo-live { container-type: inline-size; }
[data-demo="mirror"] .m-langs .d-label { margin-right: 2px; }
[data-demo="mirror"] .m-langs .d-btn[aria-pressed="true"] { background: var(--pop); color: var(--pop-ink); }
[data-demo="tenants"] .tn-pick .d-btn[aria-pressed="true"] { background: var(--pop); color: var(--pop-ink); }
@media (forced-colors: active) {
  [data-demo="tenants"] .tn-pick .d-btn[aria-pressed="true"], [data-demo="mirror"] .m-langs .d-btn[aria-pressed="true"],
  [data-demo="crm"] .cr-chip[aria-pressed="true"], [data-demo="pocket"] .pk-mac[aria-pressed="true"], [data-demo="outbox"] .o-signal[aria-pressed="true"] {
    forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight;
  }
}
[data-demo="mirror"] .m-stage {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px;
  padding: 6px 0 2px;
}

/* the phone: the UI is one card that flips over a screentoned back */
[data-demo="mirror"] .m-phone { width: 184px; aspect-ratio: 9 / 16; }
[data-demo="mirror"] .m-screen {
  perspective: 620px;
  background: radial-gradient(var(--tone) 1.2px, transparent 1.5px) 0 0 / 6px 6px, var(--panel-dark);
}
[data-demo="mirror"] .m-ui {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  padding: 11px 9px 10px;
  background: var(--panel-2); color: var(--ink);
  border-radius: 12px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  font: 600 11.5px/1.2 var(--sans);
}
[data-demo="mirror"] .m-glint {
  position: absolute; z-index: 2; top: -10%; bottom: -10%; left: 0; width: 46%;
  background: linear-gradient(100deg, transparent 10%, color-mix(in srgb, var(--pop) 42%, transparent) 50%, transparent 90%);
  opacity: 0; pointer-events: none;
}

/* top bar */
[data-demo="mirror"] .m-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 0 1px 7px; border-bottom: 1.5px solid var(--rule);
}
[data-demo="mirror"] .m-back { display: grid; place-items: center; width: 18px; height: 18px; flex: none; color: var(--ink); }
[data-demo="mirror"] .m-back svg { display: block; width: 16px; height: 16px; overflow: visible; }
[data-demo="mirror"] .m-back path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
[data-demo="mirror"] .m-ui[dir="rtl"] .m-back svg { transform: scaleX(-1); }
[data-demo="mirror"] .m-title { font: 700 13px/1 var(--sans); }

/* tabs: their order mirrors too */
[data-demo="mirror"] .m-tabs { display: flex; gap: 5px; }
[data-demo="mirror"] .m-tab {
  display: inline-flex; align-items: center; padding: 3px 9px 2px; border-radius: 999px;
  border: 1.5px solid var(--frame); font: 700 10.5px/1 var(--sans); color: var(--ink-2);
}
[data-demo="mirror"] .m-tab.on { background: var(--frame); color: var(--panel-2); }
[data-demo="mirror"] .m-tab .m-t { height: 18px; }

/* the list */
[data-demo="mirror"] .m-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
[data-demo="mirror"] .m-item {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 7px; background: var(--panel);
  border: 1.5px solid var(--frame); border-radius: 8px;
}
[data-demo="mirror"] .m-av { flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--frame); }
[data-demo="mirror"] .m-av svg { display: block; width: 100%; height: 100%; }
[data-demo="mirror"] .m-av-bg { fill: var(--accent); }
[data-demo="mirror"] .m-item:nth-child(2) .m-av-bg { fill: var(--gold); }
[data-demo="mirror"] .m-item:nth-child(3) .m-av-bg { fill: var(--brick); }
[data-demo="mirror"] .m-av-fg { fill: var(--panel-2); }
[data-demo="mirror"] .m-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
[data-demo="mirror"] .m-prog {
  position: relative; align-self: stretch; height: 5px; overflow: hidden;
  border-radius: 3px; background: color-mix(in srgb, var(--ink) 13%, transparent);
}
[data-demo="mirror"] .m-fill {
  position: absolute; inset: 0; border-radius: 3px; background: var(--teal);
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
[data-demo="mirror"] .m-ui[dir="rtl"] .m-fill { transform-origin: 100% 50%; }

/* the primary button, inside the phone */
[data-demo="mirror"] .m-cta {
  margin-top: auto; min-height: 32px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--sans); color: var(--pop-ink); background: var(--pop);
  border: 2px solid var(--frame); border-radius: 8px; box-shadow: 2px 2px 0 var(--frame);
  transition: transform .08s linear, box-shadow .08s linear;
}
[data-demo="mirror"] .m-cta:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--frame); }

/* labels: Latin text, or drawn strokes in Urdu (the Latin stays for assistive tech) */
[data-demo="mirror"] .m-t { display: inline-flex; align-items: center; height: 22px; min-width: 0; max-width: 100%; }
[data-demo="mirror"] .m-ur { display: block; flex: none; overflow: visible; color: currentColor; }
[data-demo="mirror"] .m-ink { fill: none; stroke: currentColor; stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; }
[data-demo="mirror"] .m-dots { fill: currentColor; }
[data-demo="mirror"] .m-ui[data-lang="en"] .m-ur { display: none; }
[data-demo="mirror"] .m-ui[data-lang="ur"] .m-en {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* what flips: four notes that light up in Urdu */
[data-demo="mirror"] .m-side { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
[data-demo="mirror"] .m-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font: 600 14px/1.35 var(--sans); }
[data-demo="mirror"] .m-notes li { display: flex; align-items: flex-start; gap: 9px; color: var(--ink-2); transition: color .3s linear; }
[data-demo="mirror"] .m-notes li::before {
  content: ""; flex: none; width: 14px; height: 14px; margin-top: 1px;
  background: var(--line);
  -webkit-mask: var(--star-mask) center / contain no-repeat; mask: var(--star-mask) center / contain no-repeat;
  transition: background-color .3s linear, transform .4s cubic-bezier(.3, 1.8, .5, 1);
}
[data-demo="mirror"] .m-notes li:nth-child(2), [data-demo="mirror"] .m-notes li:nth-child(2)::before { transition-delay: .09s; }
[data-demo="mirror"] .m-notes li:nth-child(3), [data-demo="mirror"] .m-notes li:nth-child(3)::before { transition-delay: .18s; }
[data-demo="mirror"] .m-notes li:nth-child(4), [data-demo="mirror"] .m-notes li:nth-child(4)::before { transition-delay: .27s; }
[data-demo="mirror"] .m-side.on .m-notes li { color: var(--ink); }
[data-demo="mirror"] .m-side.on .m-notes li::before { background: var(--gold); transform: scale(1.25) rotate(22.5deg); filter: var(--glow-f); }
[data-demo="mirror"] .m-fine { font: 400 12.5px/1.45 var(--sans); color: var(--ink-2); max-width: 34ch; }

/* the burst: shown and hidden by the script, so the page's reveal rules never touch it */
.demo[data-demo="mirror"] .demo-live .sfx-wrap.m-pop {
  position: absolute; left: 128px; top: -30px; z-index: 3;
  width: 96px; height: 96px; margin: 0; transition: none;
}
.demo[data-demo="mirror"] .demo-live .m-pop .sfx { font-size: 1.2rem; }

@container (max-width: 380px) {
  [data-demo="mirror"] .m-stage { justify-content: center; }
  [data-demo="mirror"] .m-side { flex-basis: 100%; }
  .demo[data-demo="mirror"] .demo-live .sfx-wrap.m-pop { left: calc(50% + 50px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-demo="mirror"] .m-fill, [data-demo="mirror"] .m-notes li, [data-demo="mirror"] .m-notes li::before { transition: none; }
}

/* -- demo: outbox -- */
/* outbox: "The outbox" (GharSathi). Two phones and a relay: ticks for sent, delivered and read, an
   offline outbox, and a reconnect with backoff that flushes the queue in order (demo-outbox.js). */
[data-demo="outbox"] .demo-live { container-type: inline-size; }
[data-demo="outbox"] .o-controls { row-gap: 8px; }
[data-demo="outbox"] .o-signal { gap: 9px; }
[data-demo="outbox"] .o-signal[aria-pressed="true"] { background: color-mix(in srgb, var(--teal) 22%, var(--panel-2)); }
[data-demo="outbox"] .o-bars { position: relative; display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
[data-demo="outbox"] .o-bars i { display: block; width: 3.5px; border-radius: 1px; background: currentColor; }
[data-demo="outbox"] .o-bars i:nth-child(1) { height: 5px; }
[data-demo="outbox"] .o-bars i:nth-child(2) { height: 9px; }
[data-demo="outbox"] .o-bars i:nth-child(3) { height: 14px; }
[data-demo="outbox"] .o-signal[aria-pressed="false"] .o-bars i { opacity: .35; }
[data-demo="outbox"] .o-signal[aria-pressed="false"] .o-bars::after {
  content: ""; position: absolute; left: -3px; right: -3px; top: 6px; height: 2.5px; border-radius: 2px;
  background: var(--hot); transform: rotate(-40deg);
}
[data-demo="outbox"] .o-next { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
[data-demo="outbox"] .o-next-v { color: var(--ink); overflow-wrap: anywhere; }

/* the stage: you, the relay, them */
[data-demo="outbox"] .o-stage {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 150px) minmax(56px, 1fr) minmax(0, 150px);
  align-items: stretch; column-gap: 6px;
}
[data-demo="outbox"] .o-side, [data-demo="outbox"] .o-relay { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
[data-demo="outbox"] .o-side { z-index: 1; }
[data-demo="outbox"] .o-phone { width: 100%; max-width: 150px; aspect-ratio: 9 / 14; padding: 11px 6px 8px; border-radius: 20px; }
[data-demo="outbox"] .o-screen { display: flex; flex-direction: column; gap: 4px; padding: 6px 5px 5px; border-radius: 11px; }
[data-demo="outbox"] .o-status { display: flex; align-items: center; gap: 4px; font: 700 9.5px/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
[data-demo="outbox"] .o-led { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
[data-demo="outbox"] .o-status[data-state="off"] .o-led { background: var(--hot); }
[data-demo="outbox"] .o-status[data-state="off"] { color: var(--hot); }
[data-demo="outbox"] .o-status[data-state="retry"] .o-led { background: var(--gold); }
[data-demo="outbox"] .o-status[data-state="retry"] { color: var(--gold); }
[data-demo="outbox"] .o-tray {
  display: flex; align-items: center; gap: 4px; padding: 2px 6px; align-self: flex-start;
  font: 700 9.5px/1.3 var(--sans); color: var(--ink);
  background: color-mix(in srgb, var(--gold) 16%, var(--panel-2)); border: 1.5px solid var(--gold); border-radius: 999px;
}
[data-demo="outbox"] .o-tray .o-ico { color: var(--gold); }
[data-demo="outbox"] .o-count { display: inline-block; min-width: 1.2em; text-align: center; font: 700 10px/1 var(--mono); }

/* the threads */
[data-demo="outbox"] .o-thread {
  list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; overflow: hidden;
  -webkit-mask: linear-gradient(to bottom, transparent, var(--ink) 16px); mask: linear-gradient(to bottom, transparent, var(--ink) 16px);
}
[data-demo="outbox"] .o-msg {
  position: relative; flex: none; max-width: 94%;
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: 0 4px;
  padding: 3px 6px 3px; font: 600 10.5px/1.25 var(--sans); color: var(--ink);
  border: 1.5px solid var(--frame); border-radius: 9px;
}
[data-demo="outbox"] .o-mine { align-self: flex-end; background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); border-bottom-right-radius: 3px; }
[data-demo="outbox"] .o-theirs { align-self: flex-start; background: var(--panel); border-bottom-left-radius: 3px; }
[data-demo="outbox"] .o-theirs.seen { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 55%, transparent); }
[data-demo="outbox"] .o-txt { overflow-wrap: break-word; }
[data-demo="outbox"] .o-theirs .o-txt { flex: 1 1 auto; }
[data-demo="outbox"] .o-mark { flex: none; display: inline-flex; color: var(--ink-2); margin-bottom: 1px; }
[data-demo="outbox"] .o-mark[data-state="read"] { color: var(--teal); }
[data-demo="outbox"] .o-mark[data-state="wait"] { color: var(--gold); }

[data-demo="outbox"] .o-empty {
  position: absolute; left: 8px; right: 8px; top: 46%; text-align: center;
  font: italic 400 11px/1.35 var(--serif); color: var(--ink-2);
}
[data-demo="outbox"] .o-thread:not(:empty) ~ .o-empty { display: none; }

/* icons: clock and ticks (outline for sent and delivered, filled for read) */
[data-demo="outbox"] .o-ico { display: inline-flex; flex: none; }
[data-demo="outbox"] .o-ico svg, [data-demo="outbox"] .o-mark svg { display: block; height: 10px; width: auto; overflow: visible; }
[data-demo="outbox"] .o-ck { fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
[data-demo="outbox"] .o-ck.fill { fill: currentColor; }
[data-demo="outbox"] .o-clock { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* the relay: a mast between two wires; the left wire breaks when the signal is off */
[data-demo="outbox"] .o-mast { position: relative; flex: 1 1 auto; align-self: stretch; display: grid; place-items: center; }
[data-demo="outbox"] .o-wire { position: absolute; top: 50%; height: 0; border-top: 2px dashed var(--line); }
[data-demo="outbox"] .o-wire-a { left: -64px; right: 50%; }
[data-demo="outbox"] .o-wire-b { left: 50%; right: -64px; }
[data-demo="outbox"] .o-wire-a.cut { border-top-color: transparent; }
[data-demo="outbox"] .o-cut {
  position: absolute; z-index: 3; left: 64px; top: -9px; width: 14px; height: 16px; margin-left: -7px; opacity: 0;
  background: var(--hot);
  clip-path: polygon(55% 0, 100% 0, 62% 42%, 100% 42%, 20% 100%, 42% 52%, 0 52%);
}
[data-demo="outbox"] .o-wire-a.cut .o-cut { opacity: 1; }
[data-demo="outbox"] .o-tower { position: relative; z-index: 1; display: block; width: 46px; height: 46px; }
[data-demo="outbox"] .o-tower svg { display: block; width: 100%; height: 100%; overflow: visible; }
[data-demo="outbox"] .o-t-bg { fill: var(--panel-2); stroke: var(--frame); stroke-width: 2.5; }
[data-demo="outbox"] .o-t-line { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-demo="outbox"] .o-t-tip { fill: var(--hot); }
[data-demo="outbox"] .o-t-wave { fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; }
[data-demo="outbox"] .o-ack {
  position: absolute; left: 50%; top: -16px; margin-left: -11px; width: 22px; height: 16px;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--panel-2); border: 1.5px solid var(--frame); color: var(--teal); opacity: 0;
}

/* things in flight */
[data-demo="outbox"] .o-fly { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
[data-demo="outbox"] .o-tok { position: absolute; left: 0; top: 0; width: 20px; height: 14px; will-change: transform; }
[data-demo="outbox"] .o-tok svg { display: block; width: 100%; height: 100%; overflow: visible; }
[data-demo="outbox"] .o-env { fill: var(--pop); stroke: var(--frame); stroke-width: 1.6; stroke-linejoin: round; }
[data-demo="outbox"] .o-env-flap { fill: none; stroke: var(--frame); stroke-width: 1.4; stroke-linejoin: round; }
[data-demo="outbox"] .o-tok.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); border: 1.5px solid var(--frame); }

/* reconnecting: one dot per try, the gaps doubling */
[data-demo="outbox"] .o-retry { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 22px; }
[data-demo="outbox"] .o-tries { display: inline-flex; align-items: center; }
[data-demo="outbox"] .o-try { display: block; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--hot); background: var(--panel-2); }
[data-demo="outbox"] .o-try.ok { border-color: var(--frame); background: var(--teal); width: 12px; height: 12px; }

/* the key */
[data-demo="outbox"] .o-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 600 12.5px/1.3 var(--sans); color: var(--ink-2); }
[data-demo="outbox"] .o-key li { display: inline-flex; align-items: center; gap: 6px; }
[data-demo="outbox"] .o-key li:nth-child(1) .o-ico { color: var(--gold); }
[data-demo="outbox"] .o-key li:nth-child(4) .o-ico { color: var(--teal); }
[data-demo="outbox"] .o-key .o-ico svg { height: 11px; }
[data-demo="outbox"] .o-note { font: 400 12.5px/1.45 var(--sans); color: var(--ink-2); }

/* the burst: shown and hidden by the script */
.demo[data-demo="outbox"] .demo-live .sfx-wrap.o-pop {
  position: absolute; left: 50%; top: 10px; z-index: 5;
  width: 108px; height: 108px; margin: 0 0 0 -54px; transition: none;
}
.demo[data-demo="outbox"] .demo-live .o-pop .sfx { font-size: 1.2rem; }

@container (max-width: 360px) {
  [data-demo="outbox"] .o-stage { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); column-gap: 4px; }
  [data-demo="outbox"] .o-retry .d-label { flex-basis: 100%; }
  [data-demo="outbox"] .o-tower { width: 38px; height: 38px; }
  [data-demo="outbox"] .o-msg { font-size: 10px; padding: 2px 5px; }
  [data-demo="outbox"] .o-phone { aspect-ratio: 9 / 17; }
}

/* -- demo: cipher -- */
/* cipher: "What the relay sees" (GharSathi), a dark panel. Your phone, the relay and their phone,
   with real AES-256-GCM from Web Crypto in the page; flip a byte on the relay and decryption fails
   (demo-cipher.js). Text on the dark panel is --ink-dark; --pop is the one bright accent there. */
[data-demo="cipher"] .demo-live { container-type: inline-size; }
[data-demo="cipher"] :focus-visible { outline-color: var(--pop); }
[data-demo="cipher"] .d-label { color: color-mix(in srgb, var(--ink-dark) 76%, transparent); }
.demo[data-demo="cipher"] .demo-live .d-out { color: var(--pop); }
[data-demo="cipher"] .d-btn { border-color: var(--ink-dark); box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink-dark) 55%, transparent); }
[data-demo="cipher"] .d-btn:active { box-shadow: 1px 1px 0 color-mix(in srgb, var(--ink-dark) 55%, transparent); }
[data-demo="cipher"] .d-btn[disabled] { box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink-dark) 55%, transparent); }

/* compose */
[data-demo="cipher"] .c-compose { display: flex; flex-direction: column; gap: 7px; }
[data-demo="cipher"] .c-field { display: flex; flex-wrap: wrap; gap: 10px; }
[data-demo="cipher"] .c-input {
  flex: 1 1 210px; min-width: 0; min-height: 42px; padding: 0 12px;
  font: 600 16px/1.2 var(--sans); color: var(--ink); background: var(--panel-2);
  border: 2.5px solid var(--ink-dark); border-radius: 4px;
}

/* the three rows and the steps between them */
[data-demo="cipher"] .c-rows { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
[data-demo="cipher"] .c-row {
  position: relative;
  display: grid; grid-template-columns: 8.6em minmax(0, 1fr); align-items: start; gap: 6px 14px;
  padding: 11px 13px 12px;
  border: 2px solid color-mix(in srgb, var(--ink-dark) 34%, transparent); border-radius: 4px;
  background: color-mix(in srgb, var(--ink-dark) 5%, transparent);
  transition: border-color .25s linear;
}
[data-demo="cipher"] .c-relay {
  border-style: dashed;
  background:
    radial-gradient(color-mix(in srgb, var(--ink-dark) 13%, transparent) 1.1px, transparent 1.4px) 0 0 / 6px 6px,
    color-mix(in srgb, var(--ink-dark) 3%, transparent);
}
[data-demo="cipher"] .c-who {
  display: flex; align-items: center; gap: 7px; padding-top: 2px;
  font: 700 11.5px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-dark) 80%, transparent);
}
[data-demo="cipher"] .c-ico { display: inline-flex; flex: none; width: 16px; height: 16px; }
[data-demo="cipher"] .c-ico svg { width: 100%; height: 100%; overflow: visible; }
[data-demo="cipher"] .c-ico rect, [data-demo="cipher"] .c-ico path, [data-demo="cipher"] .c-ico circle { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
[data-demo="cipher"] .c-val { min-width: 0; min-height: 1.4em; font: 600 16.5px/1.4 var(--sans); color: var(--ink-dark); overflow-wrap: anywhere; }
[data-demo="cipher"] .c-step {
  position: relative; display: flex; align-items: center; gap: 9px;
  min-height: 34px; padding: 3px 0 3px 15px;
  font: 600 12px/1.3 var(--sans); color: color-mix(in srgb, var(--ink-dark) 72%, transparent);
}
[data-demo="cipher"] .c-step::before {
  content: ""; position: absolute; left: 24px; top: 0; bottom: 0; width: 0;
  border-left: 2px dotted color-mix(in srgb, var(--ink-dark) 40%, transparent);
}
[data-demo="cipher"] .c-lock {
  position: relative; display: grid; place-items: center; width: 20px; height: 22px; flex: none;
  color: var(--pop); background: var(--panel-dark);
}
[data-demo="cipher"] .c-lock svg { width: 16px; height: 18px; overflow: visible; }
[data-demo="cipher"] .c-lock rect { fill: var(--pop); stroke: var(--pop); stroke-width: 1.4; }
[data-demo="cipher"] .c-lock path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
[data-demo="cipher"] .c-lock rect + path { stroke: var(--panel-dark); }
[data-demo="cipher"] .c-shackle { transform-box: fill-box; transform-origin: 50% 100%; }
[data-demo="cipher"] .c-open .c-shackle { transform: translate(3px, -3px) rotate(18deg); }
[data-demo="cipher"] .c-step.bad { color: var(--pop); }

/* the relay's bytes: nonce, ciphertext and tag */
[data-demo="cipher"] .c-hex { display: flex; flex-wrap: wrap; gap: 3px 7px; font-size: 13px; line-height: 1.5; letter-spacing: .02em; }
[data-demo="cipher"] .c-hex .b { display: inline-block; min-width: 2ch; text-align: center; }
[data-demo="cipher"] .b.n { color: var(--pop); }
[data-demo="cipher"] .b.c { color: var(--ink-dark); }
[data-demo="cipher"] .b.t { color: color-mix(in srgb, var(--ink-dark) 64%, transparent); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink-dark) 50%, transparent); }
[data-demo="cipher"] .b.f { color: var(--pop-ink); background: var(--pop); border-radius: 2px; box-shadow: 0 0 0 2px var(--pop); }
[data-demo="cipher"] .c-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font: 600 11.5px/1.3 var(--sans); color: color-mix(in srgb, var(--ink-dark) 78%, transparent); }
[data-demo="cipher"] .c-k { display: inline-flex; align-items: center; gap: 6px; }
[data-demo="cipher"] .c-k::before { content: ""; width: 10px; height: 10px; border-radius: 2px; }
[data-demo="cipher"] .c-k.n::before { background: var(--pop); }
[data-demo="cipher"] .c-k.c::before { background: var(--ink-dark); }
[data-demo="cipher"] .c-k.t::before { border: 1.5px dashed color-mix(in srgb, var(--ink-dark) 70%, transparent); }
[data-demo="cipher"] .c-k.f::before { background: var(--pop); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pop) 45%, transparent); }

/* their phone, when the message was changed on the way */
[data-demo="cipher"] .c-them.bad { border-color: var(--pop); }
[data-demo="cipher"] .c-them.bad .c-dec { color: var(--pop); }
[data-demo="cipher"] .c-note { font: 400 12.5px/1.5 var(--sans); color: color-mix(in srgb, var(--ink-dark) 74%, transparent); max-width: 70ch; }

/* the burst: shown and hidden by the script */
.demo[data-demo="cipher"] .demo-live .sfx-wrap.c-pop {
  position: absolute; right: -16px; top: -46px; z-index: 3;
  width: 104px; height: 104px; margin: 0; transition: none;
}
.demo[data-demo="cipher"] .demo-live .c-pop .sfx { font-size: 1.15rem; }

@container (max-width: 470px) {
  [data-demo="cipher"] .c-row { grid-template-columns: minmax(0, 1fr); }
  [data-demo="cipher"] .c-val { font-size: 15.5px; }
  .demo[data-demo="cipher"] .demo-live .sfx-wrap.c-pop { right: -6px; top: -42px; width: 70px; height: 70px; }
  .demo[data-demo="cipher"] .demo-live .c-pop .sfx { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  [data-demo="cipher"] .c-row { transition: none; }
}

/* -- demo: pocket -- */
/* pocket: three Macs, a relay and a phone. Wires are one SVG drawn from the real positions of the
   parts (the script redraws them on resize); packets are small HTML boxes moved with transforms.
   Narrow: Macs in a row, the relay and the phone below. Wide (540px and up): Macs, relay, phone across. */
[data-demo="pocket"] .demo-live { container-type: inline-size; }
[data-demo="pocket"] .pk-stage {
  position: relative; width: 100%; max-width: 660px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 48px;
  padding: 4px 0 6px;
}
[data-demo="pocket"] .pk-wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
[data-demo="pocket"] .pk-macs, [data-demo="pocket"] .pk-relay, [data-demo="pocket"] .pk-device { position: relative; z-index: 1; }

/* the wires */
[data-demo="pocket"] .pk-wire { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 6; opacity: .9; transition: opacity .3s linear; }
[data-demo="pocket"] .pk-wire.on { stroke: var(--accent); stroke-width: 3; stroke-dasharray: none; filter: var(--glow-f); }
[data-demo="pocket"] .pk-wire.cut { stroke: var(--hot); stroke-width: 2.5; stroke-dasharray: 5 7; opacity: .75; }

/* the Macs */
[data-demo="pocket"] .pk-macs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
[data-demo="pocket"] .pk-mac {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  padding: 9px 8px 8px; color: var(--ink); background: var(--panel-2);
  border: 2.5px solid var(--frame); border-radius: 6px; box-shadow: 3px 3px 0 var(--frame);
  font: 700 13.5px/1.1 var(--sans);
  transition: transform .08s linear, box-shadow .08s linear;
}
[data-demo="pocket"] .pk-mac:hover { background: color-mix(in srgb, var(--panel-2) 82%, var(--accent)); }
[data-demo="pocket"] .pk-mac:active, [data-demo="pocket"] .pk-mac[aria-pressed="true"] { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--frame); }
[data-demo="pocket"] .pk-mac[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); border-color: var(--accent); }
[data-demo="pocket"] .pk-lap { display: block; width: min(100%, 92px); }
[data-demo="pocket"] .pk-scr {
  position: relative; display: block; width: 84%; margin: 0 auto; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--panel-dark); border: 2.5px solid var(--frame); border-bottom-width: 1.5px; border-radius: 5px 5px 1px 1px;
}
[data-demo="pocket"] .pk-base { display: block; height: 6px; margin-top: -1px; background: var(--frame); border-radius: 1px 1px 4px 4px; }
[data-demo="pocket"] .pk-mini { position: absolute; left: 6px; right: 6px; bottom: 5px; display: flex; flex-direction: column; gap: 3px; }
[data-demo="pocket"] .pk-mini i { display: block; height: 3px; border-radius: 2px; background: var(--ink-dark); opacity: .45; }
[data-demo="pocket"] .pk-mini i[data-k="tool"] { background: var(--accent); opacity: .9; }
[data-demo="pocket"] .pk-mini i[data-k="ok"] { background: var(--teal); opacity: .9; }
[data-demo="pocket"] .pk-mini i[data-k="ask"] { background: var(--hot); opacity: 1; }
[data-demo="pocket"] .pk-mini i[data-k="done"] { background: var(--gold); opacity: 1; }
[data-demo="pocket"] .pk-mini i.new { animation: pk-in .25s ease-out 1; }
[data-demo="pocket"] .pk-mac.is-busy .pk-scr { border-color: var(--accent); }
[data-demo="pocket"] .pk-mac.is-busy .pk-scr::after {
  content: ""; position: absolute; right: 6px; bottom: 5px; width: 5px; height: 6px; background: var(--accent);
}
[data-demo="pocket"] .pk-name { white-space: nowrap; }
[data-demo="pocket"] .pk-flag {
  position: absolute; right: -9px; top: -10px; display: grid; place-items: center; width: 24px; height: 24px;
  font: 800 14px/1 var(--sans); color: var(--panel-2); background: var(--hot);
  border: 2px solid var(--frame); border-radius: 50%;
}
[data-demo="pocket"] .pk-flag.pop { animation: pk-pop .45s cubic-bezier(.2, 1.8, .4, 1) 1; }
@keyframes pk-pop { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: none; } }
@keyframes pk-in { 0% { opacity: 0; transform: translateY(4px); } 100% { transform: none; } }

/* the relay, and the lock on its line to the phone */
[data-demo="pocket"] .pk-relay { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; }
[data-demo="pocket"] .pk-tower { display: block; width: 64px; height: 56px; filter: var(--glow-f); }
[data-demo="pocket"] .pk-relay.pass .pk-tower { animation: pk-pass .3s ease-out 1; }
@keyframes pk-pass { 0% { transform: scale(1.12); } 100% { transform: none; } }
[data-demo="pocket"] .pk-r-body { fill: var(--panel-2); stroke: var(--frame); stroke-width: 2.5; }
[data-demo="pocket"] .pk-r-slot { fill: none; stroke: var(--ink-2); stroke-width: 2.5; stroke-linecap: round; }
[data-demo="pocket"] .pk-r-wave { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
[data-demo="pocket"] .pk-r-led { fill: var(--teal); }
[data-demo="pocket"] .pk-relay-name { font: 700 11.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); background: var(--panel); padding: 0 4px; }
[data-demo="pocket"] .pk-lock {
  position: absolute; left: 0; top: 0; z-index: 2; display: grid; place-items: center;
  width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: var(--panel-2); border: 2px solid var(--frame); box-shadow: 2px 2px 0 var(--frame);
}
[data-demo="pocket"] .pk-lock svg { width: 16px; height: 18px; }
[data-demo="pocket"] .pk-shackle { fill: none; stroke: var(--frame); stroke-width: 2.4; stroke-linecap: round; }
[data-demo="pocket"] .pk-body { fill: var(--gold); stroke: var(--frame); stroke-width: 2; }
[data-demo="pocket"] .pk-hole { fill: var(--frame); }
[data-demo="pocket"] .pk-lock.is-cut { border-color: var(--hot); }

/* packets: sealed boxes; the relay passes them on without opening them */
[data-demo="pocket"] .pk-pkt {
  position: absolute; left: 0; top: 0; z-index: 3; width: 12px; height: 10px; margin: -5px 0 0 -6px;
  border: 2px solid var(--frame); border-radius: 2px; pointer-events: none;
  background: repeating-linear-gradient(45deg, var(--accent) 0 2px, var(--panel-2) 2px 4px);
  will-change: transform, opacity;
}

/* the phone */
[data-demo="pocket"] .pk-device { position: relative; }
[data-demo="pocket"] .pk-phone { width: 172px; }
[data-demo="pocket"] .pk-phone.buzz { animation: pk-buzz .42s ease-in-out 1; }
@keyframes pk-buzz { 0%, 100% { transform: none; } 20% { transform: rotate(-3deg); } 40% { transform: rotate(2.5deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(1deg); } }
[data-demo="pocket"] .pk-app { position: absolute; inset: 0; display: flex; flex-direction: column; }
[data-demo="pocket"] .pk-top {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 30px; padding: 0 10px;
  font: 700 12px/1 var(--sans); color: var(--ink); border-bottom: 1.5px solid var(--rule);
}
[data-demo="pocket"] .pk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
[data-demo="pocket"] .pk-app.is-live .pk-dot { background: var(--hot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot) 25%, transparent); }
[data-demo="pocket"] .pk-feed { position: relative; flex: 1 1 auto; overflow: hidden; }
[data-demo="pocket"] .pk-roll { position: absolute; left: 9px; right: 9px; bottom: 6px; display: flex; flex-direction: column; gap: 5px; transition: transform .22s var(--ease); }
[data-demo="pocket"] .pk-roll.swap { animation: pk-swap .3s linear 1; }
@keyframes pk-swap { 0% { opacity: 0; } 100% { opacity: 1; } }
[data-demo="pocket"] .pk-ln { display: flex; align-items: center; gap: 5px; height: 8px; }
[data-demo="pocket"] .pk-ln b { display: block; height: 6px; border-radius: 3px; background: var(--ink-2); opacity: .45; }
[data-demo="pocket"] .pk-ln i { display: none; flex: none; width: 8px; height: 8px; border-radius: 2px; }
[data-demo="pocket"] .pk-ln[data-k="tool"] i { display: block; background: var(--accent); }
[data-demo="pocket"] .pk-ln[data-k="tool"] b { background: var(--accent); opacity: .55; }
[data-demo="pocket"] .pk-ln[data-k="ok"] i { display: block; width: 7px; height: 4px; margin: 0 1px 2px; border: solid var(--teal); border-width: 0 0 2px 2px; border-radius: 0; transform: rotate(-45deg); }
[data-demo="pocket"] .pk-ln[data-k="ok"] b { background: var(--teal); opacity: .6; }
[data-demo="pocket"] .pk-ln[data-k="ask"] i { display: block; background: var(--hot); border-radius: 50%; }
[data-demo="pocket"] .pk-ln[data-k="ask"] b { background: var(--hot); opacity: .8; }
[data-demo="pocket"] .pk-ln[data-k="done"] i { display: block; background: var(--gold); border-radius: 50%; }
[data-demo="pocket"] .pk-ln[data-k="done"] b { background: var(--gold); opacity: .85; }
[data-demo="pocket"] .pk-ln.new { animation: pk-in .3s ease-out 1; }
[data-demo="pocket"] .pk-hint {
  position: absolute; left: 10px; right: 10px; top: 42%; transform: translateY(-50%);
  font: 600 12px/1.4 var(--sans); color: var(--ink-2); text-align: center;
}
[data-demo="pocket"] .pk-e2e { flex: none; display: flex; align-items: center; justify-content: center; gap: 4px; height: 22px; font: 600 9px/1 var(--sans); letter-spacing: .03em; color: var(--ink-2); border-top: 1.5px solid var(--rule); }
[data-demo="pocket"] .pk-e2e svg { width: 8px; height: 9px; }
[data-demo="pocket"] .pk-e2e .pk-shackle { stroke-width: 3; }
[data-demo="pocket"] .pk-gone { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; text-align: center; background: var(--panel-2); }
[data-demo="pocket"] .pk-gone svg { width: 34px; height: 38px; margin-bottom: 4px; }
[data-demo="pocket"] .pk-gone .pk-body { fill: var(--panel-2); stroke: var(--hot); }
[data-demo="pocket"] .pk-gone .pk-shackle { stroke: var(--hot); }
[data-demo="pocket"] .pk-gone .pk-hole { fill: var(--hot); }
[data-demo="pocket"] .pk-gone-t { font: 400 20px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
[data-demo="pocket"] .pk-gone-s { font: 600 11px/1.35 var(--sans); color: var(--ink-2); }
[data-demo="pocket"] .pk-gone.enter { animation: pk-gone .35s cubic-bezier(.2, 1.3, .4, 1) 1; }
@keyframes pk-gone { 0% { opacity: 0; transform: scale(.92); } 100% { opacity: 1; transform: none; } }

/* the push banner drops in from the top of the screen */
[data-demo="pocket"] .pk-push {
  position: absolute; left: 6px; right: 6px; top: 6px; z-index: 4;
  display: flex; align-items: center; gap: 7px; padding: 7px 8px;
  background: var(--panel); border: 2px solid var(--frame); border-radius: 10px; box-shadow: 0 3px 0 var(--frame);
  opacity: 0; transform: translateY(-120%); visibility: hidden;
  transition: opacity .2s linear, transform .25s ease-in, visibility 0s linear .25s;
}
[data-demo="pocket"] .pk-push.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity .15s linear, transform .42s cubic-bezier(.2, 1.5, .4, 1), visibility 0s; }
[data-demo="pocket"] .pk-push-icon { position: relative; flex: none; width: 18px; height: 18px; border-radius: 5px; background: var(--accent); }
[data-demo="pocket"] .pk-push-icon::after { content: ""; position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--hot); border: 1.5px solid var(--panel); }
[data-demo="pocket"] .pk-push-text { min-width: 0; font: 600 10px/1.25 var(--sans); color: var(--ink-2); }
[data-demo="pocket"] .pk-push-mac { display: block; font: 700 11px/1.2 var(--sans); color: var(--ink); }

/* the burst when a push arrives */
[data-demo="pocket"] .pk-fx { position: absolute; left: -54px; top: 0; z-index: 5; width: 84px; height: 84px; pointer-events: none; opacity: 0; transform: scale(.3) rotate(-20deg); }
[data-demo="pocket"] .pk-fx .sfx-wrap { width: 84px; height: 84px; margin: 0; }
[data-demo="pocket"] .pk-fx .sfx { font-size: 1.1rem; }
[data-demo="pocket"] .pk-fx.is-pop { opacity: 1; transform: none; transition: opacity .1s linear, transform .35s cubic-bezier(.2, 1.8, .4, 1); }
[data-demo="pocket"] .pk-fx.is-out { opacity: 0; transform: scale(1.15); transition: opacity .3s linear, transform .3s linear; }

[data-demo="pocket"] .pk-controls { justify-content: center; }
[data-demo="pocket"] .pk-note { font: 400 12.5px/1.45 var(--sans); color: var(--ink-2); }

/* wide: Macs on the left, the relay in the middle, the phone on the right */
@container (min-width: 540px) {
  [data-demo="pocket"] .pk-stage { grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; justify-items: stretch; column-gap: 0; row-gap: 0; }
  [data-demo="pocket"] .pk-macs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  [data-demo="pocket"] .pk-relay { justify-self: center; }
  [data-demo="pocket"] .pk-device { margin-right: 6px; }
  [data-demo="pocket"] .pk-controls { justify-content: flex-end; }
}
@container (max-width: 300px) {
  [data-demo="pocket"] .pk-mac { padding: 7px 4px 6px; font-size: 12.5px; }
  [data-demo="pocket"] .pk-macs { gap: 8px; }
}
@media (forced-colors: active) {
  [data-demo="pocket"] .pk-pkt, [data-demo="pocket"] .pk-ln b, [data-demo="pocket"] .pk-mini i { forced-color-adjust: none; background: CanvasText; }
}

/* -- demo: snooker -- */
/* snooker - the Off the clock table: cloth from --teal, cushions and rails from --frame, brass pockets
   from --gold. The cloth is teal by day and a dark lit teal by night. */
[data-demo="snooker"] {
  --sn-cloth: var(--teal);
  --sn-cush: color-mix(in srgb, var(--teal) 62%, var(--panel-dark));
  --sn-chalk: color-mix(in srgb, var(--bubble) 42%, transparent);
}
:root[data-theme="dark"] [data-demo="snooker"] {
  --sn-cloth: color-mix(in srgb, var(--teal) 24%, var(--panel-dark));
  --sn-cush: color-mix(in srgb, var(--teal) 40%, var(--panel-dark));
  --sn-chalk: color-mix(in srgb, var(--teal) 50%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-demo="snooker"] {
    --sn-cloth: color-mix(in srgb, var(--teal) 24%, var(--panel-dark));
    --sn-cush: color-mix(in srgb, var(--teal) 40%, var(--panel-dark));
    --sn-chalk: color-mix(in srgb, var(--teal) 50%, transparent);
  }
}

/* the scoreboard sits beside the title when the card is wide enough */
[data-demo="snooker"] .sn-score { gap: 18px; }
[data-demo="snooker"] .sn-score .d-count b { font-size: 30px; min-width: .6em; display: inline-block; text-align: right; }
@media (min-width: 900px), (min-width: 390px) and (max-width: 719px) {
  [data-demo="snooker"] .sn-score { position: absolute; top: 10px; right: 16px; }
}

/* the table */
[data-demo="snooker"] .sn-table {
  position: relative; container-type: inline-size;
  touch-action: none; cursor: crosshair;
  -webkit-user-select: none; user-select: none;
  border-radius: 10px;
}
[data-demo="snooker"] .sn-table.is-drag { cursor: grabbing; }
[data-demo="snooker"] .sn-table.is-busy { cursor: progress; }
[data-demo="snooker"] .sn-table:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
[data-demo="snooker"] .sn-svg { display: block; width: 100%; height: auto; overflow: hidden; border-radius: 10px; }
[data-demo="snooker"] .sn-rail { fill: var(--frame); }
[data-demo="snooker"] .sn-rail-line { fill: none; stroke: var(--panel-2); stroke-opacity: .16; stroke-width: 2; }
[data-demo="snooker"] .sn-sights circle { fill: var(--gold); }
[data-demo="snooker"] .sn-cush { fill: var(--sn-cush); }
[data-demo="snooker"] .sn-cloth { fill: var(--sn-cloth); }
[data-demo="snooker"] .sn-dot { fill: var(--bubble); opacity: .2; }
[data-demo="snooker"] .sn-m1 { stop-color: var(--bubble); stop-opacity: 1; }
[data-demo="snooker"] .sn-m0 { stop-color: var(--bubble); stop-opacity: 0; }
[data-demo="snooker"] .sn-marks path { fill: none; stroke: var(--sn-chalk); stroke-width: 2.5; }
[data-demo="snooker"] .sn-spot { fill: var(--sn-chalk); }
[data-demo="snooker"] .sn-pockets circle { fill: var(--panel-dark); stroke: var(--gold); stroke-width: 5; }

/* balls: ink outlines, a soft shadow and a shine */
[data-demo="snooker"] .sn-sh { fill: var(--panel-dark); opacity: .4; }
[data-demo="snooker"] .sn-b { stroke: var(--frame); stroke-width: 3; }
[data-demo="snooker"] .sn-red .sn-b { fill: var(--brick); }
[data-demo="snooker"] .sn-col .sn-b { fill: var(--pop); }
[data-demo="snooker"] .sn-white .sn-b { fill: var(--bubble); }
[data-demo="snooker"] .sn-gl { fill: var(--bubble); opacity: .75; }
[data-demo="snooker"] .sn-white .sn-gl { fill: var(--panel-dark); opacity: .12; }

/* the aim: a dotted line to the first ball or cushion, the ghost ball, and where the object ball goes */
[data-demo="snooker"] .sn-aim { fill: none; stroke: var(--bubble); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 11; opacity: .9; }
[data-demo="snooker"] .sn-ghost { fill: none; stroke: var(--bubble); stroke-width: 2.5; stroke-dasharray: 5 5; opacity: .75; }
[data-demo="snooker"] .sn-obj { fill: none; stroke: var(--pop); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 10 8; opacity: .95; }
[data-demo="snooker"] .sn-trace { fill: none; stroke: var(--bubble); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 9; opacity: .6; }
[data-demo="snooker"] .sn-guide.is-off, [data-demo="snooker"] .sn-cue.is-off { display: none; }

/* the cue: ash shaft, brick butt, a chalked tip */
[data-demo="snooker"] .sn-shaft { fill: var(--gold); stroke: var(--frame); stroke-width: 2; stroke-linejoin: round; }
[data-demo="snooker"] .sn-butt { fill: var(--brick); stroke: var(--frame); stroke-width: 2; stroke-linejoin: round; }
[data-demo="snooker"] .sn-tip { fill: var(--accent); stroke: var(--frame); stroke-width: 2; stroke-linejoin: round; }

/* bursts: a small one on the pocket, a big one when the table is clear */
[data-demo="snooker"] .sn-table > .sfx-wrap.sn-pop.sn-pop,
[data-demo="snooker"] .sn-table > .sfx-wrap.sn-clear.sn-clear {
  position: absolute; margin: 0; z-index: 2;
  opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(16deg);
  transition: transform .42s cubic-bezier(.2, 1.8, .4, 1), opacity .12s linear;
}
[data-demo="snooker"] .sn-table > .sfx-wrap.sn-pop.sn-pop { left: 50%; top: 50%; width: 76px; height: 76px; width: 15cqw; height: 15cqw; min-width: 48px; min-height: 48px; max-width: 84px; max-height: 84px; }
[data-demo="snooker"] .sn-table > .sfx-wrap.sn-clear.sn-clear { left: 50%; top: 50%; width: 170px; height: 170px; width: 34cqw; height: 34cqw; min-width: 104px; min-height: 104px; max-width: 180px; max-height: 180px; }
[data-demo="snooker"] .sn-table > .sfx-wrap.sn-pop.sn-pop.is-on,
[data-demo="snooker"] .sn-table > .sfx-wrap.sn-clear.sn-clear.is-on { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg); }
[data-demo="snooker"] .sn-pop .sfx { font-size: 1.05rem; font-size: clamp(.8rem, 3.6cqw, 1.15rem); }
[data-demo="snooker"] .sn-clear .sfx { font-size: 2rem; font-size: clamp(1.25rem, 7.4cqw, 2.3rem); }

/* the first contact of a shot: manga lettering that pops and fades */
[data-demo="snooker"] .sn-clack {
  position: absolute; left: 50%; top: 50%; z-index: 1; pointer-events: none;
  font: 400 15px/1 var(--display); font-size: clamp(11px, 3.6cqw, 19px); letter-spacing: .04em; text-transform: uppercase;
  color: var(--pop); opacity: 0;
  text-shadow: 2px 2px 0 var(--frame), -1px -1px 0 var(--frame), 1px -1px 0 var(--frame), -1px 1px 0 var(--frame);
  transform: translate(-50%, -150%) rotate(-8deg);
}
[data-demo="snooker"] .sn-clack.is-on { animation: sn-clack .62s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes sn-clack {
  0% { opacity: 0; transform: translate(-50%, -120%) rotate(-8deg) scale(.5); }
  25% { opacity: 1; transform: translate(-50%, -170%) rotate(-8deg) scale(1.15); }
  70% { opacity: 1; transform: translate(-50%, -185%) rotate(-8deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -200%) rotate(-8deg) scale(1); }
}

/* power meter and controls */
[data-demo="snooker"] .sn-controls { justify-content: space-between; }
[data-demo="snooker"] .sn-power { display: flex; align-items: center; gap: 10px; flex: 1 1 180px; min-width: 0; }
[data-demo="snooker"] .sn-meter {
  position: relative; flex: 1 1 auto; max-width: 240px; min-width: 70px; height: 16px;
  border: 2.5px solid var(--frame); border-radius: 3px; background: var(--panel-2); overflow: hidden;
  box-shadow: 2px 2px 0 var(--frame);
}
[data-demo="snooker"] .sn-meter i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--teal), var(--gold) 62%, var(--hot));
  clip-path: inset(0 calc(100% - var(--p, 60%)) 0 0);
}
[data-demo="snooker"] .sn-meter::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1.5px), var(--frame) calc(10% - 1.5px) 10%);
  opacity: .28;
}
[data-demo="snooker"] .sn-pct { min-width: 1.6em; font-weight: 700; color: var(--ink); }
[data-demo="snooker"] .sn-help { font: 400 13px/1.45 var(--sans); color: var(--ink-2); }

/* numbers pop when they change */
[data-demo="snooker"] .d-count b.is-bump { animation: sn-bump .32s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes sn-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  [data-demo="snooker"] .sn-table > .sfx-wrap.sn-pop.sn-pop,
  [data-demo="snooker"] .sn-table > .sfx-wrap.sn-clear.sn-clear { transition: none; }
  [data-demo="snooker"] .d-count b.is-bump, [data-demo="snooker"] .sn-clack.is-on { animation: none; }
}

/* -- demo: chess -- */
/* chess.css - the Off the clock chess puzzle (demo-chess.js). A manga board: a heavy frame,
   screentone on the dark squares, pieces drawn as SVG that stay light and dark in both looks. */
[data-demo="chess"] .demo-live { container-type: inline-size; flex: 1 1 auto; justify-content: center; }
[data-demo="chess"] .cb-task { display: flex; align-items: center; gap: 10px; font: 400 16px/1.45 var(--serif); color: var(--ink); }
[data-demo="chess"] .cb-task b { font: 700 15px/1.45 var(--sans); }
[data-demo="chess"] .cb-turn-icon {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  background: color-mix(in srgb, var(--accent) 22%, var(--panel-2));
  border: 2.5px solid var(--frame); border-radius: 50%;
}
[data-demo="chess"] .cb-turn-icon svg { display: block; width: 28px; height: 28px; }

[data-demo="chess"] .cb-play { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
[data-demo="chess"] .cb-frame {
  width: 100%; max-width: 400px;
  background: var(--panel-2); border: 3px solid var(--frame); box-shadow: 4px 4px 0 var(--frame);
}
[data-demo="chess"] .cb-stage { position: relative; aspect-ratio: 1; }
[data-demo="chess"] .cb-board { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); }

/* the squares: real buttons, one per square */
[data-demo="chess"] .cb-sq {
  position: relative; min-width: 0; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; color: var(--ink-2);
  background: var(--panel-2); cursor: default; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
[data-demo="chess"] .cb-sq.is-dark {
  background-color: color-mix(in srgb, var(--accent) 24%, var(--panel-2));
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 34%, transparent) .9px, transparent 1.3px);
  background-size: 5px 5px;
}
[data-demo="chess"] .cb-sq.has-w { cursor: grab; touch-action: none; }
[data-demo="chess"] .cb-sq.is-dot, [data-demo="chess"] .cb-sq.is-cap { cursor: pointer; }
[data-demo="chess"] .cb-sq.is-last { box-shadow: inset 0 0 0 3px var(--pop); }
[data-demo="chess"] .cb-sq.is-sel, [data-demo="chess"] .cb-sq.is-dark.is-sel { background-color: color-mix(in srgb, var(--pop) 70%, var(--panel-2)); }
[data-demo="chess"] .cb-sq.is-check { background-image: radial-gradient(closest-side, var(--hot) 0, color-mix(in srgb, var(--hot) 55%, transparent) 60%, transparent 100%); box-shadow: inset 0 0 0 3px var(--hot); }
[data-demo="chess"] .cb-sq.is-hint { box-shadow: none; outline: 3px dashed var(--teal); outline-offset: -6px; }
[data-demo="chess"] .cb-sq:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
[data-demo="chess"] .cb-sq:hover { color: var(--ink-2); }
/* legal moves: a dot on an empty square, a ring around a piece you can take */
[data-demo="chess"] .cb-sq.is-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%;
  margin: -15% 0 0 -15%; border-radius: 50%;
  background: var(--frame); opacity: .5;
}
[data-demo="chess"] .cb-sq.is-cap::after {
  content: ""; position: absolute; inset: 4%; border-radius: 50%;
  border: 3px solid var(--frame); opacity: .55;
}
[data-demo="chess"] .cb-rank, [data-demo="chess"] .cb-file {
  position: absolute; font: 700 10px/1 var(--mono); color: var(--ink); pointer-events: none;
}
[data-demo="chess"] .cb-rank { left: 3px; top: 3px; }
[data-demo="chess"] .cb-file { right: 3px; bottom: 2px; }

/* the pieces: one layer over the board, moved by transform only */
[data-demo="chess"] .cb-pieces { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
/* forced colours: a game board's colours carry meaning, so the board keeps its own */
@media (forced-colors: active) { [data-demo="chess"] .cb-board { forced-color-adjust: none; } }
[data-demo="chess"] .cb-pc { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; transition: opacity .2s linear; }
[data-demo="chess"] .cb-pc svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 86%; transition: transform .5s cubic-bezier(.5, -.3, .4, 1.3); }
[data-demo="chess"] .cb-pc.is-moving { z-index: 2; }
[data-demo="chess"] .cb-pc.is-drag { z-index: 3; filter: drop-shadow(3px 5px 0 color-mix(in srgb, var(--frame) 40%, transparent)); }
[data-demo="chess"] .cb-pc.is-taken { opacity: .2; }
[data-demo="chess"] .cb-pc.is-down svg { transform-origin: 50% 50%; transform: translateY(10%) rotate(-90deg) scale(.84); }
[data-demo="chess"] .is-w { --pc-fill: var(--ink-dark); --pc-edge: var(--frame); --pc-line: var(--panel-dark); }
[data-demo="chess"] .is-b { --pc-fill: var(--panel-dark); --pc-edge: var(--frame); --pc-line: var(--ink-dark); }
[data-demo="chess"] .pc-f { fill: var(--pc-fill); stroke: var(--pc-edge); stroke-width: 2.1; stroke-linejoin: round; }
[data-demo="chess"] .pc-d { fill: none; stroke: var(--pc-line); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
[data-demo="chess"] .pc-e { fill: var(--pc-line); }

/* the burst on checkmate, over the empty middle of the board; it beats the page's reveal rules for bursts */
[data-demo="chess"] .cb-frame .cb-stage > .sfx-wrap.cb-burst {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  width: 136px; height: 136px; margin: -68px 0 0 -68px;
  opacity: 1; transform: none; transition: none;
}
[data-demo="chess"] .cb-burst .sfx { font-size: 1.15rem; }

[data-demo="chess"] .cb-side { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
[data-demo="chess"] .cb-btns { display: flex; flex-wrap: wrap; gap: 10px; }
[data-demo="chess"] .cb-tries { min-height: 1.45em; color: var(--ink-2); }
[data-demo="chess"] .d-out { min-height: 2.9em; }

/* side by side once the card has room */
@container (min-width: 470px) {
  [data-demo="chess"] .cb-play { grid-template-columns: minmax(0, 400px) 104px; }
  [data-demo="chess"] .cb-side { flex-direction: column; align-items: stretch; }
  [data-demo="chess"] .cb-btns { flex-direction: column; }
}

/* -- demo: foosball -- */
/* foosball - the Off the clock table: a cobalt field by day (lit dark by night), rails from --frame,
   a steel rod with three brick men, and a goal with a net. */
[data-demo="foosball"] {
  --fb-field: color-mix(in srgb, var(--accent) 80%, var(--panel-dark));
  --fb-chalk: color-mix(in srgb, var(--bubble) 46%, transparent);
}
:root[data-theme="dark"] [data-demo="foosball"] {
  --fb-field: color-mix(in srgb, var(--accent) 18%, var(--panel-dark));
  --fb-chalk: color-mix(in srgb, var(--accent) 48%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-demo="foosball"] {
    --fb-field: color-mix(in srgb, var(--accent) 18%, var(--panel-dark));
    --fb-chalk: color-mix(in srgb, var(--accent) 48%, transparent);
  }
}

/* the scoreboard sits beside the title when the card is wide enough */
[data-demo="foosball"] .fb-score { gap: 18px; }
[data-demo="foosball"] .fb-score .d-count b { font-size: 30px; min-width: .6em; display: inline-block; text-align: right; }
@media (min-width: 900px), (min-width: 390px) and (max-width: 719px) {
  [data-demo="foosball"] .fb-score { position: absolute; top: 10px; right: 16px; }
}

/* the table */
[data-demo="foosball"] .fb-table {
  position: relative; container-type: inline-size;
  touch-action: manipulation; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
[data-demo="foosball"] .fb-svg { display: block; width: 100%; height: auto; overflow: hidden; }
[data-demo="foosball"] .fb-rail { fill: var(--frame); }
[data-demo="foosball"] .fb-field { fill: var(--fb-field); }
[data-demo="foosball"] .fb-stripes rect { fill: var(--bubble); opacity: .045; }
[data-demo="foosball"] .fb-lines path, [data-demo="foosball"] .fb-lines circle { fill: none; stroke: var(--fb-chalk); stroke-width: 4; }
[data-demo="foosball"] .fb-lines .fb-spot { fill: var(--fb-chalk); stroke: none; }
[data-demo="foosball"] .fb-zone { fill: var(--bubble); opacity: .06; transition: opacity .12s linear; }
[data-demo="foosball"] .fb-svg.is-ready .fb-zone { opacity: .16; }
[data-demo="foosball"] .fb-goal { fill: var(--panel-dark); }
[data-demo="foosball"] .fb-meshline { fill: none; stroke: var(--bubble); stroke-width: 1.6; opacity: .4; }
[data-demo="foosball"] .fb-net { transform-box: fill-box; transform-origin: 0 50%; }
[data-demo="foosball"] .fb-post { fill: var(--bubble); stroke: var(--frame); stroke-width: 3; }
[data-demo="foosball"] .fb-serve { fill: var(--panel-dark); stroke: var(--gold); stroke-width: 3; }
[data-demo="foosball"] .fb-f1 { stop-color: var(--panel); stop-opacity: 1; }
[data-demo="foosball"] .fb-f0 { stop-color: var(--panel); stop-opacity: 0; }

/* the ball, its speed streak, and the path drawn with reduced motion */
[data-demo="foosball"] .fb-sh { fill: var(--panel-dark); opacity: .4; }
[data-demo="foosball"] .fb-b { fill: var(--bubble); stroke: var(--frame); stroke-width: 3.5; }
[data-demo="foosball"] .fb-mark { fill: var(--panel-dark); opacity: .5; }
[data-demo="foosball"] .fb-gl { fill: var(--bubble); opacity: .9; }
[data-demo="foosball"] .fb-ball.is-gone { display: none; }
[data-demo="foosball"] .fb-ball-in { transform-origin: 0 0; }
[data-demo="foosball"] .fb-ball-in.is-pop { animation: fb-pop .42s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes fb-pop { 0% { transform: scale(.15); opacity: .2; } 55% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }
[data-demo="foosball"] .fb-streak { fill: none; stroke: var(--bubble); stroke-width: 26; stroke-linecap: round; opacity: .28; }
[data-demo="foosball"] .fb-trace { fill: none; stroke: var(--bubble); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 12; opacity: .7; }

/* the rod and its three men */
[data-demo="foosball"] .fb-rod { fill: var(--ink-2); stroke: var(--frame); stroke-width: 2; }
[data-demo="foosball"] .fb-stop { fill: var(--frame); }
[data-demo="foosball"] .fb-handle { fill: var(--gold); stroke: var(--frame); stroke-width: 3; }
[data-demo="foosball"] .fb-body { fill: var(--hot); stroke: var(--frame); stroke-width: 3.5; transition: fill .1s linear; }
[data-demo="foosball"] .fb-legs { fill: color-mix(in srgb, var(--hot) 75%, var(--panel-dark)); stroke: var(--frame); stroke-width: 3; }
[data-demo="foosball"] .fb-head { fill: var(--panel-dark); stroke: var(--frame); stroke-width: 3; }
[data-demo="foosball"] .fb-man.is-on .fb-body { fill: var(--pop); }
[data-demo="foosball"] .fb-man.is-on { filter: var(--glow-f); }

/* bursts: Goal over the box (and the table jolts, the net billows), Clang on the post */
[data-demo="foosball"] .fb-table > .sfx-wrap.fb-burst.fb-burst,
[data-demo="foosball"] .fb-table > .sfx-wrap.fb-clang.fb-clang {
  position: absolute; margin: 0; z-index: 2;
  opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(18deg);
  transition: transform .5s cubic-bezier(.2, 1.9, .4, 1), opacity .12s linear;
}
[data-demo="foosball"] .fb-table > .sfx-wrap.fb-burst.fb-burst { left: 76%; top: 50%; width: 180px; height: 180px; width: 36cqw; height: 36cqw; min-width: 108px; min-height: 108px; max-width: 196px; max-height: 196px; }
[data-demo="foosball"] .fb-table > .sfx-wrap.fb-clang.fb-clang { left: 84%; top: 30%; width: 90px; height: 90px; width: 19cqw; height: 19cqw; min-width: 60px; min-height: 60px; max-width: 100px; max-height: 100px; }
[data-demo="foosball"] .fb-table > .sfx-wrap.fb-clang.fb-clang.is-low { top: 70%; }
[data-demo="foosball"] .fb-table > .sfx-wrap.fb-burst.fb-burst.is-on,
[data-demo="foosball"] .fb-table > .sfx-wrap.fb-clang.fb-clang.is-on { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg); }
[data-demo="foosball"] .fb-burst .sfx { font-size: 2.2rem; font-size: clamp(1.35rem, 8cqw, 2.6rem); }
[data-demo="foosball"] .fb-clang .sfx { font-size: 1.1rem; font-size: clamp(.8rem, 4cqw, 1.2rem); }
[data-demo="foosball"] .fb-table.is-goal .fb-svg { animation: fb-jolt .38s cubic-bezier(.3, .7, .4, 1); }
[data-demo="foosball"] .fb-table.is-goal .fb-net { animation: fb-billow .55s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes fb-jolt { 0% { transform: translate(0, 0); } 20% { transform: translate(5px, -3px); } 45% { transform: translate(-4px, 2px); } 70% { transform: translate(2px, -1px); } 100% { transform: translate(0, 0); } }
@keyframes fb-billow { 0% { transform: scaleX(1); } 35% { transform: scaleX(1.35); } 100% { transform: scaleX(1); } }

/* controls */
[data-demo="foosball"] .fb-kick { min-width: 96px; }
[data-demo="foosball"] .fb-kick[aria-disabled="true"] { opacity: .55; box-shadow: 3px 3px 0 var(--frame); transform: none; }
[data-demo="foosball"] .d-btn[data-fb="roll"][aria-disabled="true"] { opacity: .55; }
[data-demo="foosball"] .fb-help { font: 400 13px/1.45 var(--sans); color: var(--ink-2); }

/* numbers pop when they change */
[data-demo="foosball"] .d-count b.is-bump { animation: fb-bump .32s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes fb-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  [data-demo="foosball"] .fb-table > .sfx-wrap.fb-burst.fb-burst,
  [data-demo="foosball"] .fb-table > .sfx-wrap.fb-clang.fb-clang { transition: none; }
  [data-demo="foosball"] .fb-table.is-goal .fb-svg, [data-demo="foosball"] .fb-table.is-goal .fb-net,
  [data-demo="foosball"] .fb-ball-in.is-pop, [data-demo="foosball"] .d-count b.is-bump { animation: none; }
}

/* -- demo: series -- */
/* series.css - the Off the clock TV and remote (demo-series.js). The screen is always a night
   scene, so it draws with the tokens that stay dark (--panel-dark) and light (--ink-dark, --pop,
   --bubble) in both looks. Every layer's resting style is the end of the opening. */
[data-demo="series"] .demo-live { container-type: inline-size; flex: 1 1 auto; justify-content: center; }
[data-demo="series"] .tv-set { display: flex; align-items: center; gap: 16px; }
[data-demo="series"] .tv { position: relative; flex: 1 1 auto; min-width: 0; max-width: 380px; display: flex; flex-direction: column; align-items: center; }

/* the set: rabbit ears, a framed body, a curved screen, knobs and a grille, two feet */
[data-demo="series"] .tv-ears { display: block; width: 44%; height: auto; margin-bottom: -3px; overflow: visible; }
[data-demo="series"] .tv-ear { fill: none; stroke: var(--frame); stroke-width: 3; stroke-linecap: round; }
[data-demo="series"] .tv-tip { fill: var(--pop); stroke: var(--frame); stroke-width: 2.5; }
[data-demo="series"] .tv-base { fill: var(--frame); }
[data-demo="series"] .tv-body {
  align-self: stretch; display: flex; gap: 10px; padding: 11px;
  background-color: var(--panel-2);
  background-image: radial-gradient(var(--tone) 1.1px, transparent 1.4px); background-size: 6px 6px;
  border: 3px solid var(--frame); border-radius: 18px; box-shadow: 4px 4px 0 var(--frame);
}
[data-demo="series"] .tv-screen {
  position: relative; flex: 1 1 auto; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden;
  container-type: inline-size;
  background: var(--panel-dark); border: 3px solid var(--frame); border-radius: 22px / 26px;
  isolation: isolate; cursor: pointer;
}
[data-demo="series"] .tv-side { flex: none; width: 14%; min-width: 30px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 2px; }
[data-demo="series"] .tv-knob {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: var(--panel-2); border: 2.5px solid var(--frame); box-shadow: 2px 2px 0 var(--frame);
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
[data-demo="series"] .tv-knob::after { content: ""; position: absolute; left: 50%; top: 10%; width: 3px; height: 36%; margin-left: -1.5px; border-radius: 2px; background: var(--frame); }
[data-demo="series"] .tv-knob.small { width: 70%; }
[data-demo="series"] .tv-grille { flex: 1 1 auto; width: 76%; min-height: 20px; background: repeating-linear-gradient(180deg, var(--frame) 0 2px, transparent 2px 6px); opacity: .7; }
[data-demo="series"] .tv-feet { position: relative; align-self: stretch; height: 10px; margin: 0 16%; }
[data-demo="series"] .tv-feet::before, [data-demo="series"] .tv-feet::after { content: ""; position: absolute; top: 0; width: 22px; height: 9px; background: var(--frame); border-radius: 0 0 5px 5px; }
[data-demo="series"] .tv-feet::before { left: 0; }
[data-demo="series"] .tv-feet::after { right: 0; }

/* the screen layers */
[data-demo="series"] .tv-layer { position: absolute; inset: 0; pointer-events: none; }
[data-demo="series"] .tv-layer > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; }
[data-demo="series"] .tv-sky { --h: color-mix(in srgb, var(--accent) 50%, var(--panel-dark)); background: linear-gradient(180deg, var(--panel-dark) 0%, var(--panel-dark) 28%, var(--h) 100%); }
[data-demo="series"] [data-sky="b"] .tv-sky { --h: color-mix(in srgb, var(--hot) 52%, var(--panel-dark)); }
[data-demo="series"] [data-sky="c"] .tv-sky { --h: color-mix(in srgb, var(--pop) 34%, var(--panel-dark)); }
[data-demo="series"] [data-sky="d"] .tv-sky { --h: color-mix(in srgb, var(--accent) 24%, var(--panel-dark)); }
[data-demo="series"] [data-sky="dawn"] .tv-sky { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, var(--panel-dark)) 0%, color-mix(in srgb, var(--hot) 45%, var(--panel-dark)) 60%, color-mix(in srgb, var(--pop) 75%, var(--panel-dark)) 100%); }
[data-demo="series"] .tv-star { fill: var(--ink-dark); }
[data-demo="series"] .tv-spark { fill: var(--pop); }
[data-demo="series"] .tv-halo { fill: var(--pop); opacity: .07; }
[data-demo="series"] .tv-luna { fill: var(--bubble); }
[data-demo="series"] .tv-luna.gold { fill: var(--pop); }
[data-demo="series"] .tv-sun { fill: var(--pop); }
[data-demo="series"] .tv-city.far .tv-bld { fill: color-mix(in srgb, var(--panel-dark) 70%, var(--accent)); }
[data-demo="series"] .tv-city.near .tv-bld { fill: var(--panel-dark); stroke: color-mix(in srgb, var(--ink-dark) 40%, transparent); stroke-width: .5; stroke-linejoin: round; }
[data-demo="series"] .tv-win { fill: var(--pop); }
[data-demo="series"] [data-sky="dawn"] .tv-city.far .tv-bld { fill: color-mix(in srgb, var(--panel-dark) 62%, var(--hot)); }
[data-demo="series"] .tv-shoot {
  position: absolute; left: 0; top: 0; width: 26%; height: 2px; margin-left: -26%; opacity: 0;
  transform-origin: 100% 50%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ink-dark));
}
/* focus lines behind the title card */
[data-demo="series"] .tv-lines {
  opacity: .4;
  background: repeating-conic-gradient(from 0deg at 50% 58%, color-mix(in srgb, var(--ink-dark) 26%, transparent) 0 1.4deg, transparent 1.4deg 8deg);
  -webkit-mask: radial-gradient(closest-side at 50% 58%, transparent 38%, #000 100%); mask: radial-gradient(closest-side at 50% 58%, transparent 38%, #000 100%);
}
[data-demo="series"] .tv-cardwrap { display: grid; place-items: center; padding: 18% 6% 0; }
[data-demo="series"] .tv-card {
  max-width: 88%; padding: 5px 11px 6px; text-align: center;
  background: var(--pop); color: var(--pop-ink);
  border: 2.5px solid var(--pop-ink); box-shadow: 3px 3px 0 var(--pop-ink);
}
[data-demo="series"] .tv-kicker { font: 700 clamp(8.5px, 3.6cqi, 11px)/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
[data-demo="series"] .tv-title { margin-top: 2px; font: 400 clamp(15px, 8.2cqi, 28px)/1.02 var(--display); letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }
[data-demo="series"] .tv-osd {
  position: absolute; left: 7%; top: 6%;
  font: 700 clamp(8px, 3.4cqi, 11px)/1 var(--mono); letter-spacing: .14em; color: var(--ink-dark); opacity: .85;
}
[data-demo="series"] .tv-off { display: grid; place-items: center; background: var(--panel-dark); transition: opacity .15s linear; }
[data-demo="series"] .tv-off p { font: 700 clamp(9px, 4cqi, 12px)/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--ink-dark) 62%, transparent); }
[data-demo="series"] .tv-screen.is-on .tv-off { opacity: 0; }
[data-demo="series"] .tv-flash { opacity: 0; background: var(--ink-dark); }
/* the glass: a soft reflection and scanlines, always on top */
[data-demo="series"] .tv-glass {
  z-index: 2;
  background:
    radial-gradient(70% 55% at 22% 12%, color-mix(in srgb, var(--ink-dark) 14%, transparent), transparent 70%),
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--panel-dark) 13%, transparent) 0 1px, transparent 1px 3px);
}
/* before the first Play the picture layers stay empty under the off screen */
[data-demo="series"] .tv-screen:not(.is-on) .tv-card, [data-demo="series"] .tv-screen:not(.is-on) .tv-osd { visibility: hidden; }

/* the remote */
[data-demo="series"] .tv-remote {
  flex: none; width: 172px; display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  padding: 14px 11px 16px;
  background: var(--panel-2); border: 3px solid var(--frame); border-radius: 34px 34px 24px 24px; box-shadow: 4px 4px 0 var(--frame);
}
[data-demo="series"] .tv-keys { display: grid; grid-template-columns: repeat(3, 14px); justify-content: center; gap: 8px 12px; padding-top: 4px; }
[data-demo="series"] .tv-keys i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--frame); background: var(--tone); }
[data-demo="series"] .tv-ir { align-self: center; display: grid; place-items: center; width: 46px; height: 14px; border-radius: 7px; background: var(--panel-dark); }
[data-demo="series"] .tv-led { width: 6px; height: 6px; border-radius: 50%; background: var(--hot); opacity: .35; }
[data-demo="series"] .tv-btn { justify-content: flex-start; gap: 7px; padding: 0 10px; }
/* Skip intro rests dimmed but stays focusable, so focus never drops when the opening ends */
[data-demo="series"] .tv-btn[aria-disabled="true"] { opacity: .5; cursor: default; }
[data-demo="series"] .tv-btn[aria-disabled="true"]:hover { background: var(--panel-2); }
[data-demo="series"] .tv-btn[aria-disabled="true"]:active { transform: none; box-shadow: 3px 3px 0 var(--frame); }
[data-demo="series"] .tv-btn svg { flex: none; width: 14px; height: 14px; fill: currentColor; }

/* the season counter and the episode pips */
[data-demo="series"] .tv-meta { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
[data-demo="series"] .tv-count { margin: 0; }
[data-demo="series"] .tv-season { display: inline-block; min-width: 1ch; }
[data-demo="series"] .tv-progress { display: flex; flex-direction: column; gap: 5px; }
[data-demo="series"] .tv-ep { color: var(--ink-2); }
[data-demo="series"] .tv-pips { display: flex; gap: 4px; }
[data-demo="series"] .tv-pips i { width: 10px; height: 10px; border: 2px solid var(--line); border-radius: 2px; }
[data-demo="series"] .tv-pips i.is-seen { background: var(--accent); border-color: var(--accent); }
[data-demo="series"] .tv-pips i.is-now { background: var(--pop); border-color: var(--frame); transform: scale(1.2); }
/* "New season": a sticker that pops onto the set's top corner */
[data-demo="series"] .tv > .sfx-wrap.tv-burst.small {
  position: absolute; right: -16px; top: -6px; z-index: 3;
  width: 116px; height: 116px; margin: 0;
  opacity: 1; transform: none; transition: none;
}
[data-demo="series"] .tv-burst .sfx { font-size: 1.05rem; text-align: center; line-height: .95; max-width: 70px; }
[data-demo="series"] .d-out { min-height: 2.9em; }

/* narrow cards: the remote lies flat under the set */
@container (max-width: 459px) {
  [data-demo="series"] .tv-set { flex-direction: column; align-items: stretch; }
  [data-demo="series"] .tv { align-self: center; width: 100%; }
  [data-demo="series"] .tv-remote { width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-radius: 22px; }
  [data-demo="series"] .tv-btn { flex: 1 1 auto; justify-content: center; }
  [data-demo="series"] .tv-ir { width: 14px; height: 30px; }
  [data-demo="series"] .tv-keys { display: none; }
}

/* ---------- 720 to 1023px ---------- */
@media (max-width: 1023px) {
  :root { --pad: 32px; }
  .cover-in { grid-template-columns: minmax(0, 1fr) 240px; column-gap: 24px; }
  .lantern-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .pay-grid > .boss { grid-column: span 6; }
  .night-grid > .app, .night-grid > .night { grid-column: span 6; }
  .crew-grid > .crew, .crew-grid > .machines { grid-column: span 6; grid-row: auto; }
  .crew-grid > .voice, .crew-grid > .quiet { grid-column: span 3; }
  .ghar-grid > .cipher, .ghar-grid > .tests { grid-column: span 6; }
  .pocket-grid > .stream { grid-column: span 6; grid-row: auto; }
  .pocket-grid > .lock, .pocket-grid > .parts { grid-column: span 3; }
  .clock-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .clock-side { width: min(520px, 100%); }
  .ch-body { grid-template-columns: minmax(0, 1fr); }
  .ch-art { max-width: 440px; }
  .stamp { top: 54px; font-size: 22px; }
}
@media (min-width: 720px) and (max-width: 899px) {
  .tb-time { display: none; }
  .topbar nav { margin-left: auto; }
  .tb-wide { display: none; }
}

/* ---------- phones: under 720px ---------- */
@media (max-width: 719px) {
  :root { --pad: 16px; }
  .topbar-in { padding: 0 6px 0 16px; gap: 4px; }
  .topbar .brand { font-size: 16px; }
  .tb-btn { padding: 0 9px; font-size: 13.5px; }
  .tb-time, .brand-star, .tb-wide { display: none; }
  .topbar nav { margin-left: auto; }
  .tb-theme { padding: 0 10px; }
  .tb-theme .moon { margin-right: 0; }
  .tb-theme .tb-theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .masthead { font-size: 12px; letter-spacing: .12em; padding-top: 14px; }
  .cover-in { grid-template-columns: minmax(0, 1fr); padding-top: 18px; }
  .emblem { order: 1; align-self: flex-start; flex-direction: row; gap: 14px; margin: 20px 0 0; }
  .emblem .seal-art { width: 96px; }
  .seal-cap { text-align: left; margin-top: 0; font-size: 12px; }
  .kicker .coords { display: block; margin: 6px 0 0; }
  .stamp { display: none; }
  .pay-grid > .result { padding-right: 14px; min-height: 0; }
  .pay-grid > .result .sfx-wrap.big { position: relative; right: auto; bottom: auto; margin: -20px -16px -40px auto; }
  .skyline { height: 120px; }
  .page { padding-top: 48px; }
  .chapter-open { padding-top: 64px; }
  .vlabel { display: none; }
  .file-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bust { width: 170px; margin: 0 auto; }
  .stats > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lantern-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; row-gap: 16px; }
  .l-art { width: 58px; height: 100px; }
  .l-name { font-size: 13px; }
  .panels, .empg-grid, .ghar-grid, .pocket-grid, .exper-grid, .pay-grid, .night-grid, .crew-grid { grid-template-columns: minmax(0, 1fr); }
  .panels > * { grid-column: auto !important; grid-row: auto !important; }
  .panel { padding: 16px 14px 20px; }
  .sfx-wrap.small { width: 96px; height: 96px; margin: -8px -14px -28px 0; }
  .sfx-wrap.big { width: 150px; height: 150px; margin: -20px -16px -40px 0; }
  .sfx-wrap.big .sfx { font-size: 1.9rem; }
  .arcade { grid-template-columns: minmax(0, 1fr); }
  .foot { flex-direction: column; }
}
@media (max-width: 359px) {
  .topbar-in { gap: 0; }
  .topbar nav { gap: 0; }
  .tb-btn { padding: 0 6px; font-size: 13px; }
}

/* ---------- reduced motion: nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal .panel, .js .reveal .ch-text, .js .reveal .file-grid > *, .js .reveal .sfx-wrap { opacity: 1; transform: none; }
  .sl-dot, .st-tw { display: none; }
}

/* ---------- print: the story as plain pages ---------- */
@media print {
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --bg: #fff; --panel: #fff; --panel-2: #fff; --panel-dark: #fff; --ink-dark: #000;
    --ink: #000; --ink-2: #444; --frame: #000; --rule: #bbb; --accent: #1d4f9c; --gold: #7f5005;
    --bubble: #fff; --bubble-ink: #000; --pop: #fff; --pop-ink: #000; --tone: transparent; --speed: transparent;
    --glow: none; --glow-f: none; --shadow: none;
  }
  .topbar, .skip, .sky, .skyline, .stamp, .demo-live, .js-only, .sfx-wrap, .vlabel, .ch-art, .lantern .l-art, .arcade, .ours, #clock .astro { display: none !important; }
  .js .demo-still { display: block !important; }
  .js .reveal .panel, .js .reveal .ch-text, .js .reveal .file-grid > * { opacity: 1 !important; transform: none !important; }
  body { font-size: 10.5pt; }
  .page { padding: 6mm 0 0; break-inside: avoid-page; }
  .panel { box-shadow: none; border-width: 1.5px; break-inside: avoid; }
  .title { font-size: 34pt; text-shadow: none; }
  .ch-num { display: none; }
  .ch-title { font-size: 20pt; text-shadow: none; }
  .ch-role { font-size: 12pt; }
}
@media (forced-colors: active) {
  .panel, .file-sheet, .bubble, .cap, .btn, .d-btn { border-color: CanvasText; }
}

/* the dial follows the hand while dragging; every lantern lit lights every window in the skyline */
.dial.dragging .d-ring { transition: none; }
.all-lit .sl-lamps circle { opacity: 1; }
/* at night the dark side's pieces would sink into the dark squares: give them a saffron edge */
:root[data-theme="dark"] [data-demo="chess"] .is-b { --pc-edge: var(--gold); --pc-line: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-demo="chess"] .is-b { --pc-edge: var(--gold); --pc-line: var(--gold); } }
.end > .cap.pop { align-self: center; }