:root{--bg:#060610;--bg-card:rgba(12,12,24,0.9);--bg-surface:#0a0a18;--text:#e4e0f0;--text-muted:#7a75a0;--accent:#06b6d4;--accent2:#0891b2;--gradient:linear-gradient(135deg,#06b6d4,#8b5cf6,#f43f5e);--border:rgba(255,255,255,0.07);--radius:14px;--font:'Inter',sans-serif;--mono:'JetBrains Mono',monospace}
[data-theme="light"]{--bg:#f0f5fa;--bg-card:rgba(255,255,255,0.92);--bg-surface:#fff;--text:#1a1a2e;--text-muted:#666;--border:rgba(0,0,0,0.08)}
*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh}
.container{max-width:1100px;margin:0 auto;padding:0 1.5rem}
.navbar{position:sticky;top:0;z-index:100;background:rgba(6,6,16,0.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0.75rem 0}
[data-theme="light"] .navbar{background:rgba(240,245,250,0.9)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{text-decoration:none;color:var(--text);font-weight:700;font-size:1.25rem;display:flex;align-items:center;gap:0.5rem}
.brand span{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;gap:0.5rem;align-items:center}
.nav-links a{text-decoration:none;color:var(--text-muted);font-size:0.9rem;padding:0.4rem 0.75rem;border-radius:8px;transition:all 0.2s}
.kofi-link{color:#ff5e5b!important;font-weight:600}
.theme-btn{background:none;border:1px solid var(--border);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.theme-btn:hover{border-color:var(--accent);transform:scale(1.1)}
.hero{text-align:center;padding:2rem 0 1.5rem}
.hero h1{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;margin-bottom:0.5rem}
.gradient-text{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{color:var(--text-muted);font-size:1rem;max-width:500px;margin:0 auto}
.glass-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.5rem;backdrop-filter:blur(10px)}
.card-title{font-size:1rem;margin-bottom:1rem}
.btn{padding:0.6rem 1.2rem;border:none;border-radius:8px;cursor:pointer;font-family:var(--font);font-weight:600;font-size:0.85rem;transition:all 0.2s}
.btn-primary{background:var(--gradient);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(6,182,212,0.3)}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--accent)}
.visualizer-card{padding:0;overflow:hidden}
.visualizer-card canvas{width:100%;display:block;background:var(--bg-surface)}
#waveCanvas{height:200px;border-bottom:1px solid var(--border)}
#freqCanvas{height:150px}
.synth-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.keyboard{display:flex;height:120px;border-radius:8px;overflow:hidden;margin-bottom:1rem;position:relative}
.key{flex:1;border:1px solid var(--border);cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-size:0.7rem;font-family:var(--mono);transition:all 0.1s;user-select:none}
.key.white{background:linear-gradient(180deg,#e8e8f0,#d0d0dd);color:#333;min-width:35px;z-index:1}
.key.black{background:linear-gradient(180deg,#2a2a3a,#1a1a28);color:#888;width:24px;position:absolute;height:70%;z-index:2;border-radius:0 0 4px 4px}
.key:active,.key.active{transform:translateY(2px)}
.key.white:active,.key.white.active{background:linear-gradient(180deg,#06b6d4,#0891b2);color:#fff}
.key.black:active,.key.black.active{background:linear-gradient(180deg,#8b5cf6,#7c3aed);color:#fff}
[data-theme="light"] .key.white{background:linear-gradient(180deg,#fff,#f0f0f5)}
.synth-controls{display:flex;flex-direction:column;gap:0.8rem}
.control-group{display:flex;flex-direction:column;gap:0.3rem}
.control-group label{font-size:0.75rem;color:var(--text-muted);text-transform:uppercase}
.slider{width:100%;-webkit-appearance:none;height:6px;border-radius:3px;background:var(--border);outline:none}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg)}
.wave-btns{display:flex;gap:4px;flex-wrap:wrap}
.wave-btn{padding:0.4rem 0.7rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;color:var(--text-muted);cursor:pointer;font-family:var(--font);font-size:0.8rem;transition:all 0.2s}
.wave-btn:hover{border-color:var(--accent);color:var(--text)}
.wave-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.seq-controls{display:flex;gap:0.5rem;align-items:flex-end;margin-bottom:1rem;flex-wrap:wrap}
.sequencer-grid{display:grid;gap:2px}
.seq-row{display:flex;gap:2px;align-items:center}
.seq-label{width:60px;font-size:0.7rem;font-family:var(--mono);color:var(--text-muted);text-align:right;padding-right:6px}
.seq-cell{width:100%;aspect-ratio:1;border-radius:4px;background:var(--bg-surface);border:1px solid var(--border);cursor:pointer;transition:all 0.15s}
.seq-cell:hover{border-color:var(--accent)}
.seq-cell.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px rgba(6,182,212,0.4)}
.seq-cell.playing{box-shadow:0 0 12px rgba(6,182,212,0.8);transform:scale(1.1)}
.footer{margin-top:3rem;border-top:1px solid var(--border);padding:2rem 0}
.footer-inner{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}
.footer-brand span{font-weight:700}.footer-brand p{color:var(--text-muted);font-size:0.85rem;margin-top:0.3rem}
.footer-brand a{color:var(--accent);text-decoration:none}
.copyright{width:100%;text-align:center;color:var(--text-muted);font-size:0.8rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
@media(max-width:768px){.nav-links{display:none}.synth-grid{grid-template-columns:1fr}}