:root{--bg:#050505;--panel:#0b0b0b;--panel2:#111;--ink:#f2eee8;--muted:#8f8983;--dim:#56514d;--red:#ff1717;--red2:#a90000;--line:#292624;--shadow:#000c}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 18% 20%,#270000 0,transparent 28%),radial-gradient(circle at 80% 75%,#170000 0,transparent 30%),var(--bg);color:var(--ink);font-family:"Arial Narrow",Arial,Helvetica,sans-serif}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");z-index:20}.shell{width:min(1180px,calc(100% - 42px));min-height:100vh;margin:auto;display:flex;flex-direction:column}.site-head{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo-window{position:relative;width:300px;height:78px;overflow:hidden}.logo-window img{position:absolute;width:300px;height:300px;left:0;top:50%;transform:translateY(-50%);object-fit:contain}.domain{font:700 11px/1 monospace;letter-spacing:.22em;color:var(--dim)}.station{display:grid;grid-template-columns:minmax(300px,470px) minmax(0,1fr);gap:clamp(42px,7vw,92px);align-items:center;padding:64px 0;flex:1}.visual-column{min-width:0}.art-frame{position:relative;aspect-ratio:1;background:#000;border:1px solid #302d2a;box-shadow:0 30px 80px var(--shadow),0 0 80px #5003;overflow:hidden}.art-frame:after{content:"";position:absolute;inset:0;border:1px solid #fff1;pointer-events:none}.art-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .25s ease,transform .7s ease}.art-frame.loading img{opacity:.25;transform:scale(1.025)}.mode{position:absolute;top:18px;left:18px;padding:8px 10px;background:#050505e8;border-left:3px solid var(--red);font:700 10px/1 monospace;letter-spacing:.18em}.spectrum-wrap{position:relative;height:112px;margin-top:14px;border:1px solid var(--line);background:linear-gradient(180deg,#0f0f0f,#070707);overflow:hidden}.spectrum-wrap:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 31px,#ffffff09 32px),repeating-linear-gradient(0deg,transparent 0,transparent 27px,#ffffff09 28px)}#spectrum{position:relative;width:100%;height:100%;display:block;z-index:1}.spectrum-wrap>span{position:absolute;right:10px;top:8px;color:#5f5a56;font:700 8px/1 monospace;letter-spacing:.2em;z-index:2}.console{min-width:0}.kicker{margin:0 0 20px;color:var(--red);font:700 11px/1 monospace;letter-spacing:.24em}.console h1{margin:0;max-width:680px;font-size:clamp(42px,6.5vw,88px);line-height:.91;letter-spacing:-.055em;overflow-wrap:anywhere}.artist{margin:25px 0 0;font-size:clamp(19px,2.4vw,30px);color:#c4beb7}.album{min-height:20px;margin:8px 0 0;color:var(--muted);font:500 13px/1.5 monospace;letter-spacing:.04em}.transport{display:flex;align-items:center;gap:20px;margin:42px 0 26px}.play{height:72px;min-width:160px;border:1px solid var(--red);background:var(--red);color:#050505;display:flex;align-items:center;justify-content:center;gap:13px;font:900 12px/1 monospace;letter-spacing:.16em;cursor:pointer;transition:background .18s,color .18s,transform .18s}.play:hover{transform:translateY(-2px);box-shadow:0 10px 30px #d0000044}.play.playing{background:#090909;color:var(--red)}.play-icon{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid currentColor}.play.playing .play-icon{width:12px;height:16px;border:0;border-left:4px solid currentColor;border-right:4px solid currentColor}.play-state{display:flex;flex-direction:column;gap:8px}.play-state strong{font:700 12px/1 monospace;letter-spacing:.18em}.play-state span{color:var(--dim);font:700 9px/1 monospace;letter-spacing:.1em}.volume-row{display:grid;grid-template-columns:auto auto minmax(120px,1fr) 48px;gap:14px;align-items:center;max-width:640px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.volume-row label,.mute,.volume-row output{font:700 10px/1 monospace;letter-spacing:.12em}.mute{padding:8px 10px;border:1px solid #3a3532;background:transparent;color:var(--muted);cursor:pointer}.mute:hover{border-color:var(--red);color:var(--red)}.volume-row label{color:var(--muted)}.volume-row output{text-align:right;color:var(--ink)}input[type=range]{width:100%;height:3px;appearance:none;background:linear-gradient(90deg,var(--red) 0,var(--red) var(--volume,80%),#302c29 var(--volume,80%),#302c29 100%);outline:none}input[type=range]::-webkit-slider-thumb{appearance:none;width:17px;height:17px;border-radius:50%;background:var(--ink);border:4px solid var(--red);cursor:pointer}input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--ink);border:3px solid var(--red);cursor:pointer}.details{display:flex;gap:26px;margin-top:16px;color:var(--dim);font:700 9px/1 monospace;letter-spacing:.14em}footer{height:72px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:#4e4945;font:700 9px/1 monospace;letter-spacing:.2em}@media(max-width:820px){.site-head{height:82px}.logo-window{width:240px;height:66px}.logo-window img{width:240px;height:240px}.station{grid-template-columns:1fr;gap:38px;padding:34px 0 52px}.visual-column{width:min(100%,540px);margin:auto}.console{text-align:center}.console h1{margin-inline:auto}.transport{justify-content:center}.volume-row{margin-inline:auto}.details{justify-content:center}}@media(max-width:520px){.shell{width:min(100% - 24px,1180px)}.site-head{height:70px}.logo-window{width:190px;height:58px}.logo-window img{width:190px;height:190px}.domain{display:none}.station{padding-top:22px}.spectrum-wrap{height:86px}.console h1{font-size:42px}.artist{font-size:19px}.transport{flex-direction:column;margin-top:30px}.play{width:100%}.play-state{align-items:center}.volume-row{grid-template-columns:auto 1fr 42px}.volume-row label{display:none}.details{flex-direction:column;gap:8px}.mode{top:12px;left:12px}.console{text-align:left}.console h1{margin:0}.transport,.details{align-items:stretch;text-align:center}.volume-row{margin:0}}