:root{--bg: #0a0a1a;--surface: #12122a;--surface-hover: #1a1a3a;--border: #2a2a4a;--text: #e0e0f0;--text-dim: #8888aa;--accent: #6c5ce7;--accent-glow: #a29bfe;--success: #00cec9;--warm: #fd79a8;--gold: #fdcb6e}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}#app{max-width:800px;margin:0 auto;padding:2rem 1.5rem}header{text-align:center;margin-bottom:2rem}.logo{font-size:2.2rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:.5rem}.logo-icon{font-size:2.5rem;animation:pulse-glow 3s ease-in-out infinite}@keyframes pulse-glow{0%,to{filter:brightness(1)}50%{filter:brightness(1.3) drop-shadow(0 0 12px var(--accent))}}.logo-text{background:linear-gradient(135deg,var(--accent-glow),var(--success));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.tagline{color:var(--text-dim);margin-top:.4rem;font-size:.95rem}.visualizer-container{position:relative;width:100%;height:160px;background:var(--surface);border-radius:16px;border:1px solid var(--border);overflow:hidden;margin-bottom:1.5rem}#visualizer{width:100%;height:100%}.timer-display{position:absolute;bottom:12px;right:16px;font-size:1.4rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent-glow);opacity:.8}.main-control{display:flex;justify-content:center;margin-bottom:2rem}.play-btn{width:72px;height:72px;border-radius:50%;border:2px solid var(--accent);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;position:relative}.play-btn:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;border:2px solid transparent;transition:border-color .3s}.play-btn:hover{background:var(--accent);transform:scale(1.08);box-shadow:0 0 30px #6c5ce766}.play-btn:hover:before{border-color:var(--accent-glow)}.play-btn.active{background:var(--accent);box-shadow:0 0 40px #6c5ce780}.play-btn svg{width:28px;height:28px;fill:var(--text)}.play-btn .icon-play{margin-left:3px}.presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin-bottom:2rem}.preset{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem;cursor:pointer;text-align:left;transition:all .25s ease;display:flex;flex-direction:column;gap:.25rem}.preset:hover{background:var(--surface-hover);border-color:var(--accent);transform:translateY(-2px)}.preset.active{border-color:var(--accent);background:#6c5ce726;box-shadow:0 0 20px #6c5ce726}.preset-icon{font-size:1.5rem}.preset-label{font-weight:600;font-size:.95rem;color:var(--text)}.preset-desc{font-size:.75rem;color:var(--text-dim)}.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin-bottom:2rem}.control-group{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.25rem}.control-group h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-glow);margin-bottom:1rem}label{display:block;margin-bottom:.9rem}.label-row{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.35rem}.value{color:var(--accent-glow);font-weight:600;font-variant-numeric:tabular-nums}input[type=range]{width:100%;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--border);border-radius:3px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--accent-glow);cursor:pointer;transition:transform .15s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--accent-glow);cursor:pointer}.wave-band-indicator{margin-top:.5rem;text-align:center}.wave-badge{display:inline-block;padding:.3rem .8rem;border-radius:20px;font-size:.78rem;font-weight:600;transition:all .3s}.wave-badge.delta{background:#6c5ce733;color:#a29bfe}.wave-badge.theta{background:#00cec933;color:#00cec9}.wave-badge.alpha{background:#fdcb6e33;color:#fdcb6e}.wave-badge.beta{background:#fd79a833;color:#fd79a8}.wave-badge.gamma{background:#ff767533;color:#ff7675}.timer-hint,.music-hint{font-size:.75rem;color:var(--text-dim);text-align:center;margin-top:-.3rem}.info-section{margin-bottom:2rem}details{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}summary{padding:1rem 1.25rem;cursor:pointer;font-weight:600;color:var(--accent-glow);-webkit-user-select:none;user-select:none}summary:hover{background:var(--surface-hover)}.info-content{padding:0 1.25rem 1.25rem;font-size:.9rem;line-height:1.6;color:var(--text-dim)}.info-content p{margin-bottom:.75rem}.info-content ul{margin:.5rem 0 1rem 1.5rem}.info-content li{margin-bottom:.3rem}.info-content strong{color:var(--text)}footer{text-align:center;padding:1.5rem 1rem;color:var(--text-dim);font-size:.8rem;border-top:1px solid var(--border)}footer a{color:var(--accent-glow);text-decoration:none}footer a:hover{text-decoration:underline}.footer-links{display:flex;justify-content:center;gap:1.5rem;margin-top:.5rem;flex-wrap:wrap}.toast{position:fixed;bottom:-80px;left:50%;transform:translate(-50%);background:var(--surface);border:1px solid var(--accent);border-radius:12px;padding:.85rem 1.25rem;display:flex;align-items:center;gap:.75rem;font-size:.9rem;color:var(--text);box-shadow:0 8px 32px #0006;transition:bottom .3s ease;z-index:100;max-width:90vw}.toast.show{bottom:24px}.toast-close{background:none;border:none;color:var(--text-dim);font-size:1.3rem;cursor:pointer;padding:0 .25rem;line-height:1}.offline-banner{background:#fd79a826;border:1px solid var(--warm);border-radius:8px;padding:.75rem 1rem;text-align:center;font-size:.85rem;color:var(--warm);margin-bottom:1rem;display:none}.offline-banner.visible{display:block}@media (max-width: 600px){#app{padding:1.25rem 1rem}.logo{font-size:1.7rem}.presets{grid-template-columns:1fr 1fr}.controls-grid{grid-template-columns:1fr}.visualizer-container{height:120px}}