/* SOST Convergence Universe — shared tokens for the art-direction demos.
   Colour values are copied from the live sources of truth (index.html :root,
   css/atomix-btn.css spectrum, control-room/cr.css, css/sost-wordmark.css).
   Decorative colours (--spec-*) are kept apart from functional state colours (--st-*). */
@font-face{font-family:'SOST Wordmark';src:url('../fonts/goldman-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:block}
:root{
  /* surfaces (index.html) */
  --bg:#000000; --bg-panel:#050505; --bg-card:#0a0a0a; --bg-hover:#111111;
  --line-1:#1a1a1a; --line-2:#2a2a2a; --line-3:#3a3a3a;
  /* text (index.html) */
  --tx-1:#e2e8f0; --tx-2:#94a3b8; --tx-3:#64748b; --tx-4:#475569;
  /* SOST red (index.html) */
  --red:#fb010d; --red-bright:#ff2d3b; --red-dim:#8b1a22; --red-glow:#fb010d33;
  /* official spectrum (css/atomix-btn.css, in order) */
  --spec-violet:#8b5cf6; --spec-magenta:#e879f9; --spec-blue:#3b82f6; --spec-cyan:#22d3ee;
  --spec-lime:#a3e635; --spec-yellow:#facc15; --spec-orange:#fb923c;
  --spectrum:linear-gradient(90deg,#8b5cf6,#e879f9,#3b82f6,#22d3ee,#a3e635,#facc15,#fb923c,#8b5cf6);
  /* other official accents */
  --green:#4ade80; --green-term:#39ff14; --cyan:#22d3ee; --gold:#ffd700; --gold-card:#d4af37;
  --amber:#fbbf24; --btc-orange:#f7931a; --violet-cr:#a78bfa; --hist:#a3906a;
  /* functional states (never decorative) */
  --st-live:#39ff14; --st-window:#22d3ee; --st-hist:#a3906a; --st-sim:#e879f9;
  --st-warn:#fbbf24; --st-err:#fb010d; --st-retired:#fb923c;
  /* type */
  --f-wordmark:'SOST Wordmark',sans-serif;
  --f-ui:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --f-mono:ui-monospace,'JetBrains Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --fs-0:12px; --fs-1:14px; --fs-2:16px; --fs-3:20px; --fs-4:28px; --fs-5:clamp(34px,5.2vw,68px);
  --r-1:8px; --r-2:14px; --r-3:22px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx-1);font-family:var(--f-ui);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wm{font-family:var(--f-wordmark);font-weight:700;letter-spacing:-.09em}
.mono{font-family:var(--f-mono)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:#000;padding:8px 12px;border:1px solid var(--red)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* compact nav */
.u-nav{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;gap:22px;padding:14px max(16px,3vw);background:linear-gradient(#000c,#0000)}
.u-nav .brand{font-size:26px;color:#fff;text-decoration:none;text-shadow:0 0 18px var(--red-glow)}
.u-nav .brand b{color:var(--red)}
.u-nav ul{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0}
.u-nav ul a{display:block;padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--tx-2);font-size:var(--fs-1)}
.u-nav ul a:hover,.u-nav ul a[aria-current]{color:#fff;background:#ffffff0d}
.u-nav .tools{display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;font:600 15px var(--f-ui);text-decoration:none;color:#fff;background:#0a0a0a;border:1px solid var(--line-3);cursor:pointer;transition:transform .2s var(--ease),border-color .2s}
.btn:hover{transform:translateY(-1px);border-color:#fff6}
.btn.primary{border:1px solid transparent;background:linear-gradient(#050505,#050505) padding-box,var(--spectrum) border-box;background-size:auto,300% 100%;animation:specmove 8s linear infinite}
.btn.small{padding:7px 12px;font-size:13px}
@keyframes specmove{to{background-position:0 0,300% 0}}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font:600 11px var(--f-mono);letter-spacing:.06em;border:1px solid currentColor}
.tag.live{color:var(--st-live)}.tag.window{color:var(--st-window)}.tag.hist{color:var(--st-hist)}.tag.sim{color:var(--st-sim)}.tag.snap{color:var(--st-warn)}
.panel{background:#050505cc;border:1px solid var(--line-2);border-radius:var(--r-2);backdrop-filter:blur(6px)}
.qual{display:flex;gap:4px;align-items:center;font:12px var(--f-mono);color:var(--tx-3)}
.qual button{background:#0a0a0a;color:var(--tx-2);border:1px solid var(--line-2);border-radius:6px;padding:4px 8px;font:inherit;cursor:pointer}
.qual button[aria-pressed="true"]{color:#fff;border-color:var(--cyan)}
.fps{font:11px var(--f-mono);color:var(--tx-3)}
.demo-switch{position:fixed;right:max(16px,2vw);bottom:16px;z-index:30;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:820px){.u-nav ul{display:none}.u-nav .tools{margin-left:auto}}
@media (prefers-reduced-motion:reduce){.btn.primary{animation:none}*{scroll-behavior:auto}}
@media (max-width:520px){.bar{padding:6px 16px;gap:6px}.bar .fps,.bar>span:last-child,.bar .qual>span{display:none!important}.u-nav .tools .btn:nth-child(3){display:none}}