:root {
  --ink: #18233d;
  --muted: #4e5b76;
  --navy: #111d3f;
  --blue: #234f9d;
  --teal: #159c9a;
  --panel: #d8d4bd;
  --panel-light: #f5f2df;
  --red: #d52e42;
  --yellow: #ffe66c;
  --purple: #6e4c96;
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--ink); background: #07111d; font: 13px Tahoma, Verdana, Arial, sans-serif; }
.page-noise { position: fixed; inset: 0; pointer-events: none; opacity: .38; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 5px); z-index: 0; }
.site-frame { position: relative; z-index: 1; width: min(1080px, calc(100% - 28px)); margin: 22px auto 30px; padding: 14px; border: 1px solid #586991; background: linear-gradient(135deg, #d7d5c4 0%, #c0c0ae 100%); box-shadow: 0 0 0 3px #0a1626, 0 0 0 4px #435579, 8px 10px 0 rgba(0,0,0,.42); }
.site-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 6px 8px 13px; }
.logo { color: var(--navy); font: 900 clamp(28px, 5vw, 48px)/.85 Arial Black, Impact, sans-serif; letter-spacing: -2px; text-shadow: 2px 2px 0 #fff4be, 4px 4px 0 #8b8790; }
.logo span { color: var(--red); }
.tag { margin-top: 9px; color: var(--purple); font: bold 11px/1 Tahoma, sans-serif; letter-spacing: .19em; }
.header-readout { min-width: 190px; padding: 6px 8px; color: #e7f9ee; background: var(--navy); border: 2px inset #9aaad0; font: 10px/1.7 "Courier New", monospace; text-align: right; letter-spacing: .06em; }
.header-readout strong { color: var(--yellow); }
.pixel-led, .led, .mic { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #777; border: 1px solid #3e3e3e; vertical-align: -1px; }
.pixel-led { background: #45e167; box-shadow: 0 0 7px #45e167; animation: pulse 1.2s infinite; }
.nav-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0; min-height: 32px; padding: 3px 5px; background: var(--navy); border: 2px outset #879bc4; box-shadow: inset 0 0 0 1px #071126; }
.nav-bar a { padding: 6px 11px; color: #f3f1d9; font-size: 11px; font-weight: bold; text-decoration: none; letter-spacing: .06em; }
.nav-bar a:hover, .nav-bar a.active { color: var(--navy); background: var(--yellow); }
.nav-note { margin-left: auto; padding: 6px 7px; color: #9eb1d3; font: 10px "Courier New", monospace; }
.welcome-strip { display: flex; align-items: center; overflow: hidden; margin-top: 11px; color: #f9f5cf; background: var(--red); border: 2px inset #f5b2a7; box-shadow: 2px 2px 0 #83202e; font: 11px "Courier New", monospace; white-space: nowrap; }
.strip-label { flex: 0 0 auto; padding: 6px 9px; color: var(--navy); background: var(--yellow); font-weight: bold; }
.strip-viewport { min-width: 0; overflow: hidden; }
.strip-copy { display: inline-block; padding-left: 15px; animation: scroll 24s linear infinite; }
.desktop-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .95fr); gap: 13px; margin-top: 13px; }
.main-column, .sidebar { display: grid; align-content: start; gap: 13px; min-width: 0; }
.window { overflow: hidden; background: var(--panel); border: 2px outset var(--panel-light); box-shadow: 2px 2px 0 #5d5b56; }
.titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px; color: #fff; background: linear-gradient(90deg, var(--blue), #3b70b7 72%, #1a376f); font-size: 12px; font-weight: bold; letter-spacing: .04em; text-shadow: 1px 1px #142958; }
.title-icon { color: var(--yellow); font-size: 14px; }
.window-buttons { color: #fff; font: bold 12px Arial; letter-spacing: 3px; }
.window-body { padding: 13px; }
.compact-body { padding: 11px; }
.panel-ribbon { display: flex; justify-content: space-between; gap: 12px; padding: 5px 7px; color: #f6f4dc; background: #1c2d59; border: 1px solid #7389bb; font: bold 10px "Courier New", monospace; letter-spacing: .06em; }
.panel-ribbon small { color: var(--yellow); font-size: inherit; }
.panel-ribbon strong { color: #7af39d; }
.led { margin-right: 4px; background: #f02d43; box-shadow: 0 0 8px #f02d43; animation: pulse 1s infinite; }
.player-display { display: flex; gap: 15px; padding: 15px 0 9px; }
.art { position: relative; flex: 0 0 150px; height: 150px; overflow: hidden; color: #f8f3d8; background: #222b5a; border: 3px inset #e8e3cc; box-shadow: inset 0 0 0 4px #5b3b8a; image-rendering: pixelated; }
.art-grid { position: absolute; inset: 0; opacity: .55; background: linear-gradient(rgba(255,255,255,.17) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.17) 1px, transparent 1px); background-size: 12px 12px; }
.art-symbol { position: absolute; inset: 25px 0 0; color: var(--yellow); font: 95px/1 Georgia, serif; text-align: center; text-shadow: 3px 3px 0 #d52e42; }
.art-frequency { position: absolute; top: 7px; right: 7px; color: #7af39d; font: bold 15px/12px "Courier New", monospace; text-align: right; }
.art-frequency small { font-size: 8px; }
.art-caption { position: absolute; bottom: 6px; left: 7px; color: #b8d6ff; font: bold 10px "Courier New", monospace; letter-spacing: .12em; }
.now { flex: 1; min-width: 0; padding-top: 3px; }
.now label, .sidebar-intro { color: var(--purple); font: bold 10px "Courier New", monospace; letter-spacing: .08em; }
.now h1 { overflow-wrap: anywhere; margin: 7px 0 5px; color: var(--navy); font: bold clamp(22px, 4vw, 31px)/1.05 Georgia, "Times New Roman", serif; }
.artist-line { margin: 0; color: #384467; font: bold 15px/1.35 Tahoma, sans-serif; }
.album-line { min-height: 18px; margin: 3px 0 12px; color: var(--muted); font-size: 12px; }
.time { display: flex; align-items: center; gap: 7px; margin-top: 15px; color: #384467; font: 11px "Courier New", monospace; }
meter { flex: 1; height: 14px; }
meter::-webkit-meter-bar { background: #f4f0d9; border: 2px inset #fff; }
meter::-webkit-meter-optimum-value { background: repeating-linear-gradient(90deg, var(--teal) 0 8px, #7be3cc 8px 10px); }
.controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px dotted #888; }
button { padding: 6px 11px; color: var(--ink); background: #d4d0c0; border: 2px outset #fff; font: bold 11px Tahoma, sans-serif; cursor: pointer; }
button:hover { color: var(--navy); background: var(--yellow); }
button:active { border-style: inset; }
.primary-button { color: #fff; background: var(--teal); border-color: #baf4dc #3f706c #3f706c #baf4dc; }
.volume-control { margin-left: auto; color: #4e5b76; font: bold 10px "Courier New", monospace; }
input { vertical-align: middle; accent-color: var(--purple); }
.marquee { overflow: hidden; margin-top: 12px; padding: 5px 7px; color: #7af39d; background: #081315; border: 2px inset #8d9d93; font: 11px "Courier New", monospace; white-space: nowrap; }
.marquee span { display: inline-block; animation: scroll 18s linear infinite; }
.welcome-heading { display: flex; align-items: flex-start; gap: 10px; }
.ascii-star { color: var(--red); font: bold 31px Georgia, serif; line-height: 1; }
.welcome-body h2 { margin: 0; color: var(--navy); font: bold 20px Georgia, serif; }
.welcome-body p { line-height: 1.55; }
.welcome-heading p { margin: 4px 0 0; color: var(--muted); }
.link-row { display: flex; flex-wrap: wrap; gap: 9px 18px; padding-top: 7px; border-top: 1px dotted #888; }
.link-row a { color: #174b96; font: bold 11px "Courier New", monospace; }
.sidebar-intro { margin: 0 0 8px; }
.stats-table { width: 100%; border-collapse: collapse; font: 11px "Courier New", monospace; }
.stats-table tr:nth-child(odd) { background: rgba(255,255,255,.28); }
.stats-table th, .stats-table td { padding: 6px 5px; border-bottom: 1px dotted #97958c; }
.stats-table th { color: #4a5470; font-size: 10px; font-weight: bold; text-align: left; }
.stats-table td { color: var(--navy); font-weight: bold; text-align: right; white-space: nowrap; }
.meter-label { display: flex; justify-content: space-between; margin-top: 13px; color: var(--purple); font: bold 10px "Courier New", monospace; }
.fake-meter { display: flex; gap: 2px; margin-top: 4px; padding: 3px; background: #272746; border: 2px inset #eee; }
.fake-meter i { flex: 1; height: 12px; background: var(--teal); }
.fake-meter i:nth-last-child(-n+3) { background: var(--yellow); }
.stats-footnote { margin: 10px 0 0; color: #6a6870; font: 10px/1.35 Tahoma, sans-serif; }
.recent-window ol { margin: 0; padding-left: 25px; }
.recent-window li { min-height: 37px; padding: 5px 3px 5px 2px; border-bottom: 1px dotted #96938a; color: #394467; font-size: 11px; line-height: 1.3; }
.recent-window li b { color: var(--navy); }
.log-tail { margin-top: 11px; color: var(--purple); font: 10px "Courier New", monospace; }
.statusbar { display: flex; gap: 0; margin-top: 13px; background: #d4d0c0; border: 2px inset #fff; }
.statusbar span { padding: 5px 8px; border-right: 1px solid #98958c; color: #293452; font: 11px "Courier New", monospace; }
.mic.playing { background: #f02d43; box-shadow: 0 0 6px #f02d43; animation: pulse 1.1s infinite; }
.mic.buffering { background: #f0b400; }
.mic.paused { background: #a33; }
.footer-copy { display: flex; justify-content: space-between; gap: 12px; padding: 8px 3px 0; color: #59627b; font: 10px "Courier New", monospace; }
@keyframes pulse { 50% { opacity: .48; } }
@keyframes scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@media (max-width: 760px) { .site-header { align-items: flex-start; flex-direction: column; } .header-readout { width: 100%; text-align: left; } .nav-note { width: 100%; padding-left: 11px; } .desktop-grid { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .site-frame { width: calc(100% - 12px); margin-top: 8px; padding: 8px; } .player-display { gap: 10px; } .art { flex-basis: 105px; height: 105px; } .art-symbol { top: 20px; font-size: 65px; } .art-frequency { font-size: 11px; } .now h1 { font-size: 21px; } .volume-control { width: 100%; margin-left: 0; } .statusbar { flex-wrap: wrap; } .footer-copy { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .pixel-led, .led, .marquee span, .strip-copy, .mic.playing { animation: none; } }