:root{--bg:#0e1016;--panel:#181b26;--panel-2:#1f2331;--line:#2b3040;--text:#e7e9f0;--muted:#9aa0b4;--accent:#7c5cff;--accent-2:#35d0a5;--danger:#ff5c7c;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(1200px 600px at 70% -10%, #1a1e33 0%, var(--bg) 60%);color:var(--text);min-height:100vh;margin:0}#app{max-width:880px;margin:0 auto;padding:28px 20px 80px}header h1{letter-spacing:.2px;margin:0 0 4px;font-size:26px}header p{color:var(--muted);margin:0 0 22px;font-size:14px}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:16px;padding:18px}.card h2{text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin:0 0 14px;font-size:13px}.moods{flex-wrap:wrap;gap:8px;display:flex}.mood-btn{border:1px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer;border-radius:999px;padding:9px 16px;font-size:14px;transition:all .12s}.mood-btn:hover{border-color:var(--accent)}.mood-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 18px;display:grid}.field{flex-direction:column;gap:6px;display:flex}.field label{color:var(--muted);font-size:12px}.field .val{color:var(--accent-2);font-variant-numeric:tabular-nums}select,input[type=range]{width:100%;accent-color:var(--accent)}select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:14px}.transport{flex-wrap:wrap;align-items:center;gap:10px;display:flex}button.action{cursor:pointer;color:#fff;border:none;border-radius:10px;padding:12px 20px;font-size:15px;font-weight:600;transition:transform 80ms,filter .12s}button.action:active{transform:translateY(1px)}button.action:hover{filter:brightness(1.1)}.btn-generate{background:linear-gradient(135deg, var(--accent), #a68bff)}.btn-play{background:var(--accent-2);color:#062}.btn-play.playing{background:var(--danger);color:#fff}.btn-ghost{background:var(--panel-2);border:1px solid var(--line);color:var(--text)}.mixer-row{grid-template-columns:90px 1fr 34px;align-items:center;gap:12px;padding:7px 0;display:grid}.mixer-row .name{text-transform:capitalize;font-size:13px}.mute{cursor:pointer;border:1px solid var(--line);background:var(--panel-2);width:30px;height:26px;color:var(--muted);border-radius:7px;font-size:11px;font-weight:700}.mute.on{background:var(--danger);color:#fff;border-color:var(--danger)}footer#about{max-width:880px;margin:0 auto;padding:0 20px 60px}footer#about h3{margin:16px 0 4px;font-size:14px}footer#about p{color:var(--muted);margin:6px 0;font-size:14px;line-height:1.6}footer#about strong{color:var(--text);font-weight:600}footer#about .fineprint{text-align:center;margin-top:4px;font-size:12px}.support-btn{background:linear-gradient(135deg, var(--accent), #a68bff);color:#fff;border-radius:10px;padding:11px 18px;font-size:14px;font-weight:600;text-decoration:none;transition:filter .12s,transform 80ms;display:inline-block}.support-btn:hover{filter:brightness(1.1)}.support-btn:active{transform:translateY(1px)}.row-inline{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.hint{color:var(--muted);margin-top:10px;font-size:12px}.seed{color:var(--muted);font-family:ui-monospace,monospace;font-size:12px}a{color:var(--accent-2)}
