/* =============================================================
   OMS · CABINET MODE
   Arcade music-game / broadcast aesthetic.
   - True black surface, signal cyan / signal red / lime live
   - JetBrains Mono + Big Shoulders Display + Noto Sans JP / SC
   - Hard edges, scanline overlay, hazard stripes, big numerics
   - Playfield rendered as the page's centerpiece, not a side panel
   ============================================================= */

:root {
  /* surfaces */
  --bg:        #050608;
  --bg-2:      #0a0c12;     /* panel */
  --bg-3:      #11141d;     /* sub panel */
  --bg-4:      #181c28;     /* raised */
  --rule:      #1d2233;
  --rule-2:    #2a304a;
  --rule-3:    #3a4366;

  /* signal palette — used sparingly */
  --cyan:   #00d9ff;
  --cyan-2: #006a85;
  --hot:    #ff2e46;
  --hot-2:  #7a0d18;
  --lime:   #c8ff39;
  --amber:  #ffb13a;
  --blue:   #2e6bff;        /* iidx blue key */

  /* text */
  --ink:    #f3f1ea;
  --ink-2:  #b8bccc;
  --ink-3:  #767a8e;
  --ink-4:  #44485a;
  --ink-5:  #2a2e3c;

  /* type */
  --mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --display: "Big Shoulders Display", "Saira", "Bahnschrift", "Arial Narrow", sans-serif;
  --jp:      "Noto Sans JP", "Yu Gothic", "Hiragino Sans", sans-serif;
  --cn:      "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* sizing */
  --max:    1480px;
  --gutter: 28px;
}

html[data-accent="red"]    { --cyan: #ff2e46; --cyan-2: #5e0d17; }
html[data-accent="yellow"] { --cyan: #ffd633; --cyan-2: #6b5610; }
html[data-accent="green"]  { --cyan: #39e58c; --cyan-2: #0e5a2e; }
/* blue is the default — see :root */

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum", "calt";
  overflow-x: hidden;
  position: relative;
}

/* ambient scanline overlay — very subtle */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
/* subtle vignette */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 50%, transparent 50%, rgba(0,0,0,0.55) 100%);
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

/* HTML `hidden` attribute must win against component display rules
   (.rel__loading uses flex, .rel__none uses grid, etc.) */
[hidden] { display: none !important; }

::selection { background: var(--cyan); color: var(--bg); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--rule-2); border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--cyan-2); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }

/* hazard stripes utility — diagonal yellow/black tape feel, but using cyan/black */
.hazard {
  background-image: repeating-linear-gradient(
    45deg,
    var(--cyan) 0 12px,
    transparent 12px 22px
  );
  height: 8px;
  opacity: 0.85;
}
.hazard--red { background-image: repeating-linear-gradient(45deg, var(--hot) 0 12px, transparent 12px 22px); }

/* status LED dot */
.led {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--ink-3);
  vertical-align: middle;
  box-shadow: 0 0 6px transparent;
}
.led--on   { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.led--live { background: var(--hot);  box-shadow: 0 0 8px var(--hot); animation: led-pulse 1.1s steps(2) infinite; }
.led--dim  { background: var(--ink-4); }
.led--amber { background: var(--amber); box-shadow: 0 0 8px var(--amber); }

@keyframes led-pulse { 0%,49% { opacity: 1; } 50%,100% { opacity: 0.35; } }

/* =================================================================
   TOP CABINET STATUS BAR
   ================================================================= */
.cab-bar {
  border-bottom: 1px solid var(--rule);
  background: #000;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cab-bar__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* wrap when items don't fit instead of clipping mid-character */
  min-height: 32px;
  gap: 4px 18px;
  padding: 4px 0;
}
.cab-bar__row > * { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cab-bar__rule { flex: 1 1 auto; height: 1px; background: var(--rule); flex-shrink: 1; min-width: 18px; }
.cab-bar strong { color: var(--ink); font-weight: 600; }
.cab-bar .led { margin-right: 2px; }

/* =================================================================
   PRIMARY NAV — marquee header
   ================================================================= */
.marquee {
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  padding: 18px 0;
}
.marquee__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  position: relative;
}
.brand__mark {
  font-family: var(--display);
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.brand__mark em {
  font-style: normal;
  color: var(--cyan);
}
.brand__bms {
  display: inline-block;
  margin-left: 1px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  vertical-align: baseline;
  transform: translateY(-8px);
}
.brand__jp {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-left: 2px;
}
.brand__sub {
  position: absolute;
  bottom: -14px;
  left: 0;
  white-space: nowrap;   /* stay one line — the absolute box would otherwise wrap to the narrow "OMS" width and overlap the mark */
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule-2);
}
.nav li { border-right: 1px solid var(--rule-2); }
.nav li:last-child { border-right: 0; }
.nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: background 80ms linear, color 80ms linear;
}
.nav a::before {
  content: attr(data-n);
  color: var(--ink-4);
  font-size: 9px;
}
.nav a:hover { background: var(--bg-3); color: var(--ink); }
.nav a[aria-current="page"] {
  background: var(--cyan);
  color: #000;
}
.nav a[aria-current="page"]::before { color: rgba(0,0,0,0.55); }

/* =================================================================
   HERO — full-bleed playfield + broadcast overlays
   ================================================================= */
.hero {
  position: relative;
  padding: 0;
  background: #000;
  border-bottom: 1px solid var(--rule);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 0;
  min-height: 720px;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

/* LEFT — marquee / title block */
.hero__left {
  padding: 36px 32px;
  border-right: 1px solid var(--rule);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,217,255,0.025) 100%),
    #000;
}
.hero__no {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__no .led { box-shadow: 0 0 6px var(--lime); }

.hero__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(64px, 10vw, 156px);
  line-height: 0.84;
  letter-spacing: -0.045em;
  margin: 28px 0 0;
  color: var(--ink);
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  color: var(--cyan);
  text-shadow: 0 0 24px rgba(0, 217, 255, 0.35);
}
.hero__title .slash {
  display: inline-block;
  width: 0.45em;
  height: 0.04em;
  background: var(--hot);
  vertical-align: 0.18em;
  margin: 0 0.12em;
  transform: skewX(-30deg);
}

.hero__kana {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--ink-3);
  margin-top: 18px;
}

.hero__lede {
  font-family: var(--cn);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--ink-2);
  margin: 24px 0 0;
  max-width: 32ch;
  text-wrap: pretty;
}
.hero__lede strong { color: var(--ink); font-weight: 600; }

.hero__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* MIDDLE — playfield window */
.hero__mid {
  position: relative;
  border-right: 1px solid var(--rule);
  overflow: hidden;
  background: #000;
}

/* RIGHT — broadcast scoreboard / now-playing */
.hero__right {
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,46,70,0.02) 100%),
    #000;
  padding: 0;
}

.score-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.score-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.score-panel__head .live { color: var(--hot); display: inline-flex; align-items: center; gap: 6px; }

.now-playing {
  padding: 22px 20px;
  border-bottom: 1px solid var(--rule);
}
.now-playing__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 10px;
}
.now-playing__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.now-playing__artist {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-top: 8px;
}

.now-playing__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 18px;
  border: 1px solid var(--rule);
}
.now-playing__cell {
  padding: 10px 12px;
  border-right: 1px solid var(--rule);
}
.now-playing__cell:last-child { border-right: 0; }
.now-playing__k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.now-playing__v {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.now-playing__v.is-hot { color: var(--hot); }

/* density spark inside score panel */
.spark {
  padding: 22px 20px;
  border-bottom: 1px solid var(--rule);
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.spark__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.spark__title {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cyan);
}
.spark__peak {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
}
.spark__peak strong { color: var(--ink); font-weight: 600; }
.spark__chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  flex: 1;
  min-height: 120px;
  border-bottom: 1px solid var(--rule);
}
.spark__chart i {
  flex: 1;
  background: var(--ink-4);
  min-height: 2px;
  transition: background 60ms linear;
}
.spark__chart i.is-here {
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}
.spark__axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  margin-top: 6px;
}

/* lane usage compact */
.lanes-mini {
  padding: 18px 20px 22px;
}
.lanes-mini__title {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 12px;
}
.lanes-mini__row {
  display: grid;
  grid-template-columns: 48px 1fr 44px;
  gap: 10px;
  align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  margin-bottom: 6px;
}
.lanes-mini__name { color: var(--ink-2); letter-spacing: 0.1em; text-transform: uppercase; }
.lanes-mini__bar { height: 6px; background: var(--bg-3); position: relative; }
.lanes-mini__bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink-2); }
.lanes-mini__bar.is-scratch i { background: var(--hot); box-shadow: 0 0 6px rgba(255,46,70,0.4); }
.lanes-mini__bar.is-blue i { background: var(--blue); }
.lanes-mini__pct { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* =================================================================
   PLAYFIELD (inside hero__mid, full bleed)
   ================================================================= */
.field-window {
  position: absolute;
  inset: 0;
  background: #000;
  font-family: var(--mono);
  color: var(--ink);
  display: grid;
  grid-template-rows: 34px 1fr 60px 50px;
}

.field-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(0,217,255,0.04), transparent);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-2);
  overflow: hidden;
  white-space: nowrap;
}

/* slate-style caption: chart metadata on a single line above the playfield */
.field-top .slate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  font-family: var(--mono);
  color: var(--ink-2);
}

/* in-field controls (Hi-Speed + Live/Pause) parked in the slate row's right gap */
.field-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.field-ctrl__seg {
  display: flex;
  border: 1px solid var(--rule-2);
}
.field-ctrl__seg button {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule-2);
  height: 22px;
  padding: 0 9px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 80ms linear, color 80ms linear;
}
.field-ctrl__seg button:last-child { border-right: 0; }
.field-ctrl__seg button:hover { background: var(--bg-3); color: var(--ink); }
.field-ctrl__seg button.is-active { background: var(--cyan); color: #000; }
.field-top .slate strong {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 11.5px;
}
.field-top .slate .slate__title-link {
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-4);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.field-top .slate .slate__title-link:hover strong { color: var(--cyan); }
.field-top .slate .slate__title-link:hover { border-bottom-color: var(--cyan); }
.field-top .slate .slate__title-link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.field-top .slate i {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--cyan);
  flex-shrink: 0;
  margin: 0 2px;
}

/* difficulty name badge inside the slate */
.field-top .slate .slate__diff {
  color: var(--hot);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.field-top .slate .slate__sep {
  color: var(--ink-4);
  margin: 0 2px;
}

.field {
  position: relative;
  display: grid;
  grid-template-columns: 1.75fr repeat(7, 1fr);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%),
    #000;
}

/* horizontal beat grid lines (4 per measure illusion) */
.field::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 24px,
    rgba(255, 255, 255, 0.035) 24px 25px
  );
  pointer-events: none;
}
.field::after {
  /* every 4th line is brighter (measure line) */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 100px,
    rgba(0, 217, 255, 0.06) 100px 101px
  );
  pointer-events: none;
}

.lane {
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,0.045);
}
.lane:last-child { border-right: 0; }
.lane--scratch {
  background: linear-gradient(180deg, rgba(255,46,70,0.04), transparent 50%);
  border-right: 1px solid rgba(255,46,70,0.32);
}
.lane--white { background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 50%); }
.lane--blue  { background: linear-gradient(180deg, rgba(46,107,255,0.05), transparent 50%); }

/* note */
.note {
  position: absolute;
  left: 3px; right: 3px;
  height: 10px;
  border-radius: 0;
  z-index: 2;
}
.note--ln {
  background: transparent !important;
  border: 1px solid currentColor;
  box-shadow: inset 0 0 12px currentColor !important;
}
.lane--white .note {
  background: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 6px rgba(255,255,255,0.6);
}
.lane--blue .note {
  background: var(--blue);
  color: var(--blue);
  box-shadow: 0 0 8px rgba(46,107,255,0.65);
}
.lane--scratch .note {
  background: linear-gradient(90deg, #ff5560, var(--hot) 50%, #ff5560);
  color: var(--hot);
  height: 13px;
  box-shadow: 0 0 10px rgba(255,46,70,0.75);
}

/* judgment line */
.judge {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan), 0 0 24px rgba(0,217,255,0.5);
  z-index: 4;
}
.judge::before, .judge::after {
  content: "";
  position: absolute;
  width: 20px; height: 8px;
  bottom: 0;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}
.judge::before { left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30% 50%); }
.judge::after  { right: 0; clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); }

/* HUD strip */
.field-hud {
  display: grid;
  grid-template-columns: 1.75fr 1.4fr 4fr;
  align-items: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(0,217,255,0.03), transparent);
  padding: 0 14px;
}
.field-hud__cell {
  display: grid;
  gap: 2px;
  padding: 0 10px;
  border-right: 1px solid var(--rule);
  height: 100%;
  align-content: center;
}
.field-hud__cell:last-child { border-right: 0; }
.field-hud .k {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field-hud .v {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.field-hud .v.combo { color: var(--cyan); text-shadow: 0 0 12px rgba(0,217,255,0.4); }

/* GROOVE GAUGE — beatmania-IIDX-style segmented LED bar + big % readout */
.field-hud__cell--gauge { padding-right: 4px; }
.ggauge {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
.ggauge__bar {
  position: relative;
  flex: 1 1 auto;
  height: 18px;
  background: #0c0f16;
  border: 1px solid var(--cyan-2);      /* frame follows the signal accent (dark variant) */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.4);
  overflow: hidden;
}
.ggauge__bar i {
  position: absolute;
  left: 1px; top: 1px; bottom: 1px;
  width: 72%;
  /* fill colour syncs with the tweaks signal accent (--cyan = current accent) */
  background: linear-gradient(180deg, var(--cyan) 0%, var(--cyan-2) 100%);
  box-shadow: 0 0 10px var(--cyan);
  transition: width 120ms linear;
}
/* notch the fill into discrete LED segments */
.ggauge__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(0,0,0,0.88) 7px 9px);
  pointer-events: none;
}
.ggauge__num {
  flex: 0 0 auto;
  font-family: var(--display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cyan);
  text-shadow: 0 0 12px var(--cyan);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  min-width: 3.2ch;
  justify-content: flex-end;
}
.ggauge__num small {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-3);
  margin-left: 1px;
}

/* control deck */
.deck {
  display: grid;
  grid-template-columns: 1.75fr repeat(7, 1fr);
  align-items: center;
  padding: 8px 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.02));
  border-top: 1px solid var(--rule-2);
}
.deck > * {
  height: 30px;
  margin: 0 4px;
  border: 1px solid var(--rule-2);
  background: rgba(255,255,255,0.03);
  position: relative;
  transition: background 60ms linear, box-shadow 60ms linear, border-color 60ms linear;
}
.deck-key--white { border-color: rgba(255,255,255,0.25); }
.deck-key--blue  { border-color: rgba(46,107,255,0.55); }
.deck-tt {
  border-radius: 999px;
  border-color: rgba(255,46,70,0.55);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 5px, transparent 5px 10px);
}
.deck-key.is-hit { background: #ffffff; box-shadow: 0 0 14px rgba(255,255,255,0.6); }
.deck-key--blue.is-hit { background: var(--blue); box-shadow: 0 0 14px var(--blue); border-color: var(--blue); }
.deck-tt.is-hit { background: var(--hot); box-shadow: 0 0 14px var(--hot); }

/* hit flash sweep */
.field-window .flash {
  position: absolute;
  left: 0; right: 0;
  bottom: 110px;
  height: 30px;
  background: linear-gradient(180deg, transparent, rgba(0,217,255,0.18) 80%, rgba(0,217,255,0.4));
  pointer-events: none;
  opacity: 0;
}

/* =================================================================
   VITAL STATS BAND — tiles with hazard separator
   ================================================================= */
.vitals {
  border-bottom: 1px solid var(--rule);
  background: #000;
}
.vitals__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-left: 1px solid var(--rule);
}
.vitals__cell {
  padding: 22px 20px;
  border-right: 1px solid var(--rule);
  display: grid;
  align-content: space-between;
  gap: 14px;
  min-height: 130px;
  position: relative;
}
.vitals__cell::after {
  content: attr(data-corner);
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-5);
}
.vitals__k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vitals__v {
  font-family: var(--display);
  font-weight: 800;
  font-size: 42px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.vitals__v small {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-left: 6px;
  text-transform: uppercase;
}
.vitals__cell.is-hot .vitals__v { color: var(--hot); }
.vitals__cell.is-cyan .vitals__v { color: var(--cyan); }

/* =================================================================
   SECTION SCAFFOLD
   ================================================================= */
.section {
  padding: 64px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.section__head {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gutter);
  align-items: end;
  margin-bottom: 40px;
}
.section__no {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.section__no strong { color: var(--cyan); font-weight: 600; }
.section__title {
  margin: 14px 0 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(48px, 6.6vw, 96px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.section__title em { font-style: normal; color: var(--cyan); }
.section__lede {
  font-family: var(--cn);
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-2);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}

/* =================================================================
   CAPABILITIES — spec-sheet rows with status LEDs
   ================================================================= */
.cap {
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
}
.cap__row {
  display: grid;
  grid-template-columns: 70px 240px 1fr 140px;
  gap: var(--gutter);
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.cap__row:last-child { border-bottom: 0; }
.cap__row:hover { background: rgba(0,217,255,0.02); }
.cap__no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.cap__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cap__name small {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
.cap__body {
  font-family: var(--cn);
  font-size: 14.5px;
  line-height: 1.74;
  color: var(--ink-2);
  text-wrap: pretty;
}
.cap__body code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--bg-3);
  padding: 2px 7px;
  color: var(--cyan);
  border: 1px solid var(--rule-2);
}
/* clear-lamp chips inside the gauge capability — IIDX clear-lamp palette */
.cap__body .lamp {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
.cap__body .lamp--ac   { color: #b07bff; }                                      /* ASSIST  — purple */
.cap__body .lamp--ec   { color: #3ddc84; }                                      /* EASY    — green  */
.cap__body .lamp--nc   { color: #4d84ff; }                                      /* NORMAL  — blue   */
.cap__body .lamp--hc   { color: #ffffff; text-shadow: 0 0 6px rgba(255,255,255,0.9), 0 0 13px rgba(255,255,255,0.5); }  /* HARD — prominent white */
.cap__body .lamp--exhc { color: #ffcf4d; text-shadow: 0 0 7px rgba(255,207,77,0.6); }  /* EX-HARD — gold */
.cap__body .lamp--fc {                                                          /* FULL COMBO — animated rainbow */
  background: linear-gradient(90deg, #ff5560, #ffcf4d, #3ddc84, #00d9ff, #4d84ff, #b07bff, #ff5560);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: lampRainbow 3s linear infinite;
}
@keyframes lampRainbow { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .cap__body .lamp--fc { animation: none; }
}
.cap__status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}
.cap__status.is-live { color: var(--lime); }
.cap__status.is-hot  { color: var(--hot); }

/* =================================================================
   TIMING WINDOWS — judge type/difficulty selectors + window table
   ================================================================= */
.judge-table__controls {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.judge-sel {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 180px;
  flex: 0 1 240px;
}
.judge-sel__k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.judge-sel select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 12px 36px 12px 14px;
  background-color: var(--bg-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%2300d9ff' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--rule-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 100ms linear, box-shadow 100ms linear;
}
.judge-sel select:hover { border-color: var(--rule-3); }
.judge-sel select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.judge-sel select option { background: var(--bg-2); color: var(--ink); }

/* table-style window readout */
.judge-grid__wrap { border: 1px solid var(--rule-2); overflow-x: auto; }
.judge-grid { min-width: 560px; }
.judge-grid__head,
.judge-grid__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 1.5fr;
}
.judge-grid__head {
  background: var(--bg-3);
  border-bottom: 1px solid var(--rule);
}
.judge-grid__head span {
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-right: 1px solid var(--rule);
}
.judge-grid__head span:last-child { border-right: 0; }
.judge-grid__row span {
  padding: 16px 14px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border-right: 1px solid var(--rule);
  display: flex;
  align-items: center;
}
.judge-grid__row span:last-child { border-right: 0; }
.judge-grid__label {
  font-family: var(--display) !important;
  font-weight: 800;
  font-size: 18px !important;
  letter-spacing: -0.01em !important;
  color: var(--cyan) !important;
  text-transform: none;
}
.judge-grid__row span[data-jc="0"] { color: var(--cyan); }
.judge-table__note {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-4);
}

/* visual bar chart of the selected windows (centred on 0, scaled to widest) */
.timing-viz {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}
.timing-viz__row {
  display: grid;
  grid-template-columns: 64px 1fr 120px;
  gap: 18px;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
}
.timing-viz__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.timing-viz__bar {
  position: relative;
  height: 20px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
}
.timing-viz__bar i {
  position: absolute;
  top: 0; bottom: 0;
  opacity: 0.75;
}
.timing-viz__center {
  position: absolute;
  top: -3px; bottom: -3px;
  left: 50%;
  width: 1px;
  background: var(--ink);
}
.timing-viz__val {
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.timing-viz__scale {
  display: grid;
  grid-template-columns: 64px 1fr 120px;
  gap: 18px;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ink-4);
}
.timing-viz__scale .ticks { display: flex; justify-content: space-between; }
.timing-viz__scale .u { text-align: right; color: var(--ink-3); }

/* =================================================================
   DOWNLOAD BLOCK — cabinet "INSERT" feel
   ================================================================= */
.dl {
  padding: 64px 0;
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,217,255,0.025) 100%),
    #000;
}
.dl__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gutter);
  align-items: start;
}
.dl__head { display: grid; gap: 14px; }
.dl__no {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dl__no strong { color: var(--cyan); }
.dl__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(68px, 9.4vw, 144px);
  line-height: 0.84;
  letter-spacing: -0.05em;
  color: var(--ink);
  margin: 0;
}
.dl__title em { font-style: normal; color: var(--cyan); text-shadow: 0 0 22px rgba(0,217,255,0.35); }

.dl__lede {
  font-family: var(--cn);
  font-size: 15px;
  line-height: 1.74;
  color: var(--ink-2);
  margin: 14px 0 0;
  max-width: 48ch;
}

.dl__meta {
  border: 1px solid var(--rule-2);
  background: var(--bg-2);
}
.dl__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
}
.dl__row:last-child { border-bottom: 0; }
.dl__k {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dl__v {
  color: var(--ink);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.dl__v small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* download-method tiles — GitHub / QQ group, shared across rel states */
.dl-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.dl-method {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 20px;
  border: 1px solid var(--rule-2);
  background: var(--bg-2);
  text-decoration: none;
  color: var(--ink);
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.dl-method::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cyan);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.dl-method:hover {
  border-color: var(--cyan);
  background: var(--bg-3);
  transform: translateY(-1px);
}
.dl-method:hover::before { opacity: 1; }
.dl-method:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.dl-method__icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  color: var(--cyan);
}
.dl-method__icon svg { width: 28px; height: 28px; display: block; }
.dl-method__txt { display: grid; gap: 3px; min-width: 0; }
.dl-method__txt strong {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.dl-method__txt small {
  font-family: var(--cn);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.dl-method__arr {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink-4);
  transition: color 0.15s ease, transform 0.15s ease;
}
.dl-method:hover .dl-method__arr { color: var(--cyan); transform: translate(2px, -2px); }
@media (max-width: 640px) {
  .dl-methods { grid-template-columns: 1fr; }
}

/* =================================================================
   ROADMAP — phase ladder
   ================================================================= */
.phases {
  border-top: 1px solid var(--rule-2);
}
.phase {
  display: grid;
  grid-template-columns: 100px 1.4fr 1fr 5fr 130px;
  gap: var(--gutter);
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.phase__no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.phase__no strong { color: var(--cyan); font-weight: 600; }
.phase__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.phase__name small {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
.phase__id {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.phase__body {
  font-family: var(--cn);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: pretty;
}
.phase__status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.phase__status.is-now { color: var(--lime); }
.phase.is-future .phase__name,
.phase.is-future .phase__body { color: var(--ink-3); }
.phase.is-future .phase__name small,
.phase.is-future .phase__id { color: var(--ink-4); }

/* =================================================================
   BUTTONS
   ================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 50px;
  padding: 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--cyan);
  background: var(--cyan);
  color: #000;
  cursor: pointer;
  transition: background 100ms linear, color 100ms linear, border-color 100ms linear, box-shadow 100ms linear;
  position: relative;
}
.btn:hover {
  background: transparent;
  color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 18px rgba(0,217,255,0.4);
}
.btn .arr { font-weight: 400; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-3);
}
.btn--ghost:hover { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 18px rgba(0,217,255,0.25); }

.btn--soft {
  background: transparent;
  color: var(--ink-3);
  border-color: var(--rule-2);
  cursor: default;
  letter-spacing: 0.18em;
}
.btn--soft:hover { background: transparent; color: var(--ink-3); border-color: var(--rule-2); box-shadow: none; }
.btn--soft .dot {
  width: 7px; height: 7px;
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber);
}

/* =================================================================
   FOOTER
   ================================================================= */
.foot {
  padding: 32px 0 48px;
  background: #000;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.foot__row {
  display: grid;
  grid-template-columns: 2fr 4fr 2fr;
  gap: var(--gutter);
  align-items: end;
}
.foot__row a { color: var(--ink-2); }
.foot__row a:hover { color: var(--cyan); }
.foot__brand {
  font-family: var(--display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.foot__sig {
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}
.foot__sig div { line-height: 1.8; }
.foot__sig .eof { color: var(--hot); margin-top: 14px; }

/* =================================================================
   TWEAKS PANEL
   ================================================================= */
.tweaks {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  width: 268px;
  border: 1px solid var(--cyan);
  background: rgba(5,6,8,0.95);
  backdrop-filter: blur(10px);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  display: none;
  box-shadow: 0 0 0 1px rgba(0,217,255,0.15), 0 12px 40px rgba(0,0,0,0.8), 0 0 30px rgba(0,217,255,0.25);
}
.tweaks.is-open { display: block; }
.tweaks__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(0,217,255,0.15), transparent);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 10px;
}
.tweaks__head .led { box-shadow: 0 0 6px var(--cyan); background: var(--cyan); }
.tweaks__close {
  background: none;
  border: 0;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
.tweaks__close:hover { color: var(--hot); }
.tweaks__group { padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.tweaks__group:last-child { border-bottom: 0; }
.tweaks__label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.tweaks__seg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--rule-2);
}
.tweaks__seg.is-2col { grid-template-columns: 1fr 1fr; }
.tweaks__seg.is-4col { grid-template-columns: repeat(4, 1fr); }
.tweaks__seg.is-4col button { padding: 10px 0; letter-spacing: 0.08em; }
.tweaks__seg button .sw {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 6px currentColor;
}
.tweaks__seg button {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule-2);
  padding: 8px 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 80ms linear, color 80ms linear;
}
.tweaks__seg button:last-child { border-right: 0; }
.tweaks__seg button:hover { background: var(--bg-3); color: var(--ink); }
.tweaks__seg button.is-active { background: var(--cyan); color: #000; }

.tweaks-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 75;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--cyan);
  background: rgba(5,6,8,0.9);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 10px;
  box-shadow: 0 0 18px rgba(0,217,255,0.25);
}
.tweaks-fab.is-visible { display: inline-flex; }
.tweaks-fab .led { box-shadow: 0 0 8px var(--cyan); background: var(--cyan); }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 1180px) {
  .hero__inner { grid-template-columns: 1fr 1.6fr; min-height: 640px; }
  .cap__row { grid-template-columns: 50px 200px 1fr 120px; }
}

@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; min-height: auto; }
  .hero__left { border-right: 0; border-bottom: 1px solid var(--rule); }
  .hero__mid { min-height: 540px; position: relative; border-right: 0; border-bottom: 1px solid var(--rule); }
  .nav a { padding: 10px 12px; }
  .cab-bar__rule { display: none; }   /* flexible divider is noise once the bar wraps */
  .section__head { grid-template-columns: 1fr; }
  .cap__row { grid-template-columns: 40px 1fr; gap: 12px; padding: 18px 0; }
  .cap__row > .cap__body, .cap__row > .cap__status { grid-column: 1 / -1; padding-left: 52px; justify-content: flex-start; }
  .dl__grid { grid-template-columns: 1fr; }
  .phase { grid-template-columns: 80px 1fr; }
  .phase__id, .phase__body, .phase__status { grid-column: 1 / -1; padding-left: 92px; }
  .phase__status { justify-content: flex-start; }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }
  /* compact mobile header: brand (stacked) on row 1, lang-switch + nav on row 2.
     Note: base .marquee__right is declared LATER in the file, so these mobile
     overrides use a higher-specificity selector to win regardless of order. */
  .marquee { padding: 12px 0; }
  .marquee__row { flex-wrap: wrap; row-gap: 12px; align-items: center; }
  .brand { flex: 1 1 100%; flex-direction: column; align-items: flex-start; gap: 3px; }
  .brand__sub { position: static; }   /* stop the absolute hang that left a gap below the brand */
  /* lang-switch + nav share one tight row directly under the brand */
  .marquee .marquee__right { width: 100%; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 10px; }
  .marquee .marquee__right > nav { flex: 1 1 auto; min-width: 0; }   /* the <nav> wrapper shrinks so its <ul> can scroll */
  .lang-switch { flex: 0 0 auto; }
  /* keep nav usable on mobile: compact, horizontally scrollable, no index numbers */
  .nav { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 9px 11px; letter-spacing: 0.1em; }
  .nav a::before { display: none; }
  .foot__row { grid-template-columns: 1fr; gap: 18px; }
  .foot__sig { text-align: left; }
  .hero__mid { min-height: 440px; }
  .timing__row { grid-template-columns: 70px 1fr 70px; gap: 12px; font-size: 11px; }
  .timing__scale { grid-template-columns: 70px 1fr 70px; gap: 12px; }
  /* narrow viewports: slate wraps, in-field controls drop to their own line.
     The field-top grid row must grow (it's locked to 34px by default). */
  .field-window { grid-template-rows: auto 1fr 60px 50px; }
  .field-top { white-space: normal; height: auto; padding: 8px 12px; flex-wrap: wrap; row-gap: 8px; }
  .field-top .slate { flex-wrap: wrap; row-gap: 4px; }
  .field-ctrl { flex-wrap: wrap; }
}

/* =================================================================
   LANGUAGE SWITCHER (sits in marquee, before nav)
   ================================================================= */
.marquee__right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--rule-2);
}
.lang-switch button {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule-2);
  padding: 0 12px;
  height: 38px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 80ms linear, color 80ms linear;
  min-width: 38px;
}
.lang-switch button:last-child { border-right: 0; }
.lang-switch button:hover { background: var(--bg-3); color: var(--ink); }
.lang-switch button.is-active {
  background: var(--cyan);
  color: #000;
}

/* =================================================================
   CJK letter-spacing & casing overrides
   - Wide tracking + uppercase looks ugly with Chinese/Japanese.
   - Only apply to translated text nodes so English UI keeps its rhythm.
   ================================================================= */
html[data-lang="zh"] [data-i18n],
html[data-lang="ja"] [data-i18n] {
  letter-spacing: 0.02em;
  text-transform: none;
}
/* keep display titles tight (they already have negative tracking) */
html[data-lang="zh"] .hero__title[data-i18n],
html[data-lang="ja"] .hero__title[data-i18n],
html[data-lang="zh"] .section__title[data-i18n],
html[data-lang="ja"] .section__title[data-i18n],
html[data-lang="zh"] .dl__title[data-i18n],
html[data-lang="ja"] .dl__title[data-i18n] {
  letter-spacing: -0.02em;
}
/* CJK hero title: full-width glyphs blow out the narrow left column at the
   Latin clamp max (156px) — at wide viewports "现代 BMS / 播放器。" wrapped to
   4 cramped, overlapping lines. Scale down + relax line-height for zh/ja so it
   sits as two clean lines across all widths. */
html[data-lang="zh"] .hero__title,
html[data-lang="ja"] .hero__title {
  font-size: clamp(44px, 4.6vw, 88px);
  line-height: 0.95;
}
/* paragraph text uses the prose-friendly CJK stack at body size */
html[data-lang="zh"] .hero__lede,
html[data-lang="ja"] .hero__lede,
html[data-lang="zh"] .section__lede,
html[data-lang="ja"] .section__lede,
html[data-lang="zh"] .cap__body,
html[data-lang="ja"] .cap__body,
html[data-lang="zh"] .phase__body,
html[data-lang="ja"] .phase__body,
html[data-lang="zh"] .dl__lede,
html[data-lang="ja"] .dl__lede {
  font-family: var(--cn);
  letter-spacing: 0;
}
html[data-lang="ja"] .hero__lede,
html[data-lang="ja"] .section__lede,
html[data-lang="ja"] .cap__body,
html[data-lang="ja"] .phase__body,
html[data-lang="ja"] .dl__lede {
  font-family: var(--jp);
}
/* hide the Japanese kana flair element in non-default langs is unnecessary —
   it's data-driven via i18n now */

@media (prefers-reduced-motion: reduce) {
  .led--live, .field-top .r::before { animation: none; }
}

/* =================================================================
   DOWNLOAD PAGE — release manifest + install steps
   ================================================================= */
.dl-hero {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 56px 0 60px;
  background:
    radial-gradient(ellipse at 78% 25%, rgba(0, 217, 255, 0.07), transparent 55%),
    #000;
}
.dl-hero__no {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dl-hero__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(60px, 9vw, 132px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  margin: 16px 0 0;
  color: var(--ink);
  text-wrap: balance;
}
.dl-hero__title em {
  font-style: normal;
  color: var(--cyan);
  text-shadow: 0 0 22px rgba(0, 217, 255, 0.35);
}
.dl-hero__kana {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--ink-3);
  margin-top: 14px;
}
.dl-hero__lede {
  font-family: var(--cn);
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--ink-2);
  margin: 22px 0 0;
  max-width: 62ch;
  text-wrap: pretty;
}
html[data-lang="en"] .dl-hero__lede { font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.01em; }
html[data-lang="ja"] .dl-hero__lede { font-family: var(--jp); }

/* ---- release manifest panel ---- */
.rel {
  margin-top: 40px;
  border: 1px solid var(--rule-2);
  background: var(--bg-2);
}
.rel__loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 36px 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rel__loading .led { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: led-pulse 1.1s steps(2) infinite; }

.rel__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  padding: 28px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-3);
  align-items: end;
}
.rel__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
}
.rel__tag {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  margin: 6px 0 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rel__tag em { font-style: normal; color: var(--cyan); }
.rel__title {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-top: 8px;
  max-width: 44ch;
}
.rel__title:empty { display: none; }
.rel__meta {
  display: grid;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}
.rel__meta-row { display: flex; justify-content: flex-end; gap: 12px; }
.rel__meta strong { color: var(--ink); font-weight: 600; letter-spacing: 0.04em; text-transform: none; }

.rel__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 20px 28px;
  border-bottom: 1px solid var(--rule);
}
.btn--primary {
  background: var(--cyan);
  color: #000;
  border-color: var(--cyan);
  font-weight: 700;
}
.btn--primary:hover {
  background: var(--cyan);
  color: #000;
  border-color: var(--cyan);
  box-shadow: 0 0 26px rgba(0, 217, 255, 0.4);
}
.btn--primary .arr { font-weight: 600; }
.btn--primary .file {
  display: inline-block;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
}

.rel__sec {
  padding: 22px 28px 26px;
  border-bottom: 1px solid var(--rule);
}
.rel__sec:last-child { border-bottom: 0; }
.rel__sec-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rel__sec-label::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
  order: 2;
}

.rel__asset-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
}
.rel-asset {
  display: grid;
  grid-template-columns: 30px 1fr 120px 90px 24px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: none;
  transition: background 80ms linear, color 80ms linear;
}
.rel-asset:last-child { border-bottom: 0; }
.rel-asset:hover { background: var(--bg-3); color: var(--ink); }
.rel-asset__no { color: var(--ink-4); font-size: 10px; letter-spacing: 0.18em; }
.rel-asset__name { color: var(--ink); letter-spacing: 0.02em; word-break: break-all; }
.rel-asset__size { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.06em; text-align: right; }
.rel-asset__dl { color: var(--ink-3); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.rel-asset__dl i { width: 6px; height: 6px; background: var(--ink-4); display: inline-block; }
.rel-asset__arr { color: var(--ink-4); text-align: right; font-size: 14px; }
.rel-asset:hover .rel-asset__arr { color: var(--cyan); }
.rel-asset:hover .rel-asset__dl i { background: var(--cyan); }
.rel-asset.is-primary { background: rgba(0, 217, 255, 0.045); }
.rel-asset.is-primary .rel-asset__name { color: var(--cyan); }
.rel-asset.is-primary .rel-asset__name::before {
  content: "★";
  color: var(--cyan);
  margin-right: 8px;
  font-size: 10px;
}

.rel__notes-body {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--bg-3);
  border: 1px solid var(--rule);
  padding: 18px 20px;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 460px;
  overflow: auto;
}
.rel__notes-empty {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  padding: 18px 20px;
  border: 1px dashed var(--rule);
  text-align: center;
}

/* ---- empty state ---- */
.rel__none {
  padding: 56px 28px 60px;
  display: grid;
  gap: 18px;
}
.rel__none-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rel__none-no .led { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.rel__none-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(48px, 8vw, 104px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}
.rel__none-title em {
  font-style: normal;
  color: var(--cyan);
  text-shadow: 0 0 22px rgba(0, 217, 255, 0.35);
}
.rel__none-lede {
  font-family: var(--cn);
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--ink-2);
  max-width: 58ch;
  margin: 0;
}
html[data-lang="en"] .rel__none-lede { font-family: var(--mono); font-size: 13.5px; }
html[data-lang="ja"] .rel__none-lede { font-family: var(--jp); }

.rel__none-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* ---- install steps ---- */
.install {
  margin-top: 60px;
  margin-bottom: 56px;
}
.install__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: end;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.install__no {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.install__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(48px, 6.5vw, 92px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  margin: 8px 0 0;
  color: var(--ink);
}
.install__title em { font-style: normal; color: var(--cyan); text-shadow: 0 0 22px rgba(0, 217, 255, 0.35); }
.install__lede {
  font-family: var(--cn);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 50ch;
  margin: 0;
}
html[data-lang="en"] .install__lede { font-family: var(--mono); font-size: 12.5px; }
html[data-lang="ja"] .install__lede { font-family: var(--jp); }

.install__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule-2);
  background: var(--bg-2);
}
.install__steps li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  padding: 24px 26px;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.install__steps li:last-child { border-bottom: 0; }
.install__step-no {
  font-family: var(--display);
  font-weight: 900;
  font-size: 56px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(0, 217, 255, 0.25);
}
.install__step-body strong {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}
.install__step-body p {
  font-family: var(--cn);
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--ink-2);
  margin: 0;
  max-width: 60ch;
}
html[data-lang="en"] .install__step-body p { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; }
html[data-lang="ja"] .install__step-body p { font-family: var(--jp); }
.install__step-body code {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--bg-3);
  border: 1px solid var(--rule);
  padding: 1px 6px;
  color: var(--cyan);
  letter-spacing: 0.02em;
  word-break: break-all;
}
.install__step-body a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dashed var(--cyan-2);
}
.install__step-body a:hover { border-bottom-color: var(--cyan); }

@media (max-width: 800px) {
  .rel__head { grid-template-columns: 1fr; align-items: start; }
  .rel__meta { text-align: left; }
  .rel__meta-row { justify-content: flex-start; }
  .rel-asset {
    grid-template-columns: 24px 1fr auto;
    grid-template-areas:
      "no name arr"
      ".  meta meta";
    row-gap: 6px;
  }
  .rel-asset__no { grid-area: no; }
  .rel-asset__name { grid-area: name; }
  .rel-asset__arr { grid-area: arr; }
  .rel-asset__size, .rel-asset__dl { grid-area: meta; display: inline-flex; }
  .rel-asset__size { margin-right: 14px; text-align: left; }
  .install__head { grid-template-columns: 1fr; }
  .install__steps li { grid-template-columns: 56px 1fr; gap: 14px; padding: 20px; }
  .install__step-no { font-size: 38px; }
}