/* site.css — www.bdhcorporation.com
   One stylesheet for every public page. Nordic minimal: warm paper, ink,
   hairlines, one quiet signature (the spectrum of the logo's hexagon, used as
   a hairline and in the orbit — never as a fill behind text).
   Sections: tokens · fonts · base · layout · header · buttons · type ·
   hero · sections · architecture (orbit) · gallery · device · cards ·
   legal · contact · footer · motion · dark · print. */

/* ── fonts (self-hosted: no third-party request leaves the visitor's browser) */
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-300-latin.woff2") format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-300-latin-ext.woff2") format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-500-latin-ext.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2190-21FF, U+2212; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-024F; }
/* Thai: Anuphan — loopless and modern, sits well beside Poppins. Thai text in any font stack falls through to it. */
@font-face { font-family: "Anuphan"; src: url("/fonts/anuphan-thai.woff2") format("woff2"); font-weight: 100 700; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }

/* ── tokens */
:root {
  --paper: #F7F6F3;
  --paper-2: #EFEDE8;
  --surface: #FFFFFF;
  --ink: #16171A;
  --ink-2: #3A3C41;
  --muted: #5E6168;      /* 5.7:1 on paper, 5.3:1 on paper-2 */
  --faint: #64666D;      /* labels only; 5.3:1 on paper, 4.9:1 on paper-2 */
  --line: #E4E2DC;
  --line-2: #D3D0C8;
  --focus: #3B4BA8;
  --ok: #2A7347;
  --warn: #9A5B00;

  /* the logo's hexagon, walked clockwise from the top-left */
  --c1: #3B4BA8; --c2: #7B2F8F; --c3: #D2283F; --c4: #F07F2A; --c5: #EFC93A; --c6: #57B65F; --c7: #12A3A0;
  --spectrum: linear-gradient(90deg, var(--c1) 0%, var(--c2) 18%, var(--c3) 38%, var(--c4) 56%, var(--c5) 70%, var(--c6) 85%, var(--c7) 100%);
  /* the same walk, darkened so every stop keeps 4.4:1 as text on paper */
  --spectrum-text: linear-gradient(90deg, #3B4BA8 0%, #7B2F8F 18%, #C0233A 38%, #A85E1B 56%, #7A6400 70%, #2F7F3A 85%, #0B7F7C 100%);
  --field-border: #8A877F;

  /* After the self-hosted Latin and Thai faces, the visitor's own system fonts carry
     Japanese, Chinese, Korean, Arabic, Devanagari and Vietnamese (no CJK download). */
  --font-system: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "PingFang SC", "Microsoft YaHei", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK SC", "Noto Sans Arabic", "Geeza Pro", "Segoe UI Arabic", "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", "Noto Sans", sans-serif;
  /* The three font tokens below are today's defaults; /css/theme.css (built from the
     fonts chosen in the editor, linked right after this file) sets them again. */
  --font-display: "Poppins", "Anuphan", var(--font-system);
  --font-body: "Inter", "Anuphan", var(--font-system);
  --font-mono-fallback: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --font-mono: var(--font-mono-fallback);

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.25rem + 0.75vw, 1.85rem);
  --step-3: clamp(1.8rem, 1.5rem + 1.5vw, 2.75rem);
  --step-4: clamp(2.3rem, 1.8rem + 2.6vw, 4rem);
  --step-5: clamp(2.8rem, 2rem + 4vw, 5.6rem);

  --space-section: clamp(5.5rem, 4rem + 7vw, 11rem);
  --gutter: clamp(1.25rem, 0.8rem + 2.4vw, 2.5rem);
  --max: 75rem;
  --narrow: 44rem;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-1: 0 1px 2px rgb(22 23 26 / 0.04), 0 4px 14px rgb(22 23 26 / 0.05);
  --shadow-2: 0 1px 2px rgb(22 23 26 / 0.05), 0 18px 48px rgb(22 23 26 / 0.09);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --header-h: 72px;
  color-scheme: light;
}

/* ── base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font: 400 var(--step-0)/1.65 var(--font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html[lang="th"] body { line-height: 1.8; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--c1) 22%, transparent); color: var(--ink); }
h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-display); font-weight: 300; letter-spacing: -0.02em; line-height: 1.12; margin: 0; text-wrap: balance; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3 { letter-spacing: 0; line-height: 1.32; font-weight: 400; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }
strong { color: var(--ink); font-weight: 600; }
small { font-size: var(--step--1); }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.mt-2 { margin-top: 2rem; }
.mt-section { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.small { font-size: var(--step--1); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; border-radius: 8px; text-decoration: none; }
.skip-link:focus { top: 1rem; }

/* ── layout */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2 * var(--gutter), var(--narrow)); margin-inline: auto; }
.section { padding-block: var(--space-section); position: relative; }
.section + .section { border-top: 1px solid var(--line); }
.section--tint { background: var(--paper-2); }
.section--tight { padding-block: calc(var(--space-section) * 0.6); }
.grid { display: grid; gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: start; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--even { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ── header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand-logo { height: 34px; width: auto; }
.nav { display: flex; gap: 0.25rem; margin-inline-start: auto; }
.nav a, .lang-switch {
  font-size: 0.92rem; font-weight: 450; color: var(--ink-2); text-decoration: none;
  padding: 0.5rem 0.8rem; border-radius: 999px; transition: background-color 0.2s, color 0.2s;
}
.nav a:hover, .lang-switch:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.lang-switch { border: 1px solid var(--line-2); padding-inline: 0.85rem; }
.menu-btn { display: none; background: none; border: 0; color: var(--ink); width: 44px; height: 44px; border-radius: 999px; cursor: pointer; }
.menu-btn svg { margin: auto; }
.menu-btn .ic-close, .menu-btn[aria-expanded="true"] .ic-open { display: none; }
.menu-btn[aria-expanded="true"] .ic-close { display: block; }
.mobile-nav { display: none; }
@media (max-width: 880px) {
  .nav, .header-actions .btn { display: none; }
  .header-actions { margin-inline-start: auto; }
  .menu-btn { display: grid; place-items: center; }
  .mobile-nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; display: flex; flex-direction: column;
    background: var(--paper); padding: 1.5rem var(--gutter) 3rem; gap: 0.25rem;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  }
  .mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .mobile-nav a { font-family: var(--font-display); font-weight: 300; font-size: 1.6rem; color: var(--ink); text-decoration: none; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
  .mobile-nav a.btn { margin-top: 1.5rem; font-family: var(--font-body); font-size: 1rem; justify-content: center; border-bottom: 0; color: var(--paper); padding: 0.95rem 1.35rem; }
}

/* ── buttons & links */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font: 500 0.95rem/1 var(--font-body); letter-spacing: 0.005em;
  padding: 0.95rem 1.35rem; border-radius: 999px; text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  transition: transform 0.25s var(--ease), background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.btn:hover { color: var(--paper); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { color: var(--ink); background: var(--surface); border-color: var(--ink); }
.btn-small { padding: 0.6rem 1rem; font-size: 0.88rem; }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow, .link-arrow:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.link-arrow:hover { border-bottom-color: var(--ink); }

/* ── type helpers */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font: 500 0.75rem/1.2 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1.4rem;
}
html[lang="th"] .eyebrow { letter-spacing: 0.06em; font-size: 0.8rem; }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--spectrum); }
.display { font-size: var(--step-5); font-weight: 300; }
.h2 { font-size: var(--step-4); }
.h3 { font-size: var(--step-3); }
.h4 { font-size: var(--step-2); }
.h5 { font-size: var(--step-1); font-weight: 400; }
.lead { font-size: var(--step-1); line-height: 1.6; color: var(--ink-2); max-width: 38em; }
html[lang="th"] .lead { line-height: 1.75; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: 0.86em; letter-spacing: 0; }
.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.section-head .lead { margin-top: 1.4rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lead { margin-inline: auto; }
.tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font: 500 0.72rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.38rem 0.6rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap;
}
html[lang="th"] .tag { letter-spacing: 0.02em; font-size: 0.76rem; }
.tag--today { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.tag--today::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag--roadmap { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); border-style: dashed; }
.spectrum-rule { height: 2px; border: 0; background: var(--spectrum); border-radius: 2px; width: 64px; margin: 0; }

/* ── hero */
.hero { position: relative; padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(4rem, 3rem + 6vw, 8rem); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.hero h1 { font-size: var(--step-5); font-weight: 300; }
.hero h1 .accent { background: var(--spectrum-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 400; }
.hero .lead { margin-top: 1.8rem; }
.hero .hero-link { margin-top: 2.4rem; }
.quiet-links { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; }
.hero-art { position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; justify-self: center; }
.hero-art .mark { position: absolute; inset: 24%; width: 52%; height: auto; filter: drop-shadow(0 20px 40px rgb(22 23 26 / 0.12)); }
.hero-art svg.orbits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-ring { fill: none; stroke-width: 1; stroke: var(--line-2); }
.orbit-spin { transform-origin: 50% 50%; animation: spin 80s linear infinite; }
.orbit-spin--rev { animation-duration: 120s; animation-direction: reverse; }
.orbit-dot { fill: var(--ink); }
/* The orbiting stars: a white-gold core, a soft halo and four rays that twinkle. */
.orbit-star .star-core { fill: #F0B43A; }
.orbit-star .star-spark { fill: #E8A317; }
.orbit-star.cool .star-core { fill: #12A3A0; }
.orbit-star.cool .star-spark { fill: #3B4BA8; }
.orbit-star .star-twinkle { transform-box: fill-box; transform-origin: center; animation: star-twinkle 2.4s ease-in-out infinite; }
.orbit-star.cool .star-twinkle { animation-duration: 3.1s; animation-delay: -1.2s; }
.orbit-star .star-halo { transform-box: fill-box; transform-origin: center; animation: star-halo 2.4s ease-in-out infinite; }
@keyframes star-twinkle { 0%, 100% { transform: scale(0.72) rotate(0deg); opacity: 0.75; } 50% { transform: scale(1.12) rotate(12deg); opacity: 1; } }
@keyframes star-halo { 0%, 100% { transform: scale(0.85); opacity: 0.7; } 50% { transform: scale(1.1); opacity: 1; } }
@media (prefers-color-scheme: dark) {
  .orbit-star .star-core { fill: #FFFFFF; }
  .orbit-star .star-spark { fill: #FFF3CF; }
  .orbit-star.cool .star-core { fill: #E8FBFF; }
  .orbit-star.cool .star-spark { fill: #BFEAF0; }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 220px; margin-top: 2.5rem; }
}

/* ── statement */
.statement { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1.18; letter-spacing: -0.02em; color: var(--ink); max-width: 22ch; }
html[lang="th"] .statement { letter-spacing: 0; line-height: 1.38; max-width: 26ch; font-weight: 300; }
.statement .soft { color: var(--faint); }
/* The "why" block: the question alone at display size, the explanation as a
   normal paragraph beside it (below it on narrow screens). */
.why-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 1rem + 4vw, 5rem); align-items: end; margin-top: 1.2rem; }
.why-head .statement { max-width: 17ch; }
html[lang="th"] .why-head .statement { max-width: 20ch; }
.why-head .why-lead { margin: 0; color: var(--muted); max-width: 34em; text-wrap: pretty; }
.why-head > * { min-width: 0; }
/* minmax(0, 1fr): a column that keeps Japanese phrases whole must still never grow past the screen. */
@media (max-width: 860px) { .why-head { grid-template-columns: minmax(0, 1fr); } }
html[lang="ja"] .why-head :is(.statement, .why-lead) { overflow-wrap: anywhere; }
.triad { margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.triad > div { padding-block: 2rem 0; padding-inline: 0 2rem; }
.triad > div + div { padding-inline-start: 2rem; border-inline-start: 1px solid var(--line); }
.triad .k { font: 500 0.75rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.triad h3 { font-size: var(--step-2); margin: 0.9rem 0 0.7rem; }
.triad p { color: var(--muted); }
@media (max-width: 760px) {
  .triad { grid-template-columns: 1fr; }
  .triad > div, .triad > div + div { padding: 1.6rem 0; border-inline-start: 0; border-bottom: 1px solid var(--line); }
}

/* ── architecture: the BENTO orbit */
.arch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 1rem + 5vw, 6rem); }
.arch-steps { display: flex; flex-direction: column; }
.arch-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding-block: 2.5rem; opacity: 0.32; transition: opacity 0.6s var(--ease); }
.arch-step:first-child { min-height: 56vh; }
.arch-step.is-active, .arch-step:focus-within { opacity: 1; }
.arch-step .num { font: 500 0.78rem/1 var(--font-mono); color: var(--faint); letter-spacing: 0.04em; }
.arch-step h3 { font-size: var(--step-3); margin: 0.9rem 0 1rem; }
.arch-step .what { color: var(--ink-2); max-width: 32em; }
.arch-step ul { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 0.6rem; }
.arch-step li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: baseline; color: var(--ink-2); font-size: 0.97rem; }
.arch-step li .tag { justify-self: start; }
.arch-step .link-arrow { margin-top: 1.6rem; align-self: flex-start; }
.arch-stage { position: sticky; top: calc(var(--header-h) + 4vh); height: calc(92vh - var(--header-h)); display: grid; place-items: center; }
.orbit-figure { width: min(100%, 560px); aspect-ratio: 1; position: relative; margin: 0; }
.orbit-figure svg { width: 100%; height: 100%; overflow: visible; }
.of-ring { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.of-ring--faint { stroke: var(--line); stroke-dasharray: 2 6; }
.of-progress { fill: none; stroke: url(#spectrumStroke); stroke-width: 2.4; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease); }
.of-node circle.bg { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.2; transition: stroke 0.5s, fill 0.5s; }
.of-node .icon { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.5s; }
.of-node text { font: 500 13px var(--font-body); fill: var(--muted); transition: fill 0.5s;
  /* a halo of the page colour, so the progress arc and scene lines pass behind the names, not through them */
  paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.of-node text.n { font: 500 11px var(--font-mono); fill: var(--faint); }
.of-node.is-on circle.bg { stroke: var(--ink); }
.of-node.is-on .icon { stroke: var(--ink); }
.of-node.is-on text { fill: var(--ink); }
.of-node.is-done .icon { stroke: var(--ink-2); }
.of-node .narrow { display: none; }
.of-packet { transform-origin: 280px 280px; transition: transform 1.1s var(--ease); }
.of-packet .ring { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.of-packet .dot { fill: var(--ink); }
.of-packet .halo { fill: none; stroke: var(--ink); stroke-opacity: 0.16; animation: halo 2.8s var(--ease) infinite; transform-origin: center; transform-box: fill-box; }
.of-node { cursor: pointer; }
.of-center { position: absolute; inset: 31%; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 0.5rem; }
.of-center .chip { width: 100%; height: 100%; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); display: grid; place-items: center; padding: 14%; position: relative; overflow: hidden; }
.of-center .chip::after { content: ""; position: absolute; inset: auto 22% 14% 22%; height: 2px; border-radius: 2px; background: var(--spectrum); opacity: 0.8; }
.of-says { display: grid; }
.of-says > div { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.of-says > div.is-on { opacity: 1; transform: none; }
.of-says .k { font: 500 0.66rem/1.2 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.of-says .v { font: 400 clamp(0.9rem, 0.8rem + 0.5vw, 1.12rem)/1.3 var(--font-display); color: var(--ink); margin-top: 0.45rem; }
.of-says .s { font-size: 0.74rem; color: var(--muted); margin-top: 0.35rem; line-height: 1.4; }
.arch-loop-note { margin-top: 1rem; font-size: var(--step--1); color: var(--muted); text-align: center; }
@media (max-width: 960px) {
  .arch { grid-template-columns: 1fr; }
  .arch-stage { position: relative; top: auto; height: auto; order: -1; }
  .orbit-figure { width: min(100%, 420px); }
  .of-node text { font-size: 20px; }
  .of-node text.l2 { font-size: 15px; }   /* the two-line names */
  .of-node .wide { display: none; }        /* the Trainer's name in three short lines, clear of the larger centre disc */
  .of-node .narrow { display: inline; }
  .of-node text.n { display: none; }
  .of-center { inset: 27%; }
  .of-center .chip { padding: 10%; }
  .of-says .s { display: none; }
  .of-says .v { font-size: 0.9rem; }
  .arch-step, .arch-step:first-child { min-height: 0; opacity: 1; padding-block: 2rem; border-top: 1px solid var(--line); }
}

/* ── security trio */
.seal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.seal-grid > article { background: var(--surface); padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem); display: flex; flex-direction: column; gap: 0.9rem; }
.seal-grid .k { font: 500 0.72rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.seal-grid h3 { font-size: var(--step-2); }
.seal-grid p { color: var(--muted); font-size: 0.97rem; }
.seal-grid .glyph { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink); }
.seal-note { margin-top: 1.4rem; display: flex; gap: 0.8rem; align-items: flex-start; font-size: var(--step--1); color: var(--muted); max-width: 52rem; }
@media (max-width: 860px) { .seal-grid { grid-template-columns: 1fr; } }

/* ── gallery (highlights) */
.gallery { position: relative; }
.gallery-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 680px); gap: clamp(1rem, 0.6rem + 1.5vw, 1.75rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 0.5rem var(--gutter) 1.5rem; margin: 0; list-style: none; scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track > li { scroll-snap-align: start; }
.shot { margin: 0; }
.shot button { all: unset; display: block; width: 100%; cursor: zoom-in; border-radius: var(--radius); }   /* a block button still shrinks to its content: full width keeps the 4:3 frame before the lazy image loads */
.shot button:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.shot .frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; aspect-ratio: 4 / 3; display: grid; place-items: center; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.shot .frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.shot--contain .frame img { object-fit: contain; padding: 4%; }
.shot button:hover .frame { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.shot figcaption { margin-top: 1rem; display: grid; gap: 0.25rem; }
.shot figcaption b { font-weight: 500; color: var(--ink); }
.shot figcaption span { color: var(--muted); font-size: 0.95rem; }
.gallery-controls { display: none; gap: 0.5rem; justify-content: flex-end; margin-top: 0.5rem; }
.js .gallery-controls { display: flex; }
.icon-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: border-color 0.2s, transform 0.2s; }
.icon-btn:hover { border-color: var(--ink); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 92vh; }
.lightbox::backdrop { background: rgb(16 17 19 / 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox img { max-height: 84vh; width: auto; margin: auto; border-radius: 10px; background: #fff; }
.lightbox p { color: #EDECE8; text-align: center; margin-top: 0.8rem; font-size: 0.95rem; }
.lightbox .close { position: fixed; top: 1rem; inset-inline-end: 1rem; background: rgb(255 255 255 / 0.12); color: #fff; border: 0; }

/* ── device */
.device { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: center; }
.device-photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.device-photos figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-2); }
.device-photos figure:nth-child(2) { margin-top: 18%; }
.device-photos img { width: 100%; height: auto; }
.senses { margin-top: 2rem; display: grid; gap: 0; border-top: 1px solid var(--line); }
.senses > div { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.senses svg { color: var(--ink); margin-top: 0.15rem; }
.senses b { display: block; color: var(--ink); font-weight: 500; }
.senses span { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 960px) { .device { grid-template-columns: 1fr; } }

/* ── cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); display: flex; flex-direction: column; gap: 0.85rem; transition: border-color 0.3s, transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card h3 { font-size: var(--step-2); }
.card p { color: var(--muted); font-size: 0.97rem; }
.card .foot { margin-top: auto; padding-top: 0.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--ink); font-weight: 500; font-size: 0.92rem; }
.card .k { font: 500 0.72rem/1 var(--font-mono); color: var(--faint); letter-spacing: 0.04em; }
.scene-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.scene-list > div { padding-block: 1.6rem; padding-inline: 0 1.6rem; border-bottom: 1px solid var(--line); }
.scene-list > div:not(:nth-child(3n + 1)) { padding-inline-start: 1.6rem; border-inline-start: 1px solid var(--line); }
.scene-list h3 { font-size: var(--step-1); font-weight: 400; }
.scene-list p { color: var(--muted); font-size: 0.95rem; margin-top: 0.5rem; }
@media (max-width: 860px) {
  .scene-list { grid-template-columns: 1fr; }
  .scene-list > div, .scene-list > div:not(:nth-child(3n + 1)) { padding: 1.3rem 0; border-inline-start: 0; }
}

/* ── ventures (the family of companies) */
.ventures { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.ventures > * { background: var(--surface); padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem); display: flex; flex-direction: column; gap: 0.8rem; min-height: 15rem; text-decoration: none; color: inherit; }
.ventures > a:focus-visible { outline-offset: -4px; }
.ventures > a:hover { background: color-mix(in srgb, var(--surface) 92%, var(--paper-2)); }
.ventures .k { font: 500 0.72rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.ventures h3 { font-size: var(--step-3); }
.ventures .first h3 { font-size: var(--step-4); }
.ventures p { color: var(--muted); font-size: 0.97rem; }
.ventures .foot { margin-top: auto; font-weight: 500; color: var(--ink); font-size: 0.92rem; display: inline-flex; gap: 0.4rem; align-items: center; }
.ventures .next { background: transparent; border: 0; }
.ventures .next h3 { color: var(--faint); }
@media (max-width: 860px) { .ventures { grid-template-columns: 1fr; } .ventures > * { min-height: 0; } }

/* ── principles / facts */
.principles { counter-reset: p; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 1rem + 4vw, 5rem); }
.principles > div { padding: 1.8rem 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 3rem 1fr; gap: 0.5rem; }
.principles > div::before { counter-increment: p; content: counter(p, decimal-leading-zero); font: 500 0.78rem/1.9 var(--font-mono); color: var(--faint); }
.principles h3 { font-size: var(--step-1); font-weight: 400; margin-bottom: 0.5rem; }
.principles p { color: var(--muted); font-size: 0.97rem; }
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; } }
.facts { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; border-top: 1px solid var(--line); margin: 0; }
.facts dt, .facts dd { padding: 1rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.facts dt { color: var(--muted); font-size: 0.92rem; padding-inline-end: 1rem; }
.facts dd { color: var(--ink); }
@media (max-width: 620px) { .facts { grid-template-columns: 1fr; } .facts dt { border-bottom: 0; padding-bottom: 0; } }
.works-with { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.works-with span { padding: 0.65rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.92rem; color: var(--ink-2); }
.boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.boards > div { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; background: var(--surface); }
.boards b { display: block; color: var(--ink); font-weight: 500; }
.boards span { color: var(--muted); font-size: 0.9rem; }
@media (max-width: 860px) { .boards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .boards { grid-template-columns: 1fr; } }
.status-table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.status-table th, .status-table td { text-align: start; padding-block: 1rem; padding-inline: 0 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.status-table th { font: 500 0.72rem/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.status-table td:first-child { color: var(--ink); width: 34%; }
@media (max-width: 620px) {
  .status-table thead { display: none; }
  .status-table tr { display: grid; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
  .status-table td { border: 0; padding: 0.2rem 0; width: auto !important; }
}

/* ── CTA band */
.cta { text-align: center; }
.cta .h2 { max-width: 18ch; margin-inline: auto; }
.cta .lead { margin: 1.4rem auto 0; }
.cta .btn-row { justify-content: center; margin-top: 2.2rem; }

/* ── page heads (inner pages) */
.page-head { padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.page-head h1 { font-size: var(--step-5); max-width: 16ch; }
.page-head .lead { margin-top: 1.6rem; }
.breadcrumb { font-size: var(--step--1); color: var(--muted); margin-bottom: 1.6rem; }
.breadcrumb a { color: var(--muted); }

/* ── prose (legal pages and long text) */
.prose { color: var(--ink-2); max-width: 46rem; }
.prose h2 { font-size: var(--step-2); margin: 2.6em 0 0.8em; }
.prose h3 { font-size: var(--step-1); font-weight: 400; margin: 2em 0 0.6em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose li + li { margin-top: 0.35em; }
.prose a { color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.legal-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: start; }
.legal-nav { position: sticky; top: calc(var(--header-h) + 2rem); display: grid; gap: 0.2rem; }
.legal-nav a { text-decoration: none; color: var(--muted); padding: 0.45rem 0; border-inline-start: 2px solid transparent; padding-inline-start: 0.9rem; font-size: 0.95rem; }
.legal-nav a:hover { color: var(--ink); }
.legal-nav a[aria-current="page"] { color: var(--ink); border-inline-start-color: var(--ink); }
.legal-meta { font-size: var(--step--1); color: var(--muted); margin-bottom: 2.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
@media (max-width: 860px) { .legal-layout { grid-template-columns: 1fr; } .legal-nav { position: static; display: flex; flex-wrap: wrap; gap: 0.4rem; } .legal-nav a { border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.8rem; } .legal-nav a[aria-current="page"] { border-color: var(--ink); } }

/* ── contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: start; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } }
.form { display: grid; gap: 1.1rem; }
.form .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; }
@media (max-width: 620px) { .form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.9rem; color: var(--ink); font-weight: 500; }
.field .opt { color: var(--faint); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--field-border); border-radius: 12px; padding: 0.85rem 1rem; width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 10rem; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #B42318; }
.field .err { color: #B42318; font-size: 0.85rem; min-height: 0; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.consent { font-size: 0.88rem; color: var(--muted); }
.form-status { padding: 1rem 1.2rem; border-radius: 12px; font-size: 0.95rem; }
.form-status:empty { padding: 0; border: 0; }
.form-status.is-ok { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.form-status.is-err { background: #FEF3F2; color: #B42318; border: 1px solid #FDA29B; }
.contact-aside { display: grid; gap: 1.6rem; }
.contact-aside .block { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.contact-aside .k { font: 500 0.72rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.6rem; }
.contact-aside a { color: var(--ink); }

/* ── footer */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) 2.5rem; font-size: 0.93rem; color: var(--muted); position: relative; }
.site-footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--spectrum); opacity: 0.55; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.site-footer a { overflow-wrap: anywhere; }
.footer-brand img { height: 40px; width: auto; }
.footer-brand p { margin-top: 1.2rem; max-width: 30ch; }
.site-footer h2 { font: 500 0.72rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 1rem; }
html[lang="th"] .site-footer h2 { letter-spacing: 0.04em; font-size: 0.78rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.legal-entity { margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line); display: grid; gap: 0.3rem; font-size: 0.86rem; }
.legal-entity .name { color: var(--ink); font-weight: 500; }
.footer-bottom { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; justify-content: space-between; font-size: 0.82rem; color: var(--faint); }
.footer-bottom p { max-width: 70ch; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .footer-brand { grid-column: 1 / -1; } }

/* ── motion */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes halo { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js [data-reveal="1"] { transition-delay: 90ms; } .js [data-reveal="2"] { transition-delay: 180ms; } .js [data-reveal="3"] { transition-delay: 270ms; } .js [data-reveal="4"] { transition-delay: 360ms; }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.hero-copy > * { animation: rise 0.9s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.08s; } .hero-copy > :nth-child(3) { animation-delay: 0.16s; } .hero-copy > :nth-child(4) { animation-delay: 0.24s; } .hero-copy > :nth-child(5) { animation-delay: 0.32s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero .orbit-draw { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 2.4s var(--ease) 0.2s forwards; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero-copy > * { animation: rise 0.9s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.08s; } .hero-copy > :nth-child(3) { animation-delay: 0.16s; } .hero-copy > :nth-child(4) { animation-delay: 0.24s; } .hero-copy > :nth-child(5) { animation-delay: 0.32s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero .orbit-draw { stroke-dashoffset: 0; }
  @view-transition { navigation: none; }
}

/* ── dark */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111214; --paper-2: #16171A; --surface: #1B1C20; --ink: #F2F1EE; --ink-2: #CFCFCB; --muted: #A3A5AA; --faint: #8A8C92;
    --line: #26272C; --line-2: #34353B; --focus: #8EA0FF; --ok: #63C38A; --warn: #E3A44A;
    --field-border: #76767C;
    --spectrum-text: linear-gradient(90deg, #7D8BE0 0%, #B36FC6 18%, #D2283F 38%, #F07F2A 56%, #EFC93A 70%, #57B65F 85%, #12A3A0 100%);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.25);
    --shadow-2: 0 1px 2px rgb(0 0 0 / 0.35), 0 18px 48px rgb(0 0 0 / 0.4);
    color-scheme: dark;
  }
  .form-status.is-err { background: #2A1514; color: #FDA29B; border-color: #7A271A; }
  .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #F97066; color: var(--ink); }
  .hero-art .mark { filter: drop-shadow(0 20px 50px rgb(0 0 0 / 0.5)); }
}

/* ── the editor's own shortcut (site.js adds it only in a tab signed in to /admin/) */
.edit-this { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 70; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.65rem 1.05rem; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 0.88rem/1 var(--font-body); text-decoration: none; box-shadow: var(--shadow-2); }
.edit-this::before { content: "✎"; }
.edit-this:hover { color: var(--paper); transform: translateY(-1px); }
@media print { .edit-this { display: none; } }

/* ── image credits under the home page's sky (CC BY 4.0 asks for them to be shown clearly) */
.image-credits { padding-block: 2.2rem 2.6rem; border-top: 1px solid var(--line); }
.image-credits p { margin: 0; font-size: 0.8rem; line-height: 1.6; color: var(--faint); max-width: 70rem; }
.image-credits details { margin-top: 0.8rem; font-size: 0.8rem; color: var(--faint); }
.image-credits summary { cursor: pointer; color: var(--muted); width: fit-content; }
.image-credits ul { margin: 0.8rem 0 0; padding-inline-start: 1.1rem; display: grid; gap: 0.35rem; line-height: 1.5; }
.image-credits a { color: var(--muted); }

/* ── print */
@media print {
  .site-header, .mobile-nav, .gallery-controls, .site-footer::before, .btn-row, .arch-stage { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  .arch-step { opacity: 1 !important; min-height: 0 !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ── product pages (BENTO) */
.mt-1 { margin-top: 1rem; }
.jump { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.jump a { text-decoration: none; font-size: 0.9rem; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.5rem 0.95rem; transition: border-color 0.2s, background-color 0.2s; }
.jump a:hover { border-color: var(--ink); background: var(--surface); }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.checks li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.checks li .tag { justify-self: start; }
.checks li p { color: var(--ink-2); }
@media (max-width: 520px) { .checks li { grid-template-columns: 1fr; gap: 0.5rem; } }
.shot-static { margin: 0; }
.shot-static img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); }
.shot-static figcaption { margin-top: 0.8rem; font-size: 0.92rem; color: var(--muted); }
.shots-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 0.6rem + 1.5vw, 2rem); align-items: start; }
@media (max-width: 860px) { .shots-3 { grid-template-columns: 1fr; } }

/* ── security chain (six steps, each closes one attack) */
.chain { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; counter-reset: c; }
.chain li { background: var(--surface); padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); display: flex; flex-direction: column; gap: 0.6rem; }
.chain .n { font: 500 0.78rem/1 var(--font-mono); color: var(--faint); }
.chain h3 { font-size: var(--step-1); font-weight: 400; }
.chain p { color: var(--muted); font-size: 0.95rem; }
.chain .closes { margin-top: auto; padding-top: 0.8rem; border-top: 1px dashed var(--line-2); color: var(--ink-2); font-size: 0.9rem; }
.chain .closes::before { content: "✕ "; color: var(--c3); }
.crypto { margin-top: 1.2rem; color: var(--muted); font-size: 0.82rem; }
@media (max-width: 960px) { .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .chain { grid-template-columns: 1fr; } }
.founder-photo { width: min(100%, 280px); border-radius: var(--radius-lg); }

/* ── pricing */
.notice { display: flex; gap: 0.9rem; align-items: baseline; padding: 1.1rem 1.3rem; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--surface); color: var(--ink-2); max-width: 60rem; }
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.offer { background: var(--surface); padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem); display: flex; flex-direction: column; gap: 0.8rem; }
.offer .k { font: 500 0.72rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.offer > p { color: var(--muted); }
.offer dl { margin: auto 0 0; padding-top: 1rem; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.2rem; border-top: 1px solid var(--line); font-size: 0.94rem; }
.offer dt { color: var(--muted); }
.offer dd { margin: 0; color: var(--ink); }
@media (max-width: 760px) { .offers { grid-template-columns: 1fr; } }
.page-head--legal { padding-bottom: 1rem; }

/* ── sovereign: stat tiles (label · value · source), tiers, scale ladder */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.stat { padding-block: 1.6rem 0; padding-inline: 0 1.6rem; }
.stat + .stat { padding-inline-start: 1.6rem; border-inline-start: 1px solid var(--line); }
.stat .label { font-size: 0.92rem; color: var(--ink-2); }
.stat .value { font: 600 clamp(2rem, 1.6rem + 1.6vw, 2.75rem)/1.1 var(--font-body); color: var(--ink); letter-spacing: -0.02em; margin-top: 0.6rem; }
.stat .src { font-size: var(--step--1); color: var(--muted); margin-top: 0.6rem; }
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr; }
  .stat, .stat + .stat { padding: 1.3rem 0; border-inline-start: 0; border-bottom: 1px solid var(--line); }
}
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.tier { background: var(--surface); padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); display: flex; flex-direction: column; gap: 0.7rem; }
.tier .k { font: 500 0.72rem/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
html[lang="th"] .tier .k { letter-spacing: 0.02em; font-size: 0.78rem; }
.tier h3 { font-size: var(--step-2); }
.tier .door-link { margin-top: auto; padding-top: 0.6rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.tier .door-link br { display: none; }
.tier p { color: var(--muted); font-size: 0.95rem; }
.tier--top { position: relative; }
.tier--top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--spectrum); }
@media (max-width: 960px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tiers { grid-template-columns: 1fr; } }
.ladder { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-2); }
.ladder li { padding-block: 1.4rem 0; padding-inline: 0 1.2rem; display: grid; gap: 0.45rem; align-content: start; position: relative; }
.ladder li + li { padding-inline-start: 1.2rem; border-inline-start: 1px solid var(--line); }
.ladder .n { font: 500 0.78rem/1 var(--font-mono); color: var(--faint); }
.ladder b { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); color: var(--ink); }
.ladder li span:last-child { color: var(--muted); font-size: 0.93rem; }
@media (max-width: 960px) {
  .ladder { grid-template-columns: 1fr; }
  .ladder li, .ladder li + li { padding: 1.1rem 0; border-inline-start: 0; border-bottom: 1px solid var(--line); }
}
.split--media { align-items: center; }

/* ── languages: the picker, scripts that must not be tracked, right-to-left */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; font-weight: 450; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.5rem 0.85rem; min-height: 40px; transition: background-color 0.2s, color 0.2s; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.lang-menu summary svg { flex: none; }
.lang-list { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60; width: min(360px, calc(100vw - 2rem)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 4px; padding: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-2); }
.lang-list a { display: block; padding: 0.5rem 0.7rem; border-radius: 8px; text-decoration: none; color: var(--ink-2); font-size: 0.92rem; line-height: 1.35; text-align: start; unicode-bidi: plaintext; overflow-wrap: anywhere; }
.lang-list a:hover { background: var(--paper-2); color: var(--ink); }
.lang-list a[aria-current="true"] { color: var(--ink); font-weight: 600; background: var(--paper-2); }
@media (max-width: 880px) { .lang-menu summary span { display: none; } .lang-menu summary { padding: 0.5rem 0.7rem; } }
/* Letter-spacing breaks Arabic joining and Devanagari conjuncts; CJK needs none. */
html:is([lang="ar"], [lang="hi"], [lang="ja"], [lang="zh"], [lang="ko"]) :is(h1, h2, h3, h4, .eyebrow, .tag, .k, .statement, .stat .value, .site-footer h2, .tier .k) { letter-spacing: 0; }
html[lang="ar"] * { letter-spacing: 0 !important; }
html:is([lang="ar"], [lang="hi"], [lang="ja"], [lang="zh"], [lang="ko"]) body { line-height: 1.85; }
html:is([lang="ar"], [lang="hi"], [lang="ja"], [lang="zh"], [lang="ko"]) :is(h1, h2, h3) { line-height: 1.35; font-weight: 400; }
/* Japanese has no spaces: break at phrase boundaries (Chrome 119+), never mid-word.
   Korean keeps whole words; Chinese breaks between characters as usual. */
html[lang="ja"] :is(h1, h2, h3, h4, p, li, dd, .lead, .statement) { word-break: auto-phrase; }
html[lang="ko"] :is(h1, h2, h3, .lead, .statement) { word-break: keep-all; overflow-wrap: anywhere; }
/* Long compound words (German, French) wrap with hyphens instead of running past the box. */
h1, h2, h3, .statement { overflow-wrap: break-word; }
/* Only German needs hyphenation for its long compounds; elsewhere a split word in a headline reads as a mistake. */
html[lang="de"] :is(h1, h2, h3, .statement) { hyphens: auto; }
[dir="rtl"] .arrow { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arrow, [dir="rtl"] .link-arrow:hover .arrow { transform: scaleX(-1) translateX(3px); }
.translation-note { font-size: var(--step--1); color: var(--muted); border: 1px dashed var(--line-2); border-radius: 12px; padding: 0.8rem 1rem; margin-bottom: 1.6rem; }

/* ── firmware: the three cores */
.cores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cores article { background: var(--surface); padding: 1.1rem 1.2rem; display: grid; gap: 0.45rem; align-content: start; }
.cores .k { font: 500 0.72rem/1.2 var(--font-mono); color: var(--faint); }
.cores h4 { font-size: var(--step-0); font-weight: 500; color: var(--ink); }
.cores article > p:last-child { color: var(--muted); font-size: 0.92rem; }
@media (max-width: 760px) { .cores { grid-template-columns: 1fr; } }

/* ── the home page as a map of the universe (public/js/universe.js draws it on
   a fixed canvas behind the content). Tinted sections let it show through. */
.universe { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.universe canvas { display: block; width: 100%; height: 100%; }
html:has([data-universe]) .section--tint { background: color-mix(in srgb, var(--paper-2) 50%, transparent); }
/* Over the moving sky a backdrop blur would be recomputed every frame while scrolling: the header is near-solid instead (header blur off). */
html:has([data-universe]) .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
/* Under the night sky the dark theme goes deep-space black (owner, 2026-10-13: "ไม่ดำเท่าไหร่"). */
@media (prefers-color-scheme: dark) {
  html:has([data-universe]) { --paper: #060709; --paper-2: #0b0c0f; --surface: #121317; --line: #1d1e23; --line-2: #2a2b31; }
}
/* Over the sky, text gets a soft halo in the page colour so it stays readable over a galaxy. */
html:has([data-universe]) main :is(h1, h2, h3, p, li, .eyebrow, .lead) { text-shadow: 0 0 14px var(--paper), 0 0 4px var(--paper); }
/* Gradient (background-clip: text) words have transparent glyphs: a shadow would show through them. */
html:has([data-universe]) main .accent { text-shadow: none; }
.hero > .wrap { position: relative; z-index: 1; }
/* Off screen nothing in the hero animates (site.js sets .is-off). */
.js .hero.is-off *, .js .hero.is-off *::before, .js .hero.is-off *::after { animation-play-state: paused !important; }
.js .orbit-figure:not(.is-live) .of-packet .halo { animation-play-state: paused; }
@media print { .universe { display: none; } }

/* ── orbit scenes: one drawing per step behind the ring, built from what each
   part really does (research briefs 2026-10-13). Only the active scene shows;
   the others, and every scene while the figure is off screen, are paused.
   Each animation's base style is its still frame, so reduced motion (which
   ends every animation at once) leaves a complete, quiet picture. */
.scenes { --sc: color-mix(in srgb, var(--ink) 30%, transparent); --sc-2: color-mix(in srgb, var(--ink) 14%, transparent); --sc-fill: color-mix(in srgb, var(--ink) 4%, transparent); --sc-acc: #3B4BA8; }
.scene[data-scene="0"] { --sc-acc: #3B4BA8; }
.scene[data-scene="1"] { --sc-acc: #2F7F3A; }   /* the colour follows the product: 1 Trainer, 2 Store, 3 IDE */
.scene[data-scene="2"] { --sc-acc: #C0233A; }
.scene[data-scene="3"] { --sc-acc: #7B2F8F; }
.scene[data-scene="4"] { --sc-acc: #0B7F7C; }
@media (prefers-color-scheme: dark) {
  .scene[data-scene="0"] { --sc-acc: #7D8BE0; }
  .scene[data-scene="1"] { --sc-acc: #57B65F; }
  .scene[data-scene="2"] { --sc-acc: #E5485D; }
  .scene[data-scene="3"] { --sc-acc: #B36FC6; }
  .scene[data-scene="4"] { --sc-acc: #12A3A0; }
}
.scene { opacity: 0; visibility: hidden; transition: opacity 0.7s var(--ease), visibility 0s linear 0.7s; }
.scene.is-on { opacity: 1; visibility: visible; transition: opacity 0.9s var(--ease) 0.1s, visibility 0s; }
.scene:not(.is-on) *, .js .orbit-figure:not(.is-live) .scene * { animation-play-state: paused; }

.sc-frame { fill: var(--sc-fill); stroke: var(--sc-2); stroke-width: 1; }
.sc-chip { font: 600 9px/1 var(--font-body); fill: var(--muted); letter-spacing: 0.02em; }
.sc-t { font: 600 8.5px var(--font-mono); fill: var(--muted); letter-spacing: 0.04em; }
.sc-l { fill: none; stroke: var(--sc); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.sc-2 { fill: none; stroke: var(--sc-2); stroke-width: 1; stroke-linecap: round; }
.sc-node { fill: var(--surface); stroke: var(--sc); stroke-width: 1.2; }
.sc-node.is-hot { stroke: var(--sc-acc); }
.sc-acc { fill: none; stroke: var(--sc-acc); stroke-width: 1.6; stroke-linecap: round; }
.sc-p { fill: none; stroke: var(--sc-acc); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 90; animation: sc-run 3.4s linear infinite; }
.sc-p.f { animation-duration: 1.7s; }
.sc-p.d2 { animation-delay: -0.85s; }
.sc-p.r1 { animation-delay: -1.1s; }
.sc-p.r2 { animation-delay: -2.3s; }
.sc-good, .sc-check, .sc-human { fill: none; stroke: var(--sc-acc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }

/* shared by other scenes: sc-mac (Device), sc-led (Trainer), sc-check (Store) */
.sc-mac { fill: var(--sc-acc); fill-opacity: 0.12; animation: sc-px 2.4s ease-in-out infinite; }
.sc-led { fill: var(--sc-acc); fill-opacity: 0.2; stroke: var(--sc); stroke-width: 0.8; animation: sc-led 4s ease-in-out infinite; }
.sc-check.late { animation: sc-late 7s ease-out infinite backwards; }

/* 2 · Trainer */
.sc-loop { fill: none; stroke: var(--sc-2); stroke-width: 1.2; stroke-dasharray: 2 6; transform-origin: 280px 280px; animation: sc-spin 90s linear infinite; }
.sc-stn { fill: var(--surface); stroke: var(--sc); stroke-width: 1.4; animation: sc-stn 10s linear infinite backwards; }
.sc-opt { fill: var(--sc-2); }
.sc-opt.is-pick { fill: var(--sc); animation: sc-pick 10s linear infinite backwards; }
.sc-human { animation: sc-human 10s ease-out infinite backwards; }
.sc-agent { transform-origin: 280px 280px; animation: sc-spin 10s linear infinite; }
.sc-agent path { fill: var(--sc-acc); }
.sc-span { fill: color-mix(in srgb, var(--sc-acc) 14%, transparent); transform-box: fill-box; transform-origin: 0 50%; animation: sc-sweep 4s var(--ease) infinite backwards; }
.sc-wave { fill: none; stroke: var(--sc-acc); stroke-width: 1.4; stroke-linejoin: round; animation: sc-scroll 1.8s linear infinite; }
.sc-wave.w2 { stroke: var(--sc); animation-duration: 2.4s; }
.sc-rec { fill: var(--c3); animation: sc-blink 1.2s steps(1) infinite; }
.sc-gate { fill: var(--sc-acc); transform-box: fill-box; transform-origin: 50% 100%; animation: sc-rise 7s var(--ease) infinite backwards; }
.sc-fan { fill: none; stroke: var(--sc); stroke-width: 1.1; stroke-dasharray: 4 2.3; transform-box: fill-box; transform-origin: center; animation: sc-spin 2.4s linear infinite; }
.sc-keyg { fill: none; stroke: var(--sc-acc); stroke-width: 1.4; stroke-linecap: round; }
.sc-parcel { opacity: 0; animation: sc-up 3s var(--ease) infinite backwards; }
.sc-parcel rect { fill: var(--surface); stroke: var(--sc-acc); stroke-width: 1.1; }
.sc-parcel.q1 { animation-delay: 1s; }
.sc-parcel.q2 { animation-delay: 2s; }
.sc-track { fill: color-mix(in srgb, var(--sc-acc) 30%, transparent); stroke: var(--sc); stroke-width: 1; animation: sc-trk 6s var(--ease) infinite backwards; }
.sc-knob2 { fill: var(--sc); transform: translateX(8px); animation: sc-on 6s var(--ease) infinite backwards; }

/* 3 · Store */
.sc-route { fill: none; stroke: var(--sc-2); stroke-width: 1.2; stroke-dasharray: 2 6; }
.sc-trail { fill: none; stroke: var(--sc-acc); stroke-width: 2.4; stroke-linecap: round; }
.sc-capsule rect { fill: var(--surface); stroke: var(--sc-acc); stroke-width: 1.6; }
.sc-capsule path { fill: none; stroke: var(--sc-acc); stroke-width: 1.4; }
.sc-capsule .sc-lock { fill: var(--sc-acc); stroke: none; }
.sc-play { fill: var(--sc); }
.sc-play.is-hot { fill: var(--sc-acc); }
.sc-eq { fill: var(--sc-acc); transform-box: fill-box; transform-origin: 50% 100%; animation: sc-eq 0.9s ease-in-out infinite; }
.sc-eq.e1 { animation-delay: -0.2s; }
.sc-eq.e2 { animation-delay: -0.45s; }
.sc-eq.e3 { animation-delay: -0.7s; }
.sc-eq.idle { fill: var(--sc-2); animation: none; transform: scaleY(0.4); }
.sc-good { animation: sc-ok 4s ease-out infinite backwards; }
.sc-good.c1 { animation-delay: 0.4s; }
.sc-good.c3 { animation-delay: 0.8s; }
.sc-bad { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.sc-why { fill: none; stroke: var(--c3); stroke-opacity: 0.6; stroke-width: 1.4; stroke-dasharray: 2 2.5; }
.sc-scan { fill: var(--sc-acc); fill-opacity: 0.5; animation: sc-scanx 4s ease-in-out infinite; }
.sc-keyid { fill: none; stroke: var(--sc-acc); stroke-width: 2; stroke-linecap: round; }
.sc-screen { fill: var(--sc-acc); stroke: var(--sc-2); }

/* 4 · PSOC Edge */
.sc-ring { fill: none; stroke: var(--sc-acc); stroke-opacity: 0.5; stroke-width: 1; }
.sc-wave4 { fill: none; stroke: var(--sc-acc); stroke-width: 1.2; vector-effect: non-scaling-stroke; transform-origin: 280px 280px; opacity: 0; animation: sc-wave 5.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.sc-wave4.w1 { animation-delay: -1.8s; }
.sc-wave4.w2 { animation-delay: -3.6s; }
.sc-out { fill: none; stroke: var(--sc-acc); stroke-width: 1.4; stroke-linecap: round; opacity: 0.5; animation: sc-seq 2.4s linear infinite backwards; }
.sc-out.a1 { animation-delay: 0.25s; }
.sc-out.a2 { animation-delay: 0.5s; }
.sc-back { fill: none; stroke: var(--sc); stroke-width: 1.2; stroke-linecap: round; opacity: 0.5; animation: sc-seq 2.4s linear infinite backwards; }
.sc-back.b0 { animation-delay: 1s; }
.sc-back.b1 { animation-delay: 1.25s; }
.sc-axes { transform-box: fill-box; transform-origin: 0 100%; animation: sc-tilt 4s ease-in-out infinite; }
.sc-mic { fill: var(--surface); stroke: var(--sc); stroke-width: 1.2; animation: sc-micw 6s linear infinite backwards; }
.sc-thr { fill: none; stroke: var(--sc); stroke-width: 1; stroke-dasharray: 3 3; animation: sc-thr 6s linear infinite; }
.sc-quiet { fill: none; stroke: var(--sc); stroke-width: 1.3; animation: sc-quiet 6s linear infinite; }
.sc-burst { fill: none; stroke: var(--sc-acc); stroke-width: 1.5; opacity: 0; animation: sc-burst 6s linear infinite; }
.sc-flip { transform-box: fill-box; transform-origin: center; animation: sc-flip 4s ease-in-out infinite; }
.sc-face { fill: color-mix(in srgb, var(--sc-acc) 10%, var(--surface)); stroke: var(--sc-acc); stroke-width: 1.2; }

.scene[data-scene="4"] .sc-mac.d1 { animation-delay: 0.12s; }
.scene[data-scene="4"] .sc-mac.d2 { animation-delay: 0.24s; }
.scene[data-scene="4"] .sc-mac.d3 { animation-delay: 0.36s; }
.scene[data-scene="4"] .sc-mac.d4 { animation-delay: 0.48s; }
.scene[data-scene="4"] .sc-mac.d5 { animation-delay: 0.60s; }
.scene[data-scene="4"] .sc-mac.d6 { animation-delay: 0.72s; }
.scene[data-scene="4"] .sc-mac.d7 { animation-delay: 0.84s; }
.scene[data-scene="4"] .sc-mac.d8 { animation-delay: 0.96s; }
.sc-stn.s1 { animation-delay: 2s; }
.sc-opt.is-pick.s1 { animation-delay: 2.3s; }
.sc-stn.s2 { animation-delay: 4s; }
.sc-opt.is-pick.s2 { animation-delay: 4.3s; }
.sc-stn.s3 { animation-delay: 6s; }
.sc-opt.is-pick.s3 { animation-delay: 6.3s; }
.sc-stn.s4 { animation-delay: 8s; }
.sc-opt.is-pick.s4 { animation-delay: 8.3s; }
.sc-opt.is-pick.s0 { animation-delay: 0.3s; }
.sc-human.s1 { animation-delay: 2.6s; }
.sc-human.s4 { animation-delay: 8.6s; }
.sc-gate.g1 { animation-delay: 0.22s; }
.sc-gate.g2 { animation-delay: 0.44s; }
.sc-gate.g3 { animation-delay: 0.66s; }
.sc-gate.g4 { animation-delay: 0.88s; }
.sc-gate.g5 { animation-delay: 1.10s; }
.sc-gate.g6 { animation-delay: 1.32s; }
.sc-gate.g7 { animation-delay: 1.54s; }
.sc-gate.g8 { animation-delay: 1.76s; }
.sc-gate.g9 { animation-delay: 1.98s; }
.sc-gate.g10 { animation-delay: 2.20s; }
.sc-gate.g11 { animation-delay: 2.42s; }
.sc-gate.g12 { animation-delay: 2.64s; }
.sc-gate.g13 { animation-delay: 2.86s; }
.sc-toggle.x1 .sc-track, .sc-toggle.x1 .sc-knob2 { animation-delay: 0.5s; }
.sc-toggle.x2 .sc-track, .sc-toggle.x2 .sc-knob2 { animation-delay: 1.0s; }
.sc-toggle.x3 .sc-track, .sc-toggle.x3 .sc-knob2 { animation-delay: 1.5s; }
.sc-toggle.x4 .sc-track, .sc-toggle.x4 .sc-knob2 { animation-delay: 2.0s; }
.sc-toggle.x5 .sc-track, .sc-toggle.x5 .sc-knob2 { animation-delay: 2.5s; }
.sc-mic.m1 { animation-delay: 0.05s; }
.sc-mic.m2 { animation-delay: 0.10s; }
.sc-mic.m3 { animation-delay: 0.15s; }
.sc-mic.m4 { animation-delay: 0.20s; }
.sc-mic.m5 { animation-delay: 0.25s; }
.scene[data-scene="4"] .sc-good.c1 { animation-delay: 2s; }

@keyframes sc-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sc-px { 0%, 100% { fill-opacity: 0.12; } 50% { fill-opacity: 0.85; } }
@keyframes sc-ok { 0%, 8% { stroke-dashoffset: 100; } 20%, 85% { stroke-dashoffset: 0; } 95%, 100% { stroke-dashoffset: 100; } }
@keyframes sc-led { 0%, 35%, 100% { fill-opacity: 0.2; } 50%, 85% { fill-opacity: 1; } }
@keyframes sc-late { 0%, 50% { stroke-dashoffset: 100; } 60%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
@keyframes sc-stn { 0%, 100% { stroke: var(--sc); stroke-width: 1.4; } 2%, 12% { stroke: var(--sc-acc); stroke-width: 2.4; } 18% { stroke: var(--sc); stroke-width: 1.4; } }
@keyframes sc-pick { 0%, 100% { fill: var(--sc); } 3%, 14% { fill: var(--sc-acc); } 20% { fill: var(--sc); } }
@keyframes sc-human { 0%, 2% { stroke-dashoffset: 100; } 8%, 30% { stroke-dashoffset: 0; } 36%, 100% { stroke-dashoffset: 100; } }
@keyframes sc-sweep { 0%, 10% { transform: scaleX(0); } 50%, 100% { transform: scaleX(1); } }
@keyframes sc-scroll { from { transform: translateX(0); } to { transform: translateX(-40px); } }
@keyframes sc-rise { 0%, 3% { transform: scaleY(0); } 10%, 100% { transform: scaleY(1); } }
@keyframes sc-up { 0% { transform: translateY(8px); opacity: 0; } 25% { opacity: 1; } 75% { transform: translateY(-6px); opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes sc-trk { 0%, 8% { fill: var(--sc-fill); } 16%, 100% { fill: color-mix(in srgb, var(--sc-acc) 30%, transparent); } }
@keyframes sc-on { 0%, 8% { transform: none; } 16%, 100% { transform: translateX(8px); } }
@keyframes sc-eq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@keyframes sc-scanx { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(128px); } }
@keyframes sc-wave { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes sc-seq { 0%, 100% { opacity: 0.15; } 10%, 25% { opacity: 1; } 40% { opacity: 0.15; } }
@keyframes sc-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg); } }
@keyframes sc-micw { 0%, 62%, 88%, 100% { stroke: var(--sc); } 66%, 84% { stroke: var(--sc-acc); } }
@keyframes sc-thr { 0%, 64%, 86%, 100% { stroke: var(--sc); } 68%, 82% { stroke: var(--sc-acc); } }
@keyframes sc-quiet { 0%, 60%, 88%, 100% { opacity: 1; } 64%, 84% { opacity: 0; } }
@keyframes sc-burst { 0%, 60%, 88%, 100% { opacity: 0; } 64%, 84% { opacity: 1; } }
@keyframes sc-flip { 0%, 30% { transform: scaleX(1); } 40% { transform: scaleX(0.05) skewY(6deg); } 50%, 100% { transform: scaleX(1); } }

/* 0 · firmware, "Chambers of Light" (concept 1B) and 3 · IDE, "Current to
   Silicon" (concept 4B), the owner's choices of 2026-10-13: the boards' own
   keyframes and classes (prefixes s1b- and s4b-, timing unchanged). Hidden and
   off-screen scenes pause them like every other scene (.scene:not(.is-on) *),
   reduced motion removes them (.scenes *), and site.js rewinds the SMIL clock
   (and 4B's keyframes, which share it) whenever the scene is shown. */
@keyframes s1b-breathe { 0% { opacity: .72; } 50% { opacity: 1; } 100% { opacity: .72; } }
@keyframes s1b-drift-a { 0% { transform: translate(0px,0px); } 50% { transform: translate(14px,8px); } 100% { transform: translate(0px,0px); } }
@keyframes s1b-drift-b { 0% { transform: translate(0px,0px); } 50% { transform: translate(-12px,-9px); } 100% { transform: translate(0px,0px); } }
@keyframes s1b-dust-a { 0% { transform: translate(0px,0px); opacity: .15; } 50% { transform: translate(5px,-7px); opacity: .55; } 100% { transform: translate(0px,0px); opacity: .15; } }
@keyframes s1b-dust-b { 0% { transform: translate(0px,0px); opacity: .5; } 50% { transform: translate(-6px,4px); opacity: .12; } 100% { transform: translate(0px,0px); opacity: .5; } }
@keyframes s1b-flow { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -21; } }
@keyframes s1b-npu { 0% { opacity: .45; } 50% { opacity: .85; } 100% { opacity: .45; } }
.s1b-breathe12 { animation: s1b-breathe 12s cubic-bezier(.45,0,.55,1) infinite; }
.s1b-breathe6 { animation: s1b-breathe 6s cubic-bezier(.45,0,.55,1) infinite; }
.s1b-drift-a { animation: s1b-drift-a 12s cubic-bezier(.45,0,.55,1) infinite; }
.s1b-drift-b { animation: s1b-drift-b 10s cubic-bezier(.45,0,.55,1) infinite; }
.s1b-dust1 { animation: s1b-dust-a 9s cubic-bezier(.45,0,.55,1) -1s infinite; }
.s1b-dust2 { animation: s1b-dust-b 11s cubic-bezier(.45,0,.55,1) -4s infinite; }
.s1b-dust3 { animation: s1b-dust-b 10s cubic-bezier(.45,0,.55,1) -2s infinite; }
.s1b-dust4 { animation: s1b-dust-a 12s cubic-bezier(.45,0,.55,1) -6s infinite; }
.s1b-dust5 { animation: s1b-dust-b 9s cubic-bezier(.45,0,.55,1) -5s infinite; }
.s1b-dust6 { animation: s1b-dust-a 10s cubic-bezier(.45,0,.55,1) -3s infinite; }
.s1b-flow { animation: s1b-flow 1.6s linear infinite; }
.s1b-flow2 { animation: s1b-flow 1.6s linear -.4s infinite; }
.s1b-flow3 { animation: s1b-flow 1.6s linear -.8s infinite; }
.s1b-npu { animation: s1b-npu 4s cubic-bezier(.45,0,.55,1) infinite; }
.s4b-t { transform-box: fill-box; transform-origin: center; }
.s4b-top { transform-box: fill-box; transform-origin: 50% 0%; }
@keyframes s4b-breathe { 0% { opacity: .55; } 50% { opacity: 1; } 100% { opacity: .55; } }
@keyframes s4b-drift { 0% { opacity: 0; transform: translate(0,6px); } 30% { opacity: .6; } 70% { opacity: .45; } 100% { opacity: 0; transform: translate(4px,-12px); } }
@keyframes s4b-wire { 0% { opacity: 0; } 2% { opacity: 0; } 3% { opacity: .95; } 30% { opacity: .95; } 42% { opacity: .4; } 84% { opacity: .4; } 94% { opacity: 0; } 100% { opacity: 0; } }
@keyframes s4b-flash { 0% { opacity: 0; } 3% { opacity: 1; } 12% { opacity: 0; } 100% { opacity: 0; } }
@keyframes s4b-sh1 { 0% { opacity: 0; transform: translate(50px,43px); } 4.5% { opacity: 0; transform: translate(50px,43px); } 5% { opacity: 1; } 8% { opacity: 1; transform: translate(0,0); } 9% { opacity: 0; transform: translate(0,0); } 100% { opacity: 0; transform: translate(50px,43px); } }
@keyframes s4b-sh2 { 0% { opacity: 0; transform: translate(52px,39px); } 6% { opacity: 0; transform: translate(52px,39px); } 6.5% { opacity: 1; } 9.5% { opacity: 1; transform: translate(0,0); } 10.5% { opacity: 0; transform: translate(0,0); } 100% { opacity: 0; transform: translate(52px,39px); } }
@keyframes s4b-sh3 { 0% { opacity: 0; transform: translate(68px,101px); } 7.5% { opacity: 0; transform: translate(68px,101px); } 8% { opacity: 1; } 11% { opacity: 1; transform: translate(0,0); } 12% { opacity: 0; transform: translate(0,0); } 100% { opacity: 0; transform: translate(68px,101px); } }
@keyframes s4b-crys { 0% { opacity: 0; transform: scale(.86); } 3% { opacity: 1; transform: scale(1.04); } 6% { opacity: 1; transform: scale(1); } 20% { opacity: 1; transform: scale(1); } 30% { opacity: .5; transform: scale(1); } 72% { opacity: .5; transform: scale(1); } 82% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(.86); } }
@keyframes s4b-draw { 0% { stroke-dashoffset: 100; opacity: 0; } 1% { opacity: 1; } 7% { stroke-dashoffset: 0; opacity: 1; } 20% { stroke-dashoffset: 0; opacity: 1; } 30% { stroke-dashoffset: 0; opacity: .5; } 72% { stroke-dashoffset: 0; opacity: .5; } 82% { stroke-dashoffset: 0; opacity: 0; } 83% { stroke-dashoffset: 100; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes s4b-on { 0% { opacity: 0; } 4% { opacity: 1; } 15% { opacity: 1; } 25% { opacity: .45; } 55% { opacity: .45; } 65% { opacity: 0; } 100% { opacity: 0; } }
@keyframes s4b-matrix { 0% { opacity: 0; } 2% { opacity: 1; } 5% { opacity: .25; } 8% { opacity: 1; } 15% { opacity: 1; } 25% { opacity: .45; } 55% { opacity: .45; } 65% { opacity: 0; } 100% { opacity: 0; } }
@keyframes s4b-press { 0% { opacity: 0; transform: scale(1); } 1.5% { opacity: 1; transform: scale(.78); } 4% { opacity: 1; transform: scale(1); } 15% { opacity: 1; } 25% { opacity: .45; } 55% { opacity: .45; } 65% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes s4b-travel { 0% { stroke-dashoffset: 24; opacity: 0; } 1% { opacity: 1; } 7% { stroke-dashoffset: -100; opacity: 1; } 8% { opacity: 0; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes s4b-scan { 0% { opacity: 0; transform: translateY(0); } 1% { opacity: .7; } 7% { opacity: .7; } 8% { opacity: 0; transform: translateY(37px); } 100% { opacity: 0; transform: translateY(37px); } }
@keyframes s4b-gauge { 0% { stroke-dashoffset: 100; opacity: 0; } 1% { opacity: 1; } 8% { stroke-dashoffset: 28; opacity: 1; } 15% { stroke-dashoffset: 28; opacity: 1; } 25% { stroke-dashoffset: 28; opacity: .45; } 55% { stroke-dashoffset: 28; opacity: .45; } 65% { stroke-dashoffset: 28; opacity: 0; } 66% { stroke-dashoffset: 100; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes s4b-drawmid { 0% { stroke-dashoffset: 100; opacity: 0; } 1% { opacity: 1; } 8% { stroke-dashoffset: 0; opacity: 1; } 15% { stroke-dashoffset: 0; opacity: 1; } 25% { stroke-dashoffset: 0; opacity: .45; } 55% { stroke-dashoffset: 0; opacity: .45; } 65% { stroke-dashoffset: 0; opacity: 0; } 66% { stroke-dashoffset: 100; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes s4b-flare { 0% { transform: scale(1); } 56% { transform: scale(1); } 60% { transform: scale(1.6); } 64% { transform: scale(1.1); } 67% { transform: scale(1.6); } 70% { transform: scale(1); } 79% { transform: scale(1); } 81% { transform: scale(1.8); } 84% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes s4b-buddy { 0% { opacity: 0; transform: scale(.6) rotate(0deg); } 55% { opacity: 0; transform: scale(.6) rotate(0deg); } 58% { opacity: 1; transform: scale(1.1) rotate(45deg); } 61% { transform: scale(.95) rotate(45deg); } 64% { transform: scale(1.1) rotate(45deg); } 67% { transform: scale(.95) rotate(45deg); } 70% { opacity: 1; transform: scale(1.25) rotate(90deg); } 76% { opacity: .4; transform: scale(1) rotate(90deg); } 86% { opacity: 0; transform: scale(.6) rotate(90deg); } 100% { opacity: 0; transform: scale(.6) rotate(90deg); } }
@keyframes s4b-pop { 0% { opacity: 0; transform: translateY(6px); } 4% { opacity: 1; transform: translateY(0); } 18% { opacity: 1; } 30% { opacity: .35; } 38% { opacity: 0; transform: translateY(0); } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes s4b-drawshort { 0% { stroke-dashoffset: 100; opacity: 0; } 1% { opacity: 1; } 6% { stroke-dashoffset: 0; opacity: 1; } 18% { stroke-dashoffset: 0; opacity: 1; } 30% { stroke-dashoffset: 0; opacity: .35; } 38% { stroke-dashoffset: 0; opacity: 0; } 39% { stroke-dashoffset: 100; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes s4b-wait { 0% { opacity: 0; transform: scale(.92); } 60% { opacity: 0; transform: scale(.92); } 61% { opacity: .9; } 65% { opacity: 0; transform: scale(1.22); } 65.1% { transform: scale(.92); } 66% { opacity: .9; } 70% { opacity: 0; transform: scale(1.22); } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes s4b-pointer { 0% { opacity: 0; transform: translate(26px,30px) scale(1); } 62% { opacity: 0; transform: translate(26px,30px) scale(1); } 64% { opacity: 1; transform: translate(22px,26px) scale(1); } 68.5% { opacity: 1; transform: translate(0,0) scale(1); } 69.3% { transform: translate(0,0) scale(.82); } 70.5% { transform: translate(0,0) scale(1); } 74% { opacity: 1; transform: translate(0,0) scale(1); } 78% { opacity: 0; transform: translate(8px,10px) scale(1); } 100% { opacity: 0; transform: translate(26px,30px) scale(1); } }
@keyframes s4b-fill { 0% { opacity: 0; } 1.5% { opacity: 1; } 10% { opacity: .9; } 20% { opacity: .3; } 28% { opacity: 0; } 100% { opacity: 0; } }
@keyframes s4b-ripple { 0% { opacity: 0; transform: scale(.3); } 1% { opacity: .9; } 7% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes s4b-beam { 0% { opacity: 0; transform: scaleY(0); } 4% { opacity: .95; transform: scaleY(1); } 9% { opacity: .95; transform: scaleY(1); } 14% { opacity: .4; transform: scaleY(1); } 20% { opacity: 0; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(0); } }
@keyframes s4b-fall { 0% { opacity: 0; transform: translateY(0); } 1% { opacity: 1; } 6% { opacity: 1; } 8% { opacity: 0; transform: translateY(68px); } 100% { opacity: 0; transform: translateY(68px); } }
@keyframes s4b-board { 0% { opacity: 0; } 5% { opacity: 1; } 20% { opacity: .85; } 40% { opacity: .5; } 55% { opacity: 0; } 100% { opacity: 0; } }
@keyframes s4b-gaugeb { 0% { stroke-dashoffset: 100; opacity: 0; } 1% { opacity: 1; } 8% { stroke-dashoffset: 28; opacity: 1; } 20% { stroke-dashoffset: 28; opacity: .85; } 40% { stroke-dashoffset: 28; opacity: .5; } 55% { stroke-dashoffset: 28; opacity: 0; } 56% { stroke-dashoffset: 100; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes s4b-blink { 0% { opacity: 0; } 2% { opacity: 1; } 5% { opacity: .2; } 8% { opacity: 1; } 11% { opacity: .2; } 14% { opacity: 1; } 40% { opacity: .6; } 55% { opacity: 0; } 100% { opacity: 0; } }
.s4b-neb { animation: s4b-breathe 10s cubic-bezier(.45,0,.55,1) infinite; }
.s4b-m1 { animation: s4b-drift 10s cubic-bezier(.45,0,.55,1) 0s infinite; }
.s4b-m2 { animation: s4b-drift 10s cubic-bezier(.45,0,.55,1) -1.7s infinite; }
.s4b-m3 { animation: s4b-drift 10s cubic-bezier(.45,0,.55,1) -3.3s infinite; }
.s4b-m4 { animation: s4b-drift 10s cubic-bezier(.45,0,.55,1) -5s infinite; }
.s4b-m5 { animation: s4b-drift 10s cubic-bezier(.45,0,.55,1) -6.6s infinite; }
.s4b-m6 { animation: s4b-drift 10s cubic-bezier(.45,0,.55,1) -8.2s infinite; }
.s4b-wire { animation: s4b-wire 10s cubic-bezier(.4,0,.2,1) infinite; }
.s4b-ha { animation: s4b-flash 10s cubic-bezier(.4,0,.2,1) -9.9s infinite; }
.s4b-hb { animation: s4b-flash 10s cubic-bezier(.4,0,.2,1) -8.95s infinite; }
.s4b-sh1 { animation: s4b-sh1 10s cubic-bezier(.4,0,.2,1) infinite; }
.s4b-sh2 { animation: s4b-sh2 10s cubic-bezier(.4,0,.2,1) infinite; }
.s4b-sh3 { animation: s4b-sh3 10s cubic-bezier(.4,0,.2,1) infinite; }
.s4b-blk1 { animation: s4b-crys 10s cubic-bezier(.4,0,.2,1) -9.2s infinite; }
.s4b-blk2 { animation: s4b-crys 10s cubic-bezier(.4,0,.2,1) -9.05s infinite; }
.s4b-py1 { animation: s4b-draw 10s cubic-bezier(.4,0,.2,1) -8.9s infinite; }
.s4b-py2 { animation: s4b-draw 10s cubic-bezier(.4,0,.2,1) -8.75s infinite; }
.s4b-py3 { animation: s4b-draw 10s cubic-bezier(.4,0,.2,1) -8.6s infinite; }
.s4b-py4 { animation: s4b-draw 10s cubic-bezier(.4,0,.2,1) -8.45s infinite; }
.s4b-con { animation: s4b-on 10s cubic-bezier(.4,0,.2,1) -7.45s infinite; }
.s4b-led1 { animation: s4b-on 10s cubic-bezier(.4,0,.2,1) -7.3s infinite; }
.s4b-led2 { animation: s4b-on 10s cubic-bezier(.4,0,.2,1) -7.15s infinite; }
.s4b-led3 { animation: s4b-on 10s cubic-bezier(.4,0,.2,1) -7s infinite; }
.s4b-mx1 { animation: s4b-matrix 10s cubic-bezier(.4,0,.2,1) -7.1s infinite; }
.s4b-mx2 { animation: s4b-matrix 10s cubic-bezier(.4,0,.2,1) -6.95s infinite; }
.s4b-mx3 { animation: s4b-matrix 10s cubic-bezier(.4,0,.2,1) -6.8s infinite; }
.s4b-btn { animation: s4b-press 10s cubic-bezier(.4,0,.2,1) -6.75s infinite; }
.s4b-lnk { animation: s4b-travel 10s cubic-bezier(.4,0,.2,1) -6.8s infinite; }
.s4b-scr { animation: s4b-on 10s cubic-bezier(.4,0,.2,1) -6.55s infinite; }
.s4b-gls { animation: s4b-on 10s cubic-bezier(.4,0,.2,1) -6.5s infinite; }
.s4b-scan { animation: s4b-scan 10s cubic-bezier(.45,0,.55,1) -6.5s infinite; }
.s4b-gau { animation: s4b-gauge 10s cubic-bezier(.4,0,.2,1) -6.3s infinite; }
.s4b-wav { animation: s4b-drawmid 10s cubic-bezier(.4,0,.2,1) -6.1s infinite; }
.s4b-flare { animation: s4b-flare 10s cubic-bezier(.4,0,.2,1) infinite; }
.s4b-bud { animation: s4b-buddy 10s cubic-bezier(.4,0,.2,1) infinite; }
.s4b-blnk { animation: s4b-travel 10s cubic-bezier(.4,0,.2,1) -4.3s infinite; }
.s4b-pop { animation: s4b-pop 10s cubic-bezier(.4,0,.2,1) -4.2s infinite; }
.s4b-bl1 { animation: s4b-drawshort 10s cubic-bezier(.4,0,.2,1) -4s infinite; }
.s4b-bl2 { animation: s4b-drawshort 10s cubic-bezier(.4,0,.2,1) -3.85s infinite; }
.s4b-ring { animation: s4b-wait 10s cubic-bezier(.4,0,.2,1) infinite; }
.s4b-ptr { animation: s4b-pointer 10s cubic-bezier(.4,0,.2,1) infinite; }
.s4b-fill { animation: s4b-fill 10s cubic-bezier(.4,0,.2,1) -3.1s infinite; }
.s4b-rip { animation: s4b-ripple 10s cubic-bezier(.2,.6,.3,1) -3.08s infinite; }
.s4b-beam { animation: s4b-beam 10s cubic-bezier(.4,0,.2,1) -1.95s infinite; }
.s4b-pk1 { animation: s4b-fall 10s cubic-bezier(.5,0,.75,0) -1.85s infinite; }
.s4b-pk2 { animation: s4b-fall 10s cubic-bezier(.5,0,.75,0) -1.65s infinite; }
.s4b-pk3 { animation: s4b-fall 10s cubic-bezier(.5,0,.75,0) -1.45s infinite; }
.s4b-land { animation: s4b-ripple 10s cubic-bezier(.2,.6,.3,1) -1.4s infinite; }
.s4b-bh { animation: s4b-board 10s cubic-bezier(.4,0,.2,1) -1.4s infinite; }
.s4b-bg { animation: s4b-board 10s cubic-bezier(.4,0,.2,1) -1.3s infinite; }
.s4b-bga { animation: s4b-gaugeb 10s cubic-bezier(.4,0,.2,1) -1.2s infinite; }
.s4b-led { animation: s4b-blink 10s cubic-bezier(.4,0,.2,1) -1.1s infinite; }
/* Colours: the drawings keep the boards' dark-mode literals as SVG attributes and
   these rules repaint them with the site's tokens (CSS beats presentation
   attributes, stop-color too). Under the night sky in dark mode the tokens are
   the boards' own colours; in light mode the same drawing is ink on paper with
   the light accent (--sc-acc). */
:is(.s1b, .s4b) [fill="#F2F1EE"] { fill: var(--ink); }
:is(.s1b, .s4b) [stroke="#F2F1EE"] { stroke: var(--ink); }
:is(.s1b, .s4b) [fill="#A3A5AA"] { fill: var(--muted); }
:is(.s1b, .s4b) [stroke="#A3A5AA"] { stroke: var(--muted); }
:is(.s1b, .s4b) [stop-color="#A3A5AA"] { stop-color: var(--muted); }
:is(.s1b, .s4b) [fill="#8A8C92"] { fill: var(--faint); }
:is(.s1b, .s4b) [fill="#2A2B31"] { fill: var(--line-2); }
:is(.s1b, .s4b) [stroke="#2A2B31"] { stroke: var(--line-2); }
:is(.s1b, .s4b) [stroke="#24252B"] { stroke: color-mix(in srgb, var(--line) 50%, var(--line-2)); }
:is(.s1b, .s4b) [fill="#1D1E23"] { fill: var(--line); }
:is(.s1b, .s4b) [stroke="#1D1E23"] { stroke: var(--line); }
:is(.s1b, .s4b) [fill="#121317"] { fill: var(--surface); }
:is(.s1b, .s4b) :is([fill="#101115"], [fill="#0F1014"], [fill="#0E0F13"]) { fill: color-mix(in srgb, var(--surface) 65%, var(--paper)); }
:is(.s1b, .s4b) [fill="#08090B"] { fill: var(--paper-2); }
:is(.s1b, .s4b) [fill="#060709"] { fill: var(--paper); }
:is(.s1b, .s4b) [stroke="#060709"] { stroke: var(--paper); }
.s1b [fill="#7D8BE0"], .s4b [fill="#B36FC6"] { fill: var(--sc-acc); }
.s1b [stroke="#7D8BE0"], .s4b [stroke="#B36FC6"] { stroke: var(--sc-acc); }
.s1b [stop-color="#7D8BE0"], .s4b [stop-color="#B36FC6"] { stop-color: var(--sc-acc); }
/* Light is drawn as the accent on paper (a white glow would turn into a grey
   smudge); the neutral M33 chamber stays a faint ink wash; the white mists only
   make sense on a night sky; every glow is quieter on paper. */
:is(.s1b, .s4b) stop[stop-color="#F2F1EE"] { stop-color: var(--sc-acc); }
#s1b-chn stop { stop-color: var(--ink); }
.s1b [fill="url(#s1b-mist)"], .s4b [fill="url(#s4b-g-haze)"] { display: none; }
.s1b :is([fill="url(#s1b-neb)"], [fill="url(#s1b-halo)"]) { fill-opacity: 0.55; }
.s1b [fill="url(#s1b-mista)"], .s4b [fill="url(#s4b-g-purple)"] { fill-opacity: 0.6; }
.s1b :is([fill="url(#s1b-glow)"], [fill="url(#s1b-glow-w)"]), .s4b :is([fill="url(#s4b-g-neb)"], [fill="url(#s4b-g-glow)"]) { fill-opacity: 0.7; }
.s1b [stroke="url(#s1b-cha)"] { stroke-opacity: 0.8; }
.s1b [stroke="url(#s1b-chn)"] { stroke-opacity: 0.45; }
@media (prefers-color-scheme: dark) {
  :is(.s1b, .s4b) stop[stop-color="#F2F1EE"] { stop-color: var(--ink); }
  .s1b [fill="url(#s1b-mist)"], .s4b [fill="url(#s4b-g-haze)"] { display: inline; }
  .s1b :is([fill="url(#s1b-neb)"], [fill="url(#s1b-halo)"], [fill="url(#s1b-mista)"], [fill="url(#s1b-glow)"], [fill="url(#s1b-glow-w)"]),
  .s4b :is([fill="url(#s4b-g-purple)"], [fill="url(#s4b-g-neb)"], [fill="url(#s4b-g-glow)"]) { fill-opacity: 1; }
  .s1b :is([stroke="url(#s1b-cha)"], [stroke="url(#s1b-chn)"]) { stroke-opacity: 1; }
}
/* Captions use the site's caption type with the orbit names' halo. The corner
   captions are anchored left or right, so they are laid out left to right on
   every page (Arabic still reads right to left inside its own caption). */
:is(.s1b, .s4b) :is(.sc-chip, .sc-t) { paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
:is(.s1b, .s4b) text { direction: ltr; }
.s4b-mono { font-family: var(--font-mono); }
/* Still frames (the base styles; the keyframes above take over while they run):
   with reduced motion 1B rests on its chambers and 4B on the four parts of the
   IDE at their quiet level, nothing in flight. */
.s1b-breathe12, .s1b-breathe6 { opacity: 0.86; }
.s1b-npu { opacity: 0.65; }
.s4b-neb { opacity: 0.78; }
:is(.s4b-m1, .s4b-m2, .s4b-m3, .s4b-m4, .s4b-m5, .s4b-m6) { opacity: 0.45; }
.s4b-wire { opacity: 0.4; }
:is(.s4b-ha, .s4b-hb, .s4b-sh1, .s4b-sh2, .s4b-sh3, .s4b-lnk, .s4b-blnk, .s4b-scan, .s4b-ring, .s4b-ptr, .s4b-fill, .s4b-rip, .s4b-beam, .s4b-pk1, .s4b-pk2, .s4b-pk3, .s4b-land) { opacity: 0; }
:is(.s4b-blk1, .s4b-blk2) { opacity: 0.5; }
:is(.s4b-py1, .s4b-py2, .s4b-py3, .s4b-py4) { stroke-dashoffset: 0; opacity: 0.5; }
:is(.s4b-con, .s4b-led1, .s4b-led2, .s4b-led3, .s4b-mx1, .s4b-mx2, .s4b-mx3, .s4b-btn, .s4b-scr, .s4b-gls) { opacity: 0.45; }
.s4b-gau { stroke-dashoffset: 28; opacity: 0.45; }
.s4b-wav { stroke-dashoffset: 0; opacity: 0.45; }
.s4b-bud { opacity: 0.4; }
.s4b-pop { opacity: 0.6; }
:is(.s4b-bl1, .s4b-bl2) { stroke-dashoffset: 0; }
:is(.s4b-bh, .s4b-bg) { opacity: 0.5; }
.s4b-bga { stroke-dashoffset: 28; opacity: 0.5; }
.s4b-led { opacity: 0.6; }

@media (max-width: 600px) { .sc-chip, .sc-t { display: none; } }
/* Reduced motion: every scene is its still frame (the base styles above), not
   the end of a shortened animation that still waits out its delay. */
@media (prefers-reduced-motion: reduce) { .scenes * { animation: none !important; } .sc-p, .sc-trail, .sc-capsule { display: none; } }
/* Reduced motion: SMIL stops on its first frame (site.js); 1B shows its event
   on the threshold and 4B its Flow wire drawn (!important outranks SMIL). */
@media (prefers-reduced-motion: reduce) {
  .s1b :is(.s1b-curve, .s1b-cross) { stroke-dashoffset: 0 !important; opacity: 0.85 !important; }
  .s1b .s1b-hit { opacity: 1 !important; }
  .s4b .s4b-wire { stroke-dashoffset: 0 !important; }
}
@media print { .scenes { display: none; } }