/* Tipjai Beam launch site.
   Every number has a reason: tokens between the @derived markers are generated by
   tools/derive.mjs (run `node tools/derive.mjs --write`); other values carry a comment. */

/* @derived:start (generated by tools/derive.mjs, do not edit by hand) */
:root {
  /* palette: brand values as given, plus steps derived in OKLab */
  --paper: #1a1714; --surface: #24201c; --line: #3a332c; --ink: #f3ede1;
  --coral: #f2683c; --gold: #f0b85a; --mint: #4fd2ad;
  --raised: #2e2a25; /* surface + one OKLab L step (paper -> surface), elevation as lightness */
  --line-2: #4a423b; /* line + 1.5 L steps: a border that still reads on surface */
  --ink-2: #a7a299; /* ink mixed toward paper, solved for >= 5.6:1 on raised (AA 4.5 + margin): 5.61 */
  --ink-3: #848078; /* annotations only, solved for >= 3.6:1 on raised: 3.62 */

  /* springs: response + damping ratio, sampled into linear() (settle time = duration) */
  --ease-press: linear(0, 0.0443, 0.1514, 0.2896, 0.4364, 0.5764, 0.7006, 0.8045, 0.8869, 0.9488, 0.9924, 1.0209, 1.0373, 1.0447, 1.0458, 1.0427, 1.0371, 1.0306, 1.0239, 1.0176, 1.0122, 1.0077, 1.0042, 1.0016, 0.9999, 0.9988, 0.9981, 0.9979, 0.9979, 0.9981, 0.9984, 0.9987, 1); --dur-press: 491ms; /* 0.30 s, zeta 0.70, peak 1.0458 */
  --ease-control: linear(0, 0.0313, 0.1078, 0.209, 0.3202, 0.4313, 0.5358, 0.6301, 0.7123, 0.7819, 0.8394, 0.8857, 0.9221, 0.9501, 0.971, 0.9861, 0.9966, 1.0036, 1.0079, 1.0102, 1.011, 1.011, 1.0103, 1.0092, 1.008, 1.0068, 1.0056, 1.0045, 1.0035, 1.0027, 1.002, 1.0015, 1); --dur-control: 480ms; /* 0.35 s, zeta 0.82, peak 1.011 */
  --ease-panel: linear(0, 0.0344, 0.1143, 0.2148, 0.3206, 0.4226, 0.5162, 0.5991, 0.6708, 0.7318, 0.7829, 0.8252, 0.8599, 0.8882, 0.9112, 0.9296, 0.9444, 0.9562, 0.9656, 0.973, 0.9788, 0.9835, 0.9871, 0.99, 0.9922, 0.9939, 0.9953, 0.9964, 0.9972, 0.9978, 0.9983, 0.9987, 1); --dur-panel: 661ms; /* 0.45 s, zeta 1, no overshoot */
  --dur-move-16: 120ms; /* t = sqrt(2d/a), a 9600 px/s^2, clamped to [120, 450] */
  --dur-move-200: 204ms;
  --d1: 120ms; --d2: 180ms; --d3: 270ms; --d4: 405ms; /* fades: 120 ms x 1.5^n */
  --coral-hi: #ff7549; /* coral + one OKLab L step (hover) */
  --gold-dim: #715934; /* gold mixed 55% toward paper: unlit LEDs, quiet lines */

  /* type: ratio 1.2 (phone) .. 1.25 (desktop), body 16 .. 18 px, fluid between 360 and 1440 px */
  --fs-mini: clamp(0.7500rem, 0.7396rem + 0.0463vw, 0.7813rem);
  --fs-small: clamp(0.8333rem, 0.8111rem + 0.0988vw, 0.9000rem);
  --fs-body: clamp(1.0000rem, 0.9583rem + 0.1852vw, 1.1250rem);
  --fs-lead: clamp(1.2000rem, 1.1312rem + 0.3056vw, 1.4063rem);
  --fs-h3: clamp(1.4400rem, 1.3341rem + 0.4708vw, 1.7578rem);
  --fs-h2s: clamp(1.7280rem, 1.5716rem + 0.6952vw, 2.1973rem);
  --fs-h2: clamp(2.0736rem, 1.8493rem + 0.9970vw, 2.7466rem);
  --fs-big: clamp(2.4883rem, 2.1734rem + 1.3999vw, 3.4332rem);
  --fs-mark: clamp(5.1598rem, 4.0857rem + 4.7735vw, 8.3819rem);

  /* spacing: x1.5 per step (Weber-Fechner), snapped to the 4 px baseline */
  --s0: 0.25rem; --s1: 0.5rem; --s2: 0.75rem; --s3: 1.25rem; --s4: 1.75rem; --s5: 2.5rem; --s6: 3.75rem; --s7: 5.75rem; --s8: 8.5rem; --s9: 12.75rem;

  /* macro rhythm: the same steps, fluid between phone and desktop like the type */
  --sp-sec: clamp(3.7500rem, 2.1667rem + 7.0370vw, 8.5000rem); /* section padding: s6 (60) on a phone .. s8 (136) on a desktop */
  --sp-head: clamp(2.5000rem, 2.0833rem + 1.8519vw, 3.7500rem); /* section head to content: s5 (40) .. s6 (60) */
  --sp-block: clamp(2.5000rem, 1.4167rem + 4.8148vw, 5.7500rem); /* between blocks inside a section: s5 (40) .. s7 (92) */

  /* header glass, chrome tier t 1.4: alpha = 1 - e^(-0.909 t), blur = 14 px x t */
  --glass-alpha: 0.72; --glass-blur: 20px;
}
/* @derived:end */

:root {
  color-scheme: dark;
  /* fonts: Latin from Jakarta, Thai from IBM Plex Sans Thai (body) and Prompt (headings);
     the Thai faces are limited to the Thai block by unicode-range, so one stack serves both */
  --sans: "Plus Jakarta Sans", "IBM Plex Sans Thai", system-ui, sans-serif;
  --head: "Plus Jakarta Sans", "Prompt", "IBM Plex Sans Thai", system-ui, sans-serif;
  --mono: "Geist Mono", "IBM Plex Sans Thai", ui-monospace, "Cascadia Mono", Menlo, monospace;

  /* radii grow x1.75 with surface size so the curve reads the same relative to the object */
  --r1: 4px; --r2: 7px; --r3: 12px; --r4: 21px;

  /* layout: 16 px gutter at 360 px wide (brief), 48 px at 1440, linear between */
  --gutter: clamp(1rem, 0.3333rem + 2.963vw, 3rem);
  --wrap: min(75rem, 100% - 2 * var(--gutter));
  --header-h: 4rem; /* 64 px = 44 px target + 2 x 10 px, on the 4 px grid */

  /* z ladder (documented once): stage 0, content 1, plates 2, header 40, skip link and toast 50 */
  --z-stage: 0; --z-content: 1; --z-plate: 2; --z-header: 40; --z-top: 50;

  /* one light, from above: highlights sit on top edges (Fresnel hairline, R = 1 at grazing) */
  --hairline: inset 0 1px 0 rgb(243 237 225 / 0.07);
  --grid-line: rgb(58 51 44 / 0.55);
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold);
}

/* ---------- fonts (self-hosted, woff2) ---------- */
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("../fonts/plexthai-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0E00-0E7F, U+200B-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("../fonts/plexthai-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0E00-0E7F, U+200B-200D, U+25CC; }
@font-face { font-family: "Prompt"; src: url("../fonts/prompt-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0E00-0E7F, U+200B-200D, U+25CC; }
@font-face { font-family: "Prompt"; src: url("../fonts/prompt-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0E00-0E7F, U+200B-200D, U+25CC; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s4)); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body) / 1.6 var(--sans);
  font-synthesis: none;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
/* Thai body copy needs room for stacked marks: line-height >= 1.6 (brief), 1.75 here */
html[lang="th"] body { line-height: 1.75; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-family: var(--head); text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
kbd { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r1); }
::selection { background: var(--coral); color: var(--paper); }

/* one language visible at a time; the other is removed from layout and from screen readers */
html[lang="en"] .th, html[lang="th"] .en { display: none !important; }
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip {
  position: fixed; left: var(--s3); top: var(--s3); z-index: var(--z-top);
  padding: var(--s2) var(--s4); background: var(--gold); color: var(--paper);
  border-radius: var(--r2); font-weight: 600; transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.wrap { width: var(--wrap); margin-inline: auto; }
.mono { font-family: var(--mono); }

/* ---------- header (chrome-tier glass) ---------- */
.top {
  position: fixed; inset: 0 0 auto; z-index: var(--z-header);
  height: var(--header-h);
  background: rgb(26 23 20 / var(--glass-alpha));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid rgb(58 51 44 / 0.7);
}
.top-in { height: 100%; display: flex; align-items: center; gap: var(--s3); }
.brand { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; text-decoration: none; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.nav { margin-left: auto; display: none; gap: var(--s1); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s3); border-radius: var(--r2); color: var(--ink-2); text-decoration: none; font-size: var(--fs-small); font-weight: 600; transition: color var(--d1), background-color var(--d1); }
.nav a:hover { color: var(--ink); background: rgb(46 42 37 / 0.6); }
.top-tools { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.lang { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--paper); }
html:not(.js) .lang { display: none; }
.lang button {
  min-width: 44px; min-height: 44px; padding: 0 var(--s2); border: 0; border-radius: 5px;
  background: transparent; color: var(--ink-2); font: 600 var(--fs-mini) / 1 var(--mono); letter-spacing: 0.06em; cursor: pointer;
  transition: background-color var(--d1), color var(--d1);
}
.lang button[aria-pressed="true"] { background: var(--raised); color: var(--ink); box-shadow: var(--hairline); }
.lang button:hover { color: var(--ink); }
.top .btn { display: none; }
@media (min-width: 560px) { .top .btn { display: inline-flex; } }
@media (min-width: 1040px) { .nav { display: flex; } .top-tools { margin-left: var(--s2); } }

/* ---------- buttons ---------- */
.btn {
  --press: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s4); border-radius: var(--r2);
  font: 600 var(--fs-small) / 1.2 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--d1), border-color var(--d1), color var(--d1), transform var(--dur-press) var(--ease-press);
}
.btn:active { transform: translateY(1px) scale(0.985); transition-duration: 60ms; }
.btn-primary { background: var(--coral); color: var(--paper); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18); }
.btn-primary:hover { background: var(--coral-hi); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface); }
.btn-lg { min-height: 56px; padding: 0 var(--s5); font-size: var(--fs-body); }
.btn svg { width: 18px; height: 18px; flex: none; }
.top .btn { min-height: 44px; padding: 0 var(--s3); }

/* ---------- construction details ---------- */
.rails { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-stage); display: none; }
.rails::before, .rails::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 8px);
}
.rails::before { left: calc(50% - var(--wrap) / 2); }
.rails::after { right: calc(50% - var(--wrap) / 2); }
@media (min-width: 900px) { .rails { display: block; } }

.tag { display: inline-flex; align-items: center; gap: var(--s1); font: 500 var(--fs-mini) / 1.4 var(--mono); color: var(--ink-3); letter-spacing: 0.04em; }
.tag b { color: var(--gold); font-weight: 600; }

/* ---------- hero ---------- */
main { position: relative; }
.hero { position: relative; padding-top: calc(var(--header-h) + var(--s7)); isolation: isolate; }
.hero-stage {
  position: absolute; inset: 0 0 auto; height: var(--stage-h, 100%); z-index: var(--z-stage); pointer-events: none;
  /* the unlit dot field: one dot per cell, same pitch and origin as the canvas grid */
  background-image: radial-gradient(circle at center, var(--line) 0 0.9px, transparent 1.4px);
  background-size: var(--pitch, 9px) var(--pitch, 9px);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-in { position: relative; z-index: var(--z-content); text-align: center; display: grid; justify-items: center; gap: var(--s4); }
/* small type over the lit dot wall gets a paper-coloured halo, so its contrast is measured against paper */
.kicker, .hero-lead, .hero-req, .hero-cta .btn-ghost { text-shadow: 0 0 2px var(--paper), 0 0 10px var(--paper), 0 0 18px var(--paper); }
.hero-cta .btn-ghost { background: rgb(26 23 20 / 0.72); }
.kicker { font: 500 var(--fs-small) / 1.5 var(--mono); color: var(--gold); letter-spacing: 0.02em; }
html[lang="th"] .kicker { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }

.mark {
  position: relative;
  font: 800 var(--fs-mark) / 1 var(--sans);
  letter-spacing: -0.035em;
  color: var(--ink);
  padding-bottom: 0.08em; /* room for the descender of j, never clipped */
  margin-block: var(--s2) 0;
}
.mark .w { display: inline-block; position: relative; }
.mark .probe { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
@media (max-width: 559px) { .mark .w { display: block; } .mark .w + .w { margin-top: -0.02em; } }
/* With JS the wordmark waits for the beam; if JS never runs, a CSS failsafe shows it at 3.2 s. */
html.js .mark { opacity: 0; animation: mark-failsafe 1ms 3.2s forwards; }
html.js .mark.is-shown { opacity: 1; animation: none; }
@keyframes mark-failsafe { to { opacity: 1; } }
/* the beam develops each word: JS sets --rv (0..100, % of the word) while the light sweeps */
.mark.is-developing .w {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--rv, -40) * 1% - 9%), transparent calc(var(--rv, -40) * 1% + 9%));
  mask-image: linear-gradient(90deg, #000 calc(var(--rv, -40) * 1% - 9%), transparent calc(var(--rv, -40) * 1% + 9%));
}
/* the light on the type: a warm band follows the beam across each word */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mark.is-lit .w {
    background-image: linear-gradient(90deg, var(--ink) calc(var(--bx, 50) * 1% - 30%), #fffaf2 calc(var(--bx, 50) * 1%), var(--ink) calc(var(--bx, 50) * 1% + 30%));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.hero-lead { max-width: 34em; font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.55; text-wrap: balance; }
html[lang="th"] .hero-lead { line-height: 1.7; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: var(--s2); }
.hero-req { font: 500 var(--fs-mini) / 1.5 var(--mono); color: var(--ink-3); }
html[lang="th"] .hero-req { font-family: var(--sans); font-size: var(--fs-small); }

/* glyph-metric annotations on the wordmark (positioned by JS from the real baseline) */
.anno { position: absolute; inset: 0; z-index: var(--z-content); pointer-events: none; display: none; }
.anno.is-on { display: block; }
.anno-line { position: absolute; left: calc(50% - var(--wrap) / 2); width: var(--wrap); height: 0; border-top: 1px dashed rgb(74 66 59 / 0.9); }
.anno-line span { position: absolute; left: var(--s2); top: -1.45em; font: 500 var(--fs-mini) / 1 var(--mono); color: var(--ink-3); }
.anno-line.is-base { border-top-style: solid; border-top-color: rgb(240 184 90 / 0.35); }
.anno-line.is-base span { color: var(--gold-dim); }
.anno-read { position: absolute; right: calc(50% - var(--wrap) / 2 + var(--s2)); font: 500 var(--fs-mini) / 1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.anno-read b { color: var(--gold); font-weight: 500; }
@media (max-width: 899px) { .anno { display: none !important; } }

/* ---------- plates: real screenshots with construction marks ---------- */
.plate { position: relative; margin: 0; z-index: var(--z-plate); }
.plate-frame {
  position: relative; border-radius: var(--r3); background: var(--surface);
  border: 1px solid var(--line-2); box-shadow: var(--hairline), 0 30px 80px -40px rgb(0 0 0 / 0.9);
}
.plate-frame > img { width: 100%; border-radius: calc(var(--r3) - 1px); }
/* crop marks at the four corners, 12 px out, 10 px long: the drafting-table frame */
.plate-frame::before {
  content: ""; position: absolute; inset: -12px; pointer-events: none;
  background:
    linear-gradient(var(--line-2), var(--line-2)) left top / 10px 1px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) left top / 1px 10px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) right top / 10px 1px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) right top / 1px 10px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) left bottom / 10px 1px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) left bottom / 1px 10px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) right bottom / 10px 1px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) right bottom / 1px 10px no-repeat;
}
.plate-dim { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); font: 500 var(--fs-mini) / 1 var(--mono); color: var(--ink-3); }
.plate-dim::before, .plate-dim::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), var(--line-2)) center / 100% 1px no-repeat; }
.plate-dim span { white-space: nowrap; }
.plate-dim b { color: var(--ink-2); font-weight: 500; }

/* callouts, drafted like a technical drawing: the number sits outside the screenshot and a hairline
   leader runs to a small ring on the exact spot, so the real UI stays uncovered. The legend below
   the plate carries the words (the callouts are decoration, aria-hidden). */
.mk:not([style]) { display: none; }
.has-callouts { margin-block: 46px; }
.has-callouts.callouts-top-only { margin-bottom: 0; }
.has-callouts.callouts-bottom-only { margin-top: 0; }
.mk { position: absolute; left: var(--x); top: 0; bottom: 0; width: 0; pointer-events: none; }
.mk::before { /* leader */
  content: ""; position: absolute; left: -0.5px; width: 1px;
  top: -20px; height: calc(var(--y) + 20px);
  background: linear-gradient(to bottom, rgb(240 184 90 / 0.7), rgb(240 184 90 / 0.4));
}
.mk::after { /* ring on the spot */
  content: ""; position: absolute; left: -5px; top: calc(var(--y) - 5px); width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--gold); background: transparent; box-shadow: 0 0 0 2px rgb(26 23 20 / 0.6), inset 0 0 0 1px rgb(26 23 20 / 0.5);
}
.mk b {
  position: absolute; left: -12px; top: -44px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper); border: 1px solid var(--gold); color: var(--gold);
  font: 600 11px / 1 var(--mono);
  transition: background-color var(--d1), color var(--d1), transform var(--dur-control) var(--ease-control);
}
.mk.is-b::before { top: var(--y); height: calc(100% - var(--y) + 20px); background: linear-gradient(to top, rgb(240 184 90 / 0.7), rgb(240 184 90 / 0.4)); }
.mk.is-b b { top: auto; bottom: -44px; }
@media (max-width: 559px) {
  .has-callouts { margin-block: 38px; }
  .mk b { width: 20px; height: 20px; left: -10px; top: -38px; font-size: 10px; }
  .mk.is-b b { bottom: -38px; }
  .mk::before { top: -18px; height: calc(var(--y) + 18px); }
  .mk.is-b::before { height: calc(100% - var(--y) + 18px); }
}

.legend { display: grid; gap: var(--s3) var(--s5); margin-top: var(--s5); counter-reset: lg; grid-template-columns: 1fr; list-style: none; }
.legend li { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); align-items: baseline; color: var(--ink-2); font-size: var(--fs-small); min-width: 0; }
.legend li::before {
  counter-increment: lg; content: counter(lg);
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--gold-dim); color: var(--gold); font: 600 11px / 1 var(--mono); transform: translateY(0.2em);
}
.legend b { color: var(--ink); font-weight: 600; }
@media (min-width: 720px) { .legend.legend-1 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 720px) { .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .legend.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* hovering a legend line lights its callout (no JS) */
.plate:has(.legend li:nth-child(1):hover) .mk:nth-of-type(1) b,
.plate:has(.legend li:nth-child(2):hover) .mk:nth-of-type(2) b,
.plate:has(.legend li:nth-child(3):hover) .mk:nth-of-type(3) b,
.plate:has(.legend li:nth-child(4):hover) .mk:nth-of-type(4) b,
.plate:has(.legend li:nth-child(5):hover) .mk:nth-of-type(5) b,
.plate:has(.legend li:nth-child(6):hover) .mk:nth-of-type(6) b { background: var(--gold); color: var(--paper); transform: scale(1.15); }
.plate .cap { margin-top: var(--s4); font-size: var(--fs-small); color: var(--ink-3); }
.plate .plate-dim + figcaption .cap { margin-top: var(--s2); }

.plate-hero { width: min(75rem, 100% - 2 * var(--gutter)); margin: var(--sp-block) auto 0; padding-bottom: var(--sp-sec); }

/* ---------- sections ---------- */
.sec { position: relative; padding-block: var(--sp-sec); z-index: var(--z-content); }
.sec + .sec { border-top: 1px solid rgb(58 51 44 / 0.55); }
.sec-head { display: grid; gap: var(--s3); max-width: 46rem; margin-bottom: var(--sp-head); }
.sec-no { display: flex; align-items: center; gap: var(--s3); font: 500 var(--fs-mini) / 1 var(--mono); color: var(--ink-3); letter-spacing: 0.06em; }
.sec-no b { color: var(--gold); font-weight: 600; }
.sec-no::after { content: ""; flex: 0 0 var(--s7); height: 1px; background: var(--line-2); }
.sec h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
html[lang="th"] .sec h2 { font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.sec-lead { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.55; max-width: 38em; text-wrap: pretty; }
html[lang="th"] .sec-lead { line-height: 1.7; }
.sec h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
html[lang="th"] .sec h3 { font-weight: 600; letter-spacing: 0; line-height: 1.45; }

.split { display: grid; gap: var(--s7); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-block); }
  .split.is-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.split + .split, .split + .plate, .flow-win + .split, .pair + .points, .counts + .plate, .plate + .points, .split + .results-win { margin-top: var(--sp-block); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-content: start; min-width: 0; }

.points { list-style: none; display: grid; gap: var(--s4); }
.points li { position: relative; padding-left: var(--s5); color: var(--ink-2); min-width: 0; }
.points li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 12px; height: 1px; background: var(--gold); }
.points b { color: var(--ink); font-weight: 600; }
@media (min-width: 960px) { .points-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); } }
.ctl-text { color: var(--ink-2); }

/* ---------- windows (paper-style cards) ---------- */
.win { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); box-shadow: var(--hairline); min-width: 0; }
.win-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); font: 500 var(--fs-mini) / 1.6 var(--mono); color: var(--ink-3); letter-spacing: 0.03em; }
.win-bar .th { font-family: var(--sans); letter-spacing: 0; }
.win-bar strong { color: var(--ink-2); font-weight: 600; }
.win-body { padding: var(--s4); }
.win-grid { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; }
.win-foot { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); font-size: var(--fs-mini); color: var(--ink-3); }
html[lang="th"] .win-foot { font-size: var(--fs-small); }

/* measured results: LED numerals + plain words */
.readouts { list-style: none; display: grid; }
.readouts li { display: grid; grid-template-columns: minmax(0, auto) 1fr; gap: var(--s4); align-items: center; padding: var(--s4); min-width: 0; }
.readouts li + li { border-top: 1px dashed var(--line); }
.readouts p { color: var(--ink-2); font-size: var(--fs-small); }
.readouts p b { display: block; color: var(--ink); font-weight: 600; font-size: var(--fs-body); }
@media (max-width: 559px) { .readouts li { grid-template-columns: minmax(0, 1fr); gap: var(--s2); } }
@media (min-width: 720px) {
  .readouts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readouts-4 li + li { border-top: 0; }
  .readouts-4 li:nth-child(n + 3) { border-top: 1px dashed var(--line); }
  .readouts-4 li:nth-child(even) { border-left: 1px dashed var(--line); }
}
@media (min-width: 1200px) {
  .readouts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .readouts-4 li { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .readouts-4 li:nth-child(n + 3) { border-top: 0; }
  .readouts-4 li + li { border-left: 1px dashed var(--line); }
}
.led { display: inline-flex; color: var(--gold); font: 700 var(--fs-big) / 1 var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.led svg { height: var(--led-h); width: auto; overflow: visible; }
.led { --led-h: 34px; }
@media (min-width: 720px) { .led { --led-h: 44px; } }
/* LEDs wait dark until they scroll in, then scan on left to right (motion allowed only) */
@media (prefers-reduced-motion: no-preference) { html.js .led.is-armed:not(.is-drawn) .on { opacity: 0.14; } }
.led .on { fill: var(--gold); }
.led .off { fill: var(--line); }
.led.is-mint .on { fill: var(--mint); }
.led.is-ink .on { fill: var(--ink); }
.led-dot { transform-box: fill-box; transform-origin: center; }
.led.is-drawn .on { animation: led-on var(--d3) ease-out both; animation-delay: var(--dl, 0ms); }
@keyframes led-on { from { opacity: 0.12; } to { opacity: 1; } }
.facts { list-style: none; display: grid; gap: var(--s2); padding: var(--s4); border-top: 1px solid var(--line); }
.facts li { position: relative; padding-left: var(--s4); color: var(--ink-2); font-size: var(--fs-small); }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); transform: translateY(-50%); }

/* ---------- launch film ---------- */
.film { margin: 0; overflow: hidden; }
.film-stage { position: relative; }
.film-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #12100e; }
/* the whole poster is the button (a big, near target); the visible mark sits in the cover's empty band */
.film-play {
  position: absolute; inset: 0; width: 100%; border: 0; padding: 0 0 3.5%; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--s2); color: var(--ink);
}
.film-play[hidden] { display: none; }
.film-play-ring {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--coral); color: var(--paper); box-shadow: 0 0 0 6px rgb(242 104 60 / 0.18), 0 12px 30px -10px rgb(0 0 0 / 0.8);
  transition: transform var(--dur-press) var(--ease-press), background-color var(--d1);
}
.film-play-ring svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
.film-play:hover .film-play-ring { background: var(--coral-hi); transform: scale(1.06); }
.film-play:active .film-play-ring { transform: scale(0.96); transition-duration: 60ms; }
.film-play:focus-visible { outline: 2px solid var(--gold); outline-offset: -5px; border-radius: 0; }
.film-play:focus-visible .film-play-ring { box-shadow: var(--focus); }
.film-play-label { font-weight: 600; font-size: var(--fs-small); text-shadow: 0 1px 8px #000; }
.film-play-label .mono { color: var(--gold); font-size: var(--fs-mini); margin-left: var(--s1); }
.film-play.is-loading .film-play-ring svg { opacity: 0; }
.film-play.is-loading .film-play-ring::after { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgb(26 23 20 / 0.35); border-top-color: var(--paper); animation: film-spin 0.8s linear infinite; }
.film-play-ring { position: relative; }
.film-play.is-still .film-play-ring::after { animation: none; border-color: var(--paper); border-right-color: rgb(26 23 20 / 0.35); }
@keyframes film-spin { to { transform: rotate(360deg); } }
.film-msg { padding: var(--s3) var(--s4); color: var(--ink-2); font-size: var(--fs-small); border-top: 1px solid var(--line); }
.film-noscript { padding: var(--s3) var(--s4); display: flex; gap: var(--s4); flex-wrap: wrap; }
/* small screens: the cover's own words fill the frame, so the mark moves to the corner; the label stays for screen readers */
@media (max-width: 719px) {
  .film-play { align-items: flex-end; justify-content: flex-end; padding: 0 var(--s3) var(--s3) 0; }
  .film-play-ring { width: 44px; height: 44px; }
  .film-play-ring svg { width: 18px; height: 18px; }
  .film-play-label { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.film-desc { border-top: 1px solid var(--line); }
.film-desc summary { list-style: none; display: flex; align-items: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s4); cursor: pointer; color: var(--ink-2); font-size: var(--fs-small); }
.film-desc summary::-webkit-details-marker { display: none; }
.film-desc summary::before { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(-45deg); transition: transform var(--dur-control) var(--ease-control); }
.film-desc details[open] summary::before { transform: rotate(45deg); }
.film-desc summary:hover { color: var(--ink); }
.film-desc p { padding: 0 var(--s4) var(--s4); color: var(--ink-2); font-size: var(--fs-small); max-width: 62em; }
.sec-film .sec-head { margin-bottom: var(--s5); }

/* ---------- multistream diagram ---------- */
.flow { position: relative; padding: var(--s5); display: grid; gap: var(--s6); }
.flow-svg, .flow-packets { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.flow-svg path { fill: none; stroke-linecap: round; transition: stroke var(--d3), opacity var(--d3); }
.flow-svg .glow { stroke: rgb(240 184 90 / 0.16); stroke-width: 7; }
.flow-svg .core { stroke: var(--gold); stroke-width: 1.5; }
.flow-svg .off .glow { stroke: transparent; }
.flow-svg .off .core { stroke: var(--line-2); stroke-dasharray: 3 6; }
.flow-svg .is-static .core { stroke-dasharray: 2 7; }
.flow-row { position: relative; display: grid; gap: var(--s4); z-index: 1; }
.node {
  position: relative; display: grid; gap: 2px; padding: var(--s3) var(--s4); min-width: 0;
  background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r2); box-shadow: var(--hairline);
}
.node-name { font-weight: 700; font-size: var(--fs-body); display: flex; align-items: center; gap: var(--s2); }
.node-name img { width: 22px; height: 22px; border-radius: 6px; }
.node-sub { font-size: var(--fs-mini); color: var(--ink-3); font-family: var(--mono); }
html[lang="th"] .node-sub { font-family: var(--sans); font-size: var(--fs-small); }
.node.is-beam { border-color: rgb(242 104 60 / 0.6); box-shadow: var(--hairline), 0 0 0 4px rgb(242 104 60 / 0.08); }
.dests { display: grid; gap: var(--s3); }
.dest {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s2) var(--s3); text-align: left;
  min-height: 56px; padding: var(--s3) var(--s4); cursor: pointer;
  background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r2); box-shadow: var(--hairline);
  transition: border-color var(--d2), background-color var(--d2), transform var(--dur-press) var(--ease-press);
}
.dest:hover { border-color: var(--gold-dim); }
.dest:active { transform: scale(0.985); transition-duration: 60ms; }
.dest-name { font-weight: 700; }
.dest-state { display: inline-flex; align-items: center; gap: var(--s2); font: 500 var(--fs-mini) / 1.3 var(--mono); color: var(--ink-2); white-space: nowrap; }
html[lang="th"] .dest-state { font-family: var(--sans); font-size: var(--fs-small); }
.dest-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgb(79 210 173 / 0.18); transition: background-color var(--d2), box-shadow var(--d2); }
.dest[aria-pressed="false"] { background: var(--surface); }
.dest[aria-pressed="false"] .dest-name { color: var(--ink-3); }
.dest[aria-pressed="false"] .dest-state i { background: var(--ink-3); box-shadow: none; }
.dest.is-joining .dest-state i { background: var(--gold); box-shadow: 0 0 0 3px rgb(240 184 90 / 0.2); }
.dest-hint { grid-column: 1 / -1; font-size: var(--fs-mini); color: var(--ink-3); }
html[lang="th"] .dest-hint { font-size: var(--fs-small); }
.flow-note { font-size: var(--fs-small); color: var(--ink-3); }
.flow-win { margin-bottom: var(--sp-block); }
@media (max-width: 959px) { .dests { padding-left: var(--s4); } }
/* vertical (a bus down the left) until the three columns have room for their longest label */
.flow-row { width: 100%; max-width: 460px; }
@media (min-width: 960px) {
  .flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: var(--s6); padding: var(--s6); }
  .flow-row { gap: var(--s5); max-width: none; }
  .flow-note { grid-column: 1 / -1; }
}

/* ---------- JaiCraft phrases ---------- */
.phrases { list-style: none; display: grid; }
.phrases li { position: relative; display: grid; gap: var(--s1); padding: var(--s4) 0 var(--s4) var(--s6); border-bottom: 1px dashed var(--line); min-width: 0; }
.phrases li:first-child { border-top: 1px dashed var(--line); }
.phrases li::before { content: attr(data-n); position: absolute; left: 0; top: calc(var(--s4) + 0.9em); font: 500 var(--fs-mini) / 1 var(--mono); color: var(--ink-3); }
.phrase { font: 500 var(--fs-h2s) / 1.45 "Prompt", var(--sans); color: var(--ink); }
.phrase::before { content: "\201C"; color: var(--gold); margin-right: 0.08em; }
.phrase::after { content: "\201D"; color: var(--gold); margin-left: 0.04em; }
.gloss { font-size: var(--fs-small); color: var(--ink-2); }
.gloss .does { font-family: var(--mono); font-size: var(--fs-mini); color: var(--gold); letter-spacing: 0.02em; white-space: nowrap; }
.gloss .does::before { content: ""; display: inline-block; width: 18px; height: 1px; margin: 0 8px 0 2px; vertical-align: 0.3em; background: currentColor; }
.gloss .en .does { margin-left: var(--s1); }
html[lang="th"] .gloss .does { font-family: var(--sans); font-size: var(--fs-small); }

.jc-plate { max-width: 360px; justify-self: center; width: 100%; }
@media (min-width: 960px) { .jc-plate { justify-self: end; } }

/* ---------- routines ---------- */
.rules { list-style: none; display: grid; }
.rules li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); padding: var(--s3) var(--s4); min-width: 0; }
.rules li + li { border-top: 1px dashed var(--line); }
.rule-when, .rule-do { display: flex; gap: var(--s2); align-items: baseline; min-width: 0; }
.rule-when > span:first-child, .rule-do > span:first-child { flex: none; width: 3.6em; font: 500 var(--fs-mini) / 1.6 var(--mono); color: var(--ink-3); letter-spacing: 0.04em; }
html[lang="th"] .rule-when > span:first-child, html[lang="th"] .rule-do > span:first-child { font-family: var(--sans); font-size: var(--fs-small); }
.rule-do { color: var(--gold); font-weight: 600; }
.rule-when { color: var(--ink); }
@media (min-width: 560px) { .rules li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); } }

/* ---------- controls: keys, hide demo, phone ---------- */
.keys {
  display: inline-flex; align-items: flex-end; gap: var(--s2); padding: var(--s3); margin: 0;
  background: transparent; border: 1px dashed var(--line-2); border-radius: var(--r3); cursor: pointer;
  transition: border-color var(--d2);
}
.keys:hover { border-color: var(--gold-dim); }
.keys kbd {
  --skirt: 5px; /* light from above: the lit top face sits on a darker skirt */
  display: inline-grid; place-items: center; min-width: 64px; height: 56px; padding: 0 var(--s3);
  border-radius: var(--r2); background: linear-gradient(to bottom, #3a342e, #2e2a25);
  border: 1px solid var(--line-2); color: var(--ink);
  font: 600 var(--fs-small) / 1 var(--mono);
  box-shadow: inset 0 1px 0 rgb(243 237 225 / 0.12), 0 var(--skirt) 0 #14110f, 0 calc(var(--skirt) + 6px) 14px -6px rgb(0 0 0 / 0.7);
  transform: translateY(0);
  transition: transform var(--dur-press) var(--ease-press), box-shadow var(--dur-press) var(--ease-press), color var(--d1);
}
.keys kbd.is-key { min-width: 56px; color: var(--gold); font-size: var(--fs-body); }
.keys[aria-pressed="true"] kbd, .keys:active kbd { transform: translateY(4px); box-shadow: inset 0 1px 0 rgb(243 237 225 / 0.08), 0 1px 0 #14110f, 0 3px 8px -4px rgb(0 0 0 / 0.7); }
.keys[aria-pressed="true"] kbd.is-key { color: var(--coral); }

.stagebox { display: grid; gap: var(--s3); }
.screen {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r2); overflow: hidden;
  border: 1px solid var(--gold-dim); background: var(--paper);
  transition: border-color var(--d3), background-color var(--d3);
}
/* the scene, drawn in light lines like the rest of the page: horizon, two mountains, a camera frame */
.scene-art { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.scene-art .art-game { stroke: rgb(240 184 90 / 0.55); stroke-width: 0.8; transition: opacity var(--d3); }
.scene-art .art-private { stroke: var(--ink-3); stroke-width: 1.2; opacity: 0; transition: opacity var(--d3); }
.screen.is-private .art-game { opacity: 0; }
.screen.is-private .art-private { opacity: 1; }
.screen-label { position: absolute; left: var(--s3); top: var(--s2); display: grid; gap: 2px; text-align: left; }
.screen-label strong { font-size: var(--fs-body); font-weight: 700; }
.screen-label span { font: 500 var(--fs-mini) / 1.4 var(--mono); color: var(--ink-3); }
html[lang="th"] .screen-label span { font-family: var(--sans); font-size: var(--fs-small); }
.screen.is-private { border-color: var(--line-2); background: repeating-linear-gradient(135deg, var(--paper) 0 10px, #201c18 10px 20px); }
.mics { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; }
.mics li { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s3); border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--fs-small); color: var(--ink-2); transition: border-color var(--d2), color var(--d2); }
.mics i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); transition: background-color var(--d2); }
.mics li.is-muted { color: var(--ink-3); border-style: dashed; }
.mics li.is-muted i { background: var(--coral); }
.demo-status { font-size: var(--fs-small); color: var(--ink-3); min-height: 3.5em; }
html:not(.js) [data-hide-demo] { display: none; }

.keylist { list-style: none; display: grid; gap: var(--s3); }
.keylist li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); color: var(--ink-2); }
.keylist kbd { display: inline-flex; gap: 4px; }
.ctl-note { margin-top: var(--s3); font-size: var(--fs-mini); color: var(--ink-3); max-width: 46ch; }
html[lang="th"] .ctl-note { font-size: var(--fs-small); }
.keylist kbd span { display: inline-grid; place-items: center; min-width: 32px; height: 28px; padding: 0 6px; border: 1px solid var(--line-2); border-bottom-width: 3px; border-radius: var(--r1); background: var(--raised); color: var(--ink); font: 600 12px / 1 var(--mono); }

.ctl-block + .ctl-block { margin-top: var(--s8); padding-top: var(--s8); border-top: 1px dashed var(--line); }
.ctl-head { display: grid; gap: var(--s3); margin-bottom: var(--s5); max-width: 40rem; }
.ctl-head p { color: var(--ink-2); }

.phone {
  position: relative; width: min(300px, 78vw); margin-inline: auto; padding: 10px;
  border-radius: 40px; border: 1.5px solid rgb(240 184 90 / 0.55);
  box-shadow: 0 0 0 1px rgb(26 23 20), 0 0 28px rgb(240 184 90 / 0.18), inset 0 0 18px rgb(240 184 90 / 0.08);
  background: #120f0d;
}
.phone .shot { position: relative; }
.phone .shot img { width: 100%; border-radius: 30px; } /* rounded on the image, so callouts may reach outside */
.phone-plate { justify-self: center; width: 100%; max-width: 420px; }
.phone-plate figcaption { max-width: 300px; margin-inline: auto; }
.steps { list-style: none; display: grid; gap: var(--s3); counter-reset: st; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: baseline; color: var(--ink-2); }
.steps li::before { counter-increment: st; content: counter(st, decimal-leading-zero); font: 500 var(--fs-mini) / 1 var(--mono); color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; }
.chips li { padding: var(--s1) var(--s3); border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--fs-small); color: var(--ink-2); background: var(--surface); }
.chips li.is-hold { border-color: rgb(242 104 60 / 0.6); color: var(--ink); }

/* ---------- pre-flight pair ---------- */
.pair { display: grid; gap: var(--s7); }
.pair { gap: var(--sp-block); }
/* a big screenshot with its legend beside it (wide screens) */
@media (min-width: 1100px) {
  .plate.is-side { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 0 var(--s6); align-items: start; }
  .plate.is-side .legend { grid-template-columns: minmax(0, 1fr); margin-top: var(--s4); }
  .plate.is-side figcaption { padding-top: var(--s7); }
  .plate.is-side .cap { margin-top: 0; }
}

/* ---------- library counts ---------- */
.counts { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s7); }
@media (min-width: 720px) { .counts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.counts .win-body { display: grid; gap: var(--s3); }
.counts p { color: var(--ink-2); font-size: var(--fs-small); }
.counts p b { display: block; color: var(--ink); font-size: var(--fs-body); font-weight: 600; }

/* ---------- spec sheet ---------- */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4); border-top: 1px dashed var(--line); font-size: var(--fs-small); }
.spec tr:first-child th, .spec tr:first-child td { border-top: 0; }
.spec th { width: 38%; font-weight: 500; color: var(--ink-3); }
.spec td { color: var(--ink); }
.spec td .mono { font-size: var(--fs-mini); color: var(--ink-2); }
@media (max-width: 559px) { .spec th, .spec td { display: block; width: auto; } .spec td { border-top: 0; padding-top: 0; } }
.req { display: grid; gap: var(--s3); padding: var(--s5); border: 1px solid rgb(240 184 90 / 0.35); border-radius: var(--r2); background: linear-gradient(to bottom, rgb(240 184 90 / 0.06), transparent 70%); }
.req h3 { font-size: var(--fs-body); }
html[lang="th"] .req h3 { line-height: 1.6; }
.req p { color: var(--ink-2); font-size: var(--fs-small); }
.req-quiet { border-color: var(--line-2); background: none; }
.req code { font: 500 var(--fs-mini) / 1.6 var(--mono); color: var(--ink); background: var(--raised); padding: 2px 6px; border-radius: var(--r1); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.link { color: var(--gold); text-decoration: underline; text-decoration-color: rgb(240 184 90 / 0.4); }
.link:hover { text-decoration-color: var(--gold); }

/* ---------- downloads ---------- */
.dl-hero { display: grid; gap: var(--s4); justify-items: start; padding: clamp(1.75rem, 0.6rem + 5vw, 3.75rem); border-radius: var(--r3); border: 1px solid var(--line-2); background: radial-gradient(120% 140% at 50% -20%, rgb(242 104 60 / 0.14), transparent 60%), var(--surface); box-shadow: var(--hairline); margin-bottom: var(--s6); }
.dl-hero .btn-primary { min-height: 60px; font-size: var(--fs-body); }
.dl-meta { font: 500 var(--fs-mini) / 1.6 var(--mono); color: var(--ink-3); }
html[lang="th"] .dl-meta { font-family: var(--sans); font-size: var(--fs-small); line-height: 1.7; }
.cmd { display: flex; align-items: center; gap: var(--s2); }
.cmd[hidden] { display: none; }
.cmd code { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dl-status { color: var(--ink-2); }
.dl-status strong { color: var(--ink); }
.oses { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .oses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.os.is-yours { border-color: rgb(242 104 60 / 0.7); box-shadow: var(--hairline), 0 0 0 3px rgb(242 104 60 / 0.1); }
.os .win-bar { font-size: var(--fs-small); }
.os-yours { display: none; color: var(--coral); font-weight: 600; }
.os.is-yours .os-yours { display: inline; }
.files { list-style: none; display: grid; }
.file { display: grid; gap: var(--s2); padding: var(--s4); min-width: 0; }
.file + .file { border-top: 1px dashed var(--line); }
.file-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.file-name { font-weight: 600; }
.file-size { font: 500 var(--fs-mini) / 1 var(--mono); color: var(--ink-3); }
.file .btn { min-height: 44px; }
.hash { display: flex; align-items: flex-start; gap: var(--s2); min-width: 0; }
.hash code { flex: 1; min-width: 0; font: 400 var(--fs-mini) / 1.55 var(--mono); color: var(--ink-3); overflow-wrap: anywhere; word-break: break-all; user-select: all; }
.hash code b { color: var(--ink-2); font-weight: 500; }
.copy { flex: none; min-width: 44px; min-height: 44px; margin: -12px -8px -12px 0; padding: 0 var(--s2); border: 0; background: transparent; color: var(--gold); font: 600 var(--fs-mini) / 1 var(--mono); cursor: pointer; border-radius: var(--r1); }
html[lang="th"] .copy { font-family: var(--sans); font-size: var(--fs-small); }
.copy:hover { color: var(--ink); }
.os-note { padding: var(--s4); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-2); display: grid; gap: var(--s2); }
.os-note code { font: 500 var(--fs-mini) / 1.6 var(--mono); color: var(--ink); background: var(--raised); padding: 2px 6px; border-radius: var(--r1); overflow-wrap: anywhere; }
.os-empty { padding: var(--s4); color: var(--ink-3); font-size: var(--fs-small); }
.dl-foot { display: grid; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 960px) { .dl-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* the toast waits fully below the viewport (its own height + its bottom offset), invisible to AT and eyes */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-top);
  transform: translate(-50%, calc(100% + var(--s5) + 16px)); opacity: 0; visibility: hidden;
  padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--raised); border: 1px solid var(--line-2);
  box-shadow: var(--hairline), 0 20px 40px -20px #000; font-size: var(--fs-small); pointer-events: none;
  max-width: calc(100% - 2 * var(--gutter));
  transition: transform var(--dur-panel) var(--ease-panel), opacity var(--d2), visibility 0s linear var(--dur-panel);
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform var(--dur-panel) var(--ease-panel), opacity var(--d2), visibility 0s; }

/* ---------- FAQ ---------- */
.faq { display: grid; max-width: 52rem; }
.faq details { border-top: 1px dashed var(--line); }
.faq details:last-child { border-bottom: 1px dashed var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 56px; padding: var(--s3) 0; cursor: pointer; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; background: linear-gradient(var(--gold), var(--gold)) center / 12px 1.5px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 1.5px 12px no-repeat; transition: transform var(--dur-control) var(--ease-control); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--s4); color: var(--ink-2); max-width: 40em; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding-block: var(--s7); position: relative; z-index: var(--z-content); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.foot-brand { display: flex; align-items: center; gap: var(--s3); }
.foot-brand img { width: 36px; height: 36px; border-radius: 9px; }
.foot-brand p { color: var(--ink-2); font-size: var(--fs-small); }
.foot-brand strong { color: var(--ink); }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }
.foot small { font: 500 var(--fs-mini) / 1.6 var(--mono); color: var(--ink-3); }

/* ---------- reveal on scroll (decoration only; content is visible without JS) ---------- */
html.js .rv { opacity: 0; transform: translateY(16px); transition: opacity var(--d4) ease-out, transform var(--dur-panel) var(--ease-panel); transition-delay: var(--stg, 0ms); }
html.js .rv.in { opacity: 1; transform: none; }

/* ---------- reduced motion: per effect, information stays ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1; transform: none; transition: none; }  /* reveal is decoration: show at once */
  html.js .mark { opacity: 1; animation: none; }  /* the wordmark is simply there; the stage shows its resting light */
  .btn, .dest, .keys kbd, .mk, .toast { transition-duration: 1ms; }  /* state changes stay, motion goes */
  .led.is-drawn .on { animation: none; }  /* LEDs are simply on */
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- forced colors and print ---------- */
@media (forced-colors: active) {
  .mk, .legend li::before, .dest-state i, .mics i { forced-color-adjust: none; }
  .btn-primary { border-color: ButtonText; }
}
@media print {
  .top, .hero-stage, .anno, .flow-svg, .flow-packets, .toast, .rails, .skip, .lang { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { padding-top: 0; }
}

/* ---------- 404 ---------- */
.nf { min-height: 100svh; display: grid; place-items: center; text-align: center; background-image: radial-gradient(circle at center, var(--line) 0 0.9px, transparent 1.4px); background-size: 9px 9px; }
.nf-in { display: grid; justify-items: center; gap: var(--s3); padding-block: var(--s7); }
.nf h1 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.35; }
.nf-en { color: var(--ink-2); }
.nf img { width: 64px; height: 64px; border-radius: 15px; }