:root{--bg: #0b1220;--bg-soft: #121c31;--line: #2d3f66;--text: #e8f1ff;--muted: #99aacd;--accent: #53f2e2;--accent-2: #8a7dff;--shadow: 0 20px 40px rgba(0, 0, 0, .35)}*{box-sizing:border-box}html,body{margin:0;min-height:100vh}body{background:radial-gradient(circle at top,#1d2950 0%,var(--bg) 50%,#070b14 100%);color:var(--text);font-family:Segoe UI,Inter,system-ui,-apple-system,sans-serif;line-height:1.4;padding:24px}.app{width:min(980px,100%);margin:0 auto;background:linear-gradient(180deg,#1b2742f2,#0f1728f2);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.hero{position:relative;padding:24px;border-bottom:1px solid var(--line);background:linear-gradient(130deg,#53f2e214,#8a7dff1f);overflow:hidden}.logo-wrap{position:relative;width:calc(100% - 12px);margin:0 auto;max-width:100%}.hero-visualizer{position:absolute;inset:0;pointer-events:none;opacity:.95;border-radius:12px;overflow:hidden}.hero-visualizer canvas{width:100%;height:100%;display:block}.logo{position:relative;z-index:1;margin:0;padding:14px;border-radius:12px;border:1px solid rgba(131,226,255,.25);background:#0a101d8c;overflow-x:auto;color:#99fff2;font-size:.8rem;text-align:center;-webkit-user-select:none;user-select:none}.subtitle{position:relative;z-index:1;margin:14px 0 0;color:var(--muted)}.content{padding:20px 24px 24px;display:grid;gap:18px}.card{border:1px solid var(--line);border-radius:14px;background:var(--bg-soft);padding:16px}.card-toggle{width:100%;border:1px solid var(--line);border-radius:10px;background:#53f2e214;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:10px 12px;margin-bottom:12px;font-weight:600}.card-toggle .chevron{color:var(--muted);font-size:.9rem;transition:transform .2s ease}.card.collapsed .card-toggle{margin-bottom:0}.card.collapsed .card-toggle .chevron{transform:rotate(-90deg)}.card-body{display:grid;gap:12px;overflow:hidden;max-height:1200px;opacity:1;transition:max-height .24s ease,opacity .2s ease}.card.collapsed .card-body{max-height:0;opacity:0;pointer-events:none;padding:0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.field{display:flex;flex-direction:column;gap:6px}label{font-size:.9rem;color:var(--muted)}input[type=file],input[type=number],input[type=text],input[type=range],button{width:100%}input[type=file],input[type=number],input[type=text],input[type=range]{border:1px solid var(--line);border-radius:10px;background:#0d1528;color:var(--text);padding:8px 10px}input[type=range]{padding:6px}button{border:1px solid transparent;background:var(--accent);color:#081126;font-weight:700;border-radius:10px;padding:10px 12px;cursor:pointer;transition:transform .12s ease,filter .12s ease,opacity .12s ease}#stopBtn{width:38px;min-width:38px;max-width:38px;padding:0;border-radius:10px;display:grid;place-items:center;background:#ff8aa6;color:#2b0010}#stopBtn:before{content:"";width:12px;height:12px;border-radius:2px;background:currentColor;display:block}.play-actions{display:flex;gap:8px;align-items:stretch}.play-actions #playBtn{flex:1}.play-control{display:grid;gap:8px}.play-transition-progress{height:6px;border-radius:999px;background:#99aacd33;border:1px solid rgba(153,170,205,.25);overflow:hidden;margin-bottom:.5rem}.play-transition-progress-fill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .05s linear}button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05)}button:disabled{opacity:.45;cursor:not-allowed}.track-buttons{display:grid;grid-template-columns:1fr;gap:10px}.track-switch-btn.base-track{background-image:none;background:#ffb36b;color:#2a1500}.tracks-grid{display:grid;gap:10px}.track-row{display:grid;gap:8px;grid-template-columns:1fr minmax(140px,220px);align-items:center}.help{margin:0;color:var(--muted);font-size:.9rem}.warn{color:#ffd4de;background:#ff6c8d29;border:1px solid rgba(255,108,141,.4);border-radius:10px;padding:10px;margin:0 0 12px}@media(max-width:760px){body{padding:10px}.hero,.content{padding:14px}.track-row{grid-template-columns:1fr}}#version{color:#cccccc73;display:flex;justify-content:center;margin-top:.5rem}