:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#070b14;--cyan:#3de0c8;--coral:#ff7a62;--ink:#d7e6ef;--muted:#7f93a8;--dock:#080e18b8}*{box-sizing:border-box}html,body{background:var(--bg);width:100%;height:100dvh;color:var(--ink);margin:0;font-family:Sora,sans-serif;position:fixed;inset:0;overflow:hidden}#app{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}canvas.viz{width:100%;height:100%;display:block;position:absolute;inset:0}.ui{pointer-events:none;z-index:2;position:absolute;inset:0}.brand{text-align:center;mix-blend-mode:screen;position:absolute;top:7%;left:50%;transform:translate(-50%)}.brand h1{letter-spacing:.12em;color:#e8fbff;text-shadow:0 0 18px #3de0c859,0 0 40px #3de0c826;white-space:nowrap;margin:0;font-family:Orbitron,Sora,sans-serif;font-size:clamp(1.6rem,5.2vw,3.6rem);font-weight:700}.brand .tag{letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin:.4rem 0 0;font-size:.75rem}.drop-hint{pointer-events:auto;color:var(--cyan);letter-spacing:.12em;cursor:pointer;background:#060c1659;border:1px dashed #3de0c873;padding:.85rem 1.25rem;font-size:.85rem;position:absolute;top:58%;left:50%;transform:translate(-50%,-50%)}.drop-hint.hidden{display:none}.ui.dragging .drop-hint{border-color:var(--coral);color:var(--coral);display:block}.dock{pointer-events:auto;background:var(--dock);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #3de0c82e;grid-template-columns:auto 1fr auto;align-items:center;gap:.85rem;width:min(780px,100% - 1.5rem);padding:.75rem .9rem;display:grid;position:absolute;bottom:1.25rem;left:50%;transform:translate(-50%)}.actions{gap:.45rem;display:flex}.play,.file-btn{appearance:none;color:var(--cyan);letter-spacing:.08em;cursor:pointer;background:0 0;border:1px solid #3de0c859;place-items:center;min-width:2.4rem;height:2.4rem;padding:0 .75rem;font-family:Orbitron,Sora,sans-serif;font-size:.72rem;display:inline-grid}.play:hover,.file-btn:hover,.bg-btn:hover{border-color:var(--coral);color:var(--coral)}.bg-btn{min-width:7.5rem;font-size:.65rem}.meta{min-width:0}.track{color:var(--ink);white-space:nowrap;text-overflow:ellipsis;margin-bottom:.35rem;font-size:.78rem;overflow:hidden}.seek{width:100%;accent-color:var(--cyan);cursor:pointer}.time{color:var(--muted);letter-spacing:.06em;margin-top:.25rem;font-size:.68rem}@media (width<=700px){.brand{top:max(3%, env(safe-area-inset-top));width:calc(100% - 1.5rem)}.brand h1{letter-spacing:.04em;white-space:normal;text-align:center;font-size:clamp(1.15rem,6.2vw,1.85rem);line-height:1.15}.brand .tag{letter-spacing:.12em;padding:0 .25rem;font-size:.58rem}.drop-hint{text-align:center;letter-spacing:.08em;width:calc(100% - 2.5rem);max-width:18rem;padding:.7rem .9rem;font-size:.72rem;top:48%}.dock{left:50%;bottom:max(.65rem, env(safe-area-inset-bottom));grid-template-rows:auto auto;grid-template-columns:auto minmax(0,1fr);gap:.5rem .65rem;width:calc(100% - 1rem);max-width:none;padding:.55rem .6rem}.play{min-width:2.2rem;height:2.2rem;font-size:.7rem}.track{margin-bottom:.25rem;font-size:.7rem}.time{font-size:.62rem}.actions{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:.35rem;display:grid}.actions .file-btn,.actions .bg-btn{letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap;flex:none;width:100%;min-width:0;height:2.15rem;padding:0 .4rem;font-size:.58rem;overflow:hidden}}