/* ═══════════════════════════════════════════════════════════════
   diagprint — Dystopian Sector × Cyberdyne Neural
   Industrial plating and hazard paint under neural-net neon.
   Colours are the 11 CYBERGRID slots written by assets/js/theme.js.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* SECTOR NEURAL fallback: dystopian-sector surfaces × cyberdyne-neural neons */
  --bg: #0e100f; --white: #d1d1d1; --panel: #191c1a; --line: #313835; --muted: #7b827f;
  --acid: #7fff00; --pink: #ff00aa; --purple: #7209b7; --cyan: #00f0ff; --orange: #ff6600; --red: #d00000;
  --fg: var(--white);

  --display: "Oxanium", "Share Tech Mono", sans-serif;
  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --hud: "Share Tech Mono", "JetBrains Mono", monospace;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --wrap: 1260px;
  --plate: color-mix(in srgb, var(--panel) 86%, transparent);
  --bevel: polygon(0 10px, 10px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 22px 100%, 0 calc(100% - 22px));
  --bevel-sm: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
  --hazard: repeating-linear-gradient(-45deg, var(--acid) 0 8px, transparent 8px 16px);
  color-scheme: dark;
}
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; scrollbar-width: thin; scrollbar-color: var(--acid) var(--bg); }
body { margin: 0; background: var(--bg); color: var(--white); font: 400 1rem/1.65 var(--sans); overflow-x: hidden; transition: background-color .5s var(--ease), color .5s; }
::selection { background: var(--acid); color: var(--bg); }
a { color: inherit; text-decoration: none; }
code, pre, kbd { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
svg { display: block; }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* ═════════ ambience ═════════ */
body::before { /* sector haze + neural bloom */
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60vw 40vh at 85% 0%, color-mix(in srgb, var(--pink) 14%, transparent), transparent 70%),
    radial-gradient(50vw 40vh at 0% 30%, color-mix(in srgb, var(--acid) 8%, transparent), transparent 70%),
    radial-gradient(70vw 50vh at 50% 110%, color-mix(in srgb, var(--orange) 10%, transparent), transparent 70%);
}
body::after { /* riveted plating grid */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--muted) 50%, transparent) 1px, transparent 1.5px),
    linear-gradient(color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 96px 96px;
  mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.fx-noise { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(4) infinite; }
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, 3%); } }
.fx-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 120; }
.fx-progress i { display: block; height: 100%; transform-origin: 0; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--acid), var(--cyan), var(--pink)); box-shadow: 0 0 10px var(--acid); }

/* ═════════ nav ═════════ */
.nav {
  position: sticky; top: 0; z-index: 80; display: flex; align-items: center; gap: 1.2rem;
  padding: .7rem max(1.25rem, calc((100vw - var(--wrap)) / 2));
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--hazard); opacity: .35; mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.brand { display: flex; align-items: center; gap: .65rem; }
.brand-sigil { width: 2.3rem; height: 2.3rem; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pink) 60%, transparent)); transition: transform .5s var(--ease); }
.brand:hover .brand-sigil { transform: rotate(-8deg) scale(1.08); }
.brand-name { font: 700 1.12rem/1 var(--mono); letter-spacing: .02em; }
.brand-name small { display: block; white-space: nowrap; margin-top: .3rem; font: .58rem/1 var(--hud); letter-spacing: .16em; color: var(--muted); }

.menu { display: flex; align-items: center; gap: .2rem; margin-left: 1.2rem; }
.mi { position: relative; }
.mi-btn, .mi-link { display: flex; align-items: center; gap: .35rem; padding: .6rem .75rem; font: .78rem/1 var(--hud); letter-spacing: .14em; color: var(--muted); background: none; border: 0; cursor: pointer; transition: color .2s; }
.mi-btn svg, .mi-link svg { width: .9rem; height: .9rem; transition: transform .25s var(--ease); }
.mi:hover .mi-btn, .mi-btn[aria-expanded="true"], .mi-link:hover { color: var(--white); }
.mi:hover .mi-btn svg, .mi-btn[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--acid); }
.mi-link.hot { color: var(--acid); }
.mi-link em { font-style: normal; padding: .12rem .3rem; font-size: .55rem; color: var(--bg); background: var(--pink); box-shadow: 0 0 10px var(--pink); animation: throb 1.6s ease-in-out infinite; }
@keyframes throb { 50% { box-shadow: 0 0 2px var(--pink); opacity: .75; } }
.mega {
  position: absolute; left: 50%; top: calc(100% + .7rem); width: 36rem; padding: 1rem; z-index: 90;
  transform: translateX(-50%) translateY(-6px); opacity: 0; visibility: hidden; transition: .22s var(--ease);
  background: var(--panel); border: 1px solid var(--line); clip-path: var(--bevel);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .6);
}
.mega::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--acid), var(--cyan), var(--pink)); }
.mega.narrow { width: 21rem; }
.mi:hover .mega, .mi:focus-within .mega, .mi.open .mega { opacity: 1; visibility: visible; transform: translateX(-50%); }
.mega-k { margin: 0 0 .7rem; font: .66rem/1 var(--hud); letter-spacing: .18em; color: var(--acid); }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.mega-grid a, .mega-list a { display: grid; grid-template-columns: 1.8rem 1fr; column-gap: .55rem; align-items: center; padding: .6rem; border: 1px solid transparent; transition: .18s; }
.mega-grid a svg, .mega-list a svg { grid-row: span 2; width: 1.4rem; height: 1.4rem; color: var(--cyan); }
.mega-grid b, .mega-list b { font: 600 .9rem/1.2 var(--display); }
.mega-list b { font-family: var(--mono); font-size: .82rem; }
.mega-grid span, .mega-list span { font-size: .74rem; color: var(--muted); line-height: 1.3; }
.mega-grid a:hover, .mega-list a:hover { background: color-mix(in srgb, var(--acid) 8%, transparent); border-color: color-mix(in srgb, var(--acid) 40%, transparent); }
.mega-grid a:hover svg, .mega-list a:hover svg { color: var(--acid); filter: drop-shadow(0 0 6px var(--acid)); }

.nav-tools { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.ver { display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; font: .72rem/1 var(--hud); letter-spacing: .1em; color: var(--acid); border: 1px solid color-mix(in srgb, var(--acid) 40%, transparent); }
.ver i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--acid); box-shadow: 0 0 8px var(--acid); animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.kbtn { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; font: .7rem/1 var(--hud); letter-spacing: .12em; color: var(--muted); background: var(--plate); border: 1px solid var(--line); cursor: pointer; transition: .2s; }
.kbtn svg { width: .95rem; height: .95rem; }
.kbtn:hover { color: var(--white); border-color: var(--cyan); box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 30%, transparent); }
kbd { padding: .12rem .3rem; font: .62rem/1 var(--hud); color: var(--white); background: var(--bg); border: 1px solid var(--line); border-bottom-width: 2px; }
.ico { display: grid; place-items: center; height: 2.2rem; min-width: 2.2rem; color: var(--muted); border: 1px solid var(--line); transition: .2s; }
.ico svg { width: 1.05rem; height: 1.05rem; }
.ico:hover { color: var(--white); border-color: var(--pink); box-shadow: 0 0 14px color-mix(in srgb, var(--pink) 35%, transparent); }
.ico.src { display: flex; gap: .45rem; padding: 0 .7rem; font: .7rem/1 var(--hud); letter-spacing: .12em; color: var(--white); background: color-mix(in srgb, var(--pink) 12%, transparent); border-color: var(--pink); }
.burger { display: none; width: 2.2rem; height: 2.2rem; padding: .5rem; background: none; border: 1px solid var(--line); cursor: pointer; }
.burger i { display: block; height: 2px; margin: 3px 0; background: var(--white); }

/* theme picker */
.theme-picker { position: relative; }
.theme-button { display: flex; align-items: center; gap: .45rem; max-width: 12.5rem; padding: .5rem .6rem; font: .7rem/1 var(--hud); letter-spacing: .1em; color: var(--white); background: var(--plate); border: 1px solid var(--line); cursor: pointer; transition: .2s; }
.theme-button > svg:first-child { width: 1rem; height: 1rem; color: var(--acid); flex: none; }
.theme-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-button .chev { width: .85rem; height: .85rem; flex: none; transition: transform .25s; }
.theme-button:hover, .theme-button[aria-expanded="true"] { border-color: var(--acid); }
.theme-button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.theme-menu { position: absolute; right: 0; top: calc(100% + .5rem); width: 19rem; z-index: 100; background: color-mix(in srgb, var(--panel) 96%, transparent); border: 1px solid var(--line); box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .6); backdrop-filter: blur(16px); }
.theme-search { padding: .5rem; border-bottom: 1px solid var(--line); }
.theme-search input { width: 100%; padding: .55rem .6rem; font: .72rem/1 var(--hud); letter-spacing: .08em; color: var(--white); background: var(--bg); border: 1px solid var(--line); outline: 0; }
.theme-search input:focus { border-color: var(--acid); }
.theme-list { max-height: min(60vh, 26rem); overflow: auto; padding: .3rem; overscroll-behavior: contain; }
.theme-group-label { position: sticky; top: -.3rem; z-index: 1; display: flex; gap: .4rem; margin: .35rem 0 .15rem; padding: .5rem .55rem .4rem; border-left: 2px solid var(--fa); border-bottom: 1px solid color-mix(in srgb, var(--fa) 35%, transparent); color: var(--fa); background: color-mix(in srgb, var(--fa) 9%, var(--panel)); font: 700 .62rem/1.2 var(--hud); letter-spacing: .15em; }
.theme-group-label em { margin-left: auto; font-style: normal; opacity: .6; }
[data-family="mashup"] { --fa: #ff00aa; --fb: #7fff00; }
[data-family="cybercore-tech"] { --fa: #39ff33; --fb: #00e5ff; }
[data-family="cyberdyne"] { --fa: #ff1f3d; --fb: #ff7a00; }
[data-family="cyberpunk"] { --fa: #ff0055; --fb: #bf00ff; }
[data-family="default"] { --fa: #7dcfff; --fb: #bb9af7; }
[data-family="dystopian"] { --fa: #d4e157; --fb: #e65100; }
[data-family="neosynth"] { --fa: #00ff8c; --fb: #ff2a9d; }
[data-family="synthwave"] { --fa: #4cc9f0; --fb: #ff007f; }
.theme-option { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .48rem .55rem; font: .7rem/1.2 var(--hud); letter-spacing: .06em; text-align: left; color: var(--white); background: none; border: 0; cursor: pointer; }
.theme-option .dots { display: flex; gap: 2px; margin-left: auto; }
.theme-option .dots i { width: .5rem; height: .5rem; }
.theme-option:hover, .theme-option:focus-visible, .theme-option[aria-selected="true"] { color: var(--fa); background: color-mix(in srgb, var(--fa) 15%, var(--panel)); box-shadow: inset 2px 0 var(--fa); outline: 0; }
.theme-option[data-tone="alt"]:hover { color: var(--fb); background: color-mix(in srgb, var(--fb) 15%, var(--panel)); box-shadow: inset 2px 0 var(--fb); }
.theme-option[aria-selected="true"]::before { content: "▸"; }

/* ═════════ buttons ═════════ */
.btn { --bc: var(--cyan); position: relative; display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.15rem; font: .78rem/1 var(--hud); letter-spacing: .14em; color: var(--bc); background: color-mix(in srgb, var(--bc) 8%, transparent); border: 1px solid var(--bc); clip-path: var(--bevel-sm); cursor: pointer; overflow: hidden; transition: .25s var(--ease); }
.btn svg { width: 1rem; height: 1rem; }
.btn::after { content: ""; position: absolute; inset: 0; transform: translateX(-110%) skewX(-20deg); background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 35%, transparent), transparent); transition: transform .6s var(--ease); }
.btn:hover { color: var(--bg); background: var(--bc); box-shadow: 0 0 1.4rem color-mix(in srgb, var(--bc) 50%, transparent); }
.btn:hover::after { transform: translateX(110%) skewX(-20deg); }
.btn.hot { --bc: var(--acid); color: var(--bg); background: var(--acid); box-shadow: 0 0 1.2rem color-mix(in srgb, var(--acid) 45%, transparent); }
.btn.hot:hover { --bc: var(--white); }
.btn.sm { padding: .6rem .8rem; font-size: .68rem; }
.mini { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .5rem; font: .62rem/1 var(--hud); letter-spacing: .12em; color: var(--muted); background: var(--bg); border: 1px solid var(--line); cursor: pointer; transition: .2s; }
.mini svg { width: .75rem; height: .75rem; }
.mini:hover { color: var(--acid); border-color: var(--acid); }

/* ═════════ hero ═════════ */
.hero { position: relative; padding: 3.5rem 0 0; overflow: hidden; }
.hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .9; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 3rem; align-items: center; padding-bottom: 3.5rem; }
.sigil-hero { position: relative; width: 6.2rem; height: 6.2rem; margin-bottom: 1.4rem; }
.sigil-hero svg { width: 100%; height: 100%; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--pink) 55%, transparent)) drop-shadow(0 0 30px color-mix(in srgb, var(--acid) 25%, transparent)); }
.sigil-ping { position: absolute; inset: -10%; border: 1px solid var(--acid); clip-path: polygon(15% 0, 85% 0, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0 85%, 0 15%); animation: ping 2.8s var(--ease) infinite; }
@keyframes ping { from { opacity: .8; transform: scale(.85); } to { opacity: 0; transform: scale(1.35); } }
/* sigil internals animate wherever the symbol is used */
.rg { transform-origin: 60px 52px; transform-box: view-box; }
.rg.r1 { animation: spin 9s linear infinite; } .rg.r2 { animation: spin 14s linear infinite reverse; } .rg.r3 { animation: spin 20s linear infinite; } .rg.r4 { animation: spin 26s linear infinite reverse; } .rg.r5 { animation: spin 34s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.span { stroke-dasharray: 60; animation: sweep 3.2s var(--ease) infinite; filter: drop-shadow(0 0 4px var(--pink)); }
@keyframes sweep { 0% { stroke-dashoffset: 60; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -60; } }
.carets { animation: carets 1.6s ease-in-out infinite; }
@keyframes carets { 50% { transform: translateY(-2px); opacity: .65; } }

.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font: .82rem/1.3 var(--hud); letter-spacing: .18em; color: var(--orange); }
.eyebrow b { color: var(--muted); font-weight: 400; }
.eyebrow span { color: var(--acid); }
.blink { width: .55rem; height: .55rem; background: var(--orange); box-shadow: 0 0 10px var(--orange); animation: blink 1s steps(2) infinite; }
h1 { margin: .9rem 0 1rem; font: 700 clamp(2.3rem, 4.2vw, 3.7rem)/1.02 var(--display); letter-spacing: -.01em; text-transform: none; }
h1 em { position: relative; display: inline-block; font-style: normal; color: transparent; background: linear-gradient(90deg, var(--pink), var(--orange) 55%, var(--acid)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--pink) 45%, transparent)); }
h1 em::after { /* rustc-style carets under the word */
  content: "^^^^^^^^^^^^^^^^^^^^^^^^"; position: absolute; left: 0; right: 0; top: 88%; overflow: hidden; white-space: nowrap;
  font: 700 .42em/1 var(--mono); letter-spacing: .02em; color: var(--acid); -webkit-text-fill-color: var(--acid);
  text-shadow: 0 0 8px var(--acid); animation: carets 1.6s ease-in-out infinite;
}
.lede { max-width: 36rem; margin: 1.4rem 0 1.6rem; color: color-mix(in srgb, var(--white) 78%, var(--muted)); font-size: 1.05rem; }
.lede b { color: var(--white); font-family: var(--mono); }
.cta { display: flex; flex-wrap: wrap; gap: .7rem; }

/* UPLINK install console */
.uplink { position: relative; margin-top: 1.8rem; padding: 2px; isolation: isolate; clip-path: var(--bevel); }
.uplink::before { /* rotating neon frame */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: conic-gradient(from var(--ang), var(--acid), var(--cyan), var(--pink), var(--orange), var(--acid));
  animation: rot 4s linear infinite;
}
.uplink::after { content: ""; position: absolute; inset: 2px; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, var(--acid)), var(--bg)); clip-path: var(--bevel); }
@keyframes rot { to { --ang: 360deg; } }
.up-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .7rem .9rem .5rem; }
.up-k { display: flex; align-items: center; gap: .5rem; font: .74rem/1 var(--hud); letter-spacing: .2em; color: var(--acid); }
.up-k i { width: .5rem; height: .5rem; background: var(--acid); box-shadow: 0 0 10px var(--acid); animation: blink .9s steps(2) infinite; }
.up-tabs { display: flex; gap: .2rem; }
.up-tabs button { padding: .35rem .55rem; font: .64rem/1 var(--hud); letter-spacing: .12em; color: var(--muted); background: none; border: 1px solid transparent; cursor: pointer; }
.up-tabs button:hover { color: var(--white); }
.up-tabs button[aria-selected="true"] { color: var(--bg); background: var(--acid); }
.up-cmd {
  position: relative; display: flex; align-items: center; gap: .7rem; width: calc(100% - 1.4rem); margin: 0 .7rem; padding: 1rem 1rem; overflow: hidden; text-align: left; cursor: pointer;
  font: inherit; color: var(--white); background: color-mix(in srgb, var(--bg) 85%, #000); border: 1px solid color-mix(in srgb, var(--acid) 35%, var(--line));
  transition: border-color .25s, box-shadow .25s, transform .15s;
}
.up-cmd:hover { border-color: var(--acid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acid) 15%, transparent), 0 0 30px color-mix(in srgb, var(--acid) 25%, transparent); }
.up-cmd:active { transform: scale(.99); }
.up-prompt { flex: none; font: 700 1.2rem/1 var(--mono); color: var(--pink); text-shadow: 0 0 10px var(--pink); animation: blink 1.2s steps(2) infinite; }
.up-cmd code { flex: 1; min-width: 0; font-size: .86rem; line-height: 1.45; color: var(--cyan); white-space: nowrap; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); text-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 35%, transparent); }
.up-copy { flex: none; display: flex; align-items: center; gap: .45rem; padding: .65rem .85rem; font: .8rem/1 var(--hud); letter-spacing: .16em; color: var(--bg); background: var(--acid); clip-path: var(--bevel-sm); box-shadow: 0 0 18px var(--acid); animation: beg 2.4s ease-in-out infinite; }
.up-copy svg { width: 1rem; height: 1rem; }
.up-copy .ic-ok { display: none; }
@keyframes beg { 0%, 70%, 100% { transform: none; } 75% { transform: translateX(-2px); } 80% { transform: translateX(2px); } 85% { transform: translateX(-1px); } }
.up-cmd:hover .up-copy { animation: none; background: var(--white); box-shadow: 0 0 26px var(--white); }
.up-cmd.done .up-copy { background: var(--pink); box-shadow: 0 0 26px var(--pink); color: #fff; animation: none; }
.up-cmd.done .ic-copy { display: none; } .up-cmd.done .ic-ok { display: block; }
.up-beam { position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acid) 22%, transparent), transparent); animation: beam 3.2s ease-in-out infinite; }
@keyframes beam { 0% { left: -30%; } 60%, 100% { left: 110%; } }
.up-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: .7rem .9rem .85rem; font: .68rem/1.3 var(--hud); letter-spacing: .1em; color: var(--muted); }
.up-meta .ok { color: var(--acid); font-weight: 400; }

/* ═════════ HUD terminals ═════════ */
.hud-term {
  position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--bg) 94%, transparent));
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line)); clip-path: var(--bevel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 3%, transparent), 0 2rem 4rem rgb(0 0 0 / .45);
}
.hud-term::before { /* moving scan line */
  content: ""; position: absolute; left: 0; right: 0; height: 3.5rem; top: -3.5rem; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cyan) 7%, transparent), transparent); animation: scan 5.5s linear infinite;
}
@keyframes scan { to { top: 110%; } }
.hud-term::after { /* fine scanlines */
  content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgb(0 0 0 / .18) 0 1px, transparent 1px 3px); }
.hud-c { position: absolute; z-index: 3; width: 14px; height: 14px; border: 2px solid var(--acid); pointer-events: none; filter: drop-shadow(0 0 4px var(--acid)); }
.hud-c.tl { top: 4px; left: 4px; border-right: 0; border-bottom: 0; } .hud-c.tr { top: 4px; right: 4px; border-left: 0; border-bottom: 0; }
.hud-c.bl { bottom: 4px; left: 4px; border-right: 0; border-top: 0; } .hud-c.br { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }
.ht-top { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem .6rem 1.3rem; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--acid) 7%, transparent), transparent 60%); font: .72rem/1 var(--hud); letter-spacing: .14em; }
.ht-dots { display: flex; gap: .35rem; } .ht-dots i { width: .5rem; height: .5rem; transform: rotate(45deg); background: var(--red); } .ht-dots i:nth-child(2) { background: var(--orange); } .ht-dots i:nth-child(3) { background: var(--acid); }
.ht-title { color: var(--white); }
.ht-meta { margin-left: auto; display: flex; align-items: center; gap: .4rem; color: var(--muted); }
.sig { display: inline-flex; align-items: end; gap: 2px; height: .7rem; } .sig i { width: 3px; background: var(--acid); } .sig i:nth-child(1) { height: 30%; } .sig i:nth-child(2) { height: 55%; } .sig i:nth-child(3) { height: 80%; } .sig i:nth-child(4) { height: 100%; animation: blink 1.1s steps(2) infinite; }
.ht-tabs { display: flex; align-items: center; gap: .15rem; padding: .4rem .8rem 0 1.1rem; border-bottom: 1px solid var(--line); }
.ht-tabs button { padding: .45rem .7rem; font: .72rem/1 var(--mono); color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.ht-tabs button:hover { color: var(--white); }
.ht-tabs button[aria-selected="true"] { color: var(--acid); border-bottom-color: var(--acid); text-shadow: 0 0 10px color-mix(in srgb, var(--acid) 60%, transparent); }
.ht-auto { margin-left: auto; font: .6rem/1 var(--hud); letter-spacing: .14em; color: var(--pink); animation: blink 1.4s steps(2) infinite; }
.ht-auto.off { color: var(--muted); animation: none; }
.ht-body { position: relative; margin: 0; min-height: 21rem; padding: 1.1rem 1.3rem 1.3rem; overflow: auto; font: .8rem/1.7 var(--mono); color: color-mix(in srgb, var(--white) 88%, var(--muted)); white-space: pre; }
.ht-body.code { min-height: 0; }
.ht-foot { display: flex; gap: 1.2rem; padding: .55rem 1.3rem; border-top: 1px solid var(--line); font: .64rem/1 var(--hud); letter-spacing: .12em; color: var(--muted); }
.ht-foot .ok { color: var(--acid); }
#htMode { margin-left: auto; color: var(--cyan); }
/* token colours inside terminals */
.t-err { color: var(--red); font-weight: 700; text-shadow: 0 0 10px color-mix(in srgb, var(--red) 60%, transparent); }
.t-warn { color: var(--orange); font-weight: 700; }
.t-note { color: var(--cyan); } .t-help { color: var(--acid); } .t-cause { color: var(--orange); }
.t-dim { color: var(--muted); } .t-path { color: var(--cyan); } .t-car { color: var(--pink); text-shadow: 0 0 8px var(--pink); } .t-car2 { color: var(--cyan); }
.t-ok { color: var(--acid); } .t-p { color: var(--pink); } .t-b { color: var(--white); font-weight: 700; } .t-num { color: var(--muted); }
.cur { display: inline-block; width: .55em; height: 1.1em; vertical-align: -.2em; background: var(--acid); animation: blink 1s steps(2) infinite; }
.code .k { color: var(--pink); } .code .s { color: var(--acid); } .code .f { color: var(--cyan); } .code .c { color: var(--muted); } .code .n { color: var(--orange); }
pre[data-copy] .copy { position: absolute; top: .7rem; right: .9rem; z-index: 4; display: flex; align-items: center; gap: .3rem; padding: .35rem .5rem; font: .6rem/1 var(--hud); letter-spacing: .12em; color: var(--muted); background: var(--bg); border: 1px solid var(--line); cursor: pointer; }
pre[data-copy] .copy svg { width: .75rem; height: .75rem; }
pre[data-copy] .copy:hover { color: var(--acid); border-color: var(--acid); }

/* ticker */
.ticker { overflow: hidden; border-block: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 75%, transparent); }
.ticker::before { content: ""; display: block; height: 4px; background: var(--hazard); opacity: .55; }
.ticker-track { display: flex; gap: 2.5rem; width: max-content; padding: .7rem 0; font: .76rem/1 var(--hud); letter-spacing: .12em; color: var(--muted); animation: tick 50s linear infinite; }
.ticker-track span b { margin-right: .4rem; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ═════════ sections ═════════ */
.section { position: relative; padding-block: clamp(4.5rem, 8vw, 7rem); }
.head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.6rem; }
.head > p { max-width: 28rem; margin: 0; color: var(--muted); font-size: .96rem; }
.head code { color: var(--cyan); }
.kicker { display: flex; align-items: center; gap: .7rem; margin: 0 0 .8rem; font: .8rem/1 var(--hud); letter-spacing: .22em; color: var(--acid); }
.kicker::before { content: ""; width: 1.6rem; height: .5rem; background: var(--hazard); }
h2 { margin: 0; font: 700 clamp(2rem, 4.2vw, 3.4rem)/1 var(--display); letter-spacing: -.01em; }
h2 em { font-style: normal; color: transparent; background: linear-gradient(90deg, var(--acid), var(--cyan) 50%, var(--pink)); -webkit-background-clip: text; background-clip: text; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* lifecycle */
.lc { position: relative; }
.lc-wire { width: 100%; height: 3.2rem; overflow: visible; }
.lc-wire path { stroke: var(--line); stroke-width: 2; stroke-dasharray: 6 6; fill: none; vector-effect: non-scaling-stroke; }
.lc-dot { fill: var(--acid); filter: drop-shadow(0 0 6px var(--acid)); }
.lc-stages { display: grid; grid-template-columns: repeat(8, 1fr); gap: .5rem; margin-top: -2.25rem; }
.stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 0 .2rem .7rem; font: inherit; color: var(--muted); background: none; border: 0; cursor: pointer; }
.stage .node { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--bg); border: 1px solid var(--line); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); transition: .25s var(--ease); }
.stage .node svg { width: 1.2rem; height: 1.2rem; }
.stage b { font: .78rem/1 var(--hud); letter-spacing: .14em; }
.stage small { font: .62rem/1 var(--hud); color: var(--muted); }
.stage:hover .node, .stage[aria-selected="true"] .node { color: var(--bg); background: var(--acid); border-color: var(--acid); box-shadow: 0 0 20px var(--acid); }
.stage[aria-selected="true"] { color: var(--white); }
.lc-detail { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.5rem; margin-top: 1.2rem; padding: 1.4rem; background: var(--plate); border: 1px solid var(--line); clip-path: var(--bevel); min-height: 12rem; }
.lc-detail h3 { margin: 0 0 .5rem; font: 700 1.6rem/1.1 var(--display); }
.lc-detail h3 small { display: block; margin-bottom: .4rem; font: .72rem/1 var(--hud); letter-spacing: .18em; color: var(--acid); }
.lc-detail p { margin: 0 0 .8rem; color: var(--muted); }
.lc-detail ul { margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.lc-detail li { padding: .15rem 0; } .lc-detail li::before { content: "▸ "; color: var(--pink); }
.lc-detail pre { margin: 0; padding: 1rem; font: .76rem/1.65 var(--mono); background: var(--bg); border: 1px solid var(--line); overflow: auto; }

/* lab */
.lab-section { border-block: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 45%, transparent), transparent); }
.lab-section::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--hazard); opacity: .5; }
.lab { display: grid; grid-template-columns: 1fr 1.3fr; grid-template-rows: auto auto; gap: 1rem; }
.pane { position: relative; display: flex; flex-direction: column; background: var(--plate); border: 1px solid var(--line); clip-path: var(--bevel); min-width: 0; }
.pane-top { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--acid) 6%, transparent), transparent); }
.pane-t { display: flex; align-items: center; gap: .45rem; font: .74rem/1 var(--hud); letter-spacing: .1em; }
.pane-t svg { width: .95rem; height: .95rem; color: var(--acid); }
.rev { margin-left: auto; padding: .2rem .4rem; font: .62rem/1 var(--hud); letter-spacing: .1em; color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); }
.rev.stale { color: var(--red); border-color: var(--red); animation: blink .8s steps(2) infinite; }
.ed { position: relative; display: flex; flex: 1; min-height: 21rem; background: var(--bg); font: .84rem/1.7 var(--mono); }
.ed-gutter { padding: .9rem .6rem; text-align: right; color: var(--muted); background: color-mix(in srgb, var(--panel) 60%, var(--bg)); border-right: 1px solid var(--line); user-select: none; min-width: 2.6rem; }
.ed-gutter div.err { color: var(--red); } .ed-gutter div.warn { color: var(--orange); }
.ed-stack { position: relative; flex: 1; min-width: 0; }
.ed-hl, .ed textarea { position: absolute; inset: 0; margin: 0; padding: .9rem .9rem; font: inherit; white-space: pre; overflow: auto; tab-size: 2; }
.ed-hl { color: var(--white); pointer-events: none; }
.ed textarea { color: transparent; caret-color: var(--acid); background: transparent; border: 0; outline: 0; resize: none; }
.ed textarea::selection { background: color-mix(in srgb, var(--acid) 30%, transparent); color: transparent; }
.ed-hl .hk { color: var(--cyan); } .ed-hl .hs { color: var(--acid); } .ed-hl .hn { color: var(--orange); } .ed-hl .hh { color: var(--pink); font-weight: 700; } .ed-hl .hc { color: var(--muted); }
.ed-hl mark { color: inherit; background: color-mix(in srgb, var(--red) 22%, transparent); border-bottom: 2px wavy var(--red); }
.ed-hl mark.w { background: color-mix(in srgb, var(--orange) 18%, transparent); border-bottom-color: var(--orange); }
.ed-status { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .5rem .8rem; border-top: 1px solid var(--line); font: .66rem/1.3 var(--hud); letter-spacing: .1em; color: var(--muted); }
.ed-status b { font-weight: 400; } .ed-status .e { color: var(--red); } .ed-status .w { color: var(--orange); } .ed-status .f { color: var(--acid); }
.out-pane { grid-row: span 2; }
.fmt { display: flex; flex-wrap: wrap; gap: .15rem; }
.fmt button { display: flex; align-items: center; gap: .35rem; padding: .45rem .55rem; font: .66rem/1 var(--hud); letter-spacing: .1em; color: var(--muted); background: none; border: 1px solid transparent; cursor: pointer; }
.fmt button svg { width: .85rem; height: .85rem; }
.fmt button:hover { color: var(--white); }
.fmt button[aria-selected="true"] { color: var(--bg); background: var(--cyan); }
.out { flex: 1 1 0; margin: 0; padding: 1rem 1.1rem; min-height: 24rem; overflow: auto; font: .76rem/1.65 var(--mono); white-space: pre; background: color-mix(in srgb, var(--bg) 92%, transparent); }
.out-foot { display: flex; align-items: center; justify-content: space-between; padding: .5rem .8rem; border-top: 1px solid var(--line); font: .66rem/1 var(--hud); letter-spacing: .1em; color: var(--muted); }
.fix-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem; }
.tx { margin: 0; padding: 0 .8rem .4rem; list-style: none; counter-reset: tx; font: .74rem/1.4 var(--mono); }
.tx li { counter-increment: tx; display: flex; gap: .55rem; align-items: baseline; padding: .3rem 0; color: var(--muted); border-bottom: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); opacity: .35; transition: opacity .2s; }
.tx li::before { content: counter(tx, decimal-leading-zero); font-family: var(--hud); color: var(--muted); }
.tx li.go { opacity: 1; color: var(--white); } .tx li.go::after { content: "…"; margin-left: auto; color: var(--cyan); animation: blink .5s steps(2) infinite; }
.tx li.ok { opacity: 1; } .tx li.ok::after { content: "✓"; margin-left: auto; color: var(--acid); }
.tx li.bad { opacity: 1; color: var(--red); } .tx li.bad::after { content: "✗ REJECTED"; margin-left: auto; color: var(--red); font-family: var(--hud); letter-spacing: .1em; }
.tx li.skip::after { content: "—"; margin-left: auto; }
.fix-note { margin: .3rem .8rem .9rem; font-size: .8rem; color: var(--muted); }
.fix-note code { color: var(--acid); }
.fix-note.bad { color: var(--red); } .fix-note.good { color: var(--acid); }

/* surfaces */
.surfaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.surf { position: relative; padding: 1.3rem; background: var(--plate); border: 1px solid var(--line); clip-path: var(--bevel); overflow: hidden; transition: border-color .3s, transform .3s var(--ease); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.surf::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(16rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c, var(--acid)) 14%, transparent), transparent 65%); }
.surf:hover { border-color: var(--c, var(--acid)); transform: translateY(-4px); }
.surf:hover::after { opacity: 1; }
.surf .s-ic { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); clip-path: var(--bevel-sm); }
.surf .s-ic svg { width: 1.4rem; height: 1.4rem; filter: drop-shadow(0 0 6px var(--c)); }
.surf h3 { margin: 1rem 0 .3rem; font: 700 1.2rem/1.1 var(--display); }
.surf p { margin: 0; color: var(--muted); font-size: .86rem; }
.surf code { display: block; margin-top: .9rem; font-size: .68rem; color: var(--c); }
.surf .s-tag { position: absolute; top: 1rem; right: 1rem; font: .6rem/1 var(--hud); letter-spacing: .14em; color: var(--muted); }

/* safety */
.safety-section { border-block: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 35%, transparent); overflow: hidden; }
.rule { max-width: 30rem; margin: 0; padding: 1rem 1.2rem; font: 600 1.1rem/1.45 var(--display); color: var(--white); border-left: 3px solid var(--pink); background: linear-gradient(90deg, color-mix(in srgb, var(--pink) 12%, transparent), transparent); }
.gates { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.gate { position: relative; padding: 1rem .9rem 1.1rem; background: var(--plate); border: 1px solid var(--line); border-top: 3px solid var(--acid); }
.gate .g-n { font: .66rem/1 var(--hud); letter-spacing: .16em; color: var(--acid); }
.gate b { display: block; margin: .6rem 0 .3rem; font: 700 .98rem/1.2 var(--display); }
.gate p { margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.45; }
.gate::after { content: "▶"; position: absolute; right: -.62rem; top: 50%; z-index: 1; transform: translateY(-50%); font-size: .7rem; color: var(--acid); text-shadow: 0 0 8px var(--acid); }
.gate:last-child::after { display: none; }
.gate.lit { border-top-color: var(--pink); box-shadow: 0 0 24px color-mix(in srgb, var(--pink) 25%, transparent); }
.safety-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.4rem; }
.safety-notes div { display: flex; gap: .8rem; padding: 1rem; border: 1px dashed var(--line); }
.safety-notes svg { flex: none; width: 1.2rem; height: 1.2rem; color: var(--red); margin-top: .2rem; }
.safety-notes p { margin: 0; font-size: .86rem; color: var(--muted); }
.safety-notes b { color: var(--white); font-weight: 600; }

/* forensics */
.fx { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.fx-track { padding: 1.2rem; background: var(--plate); border: 1px solid var(--line); clip-path: var(--bevel); }
.fx-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-bottom: 1rem; font: .66rem/1 var(--hud); letter-spacing: .1em; color: var(--muted); }
.fx-legend b { color: var(--acid); } .fx-legend .sev { color: var(--red); } .fx-legend .chg { color: var(--orange); } .fx-legend .res { color: var(--cyan); } .fx-legend .re { color: var(--pink); } .fx-legend .abs { color: var(--muted); }
.runs { display: grid; grid-template-columns: repeat(12, 1fr); gap: .3rem; }
.run { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .55rem 0; font: inherit; color: var(--muted); background: var(--bg); border: 1px solid var(--line); cursor: pointer; transition: .2s; }
.run .g { font: 700 1.1rem/1 var(--mono); }
.run small { font: .56rem/1 var(--hud); }
.run[data-k="active"] .g { color: var(--acid); } .run[data-k="sev"] .g { color: var(--red); } .run[data-k="chg"] .g { color: var(--orange); } .run[data-k="res"] .g { color: var(--cyan); } .run[data-k="re"] .g { color: var(--pink); }
.run:hover, .run[aria-selected="true"] { border-color: var(--acid); background: color-mix(in srgb, var(--acid) 10%, var(--bg)); }
.run.broken { border-color: var(--red); background: color-mix(in srgb, var(--red) 18%, var(--bg)); animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; margin-top: 1rem; font: .62rem/1.35 var(--mono); }
.blk { position: relative; padding: .45rem .5rem; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.blk b { display: block; font: .58rem/1 var(--hud); letter-spacing: .12em; color: var(--muted); margin-bottom: .25rem; }
.blk span { display: block; color: var(--cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk span.prev { color: var(--muted); }
.blk.ok { border-color: color-mix(in srgb, var(--acid) 35%, var(--line)); }
.blk.bad { border-color: var(--red); background: color-mix(in srgb, var(--red) 14%, var(--bg)); } .blk.bad span { color: var(--red); }
.blk.check { animation: flash .35s; }
@keyframes flash { from { background: color-mix(in srgb, var(--acid) 25%, var(--bg)); } }
.chain-bar { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font: .72rem/1 var(--hud); letter-spacing: .14em; }
.chain-bar span { margin-right: auto; padding: .4rem .6rem; border: 1px solid currentColor; }
.chain-bar .ok { color: var(--acid); box-shadow: 0 0 14px color-mix(in srgb, var(--acid) 25%, transparent); }
.chain-bar .bad { color: var(--red); box-shadow: 0 0 14px color-mix(in srgb, var(--red) 35%, transparent); animation: blink .8s steps(2) 3; }
.fx-term .ht-body { min-height: 26rem; font-size: .74rem; }
.roadmap { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; font: .82rem/1 var(--mono); }
.roadmap span { padding: .5rem .8rem; border: 1px solid var(--line); background: var(--plate); }
.roadmap b { color: var(--acid); } .roadmap i { width: 1.6rem; height: 1px; background: var(--acid); box-shadow: 0 0 6px var(--acid); }

/* ecosystem */
.crates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.crate { position: relative; display: block; padding: 1.2rem; background: var(--plate); border: 1px solid var(--line); clip-path: var(--bevel); transition: .3s var(--ease); overflow: hidden; }
.crate:hover { border-color: var(--c); transform: translateY(-4px); box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--c) 20%, transparent); }
.crate .s-ic { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); clip-path: var(--bevel-sm); }
.crate .s-ic svg { width: 1.3rem; height: 1.3rem; }
.crate b { display: block; margin: .9rem 0 .3rem; font: 700 .95rem/1.2 var(--mono); }
.crate p { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.crate .go { position: absolute; top: 1rem; right: 1rem; width: 1rem; height: 1rem; color: var(--muted); transition: .3s; }
.crate:hover .go { color: var(--c); transform: rotate(-45deg); }
.crate.core { grid-column: span 1; background: linear-gradient(135deg, color-mix(in srgb, var(--acid) 12%, var(--panel)), var(--panel)); }
.interop { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.2rem; padding: .9rem 1rem; border: 1px solid var(--line); font: .74rem/1 var(--mono); }
.interop-k { font: .7rem/1 var(--hud); letter-spacing: .18em; color: var(--acid); margin-right: .5rem; }
.interop span:not(.interop-k) { padding: .35rem .55rem; background: var(--bg); border: 1px solid var(--line); transition: .2s; }
.interop span:not(.interop-k):hover { color: var(--cyan); border-color: var(--cyan); }

/* quick start */
.qs { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.2rem; align-items: start; }
.tk { margin: 0 0 .6rem; font: .72rem/1 var(--hud); letter-spacing: .18em; color: var(--acid); }
.tk small { color: var(--muted); margin-left: .4rem; }
.flags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.flag { display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; font: .72rem/1 var(--mono); color: var(--muted); background: var(--bg); border: 1px solid var(--line); cursor: pointer; transition: .18s; }
.flag::before { content: ""; width: .6rem; height: .6rem; border: 1px solid currentColor; }
.flag:hover { color: var(--white); border-color: var(--cyan); }
.flag[aria-pressed="true"] { color: var(--bg); background: var(--acid); border-color: var(--acid); box-shadow: 0 0 12px color-mix(in srgb, var(--acid) 40%, transparent); }
.flag[aria-pressed="true"]::before { background: var(--bg); }
.flag-tip { min-height: 1.3rem; margin: -.4rem 0 .8rem; font-size: .8rem; color: var(--cyan); }

/* footer */
.foot { padding: 4rem 0 2.5rem; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--acid) 4%, transparent)); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.keys { margin: 0; font: .7rem/2 var(--hud); color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.2rem; font: .7rem/1 var(--hud); letter-spacing: .14em; }
.foot-links a { color: var(--muted); } .foot-links a:hover { color: var(--acid); }

/* palette */
.palette { position: fixed; inset: 0; z-index: 200; display: grid; place-items: start center; padding-top: 12vh; background: rgb(0 0 0 / .55); backdrop-filter: blur(6px); animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.pal-box { width: min(92vw, 38rem); background: color-mix(in srgb, var(--panel) 97%, transparent); border: 1px solid var(--acid); clip-path: var(--bevel); box-shadow: 0 0 60px color-mix(in srgb, var(--acid) 20%, transparent); animation: pop .2s var(--ease); }
@keyframes pop { from { transform: translateY(-8px) scale(.98); } }
.pal-in { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.pal-in svg { width: 1.1rem; height: 1.1rem; color: var(--acid); }
.pal-in input { flex: 1; font: 1rem/1 var(--mono); color: var(--white); background: none; border: 0; outline: 0; }
.pal-list { max-height: 50vh; overflow: auto; padding: .4rem; }
.pal-g { padding: .6rem .6rem .3rem; font: .62rem/1 var(--hud); letter-spacing: .18em; color: var(--muted); }
.pal-i { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem .7rem; font: .86rem/1.2 var(--sans); text-align: left; color: var(--white); background: none; border: 0; cursor: pointer; }
.pal-i svg { width: 1rem; height: 1rem; color: var(--cyan); flex: none; }
.pal-i small { margin-left: auto; font: .64rem/1 var(--hud); letter-spacing: .1em; color: var(--muted); }
.pal-i.on { background: color-mix(in srgb, var(--acid) 12%, transparent); box-shadow: inset 2px 0 var(--acid); }
.pal-i.on svg { color: var(--acid); }

.toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 210; padding: .7rem 1rem; transform: translate(-50%, calc(100% + 2rem)); visibility: hidden; font: .74rem/1 var(--hud); letter-spacing: .14em; color: var(--bg); background: var(--acid); clip-path: var(--bevel-sm); box-shadow: 0 0 2rem color-mix(in srgb, var(--acid) 50%, transparent); transition: transform .3s var(--ease), visibility .3s; }
.toast.on { transform: translate(-50%, 0); visibility: visible; }
.spark { position: fixed; z-index: 220; width: 5px; height: 5px; pointer-events: none; background: var(--c); box-shadow: 0 0 8px var(--c); }

/* ═════════ responsive ═════════ */
@media (max-width: 1180px) {
  .menu { display: none; position: fixed; inset: 4.1rem 0 auto; flex-direction: column; align-items: stretch; margin: 0; padding: 1rem; background: color-mix(in srgb, var(--bg) 97%, transparent); border-bottom: 1px solid var(--line); max-height: calc(100vh - 4rem); overflow: auto; }
  .menu.open { display: flex; }
  .mega { position: static; width: auto !important; transform: none !important; opacity: 1; visibility: visible; display: none; clip-path: none; margin: 0 0 .5rem; }
  .mi.open .mega { display: block; }
  .burger { display: block; }
  .kbtn span, .ico.src span { display: none; }
  .hero-grid, .lab, .fx, .qs { grid-template-columns: 1fr; }
  .out-pane { grid-row: auto; }
  .surfaces, .crates { grid-template-columns: 1fr 1fr; }
  .gates { grid-template-columns: repeat(3, 1fr); }
  .gate::after { display: none; }
  .lc-stages { grid-template-columns: repeat(4, 1fr); row-gap: 1rem; margin-top: 0; }
  .lc-wire { display: none; }
}
@media (max-width: 700px) {
  .wrap { width: min(100% - 2rem, var(--wrap)); }
  .nav { gap: .5rem; padding-inline: 1rem; }
  .brand-name small, .ver, .theme-button span { display: none; }
  .theme-menu { position: fixed; left: 1rem; right: 1rem; top: 4.2rem; width: auto; }
  .head { flex-direction: column; align-items: start; }
  .surfaces, .crates, .gates, .safety-notes { grid-template-columns: 1fr; }
  .lc-detail { grid-template-columns: 1fr; }
  .runs { grid-template-columns: repeat(6, 1fr); }
  .chain { grid-template-columns: repeat(2, 1fr); }
  .up-cmd { flex-wrap: wrap; } .up-copy { width: 100%; justify-content: center; }
  .ht-body { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* grid children must be allowed to shrink below their no-wrap content */
.hero-grid > *, .lab > *, .fx > *, .qs > * { min-width: 0; }
.ht-top, .ht-foot { white-space: nowrap; }
.ht-title { overflow: hidden; text-overflow: ellipsis; }

.mi-link.mob { display: none; }
@media (max-width: 1180px) { .menu .mi-link.mob { display: flex; } }
@media (max-width: 700px) {
  .nav-tools { gap: .35rem; }
  .nav-tools .ico, .kbtn kbd { display: none; }
  .kbtn, .theme-button { padding: .5rem; }
}
@media (max-width: 1180px) { .menu { background: var(--bg); } }