@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;
  --ink: #101112;
  --metal: #292a2b;
  --metal-light: #3a3b3c;
  --green: #a6e2a7;
  --amber: #f0b763;
  --muted: #94928a;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #14130f; }
body {
  min-height: 100vh;
  margin: 0;
  padding: 40px 18px 64px;
  overflow-x: hidden;
  color: #eee8dc;
  font: 14px/1.45 'IBM Plex Mono', Consolas, monospace;
  background:
    radial-gradient(ellipse at 50% 16%, rgba(124, 74, 37, .2), transparent 50%),
    radial-gradient(ellipse at 50% 100%, #2a2118 0, #171613 54%, #101112 100%);
}
body::before {
  position: fixed; inset: 0; z-index: 20; pointer-events: none; content: '';
  opacity: .14;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.23) 4px),
    linear-gradient(115deg, transparent 0 49.7%, rgba(255,255,255,.022) 50%, transparent 50.3%);
}
.room {
  position: relative;
  display: flex;
  width: min(100%, 920px);
  margin-inline: auto;
  flex-direction: column;
  align-items: center;
}

/* Convex CRT television: curved glass, dark bezel and a restrained phosphor glow. */
.tv-wrap { position: relative; z-index: 2; width: min(560px, 94vw); filter: drop-shadow(0 25px 25px rgba(0,0,0,.48)); }
.tv-body {
  position: relative; padding: 20px 20px 17px;
  border: 1px solid #48494a; border-radius: 24px 24px 18px 18px;
  background: linear-gradient(145deg, #494a4a 0%, #333435 12%, #242526 52%, #1c1d1e 100%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.19), inset 0 -6px 12px rgba(0,0,0,.46), 0 5px 0 #111, 0 13px 24px rgba(0,0,0,.55);
}
.tv-body::after {
  position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.035); border-radius: 19px; content: ''; pointer-events: none;
}
.tv-screen-bezel {
  position: relative; padding: 10px; overflow: hidden;
  border: 1px solid #111; border-radius: 18px;
  background: linear-gradient(145deg,#090a0a,#18191a 45%,#080909);
  box-shadow: inset 0 4px 13px #000, 0 1px 0 rgba(255,255,255,.09);
}
.tv-screen {
  position: relative; display: flex; width: 100%; aspect-ratio: 4/3; overflow: hidden;
  align-items: center; justify-content: center; flex-direction: column; isolation: isolate;
  border-radius: 45% / 5%;
  background: radial-gradient(ellipse at 50% 42%,#18231d 0,#0b100e 57%,#030504 100%);
  box-shadow: inset 0 0 40px 12px #000, 0 0 2px #92c89a;
}
.tv-screen::after {
  position: absolute; inset: -1%; z-index: 11; border-radius: inherit; content: ''; pointer-events: none;
  background: linear-gradient(112deg,rgba(255,255,255,.09),transparent 19% 73%,rgba(255,255,255,.025)), radial-gradient(ellipse,transparent 58%,rgba(0,0,0,.55));
}
.screen-scanlines { position: absolute; inset: 0; z-index: 10; pointer-events: none; background: repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.18) 4px); }
.screen-glow { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: radial-gradient(ellipse,rgba(175,224,165,.075),transparent 68%); }
.screen-idle { display: flex; padding: 12px; flex-direction: column; align-items: center; gap: 10px; color: #8bb18c; opacity: .72; text-align: center; }
.screen-idle .no-signal { color: #bdd8b6; font: 600 clamp(22px,5vw,36px)/1 'IBM Plex Mono',monospace; letter-spacing: .13em; text-shadow: 0 0 12px rgba(157,232,157,.62); }
.screen-idle .hint { color: #86a785; font-size: clamp(9px,1.8vw,12px); letter-spacing: .1em; }
.screen-playing { position: relative; display: none; width: 100%; height: 100%; padding: 10px; flex-direction: column; align-items: center; justify-content: center; background: #080b09; }
.screen-playing.active { display: flex; }
.cover-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0; filter: blur(2px) brightness(.35) saturate(.75); transition: opacity .8s; }
.cover-bg.visible { opacity: 1; }
.screen-playing::before { position: absolute; inset: 0; z-index: 1; content: ''; background: linear-gradient(180deg,rgba(0,0,0,.13),rgba(0,0,0,.6)); }
.screen-playing .vinyl-wrap,.screen-playing .song-info { position: relative; z-index: 2; }
.vinyl-wrap { display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.vinyl {
  position: relative; width: clamp(78px,18vw,142px); height: clamp(78px,18vw,142px); border: 1px solid #464541; border-radius: 50%;
  background: repeating-radial-gradient(circle,#181817 0 2px,#22211e 3px 4px,#121312 5px 7px);
  box-shadow: 0 0 0 5px rgba(0,0,0,.46), 0 7px 16px #000, inset 0 0 8px #000;
}
.vinyl::before { position:absolute; inset:34%; border:1px solid #7f2523; border-radius:50%; content:''; background:radial-gradient(circle,#b7a581 0 13%,#8c2522 14% 70%,#481a18 72%); }
.vinyl.spinning { animation: spin 2.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.vinyl-center { position:absolute; top:50%;left:50%;z-index:2;width:7px;height:7px;transform:translate(-50%,-50%);border:1px solid #ccc2a4;border-radius:50%; }
.vinyl-center-placeholder { width:100%;height:100%;border-radius:50%;background:#d3c8ae; }
.song-info { width:100%;text-align:center; }
.song-title { max-width:90%;margin:auto;overflow:hidden;color:#d4ebce;font:600 clamp(15px,3vw,25px)/1.12 'Barlow Condensed',sans-serif;letter-spacing:.12em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 10px #000; }
.song-artist { margin-top:4px;color:#c1aa82;font:11px 'IBM Plex Mono',monospace;letter-spacing:.08em; }
.progress-bar-wrap { width:77%;height:3px;margin:12px auto 0;overflow:hidden;background:rgba(255,255,255,.18); }
.progress-bar-fill { width:0;height:100%;background:#b1d0a4;box-shadow:0 0 8px #a4d19a;transition:width .5s linear; }
.tv-bottom { display:flex;align-items:center;justify-content:space-between;padding:11px 5px 0; }
.tv-brand { color:#a3a09a;font:600 9px 'Barlow Condensed',sans-serif;letter-spacing:.22em;text-transform:uppercase; }
.tv-indicator { width:6px;height:6px;border-radius:50%;background:#d48a47;box-shadow:0 0 8px #d48a47;animation:blink 2s ease-in-out infinite; }
@keyframes blink { 50% { opacity:.3; } }
.tv-knobs { display:flex;gap:8px; }
.tv-knob { width:19px;height:19px;border:1px solid #555;border-radius:50%;background:radial-gradient(circle at 32% 28%,#777,#333 40%,#191a1b 78%);box-shadow:0 2px 3px #090909; }
.tv-legs { display:flex;justify-content:space-between;width:76%;margin:-1px auto 0; }
.tv-leg { width:30px;height:24px;border:1px solid #242424;border-top:0;border-radius:0 0 5px 5px;background:linear-gradient(90deg,#171819,#343536,#1a1b1c); }

/* VCR controls, with real deck proportions and a soft amber status readout. */
.vcr-wrap { position:relative;z-index:3;width:min(520px,91vw);margin-top:-1px; }
.vcr-body { position:relative;padding:14px 17px 24px;border:1px solid #494a4b;border-radius:4px 4px 9px 9px;background:linear-gradient(180deg,#414243 0,#303132 10%,#222324 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 0 #121314,0 13px 22px rgba(0,0,0,.55); }
.vcr-top { display:flex;align-items:center;gap:12px;margin-bottom:12px; }
.vcr-slot { position:relative;display:flex;height:29px;flex:1;overflow:hidden;align-items:center;justify-content:center;border:1px solid #090a0a;border-radius:2px;background:linear-gradient(#0b0c0c,#161717 48%,#050606);box-shadow:inset 0 3px 6px #000; }
.vcr-slot-label { color:#484944;font-size:9px;letter-spacing:.2em; }
.vhs-in-slot { position:absolute;inset:3px;display:none;align-items:center;justify-content:center;border-radius:1px;color:rgba(255,255,255,.88);font-size:9px;letter-spacing:.12em;text-shadow:0 1px 2px #000; }
.vhs-in-slot.visible { display:flex; }
.slot-red{background:#8e3931}.slot-blue{background:#354d68}.slot-green{background:#3c614a}.slot-yellow{background:#8a7041}.slot-purple{background:#65506d}
.vcr-display { min-width:88px;padding:4px 9px;border:1px solid #17180f;border-radius:2px;background:linear-gradient(#17190f,#0b0c08);color:#e2b873;font:500 16px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-align:center;text-shadow:0 0 8px rgba(237,177,91,.62);box-shadow:inset 0 1px 5px #000,0 0 7px rgba(226,184,115,.08);white-space:nowrap; }
.vcr-controls { display:flex;flex-wrap:wrap;align-items:center;gap:7px; }
.vcr-btn { padding:6px 11px;border:1px solid #515253;border-radius:3px;background:linear-gradient(180deg,#494a4b,#303132 48%,#272829);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 2px #151616;color:#d0cec7;font:600 11px 'Barlow Condensed',sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:filter .15s,border-color .15s,transform .1s;white-space:nowrap;touch-action:manipulation; }
.vcr-btn:hover { filter:brightness(1.25);border-color:#9b9b92; }
.vcr-btn:active { transform:translateY(1px); }
.vcr-btn.active { border-color:#b5d2a8;color:#d2edc6;box-shadow:0 0 7px rgba(172,216,153,.17),inset 0 1px 0 rgba(255,255,255,.12); }
.vcr-btn.eject-btn { margin-left:auto;border-color:#675045;color:#e2b6a2; }
.vcr-btn:focus-visible,.volume-slider:focus-visible,.vhs-tape:focus-visible { outline:2px solid #e4bc78;outline-offset:3px; }
.vcr-brand { position:absolute;right:15px;bottom:6px;color:#817f79;font:600 8px 'Barlow Condensed',sans-serif;letter-spacing:.23em;text-transform:uppercase; }
.vcr-volume { display:flex;align-items:center;gap:9px;margin-top:12px; }
.vcr-volume-label { color:#a5a39c;font:600 10px 'Barlow Condensed',sans-serif;letter-spacing:.1em; }
.vcr-volume-icon { font-size:13px; }
.volume-slider { flex:1;height:3px;border:0;border-radius:3px;outline:none;appearance:none;background:linear-gradient(90deg,#c6aa73 var(--vol,80%),#101111 var(--vol,80%));cursor:pointer; }
.volume-slider::-webkit-slider-thumb { width:12px;height:12px;border:1px solid #ddd0b3;border-radius:50%;appearance:none;background:radial-gradient(circle at 32% 28%,#e1d6bc,#777365);box-shadow:0 1px 3px #000; }
.volume-slider::-moz-range-thumb { width:12px;height:12px;border:1px solid #ddd0b3;border-radius:50%;background:radial-gradient(circle at 32% 28%,#e1d6bc,#777365);box-shadow:0 1px 3px #000; }
.volume-value { min-width:34px;color:#cfb179;font-size:10px;text-align:right; }

/* Wooden shelf and individually molded cassettes. The collection scrolls on small screens. */
.table-surface { display:flex;width:min(860px,98vw);min-height:140px;margin-top:5px;padding:16px 18px 13px;overflow:visible;align-items:flex-end;align-content:flex-end;justify-content:center;flex-wrap:wrap;gap:12px clamp(10px,1.8vw,18px);border:1px solid #60432b;border-bottom:0;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#62452f 0,#422d1e 9%,#332419 100%);box-shadow:inset 0 1px 0 rgba(255,222,174,.2),inset 0 12px 20px rgba(0,0,0,.15),0 -5px 18px rgba(0,0,0,.17); }
.table-edge { width:min(860px,98vw);height:13px;border:1px solid #67472d;border-top:1px solid #806044;border-radius:0 0 5px 5px;background:linear-gradient(180deg,#64472f,#302116);box-shadow:0 10px 18px rgba(0,0,0,.4); }
.vhs-tape { position:relative;width:clamp(48px,7.2vw,72px);flex:0 0 clamp(48px,7.2vw,72px);cursor:pointer;transform-origin:bottom center;transition:transform .2s,filter .2s;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation; }
@media (hover:hover) { .vhs-tape:hover { z-index:2;transform:translateY(-7px);filter:brightness(1.12); } .vhs-tape:hover .vhs-tooltip { opacity:1; } }
.vhs-tape:focus-visible { outline:none; }
.vhs-body { position:relative;width:100%;aspect-ratio:80/110;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:5px 5px 3px 3px;background:linear-gradient(145deg,#3a5365,#202f3b 55%,#141d24);box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 -5px 8px rgba(0,0,0,.35),1px 5px 8px rgba(0,0,0,.55); }
.vhs-body::before { position:absolute;inset:0;z-index:2;border-radius:inherit;content:'';pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.13),transparent 25% 72%,rgba(0,0,0,.16)); }
.vhs-body::after { position:absolute;top:53%;left:8%;right:8%;height:1px;content:'';background:rgba(0,0,0,.35);box-shadow:0 1px rgba(255,255,255,.08); }
.vhs-label { position:absolute;top:8%;left:8%;right:8%;height:39%;z-index:1;display:flex;padding:4px 3px;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.18);border-radius:2px;background:linear-gradient(180deg,#e6e0cf,#c9c2b1);box-shadow:0 1px 3px rgba(0,0,0,.45); }
.vhs-label-title { max-width:100%;overflow:hidden;color:#24231f;font:600 clamp(7px,1.25vw,10px)/1.15 'IBM Plex Mono',monospace;text-align:center;white-space:pre-line;word-break:break-word; }
.vhs-label-line { width:78%;height:1px;margin:3px 0;background:#415367; }
.vhs-window { position:absolute;bottom:17%;left:11%;right:11%;height:21%;display:flex;padding:0 5px;align-items:center;justify-content:space-around;border:1px solid #080a0b;border-radius:3px;background:linear-gradient(180deg,#131719,#030505 50%,#0e1011);box-shadow:inset 0 2px 5px #000,0 1px rgba(255,255,255,.1); }
.vhs-reel { position:relative;width:clamp(13px,2.3vw,20px);height:clamp(13px,2.3vw,20px);border:1px solid #555650;border-radius:50%;background:radial-gradient(circle at 35% 32%,#77766c,#262725 45%,#0d0e0d 70%);box-shadow:0 0 0 2px #171918,0 1px 3px #000; }
.vhs-reel::before { position:absolute;inset:22%;border:1px solid #77766e;border-radius:50%;content:'';background:#101111; }
.vhs-reel::after { position:absolute;top:45%;left:5%;width:90%;height:1px;content:'';background:#aaa89d;transform:rotate(35deg); }
.vhs-bottom-bar { position:absolute;right:0;bottom:0;left:0;height:12%;display:flex;align-items:center;justify-content:center;border-top:1px solid rgba(255,255,255,.12);background:linear-gradient(#252728,#141617); }
.vhs-tape-num { color:rgba(255,255,255,.58);font:8px 'IBM Plex Mono',monospace;letter-spacing:.12em; }
.vhs-shadow { width:80%;height:7px;margin:2px auto 0;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.58),transparent 70%); }
.vhs-tooltip { position:absolute;bottom:112%;left:50%;z-index:10;padding:5px 8px;transform:translateX(-50%);border:1px solid #776a51;border-radius:3px;background:#171613;color:#eee2c9;font-size:10px;opacity:0;pointer-events:none;transition:opacity .15s;white-space:nowrap; }
.vhs-red .vhs-body{background:linear-gradient(145deg,#7e403b,#4b2725 55%,#271816)}.vhs-red .vhs-label-line{background:#87433d}
.vhs-blue .vhs-body{background:linear-gradient(145deg,#536b7a,#304453 55%,#182833)}.vhs-blue .vhs-label-line{background:#486477}
.vhs-green .vhs-body{background:linear-gradient(145deg,#536a55,#354835 55%,#1b281d)}.vhs-green .vhs-label-line{background:#52694b}
.vhs-yellow .vhs-body{background:linear-gradient(145deg,#887849,#574b2c 55%,#332c19)}.vhs-yellow .vhs-label-line{background:#9a8040}
.vhs-purple .vhs-body{background:linear-gradient(145deg,#716076,#48394d 55%,#281f2d)}.vhs-purple .vhs-label-line{background:#765b7d}
.rewinding .vinyl { animation:spin .3s linear infinite reverse!important; }
.screen-fade { position:absolute;inset:0;z-index:8;background:#000;opacity:0;pointer-events:none;transition:opacity .4s; }
.screen-fade.on { opacity:1; }
audio { display:none; }

@media(max-width:600px) {
  body { padding:22px 8px 42px; }
  .tv-body { padding:12px 12px 13px;border-radius:17px 17px 12px 12px; }
  .tv-screen-bezel { padding:6px;border-radius:13px; }
  .vcr-body { padding:10px 11px 24px; }
  .vcr-controls { gap:5px; }
  .vcr-btn { padding:6px 8px;font-size:10px; }
  .vcr-brand { font-size:7px; }
  .table-surface { min-height:118px;padding:13px 8px 10px;gap:10px 8px; }
}
@media(max-width:380px) {
  .vcr-top { gap:7px; }
  .vcr-display { min-width:69px;padding-inline:5px;font-size:13px; }
  .vcr-btn { padding:5px 6px;font-size:9px; }
  .vcr-volume-label { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
}