:root{--bg:#080b10;--panel:#11161e;--panel2:#161c26;--line:#28313c;--muted:#90a0ae;--text:#eff5f7;--accent:#83f5b3;--accent2:#62c7ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 15% 0,#16312c 0,transparent 32%),radial-gradient(circle at 85% 5%,#17263a 0,transparent 28%),var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif}.app-shell{max-width:1290px;margin:auto;padding:28px 32px 48px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:48px}.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-size:14px;font-weight:800;letter-spacing:2px}.brand-mark{display:grid;place-items:center;width:30px;height:30px;background:var(--accent);color:#0a1713;border-radius:9px;font-family:DM Mono;font-size:17px}.status,.eyebrow,.meter-head{font:500 10px "DM Mono",monospace;letter-spacing:1.3px;color:var(--muted)}.status{display:flex;align-items:center;gap:8px}.status i,.state-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}.hero{display:grid;grid-template-columns:210px 1fr 145px;gap:34px;align-items:center;margin-bottom:38px}.album-art{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:1;border-radius:18px;background:linear-gradient(140deg,#233e54,#060a12 56%,#1e6a57);box-shadow:0 20px 50px #0007}.album-grid{position:absolute;inset:0;background:linear-gradient(125deg,transparent 48%,#83f5b333 49% 51%,transparent 52%),repeating-linear-gradient(0deg,transparent 0 17px,#a4cde80b 18px 19px)}.art-orbit{position:absolute;width:150%;aspect-ratio:1;border:1px solid #a8ffe455;border-radius:50%;left:-42%;top:25%;transform:rotate(-30deg)}.art-disc{position:absolute;width:62%;aspect-ratio:1;border:2px solid #c3ffe866;border-radius:50%;right:-15%;top:-13%;box-shadow:inset 0 0 0 18px #6ce6b422,inset 0 0 0 37px #0007}.album-art b{position:absolute;bottom:20px;left:20px;z-index:2;font-size:33px;letter-spacing:-3px}.track-info h1{font-size:clamp(30px,4vw,49px);line-height:1.05;margin:9px 0 6px;letter-spacing:-2px}.track-info>p:not(.eyebrow){margin:0;color:var(--muted);font-size:14px}.eyebrow span{color:var(--accent)}.progress-row{display:grid;grid-template-columns:35px 1fr 35px;gap:9px;align-items:center;margin:28px 0 17px;font:10px "DM Mono";color:var(--muted)}input[type=range]{accent-color:var(--accent);cursor:pointer}.progress-row input,.volume input{width:100%;height:4px}.transport{display:flex;align-items:center;gap:11px}.icon-btn,.play-btn,.subtle-btn{border:0;font-family:inherit;cursor:pointer;transition:.2s}.icon-btn{width:34px;height:34px;border-radius:50%;color:#cbd4d9;background:transparent;font-size:17px}.icon-btn:hover{background:#ffffff12;color:var(--accent)}.play-btn{width:47px;height:47px;border-radius:50%;background:var(--accent);color:#091411;font-size:17px;padding-left:3px;box-shadow:0 7px 20px #83f5b340}.play-btn:hover{transform:scale(1.06);background:#b0ffd0}.volume{margin-left:auto;display:grid;grid-template-columns:auto minmax(80px,120px) 32px;align-items:center;gap:8px;color:var(--muted);font:10px "DM Mono"}.meter-card{border-left:1px solid var(--line);padding-left:22px}.meter-head{display:flex;justify-content:space-between}.meter{height:170px;width:12px;display:flex;align-items:end;background:#ffffff0b;border-radius:7px;margin:13px 0 8px;overflow:hidden}.meter div{width:100%;height:0;background:linear-gradient(0deg,#5dc4ff,var(--accent));transition:height .08s}.meter-card p{font:10px "DM Mono";color:var(--muted);margin:0;white-space:nowrap}.workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,.85fr);gap:21px}.panel{background:linear-gradient(135deg,#141a23dd,#0f141bdd);border:1px solid #ffffff0d;border-radius:17px;box-shadow:0 15px 30px #0002}.eq-panel{padding:27px 30px 20px}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start}.panel h2{margin:5px 0 0;font-size:20px;letter-spacing:-.6px}.eq-state{border:1px solid #ffffff15;background:#0b1016;padding:7px 9px;border-radius:7px;display:flex;gap:7px;align-items:center;font:10px "DM Mono";color:var(--accent)}.preset-bar{display:flex;gap:8px;overflow:auto;padding:24px 0 19px}.preset{white-space:nowrap;border:1px solid #36414b;background:transparent;color:#b6c3cb;border-radius:6px;font:11px Manrope;padding:8px 11px;cursor:pointer;transition:.2s}.preset:hover,.preset.active{color:#0c1e17;background:var(--accent);border-color:var(--accent)}.eq-chart{height:292px;display:grid;grid-template-columns:30px 1fr;background:repeating-linear-gradient(to bottom,transparent 0 57px,#e8f8f412 58px 59px);border-bottom:1px solid #ffffff12}.db-scale{display:flex;flex-direction:column;justify-content:space-between;padding:0 0 0;color:#73808b;font:9px "DM Mono"}.eq-bands{display:flex;justify-content:space-around;gap:10px;padding:0 10px}.band{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:45px;height:100%}.band input{position:absolute;z-index:2;width:245px;height:28px;top:110px;transform:rotate(-90deg);transform-origin:center;accent-color:var(--accent)}.band-line{height:100%;width:2px;background:#53606d;border-radius:10px;opacity:.55}.knob{position:absolute;top:calc(var(--pos) - 9px);height:19px;width:19px;border-radius:50%;border:3px solid #dffff0;background:#11261e;box-shadow:0 0 0 4px #83f5b325;pointer-events:none;transition:top .05s}.gain{position:absolute;top:calc(var(--pos) + 18px);font:10px "DM Mono";color:var(--accent);white-space:nowrap}.freq{margin-top:12px;color:#afbbc5;font:10px "DM Mono";white-space:nowrap}.eq-footer{display:flex;justify-content:space-between;align-items:center;padding-top:18px}.eq-footer p{margin:0;color:var(--muted);font-size:11px}.subtle-btn{color:#b6c4ca;background:#202833;border:1px solid #34414e;border-radius:7px;padding:9px 11px;font-size:11px}.subtle-btn:hover{background:#2d3945;color:var(--text)}.side-stack{display:grid;gap:21px}.playlist-panel,.import-panel{padding:22px}.playlist-panel .panel-heading>span{font:10px "DM Mono";color:var(--muted);padding-top:5px}.track-list{margin-top:16px}.track{width:100%;border:0;border-top:1px solid #ffffff0d;background:transparent;padding:12px 3px;display:grid;grid-template-columns:23px 1fr auto;gap:9px;align-items:center;text-align:left;color:#9eabb5;cursor:pointer;font-family:inherit}.track:hover,.track.active{color:var(--text)}.track.active .track-num{color:var(--accent)}.track-name{font-size:12px;font-weight:600}.track-source{font:10px "DM Mono";color:#6f7c87;margin-top:3px}.track-num,.track-length{font:10px "DM Mono"}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:123px;border:1px dashed #465968;border-radius:11px;margin:14px 0;color:#c4d0d8;cursor:pointer;transition:.2s}.drop-zone:hover,.drop-zone.drag{border-color:var(--accent);background:#83f5b30b}.upload-icon{font-size:23px;color:var(--accent);line-height:1}.drop-zone strong{font-size:12px;margin-top:8px}.drop-zone small{margin-top:3px;color:var(--muted);font-size:10px}.settings-actions{display:flex;gap:8px}.file-button{display:block}.validation{min-height:14px;margin:10px 0 0;color:var(--accent);font:10px "DM Mono"}.validation.error{color:#ff9f9f}button:focus-visible,input:focus-visible,label:focus-within{outline:2px solid var(--accent);outline-offset:3px}@media(max-width:780px){.app-shell{padding:20px}.topbar{margin-bottom:30px}.hero{grid-template-columns:100px 1fr;gap:19px}.album-art{border-radius:13px}.meter-card{display:none}.workspace{grid-template-columns:1fr}.eq-panel{padding:22px 15px}.eq-bands{gap:2px;padding:0}.band{min-width:37px}.band input{width:245px}.gain{font-size:9px}.freq{font-size:9px}.eq-footer p{display:none}.side-stack{grid-template-columns:1fr}.track-info h1{font-size:31px}.volume{grid-template-columns:auto 80px 29px}.status{display:none}}@media(max-width:470px){.hero{grid-template-columns:78px 1fr;gap:15px}.track-info h1{font-size:26px}.progress-row{margin:17px 0 12px}.volume{display:none}.side-stack{grid-template-columns:1fr}.preset-bar{padding-top:17px}.eq-chart{height:270px}.band input{width:225px;top:102px}}
/* Keep the range's interactive hit area on the exact same vertical axis as its visual EQ knob. */
.band input{width:245px;height:28px;top:110px;left:auto;transform:rotate(-90deg);transform-origin:center;opacity:1}.knob{top:calc(var(--knob-pos) - 9px)}.gain{top:calc(var(--knob-pos) + 18px)}@media(max-width:470px){.band input{width:225px;top:102px}}