/* =========================================================================
   CCMW Projektübersicht — cyberpunk skin
   Static site, no build step. Design tokens in OKLCH, derived tints via
   color-mix(). Variable font (Bechtle Pro Var) drives kinetic typography.
   ========================================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Bechtle Pro Var";
  src: url("assets/fonts/BechtleProVar.woff2") format("woff2-variations"),
       url("assets/fonts/BechtleProVar.woff2") format("woff2");
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bechtle Pro Var";
  src: url("assets/fonts/BechtleProVar-Italic.woff2") format("woff2-variations"),
       url("assets/fonts/BechtleProVar-Italic.woff2") format("woff2");
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
/* static fallbacks (older engines without variable-font support) */
@font-face {
  font-family: "Bechtle Pro";
  src: url("assets/fonts/BechtlePro.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bechtle Pro";
  src: url("assets/fonts/BechtlePro-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Registered custom properties (animatable) ---------- */
@property --wght     { syntax: "<number>"; inherits: true;  initial-value: 700; }
@property --wdth     { syntax: "<number>"; inherits: true;  initial-value: 100; }
@property --grad-a   { syntax: "<angle>";  inherits: false; initial-value: 0deg; }
@property --glow     { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --scan-y   { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --hero-hue { syntax: "<angle>";  inherits: true;  initial-value: 200deg; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  --bg:        oklch(10% 0.025 285);
  --bg-2:      oklch(14% 0.035 290);
  --bg-3:      oklch(19% 0.045 295);
  --ink:       oklch(95% 0.012 250);
  --body:      oklch(76% 0.02 260);
  --muted:     oklch(60% 0.025 265);

  --cyan:      oklch(86% 0.145 200);
  --magenta:   oklch(70% 0.27 340);
  --green:     oklch(89% 0.21 160);   /* Bechtle bright green #2FFB95 */
  --amber:     oklch(83% 0.17 80);
  --violet:    oklch(72% 0.17 300);

  --line:      color-mix(in oklch, var(--cyan) 22%, transparent);
  --line-soft: color-mix(in oklch, var(--ink) 10%, transparent);
  --glass:     color-mix(in oklch, var(--bg-2) 62%, transparent);
  --glass-2:   color-mix(in oklch, var(--bg-3) 55%, transparent);

  --font:      "Bechtle Pro Var", "Bechtle Pro", "Segoe UI", system-ui, sans-serif;
  --mono:      "Cascadia Code", "JetBrains Mono", "Fira Code", ui-monospace, Consolas, monospace;

  --wrap: 1180px;
  --pad: 28px;
  --radius: 6px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-variation-settings: "wght" 400, "wdth" 100;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100dvh;
}
html.cursor-active body, html.cursor-active a, html.cursor-active button { cursor: none; }

::selection { background: color-mix(in oklch, var(--magenta) 60%, transparent); color: var(--ink); }

a { color: var(--cyan); }
code {
  font-family: var(--mono);
  font-size: .9em;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in oklch, var(--cyan) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--cyan) 25%, transparent);
  color: var(--cyan);
}
strong { font-variation-settings: "wght" 700, "wdth" 100; font-weight: 700; color: var(--ink); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* Page-wide atmosphere: nebula gradients + grid + scanlines */
.atmosphere {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 15% 10%,  color-mix(in oklch, var(--cyan) 14%, transparent), transparent 70%),
    radial-gradient(50% 45% at 85% 20%,  color-mix(in oklch, var(--magenta) 12%, transparent), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, color-mix(in oklch, var(--violet) 10%, transparent), transparent 70%),
    var(--bg);
}
.atmosphere::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in oklch, var(--cyan) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--cyan) 7%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 100%);
}
.atmosphere::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 2px, oklch(0% 0 0 / .13) 2px 3px);
  mix-blend-mode: multiply;
  opacity: .9;
}
.parallax-blob {
  position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none;
  opacity: .55; will-change: transform;
}

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none;
  transform: translate(-50%, -50%);
  display: none;
}
html.cursor-active .cursor-dot, html.cursor-active .cursor-ring { display: block; }
.cursor-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan), 0 0 24px color-mix(in oklch, var(--cyan) 60%, transparent);
}
.cursor-ring {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid color-mix(in oklch, var(--cyan) 70%, transparent);
  transition: transform .12s linear, width .25s var(--ease-out), height .25s var(--ease-out), border-color .25s, background .25s;
  mix-blend-mode: screen;
}
.cursor-ring::before, .cursor-ring::after {
  content: ""; position: absolute; background: var(--cyan); opacity: .8;
}
.cursor-ring::before { left: 50%; top: -6px; width: 1px; height: 4px; transform: translateX(-50%); }
.cursor-ring::after  { top: 50%; left: -6px; height: 1px; width: 4px; transform: translateY(-50%); }
html.cursor-hover .cursor-ring {
  width: 58px; height: 58px;
  border-color: var(--magenta);
  background: color-mix(in oklch, var(--magenta) 14%, transparent);
}
html.cursor-hover .cursor-dot { background: var(--magenta); box-shadow: 0 0 12px var(--magenta); }
/* explicit size is essential: a <canvas> is a replaced element, so inset:0 alone does NOT
   stretch it — its box would fall back to the width/height attributes (the pixel buffer),
   which made the trail drift by the DPR factor and can feed back into a runaway size. */
.cursor-trail { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9999; pointer-events: none; display: none; }
html.cursor-active .cursor-trail { display: block; }

/* ---------- Preloader ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 20000;
  background: var(--bg);
  display: grid; place-items: center;
  font-family: var(--mono);
  color: var(--cyan);
}
#preloader[hidden] { display: none; }
.pre-inner { width: min(460px, 82vw); }
.pre-mark { width: 96px; height: 96px; margin: 0 0 26px; overflow: visible; color: var(--ink); }
.pre-mark .pre-ring {
  stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: butt;
  filter: drop-shadow(0 0 8px color-mix(in oklch, var(--cyan) 70%, transparent));
  animation: ring-draw 1.6s var(--ease-io) forwards;
}
.pre-mark .pre-gem { opacity: 0; transform-origin: 50% 50%; animation: gem-in .9s var(--ease-out) .6s forwards, gem-pulse 1.8s ease-in-out 1.5s infinite; }
.pre-mark .pre-gem.l { fill: var(--magenta); filter: drop-shadow(0 0 8px var(--magenta)); }
.pre-mark .pre-gem.r { fill: var(--cyan); filter: drop-shadow(0 0 8px var(--cyan)); animation-delay: .75s, 1.6s; }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
@keyframes gem-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes gem-pulse { 50% { opacity: .55; } }
.pre-title {
  font-family: var(--font);
  font-variation-settings: "wght" 700, "wdth" 100;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: .06em; text-transform: uppercase;
  margin: 0 0 18px; color: var(--ink);
}
.pre-title span { color: var(--cyan); }
.pre-bar {
  height: 3px; background: color-mix(in oklch, var(--cyan) 15%, transparent);
  position: relative; overflow: hidden;
}
.pre-bar i {
  position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--cyan), var(--green));
  box-shadow: 0 0 14px var(--cyan);
}
.pre-meta {
  display: flex; justify-content: space-between; margin-top: 10px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.pre-meta b { color: var(--cyan); font-weight: 400; }
.pre-log { margin-top: 22px; font-size: 11.5px; line-height: 1.7; color: var(--muted); min-height: 5.1em; white-space: pre; }
.pre-log b { color: var(--green); font-weight: 400; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
  view-transition-name: site-header;
}
.header-inner { display: flex; align-items: center; gap: 18px; height: 66px; }
.logo {
  display: block; height: 18px; width: auto;
  filter: brightness(0) invert(1);
  opacity: .85;
}

/* CCMW mark (primary identity) */
.mark { display: block; width: 34px; height: 34px; overflow: visible; }
.mark-sm { width: 26px; height: 26px; }
.mark .mark-ring { fill: var(--ink); filter: drop-shadow(0 0 6px color-mix(in oklch, var(--cyan) 70%, transparent)); }
.mark .mark-l { fill: var(--magenta); filter: drop-shadow(0 0 5px var(--magenta)); }
.mark .mark-r { fill: var(--cyan); filter: drop-shadow(0 0 5px var(--cyan)); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-text {
  font-size: 19px; letter-spacing: .1em; text-transform: uppercase;
  font-variation-settings: "wght" 700, "wdth" 100; color: var(--ink);
}
.brand:hover .mark { animation: mark-spin 1.4s var(--ease-out) 1; }
@keyframes mark-spin { 40% { transform: rotate(-16deg) scale(1.08); } 100% { transform: none; } }
.header-divider { width: 1px; height: 22px; background: var(--line); }
.header-label {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  font-variation-settings: "wght" 700, "wdth" 90;
  color: var(--ink);
}
.header-status {
  margin-left: auto; display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.header-status .led {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green); animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }
.header-status time { color: var(--cyan); }

/* ---------- Buttons / links ---------- */
.btn {
  --grad-a: 0deg;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  font-family: var(--font); font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  font-variation-settings: "wght" 700, "wdth" 92;
  text-decoration: none; color: var(--ink);
  background: var(--glass-2);
  border: 1px solid var(--line);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: color .25s, background .25s, border-color .25s;
  will-change: transform;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: conic-gradient(from var(--grad-a), var(--cyan), var(--magenta), var(--green), var(--cyan));
  opacity: 0; transition: opacity .3s;
}
.btn:hover::after { opacity: .28; animation: spin-grad 3s linear infinite; }
.btn-primary {
  background: color-mix(in oklch, var(--cyan) 18%, var(--bg-2));
  border-color: var(--cyan); color: var(--cyan);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--cyan) 20%, transparent), 0 0 22px color-mix(in oklch, var(--cyan) 25%, transparent);
}
.btn-primary:hover { color: var(--ink); background: color-mix(in oklch, var(--cyan) 35%, var(--bg-2)); }
.btn-secondary:hover { border-color: var(--magenta); color: var(--magenta); }
@keyframes spin-grad { to { --grad-a: 360deg; } }

/* ---------- Hero (index) ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: center;
  overflow: hidden;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.hero-fallback {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(70% 60% at 30% 30%, color-mix(in oklch, var(--cyan) 22%, transparent), transparent 70%),
    radial-gradient(50% 50% at 80% 70%, color-mix(in oklch, var(--magenta) 22%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  --hero-hue: 200deg;
  animation: hue-drift 14s ease-in-out infinite alternate;
}
.hero-fallback::before {
  content: ""; position: absolute; left: -50%; right: -50%; bottom: -10%; height: 65%;
  background-image:
    linear-gradient(color-mix(in oklch, var(--cyan) 35%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--magenta) 30%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(600px) rotateX(64deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(180deg, transparent, #000 60%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
  animation: grid-scroll 3s linear infinite;
}
.hero-fallback::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, color-mix(in oklch, var(--cyan) 80%, transparent) 1px, transparent 1.6px);
  background-size: 38px 38px;
  opacity: .5;
  mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent);
}
.hero-fallback[hidden] { display: none; }
.hero-mark {
  position: absolute; right: -4vw; top: 50%; width: min(58vh, 70vw); height: auto;
  transform: translateY(-50%);
  opacity: .32; filter: drop-shadow(0 0 40px color-mix(in oklch, var(--cyan) 45%, transparent));
  animation: mark-float 7s ease-in-out infinite;
}
@keyframes mark-float { 50% { transform: translateY(calc(-50% - 16px)) rotate(-3deg); } }
@keyframes grid-scroll { to { background-position: 0 60px, 0 0; } }
@keyframes hue-drift { to { --hero-hue: 330deg; filter: hue-rotate(25deg); } }

.hero::before { /* legibility scrim over the scene */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in oklch, var(--bg) 78%, transparent) 0%, color-mix(in oklch, var(--bg) 45%, transparent) 45%, transparent 75%),
              linear-gradient(180deg, color-mix(in oklch, var(--bg) 70%, transparent), transparent 22%, transparent 78%, var(--bg));
}
.hero-content {
  position: relative; z-index: 2;
  padding: 120px var(--pad) 90px;
  max-width: var(--wrap); margin: 0 auto; width: 100%;
}
.hero-kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--cyan); margin: 0 0 22px; display: flex; align-items: center; gap: 12px;
}
.hero-kicker::before { content: ""; width: 34px; height: 1px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.hero h1 {
  --wght: 700; --wdth: 100;
  font-size: clamp(46px, 9.2vw, 132px);
  line-height: .92;
  margin: 0 0 28px;
  letter-spacing: -0.02em;
  font-variation-settings: "wght" var(--wght), "wdth" var(--wdth);
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 40px color-mix(in oklch, var(--cyan) 30%, transparent);
}
.hero h1 .accent {
  color: transparent;
  background: linear-gradient(100deg, var(--cyan), var(--green) 55%, var(--magenta));
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 18px color-mix(in oklch, var(--cyan) 40%, transparent));
}
.hero-sub {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--body);
  max-width: 640px; margin: 0;
  font-variation-settings: "wght" 300, "wdth" 100;
}
.hero-meta {
  margin-top: 40px; display: flex; flex-wrap: wrap; gap: 28px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.hero-meta b { color: var(--green); font-weight: 400; }
.scroll-hint {
  position: absolute; left: 50%; bottom: 28px; z-index: 2; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-hint::after {
  content: ""; width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--cyan), transparent);
  animation: hint 1.8s var(--ease-io) infinite;
}
.scroll-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in oklch, var(--bg-2) 60%, transparent);
  border: 1px solid color-mix(in oklch, var(--cyan) 45%, transparent);
  color: var(--cyan);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s, color .25s;
}
.scroll-btn svg { width: 16px; height: 16px; }
.scroll-btn:hover {
  border-color: var(--magenta); color: var(--magenta);
  box-shadow: 0 0 18px color-mix(in oklch, var(--magenta) 55%, transparent);
}
.scroll-btn:active { transform: scale(.92); }
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.hero-hud {
  position: absolute; z-index: 2; pointer-events: none;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.hero-hud.tl { top: 90px; left: var(--pad); }
.hero-hud.tr { top: 90px; right: var(--pad); text-align: right; }
.hero-hud.bl { bottom: 34px; left: var(--pad); }
.hero-hud.br { bottom: 34px; right: var(--pad); text-align: right; }
.hero-hud span { display: block; }
.hero-hud b { color: var(--cyan); font-weight: 400; }

/* split text reveal */
.split .word { display: inline-block; white-space: nowrap; }
.split .char { display: inline-block; will-change: transform, opacity; }
html.js .split[data-pending] .char { opacity: 0; transform: translateY(1.1em) skewY(6deg); }

/* ---------- Section headers ---------- */
.section-head {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  padding: 72px var(--pad) 22px;
}
.section-head h2, .section-title {
  --wght: 700; --wdth: 100;
  margin: 0; font-size: clamp(28px, 4vw, 44px); line-height: 1;
  text-transform: uppercase; letter-spacing: -.01em;
  font-variation-settings: "wght" var(--wght), "wdth" var(--wdth);
}
.section-head .idx {
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--magenta);
}
.section-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); min-width: 60px; align-self: center; }

/* ---------- Toolbar / filter chips ---------- */
.toolbar { padding: 0 var(--pad) 8px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.toolbar-label { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.filter-group { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
  position: relative;
  font-family: var(--font); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  font-variation-settings: "wght" 700, "wdth" 90;
  color: var(--body);
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-soft);
  padding: 9px 16px;
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
}
.filter-chip:hover { color: var(--ink); border-color: var(--cyan); }
.filter-chip.is-active {
  color: var(--bg); background: var(--cyan); border-color: var(--cyan);
  box-shadow: 0 0 18px color-mix(in oklch, var(--cyan) 45%, transparent);
}
.filter-chip[data-filter="live"].is-active   { background: var(--green);  border-color: var(--green);  box-shadow: 0 0 18px color-mix(in oklch, var(--green) 45%, transparent); }
.filter-chip[data-filter="dev"].is-active    { background: var(--amber);  border-color: var(--amber);  box-shadow: 0 0 18px color-mix(in oklch, var(--amber) 45%, transparent); }
.filter-chip[data-filter="paused"].is-active { background: var(--violet); border-color: var(--violet); box-shadow: 0 0 18px color-mix(in oklch, var(--violet) 45%, transparent); }

/* ---------- Project grid / cards ---------- */
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  padding: 22px var(--pad) 90px;
}
.card {
  --grad-a: 0deg; --glow: 0;
  --status: var(--green);
  position: relative; isolation: isolate;
  container-type: inline-size; container-name: card;
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px 24px;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border: 1px solid var(--line-soft);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  transform-style: preserve-3d;
  transition: border-color .3s, background .3s;
  will-change: transform;
}
.card[data-status="dev"]    { --status: var(--amber); }
.card[data-status="paused"] { --status: var(--violet); }
.card[hidden] { display: none; }
/* animated gradient border via @property */
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px;
  background: conic-gradient(from var(--grad-a), transparent 0 30%, var(--cyan) 42%, var(--magenta) 52%, transparent 62%, var(--status) 82%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--glow);
  transition: opacity .35s;
}
.card:hover::before { --glow: 1; animation: spin-grad 4s linear infinite; }
.card:hover { border-color: color-mix(in oklch, var(--status) 40%, transparent); background: var(--glass-2); }
/* corner brackets */
.card::after {
  content: ""; position: absolute; inset: 8px; pointer-events: none; z-index: -1;
  background:
    linear-gradient(var(--status), var(--status)) top left / 14px 1px no-repeat,
    linear-gradient(var(--status), var(--status)) top left / 1px 14px no-repeat,
    linear-gradient(var(--status), var(--status)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--status), var(--status)) bottom right / 1px 14px no-repeat;
  opacity: .55;
}
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; }
.card-top h2 { min-width: 0; }
.card h2 {
  --wght: 700; --wdth: 100;
  font-size: 24px; line-height: 1.05; margin: 0; letter-spacing: -.01em; text-transform: uppercase;
  font-variation-settings: "wght" var(--wght), "wdth" var(--wdth);
}
.card h2 a:link, .card h2 a:visited, .card h2 a:hover, .card h2 a:active { color: var(--ink); text-decoration: none; }
.card h2 a { position: relative; transition: color .2s; }
.card:hover h2 a { color: var(--cyan); text-shadow: 0 0 18px color-mix(in oklch, var(--cyan) 50%, transparent); }
.card-idx {
  position: absolute; top: 12px; right: 44px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--muted);
}
.card-name {
  margin: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--status);
}
.card-desc { margin: 6px 0 0; font-size: 14.5px; color: var(--body); font-variation-settings: "wght" 300, "wdth" 100; }
.card-actions {
  margin-top: auto; padding-top: 16px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft);
}
.card-link, .card-external {
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  font-variation-settings: "wght" 700, "wdth" 92;
  display: inline-flex; align-items: center; gap: 6px;
  will-change: transform;
}
.card-link { color: var(--cyan); }
.card-link::before { content: "▶"; font-size: 8px; }
.card-link:hover { text-shadow: 0 0 12px var(--cyan); }
.card-external { color: var(--body); }
.card-external:hover { color: var(--magenta); text-shadow: 0 0 12px var(--magenta); }

/* container query: compact cards when narrow */
@container card (max-width: 300px) {
  .card h2 { font-size: 20px; }
  .card-actions { flex-direction: column; align-items: flex-start; gap: 10px; }
  .card-idx { display: none; }
}
@container card (min-width: 420px) {
  .card-desc { font-size: 15.5px; max-width: 60ch; }
}

/* ---------- Status badges ---------- */
.badge {
  flex: none;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 10px; white-space: nowrap;
  border: 1px solid currentColor;
  display: inline-flex; align-items: center; gap: 7px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.badge-live   { color: var(--green);  background: color-mix(in oklch, var(--green) 12%, transparent); }
.badge-live::before { animation: pulse 1.6s ease-in-out infinite; }
.badge-dev    { color: var(--amber);  background: color-mix(in oklch, var(--amber) 12%, transparent); }
.badge-paused { color: var(--violet); background: color-mix(in oklch, var(--violet) 12%, transparent); }

.empty-state {
  text-align: center; color: var(--muted); padding: 0 var(--pad) 90px; margin: 0;
  font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 30px 0;
  background: color-mix(in oklch, var(--bg) 70%, transparent);
  backdrop-filter: blur(10px);
}
.site-footer .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.site-footer .logo { height: 16px; opacity: .75; }
.site-footer .foot-right { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Project detail pages ---------- */
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; margin: 30px 0 0;
  transition: color .2s;
}
.back-link:hover { color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }

.detail-hero { position: relative; padding: 26px var(--pad) 44px; }
.detail-hero .card-top { align-items: center; gap: 18px; margin-bottom: 14px; }
.detail-hero h1 {
  --wght: 700; --wdth: 100;
  font-size: clamp(40px, 7vw, 92px); line-height: .95; margin: 0;
  letter-spacing: -.02em; text-transform: uppercase;
  font-variation-settings: "wght" var(--wght), "wdth" var(--wdth);
  text-shadow: 0 0 40px color-mix(in oklch, var(--cyan) 25%, transparent);
}
.detail-name {
  margin: 4px 0 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan);
}
.detail-tagline {
  margin: 18px 0 0; font-size: clamp(16px, 1.5vw, 19px); color: var(--body); max-width: 720px;
  font-variation-settings: "wght" 300, "wdth" 100;
}
.detail-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.detail-section { position: relative; padding: 0 var(--pad) 56px; }
.detail-section h2 {
  --wght: 700; --wdth: 100;
  display: flex; align-items: baseline; gap: 14px;
  font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 18px; line-height: 1; text-transform: uppercase;
  font-variation-settings: "wght" var(--wght), "wdth" var(--wdth);
}
.detail-section h2::before {
  content: attr(data-idx); font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--magenta);
  font-variation-settings: "wght" 400, "wdth" 100;
}
.detail-section p { margin: 0 0 14px; font-size: 15.5px; color: var(--body); max-width: 780px; font-variation-settings: "wght" 300, "wdth" 100; }
.detail-section p:last-child { margin-bottom: 0; }

/* Screenshot holo frame */
.detail-screenshot {
  --grad-a: 0deg;
  position: relative; margin: 0; max-width: 960px;
  background: var(--glass);
  border: 1px solid var(--line);
  padding: 10px;
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  box-shadow: 0 30px 80px oklch(0% 0 0 / .55), 0 0 40px color-mix(in oklch, var(--cyan) 12%, transparent);
  transform-style: preserve-3d;
}
.detail-screenshot::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: conic-gradient(from var(--grad-a), var(--cyan), transparent 30%, var(--magenta) 55%, transparent 75%, var(--cyan));
  opacity: .35; animation: spin-grad 9s linear infinite;
}
.detail-screenshot::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-2); margin: 1px;
}
.shot-frame { position: relative; overflow: hidden; background: var(--bg); }
.shot-frame img { display: block; width: 100%; height: auto; }
.shot-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.shot-frame.fx-on img { opacity: 0; }
.shot-frame .shot-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in oklch, var(--cyan) 18%, transparent) 50%, transparent);
  background-size: 100% 22%; background-repeat: no-repeat;
  background-position: 0 var(--scan-y);
  animation: scan 5s linear infinite; mix-blend-mode: screen;
}
@keyframes scan { from { --scan-y: -30%; } to { --scan-y: 130%; } }
.shot-hud {
  position: absolute; top: 10px; left: 12px; right: 12px; display: flex; justify-content: space-between; pointer-events: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan);
  text-shadow: 0 0 8px var(--bg), 0 0 6px var(--bg);
}
.detail-screenshot figcaption {
  padding: 12px 8px 4px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted);
}
.detail-screenshot figcaption::before { content: "// "; color: var(--magenta); }
.no-screenshot {
  max-width: 760px; border: 1px dashed var(--line); padding: 28px 24px; font-size: 14.5px; color: var(--body); background: var(--glass);
}

.feature-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px;
}
.feature-list li {
  position: relative; padding: 12px 14px 12px 36px;
  font-size: 14.5px; color: var(--body); line-height: 1.5;
  background: var(--glass);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--cyan);
  font-variation-settings: "wght" 300, "wdth" 100;
  transition: border-color .2s, background .2s, transform .2s;
}
.feature-list li::before {
  content: ""; position: absolute; left: 14px; top: 20px; width: 8px; height: 8px;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.feature-list li:hover { border-color: var(--line); border-left-color: var(--magenta); background: var(--glass-2); transform: translateX(4px); }
.feature-list li:hover::before { background: var(--magenta); box-shadow: 0 0 10px var(--magenta); }

.tech-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tech-chip {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  color: var(--green); background: color-mix(in oklch, var(--green) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--green) 35%, transparent);
  padding: 7px 13px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: background .2s, color .2s, box-shadow .2s;
}
.tech-chip:hover { background: color-mix(in oklch, var(--green) 22%, transparent); color: var(--ink); box-shadow: 0 0 16px color-mix(in oklch, var(--green) 35%, transparent); }

.status-box {
  --status: var(--green);
  position: relative;
  background: var(--glass); backdrop-filter: blur(14px);
  border: 1px solid var(--line-soft); border-left: 3px solid var(--status);
  padding: 22px 26px; max-width: 800px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.status-box::before {
  content: "STATUS"; position: absolute; top: 10px; right: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .24em; color: var(--status); opacity: .8;
}
.status-box.is-dev { --status: var(--amber); }
.status-box.is-paused { --status: var(--violet); }
.status-box p { margin: 0; }
.status-box p + p { margin-top: 12px; }

/* ---------- Scroll-driven animations (CSS-only, progressive) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes kinetic { from { --wght: 150; --wdth: 75; letter-spacing: .12em; opacity: .25; } to { --wght: 700; --wdth: 100; letter-spacing: -.01em; opacity: 1; } }
@keyframes tilt-in { from { transform: perspective(1400px) rotateX(16deg) translateY(40px) scale(.94); opacity: .3; } to { transform: perspective(1400px) rotateX(0) translateY(0) scale(1); opacity: 1; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

@supports (animation-timeline: view()) {
  .card, .feature-list li, .tech-chip, .status-box, .detail-section p {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }
  .feature-list li { animation-name: slide-in; }
  .detail-section h2, .section-head h2 {
    animation: kinetic linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }
  .detail-screenshot {
    animation: tilt-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
  .detail-hero h1 {
    /* kinetic: the title condenses as it scrolls out of view */
    animation: kinetic linear both reverse;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
}

/* ---------- View transitions (cross-document + same-document) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .32s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); filter: blur(4px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
::view-transition-group(site-header) { animation-duration: .2s; }
::view-transition-old(*), ::view-transition-new(*) { mix-blend-mode: normal; }
/* card filter transitions */
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--ease-out); }

/* ---------- Glitch flourish on hover (headings) ---------- */
.glitch { position: relative; }
.glitch:hover { animation: glitch .6s steps(2, end) 1; }
@keyframes glitch {
  0%   { text-shadow: 2px 0 var(--magenta), -2px 0 var(--cyan); }
  25%  { text-shadow: -3px 0 var(--magenta), 3px 0 var(--cyan); transform: translateX(1px); }
  50%  { text-shadow: 2px 0 var(--cyan), -2px 0 var(--magenta); transform: translateX(-1px); }
  100% { text-shadow: none; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  :root { --pad: 18px; }
  .hero-content { padding: 100px var(--pad) 80px; }
  .hero h1 { font-size: clamp(40px, 13vw, 64px); }
  .hero-hud { display: none; }
  .header-status { display: none; }
  .header-label { font-size: 11px; }
  .grid { grid-template-columns: 1fr; padding-bottom: 60px; }
  .feature-list { grid-template-columns: 1fr; }
  .detail-hero h1 { font-size: clamp(34px, 11vw, 56px); }
  .card { clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
  .site-footer .foot-right { margin-left: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-timeline: auto !important;
    transition-duration: .001ms !important;
  }
  .hero-canvas, .cursor-dot, .cursor-ring, .cursor-trail, #preloader, .scroll-hint::after { display: none !important; }
  .hero-fallback { animation: none; }
  html.js .split[data-pending] .char { opacity: 1; transform: none; }
  .card, .feature-list li, .tech-chip, .status-box, .detail-section p, .detail-section h2, .section-head h2, .detail-screenshot, .detail-hero h1 { animation: none !important; opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
html.reduced .hero-canvas, html.reduced .cursor-dot, html.reduced .cursor-ring, html.reduced .cursor-trail { display: none !important; }

/* =========================================================================
   Fantasy UI layer (fui.js) — decorative HUD chrome, glyphs, techno-babble.
   Everything here is pointer-events:none and low-contrast so content wins.
   ========================================================================= */
:root { --glyph-font: "Cascadia Code", "Segoe UI Symbol", "Segoe UI", ui-monospace, monospace; }

/* corner brackets (shared by viewport frame and preloader) */
.fui-corner { position: absolute; width: 18px; height: 18px; pointer-events: none; opacity: .6; }
.fui-corner::before, .fui-corner::after { content: ""; position: absolute; background: var(--cyan); box-shadow: 0 0 6px color-mix(in oklch, var(--cyan) 60%, transparent); }
.fui-corner::before { width: 100%; height: 1px; }
.fui-corner::after  { width: 1px; height: 100%; }
.fui-corner.tl { top: 0; left: 0; }  .fui-corner.tl::before { top: 0; left: 0; }  .fui-corner.tl::after { top: 0; left: 0; }
.fui-corner.tr { top: 0; right: 0; } .fui-corner.tr::before { top: 0; right: 0; } .fui-corner.tr::after { top: 0; right: 0; }
.fui-corner.bl { bottom: 0; left: 0; }  .fui-corner.bl::before { bottom: 0; left: 0; }  .fui-corner.bl::after { bottom: 0; left: 0; }
.fui-corner.br { bottom: 0; right: 0; } .fui-corner.br::before { bottom: 0; right: 0; } .fui-corner.br::after { bottom: 0; right: 0; }

/* viewport frame */
.fui-frame {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.fui-frame .fui-corner.tl { top: 80px; left: 14px; }
.fui-frame .fui-corner.tr { top: 80px; right: 14px; }
.fui-frame .fui-corner.bl { bottom: 14px; left: 14px; }
.fui-frame .fui-corner.br { bottom: 14px; right: 14px; }
.fui-rail { position: absolute; top: 50%; transform: translateY(-50%); height: 42vh; display: flex; gap: 10px; opacity: .55; }
.fui-rail.l { left: 14px; }
.fui-rail.r { right: 14px; flex-direction: row-reverse; }
.fui-rail .ticks { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.fui-rail .ticks i { display: block; width: 6px; height: 1px; background: var(--cyan); opacity: .5; }
.fui-rail .ticks i.maj { width: 12px; opacity: .9; }
.fui-rail.r .ticks { align-items: flex-end; }
.fui-rail .glyphcol { display: flex; flex-direction: column; justify-content: space-between; height: 100%; font-family: var(--glyph-font); font-size: 11px; color: var(--cyan); letter-spacing: 0; }
.fui-rail .ticker { height: 100%; overflow: hidden; writing-mode: vertical-rl; }
.fui-rail .ticker-in { display: block; white-space: nowrap; font-family: var(--glyph-font); letter-spacing: .14em; animation: fui-marquee 46s linear infinite; }
@keyframes fui-marquee { to { transform: translateY(-50%); } }
.fui-telem {
  position: absolute; top: 74px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px;
  border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(8px);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  font-family: var(--glyph-font); letter-spacing: .16em;
}
.fui-telem .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: fui-blink 1.6s ease-in-out infinite; }
@keyframes fui-blink { 50% { opacity: .25; } }
.fui-coords { position: absolute; bottom: 12px; left: 24px; display: flex; gap: 16px; color: var(--muted); }
.fui-coords b { color: var(--cyan); font-weight: 400; }
.fui-scan { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--cyan) 35%, transparent), transparent); opacity: .35; animation: fui-scan 11s linear infinite; }
@keyframes fui-scan { from { transform: translateY(0); } to { transform: translateY(100vh); } }

/* section sigils + card sectors */
.section-head h2[data-glyph]::before, .detail-section h2[data-glyph]::before {
  content: attr(data-glyph); font-family: var(--glyph-font); font-size: .62em; color: var(--cyan); opacity: .8;
  margin-right: .45em; vertical-align: middle; text-shadow: 0 0 8px color-mix(in oklch, var(--cyan) 60%, transparent);
}
.hero-kicker[data-glyph]::after, .detail-hero h1[data-glyph]::after {
  content: " " attr(data-glyph); font-family: var(--glyph-font); font-size: .55em; color: var(--magenta); opacity: .75; vertical-align: middle;
}
.card[data-sector]::after {
  content: attr(data-sector); position: absolute; top: 10px; left: 18px;
  font-family: var(--glyph-font); font-size: 9.5px; letter-spacing: .14em; color: var(--muted); opacity: .7; pointer-events: none;
}

/* preloader chrome */
#preloader.fui .fui-corner.tl { top: 18px; left: 18px; }
#preloader.fui .fui-corner.tr { top: 18px; right: 18px; }
#preloader.fui .fui-corner.bl { bottom: 18px; left: 18px; }
#preloader.fui .fui-corner.br { bottom: 18px; right: 18px; }
.pre-mark-wrap { position: relative; width: 96px; height: 96px; margin: 0 0 26px; }
.pre-mark-wrap .pre-mark { margin: 0; }
.pre-reticle { position: absolute; inset: -24px; pointer-events: none; }
.pre-reticle i { position: absolute; border-radius: 50%; }
.pre-reticle .r1 { inset: 0; border: 1px dashed color-mix(in oklch, var(--cyan) 50%, transparent); animation: fui-spin 16s linear infinite; }
.pre-reticle .r2 { inset: 9px; border: 1px solid color-mix(in oklch, var(--cyan) 22%, transparent); border-top-color: var(--magenta); animation: fui-spin 7s linear infinite reverse; }
.pre-reticle .t { position: absolute; background: var(--cyan); opacity: .8; }
.pre-reticle .t.n { top: -8px; left: 50%; width: 1px; height: 8px; transform: translateX(-50%); }
.pre-reticle .t.s { bottom: -8px; left: 50%; width: 1px; height: 8px; transform: translateX(-50%); }
.pre-reticle .t.e { right: -8px; top: 50%; height: 1px; width: 8px; transform: translateY(-50%); }
.pre-reticle .t.w { left: -8px; top: 50%; height: 1px; width: 8px; transform: translateY(-50%); }
@keyframes fui-spin { to { transform: rotate(360deg); } }
.pre-marktag { position: absolute; left: 118px; top: 38px; white-space: nowrap; font-family: var(--glyph-font); font-size: 10.5px; letter-spacing: .16em; color: var(--muted); }
.pre-glyphs { display: flex; gap: 9px; margin-top: 18px; font-family: var(--glyph-font); font-size: 12px; color: color-mix(in oklch, var(--cyan) 70%, transparent); }
.pre-hex { margin-top: 10px; font-size: 10.5px; letter-spacing: .08em; line-height: 1.6; color: var(--muted); white-space: pre; opacity: .7; }
.pre-babble { margin: 8px 0 0; font-family: var(--glyph-font); font-size: 11px; line-height: 1.7; color: color-mix(in oklch, var(--cyan) 65%, var(--muted)); white-space: pre; min-height: 4.6em; }
.pre-side { position: absolute; left: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 720px) {
  .fui-rail, .fui-coords, .fui-scan, .fui-telem, .pre-side, .pre-marktag { display: none; }
  .card[data-sector]::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fui-scan, .fui-telem .dot { animation: none; }
  .fui-rail .ticker-in, .pre-reticle .r1, .pre-reticle .r2 { animation: none; }
}
html.reduced .fui-scan { display: none; }