.seq-stage{background:radial-gradient(at 50% 30%,#1c1c22 0%,#0b0b10 80%);justify-content:center;align-items:center;min-height:calc(100vh - 200px);padding:2rem 1rem;font-family:DM Sans,system-ui,sans-serif;display:flex}.seq-device{background:linear-gradient(#1e1e26 0%,#15151c 100%);border:1px solid #ffffff0f;border-radius:18px;padding:22px 24px;box-shadow:inset 0 1px #ffffff0f,inset 0 -2px 8px #0006,0 24px 60px #0009,0 4px 14px #0000004d}.seq-top{justify-content:center;padding-bottom:14px;display:flex}.seq-label{letter-spacing:.22em;color:#8a8aa0;text-transform:uppercase;font-family:DM Mono,ui-monospace,monospace;font-size:10px}.seq-grid{background:#0a0a0e;border-radius:10px;flex-direction:column;gap:6px;padding:14px;display:flex;box-shadow:inset 0 2px 6px #0009,inset 0 -1px #ffffff0a}.seq-row{align-items:center;gap:4px;display:flex}.seq-row-label{letter-spacing:.06em;color:#5a5a72;text-align:right;-webkit-user-select:none;user-select:none;width:22px;padding-right:4px;font-family:DM Mono,ui-monospace,monospace;font-size:9px}.seq-pad{cursor:pointer;background:#1a1a22;border:none;border-radius:4px;width:28px;height:22px;padding:0;transition:background .12s,transform 80ms,box-shadow .12s;box-shadow:inset 0 1px 1px #0009,inset 0 -1px #ffffff08}.seq-pad.is-bar-start{margin-left:8px}.seq-pad:hover{background:#232330}.seq-pad.is-on{background:hsl(var(--row-hue),78%,56%);box-shadow:0 0 10px hsla(var(--row-hue),90%,60%,.55),0 1px 1px #ffffff4d inset,0 -1px 1px #00000040 inset}.seq-pad.is-on:hover{background:hsl(var(--row-hue),82%,62%)}.seq-pad[data-current=true]{background:#2c2c3a}.seq-pad[data-current=true].is-on{animation:.18s ease-out seq-pad-fire}@keyframes seq-pad-fire{0%{filter:brightness();transform:scale(1)}30%{filter:brightness(1.6);transform:scale(1.18)}to{filter:brightness();transform:scale(1)}}.seq-pad:focus-visible{outline-offset:1px;outline:2px solid #6aa9ff}.seq-transport{align-items:center;gap:14px;padding:16px 4px 4px;display:flex}.seq-play{cursor:pointer;color:#1a1a22;background:linear-gradient(#f5f5fa 0%,#c8c8d2 100%);border:none;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;padding-left:3px;font-size:22px;transition:transform 80ms,box-shadow .12s;display:flex;box-shadow:inset 0 1px #ffffffb3,inset 0 -1px #00000026,0 4px 10px #00000080}.seq-play.is-playing{color:#fff;background:linear-gradient(#6aa9ff 0%,#3d7ee0 100%);padding-left:0;box-shadow:0 0 14px #6aa9ff80,inset 0 1px #fff6,inset 0 -1px #0003,0 4px 10px #00000080}.seq-play:hover{transform:translateY(-1px)}.seq-play:active{transform:translateY(0)}.seq-play:focus-visible{outline-offset:3px;outline:2px solid #6aa9ff}.seq-clear,.seq-generate{letter-spacing:.18em;color:#8a8aa0;cursor:pointer;background:0 0;border:1px solid #ffffff1f;border-radius:999px;padding:8px 14px;font-family:DM Mono,ui-monospace,monospace;font-size:10px;transition:background .12s,color .12s,border-color .12s,transform 80ms}.seq-clear:hover{color:#c8c8d8;background:#ffffff0d;border-color:#fff3}.seq-clear:focus-visible,.seq-generate:focus-visible{outline-offset:2px;outline:2px solid #6aa9ff}.seq-generate{color:#c5b6e8;background:#785ad214;border-color:#aa82f052;align-items:center;gap:6px;display:inline-flex}.seq-generate:hover{color:#e6d8ff;background:#8c6ee62e;border-color:#aa82f08c}.seq-generate:active{transform:scale(.97)}.seq-generate-glyph{color:#c8a8ff;text-shadow:0 0 6px #b482ff99;font-size:11px}.seq-bpm{color:#c8c8d8;align-items:center;gap:8px;margin-left:auto;display:flex}.seq-bpm-readout{font-variant-numeric:tabular-nums;color:#f0f0f6;text-align:right;min-width:28px;font-family:DM Mono,ui-monospace,monospace;font-size:16px}.seq-bpm-unit{letter-spacing:.18em;color:#6a6a82;font-family:DM Mono,ui-monospace,monospace;font-size:9px}.seq-bpm input[type=range]{accent-color:#6aa9ff;cursor:pointer;width:120px}@media (max-width:600px){.seq-device{border-radius:14px;padding:14px 12px}.seq-grid{padding:10px 8px}.seq-row-label{width:18px;padding-right:2px;font-size:8px}.seq-pad{border-radius:3px;width:17px;height:17px}.seq-pad.is-bar-start{margin-left:5px}.seq-row{gap:2px}.seq-grid{gap:4px}.seq-bpm input[type=range]{width:80px}}