/* Real product interface. Metal, borders and shading follow the user-approved hi-fi concepts. */
.tuner-panel{display:contents}
.stereo-meters{display:none}
.skin-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;color:var(--tx);font-size:16px}
.skin-toolbar label{font-weight:700}
.skin-toolbar select{font:600 16px/1.2 Rajdhani,system-ui,sans-serif;min-height:44px;min-width:0;width:100%;max-width:310px;justify-self:end;padding:8px 34px 8px 12px;color:var(--tx);background:#101421;border:1px solid #536980;cursor:pointer}
.skin-toolbar select:focus-visible{outline:3px solid var(--ye);outline-offset:3px}
.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}
html[data-skin="cyberpunk"]{--spectrum-low:0,240,255;--spectrum-mid:255,43,214;--spectrum-high:252,238,10}
html[data-skin="silver"],html[data-skin="graphite"]{--spectrum-low:77,206,66;--spectrum-mid:137,240,75;--spectrum-high:241,180,59;--ye:#e4a53c;--cy:#26312b;--tx:#252925;--mg:#9c6112;--surface:#d5d5d0;--surface-edge:#a3a49f;--metal-ink:#262b27;--metal-muted:#505951;--accent:#a96610;--rail:#383b36;--button-text:#272b26}
html[data-skin="graphite"]{--cy:#d2d9d1;--tx:#e2e4dd;--mg:#e8b54c;--surface:#262925;--surface-edge:#585846;--metal-ink:#e2e4dd;--metal-muted:#b8bdb3;--accent:#edb84c;--rail:#0d100e;--button-text:#e2e4dd}
html:is([data-skin="silver"],[data-skin="graphite"]) body{background:#202423;color:var(--metal-ink);font-family:"Segoe UI",Arial,sans-serif;padding:28px 14px}
html[data-skin="silver"] body{background:#d9dcd8}
html:is([data-skin="silver"],[data-skin="graphite"]) body::before,
html:is([data-skin="silver"],[data-skin="graphite"]) body::after,
html:is([data-skin="silver"],[data-skin="graphite"]) #rain{display:none}
html:is([data-skin="silver"],[data-skin="graphite"]) .hud{width:min(880px,100%);padding:18px;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:2px solid #979b91;border-radius:8px;clip-path:none;background:repeating-linear-gradient(0deg,#ffffff08 0 1px,#00000005 1px 3px),linear-gradient(105deg,#e5e5df,#c8cac4 50%,#e1e1da);box-shadow:inset 0 1px 1px #ffffffb3,inset 0 -2px 2px #5e645e,0 15px 40px #0003} /* taste-skill-ignore: user-approved brushed metal hi-fi interface. */
html[data-skin="graphite"] .hud{border-color:#7c704b;background:repeating-linear-gradient(0deg,#ffffff06 0 1px,#0000000a 1px 3px),linear-gradient(110deg,#30342e,#151916 55%,#2a2e27);box-shadow:inset 0 1px 1px #c7ac674d,inset 0 -2px 2px #000,0 15px 40px #0006} /* taste-skill-ignore: user-approved brushed graphite hi-fi interface. */
html:is([data-skin="silver"],[data-skin="graphite"]) .hud::before{display:none}
html:is([data-skin="silver"],[data-skin="graphite"]) .bar{grid-column:1/-1;font:600 13px/1.3 "Segoe UI",sans-serif;letter-spacing:0;background:#171e19;color:#c9dec8;padding:2px 10px;border-radius:3px}
html:is([data-skin="silver"],[data-skin="graphite"]) .bar b{font-size:12px;color:#b6c8b4;letter-spacing:0}
html:is([data-skin="silver"],[data-skin="graphite"]) .sig i{background:#53604c}
html:is([data-skin="silver"],[data-skin="graphite"]) .live .sig i{background:#8fe678;box-shadow:none}
html:is([data-skin="silver"],[data-skin="graphite"]) .fullscreen-button{color:#d8e3d2}
html:is([data-skin="silver"],[data-skin="graphite"]) .skin-toolbar{grid-column:1/-1;font-size:14px;gap:10px}
html:is([data-skin="silver"],[data-skin="graphite"]) .skin-toolbar select{font:600 15px/1.2 "Segoe UI",sans-serif;max-width:290px;border:1px solid var(--surface-edge);border-radius:3px;color:var(--metal-ink);background:var(--surface)}
html:is([data-skin="silver"],[data-skin="graphite"]) header{align-self:center;min-width:0;padding:8px 2px}
html:is([data-skin="silver"],[data-skin="graphite"]) h1{font:800 clamp(24px,3.9vw,37px)/1.1 "Segoe UI",Arial,sans-serif;letter-spacing:-.035em;color:var(--metal-ink);text-shadow:none;white-space:nowrap}
html:is([data-skin="silver"],[data-skin="graphite"]) .glitch-copy,
html:is([data-skin="silver"],[data-skin="graphite"]) .tag-studio{display:none}
html:is([data-skin="silver"],[data-skin="graphite"]) .tag{font:600 13px/1.4 "Segoe UI",sans-serif;letter-spacing:.09em;color:var(--metal-muted);margin-top:9px}
html[data-skin="graphite"] .tag{color:#edbe63}
html:is([data-skin="silver"],[data-skin="graphite"]) .tuner-panel{display:block;min-width:0;padding:12px 13px 8px;border:2px solid #5e645c;border-radius:4px;background:#07140b;color:#b8f99e;box-shadow:inset 0 2px 8px #000b} /* taste-skill-ignore: user-approved inset tuner display. */
html:is([data-skin="silver"],[data-skin="graphite"]) .now-playing{min-height:0}
html:is([data-skin="silver"],[data-skin="graphite"]) .track-label{font:600 11px/1.4 "Segoe UI",sans-serif;color:#9bd28a;letter-spacing:.02em;margin-bottom:4px}
html:is([data-skin="silver"],[data-skin="graphite"]) #track{font:600 clamp(19px,2.5vw,23px)/1.2 "Segoe UI",sans-serif;color:#b1f894}
html:is([data-skin="silver"],[data-skin="graphite"]) #artist{font:400 13px/1.3 "Segoe UI",sans-serif;color:#98c88b;margin-top:4px}
html:is([data-skin="silver"],[data-skin="graphite"]) .scope{height:52px;padding:2px 0 0;margin-top:6px;background:transparent;border:0;clip-path:none}
html:is([data-skin="silver"],[data-skin="graphite"]) .scope-label,
html:is([data-skin="silver"],[data-skin="graphite"]) .frequency-axis{display:none}
html:is([data-skin="silver"],[data-skin="graphite"]) .stereo-meters{display:grid;grid-template-columns:1fr 1fr;gap:9px;min-width:0;align-self:center}
.vu-meter{min-width:0;border:5px solid #252b24;border-radius:5px;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#fff3cf,#e2b76b);box-shadow:inset 0 0 8px #8f61294d,0 1px 1px #ffffff80} /* taste-skill-ignore: user-approved analog meter material. */
.vu-meter svg{width:100%;height:auto;display:block;color:#26291e}
.vu-meter path{fill:none;stroke:currentColor;stroke-width:1.6}
.vu-meter .vu-arc{stroke-width:2}
.vu-meter text{fill:currentColor;text-anchor:middle;font:500 13px "Segoe UI",sans-serif}
.vu-meter .vu-channel{font-weight:700;font-size:17px}
.vu-meter .vu-name{font-size:20px;font-weight:600}
.vu-meter .vu-units{font-size:9px}
.vu-meter .vu-red{fill:#ad3125;stroke:#ad3125}
.vu-meter line{stroke:#20241d;stroke-width:2.3;stroke-linecap:round}
.vu-meter .vu-pivot{fill:#292d23;stroke:#8b815c;stroke-width:2}
html:is([data-skin="silver"],[data-skin="graphite"]) .equalizer{padding:8px 4px 4px;border:0;min-width:0}
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-heading{gap:5px;align-items:center}
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-heading h2{font:600 12px/1.3 "Segoe UI",sans-serif;color:var(--metal-muted);letter-spacing:0}
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-actions{gap:5px}
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-actions button{font:600 12px/1.1 "Segoe UI",sans-serif;border:1px solid var(--surface-edge);border-radius:3px;background:var(--surface);color:var(--button-text);min-height:44px;padding:6px 8px} /* taste-skill-ignore: border on a real equalizer form control. */
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-actions button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-faders{gap:5px;margin-top:12px}
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-band{--eq-color:var(--accent);gap:5px}
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-band label{font:600 13px/1.25 "Segoe UI",sans-serif;color:var(--metal-ink);letter-spacing:0}
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-rail,
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-rail input[type=range]{height:112px}
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-rail::before{background:var(--rail);width:5px;left:calc(50% - 2.5px)}
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-rail input[type=range]{appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:rtl;accent-color:var(--accent)}
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-rail input[type=range]::-webkit-slider-runnable-track{width:6px;height:100%;background:var(--rail);border:1px solid #555c51;border-radius:3px}
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-rail input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:26px;height:12px;margin:0;border:1px solid #777e70;border-radius:2px;background:linear-gradient(0deg,#9ca394,#f0f0df 45%,#abb29f);box-shadow:inset 0 1px 1px #ffffffb3,0 1px 2px #0005} /* taste-skill-ignore: user-approved physical metal fader. */
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-rail input[type=range]::-moz-range-track{width:6px;height:100%;background:var(--rail);border:1px solid #555c51;border-radius:3px}
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-rail input[type=range]::-moz-range-thumb{width:26px;height:12px;border:1px solid #777e70;border-radius:2px;background:#dedfcf;box-shadow:none}
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-scale{font:500 10px/1 "Segoe UI",sans-serif;color:var(--metal-muted);left:auto;right:0;top:5px;bottom:5px}
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-band output{font:600 12px/1.3 "Segoe UI",sans-serif;min-width:0;width:100%;padding:4px 1px;border-radius:2px;background:#171d17;color:#edc56a}
html:is([data-skin="silver"],[data-skin="graphite"]) .balance-band output{font-size:10px}
html:is([data-skin="silver"],[data-skin="graphite"]) .eq-caption{font:400 11px/1.3 "Segoe UI",sans-serif;color:var(--metal-muted);margin-top:9px}
html:is([data-skin="silver"],[data-skin="graphite"]) .row{grid-column:1/-1;grid-template-columns:104px minmax(0,1fr);gap:24px;padding:14px 12px 8px;border-top:1px solid var(--surface-edge)} /* taste-skill-ignore: machined seam in the user-approved hi-fi product interface. */
html:is([data-skin="silver"],[data-skin="graphite"]) .play{width:84px;height:84px;min-width:84px;min-height:84px;clip-path:none;border-radius:50%;border:3px solid #d3a453;color:#f8cb6c;background:radial-gradient(circle at 36% 25%,#363d34,#0c110e 75%);filter:none;box-shadow:0 0 0 3px #292f27,inset 0 1px 3px #ffffff40} /* taste-skill-ignore: user-approved physical hi-fi play button. */
html:is([data-skin="silver"],[data-skin="graphite"]) .play:hover{border-color:#ffe2a2;color:#fff0ba}
html:is([data-skin="silver"],[data-skin="graphite"]) .play:active{transform:scale(.97)}
html:is([data-skin="silver"],[data-skin="graphite"]) #listen-label{font:600 12px/1.3 "Segoe UI",sans-serif;color:var(--metal-ink);letter-spacing:0}
html:is([data-skin="silver"],[data-skin="graphite"]) .vol{gap:8px}
html:is([data-skin="silver"],[data-skin="graphite"]) .vol label{font:600 15px/1.3 "Segoe UI",sans-serif;color:var(--metal-ink);letter-spacing:0}
html:is([data-skin="silver"],[data-skin="graphite"]) .vol label b{color:var(--accent)}
html:is([data-skin="silver"],[data-skin="graphite"]) #volume::-webkit-slider-runnable-track{height:5px;border-radius:4px;background:linear-gradient(90deg,#c38e29 0 var(--v,70%),var(--rail) var(--v,70%) 100%);mask:none;-webkit-mask:none} /* taste-skill-ignore: real volume control fill. */
html:is([data-skin="silver"],[data-skin="graphite"]) #volume::-moz-range-track{height:5px;border-radius:4px;background:var(--rail);mask:none}
html:is([data-skin="silver"],[data-skin="graphite"]) #volume::-moz-range-progress{height:5px;background:#c38e29}
html:is([data-skin="silver"],[data-skin="graphite"]) #volume::-webkit-slider-thumb{width:21px;height:21px;border-radius:50%;margin-top:-8px;background:linear-gradient(100deg,#a4a99e,#f0f0df 50%,#9a9d91);border:1px solid #6b7267;box-shadow:0 1px 2px #0005} /* taste-skill-ignore: user-approved metal knob. */
html:is([data-skin="silver"],[data-skin="graphite"]) #volume::-moz-range-thumb{width:21px;height:21px;border-radius:50%;background:#dedfcf;border:1px solid #6b7267;box-shadow:none} /* taste-skill-ignore: border on a real interactive product control. */
html:is([data-skin="silver"],[data-skin="graphite"]) .stream-format{font:500 12px/1.3 "Segoe UI",sans-serif;color:var(--metal-muted);letter-spacing:0}
html:is([data-skin="silver"],[data-skin="graphite"]) .log{grid-column:1/-1;font:400 14px/1.4 "Segoe UI",sans-serif;letter-spacing:0;color:var(--metal-muted);min-height:0}
html:is([data-skin="silver"],[data-skin="graphite"]) .log::before{content:none}
html:is([data-skin="silver"],[data-skin="graphite"]) .foot{grid-column:1/-1;font:500 12px/1.4 "Segoe UI",sans-serif;color:var(--metal-muted);letter-spacing:.02em}
html:is([data-skin="silver"],[data-skin="graphite"]) .shortcut-button{font:600 12px/1.3 "Segoe UI",sans-serif;color:var(--metal-ink);border:1px solid var(--surface-edge);border-radius:3px;background:var(--surface)} /* taste-skill-ignore: border on a real interactive product control. */
html:is([data-skin="silver"],[data-skin="graphite"]) #display-notice,
html:is([data-skin="silver"],[data-skin="graphite"]) #shortcut-notice{grid-column:1/-1;color:var(--metal-muted)}
@media(min-width:621px){html[data-skin="graphite"] .stereo-meters{grid-column:1/-1;gap:16px}html[data-skin="graphite"] .vu-meter svg{max-height:180px}html[data-skin="graphite"] .equalizer{grid-column:1/-1;padding:4px 18px}html[data-skin="graphite"] .eq-faders{max-width:560px;margin:10px auto 0;gap:22px}html[data-skin="graphite"] .eq-caption{text-align:center}}
@media(max-width:620px){
  html:is([data-skin="silver"],[data-skin="graphite"]) body{padding:14px 10px}
  html:is([data-skin="silver"],[data-skin="graphite"]) .hud{grid-template-columns:minmax(0,1fr);padding:12px;gap:12px;border-radius:6px}
  html:is([data-skin="silver"],[data-skin="graphite"]) .bar{grid-template-columns:minmax(0,1fr) 44px;padding-left:8px}
  html:is([data-skin="silver"],[data-skin="graphite"]) .bar b{display:none}
  html:is([data-skin="silver"],[data-skin="graphite"]) .skin-toolbar{font-size:13px;gap:8px}
  html:is([data-skin="silver"],[data-skin="graphite"]) .skin-toolbar select{font-size:14px;max-width:none}
  html:is([data-skin="silver"],[data-skin="graphite"]) header{padding:2px;text-align:center}
  html:is([data-skin="silver"],[data-skin="graphite"]) h1{font-size:clamp(24px,7.4vw,34px);letter-spacing:-.02em}
  html:is([data-skin="silver"],[data-skin="graphite"]) .tag{font-size:12px;margin-top:5px}
  html:is([data-skin="silver"],[data-skin="graphite"]) .tuner-panel{padding:10px 11px 6px}
  html:is([data-skin="silver"],[data-skin="graphite"]) .scope{height:38px}
  html:is([data-skin="silver"],[data-skin="graphite"]) .stereo-meters{gap:8px}
  html:is([data-skin="silver"],[data-skin="graphite"]) .equalizer{padding:0 2px}
  html:is([data-skin="silver"],[data-skin="graphite"]) .eq-actions button{min-height:44px;padding:6px 8px;font-size:12px}
  html:is([data-skin="silver"],[data-skin="graphite"]) .eq-band label{font-size:13px}
  html:is([data-skin="silver"],[data-skin="graphite"]) .eq-rail,
  html:is([data-skin="silver"],[data-skin="graphite"]) .eq-rail input[type=range]{height:105px}
  html:is([data-skin="silver"],[data-skin="graphite"]) .row{grid-template-columns:84px minmax(0,1fr);gap:16px;padding:12px 2px 0}
  html:is([data-skin="silver"],[data-skin="graphite"]) .play{width:72px;height:72px;min-width:72px;min-height:72px}
  html:is([data-skin="silver"],[data-skin="graphite"]) .vol label{font-size:14px}
  html:is([data-skin="silver"],[data-skin="graphite"]) .foot{font-size:11px;gap:5px}
  html:is([data-skin="silver"],[data-skin="graphite"]) .log{font-size:13px}
}