/* ============================================================================
   KKIRI // 끼리 · page layer
   ----------------------------------------------------------------------------
   Layout concept: the page is a radio tuner. Six stations stacked vertically,
   a fixed frequency dial at the bottom whose needle IS the scroll position,
   and a Dead Band (grey + live static) between every pair of stations.

   The engine (scrollcraft.css/js) is the mechanism and is never edited. This
   file themes its tokens and styles the page's own markup.

   Single dark theme, chosen: the brand only exists as neon on a black stage.
   Every colour is a token on :root and body sets its own ground.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- palette (user-pinned) ---- */
  --void:   #08090D;
  --stage:  #0D0E15;
  --mag:    #FF007A;
  --vio:    #8B00FF;
  --cyan:   #00F0FF;
  --amber:  #FF7A00;
  --ink:    #F3EFFA;
  --ink-soft: #ABA5C2;     /* violet-tinted secondary, never flat grey */
  --dead:   #6E6B78;       /* what every neon collapses to in the Dead Band */
  --hud-c:  rgba(0, 240, 255, 0.18);
  --hud-m:  rgba(255, 0, 122, 0.25);

  /* ---- live signal ----
     --res is written by kkiri.js every frame: 1 = locked on a station and
     fully resonant, 0 = deep in the Dead Band. Every neon on the page is
     mixed from its true colour toward --dead by this one number, which is
     what lets the signature move regrade the whole page at once without a
     filter on the document. */
  --res: 1;
  --pct: calc(var(--res) * 100%);
  --mag-live:  color-mix(in oklab, var(--mag)  var(--pct), var(--dead));
  --cyan-live: color-mix(in oklab, var(--cyan) var(--pct), var(--dead));
  --vio-live:  color-mix(in oklab, var(--vio)  var(--pct), var(--dead));
  --amber-live:color-mix(in oklab, var(--amber) var(--pct), var(--dead));

  /* ---- engine tokens ---- */
  --sc-canvas: var(--void);
  --sc-surface: var(--stage);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--mag);
  --sc-accent-ink: var(--void);
  --sc-shadow-color: 262 60% 3%;

  /* ---- type ----
     Anton: condensed poster voice, matches the key-art lettering.
     Black Han Sans: its Hangul counterpart for 끼리.
     Plus Jakarta Sans: body. Jakarta is half of Kkiri's world.
     JetBrains Mono: only for frequencies, heights and telemetry. */
  --f-display: "Anton", "Black Han Sans", Impact, sans-serif;
  --f-hangul:  "Black Han Sans", "Anton", sans-serif;
  --f-text:    "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --sc-font-display: var(--f-display);
  --sc-font-text: var(--f-text);
  --sc-font-mono: var(--f-mono);

  --dial-h: 68px;
  --glow-m: 0 0 25px rgba(255, 0, 122, calc(0.4 * var(--res)));
  --glow-c: 0 0 22px rgba(0, 240, 255, calc(0.35 * var(--res)));
  --r: 4px;             /* one radius for every panel: tactical, not bubbly */
}

html { background: var(--void); }
body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 1rem;
  line-height: 1.66;
  letter-spacing: 0.002em;       /* light-on-dark compensation */
  padding-bottom: calc(var(--dial-h) + env(safe-area-inset-bottom, 0px));
}
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.label {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
}
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===================================================== ambient layers ===== */
/* Order, back to front: particles (z0) → content → 3D (z5) → static (z40) →
   scanlines (z41) → dial (z60) → reticle (z80) → preloader (z100). */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main { position: relative; z-index: 1; }
#gl {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 5; pointer-events: none;
  filter: saturate(calc(0.18 + var(--res) * 0.82));
}
/* The Dead Band itself: low-res noise upscaled with hard pixels so it reads
   as broken broadcast, not as film grain. Opacity is written per frame. */
#static {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 40; pointer-events: none; opacity: 0;
  image-rendering: pixelated; mix-blend-mode: screen;
}
.scanlines {
  position: fixed; inset: 0; z-index: 41; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.028) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.scanlines::after {           /* one slow rolling band, like a CRT refresh */
  content: ""; position: absolute; inset-inline: 0; height: 18vh; top: -20vh;
  background: linear-gradient(to bottom, transparent, rgba(0,240,255,0.035), transparent);
  animation: roll 9s linear infinite;
}
@keyframes roll { to { transform: translateY(140vh); } }

/* ===================================================== preloader ========= */
.boot {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--void);
  clip-path: inset(0 0 0 0);
  transition: clip-path 520ms cubic-bezier(0.77, 0, 0.175, 1), opacity 200ms linear 480ms;
}
.boot.is-off { clip-path: inset(50% 0 50% 0); opacity: 0; pointer-events: none; }
.boot__inner { width: min(34rem, calc(100vw - 2.5rem)); display: grid; gap: 1.1rem; }
.boot__read { font-family: var(--f-mono); font-size: clamp(2.6rem, 9vw, 4.8rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.boot__read small { font-size: 0.34em; color: var(--ink-soft); margin-left: 0.4em; letter-spacing: 0.1em; }
.boot__band { position: relative; height: 34px; border-block: 1px solid var(--hud-c); }
.boot__band i { position: absolute; bottom: 0; width: 1px; background: rgba(0,240,255,0.35); }
.boot__needle { position: absolute; top: -6px; bottom: -6px; width: 2px; left: 0; background: var(--mag); box-shadow: var(--glow-m); }
.boot__status { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); min-height: 1.4em; }
.boot__status.is-alert { color: var(--mag); }
.boot__status.is-ok { color: var(--cyan); }
.boot__skip {
  justify-self: start; background: none; border: 1px solid var(--hud-c); color: var(--ink-soft);
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.45rem 0.8rem; border-radius: var(--r); cursor: pointer;
  transition: color 140ms, border-color 140ms;
}
.boot__skip:hover { color: var(--ink); border-color: var(--cyan); }

/* ===================================================== the dial (chrome) == */
.dial {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: calc(var(--dial-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 clamp(0.75rem, 2vw, 1.5rem) env(safe-area-inset-bottom, 0px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem);
  background: linear-gradient(to top, rgba(8,9,13,0.96), rgba(8,9,13,0.82));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--hud-c);
}
.dial__id { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.dial__id img { width: 26px; height: auto; }
.dial__read { display: grid; line-height: 1.15; }
.dial__freq { font-family: var(--f-mono); font-size: 0.95rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dial__state { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan-live); white-space: nowrap; }
.dial__state[data-state="dead"] { color: var(--dead); }
.dial__band { position: relative; height: 100%; min-width: 0; }
#hud { position: absolute; inset: 8px 0 22px; width: 100%; height: calc(100% - 30px); opacity: 0.9; }
.dial__stations { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.dial__stations li { position: absolute; bottom: 2px; transform: translateX(-50%); }
.dial__stations button {
  background: none; border: 0; padding: 0.15rem 0.3rem; cursor: pointer;
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap; transition: color 140ms;
}
.dial__stations button::before {    /* the tick the station sits on */
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 30px; background: var(--hud-c);
}
.dial__stations button:hover, .dial__stations button[aria-current="true"] { color: var(--ink); }
.dial__stations button[aria-current="true"]::before { background: var(--cyan-live); }
.dial__needle {
  position: absolute; top: 4px; bottom: 18px; width: 2px; margin-left: -1px; left: 0;
  background: var(--mag-live); box-shadow: var(--glow-m); pointer-events: none;
}
.dial__needle::before { content: ""; position: absolute; top: -4px; left: -4px; border: 5px solid transparent; border-top-color: var(--mag-live); }
.dial__sound {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  background: none; border: 1px solid var(--hud-c); border-radius: var(--r);
  padding: 0.45rem 0.7rem; color: var(--ink-soft);
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 140ms, border-color 140ms, transform 120ms;
}
.dial__sound:hover { color: var(--ink); border-color: var(--cyan); }
.dial__sound:active { transform: translateY(1px); }
.dial__sound[aria-pressed="true"] { color: var(--cyan); border-color: var(--cyan); }
.dial__sound svg { width: 16px; height: 16px; }
.dial__sound .on { display: none; }
.dial__sound[aria-pressed="true"] .on { display: block; }
.dial__sound[aria-pressed="true"] .off { display: none; }

/* ===================================================== reticle =========== */
.reticle { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; display: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .reticle { display: block; }
}
.reticle__d {
  position: absolute; width: 26px; height: 26px; left: -13px; top: -13px;
  border: 1.5px solid var(--cyan-live); transform: rotate(45deg) scale(var(--rs, 1));
  transition: transform 180ms var(--sc-ease-out), border-color 180ms;
}
.reticle__d::after { content: ""; position: absolute; inset: 9px; background: var(--mag-live); }
.reticle.is-hot .reticle__d { --rs: 1.5; border-color: var(--mag-live); }

/* ===================================================== shared bits ======= */
.corners { position: relative; }
.corners::before, .corners::after {      /* tactical crosshair corners */
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 1px solid var(--cyan-live);
}
.corners::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.corners::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.panel {
  background: linear-gradient(180deg, rgba(20,18,34,0.72), rgba(13,14,21,0.82));
  border: 1px solid var(--hud-c);
  border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 40px -18px rgba(3,1,10,0.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer;
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  color: var(--void); background: var(--mag-live);
  border: 0; border-radius: var(--r); padding: 0.75rem 1.05rem;
  box-shadow: 0 6px 18px -6px rgba(255,0,122,calc(0.55 * var(--res))), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform 120ms var(--sc-ease-out), filter 140ms;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(0.97); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--hud-c); box-shadow: none; }
.btn--ghost:hover { border-color: var(--cyan); filter: none; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ===================================================== 01 · broadcast ==== */
.hero {
  position: relative; min-height: 100svh; overflow: clip;
  display: grid; grid-template-columns: 1fr; align-content: space-between;
  padding: clamp(1rem, 3vh, 2rem) var(--sc-gutter) calc(var(--dial-h) + clamp(1rem, 3vh, 2rem));
}
.hero__top { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hero__mark { width: clamp(96px, 10vw, 138px); height: auto; }
.badge {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cyan-live); border: 1px solid var(--hud-c); border-radius: var(--r);
  padding: 0.45rem 0.75rem; background: rgba(8,9,13,0.6);
}
/* The title sits BEHIND the 3D layer (z 1 < z 5) so Kkiri stands in front of
   its own name: overlap is the cheapest depth there is. */
.hero__title {
  position: absolute; z-index: 1; left: 0; top: 47%; translate: 0 -50%;
  margin: 0; padding-inline: var(--sc-gutter);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  pointer-events: auto;
}
.hero__title .t {
  font-family: var(--f-display); font-weight: 400; line-height: 0.82;
  font-size: clamp(5rem, 19vw, 21rem); letter-spacing: 0.005em;
  color: var(--ink);
  transition: text-shadow 160ms var(--sc-ease-out);
}
.hero__title .t--latin {           /* brand gradient, pinned by the key art */
  background: linear-gradient(100deg, var(--mag-live) 0%, var(--vio-live) 55%, var(--cyan-live) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__title .t--hangul { font-family: var(--f-hangul); font-size: clamp(3rem, 8.4vw, 9rem); line-height: 1; color: var(--ink); margin: 0.1em 0 0 0.08em; }
.hero__title .t--hangul span { color: var(--cyan-live); font-family: var(--f-mono); font-size: 0.4em; vertical-align: 0.9em; margin-right: 0.12em; }
/* chromatic aberration on hover: two offset channels, the brand's own pair */
@media (hover: hover) and (pointer: fine) {
  .hero__title .t:hover { filter: drop-shadow(-4px 0 0 rgba(0,240,255,0.75)) drop-shadow(4px 0 0 rgba(255,0,122,0.75)); }
  .hero__title .t--hangul:hover { text-shadow: -4px 0 0 rgba(0,240,255,0.75), 4px 0 0 rgba(255,0,122,0.75); filter: none; }
}
.hero__slot {
  position: absolute; z-index: 3; left: 67%; bottom: calc(var(--dial-h) + 1vh); translate: -50% 0;
  width: min(42vw, 560px); height: min(calc(100svh - var(--dial-h) - 6rem), 800px);
  cursor: grab; touch-action: pan-y; outline-offset: -6px;
}
.hero__slot:active { cursor: grabbing; }
.slot-fallback { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.gl-live .slot-fallback { opacity: 0; }
.hero__foot { position: relative; z-index: 10; display: grid; justify-items: start; gap: 0.9rem; max-width: min(34rem, 52vw); }
.hero__sub { max-width: 30ch; margin: 0; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.pills li {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
  padding: 0.45rem 0.7rem; border-radius: var(--r); white-space: nowrap;
  background: rgba(8,9,13,0.72); border: 1px solid var(--hud-c); color: var(--ink-soft);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pills b { font-weight: 500; color: var(--ink); }
.pills [data-status] b { color: var(--cyan-live); }
.pills [data-status="DESYNC"] b { color: var(--mag); }
.hero__hint { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
/* floating prism crystals: CSS 3D, parallax on scroll, drift on pointer */
.prisms { position: absolute; inset: 0; z-index: 2; pointer-events: none; perspective: 900px; }
.prism {
  position: absolute; width: var(--s, 46px); aspect-ratio: 0.7;
  transform: translate3d(calc(var(--px, 0) * var(--d, 1) * 1px), calc(var(--py, 0) * var(--d, 1) * 1px), 0) rotateY(var(--ry, 20deg)) rotateZ(var(--rz, 10deg));
  animation: bob 7s ease-in-out infinite; animation-delay: var(--dl, 0s);
}
.prism svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 18px rgba(139,0,255,calc(0.45 * var(--res)))); }
@keyframes bob { 50% { translate: 0 -14px; } }

/* ===================================================== 02 · hening derau == */
.derau__stage { display: grid; place-items: center; padding: 0 var(--sc-gutter); }
.derau__lines { position: relative; width: min(58rem, 100%); min-height: 60svh; }
.derau__lines > * { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; margin: 0; }
.derau__big {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.6rem, 1.4rem + 5.6vw, 6rem); line-height: 0.96; letter-spacing: 0.005em; color: #C9C6D1;
  text-wrap: balance;
}
.derau__body { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem); line-height: 1.45; color: #C9C6D1; max-width: 36ch; }
.derau__body b { color: var(--ink); font-weight: 600; }
.derau__clock { display: grid; gap: 0.6rem; }
.derau__clock .n { font-family: var(--f-mono); font-size: clamp(3.4rem, 2rem + 8vw, 8.5rem); line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.derau__clock p { margin: 0; max-width: 40ch; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); color: #C9C6D1; }
.derau__tag { position: absolute; left: var(--sc-gutter); top: 2rem; }

/* ===================================================== 03 · dossier ====== */
.dossier { padding-block: clamp(4rem, 9vw, 8rem) clamp(5rem, 10vw, 9rem); }
.dossier__grid {
  display: grid; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); align-items: start;
}
.idcard { position: sticky; top: 2rem; padding: 1rem; display: grid; gap: 1rem; }
.idcard__img {
  position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 1;
  background: var(--stage);
}
.idcard__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(calc(0.05 + var(--res) * 0.95)) contrast(calc(0.9 + var(--res) * 0.1)); }
.idcard__img::after {       /* scanline wash that thickens as resonance drops */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(8,9,13,calc(0.5 - var(--res) * 0.4)) 0 2px, transparent 2px 4px);
}
.idcard__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.meter { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; height: 28px; }
.meter i { background: rgba(255,255,255,0.07); border-radius: 1px; transition: background 120ms; }
.meter i.on { background: var(--mag-live); }
.meter i.on:nth-child(n+9) { background: var(--vio-live); }
.meter i.on:nth-child(n+17) { background: var(--cyan-live); }
#scope-mini { width: 100%; height: 64px; border-top: 1px solid var(--hud-c); border-bottom: 1px solid var(--hud-c); }
.range { width: 100%; height: 28px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--dead), var(--mag) 55%, var(--cyan)); }
.range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--dead), var(--mag) 55%, var(--cyan)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; background: var(--ink); border: 3px solid var(--void); transform: rotate(45deg); box-shadow: 0 0 0 1px var(--cyan), var(--glow-c); border-radius: 2px; }
.range::-moz-range-thumb { width: 18px; height: 18px; background: var(--ink); border: 3px solid var(--void); transform: rotate(45deg); box-shadow: 0 0 0 1px var(--cyan); border-radius: 2px; }
.range:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.range-ends { display: flex; justify-content: space-between; }

.dossier__copy { max-width: 40rem; }
.dossier__copy h2 {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.8rem, 1.6rem + 5vw, 6rem); line-height: 0.92; letter-spacing: 0.005em; margin: 0 0 1.5rem;
  text-wrap: balance;
}
.dossier__copy h2 em { font-style: normal; color: var(--mag-live); }
.dossier__copy p { margin: 0 0 1.15rem; color: var(--ink-soft); max-width: 62ch; text-wrap: pretty; }
.dossier__copy p strong { color: var(--ink); font-weight: 600; }
.dossier__lede { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); line-height: 1.5; color: var(--ink) !important; }
.pull {
  margin: 2.5rem 0; padding: 1.4rem 0 1.4rem 1.4rem; border-left: 1px solid var(--mag-live);
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1; color: var(--ink); text-wrap: balance;
}
.facts { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: 0; margin: 2.5rem 0 0; border-top: 1px solid var(--hud-c); }
.facts dt, .facts dd { padding: 0.9rem 0; border-bottom: 1px solid var(--hud-c); margin: 0; }
.facts dt { padding-right: 1.5rem; }
.facts dd { color: var(--ink-soft); }
.facts dd strong { color: var(--ink); font-weight: 600; }
.ears { display: inline-flex; gap: 0.35rem; vertical-align: middle; margin-left: 0.3rem; }
.ears i { width: 10px; height: 10px; transform: rotate(45deg); }
.ears i:first-child { background: var(--cyan-live); }
.ears i:last-child { background: var(--mag-live); }

/* ===================================================== 04 · size shift === */
.shift__stage {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 4rem); align-items: center;
  padding: clamp(1rem, 4vh, 3rem) var(--sc-gutter) calc(var(--dial-h) + 1rem);
}
/* The measuring wall. The ortho camera in kkiri.js uses the SAME mapping
   (0 cm at the bottom edge + 5 cm margin, 210 cm at the top), so a tick at
   178 lines up with the top of Kkiri's head to the pixel. */
.wall { position: relative; height: min(78svh, 760px); }
.wall__slot { position: absolute; inset: 0 0 0 64px; }
.wall__slot .slot-fallback { position: absolute; left: 50%; bottom: calc(5 / 215 * 100%); translate: -50% 0; width: auto; height: calc(var(--cm, 50) / 215 * 100%); }
.ruler { position: absolute; inset: 0 auto 0 0; width: 60px; border-right: 1px solid var(--hud-c); }
.ruler i { position: absolute; right: 0; height: 1px; background: rgba(0,240,255,0.3); width: 10px; bottom: calc((var(--y) + 5) / 215 * 100%); }
.ruler i.major { width: 20px; background: rgba(0,240,255,0.55); }
.ruler span { position: absolute; right: 26px; translate: 0 50%; font-family: var(--f-mono); font-size: 0.66rem; color: var(--ink-soft); bottom: calc((var(--y) + 5) / 215 * 100%); }
.mark {
  position: absolute; left: 60px; right: 0; height: 0; bottom: calc((var(--y) + 5) / 215 * 100%);
  border-top: 1px dashed var(--c, var(--hud-c));
}
.mark span {
  position: absolute; right: 0; bottom: 4px; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c);
}
.mark--live { --c: var(--mag-live); border-top-style: solid; border-top-width: 2px; }
.mark--live span { right: auto; left: 8px; background: var(--mag-live); color: var(--void); padding: 0.1rem 0.4rem; border-radius: 2px; bottom: 6px; }
.floor { position: absolute; left: 60px; right: 0; bottom: calc(5 / 215 * 100%); height: 40px; translate: 0 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(139,0,255,calc(0.45 * var(--res))), transparent 70%); }

.shift__panel { display: grid; gap: 1.1rem; }
.shift__panel h2 {
  margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3rem, 1.6rem + 5vw, 6rem); line-height: 0.9;
}
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.mode {
  text-align: left; cursor: pointer; background: rgba(8,9,13,0.6); color: var(--ink-soft);
  border: 1px solid var(--hud-c); border-radius: var(--r); padding: 0.7rem 0.85rem;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.35;
  transition: border-color 160ms, color 160ms, background 160ms, transform 120ms;
}
.mode b { display: block; font-size: 1.15rem; letter-spacing: 0; color: var(--ink); font-weight: 500; }
.mode:hover { border-color: var(--cyan); color: var(--ink); }
.mode:active { transform: translateY(1px); }
.mode[aria-pressed="true"] { border-color: var(--mag-live); background: rgba(255,0,122,calc(0.12 * var(--res))); color: var(--ink); }
.readout { display: flex; align-items: baseline; gap: 0.6rem; }
.readout .n { font-family: var(--f-mono); font-size: clamp(3.6rem, 2rem + 6vw, 7rem); line-height: 0.95; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.readout .u { font-family: var(--f-mono); color: var(--ink-soft); font-size: 1.1rem; }
.telemetry { display: grid; grid-template-columns: auto 1fr; margin: 0; border-top: 1px solid var(--hud-c); }
.telemetry dt, .telemetry dd { margin: 0; padding: 0.6rem 0; border-bottom: 1px solid var(--hud-c); }
.telemetry dt { padding-right: 1.25rem; }
.telemetry dd { font-family: var(--f-mono); font-size: 0.86rem; color: var(--ink); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.gauge { flex: 1; height: 6px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; min-width: 3rem; }
.gauge i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--g, 0.2)); background: linear-gradient(90deg, var(--vio-live), var(--mag-live) 70%, var(--amber-live)); }
.beats { display: inline-flex; gap: 4px; }
.beats i { width: 8px; height: 8px; transform: rotate(45deg); background: rgba(255,255,255,0.12); transition: background 60ms; }
.beats i.on { background: var(--cyan-live); }
.shift__quote { position: relative; min-height: 4.6em; }
.shift__quote p { position: absolute; inset: 0 0 auto; margin: 0; font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem); color: var(--ink); line-height: 1.45; max-width: 36ch; }
.shift__quote p span { display: block; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.3rem; }

/* ===================================================== 05 · matrix ======= */
.matrix__stage { display: flex; align-items: center; }
.rail { gap: clamp(1rem, 2vw, 1.75rem); padding: 0 var(--sc-gutter) calc(var(--dial-h) * 0.6); align-items: stretch; }
.rail > * { flex: 0 0 auto; }
.rail__lead { width: clamp(17rem, 30vw, 27rem); display: grid; align-content: center; gap: 1rem; }
.rail__lead h2 { margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.8rem, 1.6rem + 4.4vw, 5.6rem); line-height: 0.92; }
.rail__lead p { margin: 0; color: var(--ink-soft); max-width: 34ch; }
.rail__note { width: clamp(17rem, 28vw, 24rem); display: grid; align-content: center; gap: 0.9rem; padding-right: var(--sc-gutter); }
.rail__note h3 { margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); line-height: 0.95; }
.rail__note p { margin: 0; color: var(--ink-soft); }
.scale { display: flex; gap: 6px; margin-top: 0.4rem; }
.scale i { width: 26px; height: 26px; border: 1px solid var(--hud-c); transform: rotate(45deg) scale(0.72); }
.scale i:last-child { border-color: var(--mag-live); background: var(--mag-live); }
.card-wrap { width: clamp(18.5rem, 28vw, 25rem); }
.card {
  position: relative; height: 100%; min-height: min(68svh, 36rem); padding: 1.2rem 1.2rem 1.35rem;
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 1rem; overflow: hidden;
}
.card::after {          /* glare: follows --gx/--gy written by kkiri.js */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--go, 0);
  background: radial-gradient(420px circle at calc(var(--gx, 0.5) * 100%) calc(var(--gy, 0.3) * 100%), rgba(255,255,255,0.13), transparent 55%);
  transition: opacity 200ms;
}
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.card h3 { margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); line-height: 0.95; }
.card__viz { position: relative; display: grid; place-items: center; min-height: 12rem; border-block: 1px solid var(--hud-c); overflow: hidden; }
.card__viz svg { width: min(100%, 15rem); height: auto; overflow: visible; }
.card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.card p strong { color: var(--ink); font-weight: 600; }
.card__act { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
/* prism pulse */
.facet { transition: fill-opacity 500ms var(--sc-ease-out); }
.is-pulsing .facet { fill-opacity: 0.95; transition-duration: 40ms; }
.ring { transform-origin: 50% 50%; transform-box: fill-box; opacity: 0; }
.is-pulsing .ring { animation: ring 900ms var(--sc-ease-out) forwards; }
.is-pulsing .ring:nth-of-type(2) { animation-delay: 120ms; }
.is-pulsing .ring:nth-of-type(3) { animation-delay: 240ms; }
@keyframes ring { from { opacity: 0.9; transform: scale(0.4); } to { opacity: 0; transform: scale(2.1); } }
/* metronome */
.pendulum { transform-origin: 120px 196px; transform: rotate(var(--sw, 0deg)); }
.leds { display: inline-flex; gap: 6px; }
.leds i { width: 10px; height: 10px; transform: rotate(45deg); background: rgba(255,255,255,0.1); }
.leds i.on { background: var(--cyan-live); box-shadow: var(--glow-c); }
.leds i.on:first-child { background: var(--mag-live); box-shadow: var(--glow-m); }
/* sync-burst shockwave overlay: one fixed SVG, scaled with transform only */
.burst { position: fixed; inset: 0; z-index: 45; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.burst svg { width: 40vmax; height: 40vmax; overflow: visible; opacity: 0; }
.burst.go svg { animation: blast 820ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes blast { 0% { opacity: 1; transform: scale(0.05); } 70% { opacity: 0.8; } 100% { opacity: 0; transform: scale(3.4); } }
.burst__flash { position: absolute; inset: 0; background: radial-gradient(circle at var(--bx, 50%) var(--by, 50%), rgba(255,0,122,0.22), transparent 60%); opacity: 0; }
.burst.go .burst__flash { animation: flash 520ms ease-out forwards; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ===================================================== 06 · purge + close = */
.purge__stage { display: grid; grid-template-rows: 1fr auto; padding: clamp(1rem, 4vh, 2.5rem) var(--sc-gutter) calc(var(--dial-h) + 0.75rem); gap: 1.25rem; }
.console { align-self: center; width: min(72rem, 100%); margin-inline: auto; padding: clamp(1.1rem, 2.5vw, 2rem); display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: center; }
.console h2 { margin: 0 0 0.9rem; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.4rem); line-height: 0.9; text-wrap: balance; }
.console__copy p { margin: 0 0 1rem; color: var(--ink-soft); max-width: 42ch; }
.lock {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.5rem 0.75rem; border-radius: var(--r); border: 1px solid var(--mag);
  color: var(--mag);
}
.lock i { width: 9px; height: 9px; transform: rotate(45deg); background: currentColor; }
.lock[data-locked="true"] { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-c); }
.console__ctrl { display: grid; gap: 0.8rem; min-width: 0; }
#scope { width: 100%; height: clamp(150px, 26svh, 230px); border: 1px solid var(--hud-c); border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(0,240,255,0.06) 0 1px, transparent 1px 10%), repeating-linear-gradient(0deg, rgba(0,240,255,0.06) 0 1px, transparent 1px 25%); }
.tuner { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: center; }
.step { width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; background: transparent; color: var(--ink); border: 1px solid var(--hud-c); border-radius: var(--r); font-family: var(--f-mono); font-size: 1.1rem; transition: border-color 140ms, transform 120ms; }
.step:hover { border-color: var(--cyan); }
.step:active { transform: scale(0.95); }
.tuner__read { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--f-mono); font-size: 0.8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tuner__read b { color: var(--ink); font-weight: 500; }
.victory { margin: 0; min-height: 3em; font-size: 1.05rem; color: var(--ink); }
.victory[hidden] { display: block !important; visibility: hidden; }

.protocol {
  width: min(72rem, 100%); margin-inline: auto; padding: 1rem 1.1rem;
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem 2rem; align-items: center;
  border: 1px solid var(--hud-c); border-radius: var(--r);
  font-size: 0.82rem;
}
.protocol__id { display: flex; align-items: center; gap: 0.8rem; }
.protocol__id img { width: 92px; height: auto; }
.protocol__id b { font-family: var(--f-mono); font-weight: 500; letter-spacing: 0.14em; font-size: 0.72rem; text-transform: uppercase; }
.ledger { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; color: var(--ink-soft); list-style: none; margin: 0; padding: 0; }
.ledger a { color: var(--ink); text-decoration-color: var(--hud-m); }
.ledger a:hover { text-decoration-color: var(--mag); }
.protocol .btn--ghost { padding: 0.55rem 0.8rem; font-size: 0.68rem; }
.protocol .btn--ghost[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }

/* ===================================================== responsive ======== */
@media (max-width: 900px) {
  :root { --dial-h: 62px; }
  .dial { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; }
  .dial__id img { display: none; }
  .dial__stations button { font-size: 0; padding: 0.4rem 0.35rem; }     /* ticks only; readout names the station */
  .dial__stations button::before { height: 26px; }
  .dial__sound span { display: none; }

  /* Phone: the hero stops layering and stacks, so Kkiri never covers the copy */
  .hero { display: flex; flex-direction: column; justify-content: flex-start; gap: 0; padding-bottom: calc(var(--dial-h) + 1rem); }
  .hero__top { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .badge { font-size: 0.6rem; letter-spacing: 0.12em; padding: 0.35rem 0.55rem; }
  .hero__title { position: relative; top: auto; translate: none; padding: 0; margin-top: 1rem; width: 100%; }
  .hero__title .t { font-size: clamp(4.6rem, 30vw, 9rem); }
  .hero__title .t--hangul { align-self: flex-end; font-size: clamp(2.6rem, 14vw, 5rem); margin-top: -0.1em; }
  .hero__slot { position: relative; left: auto; bottom: auto; translate: none; align-self: center; width: 86vw; height: 44svh; margin-top: -9svh; }
  .hero__foot { max-width: none; margin-top: 0.5rem; }
  .pills li { font-size: 0.64rem; padding: 0.35rem 0.5rem; }

  .dossier__grid { grid-template-columns: 1fr; }
  .idcard { position: relative; top: 0; }

  .shift__stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; gap: 0.6rem; padding-top: 1rem; }
  .wall { height: 100%; min-height: 0; order: 0; }
  .wall__slot { left: 46px; }
  .ruler { width: 44px; }
  .ruler span { right: 16px; font-size: 0.6rem; }
  .mark, .floor { left: 44px; }
  .shift__panel { gap: 0.6rem; }
  .shift__panel h2, .shift__panel .telemetry, .shift__quote { display: none; }
  .readout .n { font-size: 3rem; }
  .shift__compact { display: flex !important; }

  .card { min-height: min(64svh, 32rem); }

  .console { grid-template-columns: 1fr; gap: 0.8rem; }
  .console h2 { font-size: 2.6rem; margin-bottom: 0.4rem; }
  .console__copy p { font-size: 0.92rem; margin-bottom: 0.6rem; }
  .protocol { grid-template-columns: 1fr auto; font-size: 0.74rem; padding: 0.75rem; gap: 0.6rem 1rem; }
  .protocol .ledger { grid-column: 1 / -1; order: 3; }
  .purge__stage { gap: 0.75rem; }
}
.shift__compact { display: none; justify-content: space-between; gap: 1rem; font-family: var(--f-mono); font-size: 0.74rem; color: var(--ink-soft); }
.shift__compact b { color: var(--ink); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .prism, .scanlines::after { animation: none; }
  .boot { transition-duration: 160ms, 120ms; }
  .burst.go svg { animation-duration: 1ms; }
  .is-pulsing .ring { animation: none; }
}