:root{color:#f6f2df;background:#130f0c;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:radial-gradient(circle at 20% 20%,rgba(255,110,55,.25),transparent 30rem),linear-gradient(135deg,#241812 0%,#0f0c0a 60%,#050505 100%)}button,input,select{font:inherit}.shell{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:1.5rem;min-height:100vh;padding:1.5rem}.playlist-panel,.player-card{border:1px solid rgba(255,255,255,.12);border-radius:28px;background:rgba(21,18,15,.78);box-shadow:0 24px 70px #00000052;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.playlist-panel{display:flex;flex-direction:column;min-height:0;padding:1.25rem}.panel-heading{padding:.4rem .4rem 1rem}.directory-picker{display:grid;gap:.45rem;margin-top:1.1rem;color:#f6f2dfb8;font-size:.9rem;font-weight:700}.directory-picker select{width:100%;min-height:2.8rem;padding:0 .85rem;border:1px solid rgba(255,255,255,.14);border-radius:14px;color:#fff9e8;background:rgba(255,255,255,.08)}.directory-picker select:focus{border-color:#ff9f58a6;outline:none}.eyebrow{margin:0 0 .35rem;color:#ff9f58;font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}h1,h2{margin:0;line-height:1.05}h1{font-size:clamp(2rem,4vw,3.4rem)}h2{font-size:clamp(2rem,6vw,5rem);overflow-wrap:anywhere}.playlist{display:flex;flex:1;flex-direction:column;gap:.55rem;min-height:0;overflow:auto;padding-right:.25rem}.track{width:100%;padding:.9rem 1rem;border:1px solid transparent;border-radius:18px;color:inherit;background:rgba(255,255,255,.06);text-align:left;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}.track:hover,.track:focus-visible{border-color:#ff9f5873;background:rgba(255,159,88,.13);outline:none;transform:translate(2px)}.track.active{border-color:#ff9f58b3;background:linear-gradient(135deg,rgba(255,159,88,.22),rgba(255,72,72,.1))}.track-title,.track-file{display:block}.track-title{font-weight:800}.track-file,.muted,.status{color:#f6f2dfad}.track-file{margin-top:.2rem;font-size:.82rem}.player-panel{display:grid;align-items:start}.player-card{position:sticky;top:1.5rem;width:min(100%,900px);margin:0 auto;padding:clamp(1.4rem,4vw,3rem)}.progress-wrap{margin:3rem 0 1.5rem}input[type=range]{width:100%;accent-color:#ff9f58}.time-row,.volume-control{display:flex;align-items:center;justify-content:space-between;gap:1rem}.time-row{margin-top:.35rem;color:#f6f2dfb8;font-variant-numeric:tabular-nums}.controls{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.4rem}.controls button{min-width:6.5rem;padding:.85rem 1.1rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#fff9e8;background:rgba(255,255,255,.08);cursor:pointer}.controls button:hover,.controls button:focus-visible{border-color:#ff9f58a6;outline:none}.controls .primary{border-color:transparent;background:linear-gradient(135deg,#ff9f58,#ff553d);color:#20110b;font-weight:900}.volume-control{color:#f6f2dfbf}.volume-control input{max-width:220px}.spectrum-panel{margin-top:1.3rem;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(0,0,0,.22)}.spectrum-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem .85rem 0;color:#f6f2df9e;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.spectrum-panel canvas{display:block;width:100%;height:clamp(120px,18vw,220px)}.status{min-height:1.4rem;margin:1.2rem 0 0}@media (max-width: 780px){.shell{grid-template-columns:1fr;padding:1rem}.playlist-panel{max-height:45vh}.player-card{position:static}}