:root{--bg-color: #1a1a1a;--text-color: #e0e0e0;--accent-color: #ff6600}body{margin:0;padding:0;background-color:var(--bg-color);color:var(--text-color);font-family:Inter,sans-serif;min-height:100vh}.app-container{text-align:center}*{margin:0;padding:0;box-sizing:border-box}.app-container{min-height:100vh;display:flex;flex-direction:column}.site-footer{padding:24px;text-align:center;color:#555;font-size:14px;margin-top:auto}.site-footer p{opacity:.6}.start-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--bg-color);color:#fff;font-family:inherit;gap:32px}.start-screen h1{font-size:3.5rem;font-weight:800;color:var(--accent-color);text-transform:uppercase;letter-spacing:.1em}.start-screen p{color:#888;font-size:16px}.start-button{padding:16px 48px;font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;border:4px solid #333;border-radius:8px;background:#252525;color:var(--accent-color);cursor:pointer;transition:all .2s ease;box-shadow:4px 4px #000}.start-button:hover{border-color:var(--accent-color);background:#333}.start-button:active{transform:translate(2px,2px);box-shadow:2px 2px #000}.hint{font-size:14px!important;opacity:.6}.stepper-container{display:flex;flex-direction:row;align-items:center;gap:8px;-webkit-user-select:none;user-select:none}.stepper-label{font-size:14px;color:#888;font-weight:700;text-transform:uppercase}.stepper-control{display:flex;align-items:center;background:#111;padding:2px;border-radius:8px;border:2px solid #333}.stepper-button{width:28px;height:28px;border:none;background:transparent;color:var(--accent-color);font-size:16px;font-weight:900;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .1s ease;border-radius:6px}.stepper-button:hover:not(:disabled){background:#252525}.stepper-button:active:not(:disabled){background:var(--accent-color);color:#000}.stepper-button:disabled{opacity:.2}.stepper-display{width:36px;height:28px;display:flex;justify-content:center;align-items:center;border-left:1px solid #222;border-right:1px solid #222}.stepper-number{font-size:14px;font-weight:800;color:var(--accent-color);font-family:inherit}.track{display:flex;flex-direction:column;gap:12px;padding:16px;background:#222;border-radius:14px;border:2px solid #333;box-shadow:4px 4px 10px #0000004d;transition:transform .2s ease}.track:hover{background:#2a2a2a;border-color:#444}.track-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding-bottom:8px;border-bottom:2px solid #111}.track-info{display:flex;align-items:center;gap:12px}.track-name{font-weight:900;font-size:14px;color:var(--accent-color);text-transform:uppercase;letter-spacing:.1em}.reverse-toggle{padding:0 10px;height:28px;background:#333;border:1px solid #444;border-radius:6px;color:#666;font-size:10px;font-weight:800;cursor:pointer;transition:all .1s ease;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center}.reverse-toggle.active{background:#f30;color:#000;border-color:#f60}.track-controls{display:flex;gap:16px;align-items:center;transform:scale(.9);transform-origin:right center}.track-steps{display:flex;gap:4px;justify-content:space-between;width:100%}.step{flex:1;max-width:32px;aspect-ratio:1;border-radius:4px;background:#111;border:2px solid #000;transition:all .05s ease;overflow:hidden;box-sizing:border-box}.step.active{background:var(--accent-color);box-shadow:0 0 12px #ff660080;border-color:#fa0}.step.current{background:#444!important;border:2px solid #fff;z-index:10}.step.active.current{background:#fa0;box-shadow:0 0 15px #fa0c;border-color:#fff}@media(max-width:600px){.track{padding:10px;gap:8px}.track-header{flex-wrap:wrap;gap:8px}.track-info{width:100%;justify-content:space-between}.track-controls{width:100%;justify-content:space-between;padding-top:4px;transform:none}.track-steps{gap:2px}.step{border-radius:2px}}.drum-machine{min-height:100vh;background:var(--bg-color);color:var(--text-color);padding:24px}.drum-machine-header{text-align:center;margin-bottom:32px}.drum-machine-header h1{font-size:2.5rem;font-weight:800;color:var(--accent-color);text-transform:uppercase;letter-spacing:.15em;margin-bottom:24px}.global-controls{display:flex;flex-direction:column;align-items:center;gap:20px}.control-group{display:flex;align-items:center;gap:32px;padding:8px 0}.play-button{padding:12px 32px;font-size:16px;font-weight:700;text-transform:uppercase;border:4px solid #333;border-radius:12px;background:#252525;color:#0f6;cursor:pointer;transition:all .1s ease;box-shadow:4px 4px #000}.play-button:hover{border-color:#0f6;background:#333}.play-button.playing{background:#333;color:#f30;border-color:#f30;box-shadow:inset 2px 2px 5px #000;transform:translate(2px,2px)}.tempo-control,.steps-control{display:flex;align-items:center;gap:12px;color:#888;font-size:14px;font-weight:700;text-transform:uppercase}.tempo-control input[type=range]{width:120px;accent-color:var(--accent-color)}.tempo-control span{min-width:80px;color:var(--accent-color);font-weight:800;font-size:18px}.steps-control input{width:60px;padding:8px 12px;border:2px solid #333;border-radius:8px;background:#111;color:var(--accent-color);font-size:14px;text-align:center;font-weight:800}.steps-control input:focus{outline:none;border-color:var(--accent-color)}.tracks-container{display:flex;flex-direction:column;gap:16px;max-width:920px;margin:0 auto;padding-bottom:40px}.kit-control{display:flex;align-items:center;gap:12px}.control-label{color:#888;font-size:14px;font-weight:700;text-transform:uppercase}.kit-buttons{display:flex;background:#111;padding:4px;border-radius:10px;border:2px solid #333}.kit-button{padding:6px 16px;border:none;background:transparent;color:#666;font-size:13px;font-weight:700;text-transform:uppercase;cursor:pointer;border-radius:6px;transition:all .1s ease}.kit-button.active{background:var(--accent-color);color:#000}.preset-control{display:flex;align-items:center;gap:12px}.preset-select{padding:8px 12px;border:2px solid #333;border-radius:8px;background:#111;color:var(--accent-color);font-size:14px;font-weight:700;text-transform:uppercase;cursor:pointer;outline:none;font-family:inherit}.preset-select:focus{border-color:var(--accent-color)}.loading-overlay{position:fixed;inset:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.loading-overlay p{font-size:18px;color:#a0a0a0;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}@media(max-width:600px){.drum-machine{padding:12px}.drum-machine-header h1{font-size:1.8rem;margin-bottom:16px}.global-controls{gap:16px;flex-direction:row;justify-content:space-between}.play-button{width:100%;order:-1;margin-bottom:8px}.tempo-control{flex:1;flex-wrap:wrap;justify-content:center}.tempo-control input[type=range]{width:100%}.steps-control{flex-wrap:wrap;justify-content:center}.kit-control{width:100%;justify-content:center;margin-top:8px}}