body{color:#e2e8f0;-webkit-font-smoothing:antialiased;background:#0a0a14;min-height:100vh;font-family:Segoe UI,system-ui,sans-serif}#root{width:100%;min-height:100vh}button{font-family:inherit}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#e2e8f0;background:#0a0a14;min-height:100vh;font-family:Segoe UI,system-ui,sans-serif}.app{flex-direction:column;gap:12px;max-width:900px;margin:0 auto;padding:16px;display:flex}.app-header{text-align:center;padding:8px 0 4px}.logo{letter-spacing:-1px;color:#fff;font-size:2.2rem;font-weight:900}.logo span{background:linear-gradient(135deg,#7c3aed,#3b82f6);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.tagline{color:#64748b;margin-top:2px;font-size:.85rem}.tutorial{color:#93c5fd;background:#3b82f61f;border:1px solid #3b82f64d;border-radius:8px;padding:10px 14px;font-size:.83rem;line-height:1.5;position:relative}.close-tutorial{color:#64748b;cursor:pointer;background:0 0;border:none;font-size:1rem;position:absolute;top:8px;right:10px}.visualizer{background:#0d0d1a;border-radius:8px;width:100%;height:80px;display:block}.toolbar{background:#111827;border-radius:10px;flex-wrap:wrap;align-items:center;gap:16px;padding:12px 16px;display:flex}.controls{flex-wrap:wrap;flex:1;align-items:center;gap:12px;display:flex}.play-btn{cursor:pointer;letter-spacing:.5px;border:none;border-radius:8px;padding:8px 20px;font-size:.95rem;font-weight:700;transition:all .15s}.play-btn.play{color:#fff;background:linear-gradient(135deg,#7c3aed,#3b82f6)}.play-btn.stop{color:#fff;background:linear-gradient(135deg,#ef4444,#f97316)}.play-btn:hover{filter:brightness(1.15)}.clear-btn{color:#9ca3af;cursor:pointer;background:0 0;border:1px solid #374151;border-radius:6px;padding:6px 14px;font-size:.85rem;transition:all .15s}.clear-btn:hover{color:#e2e8f0;border-color:#6b7280}.control-group{color:#9ca3af;align-items:center;gap:6px;font-size:.8rem;display:flex}.control-group input[type=range]{accent-color:#7c3aed;cursor:pointer;width:80px}.bpm-value{color:#e2e8f0;min-width:28px;font-weight:600}.scale-selector{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.scale-selector select{color:#e2e8f0;cursor:pointer;background:#1f2937;border:1px solid #374151;border-radius:6px;padding:4px 8px;font-size:.85rem}.scale-hint{color:#4b5563;max-width:180px;font-size:.72rem;line-height:1.3}.sequencer{background:#111827;border-radius:10px;flex-direction:column;gap:4px;padding:12px;display:flex}.step-numbers{align-items:center;margin-bottom:2px;display:flex}.track-label-spacer{flex-shrink:0;width:90px}.step-num{text-align:center;color:#374151;flex:1;font-size:.65rem}.step-num.beat{color:#6b7280;font-weight:700}.track-row{align-items:center;gap:6px;display:flex}.track-label{flex-direction:column;flex-shrink:0;gap:2px;width:90px;font-size:.75rem;font-weight:600;display:flex}.track-volume{accent-color:currentColor;cursor:pointer;width:80px}.step-grid{flex:1;gap:3px;display:flex}.step-btn{aspect-ratio:1;cursor:pointer;background:#1a1f2e;border:1px solid #1f2937;border-radius:4px;flex:1;min-width:0;padding:0;transition:background 80ms,transform 50ms}.step-btn.beat-start{border-color:#2d3748}.step-btn.active{background:var(--track-color,#7c3aed);border-color:var(--track-color,#7c3aed);box-shadow:0 0 6px var(--track-color,#7c3aed)}.step-btn.playing{filter:brightness(1.6);transform:scale(.9)}.step-btn:hover:not(.active){background:#2d3748}.app-footer{text-align:center;color:#374151;padding:4px 0 8px;font-size:.72rem}@media (width<=600px){.track-label{width:64px;font-size:.65rem}.step-btn{border-radius:3px}.toolbar{flex-direction:column;align-items:flex-start}}