:root{--bg0: #e7e8ee;--bg1: #f2f3f7;--bg2: #fafbfd;--bg3: #ffffff;--line: rgba(20, 22, 30, .1);--line-2: rgba(20, 22, 30, .2);--ink: #1b1c22;--muted: #5b5c66;--muted-2: #8a8c96;--rec: #ff453a;--warn: #ffb02e;--ok: #2fbf63;--accent: #19b6d8;--screen-bg: #f1f3f7;--screen-fg: #1b1c22;--shadow-1: 0 1px 2px rgba(20, 22, 30, .1);--shadow-2: 0 14px 36px rgba(20, 22, 30, .18);--s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 22px;--s6: 30px;--board-h: clamp(240px, 46vh, 500px);color-scheme:light}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;font-family:-apple-system,SF Pro Text,Inter,system-ui,Segoe UI,sans-serif;color:var(--ink);background:radial-gradient(1100px 760px at 72% -12%,#ffffff 0%,var(--bg0) 60%);user-select:none;-webkit-font-smoothing:antialiased}body{cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%3E%3Ccircle%20cx='9'%20cy='9'%20r='4'%20fill='%231b1c22'%20fill-opacity='0.85'/%3E%3Ccircle%20cx='9'%20cy='9'%20r='7'%20fill='none'%20stroke='%231b1c22'%20stroke-opacity='0.3'%20stroke-width='1.5'/%3E%3C/svg%3E") 9 9,auto}select,button,input{font-family:inherit}select{color:var(--ink)}select option{background:#1b1b1b;color:#f4f4f4}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}.t-label{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}#app{display:grid;grid-template-rows:52px minmax(0,1fr) auto;height:100vh;gap:var(--s3);padding:var(--s3) var(--s4) var(--s4);overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}.brand{display:flex;align-items:center;gap:10px;min-width:230px}.logo{height:38px;width:auto;display:block;opacity:1;cursor:pointer;transition:transform .12s}.logo:hover{transform:scale(1.06) rotate(-4deg)}.mark{font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--ink);font-family:SF Pro Display,-apple-system,Inter,system-ui,sans-serif}.mark-accent{color:var(--accent)}.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s,background .15s}.iconbtn:hover{color:var(--ink);border-color:var(--line-2);background:var(--bg3)}.iconbtn.rec-on{color:#fff;background:var(--rec);border-color:var(--rec);animation:blink .9s steps(1) infinite}.modebtn{display:inline-flex;align-items:center;height:34px;padding:0 13px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg2);color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.06em;cursor:pointer;transition:background .12s,color .12s,border-color .12s}.modebtn:hover{background:var(--bg3)}.modebtn.on{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:var(--accent);color:var(--accent)}#playmode{background:color-mix(in srgb,var(--ok) 18%,var(--bg2));border-color:color-mix(in srgb,var(--ok) 55%,var(--line));color:color-mix(in srgb,var(--ok) 55%,var(--ink))}#playmode.nav{background:color-mix(in srgb,var(--warn) 22%,var(--bg2));border-color:var(--warn);color:color-mix(in srgb,var(--warn) 65%,var(--ink))}.top-tools{display:flex;align-items:center;gap:var(--s2)}.screen{flex:0 1 460px;min-width:220px;max-width:560px;height:40px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s3);padding:0 14px;border-radius:12px;background:linear-gradient(180deg,#fff,#eef0f4);border:1px solid rgba(20,22,30,.08);box-shadow:inset 0 1px #ffffffe6,0 1px 2px #14161e2e;font-family:-apple-system,SF Pro Text,Inter,system-ui,sans-serif;color:var(--ink);overflow:hidden}.scr-l{display:flex;flex-direction:column;gap:1px;min-width:0}.scr-main{font-size:13px;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scr-sub{font-size:10px;color:var(--muted);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scr-r{display:flex;align-items:center;gap:8px}.scr-dots{display:flex;gap:5px}.scr-dot{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--lc, #c5c8cf) 24%,transparent);box-shadow:inset 0 0 0 1px #14161e14}.scr-dot.play{background:var(--lc);box-shadow:0 0 7px color-mix(in srgb,var(--lc) 70%,transparent)}.scr-dot.rec{background:var(--rec);box-shadow:0 0 7px #ff453ad9;animation:blink .8s steps(1) infinite}.scr-dot.mute{background:color-mix(in srgb,var(--lc) 35%,#d9dbe0);box-shadow:none}@keyframes blink{50%{opacity:.3}}.scr-bpm{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}.workspace{display:grid;grid-template-columns:var(--side) minmax(0,1fr) var(--side);gap:var(--s5);min-height:0;align-items:center;justify-items:center;padding:0 var(--s2)}:root{--side: clamp(280px, 25vw, 380px)}.device{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);min-width:0;width:100%;overflow:visible;border-radius:18px}.surface-col{max-width:min(100%,calc(var(--board-h) * 1.4))}.dial-col{width:100%;max-width:230px}.dial-col .dial{max-width:84%;margin:0 auto}.devlabel{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);text-align:center;padding:3px 9px;border-radius:7px;transition:background .12s,color .12s}.devlabel[draggable=true]{cursor:grab}.devlabel[draggable=true]:hover{color:var(--ink);background:var(--bg1)}.devlabel[draggable=true]:active{cursor:grabbing}.devlabel[draggable=true]:before{content:"⠿";font-size:12px;letter-spacing:0;color:var(--muted-2);opacity:.7}.tp-web-note{display:none;max-width:380px;margin-top:2px;text-align:center;font-size:10px;line-height:1.5;color:var(--muted-2)}.tp-web-note.show{display:block}.tp-web-note b{color:var(--muted);font-weight:700}.dial-caption{font-size:9px;color:var(--muted-2);text-align:center;margin-top:4px;line-height:1.6;max-width:200px}.dial-caption b{color:var(--muted);font-weight:700}.dial-mode{display:inline-block;padding:1px 6px;border-radius:5px;background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent);font-weight:800;font-size:9px;letter-spacing:.04em}.dial.looping .dial-knob{box-shadow:0 0 0 3px var(--loop-color, var(--accent)),0 0 18px var(--loop-color, var(--accent));border-radius:50%}.inst-switch{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s1);padding:4px;border-radius:12px;background:var(--bg1);border:1px solid var(--line);width:100%}.inst-tab{display:inline-flex;align-items:center;justify-content:center;gap:3px;width:100%;border:0;background:transparent;color:var(--muted);padding:6px;border-radius:9px;font-size:12px;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:color .14s,background .14s}.inst-tab:hover{color:var(--ink)}.inst-tab.on{color:#fff;background:var(--ink);box-shadow:var(--shadow-1)}.inst-tab.on .tkey{color:#ffffffa6;background:#ffffff1f;border-color:#ffffff38}.inst-tab.rec{color:#fff;background:var(--rec);animation:blink .8s steps(1) infinite}.inst-tab.rec.on .tkey,.inst-tab.rec .tkey{color:#ff7a70}.inst-tab[disabled]{opacity:.4;cursor:default}.board{position:relative;width:100%;height:auto;aspect-ratio:1.4 / 1;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#3a3a3d,#29292b 24%,#1f1f21);border:2px solid rgba(214,216,222,.5);box-shadow:inset 0 2px 10px #ffffff0f,inset 0 -10px 26px #00000073,0 24px 40px #181c3047,0 5px 10px #181c3029;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}@media (pointer: coarse){html,body{height:auto;min-height:100%;overflow:visible;overflow-x:hidden}#app{grid-template-rows:auto auto auto;height:auto;min-height:100vh;overflow:visible}.workspace .surface-col{order:-1}.inst-tab{min-height:46px}.tbtn{min-height:46px;padding:11px 16px;font-size:14px}.modebtn{height:44px}.iconbtn{width:44px;height:44px}.loop{min-height:64px}select{min-height:40px}input[type=range]{height:30px}#app>.config{justify-self:center;width:100%;max-width:460px}}#pad{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}.yaxis{position:absolute;left:7px;top:14px;bottom:14px;z-index:2;display:none;flex-direction:column;align-items:center;gap:6px;pointer-events:none}.board.yaxis-on .yaxis{display:flex}.ya-lab{font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#ffffff57;writing-mode:vertical-rl}.ya-track{position:relative;flex:1;width:3px;border-radius:3px;background:linear-gradient(180deg,#ffffff6b,#ffffff0f)}.ya-tick{position:absolute;left:50%;top:38%;width:12px;height:3px;border-radius:2px;background:var(--accent);transform:translate(-50%,-50%);box-shadow:0 0 6px var(--accent);opacity:.45;transition:top .12s ease,opacity .3s ease,width .12s ease}.board.expr-active .ya-tick{opacity:1;width:17px}.overlay{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.62}.overlay .g-lines,.overlay .g-ribbon,.overlay .g-lattice,.overlay .g-valves,.overlay .g-wave{position:absolute;inset:0}.overlay .g-line{position:absolute;background:#ffffff1a;border-radius:2px}.overlay .g-line.h{left:6%;right:6%;transform:translateY(-50%)}.overlay .g-line.v{top:8%;bottom:8%;transform:translate(-50%)}.overlay .g-ribbon-line{position:absolute;left:0;right:0;top:50%;height:1px;background:#ffffff1a}.overlay .g-ribbon-tick{position:absolute;top:42%;height:16%;width:1px;background:#ffffff12}.overlay .g-lat{position:absolute;background:#ffffff0f}.overlay .g-lat.v{top:0;bottom:0;width:1px}.overlay .g-lat.h{left:0;right:0;height:1px}.overlay .g-valve{position:absolute;top:50%;transform:translate(-50%,-50%);width:13%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(255,255,255,.12)}.overlay .g-wave{background:linear-gradient(180deg,transparent 48%,rgba(255,255,255,.08) 50%,transparent 52%)}.overlay .strings{position:absolute;inset:0}.overlay .gstring{position:absolute;left:0;right:0;transform:translateY(-50%);border-radius:2px;background:linear-gradient(90deg,#ffffff1f,#ffffff6b,#ffffff1f);box-shadow:0 0 5px #ffffff40}.overlay .gfret{position:absolute;top:6%;bottom:6%;width:1px;background:#ffffff17}.overlay .gfret:nth-child(odd){background:#ffffff0d}.overlay .kcol{position:absolute;top:0;bottom:0;border-left:1px solid rgba(255,255,255,.06)}.overlay .kcol.root{border-left-color:#5ac8e659}.overlay .kcell-lab{position:absolute;bottom:6px;font-size:9px;color:#ffffff47;transform:translate(-50%)}.overlay .dcell{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:10px;display:flex;align-items:center;justify-content:center}.overlay .dcell .dl{font-size:10px;font-weight:600;letter-spacing:.04em;color:#fff6;text-transform:uppercase}.overlay .dcell.flash{background:#ffffff29;border-color:#ffffff80}.overlay .dcell.flash-loop,.overlay .pkey.flash-loop{background:color-mix(in srgb,var(--fc) 38%,transparent);border-color:var(--fc);box-shadow:0 0 14px color-mix(in srgb,var(--fc) 55%,transparent)}.overlay.piano-mode{padding:0}.overlay .piano{position:absolute;inset:0;display:flex}.overlay .pkey{position:relative}.overlay .pkey.white{flex:1 1 0;min-width:0;height:100%;border-left:1px solid rgba(0,0,0,.35);background:linear-gradient(180deg,#ffffff29,#ffffff12 72%,#ffffff21);display:flex;align-items:flex-end;justify-content:center}.overlay .pkey.white:first-child{border-left:0}.overlay .pkey.white .pl{font-size:9px;font-weight:600;color:#ffffff57;padding-bottom:7px}.overlay .pkey.white.flash{background:#ffffff52}.overlay .pkey.white.held{background:#78c8ff99;box-shadow:inset 0 0 12px #78c8ff80}.overlay .dcell.held{background:#78c8ff66;border-color:#78c8ffcc}.overlay .pkey.black{position:absolute;top:0;height:62%;transform:translate(-50%);border-radius:0 0 3px 3px;background:linear-gradient(180deg,#0c0d11,#20222a 78%,#34373f);box-shadow:0 4px 7px #0000008c,inset 0 -2px 2px #ffffff1f;z-index:4}.tank{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}#shark{position:absolute;margin:0;font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:clamp(3.5px,.7vw,6px);line-height:.92;white-space:pre;color:#fff;opacity:.42;text-shadow:0 0 8px rgba(255,255,255,.22);transition:opacity .8s ease;will-change:left,top,transform}.tank.frenzy #shark{opacity:.6}body.shark-loose #tank{position:fixed;inset:0;z-index:95}body.shark-loose #shark{color:#1b1c22;opacity:.5;text-shadow:0 0 12px rgba(25,182,216,.35)}.tank.beat #shark{animation:sharkBeat .18s ease}@keyframes sharkBeat{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-6px) scale(1.06)}to{transform:translateY(0) scale(1)}}.hint{position:absolute;left:50%;bottom:12px;transform:translate(-50%);z-index:3;max-width:80%;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.5;pointer-events:none;transition:opacity .5s}.hint .hint-big{color:var(--ink);font-weight:700}body.started .hint{opacity:0}.dial-slot{width:100%}.dial{display:flex;flex-direction:column;align-items:center;width:100%}.dial-device{position:relative;width:100%;line-height:0}.dial-img{width:100%;height:auto;display:block;-webkit-user-drag:none;filter:drop-shadow(0 22px 34px rgba(24,28,48,.3)) drop-shadow(0 4px 8px rgba(24,28,48,.16))}.dwhite{position:absolute;inset:0;width:100%;height:auto;display:block;opacity:0;pointer-events:none;filter:drop-shadow(0 0 8px rgba(255,255,255,.7));transition:opacity .04s ease}.dwhite.on,.dwhite.held{opacity:1}.dial-knob{position:absolute;transform:translate(-50%,-50%);transform-origin:50% 50%;cursor:ns-resize;-webkit-user-drag:none;border-radius:50%;transition:filter .2s}.dial-knob:hover{filter:brightness(1.1)}.dial-knob.spin{filter:brightness(1.3) drop-shadow(0 0 12px rgba(255,255,255,.8))}.dkey{position:absolute;transform:translate(-50%,-50%);background:transparent;border:none;padding:0;cursor:pointer;border-radius:10px}.dkey:hover{background:#ffffff0f}.dkey-label{position:absolute;font-size:9.5px;font-weight:600;letter-spacing:.02em;line-height:1.2;color:var(--ink);background:var(--bg2);padding:2px 6px;border-radius:6px;pointer-events:none;white-space:nowrap;border:1px solid var(--line);box-shadow:var(--shadow-1);max-width:68px;overflow:hidden;text-overflow:ellipsis}.dkey-label.top{transform:translate(-50%,-125%)}.dkey-label.left{transform:translate(-108%,-50%)}.dkey-label.right{transform:translate(8%,-50%)}.dial.learn .dkey{background:#5ac8e61a;outline:1px dashed rgba(90,200,230,.35)}.dial.learn .dkey.next{background:#5ac8e657;outline:2px solid var(--accent);animation:pulse-next 1s ease-in-out infinite}@keyframes pulse-next{50%{background:#5ac8e680}}.pedal-slot{width:100%}.pedal-device{position:relative;width:100%;line-height:0}.pedal-img{width:100%;height:auto;display:block;-webkit-user-drag:none;filter:drop-shadow(0 22px 34px rgba(24,28,48,.3)) drop-shadow(0 4px 8px rgba(24,28,48,.16))}.pwhite{position:absolute;inset:0;width:100%;height:auto;display:block;opacity:0;pointer-events:none;filter:drop-shadow(0 0 9px rgba(255,255,255,.7));transition:opacity .05s ease}.pwhite.on{opacity:1}.plabel{position:absolute;transform:translate(-50%,-130%);font-size:9.5px;font-weight:600;color:var(--ink);letter-spacing:.02em;background:var(--bg2);padding:2px 6px;border-radius:6px;pointer-events:none;white-space:nowrap;border:1px solid var(--line);box-shadow:var(--shadow-1)}.tape{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3) var(--s4);align-items:center}.transport{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}.loops{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s2)}.tape .pedal-col{width:132px;gap:2px}.tape .pedal-col .devlabel{font-size:8px;padding:1px 5px}.config{min-width:0;min-height:0;overflow-y:auto}.panel{min-width:0;height:100%}.tbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);border-radius:10px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .14s,background .14s}.tbtn:hover{border-color:var(--line-2);background:var(--bg3)}.tbtn.on{background:var(--ink);color:#fff;border-color:var(--ink)}.tbtn.rec.on{background:#ff453a29;color:#ff7a70;border-color:var(--rec)}.tbtn .gly{width:11px;height:11px;display:inline-block}.tkey{font-family:ui-monospace,Consolas,monospace;font-size:9px;font-weight:700;color:var(--muted-2);background:var(--bg1);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:3px}.tbtn.on .tkey{color:#ffffffa6;background:#ffffff1f;border-color:#ffffff38}.tbtn.rec.on .tkey{color:#ff7a70}.tempo{display:inline-flex;align-items:center;gap:var(--s2);color:var(--muted);font-size:12px;padding-left:var(--s2)}.tempo input[type=range]{width:120px;accent-color:var(--accent)}.tempo .bpm{color:var(--ink);font-variant-numeric:tabular-nums;min-width:30px;font-weight:600}.loop{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-top:3px solid var(--lc);background:var(--bg1);color:var(--ink);border-radius:12px;padding:8px 10px 9px;cursor:pointer;min-height:58px;transition:border-color .12s,background .12s,transform .06s}.loop .loop-num{color:var(--lc)}.loop:hover{border-color:var(--line-2)}.loop:active{transform:translateY(1px)}.loop-top{display:flex;align-items:center;gap:6px}.loop-num{font-size:12px;font-weight:700;color:var(--muted-2);font-variant-numeric:tabular-nums}.loop-inst{font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:color-mix(in srgb,var(--lc) 78%,var(--ink));margin-right:auto}.loop-key{font-size:9px;font-family:ui-monospace,Consolas,monospace;color:var(--muted-2);border:1px solid var(--line);border-radius:4px;padding:0 4px}.loop-state{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.loop-spd{position:absolute;right:8px;bottom:7px;font-size:9.5px;font-weight:700;color:var(--muted-2);font-variant-numeric:tabular-nums}.loop.empty .loop-num{color:var(--muted-2)}.loop.playing{border-color:var(--lc);background:color-mix(in srgb,var(--lc) 16%,var(--bg2))}.loop.playing .loop-state,.loop.playing .loop-spd{color:color-mix(in srgb,var(--lc) 70%,var(--ink))}.loop.muted{opacity:.55}.loop.muted .loop-state{color:var(--muted)}.loop.recording{border-color:var(--rec);background:#ff453a21}.loop.recording .loop-state,.loop.recording .loop-num{color:#ff7a70}.loop:after{content:"";position:absolute;left:0;bottom:0;height:3px;width:calc(var(--ph, 0) * 100%);background:transparent}.loop.playing:after{background:var(--lc)}.loop.recording:after{background:var(--rec)}.panel-tabs{display:flex;gap:var(--s1);margin-bottom:var(--s2)}.ptab{border:1px solid var(--line);background:var(--bg1);color:var(--muted);border-radius:999px;padding:5px 14px;font-size:11.5px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:color .14s,border-color .14s}.ptab:hover{color:var(--ink);border-color:var(--line-2)}.ptab.on{color:var(--ink);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.ptab.gone{display:none}.panel-body{border:1px solid var(--line);background:var(--bg1);border-radius:14px;padding:var(--s3) var(--s4);min-height:64px}.panel-body.hidden,.panel.collapsed .panel-body{display:none}.ctl-row{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);align-items:center}.ctl{display:flex;flex-direction:column;gap:5px}.ctl>span{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.ctl input[type=range]{width:116px;accent-color:var(--accent)}.ctl select{background:var(--bg2);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:6px 8px;font-size:12.5px}.ctl.check{flex-direction:row;align-items:center;gap:8px}.ctl input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.wave{width:100%;height:58px;display:block;margin:var(--s2) 0;border:1px solid var(--line);border-radius:8px;background:var(--bg2)}.pads{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s2);margin-bottom:var(--s2)}.dpad{display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);border-radius:10px;padding:8px 4px;font-size:11px;cursor:pointer;transition:background .08s,border-color .08s}.dpad:hover{border-color:var(--line-2)}.dpad.flash{background:var(--ink);color:#fff}.dpad .pn{font-size:10px;color:inherit}.seq{display:flex;flex-direction:column;gap:var(--s1);overflow-x:auto}.seq-row{display:grid;grid-template-columns:58px repeat(16,minmax(0,1fr));gap:3px;align-items:center}.seq-lab{font-size:10px;color:var(--muted);text-align:right;padding-right:6px;white-space:nowrap}.cell{height:13px;border-radius:4px;background:var(--bg2);border:1px solid var(--line);cursor:pointer}.cell.q{background:var(--bg3)}.cell.on{background:var(--ink);border-color:var(--ink)}.cell.head{outline:2px solid rgba(20,22,30,.45)}.cell.off-len{opacity:.28}.sheet{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:#08080999;backdrop-filter:blur(4px)}.sheet.open{display:flex}.sheet-card{width:min(560px,92vw);max-height:88vh;overflow-y:auto;background:linear-gradient(180deg,var(--bg1),#1a1a1b);border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--shadow-2)}.sheet-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;background:linear-gradient(180deg,var(--bg1),rgba(26,26,27,.92))}.sheet-title{font-size:14px;font-weight:700;letter-spacing:.02em}.sheet-body{padding:4px 18px 20px;display:flex;flex-direction:column;gap:var(--s4)}.sgroup{display:flex;flex-direction:column;gap:var(--s2)}.sgroup-h{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}.srow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}.srow .sname{display:flex;align-items:center;gap:9px;font-size:13px}.sdot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--rec);background:var(--rec)}.sdot.on{background:var(--ok);border-color:var(--ok)}.sdot.warn{background:var(--warn);border-color:var(--warn)}.dev-status{display:flex;align-items:center;gap:5px;padding:0 2px}.sdot.mini{width:9px;height:9px}.sstatus{font-size:11px;color:var(--muted)}.sbtn{border:1px solid var(--line-2);background:var(--bg3);color:var(--ink);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer}.sbtn:hover{background:var(--bg1)}.sbtn.danger{border-color:#ff453a80;color:#ff8a80}.grid-view{position:fixed;inset:60px 0 0;z-index:70;display:none;flex-direction:column;gap:var(--s4);background:radial-gradient(900px 600px at 50% -10%,var(--bg3),var(--bg0) 70%);padding:var(--s3) var(--s5) var(--s5)}.grid-view.open{display:flex}.gv-head{display:flex;align-items:center;gap:var(--s4)}.gv-back{padding:8px 16px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg2);color:var(--ink);font-size:13px;font-weight:800;letter-spacing:.02em;cursor:pointer;transition:background .12s,color .12s,border-color .12s}.gv-back:hover{background:var(--bg3);border-color:var(--accent);color:var(--accent)}.gv-titlewrap{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.gv-title{font-size:16px;font-weight:800;letter-spacing:-.01em}.gv-sub{font-size:11px;color:var(--muted);letter-spacing:.02em}.gv-hint{font-size:11px;color:var(--muted-2);white-space:nowrap}.gv-beat{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);box-shadow:var(--shadow-1)}.gv-beat-dot{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,transparent);box-shadow:inset 0 0 0 1px var(--line);transition:background .08s,box-shadow .08s,transform .08s}.gv-beat-dot.on{background:var(--accent);box-shadow:0 0 9px color-mix(in srgb,var(--accent) 80%,transparent);transform:scale(1.18)}.gv-beat-dot.down.on{background:#19e3ff;box-shadow:0 0 12px #19e3ffe6;transform:scale(1.32)}.gv-board{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--cols, 7),minmax(0,1fr));grid-auto-rows:max-content;align-content:center;gap:var(--s3)}.gv-cell{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:7 / 5;background:linear-gradient(180deg,#3a3a3d,#29292b 24%,#1f1f21);border:1.5px solid rgba(214,216,222,.42);box-shadow:inset 0 2px 8px #ffffff0d,inset 0 -8px 20px #0000006b,var(--shadow-1);transform-origin:center;will-change:transform;transition:border-color .18s,box-shadow .18s}.gv-cell:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 50% 62%,rgba(255,255,255,.12),transparent 68%);opacity:.28;animation:gvBreathe 3.6s ease-in-out infinite;animation-delay:calc(var(--i, 0) * -.22s)}@keyframes gvBreathe{50%{opacity:.5}}.gv-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}.gv-shark{position:absolute;margin:0;z-index:2;font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:clamp(1.5px,.34vw,2.6px);line-height:.9;white-space:pre;color:#fff;opacity:.4;text-shadow:0 0 5px rgba(255,255,255,.22);pointer-events:none;will-change:left,top}.gv-cell.lit .gv-shark{opacity:.6}.gv-cell.hot{border-color:#fff6;box-shadow:inset 0 0 0 2px var(--accent),0 10px 26px #181c3042}.gv-cell.lit{border-color:rgb(var(--gc));box-shadow:0 0 0 1.5px rgba(var(--gc),.85),0 0 22px rgba(var(--gc),.45)}.gv-cell.lit:before{background:radial-gradient(circle at 50% 62%,rgba(var(--gc),.42),transparent 70%);opacity:.55}.gv-cell.active{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent),0 12px 30px #181c304d}.gv-label{position:absolute;left:12px;top:10px;z-index:3;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff9;pointer-events:none}.gv-pill{position:absolute;right:11px;top:11px;z-index:3;width:8px;height:8px;border-radius:50%;background:#ffffff24;box-shadow:inset 0 0 0 1px #ffffff2e;transition:background .15s,box-shadow .15s}.gv-cell.lit .gv-pill{background:rgb(var(--gc));box-shadow:0 0 8px rgba(var(--gc),.85)}.gv-cell.active .gv-pill{background:var(--accent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 85%,transparent)}@media (prefers-reduced-motion: reduce){.gv-cell:before{animation:none}}#tpdebug{position:fixed;right:12px;bottom:12px;z-index:60;font:11px ui-monospace,Consolas,monospace;color:#9effd0;background:#000000c7;border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;white-space:pre;pointer-events:none;display:none}#tpdebug.on{display:block}@media (max-width: 1080px){.workspace{gap:var(--s3)}.dial-col{max-width:200px}}@media (max-width: 880px){html,body{height:auto;overflow:visible;overflow-x:hidden}#app{grid-template-rows:auto auto auto;height:auto;min-height:100vh;overflow:visible}.workspace{grid-template-columns:1fr;gap:var(--s4);justify-items:center}.surface-col{width:100%;max-width:min(100%,calc(var(--board-h) * 1.4))}.dial-col{max-width:220px}.config{width:100%;max-width:460px}.tape{grid-template-columns:1fr;justify-items:center;gap:var(--s3)}}@media (max-width: 560px){.loops{grid-template-columns:repeat(4,minmax(0,1fr))}.topbar{flex-wrap:wrap;row-gap:var(--s2)}.brand{min-width:0}.screen{min-width:0;flex:1 1 160px}.top-tools{flex-wrap:wrap;justify-content:flex-end}}@media (max-height: 760px){:root{--board-h: clamp(140px, 32vh, 300px)}html,body{height:auto;overflow:visible;overflow-x:hidden}#app{height:auto;min-height:100vh;overflow:visible}}.knob-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;margin-right:var(--s2)}.knob{cursor:ns-resize;touch-action:none}.knob svg{width:100%;height:100%;display:block}.knob-bg{fill:var(--bg2);stroke:var(--line);stroke-width:2}.knob-ring{fill:none;stroke:var(--line);stroke-width:6}.knob-ind{stroke:var(--accent);stroke-width:7;stroke-linecap:round}.knob:hover .knob-ind{stroke:color-mix(in srgb,var(--accent) 75%,#1b1c22)}.knob-label{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.legend-overlay{position:fixed;inset:0;z-index:85;display:none;align-items:center;justify-content:center;background:#14161e66;backdrop-filter:blur(3px)}.legend-overlay.open{display:flex}.lg-card{width:min(640px,92vw);max-height:86vh;overflow-y:auto;background:var(--bg1);border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--shadow-2);padding:16px 20px 22px}.lg-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--s3)}.lg-title{font-size:15px;font-weight:800;letter-spacing:.02em}.lg-hint{font-size:11px;color:var(--muted)}.lg-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s5)}.lg-group{display:flex;flex-direction:column;gap:6px}.lg-h{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}.lg-row{display:flex;align-items:center;gap:10px}.lg-key{font-family:ui-monospace,Consolas,monospace;font-size:11px;font-weight:700;color:var(--ink);background:var(--bg2);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;padding:2px 7px;white-space:nowrap;box-shadow:var(--shadow-1)}.lg-key[style*=--k]{border-color:color-mix(in srgb,var(--k) 55%,var(--line-2));color:color-mix(in srgb,var(--k) 55%,var(--ink))}.lg-what{font-size:12px;color:var(--muted)}@media (max-width: 560px){.lg-cols{grid-template-columns:1fr}}@media (pointer: coarse){.grid-view{top:0;padding:var(--s3) var(--s3) var(--s5);overflow-y:auto;-webkit-overflow-scrolling:touch}.gv-head{position:sticky;top:0;z-index:4;padding:var(--s2) 0 var(--s3);background:linear-gradient(180deg,var(--bg0) 75%,transparent)}.gv-hint{display:none}.gv-board{flex:0 0 auto;align-content:start;min-height:0}}@media (pointer: coarse) and (orientation: portrait){.gv-board{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (pointer: coarse) and (orientation: landscape){:root{--board-h: clamp(170px, 50vh, 280px)}.gv-board{grid-template-columns:repeat(4,minmax(0,1fr))}}