@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap";@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-tracking:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}.absolute{position:absolute}.mx-auto{margin-inline:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.inline-flex{display:inline-flex}.min-h-screen{min-height:100vh}.w-\[110px\]{width:110px}.w-full{width:100%}.min-w-\[100px\]{min-width:100px}.min-w-\[110px\]{min-width:110px}.min-w-\[120px\]{min-width:120px}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.appearance-none{appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.text-center{text-align:center}.text-\[10px\]{font-size:10px}.tracking-\[0\.12em\]{--tw-tracking:.12em;letter-spacing:.12em}.tracking-\[0\.24em\]{--tw-tracking:.24em;letter-spacing:.24em}.tracking-\[0\.25em\]{--tw-tracking:.25em;letter-spacing:.25em}.text-transparent{color:#0000}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}@media(hover:hover){.hover\:scale-\[1\.02\]:hover{scale:1.02}}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:scale-\[0\.96\]:active{scale:.96}:root{--app-bg:radial-gradient(1200px 600px at 20% -10%, #0ea5e926, transparent 60%), radial-gradient(900px 500px at 90% 10%, #22c55e1f, transparent 55%), linear-gradient(135deg, #0b1220, #111827 55%, #0f172a);--panel-bg:#0f172ab8;--panel-border:#94a3b82e;--text-main:#e2e8f0;--text-muted:#94a3b8;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Space Grotesk,system-ui,-apple-system,sans-serif}.font-mono{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--app-bg);color:var(--text-main);min-height:100vh;overflow-x:hidden}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}input[type=range].slider-cyan{-webkit-appearance:none;appearance:none}input[type=range].slider-cyan::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#06b6d4,#0891b2);cursor:pointer;border:3px solid rgba(255,255,255,.9);box-shadow:0 0 12px #06b6d499,0 4px 12px #0006;transition:all .2s}input[type=range].slider-cyan::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 20px #06b6d4cc,0 6px 16px #00000080}input[type=range].slider-cyan::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#06b6d4,#0891b2);cursor:pointer;border:3px solid rgba(255,255,255,.9);box-shadow:0 0 12px #06b6d499,0 4px 12px #0006;transition:all .2s}input[type=range].slider-cyan::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:0 0 20px #06b6d4cc,0 6px 16px #00000080}input[type=range].slider-fuchsia{-webkit-appearance:none;appearance:none}input[type=range].slider-fuchsia::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#d946ef,#c026d3);cursor:pointer;border:3px solid rgba(255,255,255,.9);box-shadow:0 0 12px #d946ef99,0 4px 12px #0006;transition:all .2s}input[type=range].slider-fuchsia::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 20px #d946efcc,0 6px 16px #00000080}input[type=range].slider-fuchsia::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#d946ef,#c026d3);cursor:pointer;border:3px solid rgba(255,255,255,.9);box-shadow:0 0 12px #d946ef99,0 4px 12px #0006;transition:all .2s}input[type=range].slider-fuchsia::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:0 0 20px #d946efcc,0 6px 16px #00000080}html,body,#root{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}p,span{user-select:none;-webkit-user-select:none}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#0f172a80}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#06b6d4,#0ea5e9);border-radius:5px;border:2px solid rgba(15,23,42,.8)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#00d4ff,#0ea5e9);box-shadow:0 0 12px #06b6d499}*{scrollbar-color:linear-gradient(180deg,#06b6d4,#0ea5e9) rgba(15,23,42,.5);scrollbar-width:thin}button,.grid-step,.pad-button,.control-button,.play-button,.clear-button,input[type=range],select{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.max-w-3xl{max-width:48rem;margin-left:auto;margin-right:auto}.max-w-prose{max-width:65ch;margin-left:auto;margin-right:auto}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}@media(max-width:767px){.beat-grid-row{grid-template-columns:repeat(8,minmax(0,1fr))!important}}@media(min-width:768px){.beat-grid-row{grid-template-columns:repeat(16,minmax(0,1fr))!important}}.app-shell{background:var(--app-bg);color:var(--text-main)}.glass-panel{background:linear-gradient(160deg,#0f172aeb,#080c16d9);border:1px solid rgba(148,163,184,.16);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 30px 70px #00000080,inset 0 1px #ffffff0d}.neon-pill{position:relative;overflow:hidden}.neon-pill:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);transform:translate(-120%);transition:transform .45s ease}.neon-pill:hover:after{transform:translate(120%)}.glow-hover{transition:transform .22s ease,box-shadow .22s ease}.glow-hover:hover{transform:translateY(-1px);box-shadow:0 0 22px #3b82f659}.nav-button{background:#0f172ad9;color:#e2e8f0;border:1px solid rgba(71,85,105,.6);box-shadow:0 6px 18px #00000059}.nav-button:hover{background:#1e293bf2;color:#fff;border-color:#94a3b8b3}.nav-button.is-active{background:#080c16f2;color:#fff;border-color:#94a3b8d9;box-shadow:0 0 16px #06b6d433}.control-button{background:linear-gradient(145deg,#111827fa,#080c16e6);color:#f8fafc;border:1px solid rgba(71,85,105,.65);box-shadow:0 14px 30px #0000008c,inset 0 1px #ffffff0a}.control-button:hover{background:linear-gradient(145deg,#1e293bfa,#0c1220f2);border-color:#94a3b8cc}.play-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:2px solid rgba(16,185,129,.6);border-radius:18px;box-shadow:0 0 30px #10b98166,0 0 60px #10b98133,0 8px 20px #0006,inset 0 1px 1px #ffffff4d;text-shadow:0 2px 4px rgba(0,0,0,.4);font-weight:700;letter-spacing:.04em;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.play-button:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translate(-100%);transition:transform .6s ease;border-radius:18px}.play-button:hover:before{transform:translate(100%)}.play-button:hover{background:linear-gradient(135deg,#059669,#047857);border-color:#10b981cc;box-shadow:0 0 40px #10b98199,0 0 80px #10b9814d,0 12px 28px #00000080,inset 0 1px 2px #fff6;transform:translateY(-2px) scale(1.02)}.clear-button{background:linear-gradient(145deg,#334155b3,#1e293be6);color:#f1f5f9;border:1.5px solid rgba(148,163,184,.4);border-radius:16px;box-shadow:0 0 20px #94a3b826,0 6px 16px #0006,inset 0 1px #ffffff1a;font-weight:600;letter-spacing:.03em;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.clear-button:hover{background:linear-gradient(145deg,#475569cc,#334155);border-color:#94a3b899;color:#fff;box-shadow:0 0 30px #94a3b840,0 8px 20px #00000080,inset 0 1px 1px #ffffff26;transform:translateY(-2px) scale(1.01)}.pad-button{background:linear-gradient(150deg,#111827fa,#080c16e6);color:#e2e8f0;border:1px solid rgba(71,85,105,.7);box-shadow:0 14px 30px #0000008c,inset 0 1px #ffffff0d}.pad-button:hover{background:linear-gradient(150deg,#1e293bfa,#0c1220f2);border-color:#94a3b8d9}.mini-slider{width:100%;height:4px;border-radius:999px;background:linear-gradient(90deg,#94a3b859,#1e293be6);-webkit-appearance:none;appearance:none;cursor:pointer}.mini-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#fff,#cbd5f5);border:2px solid rgba(15,23,42,.85);box-shadow:0 4px 12px #0000008c}.mini-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#fff,#cbd5f5);border:2px solid rgba(15,23,42,.85);box-shadow:0 4px 12px #0000008c}.mini-select{width:100%;background:linear-gradient(145deg,#0f172af2,#080c16e6);color:#e2e8f0;border:1px solid rgba(71,85,105,.65);border-radius:8px;padding:4px 6px;font-size:11px;font-weight:600;letter-spacing:.02em;box-shadow:inset 0 1px #ffffff0d}.mini-select:focus{outline:none;border-color:#94a3b8cc}.footer-link,.footer-link:visited{color:#fff}.footer-link:hover,.footer-link:focus{color:#e0f2fe;text-decoration-color:#e0f2fe99}.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;text-transform:uppercase;letter-spacing:.28em;font-size:11px;color:#94a3b8;margin-bottom:12px}.footer-nav-link{position:relative;cursor:pointer;color:#94a3b8;transition:color .18s ease}.footer-nav-link:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:#94a3b88c;transform:scaleX(0);transform-origin:center;transition:transform .18s ease}.footer-nav-link:hover{color:#f8fafc}.footer-nav-link:hover:after{transform:scaleX(1)}.footer-nav-link.is-active{color:#fff}.playhead-line{position:absolute;top:-6px;bottom:-6px;width:3px;background:linear-gradient(180deg,#fbbf2400,#fbbf24,#fbbf2400);box-shadow:0 0 16px #fbbf24cc,0 0 8px #fbbf2480;border-radius:999px;pointer-events:none;transform:translate(-50%);transition:left 80ms linear;z-index:10}.fade-in-up{animation:fadeInUp .6s ease-out both}.beat-pad{transition:all .15s ease-out}.beat-pad:active{transform:scale(.95)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes stepPulse{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.grid-step{width:100%;aspect-ratio:1;min-height:38px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:all .16s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;touch-action:none;-webkit-tap-highlight-color:transparent;background:linear-gradient(145deg,#0e1422eb,#080c16e0);border:1px solid rgba(71,85,105,.35);color:#94a3b8;box-shadow:0 8px 18px #00000061,inset 0 1px #ffffff0a}@media(min-width:768px){.grid-step{min-height:22px;border-radius:7px;font-size:9px;border:.5px solid rgba(71,85,105,.4);padding:2px}}.grid-step:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.12) 0%,transparent 70%);opacity:0;transition:opacity .2s}.grid-step:hover:before{opacity:1}.grid-step:hover{border-color:#94a3b880;background:linear-gradient(145deg,#1e293bfa,#0c1220f2);transform:scale(1.03);box-shadow:0 4px 16px #0006,inset 0 1px #ffffff1a}.grid-step:active{transform:scale(.96)}.grid-step.is-active{background:linear-gradient(135deg,var(--step-color-from, #06b6d4),var(--step-color-to, #3b82f6))!important;border:1.5px solid rgba(255,255,255,.85)!important;color:#0a0a0a!important;font-weight:800!important;box-shadow:0 0 22px rgba(var(--step-glow-r, 255),var(--step-glow-g, 255),var(--step-glow-b, 255),.45),0 8px 20px #0000008c,inset 0 1px #ffffff47!important;animation:stepPulse .28s cubic-bezier(.34,1.56,.64,1);transform:scale(1.05)}.grid-step.is-active:before{opacity:1;background:radial-gradient(circle at center,rgba(255,255,255,.18) 0%,transparent 60%)}.grid-step.is-active:hover{transform:scale(1.06);box-shadow:0 0 26px rgba(var(--step-glow-r, 255),var(--step-glow-g, 255),var(--step-glow-b, 255),.6),0 10px 24px #000000a6,inset 0 1px #ffffff59!important}.grid-step.is-painting{border-color:#63b3edcc;box-shadow:0 0 14px #38bdf859,inset 0 1px #ffffff14}.grid-step.is-playing{outline:3px solid rgba(251,191,36,.9);outline-offset:1px;animation:playheadPulse .15s ease-out}@keyframes playheadPulse{0%,to{outline-color:#fbbf24e6}50%{outline-color:#fbbf24}}.step-indicator{width:7px;height:7px;border-radius:50%;background:#0a0a0a;box-shadow:0 0 4px #00000080;opacity:0;transform:scale(.5);transition:all .16s cubic-bezier(.34,1.56,.64,1)}.grid-step.is-active .step-indicator{opacity:1;transform:scale(1)}.step-number{font-family:JetBrains Mono,monospace;font-size:10px;font-weight:700;letter-spacing:-.02em}.step-group-divider{position:absolute;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,rgba(148,163,184,.3),transparent);pointer-events:none;z-index:5}