:root{color-scheme:dark;font-family:Arial,sans-serif;background:#c5cbd0}*{box-sizing:border-box}body{margin:0;min-height:100dvh;padding:18px 8px;background:radial-gradient(ellipse at 50% 20%,#eff1f2,#c1c8ce);display:flex;justify-content:center;align-items:flex-start}.winamp{width:min(100%,430px);filter:drop-shadow(0 8px 12px #0008)}.window{background:linear-gradient(115deg,#353b4c,#171925 42%,#272b3b);border:2px solid #0a0b10;box-shadow:inset 1px 1px #7d8391,inset -1px -1px #08090d,0 1px 0 #8c929b;padding:4px 6px 7px;color:#d7dded}.titlebar{height:17px;display:flex;align-items:center;gap:4px;font:bold 10px Arial,sans-serif;letter-spacing:1.1px;color:#d5d9e8;text-shadow:1px 1px #000;white-space:nowrap}.title-line{height:7px;flex:1;min-width:4px;border-top:1px solid #7d8290;border-bottom:1px solid #626879;background:linear-gradient(#12131b 42%,#8a8e95 45%,#111 58%)}.window-icons{font-size:10px;letter-spacing:0;color:#acae8c}.spark,.lightning{font-weight:bold;color:#f6d66b;text-shadow:1px 1px #000}.player-screen{display:grid;grid-template-columns:38% 1fr;gap:5px;margin-top:3px}.display-left,.marquee{background:#060b08;border:2px inset #464b57;box-shadow:inset 0 0 8px #000;color:#00f33c}.display-left{position:relative;height:61px;padding:3px 4px;overflow:hidden}.clock{font:26px 'Courier New',monospace;letter-spacing:1px;color:#00e63c;text-shadow:0 0 6px #12c600}.indicator{color:#00ec36;font-size:12px}#spectrum{display:block;width:100%;height:23px;image-rendering:pixelated}.display-right{min-width:0}.marquee{height:20px;overflow:hidden;white-space:nowrap;padding:2px 3px;font:bold 12px Arial;color:#18eb36}.audio-info{height:20px;display:flex;align-items:center;gap:4px;color:#00e340;font:bold 12px 'Courier New',monospace}.audio-info>span:not(.stereo){background:#080b08;padding:1px 3px}.audio-info small{font:9px Arial;color:#cad4dc}.audio-info .stereo{margin-left:auto;color:#9da4ab;font:9px Arial}.stereo b{color:#00e834}.level-row{display:flex;gap:3px;align-items:center}.slider-label{display:flex;align-items:center;gap:2px;min-width:0;flex:1;font:8px Arial;color:#c4cbd1}.slider-label input{min-width:0;width:100%}.balance-label{flex:.7}input[type=range]{appearance:none;height:9px;background:linear-gradient(#16171e 0 20%,#de713a 20% 75%,#5c2c22 75%);border:1px solid #08090d;border-radius:0;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border:1px solid #171821;background:linear-gradient(90deg,#dee5e6,#929fa3 45%,#e1e6e3);box-shadow:1px 1px #000}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:1px solid #171821;border-radius:0;background:#c5cece}.tiny,.transport button{color:#151928;font:bold 10px Arial;border:2px outset #c4cbd0;background:linear-gradient(#dce5e7,#8b9da4);border-radius:0;box-shadow:1px 1px #000;cursor:pointer}.tiny{padding:2px 5px}.tiny:active,.transport button:active,.mode[aria-pressed=true],.tiny.active{border-style:inset;background:linear-gradient(#779091,#d2dcce)}.seek-label{display:block;margin:7px 2px}.seek-label input{display:block;width:100%;height:10px;background:linear-gradient(#101219,#52586c,#171923)}.transport{display:flex;align-items:center;gap:5px}.transport-group{display:flex;flex:1}.transport-group button{height:28px;min-width:0;flex:1;font-size:12px}.transport .mode{height:23px;padding:0 6px;font-size:9px}.lightning{font-size:28px;line-height:1;margin:0 3px;color:#f6c83f}.equalizer,.playlist{margin-top:2px}.eq-top{display:flex;gap:4px;align-items:center;margin:3px 0}.eq-curve{height:16px;flex:1;margin:0 5px;border-bottom:1px solid #5b6e60;background:linear-gradient(170deg,transparent 45%,#b1d966 48% 51%,transparent 54%)}.eq-sliders{display:grid;grid-template-columns:1.2fr repeat(10,1fr);gap:2px;height:89px}.eq-band{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:end;color:#dfe7df;font:8px Arial;gap:3px}.eq-band input{appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;width:12px;height:64px;accent-color:#e6c955;cursor:pointer}.preset-name{text-align:right;color:#bac8b1;font:9px 'Courier New',monospace;height:10px}.playlist-body{margin-top:3px;background:#030804;border:2px inset #727986;padding:3px;display:flex;flex-direction:column}.search input{display:block;width:100%;height:27px;background:#0a110b;border:1px solid #344833;color:#5dfa50;padding:3px 6px;font:12px 'Courier New',monospace;outline-color:#55c75e}.search input::placeholder{color:#598561}.track-list{height:min(45vh,390px);min-height:180px;overflow-y:auto;scrollbar-color:#a3acac #20252d;scrollbar-width:thin;padding-top:3px}.track{width:100%;display:flex;gap:5px;align-items:baseline;border:0;background:transparent;color:#36ed44;text-align:left;font:bold 12px Arial,sans-serif;line-height:1.4;padding:3px 2px;cursor:pointer}.track:hover{background:#123718}.track[aria-selected=true]{background:#082a9c;color:#f1f4ff}.track-number{flex:0 0 27px;text-align:right}.track-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.track-duration{color:inherit;opacity:.8}.message{color:#75c876;font:12px Arial;margin:12px 4px}.playlist-footer{display:flex;align-items:center;gap:8px;padding-top:5px;color:#49e64c;font:10px 'Courier New',monospace}.playlist-footer #status{margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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}[hidden]{display:none!important}button:focus-visible,input:focus-visible{outline:2px solid #ffef76;outline-offset:2px}@media(max-width:480px){body{padding:0;background:#171925}.winamp{width:100%;max-width:430px;filter:none}.window{padding-left:5px;padding-right:5px}.titlebar{height:20px}.transport-group button{height:36px}.transport .mode{height:30px}.track{min-height:34px;align-items:center;font-size:13px}.track-list{height:calc(100dvh - 310px);min-height:160px}.eq-sliders{height:82px}.eq-band input{height:58px}.player-screen{grid-template-columns:38% 1fr}.clock{font-size:clamp(19px,7vw,26px)}}

/* Classic Winamp bevels and a fixed three-panel layout. */
html, body { width:100%; height:100%; overflow:hidden; }
body { height:100dvh; min-height:0; padding:12px 8px; }
.winamp { height:100%; max-height:800px; min-height:0; display:flex; flex-direction:column; }
.player, .equalizer { flex:0 0 auto; }
.playlist { flex:1 1 0; min-height:0; display:flex; flex-direction:column; }
.playlist-body { flex:1 1 0; min-height:0; }
.track-list { flex:1 1 0; height:auto; min-height:0; overscroll-behavior:contain; touch-action:pan-y; }
.search { flex:0 0 auto; }
.playlist-footer { flex:0 0 auto; }
.transport { gap:4px; }
.transport-group { flex:1 1 auto; gap:2px; min-width:0; }
.transport-group button, .tiny, .transport .mode {
  border:1px solid #10151e;
  border-radius:0;
  background:linear-gradient(to bottom,#e8eff0 0%,#b8c8ce 14%,#a9bac2 46%,#849aa4 48%,#c4d1d3 92%,#829398 100%);
  box-shadow:inset 1px 1px #f7ffff,inset -1px -1px #53636c,1px 1px #08090c;
  color:#151d2b;
}
.transport-group button { height:27px; min-width:0; padding:3px; display:grid; place-items:center; }
.transport-group svg { display:block; width:19px; height:16px; fill:#243443; filter:drop-shadow(1px 1px #e4eef0); }
.transport-group button:active, .transport .mode[aria-pressed=true], .tiny.active, .tiny:active {
  background:linear-gradient(#73868d,#bacbd0); box-shadow:inset 1px 1px #34424a,inset -1px -1px #e7f1ed;
}
.transport .mode { height:21px; white-space:nowrap; }
.eq-band input { appearance:none; -webkit-appearance:none; writing-mode:vertical-lr; direction:rtl; width:14px; height:64px; margin:0; border:1px solid #141620; border-radius:0; background:linear-gradient(to right,#15171f 0 25%,#f5d749 26% 47%,#a98a23 48% 65%,#101219 66%); }
.eq-band input::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:11px; border:1px solid #0a0e16; border-radius:0; background:linear-gradient(#eff4f3 0%,#9cb0b7 35%,#c9d6d6 60%,#647982 100%); box-shadow:inset 1px 1px #fff,1px 1px #08090d; }
.eq-band input::-moz-range-thumb { width:12px; height:9px; border:1px solid #0a0e16; border-radius:0; background:linear-gradient(#eff4f3,#93a7ad,#cad9db); }
.eq-band input::-moz-range-track { width:5px; border:1px solid #141620; background:#e1c346; }
@media (max-width:480px) {
  body { padding:0; }
  .winamp { width:100%; max-height:none; }
  .transport-group button { height:34px; }
  .transport .mode { height:28px; }
  .track { min-height:34px; }
  .eq-band input { height:58px; }
}
@media (max-height:500px) {
  body { padding-top:0; padding-bottom:0; }
  .equalizer .eq-sliders { height:42px; }
  .equalizer .eq-band input { height:30px; }
  .equalizer .preset-name { display:none; }
  .display-left { height:48px; }
  #spectrum { height:14px; }
}
.playlist-filters { display:flex; gap:3px; padding:3px 0; flex:0 0 auto; }
.playlist-filters select { min-width:0; flex:1; height:28px; border:1px solid #536459; border-radius:0; background:#101811; color:#7fe981; font:11px Arial,sans-serif; }
.playlist-filters select:first-child { flex:1.5; }
.playlist-filters #favoritesFilter { width:32px; flex:0 0 32px; font-size:16px; }
.playlist-filters #favoritesFilter[aria-pressed=true] { background:#95b6a0; box-shadow:inset 1px 1px #34424a; }
.track { padding:0; align-items:stretch; }
.track.selected { background:#082a9c; color:#f1f4ff; }
.track-select { display:flex; align-items:center; flex:1; gap:5px; min-width:0; padding:3px 2px; border:0; background:transparent; color:inherit; text-align:left; font:inherit; cursor:pointer; }
.track-favorite { flex:0 0 32px; min-height:30px; border:0; background:transparent; color:#efdc63; font-size:18px; cursor:pointer; }
.track-select:focus-visible,.track-favorite:focus-visible { outline-offset:-2px; }

/* Optional silver-and-blue skin, independent of the classic skin. */
.skin-toggle { flex:0 0 auto; min-height:24px; padding:0 4px; font-size:9px !important; }
:root[data-skin="silver"] { background:#aebbc9; }
:root[data-skin="silver"] body { background:radial-gradient(ellipse at 50% 15%,#e7edf4,#9baec1); }
:root[data-skin="silver"] .window { background:linear-gradient(115deg,#f2f4f7 0%,#c9d2de 22%,#f4f7f9 48%,#95a6ba 100%); border-color:#47566b; border-radius:8px; box-shadow:inset 1px 1px #fff,inset -2px -2px #8290a2,0 2px 2px #27374e; color:#263953; }
:root[data-skin="silver"] .titlebar { margin:-3px -5px 3px; padding:0 5px; border-radius:5px 5px 1px 1px; background:linear-gradient(#172742,#48617d 45%,#1d314d 55%,#344c6b); color:#eef4ff; }
:root[data-skin="silver"] .title-line { border-color:#aab8c9; background:linear-gradient(#23344d 42%,#aab8c9 45%,#263953 58%); }
:root[data-skin="silver"] .display-left, :root[data-skin="silver"] .marquee { background:#203c68; border-color:#7a92b2; color:#eef7ff; box-shadow:inset 0 0 8px #102340; }
:root[data-skin="silver"] .clock, :root[data-skin="silver"] .indicator { color:#eaf5ff; text-shadow:0 0 5px #b9dfff; }
:root[data-skin="silver"] .audio-info { color:#edf6ff; background:#203c68; }
:root[data-skin="silver"] .audio-info > span:not(.stereo) { background:#203c68; }
:root[data-skin="silver"] .audio-info small, :root[data-skin="silver"] .audio-info .stereo, :root[data-skin="silver"] .stereo b { color:#c7d9ee; }
:root[data-skin="silver"] .slider-label { color:#293d59; }
:root[data-skin="silver"] input[type="range"] { background:linear-gradient(#475f7f,#d8e1ea 45%,#74879d); border-color:#687d94; }
:root[data-skin="silver"] input[type="range"]::-webkit-slider-thumb { border-radius:8px; background:linear-gradient(#fff,#c6d2df 48%,#7a8ea2); border-color:#596b80; }
:root[data-skin="silver"] input[type="range"]::-moz-range-thumb { border-radius:8px; background:linear-gradient(#fff,#a8bbce); border-color:#596b80; }
:root[data-skin="silver"] .transport-group { gap:5px; }
:root[data-skin="silver"] .transport-group button { border-radius:50%; aspect-ratio:1; max-width:34px; background:radial-gradient(circle at 35% 25%,#fff,#ccd7e2 42%,#77899d 75%,#46596e); box-shadow:inset 1px 1px #fff,0 1px 2px #405268; }
:root[data-skin="silver"] .tiny, :root[data-skin="silver"] .transport .mode, :root[data-skin="silver"] .skin-toggle { border-radius:10px; border-color:#536a85; background:linear-gradient(#fff,#c2cfdd 48%,#90a4b9); color:#1c304b; }
:root[data-skin="silver"] .tiny.active, :root[data-skin="silver"] .mode[aria-pressed="true"], :root[data-skin="silver"] #favoritesFilter[aria-pressed="true"] { background:linear-gradient(#6285af,#bcd2e8); color:#11233a; }
:root[data-skin="silver"] .eq-curve { border-color:#788da7; background:linear-gradient(170deg,transparent 45%,#6689b3 48% 51%,transparent 54%); }
:root[data-skin="silver"] .eq-band { color:#273b54; }
:root[data-skin="silver"] .eq-band input { background:linear-gradient(to right,#6a7b8d 0 25%,#344e6b 26% 60%,#a0adba 61%); border-color:#8292a4; }
:root[data-skin="silver"] .preset-name { color:#344e68; }
:root[data-skin="silver"] .playlist-body { background:#203c68; border-color:#8296ae; }
:root[data-skin="silver"] .search input, :root[data-skin="silver"] .playlist-filters select { background:#1b355d; border-color:#7c96b5; color:#e4efff; }
:root[data-skin="silver"] .search input::placeholder { color:#b1c6e0; }
:root[data-skin="silver"] .track { color:#e1ebfa; }
:root[data-skin="silver"] .track:hover { background:#355785; }
:root[data-skin="silver"] .track.selected { background:#5882bf; color:#fff; }
:root[data-skin="silver"] .track-favorite { color:#f9e59f; }
:root[data-skin="silver"] .playlist-footer { color:#263d5d; }
:root[data-skin="silver"] .message { color:#d0e2f5; }
@media(max-width:480px) { :root[data-skin="silver"] body { background:#aebbc9; } :root[data-skin="silver"] .transport-group button { max-width:34px; } }