@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;700&display=swap";.visualizer-options{display:flex;align-items:center;gap:8px;padding:0 17px 16px;font-family:DM Mono,monospace;font-size:9px;letter-spacing:.1em;color:var(--muted)}.visualizer-options>span{margin-right:6px}.visualizer-options button{border:1px solid #48554f;background:transparent;color:var(--muted);padding:6px 9px;font:inherit;font-size:9px;letter-spacing:.08em;transition:background .2s,color .2s,border-color .2s}.visualizer-options button:hover,.visualizer-options button.is-active{border-color:var(--accent);background:var(--accent);color:#17201d}@media(max-width:560px){.visualizer-options{padding-left:14px}}:root{font-family:Manrope,sans-serif;color:#e9ece5;background:#101817;font-synthesis:none;--bg:#101817;--ink:#e9ece5;--muted:#89948c;--line:#33413d;--accent:#e1ad55;--hot:#ef5f4b}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg)}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;padding:0 clamp(22px,6vw,94px);background:radial-gradient(circle at 78% 18%,#20312b 0,#101817 32rem)}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-family:DM Mono,monospace}.brand{color:var(--ink);font-size:17px;letter-spacing:.08em;text-decoration:none}.brand span{margin:0 8px;color:var(--accent)}.topbar-note,.eyebrow,.visualizer-label,.track-index,.volume,.drop-zone p,footer{font-family:DM Mono,monospace}.topbar-note{color:var(--muted);font-size:10px;letter-spacing:.14em}.intro{max-width:760px;padding:clamp(70px,10vw,132px) 0 78px}.eyebrow{margin:0 0 22px;color:var(--accent);font-size:11px;letter-spacing:.12em}.intro h1{margin:0;font-size:clamp(56px,9vw,124px);font-weight:500;line-height:.91;letter-spacing:-.06em}.intro h1 em{color:var(--hot);font-style:normal}.lede{max-width:410px;margin:36px 0 0;color:#aab4ac;font-size:17px;line-height:1.6}.player{position:relative;border:1px solid var(--line);background:#15211e;box-shadow:18px 18px #0c1211}.visualizer-wrap{padding:14px 14px 0}.visualizer{width:100%;height:min(52vw,470px);overflow:hidden}.visualizer canvas{display:block;width:100%!important;height:100%!important}.visualizer-label{display:flex;justify-content:space-between;padding:13px 3px;color:var(--muted);font-size:9px;letter-spacing:.1em}.visualizer-label span:last-child{color:var(--accent)}.controls{display:grid;grid-template-columns:minmax(200px,1fr) auto minmax(260px,1.7fr) 100px;gap:24px;align-items:center;padding:27px 28px;border-top:1px solid var(--line)}.track-info{display:flex;align-items:center;gap:15px;min-width:0}.track-index{color:var(--accent);font-size:12px}.track-info strong,.track-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-info strong{font-size:14px;font-weight:500}.track-info small{margin-top:5px;color:var(--muted);font-size:10px}.play-button{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--accent);border-radius:50%;background:var(--accent);color:#17201d;font-size:17px}.play-button:disabled{cursor:not-allowed;opacity:.35}.timeline{display:flex;align-items:center;gap:12px;color:var(--muted);font-family:DM Mono,monospace;font-size:10px}.timeline input{width:100%}.volume{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:9px;letter-spacing:.1em}.volume input{width:66px}.player audio{display:none}input[type=range]{height:4px;accent-color:var(--accent);cursor:pointer}.drop-zone{display:flex;align-items:center;gap:18px;margin:72px 0 100px;padding:22px 24px;border:1px dashed #52615b;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}.drop-zone:hover{border-color:var(--accent);background:#17231f}.drop-zone input{display:none}.drop-mark{font-size:25px;color:var(--accent)}.drop-zone strong{font-size:14px;font-weight:500}.drop-zone p{margin:5px 0 0;color:var(--muted);font-size:10px}.drop-arrow{margin-left:auto;color:var(--accent);font-size:20px}.error{margin:-76px 0 70px;color:#ff978a;font-size:12px}footer{display:flex;justify-content:space-between;padding:22px 0 30px;border-top:1px solid var(--line);color:var(--muted);font-size:9px;letter-spacing:.1em}@media(max-width:900px){.controls{grid-template-columns:1fr auto;gap:20px}.timeline{grid-column:1/-1;grid-row:2}.volume{grid-column:1/-1}.volume input{flex:1}}@media(max-width:560px){.topbar{height:68px}.topbar-note{font-size:8px}.intro{padding:72px 0 58px}.lede{font-size:15px}.player{box-shadow:9px 9px #0c1211}.controls{padding:22px 18px}.drop-zone{margin-top:52px;margin-bottom:72px;padding:19px}.drop-zone strong{font-size:12px}footer{display:block;line-height:2}.visualizer{height:55vw;min-height:250px}}