:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0a0a0a;color:#fafafa}.app{max-width:900px;margin:0 auto;padding:1.5rem 1rem;display:flex;flex-direction:column;gap:1.25rem}.app-header{display:flex;align-items:center;justify-content:space-between}.app-header h1{font-size:1.6rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#9b59b6,#3498db);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hit-display{font-size:.85rem;font-weight:600;color:#f1c40f;min-width:80px;text-align:right;transition:opacity .2s}.metronome{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:.75rem;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.75rem}.metro-controls{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}.bpm-control{display:flex;align-items:center;gap:.5rem}.bpm-control label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#ffffff80}.bpm-control input[type=range]{width:140px;accent-color:#9b59b6}.bpm-value{font-size:1.1rem;font-weight:700;font-family:ui-monospace,monospace;min-width:2.5rem;text-align:center}.time-sig{display:flex;align-items:center;gap:.5rem}.time-sig label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#ffffff80}.time-sig-btns{display:flex;gap:2px}.time-sig-btns button{width:2rem;height:1.8rem;border:1px solid rgba(255,255,255,.12);background:#ffffff0a;color:#fff9;font-size:.8rem;font-weight:600;cursor:pointer;border-radius:0;transition:all .15s}.time-sig-btns button:first-child{border-radius:.3rem 0 0 .3rem}.time-sig-btns button:last-child{border-radius:0 .3rem .3rem 0}.time-sig-btns button.active{background:#9b59b6;border-color:#9b59b6;color:#fff}.time-sig-btns button:hover:not(.active){background:#ffffff14}.metro-bottom{display:flex;align-items:center;justify-content:space-between}.beat-dots{display:flex;gap:6px}.beat-dot{width:14px;height:14px;border-radius:50%;background:#ffffff1a;transition:all .1s}.beat-dot-active{background:#9b59b6;box-shadow:0 0 10px #9b59b699;transform:scale(1.2)}.metro-toggle{padding:.4rem 1.5rem;border:1px solid rgba(255,255,255,.15);border-radius:.4rem;background:#ffffff0f;color:#fafafa;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s}.metro-toggle:hover{background:#ffffff1a}.metro-toggle.running{background:#e74c3c;border-color:#e74c3c;color:#fff}.tab-bar{display:flex;gap:2px;background:#ffffff0a;border-radius:.5rem;padding:3px}.tab-bar button{flex:1;padding:.5rem 1rem;border:none;border-radius:.4rem;background:transparent;color:#ffffff80;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s}.tab-bar button.active{background:#ffffff1a;color:#fafafa}.tab-bar button:hover:not(.active){color:#ffffffbf}.drum-pads{display:flex;flex-direction:column;gap:.5rem}.pad-row{display:flex;gap:.5rem}.top-row,.mid-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.bottom-row{display:grid;grid-template-columns:1fr;gap:.5rem}.drum-pad{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:1.5rem .5rem;border:2px solid var(--pad-color, #555);border-radius:.6rem;background:color-mix(in srgb,var(--pad-color, #555) 15%,transparent);color:var(--pad-color, #ccc);cursor:pointer;transition:all .1s;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.drum-pad:hover{background:color-mix(in srgb,var(--pad-color, #555) 25%,transparent)}.drum-pad:active,.drum-pad.pad-flash{background:color-mix(in srgb,var(--pad-color, #555) 40%,transparent);transform:scale(.95);box-shadow:0 0 20px color-mix(in srgb,var(--pad-color, #555) 50%,transparent)}.pad-label{font-size:.95rem;font-weight:700;letter-spacing:-.01em}.pad-key{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;opacity:.5;font-family:ui-monospace,monospace}.kick-pad{padding:2rem .5rem}.sequencer{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:.75rem;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.75rem;overflow-x:auto}.seq-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}.seq-header h2{font-size:1rem;font-weight:700;letter-spacing:-.02em}.seq-controls{display:flex;align-items:center;gap:.5rem}.bpm-control.small input[type=range]{width:80px}.seq-toggle,.seq-clear{padding:.35rem 1rem;border:1px solid rgba(255,255,255,.15);border-radius:.35rem;background:#ffffff0f;color:#fafafa;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s}.seq-toggle:hover,.seq-clear:hover{background:#ffffff1a}.seq-toggle.running{background:#e74c3c;border-color:#e74c3c;color:#fff}.seq-grid{display:flex;flex-direction:column;gap:2px}.seq-step-numbers{display:flex;gap:2px;margin-bottom:2px}.seq-label-spacer{width:60px;flex-shrink:0}.seq-step-num{width:2.2rem;flex-shrink:0;text-align:center;font-size:.6rem;font-weight:600;color:#ffffff4d;font-family:ui-monospace,monospace}.seq-step-num.beat-start{color:#ffffff80}.seq-step-num.step-active{color:#9b59b6}.seq-row{display:flex;gap:2px;align-items:center}.seq-label{width:60px;flex-shrink:0;font-size:.65rem;font-weight:700;letter-spacing:.02em;text-align:right;padding-right:4px}.seq-cell{width:2.2rem;height:1.8rem;flex-shrink:0;border:1px solid rgba(255,255,255,.06);border-radius:.2rem;background:#ffffff05;cursor:pointer;transition:all .1s}.seq-cell:hover{background:#ffffff0f}.seq-cell.beat-start{border-left:1px solid rgba(255,255,255,.15)}.seq-cell.step-active{background:#9b59b626}.seq-cell-on{background:var(--pad-color, #9b59b6)!important;box-shadow:inset 0 0 6px #0000004d}.seq-cell-on.step-active{background:color-mix(in srgb,var(--pad-color, #9b59b6) 80%,#fff)!important}.app-footer{text-align:center}.hint{font-size:.75rem;color:#ffffff59;font-family:ui-monospace,monospace}@media(max-width:640px){.seq-cell{width:1.6rem;height:1.4rem}.seq-step-num{width:1.6rem;font-size:.5rem}.seq-label{width:44px;font-size:.55rem}.seq-label-spacer{width:44px}.drum-pad{padding:1rem .25rem}.metro-controls{flex-direction:column;align-items:flex-start;gap:.5rem}}