/* DeviceHub Pro — marketing site
   Tokens mirror the product's Colors class so a screenshot and the page
   around it never disagree about what "online" green is. */

/* Subset of Noto Sans TC — only the 583 non-ASCII characters this site uses,
   regenerated by build.js on every build (see README). Latin and digits are
   deliberately absent so they fall through to the UI face, which sets them
   better than Noto does.
   Declared at weight 400 only: with just the Regular master available, letting
   the browser synthesise bold beats claiming a 400–700 range the file cannot
   deliver, which would render every heading at regular weight. */
@font-face {
  font-family: "Noto TC Subset";
  src: url("noto-tc.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+00B0-00FF, U+2000-206F, U+2190-21FF, U+2200-22FF,
                 U+2460-24FF, U+2500-257F, U+25A0-25FF, U+2600-27BF,
                 U+2E80-A4CF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;
}

:root {
  --bg:#0F0F0F; --surface:#191919; --surface-2:#1F1F1F; --surface-3:#2B2B2B;
  --divider:#393939; --text:#BFBFBF; --text-strong:#FFFFFF; --text-muted:#888888;
  --ok:#50D852; --warn:#E0A030; --danger:#FD5252;
  --grp-a:#4A90E2; --grp-b:#50C878; --grp-c:#FFB347; --grp-d:#E74C3C;
  --focus:#FFFFFF;

  --font:"Noto TC Subset",system-ui,-apple-system,"Segoe UI","Microsoft JhengHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Consolas,monospace;

  --step--1:clamp(.83rem,.8rem + .15vw,.9rem);
  --step-0:clamp(1rem,.95rem + .25vw,1.125rem);
  --step-1:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --step-2:clamp(1.6rem,1.4rem + 1vw,2.1rem);
  --step-3:clamp(2.1rem,1.7rem + 2vw,3.2rem);
  --step-4:clamp(2.4rem,1.8rem + 3.2vw,4.4rem);

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  --dur-fast:150ms; --dur-base:300ms; --dur-slow:500ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
}
/* The English page still needs the subset: the language switch reads 繁中. */
html[lang="en"]{ --font:Inter,system-ui,-apple-system,"Segoe UI","Noto TC Subset",sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:var(--step-0); line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
html[lang="en"] body{ line-height:1.6; }
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ color:var(--text-strong); line-height:1.15; margin:0 0 var(--sp-4); font-weight:700; }
h1{ font-size:var(--step-4); letter-spacing:-.02em; }
h2{ font-size:var(--step-3); letter-spacing:-.015em; }
h3{ font-size:var(--step-1); }
h4{ font-size:var(--step-0); }
p{ margin:0 0 var(--sp-4); }
a{ color:inherit; }
code,pre,.mono{ font-family:var(--mono); font-size:.9em; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:3px; }

.sr{ 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:absolute; left:-999px; top:0; z-index:100; background:var(--surface-3); color:var(--text-strong); padding:var(--sp-3) var(--sp-4); text-decoration:none; }
.skip:focus{ left:var(--sp-4); top:var(--sp-4); }

.wrap{ width:min(1200px,100% - var(--sp-6)); margin-inline:auto; }
.band{ padding:var(--sp-10) 0; }
.band.tight{ padding:var(--sp-8) 0; }
.band.narrow .wrap{ width:min(760px,100% - var(--sp-6)); }
.band.inset{ background:var(--surface); border-block:1px solid var(--divider); }
.narrow-inner{ width:min(680px,100% - var(--sp-6)); margin-inline:auto; }
.lede{ font-size:var(--step-1); color:var(--text); max-width:38em; }
html[lang="en"] .lede{ max-width:60ch; }
.note{ font-size:var(--step--1); color:var(--text-muted); max-width:44em; margin-top:var(--sp-5); }
.close{ font-size:var(--step-1); color:var(--text-strong); max-width:40em; margin-top:var(--sp-6); padding-left:var(--sp-4); border-left:2px solid var(--ok); }
.muted{ color:var(--text-muted); }
.rule{ border:0; border-top:1px solid var(--divider); margin:var(--sp-9) 0; }
.eyebrow{ font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--sp-4); }

.cols-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--sp-7); }
.cols-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--sp-6); }
/* Neither grid carries a block margin — they normally follow something that
   does. Two of them in a row would touch, so give the second one the gap. */
.cols-2+.cols-2,.cols-2+.cols-3,.cols-3+.cols-2,.cols-3+.cols-3{ margin-top:var(--sp-7); }

/* ── buttons ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5); border-radius:6px; border:1px solid transparent;
  font:inherit; font-size:var(--step-0); text-decoration:none; cursor:pointer;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
}
.btn-sm{ padding:var(--sp-2) var(--sp-4); font-size:var(--step--1); }
.btn-primary{ background:var(--text-strong); color:#111; font-weight:600; }
.btn-primary:hover{ background:var(--text); }
.btn-ghost{ border-color:var(--divider); color:var(--text); background:transparent; }
.btn-ghost:hover{ background:var(--surface-3); border-color:var(--text-muted); }
.btn[disabled]{ opacity:.45; cursor:default; }
.btn-ghost[aria-pressed="true"]{ border-color:var(--text-strong); color:var(--text-strong); }
.btnrow{ display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-5); }

.switch{ display:inline-flex; align-items:center; gap:var(--sp-3); background:none; border:0; color:var(--text); font:inherit; font-size:var(--step--1); cursor:pointer; padding:var(--sp-2); }
.switch-track{ width:38px; height:20px; border-radius:10px; background:var(--surface-3); border:1px solid var(--divider); position:relative; transition:background var(--dur-fast); flex:none; }
.switch-knob{ position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--text-muted); transition:transform var(--dur-base) var(--ease-out),background var(--dur-fast); }
.switch[aria-checked="true"] .switch-track{ background:color-mix(in srgb,var(--ok) 28%,transparent); border-color:var(--ok); }
.switch[aria-checked="true"] .switch-knob{ transform:translateX(18px); background:var(--ok); }

.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; background:var(--text-muted); flex:none; }
.dot.ok{ background:var(--ok); }
.dot.off{ background:var(--text-muted); }
.status{ font-size:var(--step--1); color:var(--text); min-height:1.6em; margin:var(--sp-4) 0 0; }
.hint{ font-size:var(--step--1); color:var(--text-muted); margin:0; }

/* ── topbar ──────────────────────────────────────────────────── */
.topbar{
  position:fixed; inset:0 0 auto; z-index:50; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid transparent;
  transform:translateY(-100%); transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base);
}
.topbar.show{ transform:none; border-bottom-color:var(--divider); }
.topbar-inner{ display:flex; align-items:center; gap:var(--sp-5); height:60px; }
.brand{ display:flex; align-items:center; gap:var(--sp-2); text-decoration:none; color:var(--text-strong); font-size:var(--step--1); letter-spacing:.04em; }
.brand b{ font-weight:700; }
.topnav{ display:flex; gap:var(--sp-5); margin-left:auto; font-size:var(--step--1); }
.topnav a{ color:var(--text-muted); text-decoration:none; transition:color var(--dur-fast); }
.topnav a:hover,.topnav a.here{ color:var(--text-strong); }
.topbar-end{ display:flex; align-items:center; gap:var(--sp-4); }
.lang{ font-size:var(--step--1); color:var(--text-muted); text-decoration:none; border:1px solid var(--divider); border-radius:4px; padding:2px 8px; }
.lang:hover{ color:var(--text-strong); border-color:var(--text-muted); }
@media (max-width:900px){ .topnav{ display:none; } .topbar-end{ margin-left:auto; } }

/* ── hero ────────────────────────────────────────────────────── */
.hero{ padding:calc(var(--sp-10) + 40px) 0 var(--sp-9); }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--sp-8); align-items:center; }
.hero-copy h1{ margin-bottom:var(--sp-5); }
.hero-actions{ display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-6); }
.hero-stats{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); padding:0; margin:var(--sp-7) 0 0; font-family:var(--mono); font-size:var(--step--1); color:var(--text-muted); }
.hero-stats li{ opacity:.35; transition:opacity var(--dur-base),color var(--dur-base); }
.hero-stats li.on{ opacity:1; color:var(--text); }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }

.mini-win{ display:grid; grid-template-columns:96px 1fr; background:var(--surface-2); border:1px solid var(--divider); border-radius:10px; overflow:hidden; box-shadow:0 24px 60px rgb(0 0 0 / .45); }
.mini-side{ background:var(--surface); padding:var(--sp-4) var(--sp-3); border-right:1px solid var(--divider); }
.mini-logo{ font-size:9px; letter-spacing:.08em; color:var(--text-strong); font-weight:700; }
.mini-ver{ font-size:8px; color:var(--text-muted); margin-bottom:var(--sp-4); }
.mini-nav{ display:block; height:7px; border-radius:3px; background:var(--surface-3); margin-bottom:6px; }
.mini-nav.on{ background:var(--divider); }
.mini-body{ padding:var(--sp-4); display:grid; gap:var(--sp-2); }
.mini-card{ display:flex; align-items:center; gap:var(--sp-3); background:var(--surface-3); border-radius:6px; padding:var(--sp-3); font-size:var(--step--1); }
.mini-card b{ color:var(--text-strong); font-weight:600; min-width:3.2em; }
.mini-card span{ margin-left:auto; font-family:var(--mono); }
.mini-card span.low{ color:var(--danger); }

/* ── problems ────────────────────────────────────────────────── */
.problems{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); margin-top:var(--sp-8); }
.problems .wide{ grid-column:span 2; }
.card{ background:var(--surface-2); border:1px solid var(--divider); border-radius:10px; padding:var(--sp-6); }
.card h3{ margin-bottom:var(--sp-3); }
.card p{ margin:0; }
@media (max-width:820px){ .problems{ grid-template-columns:1fr; } .problems .wide{ grid-column:auto; } }

.value .num{ font-family:var(--mono); font-size:var(--step--1); color:var(--text-muted); display:block; margin-bottom:var(--sp-3); }
.value h3{ margin-bottom:var(--sp-3); }

/* ── OSC router (§5.1) ───────────────────────────────────────── */
.router{ margin-top:var(--sp-8); background:var(--surface-2); border:1px solid var(--divider); border-radius:10px; padding:var(--sp-6); }
.router-head{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-6); flex-wrap:wrap; }
.router-grid{ display:grid; grid-template-columns:1fr .8fr 1.2fr; gap:var(--sp-6); align-items:start; }
.router-label{ font-size:var(--step--1); color:var(--text-muted); margin-bottom:var(--sp-3); }
.port{
  display:flex; align-items:center; gap:var(--sp-3); width:100%; margin-bottom:var(--sp-2);
  background:var(--surface-3); border:1px solid var(--divider); border-radius:6px;
  padding:var(--sp-3) var(--sp-4); color:var(--text); font:inherit; font-family:var(--mono);
  font-size:var(--step--1); cursor:pointer; transition:border-color var(--dur-fast),background var(--dur-fast);
}
.port span{ margin-left:auto; color:var(--text-muted); }
.port:hover{ border-color:var(--text-muted); }
.port.active{ border-color:var(--text-strong); background:var(--divider); }
.router-core{ text-align:center; padding-top:var(--sp-7); }
.core{ display:inline-flex; align-items:center; justify-content:center; width:76px; height:76px; border-radius:12px; background:var(--surface-3); border:1px solid var(--divider); color:var(--text-muted); transition:color var(--dur-base),border-color var(--dur-base); }
.core.hot{ color:var(--text-strong); border-color:var(--text-strong); }
.core.blocked{ color:var(--danger); border-color:var(--danger); }
.core-note{ font-family:var(--mono); font-size:var(--step--1); color:var(--text-muted); min-height:1.5em; margin:var(--sp-3) 0 0; }
.grp{ display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-3); }
.grp-tag{ font-family:var(--mono); font-size:var(--step--1); color:var(--text-muted); width:1.4em; }
.hs{ width:34px; height:24px; border-radius:5px; border:1px solid var(--divider); background:var(--surface-3); transition:border-color var(--dur-base),background var(--dur-base),transform var(--dur-base) var(--ease-out); }
.grp[data-grp="A"] .hs{ border-color:color-mix(in srgb,var(--grp-a) 45%,var(--divider)); }
.grp[data-grp="B"] .hs{ border-color:color-mix(in srgb,var(--grp-b) 45%,var(--divider)); }
.grp[data-grp="C"] .hs{ border-color:color-mix(in srgb,var(--grp-c) 45%,var(--divider)); }
.grp[data-grp="D"] .hs{ border-color:color-mix(in srgb,var(--grp-d) 45%,var(--divider)); }
.hs.lit{ border-color:var(--ok); background:color-mix(in srgb,var(--ok) 22%,var(--surface-3)); transform:scale(1.06); }
.hs.crossed{ border-color:var(--danger); background:color-mix(in srgb,var(--danger) 22%,var(--surface-3)); }
.warn{ font-size:var(--step--1); color:var(--danger); border-left:2px solid var(--danger); padding-left:var(--sp-3); margin:var(--sp-3) 0 0; }
.ports{ width:100%; border-collapse:collapse; margin-top:var(--sp-6); font-family:var(--mono); font-size:var(--step--1); }
.ports th,.ports td{ text-align:left; padding:var(--sp-2) var(--sp-3); border-top:1px solid var(--divider); color:var(--text-muted); font-weight:400; }
.ports tbody tr.hi td{ color:var(--text-strong); background:var(--surface-3); }
@media (max-width:820px){ .router-grid{ grid-template-columns:1fr; } .router-core{ padding-top:0; } }

/* ── pre-flight (§5.2) ───────────────────────────────────────── */
.showcard{ margin-top:var(--sp-7); background:var(--surface-3); border-radius:10px; padding:var(--sp-6); }
.showcard-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-4); }
.showcard-head b{ color:var(--text-strong); font-size:var(--step-1); }
.badge{ font-size:var(--step--1); font-weight:600; color:var(--text-muted); transition:color var(--dur-base); }
.badge.ok{ color:var(--ok); }
.badge.warn{ color:var(--warn); }
.badge.off{ color:var(--text-muted); }
.showcard-row{ font-size:var(--step--1); margin:0 0 var(--sp-2); font-family:var(--mono); }
.showcard-grp{ display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; font-size:var(--step--1); margin-top:var(--sp-3); }
.showcard-grp span{ color:var(--text-muted); min-width:5em; }
.showcard-grp i{ font-style:normal; font-family:var(--mono); color:var(--warn); transition:color var(--dur-base); }
.showcard-grp i.ack{ color:var(--ok); }

/* ── connectivity ────────────────────────────────────────────── */
.alt{ margin-top:var(--sp-8); display:grid; gap:var(--sp-8); }
.alt-row{ display:grid; grid-template-columns:1fr .8fr; gap:var(--sp-7); align-items:center; }
.alt-row.flip .alt-text{ order:2; }
.alt-art{ background:var(--surface-2); border:1px solid var(--divider); border-radius:10px; padding:var(--sp-6); display:flex; align-items:center; justify-content:center; min-height:130px; }
.wire{ display:flex; align-items:center; gap:var(--sp-4); font-family:var(--mono); font-size:var(--step--1); }
.plug{ border:1px solid var(--divider); border-radius:5px; padding:var(--sp-2) var(--sp-4); color:var(--text-muted); }
.plug.on{ border-color:var(--ok); color:var(--ok); }
.arrow{ color:var(--text-muted); }
.dots-row{ display:flex; gap:var(--sp-3); }
.dots-row .dot{ width:14px; height:14px; }
.idchain{ display:flex; flex-direction:column; gap:var(--sp-2); font-family:var(--mono); font-size:var(--step--1); text-align:center; }
.idchain code{ color:var(--text-muted); text-decoration:line-through; }
.idchain b{ color:var(--ok); font-weight:400; }
@media (max-width:820px){ .alt-row,.alt-row.flip .alt-text{ grid-template-columns:1fr; order:0; } }

/* ── fleet board (§5.3) ──────────────────────────────────────── */
.fleet{ margin:var(--sp-7) 0 var(--sp-8); background:var(--surface-2); border:1px solid var(--divider); border-radius:10px; padding:var(--sp-6); }
.fleet-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--sp-4); margin-top:var(--sp-4); }
.bin{ background:var(--surface-3); border:1px dashed var(--divider); border-radius:8px; padding:var(--sp-4); min-height:140px; transition:border-color var(--dur-fast),background var(--dur-fast); }
.bin.over{ border-color:var(--text-strong); background:var(--divider); }
.bin-head{ font-size:var(--step--1); color:var(--text-muted); margin:0 0 var(--sp-3); }
.bin[data-grp="A"]{ border-left:2px solid var(--grp-a); }
.bin[data-grp="B"]{ border-left:2px solid var(--grp-b); }
.hs-card{
  display:flex; align-items:center; gap:var(--sp-2); width:100%; margin-bottom:var(--sp-2);
  background:var(--surface-2); border:1px solid var(--divider); border-radius:6px;
  padding:var(--sp-2) var(--sp-3); color:var(--text); font:inherit; font-family:var(--mono);
  font-size:var(--step--1); cursor:grab; text-align:left;
}
.hs-card em{ font-style:normal; font-weight:700; color:var(--text-strong); min-width:1.2em; }
.hs-card.dragging{ opacity:.4; }
.hs-card.picked{ border-color:var(--text-strong); }
.level h3{ font-size:var(--step-0); }

/* ── ops + terminal (§5.4) ───────────────────────────────────── */
.ops-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:var(--sp-8); align-items:start; margin-top:var(--sp-7); }
.ops-text article{ margin-bottom:var(--sp-6); }
.ops-text h3{ font-size:var(--step-0); margin-bottom:var(--sp-2); }
.term{
  background:#111; border:1px solid var(--divider); border-radius:8px; padding:var(--sp-5);
  font-family:var(--mono); font-size:var(--step--1); line-height:1.8; color:var(--text);
  max-height:360px; overflow:auto; margin:0; white-space:pre-wrap; word-break:break-word;
}
.term.static{ max-height:none; }
.term b{ font-weight:400; }
.term .p,.term b.p{ color:#61AFEF; }
.term .s,.term b.s{ color:#98C379; }
.term .e,.term b.e{ color:#E06C75; }
@media (max-width:820px){ .ops-grid{ grid-template-columns:1fr; } }

/* ── poller (§5.8) ───────────────────────────────────────────── */
.poller{ margin:var(--sp-7) 0; background:var(--surface-2); border:1px solid var(--divider); border-radius:10px; padding:var(--sp-6); }
.poller-head{ display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-6); }
.scenarios{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.poller-rows{ display:grid; gap:var(--sp-3); }
.poller-row{ display:flex; align-items:center; gap:var(--sp-4); }
.poller-key{ font-size:var(--step--1); color:var(--text-muted); min-width:3.5em; }
.cells{ display:flex; gap:var(--sp-2); }
.cell{
  width:38px; height:38px; border-radius:6px; border:1px solid var(--divider); background:var(--surface-3);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:var(--step--1);
  color:var(--text-muted); opacity:0; transition:opacity var(--dur-base),border-color var(--dur-base),color var(--dur-base);
}
.cell.in{ opacity:1; }
.cell.ok{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,var(--divider)); }
.cell.miss{ color:var(--warn); border-color:color-mix(in srgb,var(--warn) 45%,var(--divider)); }
.cell.unk{ color:var(--text-muted); border-style:dashed; }
.cell.held{ color:var(--text-muted); opacity:.55; }
.cell.hit{ color:var(--danger); border-color:var(--danger); font-weight:700; }
.rule-card{ background:var(--surface-2); border:1px solid var(--divider); border-radius:10px; padding:var(--sp-5); }
.rule-card h3{ font-size:var(--step-0); margin-bottom:var(--sp-2); }

/* ── XRPR three layers (§5.7) ────────────────────────────────── */
.xrpr{ margin:var(--sp-7) 0; background:var(--surface-2); border:1px solid var(--divider); border-radius:10px; padding:var(--sp-6); }
.xrpr-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-5); flex-wrap:wrap; margin-bottom:var(--sp-6); }
.phrase{ display:grid; gap:var(--sp-2); font-size:var(--step--1); color:var(--text-muted); }
.phrase input{
  background:var(--surface-3); border:1px solid var(--divider); border-radius:6px; padding:var(--sp-3) var(--sp-4);
  color:var(--text-strong); font-family:var(--mono); font-size:var(--step-0); width:min(260px,60vw);
}
.xrpr-head .btnrow{ margin-top:0; }
.layers{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); position:relative; }
.layers::before{ content:""; position:absolute; top:34px; left:12%; right:12%; height:1px; background:var(--divider); }
.layer{
  position:relative; background:var(--surface-3); border:1px solid var(--divider); border-radius:8px;
  padding:var(--sp-5); text-align:center; transition:border-color var(--dur-base),box-shadow var(--dur-base);
}
.layer b{ display:block; color:var(--text-muted); font-size:var(--step--1); letter-spacing:.02em; transition:color var(--dur-base); }
.layer-zh{ display:block; font-size:var(--step--1); color:var(--text-muted); margin-top:2px; }
.layer-state{ font-family:var(--mono); font-size:var(--step--1); color:var(--text-muted); min-height:1.6em; margin:var(--sp-3) 0 0; }
.layer-switch{ font-family:var(--mono); font-size:var(--step--1); color:var(--text-muted); margin:var(--sp-2) 0 0; padding-top:var(--sp-2); border-top:1px dashed var(--divider); }
.layer.lit{ border-color:var(--text-strong); }
.layer.lit b{ color:var(--text-strong); }
.layer.pass{ border-color:var(--ok); }
.layer.pass .layer-state{ color:var(--ok); }
.layer.deny{ border-color:var(--danger); }
.layer.deny .layer-state,.layer.deny .layer-switch{ color:var(--danger); }
.layer.open{ border-color:var(--ok); box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 30%,transparent); }
.room{ display:flex; gap:5px; justify-content:center; margin-top:var(--sp-3); }
.room i{ width:9px; height:9px; border-radius:2px; background:var(--surface-2); border:1px solid var(--divider); transition:background var(--dur-base),border-color var(--dur-base); }
.room i.on{ background:var(--ok); border-color:var(--ok); }
.live-panel{ margin-top:var(--sp-6); background:var(--surface-3); border:1px solid var(--divider); border-radius:8px; padding:var(--sp-4) var(--sp-5); }
.live-panel h4{ margin:0 0 var(--sp-2); color:var(--text); font-size:var(--step--1); font-weight:400; }
.live-panel p{ margin:0; display:flex; align-items:center; gap:var(--sp-2); font-size:var(--step--1); color:var(--ok); }
.unaffected{ font-size:var(--step--1); color:var(--text-muted); margin:var(--sp-3) 0 0; padding-left:var(--sp-4); border-left:2px solid var(--divider); }
.layer-notes article{ font-size:var(--step--1); }
.layer-notes .dh{ color:var(--text-muted); border-top:1px solid var(--divider); padding-top:var(--sp-3); }
@media (max-width:820px){ .layers{ grid-template-columns:1fr; } .layers::before{ display:none; } }

.story{ margin:var(--sp-9) 0; }
.timeline{ list-style:none; display:flex; padding:0; margin:var(--sp-6) 0 0; gap:var(--sp-2); font-size:var(--step--1); color:var(--text-muted); }
.timeline li{ flex:1; padding-top:var(--sp-4); border-top:1px solid var(--divider); position:relative; }
.timeline i{ position:absolute; top:-5px; left:0; width:9px; height:9px; border-radius:50%; background:var(--ok); }
.timeline li.end i{ background:var(--text-muted); }
@media (max-width:640px){ .timeline{ flex-direction:column; gap:var(--sp-4); } .timeline li{ border-top:0; border-left:1px solid var(--divider); padding:0 0 0 var(--sp-4); } .timeline i{ top:6px; left:-5px; } }

.holds{ margin-top:var(--sp-8); }
.hold{ background:var(--surface-2); border:1px solid var(--divider); border-radius:10px; padding:var(--sp-6); }
.hold h3{ font-size:var(--step-0); color:var(--text-muted); text-transform:uppercase; letter-spacing:.1em; }
.hold dl{ margin:0; }
.hold dt{ color:var(--text-strong); font-weight:600; margin-top:var(--sp-5); }
.hold dd{ margin:var(--sp-2) 0 0; font-size:var(--step--1); }

/* ── tour mockup (§5.6) ──────────────────────────────────────── */
.tabs{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin:var(--sp-6) 0 var(--sp-4); }
.tabs button{
  background:transparent; border:1px solid var(--divider); border-radius:6px; padding:var(--sp-2) var(--sp-4);
  color:var(--text-muted); font:inherit; font-size:var(--step--1); cursor:pointer; transition:all var(--dur-fast);
}
.tabs button[aria-selected="true"]{ border-color:var(--text-strong); color:var(--text-strong); background:var(--surface-3); }
.win{ display:grid; grid-template-columns:180px 1fr; background:var(--surface-2); border:1px solid var(--divider); border-radius:10px; overflow:hidden; min-height:420px; }
.win-side{ background:var(--surface); border-right:1px solid var(--divider); padding:var(--sp-5) var(--sp-4); display:flex; flex-direction:column; }
.win-logo{ color:var(--text-strong); font-weight:700; font-size:var(--step--1); letter-spacing:.05em; }
.win-ver{ color:var(--text-muted); font-size:11px; margin-bottom:var(--sp-6); }
.win-nav{ list-style:none; padding:0; margin:0; font-size:var(--step--1); }
.win-nav li{ padding:var(--sp-2) var(--sp-3); border-radius:5px; color:var(--text-muted); margin-bottom:2px; }
.win-nav li.on{ background:var(--divider); color:var(--text-strong); }
.win-info{ margin-top:auto; display:grid; gap:var(--sp-2); }
.info-box{ border:1px solid var(--divider); border-radius:6px; padding:var(--sp-2) var(--sp-3); font-size:11px; }
.info-box b{ display:block; color:var(--text); font-weight:600; }
.info-box span{ color:var(--text-muted); font-family:var(--mono); }
.info-box span.ok{ color:var(--ok); }
.win-body{ padding:var(--sp-5); overflow:auto; }
.pane[hidden]{ display:none; }
.cover{ height:340px; border-radius:8px; background:linear-gradient(135deg,#1b1b1b,#242424 60%,#141414); display:flex; align-items:center; justify-content:center; }
.cover span{ font-family:var(--mono); font-size:var(--step-2); color:var(--text-muted); letter-spacing:.3em; }
.mon-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-5); }
.mon{ background:var(--surface-3); border-radius:6px; padding:var(--sp-3); font-size:11px; display:grid; gap:2px; }
.mon b{ color:var(--text-strong); }
.mon em{ font-style:normal; color:var(--ok); font-family:var(--mono); }
.mon .bad,.grid .bad{ color:var(--danger); }
.grid{ width:100%; border-collapse:collapse; font-size:11px; font-family:var(--mono); }
.grid th{ text-align:left; color:var(--text-muted); font-weight:400; padding:var(--sp-2); border-bottom:1px solid var(--divider); white-space:nowrap; }
.grid td{ padding:var(--sp-3) var(--sp-2); border-bottom:1px solid var(--surface-3); color:var(--text); white-space:nowrap; }
.grid .ok{ color:var(--ok); }
.scard{ background:var(--surface-3); border-radius:8px; padding:var(--sp-4); margin-bottom:var(--sp-3); font-size:11px; }
.scard-h{ display:flex; justify-content:space-between; margin-bottom:var(--sp-2); }
.scard-h b{ color:var(--text-strong); font-size:var(--step--1); }
.scard .ok{ color:var(--ok); } .scard .warn{ color:var(--warn); border:0; padding:0; margin:0; font-size:11px; }
.scard p{ margin:0 0 2px; font-family:var(--mono); }
.scard-g{ display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-2); }
.scard-g span{ color:var(--text-muted); }
.scard-g i{ font-style:normal; font-family:var(--mono); }
.bar{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); font-size:11px; }
.fake-btn{ border:1px solid var(--divider); border-radius:5px; padding:var(--sp-2) var(--sp-3); color:var(--text-muted); }
.fake-btn.go{ margin-left:auto; background:var(--ok); border-color:var(--ok); color:#0d2c0e; font-weight:600; }
.fake-input{ flex:1; border:1px solid var(--divider); border-radius:5px; padding:var(--sp-2) var(--sp-3); color:var(--text-muted); }
.setrow{ display:flex; justify-content:space-between; padding:var(--sp-3); border-bottom:1px solid var(--surface-3); font-size:11px; }
.setrow span{ color:var(--text-muted); }
.gcard{ display:flex; align-items:center; gap:var(--sp-3); background:var(--surface-3); border-radius:6px; padding:var(--sp-3); margin-top:var(--sp-3); font-size:11px; flex-wrap:wrap; }
.gcard b{ color:var(--text-strong); font-size:var(--step-0); }
.sw{ border:1px solid var(--divider); border-radius:10px; padding:1px 8px; color:var(--text-muted); }
.sw.on{ border-color:var(--ok); color:var(--ok); }
.tour-cap{ margin-top:var(--sp-5); color:var(--text); }
@media (max-width:820px){ .win{ grid-template-columns:1fr; } .win-side{ border-right:0; border-bottom:1px solid var(--divider); } .win-info{ display:none; } .win-nav{ display:flex; gap:var(--sp-2); overflow:auto; } }

/* ── specs ───────────────────────────────────────────────────── */
.spec{ width:100%; border-collapse:collapse; margin-top:var(--sp-6); }
.spec th{ text-align:left; font-weight:400; color:var(--text-muted); padding:var(--sp-4) var(--sp-4) var(--sp-4) 0; border-top:1px solid var(--divider); vertical-align:top; white-space:nowrap; font-size:var(--step--1); }
.spec td{ padding:var(--sp-4) 0; border-top:1px solid var(--divider); font-size:var(--step--1); }
.spec tr.hi th,.spec tr.hi td{ color:var(--text-strong); }
@media (max-width:600px){ .spec th{ white-space:normal; } }

/* ── form ────────────────────────────────────────────────────── */
.demo{ background:var(--surface); border-top:1px solid var(--divider); padding-top:var(--sp-10); }
.form{ margin-top:var(--sp-7); display:grid; gap:var(--sp-5); }
.field{ display:grid; gap:var(--sp-2); }
.field span{ font-size:var(--step--1); color:var(--text-muted); }
.field i{ font-style:normal; color:var(--text-muted); opacity:.7; font-size:.85em; }
.field input,.field textarea{
  background:var(--surface-2); border:1px solid var(--divider); border-radius:6px; padding:var(--sp-3) var(--sp-4);
  color:var(--text-strong); font:inherit; font-size:var(--step-0); width:100%; resize:vertical;
}
.field input:focus,.field textarea:focus{ border-color:var(--text-muted); }
.field.bad input,.field.bad textarea{ border-color:var(--danger); }
.field .err{ color:var(--danger); font-size:var(--step--1); }
.hp{ position:absolute; left:-9999px; }
.privacy{ font-size:var(--step--1); color:var(--text-muted); margin:0; }
.formmsg{ margin:0; font-size:var(--step--1); min-height:1.5em; }
.formmsg.ok{ color:var(--ok); }
.formmsg.bad{ color:var(--danger); }
.secondary{ margin-top:var(--sp-9); padding-top:var(--sp-6); border-top:1px solid var(--divider); }
.secondary h3{ font-size:var(--step-0); }
.secondary p{ color:var(--text-muted); font-size:var(--step--1); margin:0; }

/* ── footer ──────────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--divider); padding:var(--sp-7) 0; }
.foot-inner p{ margin:0 0 var(--sp-2); font-size:var(--step--1); display:flex; align-items:center; gap:var(--sp-2); }
.foot .tiny{ font-size:11px; color:var(--text-muted); margin-top:var(--sp-4); }
.foot a{ color:var(--text-muted); }

/* ── toasts ──────────────────────────────────────────────────── */
.toasts{ position:fixed; right:20px; bottom:20px; z-index:60; display:flex; flex-direction:column-reverse; gap:var(--sp-2); pointer-events:none; }
.toast{
  background:var(--surface-3); border:1px solid var(--divider); border-radius:8px;
  padding:var(--sp-3) var(--sp-4); font-size:var(--step--1); color:var(--text);
  box-shadow:0 12px 32px rgb(0 0 0 / .5); animation:toastin var(--dur-base) var(--ease-out);
  max-width:min(360px,80vw);
}
.toast.warn{ color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%,var(--divider)); }
.toast.ok{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%,var(--divider)); }
@keyframes toastin{ from{ opacity:0; transform:translateY(8px); } }

/* ── reveal ──────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; }
  .reveal{ opacity:1; transform:none; }
  .topbar{ transform:none; }
}