html,body,#root{height:100%;margin:0}html,body{background:var(--outside);overscroll-behavior:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;font-family:Archivo,system-ui,sans-serif;overflow:hidden}*,:before,:after{box-sizing:border-box;border-radius:0}button,input{font-family:inherit}button{-webkit-user-select:none;user-select:none}@keyframes bcfade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes bcpulse{0%,to{box-shadow:0 0 10px var(--glow-50)}50%{box-shadow:0 0 28px var(--glow-100)}}.hov:hover{border-color:var(--accent)!important}.hov-accent:hover{background:var(--accent-hover)!important}.darkkey:hover{color:var(--nav-text)!important}.darkkey:active{transform:translateY(1px);background:var(--dark-key-down)!important;box-shadow:inset 0 2px 5px #0009!important}.ghost:hover{background:var(--ink-07)!important}.slot-name:focus{border-color:var(--accent)!important}:focus{outline:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.no-scrollbar{scrollbar-width:none;-webkit-overflow-scrolling:touch}.no-scrollbar::-webkit-scrollbar{display:none}.hov:active,.pad:active{transform:translateY(1px);background:var(--key-down)!important;border-color:var(--border-down)!important;box-shadow:inset 0 2px 5px #00000052,inset 0 -1px #ffffff40!important}.hov-accent:active{transform:translateY(1px);background:var(--accent-down)!important;box-shadow:inset 0 2px 5px #00000059!important}.rotate-screen{z-index:100;padding:max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));color:#eeeeea;background:#3d4242;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:auto}.rotate-card{text-align:center;max-width:340px}.rotate-card svg{color:var(--accent);margin-bottom:16px}.rotate-card h1{margin:0 0 16px;font-size:28px;line-height:1.15}.rotate-card p{margin:0;font-size:16px;line-height:1.5}.rotate-card .rotate-tip{opacity:.7;margin-top:24px;font-size:13px}#bc-wrap{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.save-pattern-dialog::backdrop{background:#0b0a0980}.rotate-phone{transform-origin:48px 58px;animation:3.6s ease-in-out infinite rotate-phone}.rotate-arrow{animation:3.6s ease-in-out infinite rotate-arrow}@keyframes rotate-phone{0%,15%{opacity:1;transform:rotate(0)}50%,78%{opacity:1;transform:rotate(90deg)}88%{opacity:0;transform:rotate(90deg)}89%,94%{opacity:0;transform:rotate(0)}to{opacity:1;transform:rotate(0)}}@keyframes rotate-arrow{0%,12%,80%,to{opacity:0}25%,65%{opacity:1}}@media (prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:rotate(90deg)}.rotate-arrow{opacity:1;animation:none}}.mobile-app{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:var(--m-canvas);color:var(--m-ink);grid-template-columns:56px minmax(0,1fr) 48px;gap:8px;font-size:13px;display:grid;position:fixed;inset:0}.mobile-app button,.mobile-sheet button{border:1px solid var(--m-border);background:var(--m-key);min-height:44px;color:var(--m-ink);box-shadow:0 2px 0 var(--m-border);cursor:pointer;touch-action:manipulation;padding:5px;font-weight:700}.mobile-app button:active,.mobile-app button[aria-pressed=true],.mobile-sheet button[aria-pressed=true]{background:var(--m-down);box-shadow:inset 0 2px 4px #0004}.mobile-app button:disabled,.mobile-sheet button:disabled{opacity:.45;cursor:default}.mobile-app svg,.mobile-sheet svg{flex:none}.mobile-left,.mobile-right{flex-direction:column;gap:4px;min-height:0;display:flex}.mobile-left{background:var(--m-nav);padding:4px}.mobile-left .mobile-brand{box-shadow:none;color:var(--m-nav-text);text-align:left;background:0 0;border:0;min-height:36px;padding:0;font-size:10px;line-height:1.15}.mobile-brand span{color:var(--m-accent)}.mobile-left [role=tablist]{flex-direction:column;gap:4px;display:flex}.mobile-left [role=tab]{flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:44px;font-size:10px;display:flex}.mobile-left [aria-selected=true]{background:var(--m-display);color:var(--m-display-text);box-shadow:inset 0 2px 4px #0008}.mobile-left .mobile-play{background:var(--m-accent);color:var(--m-accent-text);place-items:center;margin-top:auto;display:grid}.mobile-right .mobile-rail-button{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;min-width:0;min-height:36px;padding:2px;font-size:10px;display:flex}.mobile-rail-button strong{font-variant-numeric:tabular-nums;font-size:16px}.mobile-rail-button span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.mobile-content{flex-direction:column;gap:8px;min-width:0;min-height:0;display:flex}.mobile-rows{overscroll-behavior:contain;scrollbar-width:thin;flex:1;min-height:0;overflow-y:auto}.mobile-track{border-bottom:1px solid var(--m-rule);grid-template-columns:88px minmax(0,1fr);gap:8px;min-height:82px;padding:6px 0 8px;display:grid}.mobile-track-controls{flex-direction:column;gap:3px;display:flex}.mobile-track .mobile-pad{text-align:left;align-items:center;gap:5px;min-height:30px;padding:4px;font-size:11px;display:flex}.mobile-ms{gap:4px;display:flex}.mobile-ms button{flex:1;place-items:center;min-height:32px;display:grid}.mobile-led{background:var(--m-display);flex:none;width:6px;height:4px;display:block}.mobile-led[data-lit=true]{background:var(--m-accent);box-shadow:0 0 5px var(--m-accent)}.mobile-steps{grid-template-columns:repeat(16,minmax(0,1fr));align-items:stretch;gap:3px;display:grid}.mobile-steps .mobile-step{background:var(--m-step);justify-content:center;align-items:flex-start;min-width:0;min-height:60px;padding:7px 0 0;display:flex;position:relative}.mobile-step[data-head=true]{outline:2px solid var(--m-accent);outline-offset:-2px}.mobile-track[data-dim=true] .mobile-steps{opacity:.45}.mobile-add{flex:none;justify-content:center;align-items:center;gap:8px;display:flex}.mobile-scroll{overscroll-behavior:contain;min-height:0;padding:6px 8px;overflow:auto}.mobile-scroll h1{margin:0 0 12px;font-size:16px}.mobile-scroll p{line-height:1.4}.mobile-slider{margin:8px 0 18px;display:block}.mobile-slider>span{justify-content:space-between;align-items:center;gap:12px;font-weight:700;display:flex}.mobile-slider output{font-variant-numeric:tabular-nums}.mobile-slider .mobile-bpm-readout{background:var(--m-display);color:var(--m-display-text);border:1px solid var(--m-border);padding:8px 10px;box-shadow:inset 0 2px 6px #0009}.mobile-slider input{width:100%;min-height:44px;accent-color:var(--m-accent)}.mobile-shape-top{flex-wrap:wrap;align-items:flex-end;gap:8px;display:flex}.mobile-shape-top label{flex-direction:column;flex:1;gap:5px;display:flex}.mobile-app select,.mobile-app input:not([type=range]){background:var(--m-card);min-height:44px;color:var(--m-ink);border:1px solid var(--m-border);width:100%;padding:6px;font-size:16px}.mobile-patterns{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;display:grid}.mobile-slot{border:1px solid var(--m-rule);background:var(--m-card);padding:8px}.mobile-slot[data-current=true]{border-color:var(--m-ink)}.mobile-slot-heading{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.mobile-slot-heading button{place-items:center;width:44px;display:grid}.mobile-slot-actions{gap:5px;margin-top:8px;display:flex}.mobile-slot-actions button{flex:1}.mobile-delete{margin-top:8px}.mobile-delete button{margin-right:8px}.mobile-error{background:var(--m-card);padding:8px}.mobile-sheet{border:0;border-left:1px solid var(--m-border);background:var(--m-modal);width:50vw;max-width:none;height:100dvh;max-height:100%;color:var(--m-ink);padding:12px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) 16px;margin:0;position:fixed;inset:0 0 0 auto;overflow:auto;box-shadow:-10px 0 30px #0004}.mobile-sheet::backdrop{background:#0006}.mobile-sheet header{justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;display:flex}.mobile-sheet h2{margin:0;font-size:18px}.mobile-sheet .mobile-icon-button{flex:none;place-items:center;width:44px;display:grid}.mobile-sheet p{font-size:14px;line-height:1.5}.mobile-sheet-actions{gap:8px;display:flex}.mobile-sheet-actions button{flex:1}.mobile-wide{width:100%}.mobile-accent-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.mobile-pattern-picker{flex-direction:column;gap:8px;display:flex}.mobile-pattern-picker button{text-align:left;align-items:center;gap:12px;display:flex}.mobile-pattern-picker span{color:var(--m-muted)}@media (height<=350px){.mobile-app{gap:5px;padding-top:4px;padding-bottom:4px}.mobile-left [role=tab]{min-height:40px}.mobile-left .mobile-brand{min-height:28px}.mobile-left .mobile-play{min-height:40px}.mobile-right .mobile-rail-button{min-height:32px}.mobile-track{min-height:76px}}@media (width<=700px){.mobile-app{grid-template-columns:50px minmax(0,1fr) 44px;gap:5px}.mobile-track{grid-template-columns:76px minmax(0,1fr);gap:5px}.mobile-steps{gap:2px}.mobile-step:nth-child(4n):not(:last-child){margin-right:2px}.mobile-sheet{width:55vw}}@media (orientation:portrait){.mobile-app{grid-template-columns:50px minmax(0,1fr) 44px}.mobile-track{grid-template-columns:1fr}.mobile-steps .mobile-step{min-height:44px}.mobile-track-controls{flex-direction:row}.mobile-pad{flex:1}.mobile-ms{width:88px}.mobile-sheet{width:90vw}}.mobile-full-view{grid-template-columns:56px minmax(0,1fr)}.mobile-right .mobile-rail-button{min-height:30px}.mobile-save-label{flex-direction:column;gap:8px;margin-bottom:14px;display:flex}.mobile-save-label input,.mobile-save-label select{background:var(--m-card);width:100%;min-height:44px;color:var(--m-ink);border:1px solid var(--m-border);padding:8px;font-size:16px}@media (width<=700px){.mobile-full-view{grid-template-columns:50px minmax(0,1fr)}}.mobile-app{grid-template-rows:44px minmax(0,1fr) 56px;grid-template-columns:minmax(0,1fr);gap:8px}.mobile-left{background:0 0;flex-direction:row;align-items:stretch;gap:8px;padding:0}.mobile-left .mobile-brand{white-space:nowrap;color:var(--m-ink);flex:none;align-self:center;min-height:44px;font-size:12px}.mobile-left [role=tablist]{flex-direction:row;flex:1;gap:6px;min-width:0}.mobile-left [role=tab]{flex-direction:row;flex:1;gap:6px;min-width:0;min-height:44px;font-size:12px}.mobile-right{border-top:1px solid var(--m-rule);flex-direction:row;gap:5px;padding-top:5px}.mobile-right .mobile-rail-button,.mobile-right .mobile-play{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;min-width:0;min-height:44px;padding:2px;font-size:11px;display:flex}.mobile-right .mobile-play{background:var(--m-accent);color:var(--m-accent-text);margin:0}.mobile-rows .mobile-add{width:auto;margin-top:12px;margin-bottom:8px;padding:8px 14px}.mobile-full-view{grid-template-rows:44px minmax(0,1fr);grid-template-columns:minmax(0,1fr)}.mobile-full-view .mobile-content{grid-column:1}@media (width<=700px){.mobile-app,.mobile-left{gap:6px}.mobile-left .mobile-brand{font-size:10px}.mobile-left [role=tablist]{gap:4px}.mobile-left [role=tab]{gap:4px;font-size:11px}.mobile-left [role=tab] svg{width:16px;height:16px}.mobile-right{gap:3px}.mobile-right .mobile-rail-button,.mobile-right .mobile-play{font-size:10px}}.mobile-app{padding-right:max(4px,env(safe-area-inset-right));padding-left:max(4px,env(safe-area-inset-left));grid-template-rows:52px minmax(0,1fr) 56px;padding-top:0}.mobile-left{background:var(--m-nav);border-bottom:2px solid var(--m-border);margin-left:calc(-1 * max(4px,env(safe-area-inset-left)));margin-right:calc(-1 * max(4px,env(safe-area-inset-right)));padding:4px max(4px,env(safe-area-inset-right)) 6px max(4px,env(safe-area-inset-left));align-items:center;gap:10px}.mobile-left .mobile-brand{color:var(--m-nav-text);align-items:center;gap:6px;min-height:40px;font-size:14px;font-weight:800;display:flex}.mobile-brand-led{flex:none;width:10px;height:10px;display:block}.mobile-left [role=tab]{text-transform:uppercase;min-height:38px}.mobile-left [role=tablist]{align-items:stretch}.mobile-rows{scrollbar-width:none}.mobile-rows::-webkit-scrollbar{display:none}.mobile-full-view{grid-template-rows:52px minmax(0,1fr)}@media (width<=700px){.mobile-left{gap:8px}.mobile-left .mobile-brand{font-size:12px}.mobile-left [role=tab]{letter-spacing:.04em!important;padding:5px 4px!important;font-size:11px!important}}.mobile-sheet{padding-right:16px}html[data-mobile-layout=true],html[data-mobile-layout=true] body{background-color:#cdcdc8;width:100%;min-height:100%}.mobile-app{width:100dvw;height:100dvh;inset:0 auto auto 0}.mobile-left{isolation:isolate;position:relative}.mobile-left:before{content:"";background:var(--m-nav);border-bottom:2px solid var(--m-border);z-index:-1;pointer-events:none;position:absolute;inset:0 -100vw}.mobile-app{padding-right:0}.mobile-left{margin-right:0;padding-right:4px}.mobile-steps{column-gap:3px}.mobile-step:nth-child(4n):not(:last-child){margin-right:0}.mobile-step:nth-child(4n+1):not(:first-child){margin-left:7px}@media (width<=700px){.mobile-steps{column-gap:2px}.mobile-step:nth-child(4n):not(:last-child){margin-right:0}.mobile-step:nth-child(4n+1):not(:first-child){margin-left:6px}}.mobile-steps{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:10px}.mobile-beat-group{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;min-width:0;display:grid}.mobile-beat-group .mobile-step:nth-child(n){margin:0}@media (width<=700px){.mobile-steps{column-gap:8px}.mobile-beat-group{gap:2px}}.mobile-app{padding-left:max(12px,env(safe-area-inset-left));padding-right:12px}.mobile-left{margin-left:calc(-1 * max(12px,env(safe-area-inset-left)));padding-left:max(12px,env(safe-area-inset-left));margin-right:-12px;padding-right:12px}.mobile-left:before{border-bottom:2px solid var(--m-border);bottom:-2px}.mobile-app{overflow:hidden}.mobile-left:before{left:0;right:0}.mobile-rows,.mobile-scroll{overflow-x:hidden}