:root{--bg:#07090f;--panel:hsla(0,0%,100%,.06);--panel-strong:rgba(12,18,31,.82);--text:#eef2ff;--muted:#a7b0c9;--accent:#66e0ff;--accent-soft:rgba(102,224,255,.12);--border:hsla(0,0%,100%,.12)}*{box-sizing:border-box}html{background:#05070c}body{margin:0;position:relative;overflow-x:hidden;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:radial-gradient(circle at 20% 0,rgba(47,83,150,.42) 0,transparent 42%),radial-gradient(circle at 85% 78%,rgba(12,24,58,.58) 0,transparent 34%),linear-gradient(180deg,#070a14,#07090f 52%,#05070c);color:var(--text)}body,main{min-height:100vh}main{max-width:1120px;margin:0 auto;padding:clamp(32px,6vw,72px) 16px clamp(40px,6vw,72px);align-content:center;grid-gap:24px;gap:24px}.hero,main{display:grid}.hero{grid-gap:18px;gap:18px}.hero-headline{display:grid;grid-gap:8px;gap:8px;max-width:680px}.hero-kicker,.section-label{text-transform:uppercase;letter-spacing:.08em}.creation-panel h2,.visualizer-card h3{margin:8px 0 0;font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.2}.hero h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.05;margin:0}.creation-panel{position:relative;display:grid;grid-gap:20px;gap:20px;padding:22px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(180deg,rgba(15,22,39,.92),rgba(9,13,24,.88));box-shadow:0 24px 60px rgba(0,0,0,.32),inset 0 0 0 1px rgba(102,224,255,.03);overflow:hidden}.creation-panel:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 24%,rgba(102,224,255,.14) 0,transparent 28%),radial-gradient(circle at 84% 72%,rgba(79,70,229,.12) 0,transparent 34%);pointer-events:none}.creation-heading{position:relative;z-index:1;display:flex;align-items:end}.creation-track{position:relative;isolation:isolate;--creation-circuit-duration:5.8s;--creation-step-padding:9px;--creation-signal-height:116px;--creation-copy-gap:16px;--creation-mobile-circuit-width:120px;--creation-mobile-signal-height:92px;--creation-mobile-step-height:220px;--creation-mobile-copy-gap:12px}.creation-circuit{position:absolute;inset:0 0 auto;height:var(--creation-signal-height);pointer-events:none;z-index:0}.creation-circuit--mobile{display:none}.creation-circuit svg{display:block;width:100%;height:100%;overflow:visible}.creation-circuit-base,.creation-circuit-glow,.creation-circuit-pulse{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}.creation-circuit-base{stroke:rgba(102,224,255,.16);stroke-width:2;opacity:.82}.creation-circuit-glow,.creation-circuit-pulse{stroke-dashoffset:0;animation:creationCircuitFlow var(--creation-circuit-duration) linear infinite}.creation-circuit-glow{stroke:rgba(102,224,255,.28);stroke-width:10;stroke-dasharray:8 92;opacity:.22;filter:blur(3px)}.creation-circuit-pulse{stroke:rgba(224,251,255,.84);stroke-width:3;stroke-dasharray:5 95;filter:drop-shadow(0 0 6px rgba(102,224,255,.28))}.creation-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:0;gap:0;align-items:stretch}.creation-step{min-width:0;padding-inline:var(--creation-step-padding)}.creation-step-shell{display:grid;grid-template-rows:var(--creation-signal-height) minmax(0,1fr);grid-gap:var(--creation-copy-gap);gap:var(--creation-copy-gap);min-height:100%}.creation-signal-slot{display:grid;place-items:center;min-width:0}.creation-copy,.creation-icon{width:100%}.creation-icon{display:grid;place-items:center;position:relative;width:clamp(60px,6.5vw,84px);aspect-ratio:1;margin-inline:auto;border-radius:22px;background:radial-gradient(circle at 32% 24%,rgba(102,224,255,.11) 0,rgba(102,224,255,.02) 36%,transparent 72%),linear-gradient(180deg,rgba(16,25,44,.34),rgba(8,13,23,.16));box-shadow:inset 0 0 0 1px rgba(102,224,255,.04),0 0 24px rgba(79,70,229,.08)}.creation-icon svg{width:34px;height:34px;fill:none;stroke:rgba(132,235,250,.94);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.55;filter:drop-shadow(0 0 10px rgba(102,224,255,.26))}.creation-copy{display:grid;align-content:start;grid-gap:8px;gap:8px;padding:16px 14px 14px;border-radius:18px;border:1px solid hsla(0,0%,100%,.09);background:linear-gradient(180deg,rgba(13,20,35,.9),rgba(9,14,25,.78));box-shadow:0 14px 28px rgba(0,0,0,.18);height:100%}.creation-index{color:rgba(102,224,255,.72);font-size:.72rem;font-weight:600;letter-spacing:.14em}.creation-copy h3{margin:0;font-size:1rem;line-height:1.2}.creation-copy p{margin:0;line-height:1.5}@keyframes creationCircuitFlow{0%{stroke-dashoffset:0}to{stroke-dashoffset:-100}}.panel{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:20px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 24px 60px rgba(0,0,0,.28)}.panel-heading{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px}.library-topbar h3,.panel-heading h2{margin:4px 0 0}.panel-meta{max-width:28ch;text-align:right}.catalog-shell{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.9fr);grid-template-areas:"library player";grid-gap:20px;gap:20px;align-items:stretch}.empty-state,.library-panel,.player-card,.visualizer-card{background:var(--panel-strong);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 18px 44px rgba(0,0,0,.25)}.library-panel{grid-area:library;display:grid;grid-gap:14px;gap:14px}.player-panel{grid-area:player}.player-rail{position:-webkit-sticky;position:sticky;top:22px;display:grid;grid-gap:18px;gap:18px}.library-topbar{display:flex;gap:12px;justify-content:space-between;align-items:end}.artist-pill{align-self:start;padding:8px 12px;border-radius:999px;border:1px solid rgba(102,224,255,.22);background:rgba(102,224,255,.08);color:var(--text);font-size:.82rem}.search-input{width:100%;background:hsla(0,0%,100%,.06);border:1px solid hsla(0,0%,100%,.18);color:var(--text);border-radius:12px;padding:12px 14px;font:inherit}.track-list{border:1px solid var(--border);border-radius:14px;overflow:visible}.track-row{width:100%;text-align:left;background:transparent;color:var(--text);border:none;border-bottom:1px solid hsla(0,0%,100%,.08);padding:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:12px;gap:12px;align-items:start;cursor:pointer}.track-row:hover{background:hsla(0,0%,100%,.05)}.track-row.active{background:var(--accent-soft)}.track-row:last-child{border-bottom:none}.track-primary{min-width:0;display:grid;grid-gap:6px;gap:6px}.track-title-line{display:inline-flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}.track-title{font-weight:600;overflow-wrap:anywhere}.player-meta,.track-detail,.track-subline{display:flex;flex-wrap:wrap;gap:6px 12px}.track-detail{justify-content:flex-end;text-align:right}.playing-dot{width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px rgba(102,224,255,.16);flex:0 0 auto}.player-card{display:grid;grid-gap:16px;gap:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.visualizer-card{display:grid;grid-gap:14px;gap:14px;overflow:hidden;background:linear-gradient(180deg,rgba(14,23,41,.96),rgba(10,15,27,.92))}.visualizer-header{display:flex;gap:12px;justify-content:space-between;align-items:start}.visualizer-copy{margin:8px 0 0;max-width:34ch}.visualizer-state{flex:0 0 auto;padding:8px 12px;border-radius:999px;border:1px solid rgba(102,224,255,.16);background:rgba(102,224,255,.08);color:var(--muted);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.visualizer-state.active{border-color:rgba(102,224,255,.45);color:var(--text);box-shadow:inset 0 0 0 1px rgba(102,224,255,.08)}.visualizer-stage{position:relative;aspect-ratio:16/9;min-height:220px;border-radius:14px;overflow:hidden;border:1px solid hsla(0,0%,100%,.08);background:radial-gradient(circle at 50% 38%,rgba(73,172,226,.22) 0,rgba(18,26,44,.4) 32%,rgba(7,10,17,.92) 72%,#05070c 100%)}.visualizer-canvas,.visualizer-fallback,.visualizer-vignette{position:absolute;inset:0}.visualizer-canvas{display:block;width:100%;height:100%}.visualizer-vignette{pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 28%,rgba(4,8,14,.24) 62%,rgba(4,8,14,.72) 100%)}.visualizer-fallback{display:grid;place-items:center;align-content:center;grid-gap:12px;gap:12px;padding:20px;text-align:center}.visualizer-fallback p{margin:0;max-width:28ch}.visualizer-fallback-orb{width:min(44%,160px);aspect-ratio:1;border-radius:999px;border:1px solid rgba(103,232,249,.34);background:radial-gradient(circle at 50% 50%,rgba(103,232,249,.24) 0,rgba(103,232,249,.04) 46%,rgba(6,182,212,0) 72%),radial-gradient(circle at 52% 48%,rgba(79,70,229,.28) 0,rgba(49,46,129,.06) 42%,rgba(49,46,129,0) 70%);box-shadow:inset 0 0 0 1px rgba(103,232,249,.08),0 0 36px rgba(49,46,129,.34)}.visualizer-stage.is-fallback{background:radial-gradient(circle at 50% 36%,rgba(73,172,226,.18) 0,rgba(16,23,38,.46) 32%,rgba(7,10,17,.95) 72%,#05070c 100%)}.now-playing-label{font-size:.74rem;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}.current-track-title{font-size:clamp(1.2rem,2vw,1.65rem);line-height:1.15;margin-top:4px}.player-meta{color:var(--muted);margin-top:8px}.player-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px;gap:12px}.stat-label{text-transform:uppercase;letter-spacing:.08em}.stat-value{margin-top:4px;font-size:1rem;font-weight:600}.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:10px;gap:10px}button{border:1px solid hsla(0,0%,100%,.22);color:var(--text);background:transparent;border-radius:12px;padding:10px 12px;cursor:pointer;font-size:.9rem;min-height:44px;transition:background-color .12s ease,border-color .12s ease,opacity .12s ease}button.primary{border-color:rgba(102,224,255,.8);background:rgba(102,224,255,.18)}button:disabled,input:disabled{cursor:not-allowed;opacity:.45}.timeline,.volume-row{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;grid-gap:10px;gap:10px}.volume-row{grid-template-columns:auto minmax(0,1fr)}input[type=range]{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:999px;background:hsla(0,0%,100%,.25)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid #0b1220}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid #0b1220}.small{color:#cad2e6;font-size:.82rem}.error-text{color:#fca5a5}.empty-filter-state,.empty-state{display:grid;grid-gap:8px;gap:8px}.empty-state h3{margin:0}@media (max-width:700px){main{min-height:auto;padding:20px 10px 28px;align-content:start;gap:18px}.hero{gap:16px}.hero-headline{gap:6px}.creation-panel{gap:18px;padding:16px;border-radius:18px}.creation-heading{align-items:start}.creation-track{--creation-circuit-duration:6.8s;--creation-step-padding:0;--creation-copy-gap:var(--creation-mobile-copy-gap)}.creation-steps{grid-template-columns:1fr;grid-auto-rows:var(--creation-mobile-step-height)}.creation-step{padding-inline:0}.creation-step-shell{grid-template-rows:var(--creation-mobile-signal-height) minmax(0,1fr);gap:var(--creation-mobile-copy-gap)}.creation-icon{width:56px;border-radius:16px}.creation-copy{padding:14px 13px 13px}.creation-circuit--desktop{display:none}.creation-circuit--mobile{display:block;top:0;bottom:0;left:50%;right:auto;width:var(--creation-mobile-circuit-width);height:auto;transform:translateX(-50%)}.panel{padding:12px;border-radius:14px}.panel-heading{align-items:start;flex-direction:column;margin-bottom:14px}.panel-meta{text-align:left}.catalog-shell{grid-template-columns:1fr;grid-template-areas:"player" "library";gap:14px}.hero p{max-width:100%}.empty-state,.library-panel,.player-card,.visualizer-card{padding:14px;border-radius:14px}.library-topbar{flex-direction:column;align-items:stretch;gap:10px}.artist-pill{align-self:flex-start}.search-input{padding:10px 12px}.track-row{grid-template-columns:1fr;gap:8px;padding:12px}.track-detail{justify-content:flex-start}.track-title{font-size:.95rem}.player-rail{position:static;top:auto}.visualizer-header{flex-direction:column;align-items:stretch}.visualizer-state{align-self:flex-start}.visualizer-stage{min-height:180px}.player-stats{grid-template-columns:1fr}.timeline{grid-template-columns:40px minmax(0,1fr) 40px;gap:8px}.controls{gap:8px}.small{font-size:.76rem}button{padding:9px 10px;font-size:.85rem;border-radius:10px}}@media (prefers-reduced-motion:reduce){.creation-circuit-glow,.creation-circuit-pulse{animation-duration:10s}.creation-circuit-glow{opacity:.22}.creation-circuit-pulse{opacity:.78}}