:root {
  --bg: #0d0812;
  --bg-deep: #07040a;
  --panel: #17101e;
  --text: #c9bccc;
  --dim: #8a7b90;
  --pink: #ff55aa;
  --hot-pink: #ff2d7e;
  --violet: #9955ff;
  --deep-violet: #6633cc;
  --phosphor: #88ff55;
  --mint: #55ff99;
  --hardware-red: #e04455;
  --white: #fff7ff;
  --focus: #d8ff55;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --content-width: 72rem;
  --catalog-width: 18rem;
  --catalog-height: 34rem;
  --catalog-height-compact: 26rem;
  --control-height: 2.25rem;
  --control-height-touch: 2.75rem;
  --status-height: 1.5rem;
  --input-height: 1.75rem;
  --text-size: 0.875rem;
  --text-size-small: 0.75rem;
  --text-size-status: 0.6875rem;
  --line-height: 1.5;
  --line-height-wave: 1.25;
  --border-width: 1px;
  --focus-width: 2px;
  --press-offset: 1px;
  --motion-fast: 120ms;
  --motion-cursor: 1.06s;
  --disabled-opacity: 0.65;
  --glow-wave: 0 0 0.45rem currentColor;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--deep-violet) 22%, transparent) 0, transparent 42rem),
    linear-gradient(180deg, var(--bg-deep), var(--bg));
  font: var(--text-size)/var(--line-height) "DejaVu Sans Mono", "Fira Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--bg-deep) 44%, transparent) 0 1px, transparent 1px 3px);
}

button { font: inherit; }
.skip-link { position: fixed; top: var(--space-2); left: var(--space-2); z-index: 40; padding: var(--space-2); color: var(--bg); background: var(--focus); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.crt-glow { position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 5rem color-mix(in srgb, var(--violet) 10%, transparent); }

.terminal-head, .terminal-main { width: min(var(--content-width), 100%); margin-inline: auto; padding-inline: var(--space-4); }
.terminal-head { padding-top: var(--space-4); }
.terminal-main { display: grid; grid-template-columns: minmax(var(--catalog-width), 0.85fr) minmax(0, 1.6fr); gap: var(--space-6); align-items: start; padding-block: var(--space-4) var(--space-8); }
.sysline { margin: 0; color: var(--violet); white-space: normal; }
.sysline strong { color: var(--pink); font-weight: 400; }
.sysline span, .prompt { color: var(--mint); }
.topic { margin-block: var(--space-4); }

.mark { margin: var(--space-6) 0 var(--space-4); text-align: center; }
.mark pre { margin: 0; font: inherit; font-size: clamp(0.1875rem, 1.1vw, 0.875rem); line-height: 1.32; letter-spacing: 0; text-shadow: 0 0 0.65rem currentColor; }
.r1 { color: var(--pink); }
.r2 { color: color-mix(in srgb, var(--pink) 78%, var(--hot-pink)); }
.r3 { color: var(--hot-pink); }
.r4 { color: color-mix(in srgb, var(--hot-pink) 68%, var(--violet)); }
.r5 { color: var(--violet); }
.r6 { color: color-mix(in srgb, var(--violet) 76%, var(--deep-violet)); }
.r7 { color: var(--deep-violet); }
.r8 { color: color-mix(in srgb, var(--deep-violet) 66%, var(--bg)); }
.tag { margin: var(--space-2) 0 0; color: var(--dim); letter-spacing: 0.35em; text-transform: lowercase; }
.tag strong { color: var(--pink); font-weight: 400; }

h1, h2 { margin: 0; overflow: hidden; color: var(--pink); font: inherit; font-weight: 400; white-space: nowrap; }
.catalog, .player { min-width: 0; padding: var(--space-3); background: color-mix(in srgb, var(--panel) 78%, transparent); border-left: var(--border-width) solid var(--deep-violet); }
.catalog { grid-column: 1; grid-row: 1; min-height: 0; }
.player { position: sticky; grid-column: 2; grid-row: 1; top: var(--space-4); }
.system-message { min-height: 1.5em; margin: var(--space-2) 0; color: var(--mint); }
.system-message.is-error { color: var(--hardware-red); }

.catalog-rank { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; padding-block: var(--space-1) var(--space-2); border-bottom: var(--border-width) dotted var(--deep-violet); }
.rank-prompt { color: var(--mint); }
.catalog-rank button[aria-pressed="true"] { color: var(--phosphor); background: color-mix(in srgb, var(--deep-violet) 18%, transparent); }

.track-list { max-height: min(58dvh, var(--catalog-height)); margin: var(--space-2) 0 0; padding: 0 var(--space-1) 0 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--violet) var(--bg-deep); scrollbar-gutter: stable; scrollbar-width: thin; list-style: none; }
.track-list::-webkit-scrollbar { width: var(--space-2); }
.track-list::-webkit-scrollbar-track { background: var(--bg-deep); }
.track-list::-webkit-scrollbar-thumb { background: var(--deep-violet); }
.track-list li { border-top: var(--border-width) dotted color-mix(in srgb, var(--deep-violet) 72%, transparent); }
.track-list li:last-child { border-bottom: var(--border-width) dotted color-mix(in srgb, var(--deep-violet) 72%, transparent); }
.track-button { width: 100%; min-height: var(--control-height-touch); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-2); align-items: center; padding: var(--space-2); color: var(--text); background: transparent; border: 0; text-align: left; cursor: pointer; transition: color var(--motion-fast) ease-out, transform var(--motion-fast) ease-out; }
.track-button::before { content: ">"; color: var(--dim); }
.track-main { min-width: 0; display: flex; align-items: baseline; }
.track-index { margin-right: var(--space-2); color: var(--dim); }
.track-title { overflow-wrap: break-word; word-break: normal; }
.track-meta { grid-column: 2; color: var(--dim); white-space: nowrap; }
.track-signal { grid-column: 2; color: var(--violet); white-space: nowrap; }
.track-button:hover { color: var(--phosphor); background: color-mix(in srgb, var(--deep-violet) 18%, transparent); }
.track-button:active { transform: translateY(var(--press-offset)); }
.track-button[aria-current="true"] { color: var(--phosphor); background: color-mix(in srgb, var(--hot-pink) 10%, transparent); }
.track-button[aria-current="true"]::before { color: var(--pink); }

.now-playing { display: grid; grid-template-columns: minmax(0, 1fr); margin-block: var(--space-3); }
.now-playing p { margin: 0; overflow-wrap: anywhere; }
.now-playing strong { color: var(--phosphor); font-weight: 400; }
.waveform { display: grid; align-content: center; overflow: hidden; margin-block: var(--space-4); padding: var(--space-3) var(--space-2); color: var(--violet); background: var(--bg-deep); border-block: var(--border-width) solid var(--deep-violet); cursor: crosshair; user-select: none; }
.waveform[aria-disabled="true"] { cursor: default; opacity: var(--disabled-opacity); }
.visualizer-grid { display: block; min-width: 0; overflow: hidden; line-height: var(--line-height-wave); }
.visualizer-row { --row-color: var(--violet); display: block; min-height: calc(var(--line-height-wave) * 1em); overflow: hidden; white-space: pre; }
.visualizer-row:nth-child(1) { --row-color: var(--pink); }
.visualizer-row:nth-child(2) { --row-color: var(--hot-pink); }
.visualizer-row:nth-child(3) { --row-color: var(--violet); }
.visualizer-row:nth-child(4) { --row-color: color-mix(in srgb, var(--deep-violet) 70%, var(--violet)); }
.wave-played { color: var(--phosphor); text-shadow: var(--glow-wave); }
.wave-unplayed { color: var(--row-color); text-shadow: var(--glow-wave); }

.transport { display: grid; gap: var(--space-2); }
.control-line { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
:where(.control-line, .signal-actions, .catalog-rank) button { min-height: var(--control-height); padding: 0 var(--space-1); color: var(--dim); background: transparent; border: 0; cursor: pointer; transition: color var(--motion-fast) ease-out, opacity var(--motion-fast) ease-out, transform var(--motion-fast) ease-out; }
:where(.control-line, .signal-actions, .catalog-rank) button:hover:not(:disabled) { color: var(--phosphor); }
:where(.control-line, .signal-actions, .catalog-rank) button:active:not(:disabled) { color: var(--pink); transform: translateY(var(--press-offset)); }
:where(.control-line, .signal-actions, .catalog-rank) button:disabled { color: var(--dim); cursor: not-allowed; opacity: var(--disabled-opacity); }
.readout-line output { color: var(--phosphor); }
.signal-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); padding-top: var(--space-2); border-top: var(--border-width) dotted var(--deep-violet); }
.signal-prompt { color: var(--mint); }
#infect[aria-pressed="true"] { color: var(--pink); text-shadow: var(--glow-wave); }
#infection-count, #reception-count { color: var(--phosphor); }
.feedback-state:empty { min-height: 0; margin: 0; }
.keymap { margin: var(--space-2) 0 0; color: var(--dim); font-size: var(--text-size-small); }
.keymap-compact { display: none; }
audio { display: none; }

button:focus-visible, .waveform:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-width); }
.terminal-footer { z-index: 30; margin-top: auto; }
.statusbar { display: flex; gap: var(--space-2); align-items: center; min-height: var(--status-height); padding-inline: var(--space-2); overflow: hidden; color: var(--white); background: linear-gradient(90deg, color-mix(in srgb, var(--hot-pink) 55%, var(--bg-deep)), color-mix(in srgb, var(--deep-violet) 60%, var(--bg-deep))); white-space: nowrap; }
.statusbar .status-value { color: var(--phosphor); }
.statusbar b { margin-left: auto; font-weight: 400; }
.inputline { min-height: var(--input-height); padding: var(--space-1) var(--space-2); color: var(--phosphor); background: var(--bg-deep); }
.inputline > span { color: var(--pink); }
.cursor { display: inline-block; width: 1ch; background: var(--phosphor); animation: blink var(--motion-cursor) steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 48rem) {
  .terminal-head, .terminal-main { padding-inline: var(--space-3); }
  .terminal-main { grid-template-columns: minmax(0, 1fr); }
  .catalog, .player { padding: var(--space-2); }
  .catalog, .player { grid-column: 1; grid-row: auto; }
  .player { position: static; }
  .track-list { max-height: min(44dvh, var(--catalog-height-compact)); }
  .statusbar b { display: none; }
}

@media (max-width: 37.5rem) {
  body { font-size: var(--text-size-small); }
  .terminal-head { padding-top: var(--space-3); }
  .mark { margin-block: var(--space-4); }
  .control-line { gap: var(--space-1); }
  :where(.control-line, .signal-actions, .catalog-rank) button { min-height: var(--control-height-touch); }
  .statusbar { flex-wrap: wrap; padding-block: var(--space-1); overflow: visible; font-size: var(--text-size-status); white-space: normal; }
  .keymap-wide { display: none; }
  .keymap-compact { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  .cursor { animation: none; }
  .track-button:active, .control-line button:active:not(:disabled), .signal-actions button:active:not(:disabled), .catalog-rank button:active:not(:disabled) { transform: none; }
}