:root{--bg:#0b0c09;--panel:#13150f;--panel-2:#1b1e15;--line:#2a2e21;--text:#e8ecd9;--dim:#858c73;--faint:#474c3b;--acid:#c8f53a;--acid-ink:#10130a;--accent:#ff8a1f;--slide:#45d9c8;--bd:#ff6a45;--sd:#ffbd3a;--hh:#62ccff;--mono:ui-monospace, "Roboto Mono", "DejaVu Sans Mono", "Droid Sans Mono", monospace;--row:28px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:var(--mono);color:var(--text);background:var(--bg);-webkit-text-size-adjust:100%}*{box-sizing:border-box}html,body{background:var(--bg);overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button,select,input{font:inherit;color:inherit}button{touch-action:manipulation;border:1px solid var(--line);background:var(--panel-2);cursor:pointer;border-radius:0;min-height:40px;padding:0}button:disabled{opacity:.35;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,[role=spinbutton]:focus-visible{outline:2px solid var(--acid);outline-offset:1px}.sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.app{max-width:560px;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);flex-direction:column;margin:0 auto;display:flex;position:relative}main{flex-direction:column;flex:1;min-height:0;display:flex}.topbar{align-items:center;gap:6px;height:54px;padding:5px 8px;display:flex}.play{background:var(--acid);width:56px;height:44px;color:var(--acid-ink);border-color:var(--acid);font-size:20px}.play.on{background:var(--accent);border-color:var(--accent)}.drag-value{touch-action:none;border:1px dashed var(--faint);cursor:ns-resize;border-radius:0;flex-direction:column;justify-content:center;align-items:center;width:58px;height:44px;line-height:1;display:flex}.drag-value strong{font-size:18px}.drag-value small{color:var(--dim);margin-top:3px;font-size:10px}.history{gap:4px;display:flex}.history button{width:40px;height:44px;font-size:20px}.mode{width:64px;height:44px;color:var(--dim);flex-direction:column;justify-content:center;align-items:center;font-size:13px;font-weight:700;line-height:1;display:flex}.mode small{margin-bottom:3px;font-size:9px;font-weight:400}.mode.is-song{color:var(--slide);border-color:var(--slide)}.rec-indicator{color:#ff6b6b;border-color:#ff6b6b;align-items:center;gap:6px;height:44px;padding:0 8px;font-size:13px;display:flex}.rec-indicator i,.rec i{background:#ff4d4d;border-radius:50%;width:9px;height:9px;animation:1s steps(2,jump-none) infinite queued}.history{margin-left:auto}.viewbar{border-top:1px solid var(--line);background:var(--panel);padding-bottom:env(safe-area-inset-bottom);flex:none;grid-template-columns:repeat(4,1fr);display:grid}.viewbar button{height:48px;color:var(--dim);background:0 0;border:0;border-radius:0;font-size:13px}.viewbar button[aria-selected=true]{color:var(--acid);box-shadow:inset 0 2px var(--acid)}.patterns{grid-template-columns:repeat(8,1fr) 40px;gap:4px;padding:0 8px 6px;display:grid}.pattern{height:36px;min-height:36px;color:var(--dim);background:var(--panel);font-size:14px;position:relative}.pattern.active{color:var(--acid-ink);background:var(--acid);border-color:var(--acid)}.pattern.sounding:after{content:"";background:var(--accent);border-radius:50%;width:6px;height:6px;position:absolute;top:4px;right:4px}.pattern.queued{animation:.5s steps(2,jump-none) infinite queued}@keyframes queued{0%{border-color:var(--line)}to{border-color:var(--accent)}}.menu{z-index:5;background:var(--panel);border:1px solid var(--line);border-radius:0;flex-direction:column;gap:6px;width:244px;padding:10px;display:flex;position:absolute;top:100px;right:8px;box-shadow:0 12px 30px #0000008c}.menu p{color:var(--dim);margin:0 0 2px;font-size:12px}.menu>button{text-align:left;height:44px;padding:0 12px}.menu>.help-item{color:var(--dim);margin-top:4px}.notice.update{color:#c9fff6;background:#13302b;justify-content:space-between;align-items:center;gap:10px;display:flex}.notice.update button{height:34px;min-height:34px;color:var(--acid-ink);background:var(--slide);border-color:var(--slide);padding:0 12px;font-weight:700}.notice{color:#ffd7a1;background:#3a2a10;border-radius:0;margin:0 8px 6px;padding:8px 10px;font-size:13px}.grid{border:1px solid var(--line);background:var(--panel);border-radius:0;flex-direction:column;flex:1;min-height:0;margin:0 8px;display:flex;overflow:hidden}.head{border-bottom:1px solid var(--line);flex:none;grid-template-columns:30px repeat(4,1fr);display:grid}.head.tabs{grid-template-columns:64px repeat(4,1fr)}.head.columns{color:var(--dim);grid-template-columns:30px 1.6fr repeat(4,1fr);font-size:11px}.focus-acid .head.columns{grid-template-columns:28px 1.45fr repeat(6,1fr)}.colhead{text-align:center;padding:4px 0}.lanehead,.back{background:0 0;border:0;border-radius:0;justify-content:center;align-items:center;gap:6px;height:34px;min-height:34px;font-size:13px;font-weight:700;display:flex}.back{color:var(--dim);font-weight:400}.lanehead.bd{color:var(--bd)}.lanehead.sd{color:var(--sd)}.lanehead.hh{color:var(--hh)}.lanehead.acid{color:var(--acid)}.tabs .lanehead:not(.active){opacity:.45}.tabs .lanehead.active{box-shadow:inset 0 -2px}.led{opacity:.2;background:currentColor;border-radius:50%;width:6px;height:6px}.lanehead.lit .led{opacity:1;box-shadow:0 0 6px}.rows{overscroll-behavior:contain;touch-action:pan-y;grid-auto-rows:minmax(var(--row), 1fr);flex:1;min-height:0;display:grid;overflow-y:auto}.line{border-bottom:1px solid #ffffff09;grid-template-columns:30px repeat(4,1fr);align-items:stretch;display:grid}.focused .line{grid-template-columns:30px 1.6fr repeat(4,1fr)}.focus-acid .line{grid-template-columns:28px 1.45fr repeat(6,1fr)}.line.beat{background:#ffffff09}.line.playhead{box-shadow:inset 3px 0 var(--acid);background:#c8f53a29}.rownum{color:var(--faint);justify-content:center;align-items:center;font-size:11px;display:flex}.line.beat .rownum{color:var(--dim)}.line.current .rownum{color:var(--acid)}.cell{letter-spacing:.02em;min-height:0;color:var(--faint);white-space:nowrap;background:0 0;border:0;border-radius:0;justify-content:center;align-items:center;font-size:15px;display:flex;position:relative}.cell.on{color:var(--text)}.cell.on.bd .code{color:var(--bd)}.cell.on.sd .code{color:var(--sd)}.cell.on.hh .code{color:var(--hh)}.cell.on.acid .code{color:var(--acid)}.cell.accent .code{font-weight:800}.cell .flags{color:var(--accent);min-width:0;font-size:13px}.cell .depth{color:var(--slide);font-size:10px;position:absolute;top:2px;right:5px}.cell.selected{background:#45d9c833;box-shadow:inset 0 0 0 1px #45d9c880}.focused .cell.col-main{touch-action:none}.cell.cursor{outline:2px solid var(--acid);outline-offset:-2px;background:#c8f53a14}.focused .cell:not(.col-main) .code{color:var(--faint);font-weight:400}.focused .cell.col-accent.set .code{color:var(--accent);font-weight:800}.focused .cell.col-slide.set .code{color:var(--slide);font-weight:800}.focused .cell.col-chance.set .code,.focused .cell.col-ratchet.set .code{color:var(--text)}.focused .cell.col-fx .code{font-size:13px}.focused .cell.col-ride .code{font-size:15px}.focused .cell.col-ride.set .code{color:#ff8f8f}.ride-badge{color:#ff8f8f;margin-left:4px;font-size:9px}.focused .cell.col-fx.set .code{color:var(--slide);font-weight:700}.editor{flex-direction:column;flex:none;gap:6px;padding:8px;display:flex}.where{color:var(--dim);justify-content:space-between;padding:0 2px;font-size:12px;display:flex}.where strong{color:var(--text)}.pads{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:5px;display:grid}.pads.notes{grid-template-columns:repeat(7,1fr) .8fr}.pads.drums{display:flex}.pads.drums .pad{flex:1}.pads.drums .mode-switch{flex:0 0 64px}.pads.fx-pads{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.pad.mode-switch{border-color:var(--slide);background:0 0;font-size:14px;color:var(--slide)!important}.pad.fx{flex-direction:column;justify-content:center;align-items:center;line-height:1.1;display:flex;color:var(--slide)!important}.pad small{color:var(--dim);font-size:10px;font-weight:400}.pad.mode-switch small{color:var(--slide)}.editor .pad.fx.active{background:var(--slide);color:var(--acid-ink)!important}.pad.fx.active small{color:var(--acid-ink)}.pad.mode-switch{flex-direction:column;justify-content:center;align-items:center;line-height:1.1;display:flex}.fx-value[aria-pressed=true]{background:var(--slide);color:var(--acid-ink);border-color:var(--slide)}.fx-value[aria-pressed=true] small{color:var(--acid-ink)}.fx-code{color:var(--slide);margin-left:.6em}.pad{background:#20241a;height:52px;font-size:17px;font-weight:700}.editor.acid .pad{color:var(--acid)}.editor.bd .pad{color:var(--bd)}.editor.sd .pad{color:var(--sd)}.editor.hh .pad{color:var(--hh)}.pad.root{border-color:#c8f53a66}.pad.active{background:currentColor}.pad:active{filter:brightness(1.4)}.editor.acid .pad.active{color:var(--acid)}.pad.active{background:var(--acid);color:var(--acid-ink)!important}.editor.bd .pad.active{background:var(--bd)}.editor.sd .pad.active{background:var(--sd)}.editor.hh .pad.active{background:var(--hh)}.tools{gap:5px;display:flex}.tools>button,.tools>.octave{flex:1;height:44px;font-size:14px}.tools small{color:var(--dim);margin-bottom:2px;font-size:10px;display:block}.tools .nav{flex:.7;font-size:16px}.octave{border:1px solid var(--line);border-radius:0;align-items:center;display:flex;overflow:hidden;flex:1.5!important}.octave button{border:0;border-radius:0;width:34px;height:100%;font-size:18px}.octave span{text-align:center;white-space:nowrap;flex:1;font-size:13px}.toggle[aria-pressed=true].accent{background:var(--accent);color:var(--acid-ink);border-color:var(--accent)}.toggle[aria-pressed=true].slide{background:var(--slide);color:var(--acid-ink);border-color:var(--slide)}.clear{font-size:18px;flex:.7!important}@media (max-width:380px){.topbar{gap:5px}.play{width:48px}.drag-value{width:52px}.history button{width:34px}.mode{width:56px}.pad{font-size:16px}.tools>button,.tools>.octave{font-size:13px}}.perform{flex-direction:column;flex:1;gap:8px;min-height:0;padding:0 8px 8px;display:flex}.xy{touch-action:none;border:1px solid var(--line);background:linear-gradient(#ffffff0a 1px, transparent 1px) 0 0 / 100% 25%, linear-gradient(90deg, #ffffff0a 1px, transparent 1px) 0 0 / 25% 100%, radial-gradient(circle at 70% 30%, #c8f53a1a, transparent 60%), var(--panel);cursor:crosshair;border-radius:0;flex:1;min-height:170px;position:relative;overflow:hidden}.xy .line{pointer-events:none;background:#c8f53a38;position:absolute}.xy .line.vertical{width:1px;top:0;bottom:0}.xy .line.horizontal{height:1px;left:0;right:0}.xy .dot{background:var(--acid);pointer-events:none;border-radius:50%;width:26px;height:26px;margin:-13px 0 0 -13px;transition:transform 80ms;position:absolute;box-shadow:0 0 18px #c8f53ab3}.xy.touched .dot{transform:scale(1.6);box-shadow:0 0 30px #c8f53ae6}.xy .axis{color:var(--dim);pointer-events:none;font-size:11px;position:absolute}.xy .axis.x{bottom:8px;right:10px}.xy .axis.y{top:10px;left:10px}.xy .readout{color:var(--acid);font-size:13px;position:absolute;top:8px;right:10px}.xy .ride{gap:4px;display:flex;position:absolute;bottom:8px;left:8px}.xy .ride button{background:#13150fd9;align-items:center;gap:6px;height:34px;min-height:34px;padding:0 10px;font-size:12px;display:flex}.xy .ride-arm i{opacity:.5;background:#ff4d4d;border-radius:50%;width:8px;height:8px}.xy .ride-arm[aria-pressed=true]{color:#ffd0d0;background:#3a1616e6;border-color:#ff4d4d}.xy .ride-arm[aria-pressed=true] i{opacity:1;animation:1s steps(2,jump-none) infinite queued}.xy .ride-clear{width:34px;color:var(--dim);justify-content:center;padding:0}.dj{touch-action:none;border:1px solid var(--line);background:var(--panel);cursor:ew-resize;border-radius:0;flex:none;height:52px;position:relative;overflow:hidden}.dj .fill{background:#62ccff4d;position:absolute;top:0;bottom:0}.dj.high .fill{background:#ff8a1f4d}.dj .label{color:var(--dim);pointer-events:none;font-size:12px;position:absolute;top:50%;transform:translateY(-50%)}.dj .label.left{left:10px}.dj .label.right{right:10px}.dj .label.mid{color:var(--faint);left:50%;transform:translate(-50%,-50%)}.bar{flex:none;grid-template-columns:repeat(16,1fr);gap:3px;height:8px;display:grid}.bar i{background:var(--panel-2);border-radius:2px}.bar i.beat{background:var(--line)}.bar i.now{background:var(--acid);box-shadow:0 0 6px #c8f53ab3}.mutes{flex:none;grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.mute{justify-content:center;align-items:center;gap:7px;height:54px;font-size:15px;font-weight:700;display:flex}.mute.bd{color:var(--bd)}.mute.sd{color:var(--sd)}.mute.hh{color:var(--hh)}.mute.acid{color:var(--acid)}.mute[data-state=muted]{color:var(--faint);background:var(--bg);text-decoration:line-through}.mute[data-state=pending]{animation:.5s steps(2,jump-none) infinite queued}.mute.lit .led{opacity:1;box-shadow:0 0 6px}.performance-row{flex:none;gap:6px;display:flex}.rec{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;height:64px;display:flex}.rec strong{color:#ff6b6b;align-items:center;gap:6px;font-size:15px;display:flex}.rec i{opacity:.6;animation:none}.rec[aria-pressed=true]{background:#3a1616;border-color:#ff4d4d}.rec[aria-pressed=true] i{opacity:1;animation:1s steps(2,jump-none) infinite queued}.rec small{color:var(--dim);font-size:11px}.break{touch-action:none;-webkit-user-select:none;user-select:none;flex-direction:column;flex:2.2;justify-content:center;align-items:center;gap:2px;height:64px;display:flex}.break strong{letter-spacing:.08em;font-size:16px}.break small{color:var(--dim);font-size:11px}.break[data-state=break]{border-color:var(--accent);background:#4a3a14}.break[data-state=drop]{border-color:var(--acid);animation:.5s steps(2,jump-none) infinite queued}@media (prefers-reduced-motion:reduce){.pattern.queued,.mute[data-state=pending],.break[data-state=drop]{border-style:dashed;animation:none}}.song{flex-direction:column;flex:1;min-height:0;display:flex}.song-head{color:var(--dim);justify-content:space-between;align-items:center;gap:8px;padding:0 10px 6px;font-size:12px;display:flex}.song-export{height:32px;min-height:32px;color:var(--slide);border-color:var(--slide);padding:0 10px;font-size:12px}.entries{overscroll-behavior:contain;touch-action:pan-y;border:1px solid var(--line);background:var(--panel);border-radius:0;flex-direction:column;flex:1;gap:3px;min-height:0;margin:0 8px;padding:4px;display:flex;overflow-y:auto}.entry{text-align:left;background:#ffffff06;border-color:#0000;flex:none;grid-template-columns:30px 56px 1fr auto;align-items:center;gap:8px;height:40px;min-height:40px;padding:0 10px 0 6px;display:grid}.entry .num{color:var(--faint);text-align:center;font-size:11px}.entry .chip{color:var(--acid);font-size:16px;font-weight:700}.entry .lanes{gap:4px;display:flex}.entry .lanes i{border-radius:2px;width:8px;height:8px}.entry .lanes i.bd{background:var(--bd)}.entry .lanes i.sd{background:var(--sd)}.entry .lanes i.hh{background:var(--hh)}.entry .lanes i.acid{background:var(--acid)}.entry .len{color:var(--faint);font-size:11px}.entry.cursor{outline:2px solid var(--acid);outline-offset:-2px}.entry.playhead{box-shadow:inset 3px 0 var(--slide);background:#45d9c82e}.entry.end{color:var(--dim);border:1px dashed var(--line);background:0 0;justify-content:center;font-size:13px;display:flex}.pads.patterns8{grid-template-columns:repeat(8,1fr)}.song-editor .pad{color:var(--acid)}.song-editor .pad.empty{color:var(--dim)}.song-editor .pad.active{color:var(--acid-ink)}.play-from{color:var(--slide);flex:1.4!important}.selection-bar .tools>button{font-size:13px}.selection-bar .done{color:var(--acid);border-color:var(--acid);flex:.8}.selection-bar .fill-open{color:var(--slide);border-color:var(--slide)}.tools.fills{flex-wrap:wrap}.tools.fills>button{flex:1 0 22%}.fill-hint{color:var(--dim);margin:0;font-size:11px}.menu>.project-item{height:auto;min-height:48px;color:var(--acid);flex-direction:column;justify-content:center;align-items:flex-start;padding:6px 12px;font-weight:700;display:flex}.menu>.project-item small{color:var(--dim);font-size:10px;font-weight:400}.projects-head{justify-content:space-between;align-items:center;display:flex}.take-close.inline{width:auto;height:38px;min-height:38px;margin:0;padding:0 12px}.project-name{align-items:center;gap:10px;margin:8px 0 12px;font-size:13px;display:flex}.project-name input{border:1px solid var(--line);background:var(--panel-2);height:44px;color:var(--text);font:inherit;-webkit-user-select:text;user-select:text;flex:1;padding:0 10px}.project-list{flex-direction:column;gap:4px;max-height:34dvh;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.project-list li{gap:4px;display:flex}.project-open{text-align:left;flex-direction:column;flex:1;justify-content:center;align-items:flex-start;min-height:52px;padding:6px 12px;display:flex}.project-open small{color:var(--dim);font-size:11px}.project-list li.active .project-open{border-color:var(--acid);color:var(--acid)}.project-delete{width:64px;color:var(--dim)}.project-delete.confirm{width:96px;color:var(--acid-ink);background:#ff6b6b;border-color:#ff6b6b}.project-actions{grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;display:grid}.project-actions button{min-height:46px;padding:0 8px;font-size:13px}.project-actions .share-link{color:var(--slide);border-color:var(--slide);grid-column:1/-1}.link-box{margin-top:10px}.link-box input{border:1px solid var(--line);background:var(--panel-2);width:100%;height:40px;color:var(--dim);font:inherit;-webkit-user-select:text;user-select:text;padding:0 8px;font-size:11px}.link-actions{gap:6px;margin-top:6px;display:flex}.link-actions button{flex:1;height:44px}.help.take-overlay{top:calc(54px + env(safe-area-inset-top))}.take audio{width:100%;margin:6px 0 4px}.take .file{color:var(--dim);overflow-wrap:anywhere;font-size:12px}.take-actions{gap:8px;display:flex}.take-actions>*{border-radius:0;flex:1;justify-content:center;align-items:center;height:50px;font-weight:700;text-decoration:none;display:flex}.take-close{width:100%;height:46px;color:var(--dim);margin-top:10px}.sound{overscroll-behavior:contain;flex:1;min-height:0;padding:4px 12px 16px;overflow-y:auto}.sound h2{letter-spacing:.08em;color:var(--acid);margin:14px 0 8px;font-size:13px}.segmented{border:1px solid var(--line);border-radius:0;display:flex;overflow:hidden}.segmented button{background:var(--panel);height:44px;color:var(--dim);border:0;border-radius:0;flex:1;font-size:13px}.segmented button[aria-pressed=true]{background:var(--acid);color:var(--acid-ink)}.segmented.waveform{margin-top:6px}.slider{grid-template-columns:88px 1fr 36px;align-items:center;gap:10px;min-height:48px;font-size:13px;display:grid}.slider output{text-align:right;color:var(--dim)}input[type=range]{width:100%;height:44px;accent-color:var(--acid);touch-action:pan-y;background:0 0;margin:0}.key{flex-direction:column;gap:8px;margin-top:8px;display:flex}.key label{align-items:center;gap:10px;font-size:13px;display:flex}.key select{border:1px solid var(--line);background:var(--panel-2);border-radius:0;flex:1;height:44px;padding:0 10px}.note{color:var(--dim);margin:16px 0 0;font-size:12px}.help{z-index:10;background:#0009;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{background:var(--panel);border-top:2px solid var(--acid);width:100%;max-width:560px;max-height:90dvh;padding:16px 18px calc(18px + env(safe-area-inset-bottom));border-radius:0;font-size:14px;line-height:1.45;overflow-y:auto}.sheet h2{color:var(--acid);margin:0 0 8px}.sheet ul{padding-left:18px}.sheet li{margin-bottom:6px}.sheet code{color:var(--accent)}.primary{background:var(--acid);width:100%;height:50px;color:var(--acid-ink);border-color:var(--acid);font-weight:700}