/* ==========================================================================
   pomx2.sh — candidate b — GENERATIVE FIELD
   ========================================================================== */

/* ---- vendored faces (no network) ---------------------------------------- */
@font-face{
  font-family:'Syne';
  src:url('assets/fonts/syne-8vIH7w4qzmVxm2BL9A.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('assets/fonts/space-grotesk-V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Mono';
  src:url('assets/fonts/dm-mono-aFTU7PB1QTsUX8KYthqQBA.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Mono';
  src:url('assets/fonts/dm-mono-aFTR7PB1QTsUX8KYvumzEYOtbQ.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

/* ---- tokens -------------------------------------------------------------- */
:root{
  --ground:#0D0B1A;
  --raised:#16122A;
  --muted:#231F33;
  --border:#2D2649;
  --void:#000000;
  --cyan:#00E8FC;
  --violet:#8A01FA;
  --magenta:#FC03CB;

  --ink:  hsl(258 60% 95%);
  --ink-2:hsl(258 24% 72%);
  --ink-3:hsl(256 18% 54%);

  --panel:linear-gradient(145deg, hsl(270 55% 17% / .8), hsl(249 40% 9% / .94));
  --radius:.55rem;
  --shadow:0 22px 60px hsl(260 85% 5% / .5);
  --identity:linear-gradient(100deg,var(--cyan),var(--violet) 52%,var(--magenta));

  --gutter:2rem;
  --ease:cubic-bezier(.16,.84,.3,1);
}
@media (max-width:860px){ :root{ --gutter:1rem; } }

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html:focus-within{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100%;
  overflow-x:hidden;
  color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:1.05rem;
  font-weight:400;
  line-height:1.65;
  background-color:var(--ground);
  background-image:
    radial-gradient(ellipse at 74% 3%,  hsl(286 90% 23% / .26), transparent 30rem),
    radial-gradient(ellipse at 3% 68%,  hsl(198 100% 25% / .17), transparent 33rem),
    radial-gradient(ellipse at 88% 52%, hsl(311 80% 24% / .16), transparent 34rem),
    radial-gradient(ellipse at 24% 108%,hsl(273 90% 22% / .22), transparent 36rem);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ---- the generative field ------------------------------------------------ */
#field{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
  display:block;
}
/* fine scanline + vignette, over the field, under the content */
.veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, hsl(0 0% 100% / .022) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 50%, transparent 52%, hsl(260 85% 3% / .55) 100%);
  mix-blend-mode:normal;
}
/* grain: an inline feTurbulence, no request, laid over the fixed atmosphere */
.veil::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.045; mix-blend-mode:overlay;
}

/* ---- shell --------------------------------------------------------------- */
.page{ position:relative; z-index:2; overflow-x:clip; }
.wrap{ width:min(1180px, 100% - (var(--gutter) * 2)); margin-inline:auto; }

/* ---- typography ---------------------------------------------------------- */
.d{
  text-shadow:0 2px 18px hsl(258 70% 4% / .8);
  font-family:'Syne',system-ui,sans-serif;
  font-weight:800;
  line-height:.84;
  letter-spacing:-.09em;
  text-transform:lowercase;
  margin:0;
  overflow-wrap:break-word;
}
.d .ln{ display:block; }
.d-hero{ font-size:clamp(3.75rem, 8.5vw, 7.6rem); }
.d-sec { font-size:clamp(2.4rem,  5vw,   4.5rem); }
.d-sub { font-size:clamp(2rem,    4vw,   3.5rem); }
.d-min { font-size:clamp(1.65rem, 3vw,   2.6rem); }

/* the hollow headline takes its stroke from the section it sits in, so the
   outline reads magenta at the vault and cyan at the thesis. `.outline` is an
   alias for the same treatment. */
.hollow, .outline{
  color:transparent;
  -webkit-text-stroke:1px var(--stroke, var(--cyan));
  text-shadow:0 0 24px var(--stroke-glow, hsl(187 100% 58% / .15));
}
.hollow.mag, .outline--mg{ -webkit-text-stroke-color:var(--magenta); text-shadow:0 0 24px hsl(311 98% 60% / .18); }
.dot{ color:var(--magenta); -webkit-text-stroke:0; text-shadow:0 0 18px hsl(311 98% 60% / .5); }
.dot.cy{ color:var(--cyan); text-shadow:0 0 18px hsl(187 100% 58% / .5); }

.mono{
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:.68rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  line-height:1.6;
}
.mono.m5{ font-weight:500; }
.cy{ color:var(--cyan); }
.mg{ color:var(--magenta); }
.vi{ color:#b06bff; }
.dim{ color:var(--ink-3); }

.eyebrow{
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--cyan);
  display:flex; align-items:center; gap:.85rem;
  margin:0 0 1.4rem;
}
.eyebrow::before{
  content:''; flex:none; width:30px; height:1px;
  background:var(--cyan);
  box-shadow:0 0 10px var(--magenta), 0 0 10px var(--magenta);
}

.snum{
  text-shadow:0 1px 12px hsl(258 70% 4% / .9);
  display:flex; align-items:center; gap:.85rem;
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 1.2rem;
}
.snum b{ color:var(--cyan); font-weight:500; }
.snum::after{
  content:''; flex:1 1 auto; height:1px; min-width:1rem;
  background:linear-gradient(90deg, var(--border), transparent);
}

.lede{ font-size:1.05rem; line-height:1.65; color:var(--ink-2); max-width:56ch; text-shadow:0 1px 14px hsl(258 70% 4% / .92); }
.lede strong{ color:var(--ink); font-weight:500; }

/* ---- header -------------------------------------------------------------- */
/* the bar is fixed and 58px tall, so an anchor jump would otherwise drop a
   section heading underneath it. */
.mv{ scroll-margin-top:76px; }

.bar{
  position:fixed; inset:0 0 auto 0; z-index:30;
  background:hsl(252 40% 7% / .82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--border);
}
.bar-in{
  width:min(1180px, 100% - (var(--gutter) * 2)); margin-inline:auto;
  display:flex; align-items:center; gap:1rem;
  height:58px;
}
.mark{
  display:inline-flex; align-items:center; gap:.02em;
  font-family:'Syne',sans-serif; font-weight:800; font-size:1.05rem;
  letter-spacing:-.06em; text-transform:lowercase; color:var(--ink);
  text-decoration:none; flex:none;
}
.mark-t{ display:inline-flex; align-items:center; }
.mark img{
  width:1.15em; height:1.15em; object-fit:contain;
  mix-blend-mode:screen; transform:translateY(.06em);
  filter:drop-shadow(0 0 6px hsl(273 99% 60% / .6));
}
.mark sup{ font-size:.58em; color:var(--magenta); margin-left:.04em; }
.mark:focus-visible{ outline:none; }
.mark:focus-visible .mark-t{ box-shadow:0 0 0 2px var(--cyan); border-radius:3px; }

.bar-nav{ display:flex; align-items:center; gap:.15rem; margin-left:auto; }
.nv{
  position:relative;
  appearance:none; border:0; background:transparent; cursor:pointer;
  text-decoration:none;                     /* the default underline is the whole problem */
  font-family:'DM Mono',monospace; font-size:.8rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
  padding:.55rem .7rem .5rem; border-radius:3px;
  transition:color .22s var(--ease);
}
/* A hairline that draws in from the left, instead of a block of background. */
.nv::after{
  content:''; position:absolute; left:.7rem; right:.7rem; bottom:.24rem; height:1px;
  background:var(--cyan); box-shadow:0 0 8px hsl(187 100% 58% / .7);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .28s var(--ease);
}
.nv:hover{ color:var(--ink); }
.nv:hover::after{ transform:scaleX(1); }
.nv[aria-current="true"]{ color:var(--cyan); }
.nv[aria-current="true"]::after{
  transform:scaleX(1);
  background:var(--identity); box-shadow:0 0 10px hsl(299 88% 61% / .55);
}
.nv:focus-visible{
  outline:none; color:var(--ink);
  box-shadow:0 0 0 1px var(--cyan), 0 0 12px hsl(187 100% 58% / .5);
}
@media (prefers-reduced-motion:reduce){
  .nv::after{ transition:none; }
}
@media (max-width:860px){ .bar-nav{ display:none; } }

.bar-read{
  margin-left:auto; display:flex; align-items:center; gap:.5rem;
  font-family:'DM Mono',monospace; font-size:.73rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink-3); flex:none;
}
@media (min-width:861px){ .bar-read{ margin-left:1.25rem; } }
.pulse{
  width:6px; height:6px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.7)} }
.bar-read b{ color:var(--ink-2); font-weight:400; font-variant-numeric:tabular-nums; }
@media (max-width:460px){ .bar-read .rlabel{ display:none; } }

/* scroll progress under the bar */
.bar-prog{ height:1px; background:var(--identity); transform-origin:0 50%; transform:scaleX(0); }

/* ---- fixed field readout (bottom-left HUD) ------------------------------- */
.hud{
  /* The panel is a readout, so it must never swallow a click meant for the
     page behind it — only the music button is interactive. Before the button
     existed this did not matter; now it does, and the hero was intercepting. */
  position:fixed; left:var(--gutter); bottom:1rem; z-index:28;
  pointer-events:none;
  background:hsl(252 44% 7% / .92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:.55rem .7rem;
  display:grid; gap:.18rem;
  font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--ink-3);
  pointer-events:none;
  box-shadow:0 12px 34px hsl(260 85% 3% / .6);
}
.hud .row{ display:flex; gap:.6rem; justify-content:space-between; }
.hud b{ font-weight:500; color:var(--cyan); font-variant-numeric:tabular-nums; }
.hud .meter{
  height:2px; width:120px; background:var(--muted); overflow:hidden; border-radius:2px;
}
.hud .meter i{ display:block; height:100%; width:10%; background:var(--identity); transition:width .3s linear; }
@media (max-width:860px){ .hud{ display:none; } }

/* ---- reveals ------------------------------------------------------------- */
.js .r{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), clip-path 1.1s var(--ease);
}
.js .r.in{ opacity:1; transform:none; }
.js .r-l{ transform:translateX(-26px); }
.js .r-r{ transform:translateX(26px); }
.js .r-s{ transform:scale(.94); }
@media (max-width:900px){ .js .r-l, .js .r-r{ transform:translateY(22px); } }
.js .r-clip{
  clip-path:inset(-38% -8% 105% 0); transform:none; opacity:1;
}
.js .r-clip.in{ clip-path:inset(-38% -8% -38% 0); }
.js .r[data-d="1"]{ transition-delay:.08s }
.js .r[data-d="2"]{ transition-delay:.16s }
.js .r[data-d="3"]{ transition-delay:.24s }
.js .r[data-d="4"]{ transition-delay:.32s }
.js .r[data-d="5"]{ transition-delay:.40s }
.js .r[data-d="6"]{ transition-delay:.48s }

/* ---- movements ----------------------------------------------------------- */
.mv{
  position:relative;
  min-height:100svh;
  padding:clamp(6rem,13vh,9rem) 0 clamp(4rem,9vh,7rem);
  display:flex; align-items:center;
}
.mv-in{ flex:0 1 auto; min-width:0; }

/* per-section stroke source for hollow/outline type */
.mv{ --stroke:var(--cyan); --stroke-glow:hsl(187 100% 58% / .15); }
.mv[data-mode="ubu"]  { --stroke:#b06bff; --stroke-glow:hsl(273 99% 60% / .18); }
.mv[data-mode="vault"]{ --stroke:var(--magenta); --stroke-glow:hsl(311 98% 60% / .18); }
.mv[data-mode="ops"]  { --stroke:#b06bff; --stroke-glow:hsl(273 99% 60% / .18); }
.mv[data-mode="queue"]{ --stroke:var(--magenta); --stroke-glow:hsl(311 98% 60% / .18); }

/* ---- panels -------------------------------------------------------------- */
.panel{
  position:relative;
  min-width:0;
  background:var(--panel);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel.pad{ padding:clamp(1.25rem,3vw,2.1rem); }
.panel.rim::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(145deg, hsl(187 100% 58% / .22), transparent 38%, transparent 62%, hsl(311 98% 60% / .18));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1px;
}
.well{
  background:linear-gradient(180deg, hsl(256 24% 12%), hsl(255 30% 8%));
  border:1px solid var(--border); border-radius:.4rem;
}

/* ---- hero ---------------------------------------------------------------- */
#s0{ padding-top:clamp(5.5rem,11vh,8rem); }
.hero-top{ position:relative; }
.hero-lower{
  display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(1.5rem,4vw,3rem); align-items:center;
  margin-top:clamp(.4rem,1.4vh,1.2rem);
}
@media (max-width:900px){ .hero-lower{ grid-template-columns:minmax(0,1fr); gap:2rem; } }

.lockup-band{
  position:relative; margin:clamp(-5rem,-5.5vw,-2.6rem) 0 clamp(-4.2rem,-4.6vw,-2.2rem);
  width:min(410px,100%);
}
.lockup-band img{
  width:100%; height:auto; opacity:.95;
  filter:saturate(125%);
}
.js .lockup-band img{ animation:powerOn 2.4s var(--ease) both; }
@keyframes powerOn{
  0%{opacity:0; filter:brightness(2.4) saturate(0)}
  8%{opacity:.85}
  12%{opacity:.1}
  20%{opacity:.9}
  26%{opacity:.25}
  40%{opacity:1; filter:brightness(1.35) saturate(140%)}
  100%{opacity:.95; filter:brightness(1) saturate(125%)}
}

.hero-h{ margin:0; }
.hero-h .ln{ display:block; }
.hero-sub{ margin:0; }
.av-stage{ width:min(100%,292px); }

.cred{
  margin-top:clamp(1.6rem,4vw,2.4rem);
  display:inline-flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  padding:.65rem 1rem .65rem .85rem;
  border:1px solid var(--border); border-radius:var(--radius);
  background:hsl(252 40% 9% / .7);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--ink-2); max-width:100%;
}
.cred .bolt{ width:1px; height:22px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); flex:none; }
.cred b{ color:var(--ink); font-weight:500; }
.cred .pl{ color:var(--magenta); font-weight:500; }

.av-stage{
  position:relative; display:grid; place-items:center;
  aspect-ratio:1/1; width:min(100%,420px); margin-inline:auto;
  overflow:hidden;
}
.av-ring{
  position:absolute; inset:0; background:url('assets/art/hud-ring.webp') center/contain no-repeat;
  opacity:.5;
}
.js .av-ring{ animation:spin 64s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.av-ring.b{ inset:11%; opacity:.28; }
.js .av-ring.b{ animation:spin 44s linear infinite reverse; }
.av-glow{
  position:absolute; inset:8%; border-radius:50%;
  background:radial-gradient(circle, hsl(299 88% 61% / .26), transparent 66%);
}
.av{
  position:relative; width:66%;
  border-radius:48% 52% 43% 57% / 42% 42% 58% 58%;
  overflow:hidden;
  background:linear-gradient(160deg, hsl(273 60% 18%), hsl(252 40% 8%));
  box-shadow:
    0 0 0 12px hsl(299 88% 61% / .05),
    0 0 55px hsl(299 88% 61% / .23),
    26px 30px 0 hsl(187 100% 58% / .08);
}
.js .av{ animation:blob 16s ease-in-out infinite; }
@keyframes blob{
  0%,100%{ border-radius:48% 52% 43% 57% / 42% 42% 58% 58%; }
  33%    { border-radius:56% 44% 55% 45% / 51% 38% 62% 49%; }
  66%    { border-radius:42% 58% 38% 62% / 58% 50% 50% 42%; }
}
.av img{ width:100%; aspect-ratio:1/1; height:auto; object-fit:cover; object-position:50% 18%; }

.scroll-cue{
  margin-top:clamp(2rem,6vh,3.6rem);
  display:flex; align-items:center; gap:.75rem;
  font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--ink-3);
}
.scroll-cue i{ display:block; width:44px; height:1px; background:linear-gradient(90deg,var(--cyan),transparent); }
.js .scroll-cue i{ animation:cue 2.8s ease-in-out infinite; transform-origin:0 50%; }
@keyframes cue{ 0%,100%{transform:scaleX(.4); opacity:.5} 50%{transform:scaleX(1); opacity:1} }

/* ---- thesis -------------------------------------------------------------- */
.thesis-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:end; }
@media (max-width:900px){ .thesis-grid{ grid-template-columns:minmax(0,1fr); align-items:start; } }
.fieldnote{ padding:1.1rem 1.2rem; }
.fieldnote p{ margin:.7rem 0 0; }
.fieldnote .k{ display:flex; justify-content:space-between; gap:1rem; padding:.32rem 0; border-bottom:1px dashed hsl(255 24% 26% / .7); }
.fieldnote .k:last-child{ border-bottom:0; }
.fieldnote .k b{ color:var(--cyan); font-weight:500; font-variant-numeric:tabular-nums; }

/* ---- generic project layout --------------------------------------------- */
.proj-head{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(1.25rem,3vw,3rem); align-items:start; margin-top:clamp(1.4rem,3vw,2.2rem); }
@media (max-width:900px){ .proj-head{ grid-template-columns:minmax(0,1fr); align-items:start; } }
.meta-row{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:0; }
.chip{
  font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  padding:.32rem .6rem; border:1px solid var(--border); border-radius:100px;
  background:hsl(252 40% 10% / .8); color:var(--ink-2);
}
.chip.on{ color:var(--cyan); border-color:hsl(187 100% 58% / .45); box-shadow:0 0 14px hsl(187 100% 58% / .16) inset; }
.chip.mgc{ color:var(--magenta); border-color:hsl(311 98% 60% / .45); }

/* ---- FYOS / overwatch ---------------------------------------------------- */
.ow-wrap{ margin-top:clamp(1.5rem,4vw,2.6rem); overflow:hidden; }
.ow-top{
  display:flex; flex-direction:column; align-items:flex-start; gap:.7rem;
  padding:1rem clamp(1rem,2.4vw,1.5rem); border-bottom:1px solid var(--border);
}
.ow-logo{ width:min(320px,62vw); }
.js .ow-logo{ filter:drop-shadow(0 0 18px hsl(311 98% 60% / .28)); }
.ow-body{ display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:0; }
@media (max-width:820px){ .ow-body{ grid-template-columns:minmax(0,1fr); } }
.fleet{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:.5rem; padding:clamp(1rem,2.4vw,1.4rem);
  align-content:start;
}
.tgt{
  border:1px solid var(--border); border-radius:.4rem; padding:.55rem .6rem;
  background:linear-gradient(170deg, hsl(256 30% 13%), hsl(255 34% 8%));
  font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); display:grid; gap:.35rem; min-width:0;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.tgt .id{ color:var(--ink-2); letter-spacing:.12em; }
.tgt .bar{ height:2px; background:var(--muted); border-radius:2px; overflow:hidden; }
.tgt .bar i{ display:block; height:100%; width:0%; background:var(--identity); transition:width .5s linear; }
.tgt .st{ font-size:.68rem; letter-spacing:.16em; }
.tgt{ align-content:start; }
.tgt[data-state="run"]{ border-color:hsl(187 100% 58% / .5); color:var(--cyan); box-shadow:0 0 22px hsl(187 100% 58% / .13); transform:translateY(-2px); }
.tgt[data-state="hit"]{ border-color:hsl(311 98% 60% / .55); color:var(--magenta); box-shadow:0 0 26px hsl(311 98% 60% / .16); }
.tgt[data-state="clear"]{ border-color:hsl(273 60% 45% / .5); color:var(--ink-3); }

.fleet-col{ display:flex; flex-direction:column; justify-content:space-between; gap:1rem; min-width:0; }
.fleet-foot{
  margin:0; padding:0 clamp(1rem,2.4vw,1.4rem) clamp(1rem,2.4vw,1.4rem);
  letter-spacing:.14em; line-height:1.9;
}
.ow-side{
  border-left:1px solid var(--border);
  padding:clamp(1rem,2.4vw,1.4rem); display:grid; gap:.9rem; align-content:start;
  background:hsl(252 40% 8% / .5);
}
@media (max-width:820px){ .ow-side{ border-left:0; border-top:1px solid var(--border); } }
.readout{ display:grid; gap:.2rem; }
.readout .v{
  font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-.09em; line-height:.84;
  font-size:clamp(1.65rem,3vw,2.6rem); color:var(--ink); font-variant-numeric:tabular-nums;
}
.readout .v.cyv{ color:var(--cyan); }
.feed{
  background:var(--void); border:1px solid var(--border); border-radius:.4rem;
  padding:.6rem .7rem; min-height:112px; max-height:112px; overflow:hidden;
  font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.08em; line-height:1.85;
  color:var(--ink-3); text-transform:none;
}
.feed div{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feed .ok{ color:var(--cyan); }
.feed .hit{ color:var(--magenta); }

.btn{
  appearance:none; cursor:pointer;
  font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  padding:.7rem 1.1rem; border-radius:.4rem;
  border:1px solid hsl(311 98% 60% / .5);
  background:linear-gradient(145deg, hsl(311 70% 22% / .7), hsl(273 60% 14% / .9));
  color:var(--ink);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 30px hsl(311 98% 40% / .28); border-color:var(--magenta); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--cyan), 0 0 24px hsl(187 100% 58% / .45); }
.btn[disabled]{ opacity:.55; cursor:progress; }
.btn.ghost{ border-color:var(--border); background:hsl(252 40% 11% / .8); }
.btn.ghost:hover{ border-color:var(--cyan); box-shadow:0 10px 30px hsl(187 100% 40% / .22); }

/* terminal / command palette */
.term{
  min-width:0;
  margin-top:clamp(1.5rem,4vw,2.6rem);
  background:var(--void); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
}
.term-bar{
  display:flex; align-items:center; gap:.5rem; padding:.55rem .8rem;
  border-bottom:1px solid var(--border); background:hsl(252 40% 9%);
  font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3);
}
.term-bar .d3{ display:flex; gap:.3rem; }
.term-bar .d3 i{ width:8px; height:8px; border-radius:50%; background:var(--muted); }
.term-bar .d3 i:nth-child(1){ background:hsl(311 98% 60% / .7); }
.term-bar .d3 i:nth-child(2){ background:hsl(273 99% 60% / .7); }
.term-bar .d3 i:nth-child(3){ background:hsl(187 100% 58% / .7); }
.term-body{
  padding:1rem clamp(.85rem,2vw,1.2rem);
  font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.08em; line-height:1.9;
  text-transform:none; color:var(--ink-2);
  min-height:196px;
  overflow-x:auto;
}
.term-body .cmd{ color:var(--ink); }
.term-body .pr{ color:var(--magenta); }
.term-body .ok{ color:var(--cyan); }
.term-body .cm{ color:var(--ink-3); }
.caret{ display:inline-block; width:.6em; height:1em; background:var(--cyan); vertical-align:-.15em; box-shadow:0 0 10px var(--cyan); }
.js .caret{ animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* stickers */
.sticker{ position:absolute; pointer-events:none; z-index:5; filter:drop-shadow(0 18px 32px hsl(260 85% 3% / .7)); }
.sticker img{ width:100%; }
.st-1{ width:clamp(110px,13vw,178px); right:-1.4rem; top:-5.2rem; transform:rotate(9deg); }
.st-2{ width:clamp(130px,17vw,230px); right:-2rem; bottom:-3.4rem; transform:rotate(-11deg); }
.js .st-1{ animation:float1 11s ease-in-out infinite; }
.js .st-2{ animation:float2 13s ease-in-out infinite; }
@keyframes float1{ 0%,100%{transform:rotate(9deg) translateY(0)} 50%{transform:rotate(6deg) translateY(-14px)} }
@keyframes float2{ 0%,100%{transform:rotate(-11deg) translateY(0)} 50%{transform:rotate(-8deg) translateY(12px)} }
@media (max-width:640px){
  .st-1{ width:100px; right:.2rem; top:-2.6rem; }
  .st-2{ width:92px; right:.2rem; bottom:-2.9rem; }
}
/* the hero wordmark must never break mid-word on a narrow phone */
@media (max-width:430px){
  .d-hero{ font-size:clamp(3.1rem, 13vw, 3.75rem); }
}

/* ---- ubu-setup: propagation --------------------------------------------- */
.prop{ margin-top:clamp(1.5rem,4vw,2.6rem); display:grid; grid-template-columns:minmax(0,268px) 112px minmax(0,1fr); column-gap:0; row-gap:clamp(1rem,2.5vw,2rem); }
@media (max-width:1040px){ .prop{ grid-template-columns:minmax(0,1fr); } .prop-bus{ display:none; } }
.source{ padding:1.1rem 1.2rem; display:grid; gap:.9rem; align-content:start; }
.swatch{
  height:104px; border-radius:.4rem; border:1px solid var(--border);
  background:linear-gradient(145deg, var(--src), var(--src-2));
  box-shadow:0 0 40px hsl(from var(--src) h s l / .35), inset 0 0 0 1px hsl(0 0% 100% / .07);
  transition:background .2s linear;
}
@supports not (color: hsl(from red h s l)){ .swatch{ box-shadow:0 0 40px hsl(273 90% 40% / .3), inset 0 0 0 1px hsl(0 0% 100% / .07); } }
input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:24px; background:transparent; cursor:ew-resize; margin:0;
}
input[type="range"]::-webkit-slider-runnable-track{ height:3px; border-radius:3px; background:var(--identity); }
input[type="range"]::-moz-range-track{ height:3px; border-radius:3px; background:var(--identity); }
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; margin-top:-7px; border-radius:50%;
  background:var(--ink); border:2px solid var(--src); box-shadow:0 0 14px var(--src);
}
input[type="range"]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--ink);
  border:2px solid var(--src); box-shadow:0 0 14px var(--src);
}
input[type="range"]:focus-visible{ outline:none; }
input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 3px hsl(187 100% 58% / .55), 0 0 18px var(--src); }
input[type="range"]:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 3px hsl(187 100% 58% / .55), 0 0 18px var(--src); }

.surfaces{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
@media (max-width:1040px){ .surfaces{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); } }
.surf{
  position:relative; overflow:hidden;
  border:1px solid var(--border); border-radius:.4rem; padding:.7rem .75rem;
  background:linear-gradient(170deg, hsl(256 30% 12%), hsl(255 34% 8%));
  display:grid; gap:.5rem; min-width:0;
}
.surf .nm{ font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3); }
.surf .swatches{ display:flex; gap:3px; }
.surf .swatches i{
  flex:1; height:16px; border-radius:2px; background:var(--muted);
  transition:background .5s var(--ease), box-shadow .5s var(--ease);
}
.surf .mini{
  font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.04em; text-transform:none;
  color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.surf::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .5s var(--ease);
}
.surf.lit::after{ box-shadow:inset 0 0 0 1px var(--src), inset 0 0 28px hsl(from var(--src) h s l / .16); }
@supports not (color: hsl(from red h s l)){ .surf.lit::after{ box-shadow:inset 0 0 0 1px var(--src); } }
.surf.lit .nm{ color:var(--ink-2); }

/* ---- neon vault ---------------------------------------------------------- */
#s4{ overflow:hidden; }
.horizon{
  position:absolute; inset:auto 0 0 0; height:62%;
  background:url('assets/art/grid-horizon.webp') center bottom/cover no-repeat;
  opacity:.3; mix-blend-mode:screen; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 45%, #000);
  mask-image:linear-gradient(to bottom, transparent, #000 45%, #000);
}
.tower{ display:grid; gap:.4rem; margin-top:1.4rem; }
.floor{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.9rem;
  padding:.6rem .8rem; border:1px solid var(--border); border-radius:.4rem;
  background:hsl(252 40% 9% / .72);
  font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--ink-3);
  transition:border-color .5s var(--ease), color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.floor .lv{ color:var(--ink-3); font-variant-numeric:tabular-nums; }
.floor .st{ font-size:.68rem; }
.floor.cleared{
  border-color:hsl(187 100% 58% / .45); color:var(--ink-2);
  background:linear-gradient(90deg, hsl(187 100% 30% / .16), hsl(252 40% 9% / .72) 55%);
  box-shadow:0 0 24px hsl(187 100% 58% / .1);
}
.floor.cleared .lv{ color:var(--cyan); }
.floor.final.cleared{
  border-color:hsl(311 98% 60% / .5);
  background:linear-gradient(90deg, hsl(311 80% 30% / .18), hsl(252 40% 9% / .72) 55%);
}
.floor.final.cleared .lv{ color:var(--magenta); }

/* ---- operations ---------------------------------------------------------- */
.ops-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(1.5rem,4vw,3rem); align-items:center; }
@media (max-width:900px){ .ops-grid{ grid-template-columns:minmax(0,1fr); } }
.globe-stage{ position:relative; display:grid; place-items:center; aspect-ratio:1/1; width:min(100%,400px); margin-inline:auto; overflow:hidden; }
.globe-stage .glow{ position:absolute; inset:6%; border-radius:50%; background:radial-gradient(circle, hsl(299 88% 61% / .26), transparent 66%); }
.globe-stage img.world{ width:76%; }
.js .globe-stage img.world{ animation:bob 14s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(-6px) rotate(-1.2deg)} 50%{transform:translateY(10px) rotate(1.2deg)} }
.globe-stage .ring{ position:absolute; inset:0; background:url('assets/art/hud-ring.webp') center/contain no-repeat; opacity:.34; }
.js .globe-stage .ring{ animation:spin 88s linear infinite reverse; }
.sweepline{
  position:absolute; inset:12%; border-radius:50%; overflow:hidden; pointer-events:none;
  -webkit-mask:radial-gradient(circle, #000 68%, transparent 70%);
  mask:radial-gradient(circle, #000 68%, transparent 70%);
}
.sweepline i{
  position:absolute; inset:0;
  background:conic-gradient(from 0deg, transparent 0deg, hsl(187 100% 58% / .22) 24deg, transparent 40deg);
}
.js .sweepline i{ animation:spin 5.5s linear infinite; }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:.6rem; margin-top:1.4rem; }
.stat{ padding:.85rem .95rem; display:grid; gap:.25rem; min-width:0; }
.stat .lb, .stat .nb{ overflow-wrap:anywhere; }
.stat .vl{ overflow-wrap:normal; }
.stat.wide{ grid-column:1 / -1; }
.stat .lb{ font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3); }
.stat .vl{
  font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-.09em; line-height:.84;
  font-size:clamp(1.65rem,3vw,2.6rem); color:var(--ink-2);
}
.stat[data-pending="true"] .vl{ color:var(--ink-3); }
.stat .nb{ font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:hsl(311 60% 62% / .85); }

/* ---- build queue --------------------------------------------------------- */
.queue{ display:grid; gap:.6rem; margin-top:clamp(1.5rem,4vw,2.4rem); }
.q{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.5rem 1rem; align-items:center;
  padding:clamp(.9rem,2vw,1.15rem) clamp(1rem,2.2vw,1.3rem);
}
.q .nm{ font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-.09em; line-height:.84; font-size:clamp(1.65rem,3vw,2.6rem); text-transform:lowercase; min-width:0; overflow-wrap:break-word; }
.q .desc{ grid-column:1/-1; color:var(--ink-3); font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }
.q .track{ grid-column:1/-1; height:3px; background:var(--muted); border-radius:3px; overflow:hidden; }
.q .track i{ display:block; height:100%; width:0; background:var(--identity); box-shadow:0 0 14px hsl(273 90% 60% / .5); transition:width 1.5s var(--ease); }
.q.in .track i{ width:var(--p); }
.status{
  font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:100px; border:1px solid var(--border); color:var(--ink-3); white-space:nowrap;
}
.status.active{ color:var(--cyan); border-color:hsl(187 100% 58% / .45); box-shadow:0 0 16px hsl(187 100% 58% / .14); }
.status.shelf{ color:#b06bff; border-color:hsl(273 99% 60% / .4); }
.status.soon{ color:var(--magenta); border-color:hsl(311 98% 60% / .4); }
.q.empty{
  border-style:dashed; background:hsl(252 40% 8% / .45); box-shadow:none;
}
.q.empty .nm{ color:var(--ink-3); -webkit-text-stroke:1px hsl(255 20% 40%); color:transparent; }

/* ---- contact ------------------------------------------------------------- */
.contact-panel{ padding:clamp(1.4rem,4vw,2.6rem); position:relative; }
.mailrow{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-top:1.4rem; }
.mail{
  font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-.07em; line-height:.9;
  font-size:clamp(1.65rem,3vw,2.6rem); text-decoration:none; color:var(--ink);
  border-bottom:2px solid hsl(187 100% 58% / .4); overflow-wrap:anywhere;
  transition:color .3s var(--ease), border-color .3s var(--ease), text-shadow .3s var(--ease);
}
.mail .zed{ color:var(--cyan); text-shadow:0 0 20px hsl(187 100% 58% / .55); }
.mail:hover{ color:var(--cyan); border-color:var(--cyan); text-shadow:0 0 26px hsl(187 100% 58% / .4); }
.mail:focus-visible{ outline:none; color:var(--cyan); box-shadow:0 0 0 2px var(--cyan); border-radius:3px; }
.copied{ font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.19em; text-transform:uppercase; color:var(--cyan); opacity:0; transition:opacity .3s var(--ease); }
.copied.on{ opacity:1; }

.foot{
  border-top:1px solid var(--border);
  padding:1.6rem 0 2.4rem; margin-top:clamp(3rem,8vh,5rem);
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; align-items:center; justify-content:space-between;
  font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3);
}


/* ---- scroll-velocity marquee band --------------------------------------- */
.band{
  position:relative; z-index:2;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,hsl(258 40% 8% / .85),hsl(258 45% 6% / .95));
  overflow:hidden; padding:.95rem 0;
}
.mq-track{ display:flex; width:max-content; will-change:transform; }
.mq-run{
  display:flex; align-items:center; gap:1.6rem; padding-right:1.6rem; flex:none;
  font-family:'DM Mono',ui-monospace,monospace; font-weight:500; font-size:.68rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3);
  white-space:nowrap;
}
.mq-run b{ color:var(--cyan); font-weight:500; }
.mq-run em{ color:var(--magenta); font-style:normal; }
.mq-run s{ text-decoration:none; color:hsl(256 17% 30%); }

/* ---- thesis: the cycling word ------------------------------------------- */
.d .ln.cyc-line{ display:flex; align-items:baseline; max-width:100%; }
.cycler{
  flex:0 0 auto;
  -webkit-appearance:none; appearance:none;
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  display:inline-block; text-align:left;
  transition:filter .3s var(--ease);
}
.cycler:hover{ filter:drop-shadow(0 0 22px hsl(187 100% 58% / .45)); }
.cycler:focus-visible{ outline:none; filter:drop-shadow(0 0 22px hsl(187 100% 58% / .7)); }
.cycler-hint{
  display:inline-flex; align-items:center; gap:.5rem; margin:1.4rem 0 0;
  font-family:'DM Mono',ui-monospace,monospace; font-size:.68rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--ink-3);
}
.cycler-hint kbd{
  font:inherit; border:1px solid var(--border); border-radius:.25rem;
  padding:.15rem .45rem; color:var(--cyan); background:hsl(255 30% 10%);
}

/* ---- thesis: three columns + the diff strip ----------------------------- */
.thesis-cols{
  display:grid; gap:clamp(1.4rem,3vw,2.6rem);
  margin-top:clamp(2rem,5vw,3.2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  max-width:58rem;
}
.thesis-cols p{
  margin:0; color:var(--ink-2); font-size:1.05rem; line-height:1.65;
  text-shadow:0 1px 14px hsl(258 70% 4% / .92);
}
.thesis-cols p:first-child{ color:var(--ink); }
.thesis-cols strong{ color:var(--ink); font-weight:500; }

.diff{
  margin:clamp(1.8rem,4vw,2.8rem) 0 0; max-width:44rem;
  background:linear-gradient(160deg,hsl(250 22% 12%),hsl(255 30% 7%));
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.diff-row{
  display:flex; gap:.9rem; align-items:baseline; margin:0;
  padding:.72rem clamp(.9rem,2.4vw,1.3rem);
  font-family:'DM Mono',ui-monospace,monospace; font-size:.68rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3);
  overflow-wrap:anywhere;
}
.diff-row + .diff-row{ border-top:1px solid var(--border); }
.diff-row .sign{ flex:none; font-weight:500; width:1ch; }
.diff-row--out{ background:hsl(348 70% 34% / .12); color:hsl(348 78% 74%); }
.diff-row--out .sign{ color:hsl(348 90% 66%); }
.diff-row--in{ background:hsl(150 60% 30% / .12); color:hsl(150 55% 74%); }
.diff-row--in .sign{ color:hsl(150 75% 55%); }

/* ---- ubu-setup: the palette.conf schematic ------------------------------ */
.prop-col{ display:grid; gap:clamp(1rem,2.5vw,2rem); align-content:start; min-width:0; }
.schem{ padding:1.1rem 1.2rem; display:grid; gap:.55rem; align-content:start; }
.conf{
  justify-self:start; margin:.3rem 0 .5rem;
  font-family:'DM Mono',ui-monospace,monospace; font-size:.68rem;
  letter-spacing:.19em; text-transform:uppercase; font-weight:500;
  color:var(--ground); background:var(--identity);
  padding:.2rem .5rem; border-radius:3px;
}
.sw{ list-style:none; margin:0; padding:0; display:grid; gap:.34rem; }
.sw li{
  display:grid; grid-template-columns:14px minmax(0,1fr) auto; align-items:center; gap:.6rem;
  font-family:'DM Mono',ui-monospace,monospace; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.sw i{ width:14px; height:14px; border-radius:3px; background:var(--s); border:1px solid hsl(258 40% 30% / .8); }
.sw b{ color:var(--ink-2); font-weight:400; font-variant-numeric:tabular-nums; }
.schem-note{
  margin:.7rem 0 0; font-family:'DM Mono',ui-monospace,monospace; font-size:.68rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--cyan); line-height:1.8;
}
.prop-bus{ position:relative; align-self:stretch; min-height:200px; }
.traces{
  position:absolute; inset:0; width:100%; height:100%; overflow:visible;
  filter:drop-shadow(0 0 6px hsl(299 88% 61% / .55));
}
.trace{
  stroke-dasharray:1; stroke-dashoffset:1; stroke-linecap:round;
  transition:stroke-dashoffset 1.2s var(--ease);
}
.prop-bus.in .trace{ stroke-dashoffset:0; }
.prop-bus.in .trace:nth-child(1){ transition-delay:.05s }
.prop-bus.in .trace:nth-child(2){ transition-delay:.11s }
.prop-bus.in .trace:nth-child(3){ transition-delay:.17s }
.prop-bus.in .trace:nth-child(4){ transition-delay:.23s }
.prop-bus.in .trace:nth-child(5){ transition-delay:.29s }
.prop-bus.in .trace:nth-child(6){ transition-delay:.35s }
.prop-bus.in .trace:nth-child(7){ transition-delay:.41s }
.prop-bus.in .trace:nth-child(8){ transition-delay:.47s }
.prop-bus.in .trace:nth-child(9){ transition-delay:.53s }

/* ---- neon vault: the ascent counter ------------------------------------- */
.ascent{
  margin-top:clamp(1.5rem,4vw,2.4rem);
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:1.2rem 2.4rem;
}
.ascent-main{ flex:none; }
.ascent-lvl{
  margin:0;
  font-family:'DM Mono',ui-monospace,monospace; font-weight:500;
  font-size:clamp(2rem,4.4vw,3.4rem); letter-spacing:.06em; line-height:1;
  color:var(--cyan); text-shadow:0 0 26px hsl(187 100% 58% / .45);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ascent-lvl small{
  display:block; margin-bottom:.5rem;
  font-size:.68rem; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3);
}
.ascent-floor{
  margin:.6rem 0 0; color:var(--ink-2);
  letter-spacing:.14em; text-transform:uppercase;
}
.ascent-climb{ flex:1 1 200px; min-width:180px; max-width:420px; }
.ascent-climb .track{ height:3px; background:var(--muted); border-radius:100px; overflow:hidden; }
.ascent-climb .fill{
  display:block; height:100%; width:0%;
  background:var(--identity); box-shadow:0 0 14px hsl(311 98% 60% / .5);
}
.ascent-chips{ flex:0 1 auto; margin:0; }

/* ---- phone: keep the hollow stroke optically right at small sizes ------- */
@media (max-width:430px){
  .hollow, .outline, .cycler{ -webkit-text-stroke-width:.9px; }
}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .r{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .caret{ opacity:1; }
  .trace{ stroke-dashoffset:0 !important; transition:none !important; }
  .mq-track{ transform:none !important; }
}

/* ---- skip link ----------------------------------------------------------- */
.skip{
  position:fixed; top:-200px; left:var(--gutter); z-index:60;
  background:var(--raised); color:var(--ink);
  border:1px solid var(--cyan); border-radius:var(--radius);
  padding:.7rem 1rem; text-decoration:none;
  font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  box-shadow:0 0 24px hsl(187 100% 58% / .35);
  transition:top .25s var(--ease);
}
.skip:focus-visible, .skip:focus{ top:.6rem; outline:none; }


/* ==========================================================================
   music — opt-in only. never autoplays, never resumes on a later visit.
   ====================================================================== */
.hud .snd{
  pointer-events:auto;
  display:flex; align-items:center; gap:.5rem; width:100%;
  margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--border);
  appearance:none; background:transparent; border-left:0; border-right:0; border-bottom:0;
  cursor:pointer; text-align:left; color:var(--ink-3);
  font-family:'DM Mono',monospace; font-size:.66rem; letter-spacing:.17em;
  text-transform:uppercase; transition:color .22s var(--ease);
}
.hud .snd:hover{ color:var(--ink); }
.hud .snd:focus-visible{ outline:none; color:var(--ink);
  box-shadow:0 0 0 1px var(--cyan), 0 0 12px hsl(187 100% 58% / .5); }
.snd-ico{ flex:none; width:9px; height:9px; border-radius:50%;
  background:var(--ink-3); transition:background .22s var(--ease), box-shadow .22s var(--ease); }
.snd[aria-pressed="true"]{ color:var(--cyan); }
.snd[aria-pressed="true"] .snd-ico{ background:var(--magenta);
  box-shadow:0 0 10px var(--magenta); animation:sndPulse 1.9s ease-in-out infinite; }
@keyframes sndPulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion:reduce){
  .snd[aria-pressed="true"] .snd-ico{ animation:none; }
}
.snd-name{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }