@font-face {
  font-family: "Fusion Pixel";
  src: url("/assets/fonts/fusion-pixel-12px-proportional-latin.otf.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-02AF, U+2000-2FFF, U+3040-33FF, U+FF00-FFEF;
}
@font-face {
  font-family: "Fusion Pixel";
  src: url("/assets/fonts/fusion-pixel-12px-proportional-zh_hans.otf.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}
:root {
  color-scheme: dark;
  font-family: "Fusion Pixel", "PingFang SC", monospace;
  font-synthesis: none;
  --case-black: #0b0e0c;
  --case-dark: #222722;
  --case-mid: #333a32;
  --case-edge: #50594b;
  --screen-black: #030b06;
  --grid-green: #183b24;
  --phosphor-dim: #42734a;
  --phosphor-main: #89f58c;
  --phosphor-hot: #d0ffbc;
  --phosphor-muted: #83a57c;
  --screen-inset: inset 3px 3px 0 #000, inset -1px -1px 0 #334232;
  --key-shadow: inset 1px 1px 0 #69715e, inset -2px -3px 0 #141a13, 0 3px 0 #080b08;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--case-black); }
body { min-width: 320px; margin: 0; color: var(--phosphor-main); background: radial-gradient(ellipse at 50% 0, #252c23, transparent 75%), #0b0e0c; }
button, select, textarea, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--phosphor-hot); outline-offset: 4px; }
::selection { color: var(--screen-black); background: var(--phosphor-main); }

/* Bounded tracks keep long conversations inside the instrument. */
.instrument {
  position: relative;
  display: grid;
  grid-template-columns: minmax(352px, .56fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 232px;
  gap: 12px;
  width: min(1600px, calc(100% - 48px));
  height: clamp(600px, calc(100dvh - 48px), 1000px);
  margin: 24px auto;
  padding: 20px;
  border: 2px solid #59604f;
  outline: 1px solid #030603;
  background: linear-gradient(110deg, #333b30, #232922 60%);
  box-shadow: inset 2px 2px 0 #64705b, inset -3px -3px 0 #121911, 0 8px 0 #050805, 0 18px 40px #0007;
}
.instrument::before, .instrument::after {
  content: ""; position: absolute; left: 6px; width: 8px; height: 8px;
  background: linear-gradient(0deg, #11180f 0 3px, #68715d 3px 5px, #11180f 5px);
  box-shadow: 1px 1px 0 #748066; pointer-events: none;
}
.instrument::before { top: 6px; }
.instrument::after { bottom: 6px; }
.instrument::before { display: none; }
.frame-fullscreen {
  position: absolute; z-index: 8; top: 6px; left: 6px; width: 14px; height: 14px; padding: 0;
  display: grid; place-items: center; border: 1px solid #080b08; border-radius: 50%;
  background: #252b23; box-shadow: inset 1px 1px 0 #56604f, inset -1px -1px 0 #111610, 0 1px 0 #050805;
}
.frame-fullscreen span {
  width: 6px; height: 6px; border-radius: 50%; background: #172018;
  box-shadow: inset 1px 1px 0 #080c08, 0 0 0 1px #394436;
}
.frame-fullscreen[aria-pressed="true"] span {
  background: #a8ff96; box-shadow: 0 0 4px #72ff79, 0 0 8px #72ff7966, inset 1px 1px 0 #e1ffd1;
}
.module-frame {
  position: relative; min-width: 0; min-height: 0; padding: 16px;
  border: 1px solid #0c120c;
  background: linear-gradient(135deg, #2d342b, #20271f);
  box-shadow: inset 1px 1px 0 #485240, inset -1px -1px 0 #151c14;
}
.terminal-module { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; grid-column: 1; grid-row: 1; }
.scope-module { display: grid; grid-template-rows: 28px minmax(0, 1fr); gap: 12px; grid-column: 2; grid-row: 1 / 3; }
.module-tools { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; }
.vent-marks { width: 44px; height: 4px; background: repeating-linear-gradient(90deg, #11190f 0 4px, transparent 4px 8px); border-bottom: 1px solid #4a5341; }
.corner-control, .scope-control {
  display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 28px; padding: 4px;
  color: #afbe9f; border: 1px solid #121a10; border-radius: 0; background: #343d2f; box-shadow: var(--key-shadow);
}
svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.corner-control svg, .scope-control svg { width: 18px; height: 18px; }
.scope-control[aria-pressed="true"] { color: var(--phosphor-main); }

.conversation {
  display: flex; min-height: 0; flex-direction: column; gap: 20px;
  overflow: auto; overscroll-behavior: contain;
  scrollbar-color: #4a6840 #061008; scrollbar-width: thin; scrollbar-gutter: stable;
  padding: 20px 16px; border: 2px solid #10190d;
  background: radial-gradient(ellipse at 50% 100%, #10251544, transparent), var(--screen-black);
  box-shadow: var(--screen-inset);
}
.message {
  position: relative; flex-shrink: 0; max-width: 100%; margin: 0; padding: 0 0 0 20px;
  color: #b4d8a4; font-size: 24px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap;
}
.message::before { position: absolute; left: 0; color: #52794b; content: ">"; }
.message.system:last-of-type { color: var(--phosphor-main); }
.message.user { padding: 12px 12px 12px 28px; color: #d2ddba; border-left: 2px solid #597945; background: #192b1566; }
.message.user::before { left: 10px; content: "<"; color: #8f9f7b; }
.message.status { font-size: 12px; line-height: 2; color: var(--phosphor-muted); }
.message.status::before { content: "_"; animation: terminal-blink 1.4s steps(2, end) infinite; }
.conversation.is-empty { justify-content: center; }
.explore-form { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 12px; }
.explore-form textarea {
  width: 100%; min-width: 0; height: 100px; padding: 12px; resize: none;
  color: var(--phosphor-hot); border: 2px solid #111b0e; border-radius: 0;
  background: var(--screen-black); box-shadow: var(--screen-inset); font-size: 24px; line-height: 36px;
}
.explore-form textarea::placeholder { color: var(--phosphor-muted); opacity: 1; }
.explore-form textarea:focus { border-color: #698b52; }
.send-key {
  display: grid; align-self: stretch; place-items: center; padding: 0;
  color: #163016; border: 1px solid #131d10; border-radius: 0; background: #aacd8a;
  box-shadow: inset 2px 2px 0 #d3eeb6, inset -3px -4px 0 #597642, 0 3px 0 #0d140a;
}
.send-key:disabled { background: #6b8057; color: #314329; box-shadow: inset 1px 1px 0 #83986e, inset -2px -2px 0 #415332; }

.map-wrap {
  position: relative; min-height: 0; overflow: hidden; border: 6px solid #0c140a; outline: 1px solid #4a5a3e;
  background: var(--screen-black); box-shadow: 0 2px 0 #10180c;
}
#scope-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.scope-scanlines, .scope-vignette { position: absolute; inset: 0; pointer-events: none; }
.scope-scanlines { z-index: 1; opacity: .3; background: repeating-linear-gradient(0deg, #0008 0 1px, transparent 1px 4px); }
.scope-vignette { z-index: 2; box-shadow: inset 0 0 40px 12px #0009, inset 2px 2px 0 #22341a; }
.map-tooltip {
  position: absolute; z-index: 4; width: max-content; max-width: min(240px, calc(100% - 16px)); padding: 10px 12px;
  color: var(--phosphor-hot); border: 1px solid #4b7841; background: #061108f5; box-shadow: 3px 3px 0 #000;
  font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; pointer-events: none;
}
.map-tooltip strong, .map-tooltip span { display: block; font-weight: 400; }
.map-tooltip span { color: var(--phosphor-muted); }

/* Convex tube glass: recessed gasket, curved rim and broad reflected light.
   Optical layers never intercept the map's pointer coordinates. */
.map-wrap {
  isolation: isolate;
  border: 10px solid #111711;
  border-radius: 7% / 9%;
  outline: none;
  box-shadow: 0 0 0 1px #060a06, 0 0 0 3px #3c4536,
    0 3px 0 4px #11180f, 0 8px 14px #0009,
    inset 0 0 0 2px #526449, inset 0 0 22px #000;
}
#scope-canvas { border-radius: 6% / 8%; }
.scope-scanlines { border-radius: inherit; opacity: .23; }
.scope-vignette {
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 46%, transparent 40%, #0014051a 65%, #0009 100%);
  box-shadow: inset 0 15px 24px -8px #000e, inset 0 -12px 22px -10px #000d,
    inset 19px 0 30px -16px #000e, inset -19px 0 30px -16px #000e;
}
.map-wrap::before, .map-wrap::after {
  content: ''; position: absolute; pointer-events: none; z-index: 3;
}
.map-wrap::before {
  inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse at 27% -17%, #d9f5bf26 0%, #c9e6b510 27%, transparent 53%),
    radial-gradient(ellipse at 105% 65%, #aed6ad0c, transparent 49%);
  box-shadow: inset 0 2px 1px #c7ddab45, inset 2px 0 2px #b5cfa521,
    inset -1px -2px 1px #a4c39030;
}
.map-wrap::after {
  inset: 2.5% 3%; border-radius: 48% / 8%;
  border-top: 1px solid #d7edbc24;
  border-bottom: 1px solid #b8d29a15;
  background: linear-gradient(112deg, transparent 8%, #d5e9c006 24%, transparent 38%);
}

/* Track information spans the radio; decorative holes cannot squeeze its title. */
.radio-module {
  display: grid; grid-column: 1; grid-row: 2;
  grid-template-columns: minmax(0, 1fr) 72px; grid-template-rows: auto minmax(48px, 1fr);
  gap: 16px 12px; padding: 20px 16px; overflow: auto;
}
.player-content { display: contents; }
.track-screen { grid-column: 1 / -1; min-width: 0; padding: 12px; border: 2px solid #10190d; background: var(--screen-black); box-shadow: var(--screen-inset); }
.track-screen p { margin: 0; color: var(--phosphor-main); font-size: 24px; line-height: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-screen p + p { margin-top: 8px; color: var(--phosphor-muted); font-size: 12px; line-height: 18px; }
.track-screen.is-idle p:first-child { color: #51764a; letter-spacing: 4px; }
.conversation, .track-screen, .explore-form textarea {
  border-radius: 18px / 12px;
  border: 4px solid #111810;
  background: radial-gradient(ellipse at 26% -30%, #afceb31c, transparent 62%),
    radial-gradient(ellipse at 50% 48%, #10251766, transparent 85%), #030b06;
  box-shadow: 0 0 0 1px #46513d, 0 3px 4px #0007,
    inset 0 3px 2px #acc99426, inset 0 10px 16px -8px #000,
    inset 9px 0 15px -10px #000, inset -9px 0 15px -10px #000,
    inset 0 -2px 2px #80936a25;
}
.conversation { padding: 22px 18px; }
.track-screen { padding: 14px 18px; }
.explore-form textarea { padding: 12px 16px; border-radius: 12px / 10px; }
@media (max-width: 600px) {
  .map-wrap { border-width: 6px; }
  .conversation { padding: 16px 12px; }
}
.radio-controls { display: flex; grid-column: 1; grid-row: 2; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; align-content: center; }
.radio-key, .external-key {
  display: grid; flex: 0 0 40px; width: 40px; height: 48px; place-items: center; padding: 0;
  color: #adc891; border: 1px solid #111a0d; border-radius: 0;
  background: linear-gradient(#4c5840, #323e28); box-shadow: var(--key-shadow);
}
.radio-key.primary { background: #aacd8a; box-shadow: inset 1px 1px 0 #d3eeb6, inset -2px -3px 0 #597642, 0 3px 0 #080b08; }
.radio-key.load-save {
  color: var(--phosphor-hot);
  background: linear-gradient(#53674a, #33432b);
  box-shadow: inset 1px 1px 0 #819b70, inset -2px -3px 0 #182414, 0 3px 0 #080b08;
}
.radio-key.load-save img { filter: brightness(0) invert(90%) sepia(16%) saturate(675%) hue-rotate(43deg) brightness(105%); }
#saves-list { display: grid; gap: 10px; }
#saves-list button { text-align: left; overflow-wrap: anywhere; }
.radio-key img, .external-key img { width: 24px; height: 24px; image-rendering: pixelated; filter: brightness(0) invert(83%) sepia(19%) saturate(497%) hue-rotate(42deg); }
.radio-key.primary img { filter: brightness(.2); }
.radio-key:disabled { background: #2d3527; box-shadow: inset 1px 1px 0 #4b5542, inset -1px -2px 0 #182012, 0 2px 0 #080b08; }
.radio-key:disabled img { opacity: .6; filter: brightness(0) invert(66%) sepia(15%) saturate(410%) hue-rotate(40deg); }
.signal-lamp { flex: 0 0 4px; width: 4px; height: 12px; margin-left: auto; background: #152510; box-shadow: 0 0 0 1px #111a0d; }
.signal-lamp.is-ready { background: var(--phosphor-main); box-shadow: 0 0 8px #89f58c88; }
.signal-lamp.is-loading { background: var(--phosphor-hot); }
.signal-lamp.is-error { background: #6a8153; }
.speaker-grille {
  grid-column: 2; grid-row: 2; min-height: 48px; border: 2px solid #15200f; outline: 1px solid #4b573f; background-color: #283321;
  background-image: repeating-linear-gradient(0deg, transparent 0 4px, #334129 4px 8px), repeating-linear-gradient(90deg, #060d04 0 4px, #334129 4px 8px);
  box-shadow: inset 2px 2px 0 #070e05, inset -1px -1px 0 #62704c;
}
.embed-wrap { grid-column: 1 / -1; min-width: 0; border: 1px solid #465d35; background: #030903; }
.embed-wrap iframe { display: block; width: 100%; height: 86px; border: 0; }
.radio-module:has(.embed-wrap) { grid-template-rows: auto 48px 86px; }

.settings-dialog { width: min(400px, calc(100% - 40px)); padding: 0; color: var(--phosphor-main); border: 2px solid #687559; background: var(--case-dark); box-shadow: 6px 6px 0 #070c05; }
.settings-dialog::backdrop { background: #030802cc; }
.settings-panel { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 20px 12px; padding: 24px; }
.settings-panel p { grid-column: 1; margin: 0; font-size: 24px; }
.settings-panel select { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; height: 48px; padding: 8px; font-size: 24px; color: var(--phosphor-main); border: 1px solid #4c6b3d; border-radius: 0; background: var(--screen-black); }
.settings-panel button { grid-column: 2; grid-row: 1; width: 36px; height: 28px; color: #c3d8b2; border: 1px solid #121a10; border-radius: 0; background: var(--case-mid); box-shadow: var(--key-shadow); }
.settings-panel .motion-label { grid-column: 1 / -1; grid-row: 3; }
.settings-panel #motion-select { grid-row: 4; font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
button:not(:disabled):active, .external-key:active { transform: translateY(2px); box-shadow: inset 1px 1px 0 #1a2612; }
@media (hover: hover) {
  button:not(:disabled):hover, .external-key:hover { filter: brightness(1.15); }
}
@keyframes terminal-blink { 50% { opacity: .25; } }
@media (max-width: 1100px) {
  .instrument { width: calc(100% - 32px); margin: 16px auto; padding: 12px; gap: 8px; height: clamp(600px, calc(100dvh - 32px), 1000px); }
  .module-frame { padding: 12px; }
  .radio-module { padding: 16px 12px; }
}
@media (max-width: 899px) {
  .instrument { grid-template-columns: minmax(0, 1fr); grid-template-rows: clamp(320px, 48svh, 540px) 400px auto; height: auto; }
  .scope-module { grid-column: 1; grid-row: 1; }
  .terminal-module { grid-column: 1; grid-row: 2; }
  .radio-module { grid-column: 1; grid-row: 3; grid-template-columns: minmax(0, 1fr) minmax(72px, .65fr); min-height: 208px; }
}
@media (max-width: 399px) {
  .instrument { width: calc(100% - 16px); margin: 8px auto; padding: 8px; }
  .module-frame { padding: 10px; }
  .conversation { padding: 16px 10px; }
  .explore-form { gap: 8px; grid-template-columns: minmax(0, 1fr) 44px; }
  .radio-module { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 56px 32px; gap: 12px; }
  .speaker-grille { grid-column: 1; grid-row: 3; min-height: 32px; }
  .embed-wrap { grid-row: 4; }
  .radio-module:has(.embed-wrap) { grid-template-rows: auto 56px 32px 86px; }
}
@media (min-width: 400px) and (max-width: 560px) {
  .radio-module { grid-template-columns: minmax(0, 1fr) 72px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}
.instrument.is-fullscreen {
  width: 100%; height: 100dvh; max-height: none; margin: 0; border-width: 2px; border-radius: 0;
}

/* NetEase account access stays visible above the map, independently of playback. */
.scope-module { grid-template-rows: 40px auto minmax(0, 1fr); }
#song-library-list { display: grid; gap: 12px; }
#song-library-list p { overflow-wrap: anywhere; color: var(--phosphor-muted); }
.account-key, .netease-refresh {
  min-height: 36px; padding: 8px 12px; color: var(--phosphor-main);
  border: 1px solid #121a10; border-radius: 0; background: var(--case-mid);
  box-shadow: var(--key-shadow); font-size: 12px; line-height: 20px;
}
.netease-entry { margin-left: auto; min-width: 0; max-width: min(260px, 65%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.netease-entry.is-connected { color: var(--phosphor-hot); }
.netease-entry::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--phosphor-dim); }
.netease-entry.is-connected::before { background: var(--phosphor-main); box-shadow: 0 0 6px #89f58c88; }
.radio-module, .radio-module:has(.embed-wrap) { grid-template-rows: auto 48px; grid-auto-rows: max-content; align-content: start; }
.track-screen { grid-row: 1; margin-bottom: 12px; }
.player-content > .account-key, .track-select, .match-candidates, .audio-progress { grid-column: 1 / -1; min-width: 0; }
.track-select { width: 100%; min-height: 36px; padding: 8px; border: 1px solid #4c6b3d; border-radius: 0; background: var(--screen-black); color: var(--phosphor-main); font-size: 12px; }
.match-candidates { font-size: 12px; line-height: 1.6; }
.match-candidates summary { cursor: pointer; padding: 4px 0; }
.match-candidates button { display: block; width: 100%; margin-top: 8px; text-align: left; overflow-wrap: anywhere; }
.audio-progress { width: 100%; height: 24px; margin: 0; accent-color: var(--phosphor-main); cursor: pointer; }
.audio-progress:disabled { cursor: not-allowed; }
.netease-dialog { width: min(400px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; color: var(--phosphor-main); border: 2px solid #687559; background: var(--case-dark); box-shadow: 6px 6px 0 #070c05; }
.netease-dialog::backdrop { background: #030802cc; }
.netease-panel { display: grid; gap: 16px; padding: 24px; }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dialog-heading p { margin: 0; font-size: 24px; }
.dialog-heading button { flex-shrink: 0; width: 36px; height: 36px; color: #c3d8b2; border: 1px solid #121a10; border-radius: 0; background: var(--case-mid); box-shadow: var(--key-shadow); }
.netease-qr { display: grid; place-items: center; width: min(224px, 100%); aspect-ratio: 1; margin: auto; padding: 6px; background: white; color: #22301e; }
.netease-qr img { display: block; width: 100%; height: auto; }
.qr-placeholder { padding: 16px; text-align: center; font-size: 12px; line-height: 1.7; }
.netease-login-status { margin: 0; text-align: center; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.netease-privacy { margin: 0; color: var(--phosphor-muted); font-size: 12px; line-height: 1.8; }
@media (min-width: 900px) {
  .instrument { grid-template-rows: minmax(0, 1fr) 280px; }
}
@media (max-width: 399px) {
  .scope-module .module-tools { gap: 8px; }
  .scope-module .vent-marks { width: 24px; flex-shrink: 0; }
  .radio-module, .radio-module:has(.embed-wrap) { grid-template-rows: auto 48px 32px; }
  .embed-wrap { grid-row: auto; }
  .netease-panel { padding: 20px; }
}

.scope-module { grid-template-rows: 40px 32px minmax(0, 1fr); }
.scope-module .module-tools { justify-content: flex-end; }
.radio-key.netease-entry { position: relative; margin: 0; max-width: none; color: var(--phosphor-dim); }
.radio-key.netease-entry::before { position: absolute; width: 4px; height: 4px; right: 4px; top: 5px; margin: 0; }
.radio-key.netease-entry svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.radio-key.netease-entry.is-connected { color: var(--phosphor-main); }
.radio-key.netease-entry.is-connected svg { filter: drop-shadow(0 0 3px #89f58c88); }
.scope-zoom { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.scope-zoom .scope-control { width: 32px; height: 32px; font-size: 24px; line-height: 1; }
.scope-zoom .scope-control:disabled { opacity: .3; cursor: not-allowed; }
.path-actions { display: flex; gap: 8px; margin-right: auto; min-width: 0; }
.route-plan { display: grid; gap: 12px; }
.route-plan textarea { width: 100%; min-height: 80px; box-sizing: border-box; background: #030b06; color: #b6daa3; }
.route-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
#route-list { padding-left: 24px; max-height: 35vh; overflow: auto; }
#route-list li { padding: 8px 0; }
#route-list button { margin-left: 12px; }
.path-actions .account-key { padding: 4px 8px; font-size: 12px; white-space: nowrap; }
.path-actions .account-key:disabled { opacity: .3; cursor: not-allowed; }

/* One compact toolbar gives the scope its full remaining height. */
.scope-module { grid-template-rows: 36px minmax(0, 1fr); gap: 12px; }
.scope-zoom { gap: 8px; padding: 0 2px; }
.scope-zoom .scope-control { width: 36px; height: 36px; flex-basis: 36px; }
.conversation-screen { position: relative; min-height: 0; overflow: hidden; }
.conversation-screen .conversation { height: 100%; box-sizing: border-box; }
#conversation-signal { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); pointer-events: none; }
.conversation .message { z-index: 1; }

#scope-canvas { image-rendering: pixelated; }
/* Wider black bars retain the coarse CRT rhythm over the sharper source raster. */
.scope-scanlines { opacity: .30; background: repeating-linear-gradient(0deg, #000b 0 3px, transparent 3px 7px); }

/* Native 12 px glyph grid: use integral multiples, no synthetic bold or glow. */
:root { font-size: 12px; -webkit-font-smoothing: none; text-rendering: geometricPrecision; }
body, button, input, textarea, select { font-synthesis: none; letter-spacing: 0; text-shadow: none; }
strong, b { font-weight: 400; color: var(--phosphor-hot); }
.message { line-height: 36px; }
.scope-scanlines { opacity: .1; }
.map-wrap::before { opacity: .55; }
.scope-vignette { background: radial-gradient(ellipse at 50% 46%, transparent 55%, #0005 100%); }
@media (max-width: 600px) {
  .message, .composer textarea, .track-screen p { font-size: 24px; line-height: 36px; }
}

/* Controls live on the glass, leaving the full module for the universe. */
.scope-module { grid-template-rows: minmax(0, 1fr); gap: 0; }
.scope-navigation { position: absolute; inset: auto 18px 16px; z-index: 5; display: flex; align-items: end; justify-content: space-between; gap: 12px; pointer-events: none; }
.scope-navigation > * { pointer-events: auto; }
.scope-navigation .scope-zoom { display: grid; grid-template-columns: repeat(3, 36px); gap: 6px; padding: 8px; background: #071109e8; border: 1px solid #344830; }
.scope-navigation .path-actions { display: contents; }
.map-dials { display: flex; gap: 12px; padding: 8px 10px; background: #071109e8; border: 1px solid #344830; }
.map-dial { position: relative; display: grid; justify-items: center; gap: 5px; color: #b4d79e; font-size: 12px; }
.dial-face { display: block; width: 38px; height: 38px; border: 3px solid #53634a; border-radius: 50%; background: repeating-conic-gradient(#293624 0deg 12deg, #384630 12deg 24deg); box-shadow: inset 0 0 0 4px #152211, 2px 2px 0 #000; transform: rotate(var(--dial-angle, 0deg)); }
.dial-face::before { content: ''; position: absolute; top: 3px; left: 15px; width: 3px; height: 10px; background: #bbeb9b; }
.map-dial input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.map-dial:focus-within { outline: none; }
.map-dial:focus-visible .dial-face { outline: 2px solid #bbeb9b; outline-offset: 4px; }
@media (max-width: 600px) {
  .scope-navigation { inset: auto 10px 12px; gap: 8px; }
  .scope-navigation .scope-zoom { grid-template-columns: repeat(3, 30px); gap: 4px; padding: 6px; }
  .scope-navigation .scope-control { width: 30px; height: 30px; min-width: 0; }
  .map-dials { gap: 8px; padding: 6px; }
  .dial-face { width: 34px; height: 34px; }
  .dial-face::before { left: 13px; }
}

/* Weighted, knurled encoder caps with a fixed bezel and recessed indicator. */
.map-dials { padding: 10px 12px; gap: 16px; background: linear-gradient(145deg,#293027,#10170f); border-color: #49523f; box-shadow: inset 0 1px #68715c, 0 3px 6px #000a; }
.map-dial { border: 0; padding: 0; background: none; touch-action: none; user-select: none; cursor: ns-resize; min-width: 48px; }
.map-dial .dial-face { position: relative; width: 48px; height: 48px; border: 3px solid #10150e; background: repeating-conic-gradient(from 0deg,#20261e 0deg 7deg,#626953 8deg 10deg,#30392a 11deg 15deg); box-shadow: 0 1px 0 2px #687059, 0 4px 5px #000d, inset 0 0 0 2px #899174; }
.map-dial .dial-face::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 32% 22%,#7b826b,#48533e 50%,#252f20 85%); border: 1px solid #11190d; box-shadow: inset 0 1px 2px #bec4a366, inset 0 -2px 3px #060b05; }
.map-dial .dial-face::before { z-index: 1; top: 7px; left: 19px; width: 3px; height: 12px; background: #d2ddb3; box-shadow: 1px 0 #10170e,-1px 0 #10170e; }
.map-dial[aria-pressed="true"] { color: #d2f8ab; }
.map-dial[aria-pressed="true"] .dial-face { box-shadow: 0 0 0 2px #a9ce7b, 0 4px 6px #000d, inset 0 0 0 2px #899174; }
.map-dial:active, .map-dial:hover { transform: none !important; filter: none !important; background: none !important; box-shadow: none !important; }
@media(max-width:600px) { .map-dials { gap: 10px; padding: 8px; } .map-dial { min-width: 44px; } .map-dial .dial-face { width: 44px; height: 44px; } .map-dial .dial-face::before { left: 17px; } }

/* Dedicated hardware strip below the glass, never an overlay. */
.scope-module { grid-template-rows: minmax(0, 1fr) auto; gap: 18px; }
.scope-navigation { position: static; inset: auto; z-index: auto; min-width: 0; align-items: center; padding: 0 6px; pointer-events: auto; }
.scope-navigation .scope-zoom { grid-template-columns: repeat(6, 36px); }
@media (max-width: 1100px) { .scope-navigation .scope-zoom { grid-template-columns: repeat(3, 36px); } }
@media (max-width: 600px) {
 .scope-module { gap: 12px; }
 .scope-navigation { padding: 0; gap: 8px; }
 .scope-navigation .scope-zoom { grid-template-columns: repeat(3, 30px); }
}

/* Unboxed knobs and a shallower lower instrument bezel. */
.scope-module { gap: 10px; padding-bottom: 8px; }
.scope-navigation { padding: 0 6px; }
.map-dials { padding: 0 6px; gap: 16px; border: 0; background: none; box-shadow: none; }
.map-dial { gap: 6px; }
.dial-label { line-height: 12px; }
@media (max-width: 600px) {
 .scope-module { gap: 8px; padding-bottom: 6px; }
 .scope-navigation { padding: 0; }
 .map-dials { padding: 0 4px; gap: 12px; }
}

/* Map strip now contains only navigation; route tools join playback. */
.scope-navigation .scope-zoom { grid-template-columns: repeat(3, 36px); }
.radio-module > .path-actions { display: contents; }
.radio-controls > .radio-key svg { width: 24px; height: 24px; }
@media (max-width: 600px) { .scope-navigation .scope-zoom { grid-template-columns: repeat(3, 30px); } }

/* Large, separate arrows: save points into disk; load lifts out of disk. */
#save-reset-path img, .radio-key.load-save img { width: 32px; height: 32px; }
.scope-module { grid-template-rows: minmax(0,1fr) auto; }

.scope-navigation .scope-zoom { grid-template-columns: repeat(4,36px); }
@media(max-width:600px) { .scope-navigation .scope-zoom { grid-template-columns: repeat(4,30px); } }

#route-tools[aria-checked="true"] { color:#cfffad; background:#45583b; box-shadow:inset 0 0 0 2px #94c27d; position:relative; }
#route-tools[aria-checked="true"]::after { content:'✓'; position:absolute;right:2px;top:1px;font-size:12px; }