@font-face{font-family:LED;src:local("Courier New")}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{overflow-x:hidden;background:#171923;color:#e8e8e8;font-family:Arial,sans-serif}.desktop{--scale:1;min-height:100vh;padding:52px 20px 70px;background:radial-gradient(circle at 50% 10%,#313445 0,#171923 42%,#0e0f15 100%);display:flex;justify-content:flex-start;align-items:center;flex-direction:column}.winamp-stack{--face:#35364c;--face-2:#242538;--deep:#10111a;--edge-hi:#85869a;--edge-mid:#52536a;--edge-lo:#080910;--accent:#d4d039;--led:#00f13d;--led-dim:#08731f;--select:#061bd4;--button:#c3c5cc;--button-text:#20212b;width:min(550px,96vw);filter:drop-shadow(14px 18px 14px rgba(0,0,0,.52));transform:translate(var(--drag-x,0),var(--drag-y,0));touch-action:none;user-select:none}.amp-window{width:100%;background:var(--face);border:4px ridge var(--edge-mid);box-shadow:inset 2px 2px 0 var(--edge-hi),inset -2px -2px 0 var(--edge-lo)}.amp-window+.amp-window{margin-top:-2px}.titlebar{height:30px;padding:2px 6px;display:flex;align-items:center;gap:6px;color:#f2f2f3;text-shadow:1px 1px #000;font-size:16px;font-weight:900;letter-spacing:1px;background:linear-gradient(#2c2d43,#171828 48%,#24253a 52%,#11121d);border-bottom:2px solid var(--edge-lo);cursor:default}.titlebar i{height:7px;flex:1;background:repeating-linear-gradient(0deg,var(--accent) 0 2px,#777a24 2px 4px);border:1px solid #121316}.titlebar strong{white-space:nowrap}.bolt{color:var(--accent);font-size:24px;line-height:1}.micro-button{width:20px;height:20px;padding:0;background:var(--face);color:var(--accent);border:2px outset var(--edge-hi);font:bold 12px Arial}.window-body{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--face) 0 55%,var(--face-2));transition:max-height .15s ease}.main-body{height:210px}.amp-window.is-shaded .window-body{display:none}.play-state{position:absolute;left:37px;top:26px;color:var(--led);font:34px LED,monospace}.time-display{position:absolute;left:83px;top:20px;width:120px;height:52px;padding:0;border:0;background:#050807;color:var(--led);font:bold 44px LED,monospace;letter-spacing:-5px;text-align:center;text-shadow:0 0 5px color-mix(in srgb,var(--led),transparent 35%);cursor:pointer}.led-text{font-family:LED,"Courier New",monospace;color:var(--led);text-shadow:0 0 5px color-mix(in srgb,var(--led),transparent 35%)}.analyzer-wrap{position:absolute;left:16px;top:80px;width:185px;height:57px;background:#050807;border:3px inset var(--edge-mid)}#analyzer{width:100%;height:100%;display:block}.analyzer-mode{position:absolute;left:2px;top:2px;border:0;background:transparent;color:transparent;font:7px monospace;width:100%;height:100%}.track-lcd{position:absolute;left:214px;right:15px;top:20px;height:34px;padding:5px 9px;background:#030504;border:4px inset var(--edge-mid);overflow:hidden}.marquee{overflow:hidden;white-space:nowrap}.marquee span{display:inline-block;min-width:100%;color:var(--led);font:bold 19px LED,monospace;text-shadow:0 0 5px color-mix(in srgb,var(--led),transparent 35%);animation:marquee 12s linear infinite}@keyframes marquee{0%,15%{transform:translateX(0)}85%,100%{transform:translateX(min(0px,calc(-100% + 310px)))}}.audio-info{position:absolute;left:217px;top:65px;font:bold 24px LED,monospace}.audio-info small{margin:0 12px 0 4px;color:#d0d0d4;font:bold 17px Arial;text-shadow:1px 1px #000}.channel-info{position:absolute;right:20px;top:67px;font:bold 17px Arial;color:#8f8f9c;text-shadow:1px 1px #000}.channel-info b{margin-left:12px;color:var(--led)}.slider-line{position:absolute;height:22px}.slider-line input,.seek-line input{width:100%;height:100%;margin:0;appearance:none;background:linear-gradient(var(--edge-lo),#05050a);border:3px inset var(--edge-mid)}.slider-line input::-webkit-slider-thumb,.seek-line input::-webkit-slider-thumb{appearance:none;width:28px;height:23px;background:var(--button);border:4px outset #e8e8eb}.slider-line input::-moz-range-thumb,.seek-line input::-moz-range-thumb{width:24px;height:19px;background:var(--button);border:4px outset #e8e8eb}.volume-line{left:217px;top:103px;width:126px}.volume-line:before{content:"";position:absolute;z-index:2;pointer-events:none;left:3px;right:3px;top:8px;height:5px;background:linear-gradient(90deg,#e68220,#f2a12b 72%,#586034)}.balance-line{left:354px;top:103px;width:54px}.balance-line:before{content:"";position:absolute;z-index:2;pointer-events:none;left:3px;right:3px;top:8px;height:5px;background:#20b742}.mini-toggles{position:absolute;right:16px;top:101px;display:flex;gap:8px}.mini-toggles button,.eq-actions button,.mode-buttons button,.preset-button{height:27px;background:var(--button);color:#545561;font:bold 15px Arial;border:4px outset #e8e8eb}.mini-toggles button.is-on,.eq-actions button.is-on,.mode-buttons button[aria-pressed=true]{color:var(--button-text);border-style:inset}.mini-toggles button:before,.eq-actions i,.mode-buttons i{content:"";display:inline-block;width:7px;height:7px;margin-right:4px;background:var(--led-dim);box-shadow:inset 1px 1px #041}.mini-toggles .is-on:before,.eq-actions .is-on i,.mode-buttons button[aria-pressed=true] i{background:var(--led);box-shadow:0 0 5px var(--led)}.seek-line{position:absolute;left:17px;right:16px;top:142px;height:22px}.transport{position:absolute;left:18px;bottom:7px;display:flex;gap:3px}.transport button{width:44px;height:38px;padding:0;background:linear-gradient(135deg,#e4e5e9,var(--button));color:var(--button-text);font:bold 20px Arial;border:5px outset #ececef;text-shadow:1px 1px #fff}.transport button:active,.playlist-mini button:active{border-style:inset}.mode-buttons{position:absolute;right:65px;bottom:9px;display:flex;gap:6px}.mode-buttons button{height:33px}.logo-mark{position:absolute;right:14px;bottom:6px;color:#f2ce12;font:bold italic 46px Georgia;text-shadow:3px 3px #d2640a;transform:rotate(10deg)}.eq-body{height:210px;background:linear-gradient(145deg,var(--face),var(--face-2))}.eq-actions{position:absolute;left:20px;top:16px;display:flex;gap:4px}.eq-actions button{font-size:14px}.eq-actions i{vertical-align:1px}.eq-body canvas{position:absolute;left:174px;top:10px;width:235px;height:49px}.preamp{position:absolute!important;left:38px;top:71px}.eq-slider{width:30px;height:115px;display:flex;flex-direction:column;align-items:center}.eq-slider input{width:100px;transform:rotate(-90deg) translate(-49px,-36px);transform-origin:center;appearance:none;background:transparent}.eq-slider input::-webkit-slider-runnable-track{height:7px;background:var(--accent);border:2px inset var(--edge-mid)}.eq-slider input::-webkit-slider-thumb{appearance:none;width:25px;height:25px;margin-top:-11px;background:var(--button);border:4px outset #eee}.eq-slider input::-moz-range-track{height:5px;background:var(--accent)}.eq-slider input::-moz-range-thumb{width:19px;height:19px;background:var(--button);border:4px outset #eee}.eq-slider span{position:absolute;bottom:-11px;width:50px;text-align:center;color:#e7e7e9;font:bold 12px Arial;text-shadow:1px 1px #000}.eq-scale{position:absolute;left:78px;top:68px;height:118px;display:flex;flex-direction:column;justify-content:space-between;color:#dbdbde;font:bold 12px Arial}.eq-bands{position:absolute;left:151px;right:19px;top:71px;display:flex;justify-content:space-between}.eq-bands .eq-slider{position:relative}.preset-button{position:absolute;right:21px;top:11px}.preset-menu{position:absolute;z-index:4;right:20px;top:42px;padding:4px;background:#090a0f;border:2px solid var(--edge-hi)}.preset-menu button{display:block;width:100%;padding:5px 14px;border:0;background:#090a0f;color:var(--led);font:13px monospace;text-align:left}.preset-menu button:hover{background:var(--select);color:#fff}.playlist-body{height:314px;padding:16px 23px 120px}.track-list{height:174px;margin:0;padding:8px 10px;overflow:auto;background:#020302;border:4px inset var(--edge-mid);color:var(--led);font:bold 18px LED,monospace;line-height:1.32;list-style:none}
.track-list li{display:flex;align-items:baseline;gap:9px;padding:1px 6px;cursor:default;white-space:nowrap}
.track-list li .index{flex:none;min-width:1.7em;text-align:right}
.track-list li .name{flex:1;overflow:hidden;text-overflow:ellipsis}
.track-list li .duration{flex:none}.track-list li.is-selected{background:var(--select);color:#75a4ff}.track-list li:focus-visible{outline:2px solid #fff;outline-offset:-2px}.track-list .duration{float:none}.playlist-footer{position:absolute;left:22px;right:21px;bottom:12px;display:flex;flex-direction:column;gap:6px}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.playlist-actions{display:flex;gap:4px}.playlist-actions button{width:57px;height:42px;padding:2px;background:linear-gradient(135deg,#e6e7eb,var(--button));color:var(--button-text);font:bold 12px Arial;border:5px outset #eee}.playlist-total{flex:none;width:160px;height:26px;padding:3px 9px;background:#020302;border:3px inset var(--edge-mid);font:bold 18px monospace}.playlist-mini{flex:none;display:flex;align-items:center;gap:2px}.playlist-mini button{width:25px;height:22px;padding:0;border:0;background:transparent;color:var(--accent);font:bold 13px Arial}.playlist-clock{display:inline-block;width:73px;margin-left:9px;padding:2px 5px;background:#020302;font:bold 19px monospace;text-align:right}.skin-rack{position:fixed;z-index:20;top:16px;right:18px;display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid #555765;background:#11131dcc;box-shadow:0 5px 18px #0008;font:10px monospace;letter-spacing:.08em}.skin-chip{padding:5px 8px;border:1px solid #656777;background:#242632;color:#d8d8dc;font:11px monospace}.skin-chip.is-active{border-color:#d4d039;color:#f2ee62}.saved-menu{position:absolute;z-index:6;right:0;bottom:52px;min-width:230px;max-height:190px;overflow:auto;padding:4px;background:#090a0f;border:2px solid var(--edge-hi)}
.saved-menu p{margin:0;padding:8px 10px;color:#8f8f9c;font:11px monospace}
.saved-menu .saved-row{display:flex;gap:4px}
.saved-menu .saved-row button{border:0;background:#090a0f;color:var(--led);font:12px monospace;text-align:left;padding:6px 8px}
.saved-menu .saved-row button.saved-open{flex:1}
.saved-menu .saved-row button.saved-delete{color:var(--danger,#ff6b6b);flex:none}
.saved-menu .saved-row button:hover{background:var(--select);color:#fff}
.info-dialog{position:fixed;z-index:40;left:50%;top:50%;transform:translate(-50%,-50%);width:min(340px,92vw);background:var(--face,#35364c);color:#eaeaee;border:4px ridge var(--edge-mid,#52536a);box-shadow:0 12px 34px #000b;font:12px Arial}
.info-dialog header{display:flex;align-items:center;justify-content:space-between;padding:4px 6px;background:linear-gradient(#2c2d43,#171828);font:bold 12px Arial;letter-spacing:1px}
.info-dialog header button{width:22px;height:20px;background:var(--button,#c3c5cc);color:#20212b;border:2px outset #e8e8eb;font:bold 11px Arial}
.info-dialog dl{margin:0;padding:10px 12px;display:grid;grid-template-columns:auto 1fr;gap:5px 10px;background:#030504}
.info-dialog dt{color:#8f8f9c;font:bold 11px Arial;text-transform:uppercase}
.info-dialog dd{margin:0;color:var(--led,#00f13d);font:bold 12px LED,monospace;word-break:break-word}
.drop-note{position:fixed;left:50%;bottom:15px;transform:translateX(-50%);width:auto;max-width:94vw;margin:0;padding:7px 12px;border:1px solid #555765;background:#11131ddd;box-shadow:0 4px 14px #0008;color:#c8cad3;font:bold 11px monospace;text-align:center;letter-spacing:.06em;white-space:nowrap}.desktop.is-dragover:after{content:"DROP AUDIO OR MIDI TO ADD TO PLAYLIST";position:fixed;inset:20px;z-index:30;display:grid;place-items:center;border:3px dashed var(--accent,#d4d039);background:#080910e8;color:#fff;font:bold 18px monospace}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #fff!important;outline-offset:2px}.winamp-stack[data-skin=mmd3]{--face:#737d89;--face-2:#273f52;--deep:#0b1b27;--edge-hi:#d6e1e7;--edge-mid:#70818d;--edge-lo:#162633;--accent:#8ad9e8;--led:#0c4e67;--led-dim:#6594a0;--select:#287f9b;--button:#d4d9db;--button-text:#17384b}.winamp-stack[data-skin=mmd3] .amp-window{border-radius:16px 5px}.winamp-stack[data-skin=mmd3] .titlebar{border-radius:11px;background:linear-gradient(#274f6d,#172d41);color:#cdeeff}.winamp-stack[data-skin=mmd3] .track-lcd,.winamp-stack[data-skin=mmd3] .time-display,.winamp-stack[data-skin=mmd3] .track-list,.winamp-stack[data-skin=mmd3] .playlist-total,.winamp-stack[data-skin=mmd3] .playlist-clock{background:#b8d6da}.winamp-stack[data-skin=cyber]{--face:#321b48;--face-2:#171022;--deep:#08040d;--edge-hi:#a272bd;--edge-mid:#653e7c;--edge-lo:#09040f;--accent:#ff56c7;--led:#4effd7;--led-dim:#267d6a;--select:#7a1ec0;--button:#3e2455;--button-text:#63ffe0}.winamp-stack[data-skin=cyber] .titlebar{background:linear-gradient(#48215c,#180a24);color:#ffb6e7}.winamp-stack[data-skin=cyber] .transport button,.winamp-stack[data-skin=cyber] .playlist-actions button{background:linear-gradient(135deg,#744c89,var(--button));color:#5effdf;border-color:#926aaa}.winamp-stack[data-skin=cyber] .track-lcd,.winamp-stack[data-skin=cyber] .time-display,.winamp-stack[data-skin=cyber] .track-list,.winamp-stack[data-skin=cyber] .playlist-total,.winamp-stack[data-skin=cyber] .playlist-clock{background:#07030b}@media(max-width:-1px){.desktop{padding:58px 4px 65px;justify-content:flex-start}.winamp-stack{width:98vw;transform:none!important}.titlebar{height:26px;font-size:12px}.main-body{height:190px}.time-display{left:65px;width:100px;font-size:36px}.play-state{left:23px}.analyzer-wrap{left:8px;width:160px}.track-lcd{left:176px;right:8px}.audio-info{left:180px}.channel-info{right:8px;font-size:12px}.volume-line{left:180px;width:98px}.balance-line{left:285px;width:63px}.mini-toggles{right:7px}.seek-line{left:8px;right:8px;top:130px}.transport{left:8px}.transport button{width:39px}.mode-buttons{right:48px}.mode-buttons button{font-size:11px;padding:2px}.logo-mark{font-size:36px}.eq-body{height:190px}.eq-body canvas{left:140px;width:210px}.eq-bands{left:110px;right:8px}.eq-slider{width:26px}.eq-scale{left:65px}.playlist-body{height:246px;padding:10px 8px 69px}.track-list{height:169px;font-size:14px}.playlist-footer{left:7px;right:7px}.playlist-actions button{width:58px;font-size:10px}.playlist-total{left:auto;right:0;width:133px}.playlist-mini{left:auto;right:0}.skin-rack{left:50%;right:auto;transform:translateX(-50%);white-space:nowrap}.skin-rack span{display:none}.drop-note{font-size:9px}}@media(prefers-reduced-motion:reduce){.marquee span{animation:none}}

@media(max-width:620px){
  body{overflow-x:hidden}
  .desktop{display:block;padding:56px 4px 48px;overflow:hidden}
  .winamp-stack{position:relative;left:50%;width:550px;margin-left:-275px;transform:scale(.98)!important;transform-origin:top center}
  .skin-rack{position:absolute;left:50%;right:auto;top:10px;transform:translateX(-50%);white-space:nowrap}
  .skin-rack>span{display:none}
  .drop-note{position:absolute;bottom:10px;width:94vw;font-size:9px;white-space:normal}
}
@media(max-width:560px){.winamp-stack{transform:scale(.96)!important}.desktop{min-height:840px}}
@media(max-width:520px){.winamp-stack{transform:scale(.88)!important}.desktop{min-height:790px}}
@media(max-width:480px){.winamp-stack{transform:scale(.81)!important}.desktop{min-height:740px}}
@media(max-width:440px){.winamp-stack{transform:scale(.74)!important}.desktop{min-height:690px}}
@media(max-width:400px){.winamp-stack{transform:scale(.68)!important}.desktop{min-height:640px}}
@media(max-width:360px){.winamp-stack{transform:scale(.61)!important}.desktop{min-height:590px}}

/* TARDIS console room: deep Big Finish-era blue, amber time-rotor glow, roundel walls. */
.winamp-stack[data-skin=tardis]{
  --face:#123761;--face-2:#0a1e39;--deep:#040b16;
  --edge-hi:#4f86c6;--edge-mid:#20507f;--edge-lo:#03080f;
  --accent:#e8b34a;--led:#ffb43c;--led-dim:#6b4a14;
  --select:#2f1a63;--button:#b9c6d6;--button-text:#0d2440;
}
.winamp-stack[data-skin=tardis] .amp-window{border-style:ridge;box-shadow:inset 2px 2px 0 var(--edge-hi),inset -2px -2px 0 var(--edge-lo),0 0 18px #0b2a4d inset}
.winamp-stack[data-skin=tardis] .window-body{
  background:
    radial-gradient(circle at 27px 27px,#1a4d84 0,#1a4d84 9px,#12385f 9px,#12385f 12px,transparent 12px) 0 0/54px 54px,
    linear-gradient(155deg,#143b66,#081a31);
}
.winamp-stack[data-skin=tardis] .titlebar{
  background:linear-gradient(#1d4e85,#0b2444 48%,#134272 52%,#071729);
  color:#ffdca1;text-shadow:0 0 6px #b97d12,1px 1px #000;
}
.winamp-stack[data-skin=tardis] .titlebar i{background:repeating-linear-gradient(0deg,var(--accent) 0 2px,#5d4614 2px 4px)}
.winamp-stack[data-skin=tardis] .time-display,
.winamp-stack[data-skin=tardis] .track-lcd,
.winamp-stack[data-skin=tardis] .track-list,
.winamp-stack[data-skin=tardis] .playlist-total,
.winamp-stack[data-skin=tardis] .playlist-clock,
.winamp-stack[data-skin=tardis] .analyzer-wrap{background:#04101d}
.winamp-stack[data-skin=tardis] .track-list li.is-selected{background:var(--select);color:#ffd591}
.winamp-stack[data-skin=tardis] .transport button,
.winamp-stack[data-skin=tardis] .playlist-actions button{background:linear-gradient(135deg,#dbe4ee,var(--button));color:var(--button-text);border-color:#eef3f8}
.winamp-stack[data-skin=tardis] .channel-info{color:#6f90b5}
.winamp-stack[data-skin=tardis] .audio-info small{color:#c3d6ec}
.winamp-stack[data-skin=tardis] .eq-scale,
.winamp-stack[data-skin=tardis] .eq-slider span{color:#d8e6f6}
.winamp-stack[data-skin=tardis] .logo-mark{color:#ffc55a;text-shadow:3px 3px #7a3d06}
.winamp-stack[data-skin=tardis] .volume-line:before{background:linear-gradient(90deg,#b8801d,#e8b34a 72%,#3d4a5c)}
.winamp-stack[data-skin=tardis] .balance-line:before{background:#4f86c6}

/* 1997 hit counter. Lives inside .winamp-stack so it inherits each skin's
   --face / --led / --edge-* variables instead of hardcoding a palette. */
.visitor-counter{
  margin-top:6px;padding:7px 10px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:var(--face);border:4px ridge var(--edge-mid);
  box-shadow:inset 2px 2px 0 var(--edge-hi),inset -2px -2px 0 var(--edge-lo);
}
.visitor-label,.visitor-since{color:#e7e7e9;font:bold 11px Arial;letter-spacing:.09em;text-shadow:1px 1px #000}
.visitor-since{color:var(--edge-hi)}
.odometer{display:inline-flex;gap:2px;padding:3px;background:var(--deep);border:3px inset var(--edge-mid)}
.odometer b{
  display:grid;place-items:center;width:22px;height:30px;
  background:linear-gradient(#000,#0b0b0b 48%,#000 52%,#0b0b0b);
  color:var(--led);font:bold 23px LED,"Courier New",monospace;
  text-shadow:0 0 6px color-mix(in srgb,var(--led),transparent 40%);
  border:1px solid var(--edge-lo);
}
.odometer b.is-rolling{animation:odometer-roll .45s ease-out}
@keyframes odometer-roll{
  0%{transform:translateY(-70%);opacity:.15}
  60%{transform:translateY(6%);opacity:1}
  100%{transform:translateY(0)}
}
@media(max-width:620px){
  .visitor-counter{gap:6px;padding:5px 6px}
  .visitor-label,.visitor-since{font-size:9px}
  .odometer b{width:17px;height:24px;font-size:18px}
}
@media(prefers-reduced-motion:reduce){.odometer b.is-rolling{animation:none}}

/* Last-updated stamp: its own full-width row under the counter, deliberately small. */
.build-stamp{flex-basis:100%;text-align:center;color:var(--edge-hi);font:bold 9px "Courier New",monospace;letter-spacing:.08em;text-shadow:1px 1px #000;opacity:.85}
.build-stamp[hidden]{display:none}

/* MMD3's --led is a DARK teal meant for its pale LCD panels, so the default
   black digit cells render dark-on-dark. Give it a light well instead. */
.winamp-stack[data-skin=mmd3] .odometer{background:#8fb4bb}
.winamp-stack[data-skin=mmd3] .odometer b{
  background:linear-gradient(#cee5e9,#aacfd5 48%,#cee5e9 52%,#aacfd5);
  border-color:#6d949c;text-shadow:none;
}
