.board-screen{position:fixed;inset:0;overflow:hidden}.vp{touch-action:none;-webkit-user-select:none;user-select:none;background-color:var(--paper);background-image:radial-gradient(circle, var(--dot) 1.2px, transparent 1.6px);cursor:default;background-size:28px 28px;position:absolute;inset:0;overflow:hidden}.vp.panning{cursor:grabbing}.world{transform-origin:0 0;will-change:transform;position:absolute;top:0;left:0}.cursors{pointer-events:none;position:absolute;inset:0;overflow:hidden}.cursor{will-change:transform;align-items:flex-start;gap:2px;display:flex;position:absolute;top:0;left:0}.cursor .chip{margin-top:12px}.pad{width:calc(var(--s) * 1px);height:calc(var(--s) * 1px);--lvl:0;position:absolute;transform:translate(-50%,-50%)}.disc{background:var(--c);cursor:pointer;color:var(--on-fill);border:0;border-radius:9999px;justify-content:center;align-items:center;gap:3px;padding:0;transition:transform .14s cubic-bezier(.3,1.6,.5,1),box-shadow .2s,background-color .15s;display:flex;position:absolute;inset:0}.disc:active{transform:scale(.93)}.ini{letter-spacing:.02em;opacity:0;pointer-events:none;font-size:13px;font-weight:600;transition:opacity .15s}.pad:not(.empty):hover .ini,.disc:focus-visible .ini{opacity:1}.stopg{width:calc(var(--s) * .24px);height:calc(var(--s) * .24px);border-radius:calc(var(--s) * .04px);background:var(--on-fill);pointer-events:none;min-width:14px;min-height:14px;display:none}.pad.playing:hover .ini,.pad.looping:hover .ini{display:none}.pad.playing:hover .stopg,.pad.looping:hover .stopg{display:block}.cnt{font-family:var(--display);font-weight:700;font-size:calc(var(--s) * .38px);line-height:1;display:none}.meter{align-items:center;gap:3px;height:40%;display:none}.meter i{background:var(--on-fill);border-radius:2px;width:4px;height:20%;display:block}.micg{color:var(--muted);line-height:0;display:none}.ring{pointer-events:none;opacity:0;border-radius:9999px;position:absolute}.r1{border:2px solid var(--c);inset:-6px}.r2{border:2px solid color-mix(in srgb, var(--c) 40%, transparent);transform:scale(calc(1 + var(--lvl) * .22));inset:-14px}.sel{border:2px solid var(--ink);inset:-5px}.prog{pointer-events:none;width:calc(100% + 18px);height:calc(100% + 18px);display:none;position:absolute;top:-9px;left:-9px;overflow:visible;transform:rotate(-90deg)}.prog circle{fill:none;stroke-width:3px}.prog .track{stroke:var(--line)}.prog .bar{stroke:var(--record);stroke-linecap:round}.tag{white-space:nowrap;z-index:2;justify-content:center;display:flex;position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%)}.tag.above{top:auto;bottom:calc(100% + 10px)}.tag:empty{display:none}.handle{border:2px solid var(--paper);background:var(--ink);cursor:nwse-resize;z-index:3;border-radius:3px;width:14px;height:14px;display:none;position:absolute;bottom:calc(14.6% - 9px);right:calc(14.6% - 9px)}.pad.empty .disc{border:1.5px dashed var(--muted);background:#f2ede30f}.pad.empty .micg{display:block}.pad.empty .ini,.pad.empty .cnt,.pad.empty .meter{display:none}.pad.playing .r1,.pad.looping .r1,.pad.playing .r2,.pad.looping .r2{opacity:1}.pad.count-me .r1,.pad.count-other .r1{opacity:1;border:2px dashed var(--record)}.pad.count-me .cnt{display:block}.pad.count-me .ini,.pad.rec-me .ini{display:none}.pad.rec-me .prog{display:block}.pad.rec-me .meter{display:flex}.pad.rec-me .micg,.pad.count-me .micg{display:none}.pad.rec-other .r1,.pad[data-crowded] .r1{opacity:1;border-color:var(--record)}.pad[data-returning]{transition:left .25s ease-out,top .25s ease-out,width .25s ease-out,height .25s ease-out}.pad.rec-other .r2{opacity:1;border-color:var(--record-soft);animation:1.1s ease-in-out infinite pulse}.pad.held-me .disc,.pad.held-other .disc{box-shadow:var(--shadow);transform:scale(1.07)}.pad.held-other .disc{cursor:not-allowed}.pad.held-me{z-index:5}.pad.selected .sel{opacity:1}.pad.selected.can-resize .handle{display:block}.pad.deleting .disc{background:var(--record);opacity:.4;transition:transform .16s,opacity .16s,background-color 50ms;transform:scale(.6)}@keyframes pulse{0%,to{opacity:.9;transform:scale(1)}50%{opacity:.35;transform:scale(1.12)}}.world:not([data-ready]) .pad{visibility:hidden}.world[data-ready] .disc{animation:pad-pop .4s ease-out var(--pop-delay,0s) backwards}@keyframes pad-pop{0%{opacity:0;transform:scale(0)}30%{opacity:1}60%{transform:scale(1.12)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){.pad.rec-other .r2{animation:none}.r2{transform:none!important}.disc{transition:none}.world[data-ready] .disc{animation:none}.pad[data-returning]{transition:none}}.float{z-index:20;position:absolute}.topbar{top:calc(16px + env(safe-area-inset-top,0px));left:max(16px, env(safe-area-inset-left,0px));right:max(16px, env(safe-area-inset-right,0px));pointer-events:none;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.topbar>*{pointer-events:auto}.tb{flex-wrap:wrap;align-items:center;gap:8px;min-height:36px;padding:8px;display:flex}.tb .sep{background:var(--line);width:1px;height:24px}.bname{min-width:60px;max-width:280px;color:var(--ink);background:0 0;border:1px solid #0000;border-radius:6px;padding:2px 6px;font-size:18px;font-weight:600;line-height:24px}.bname:not([readonly]):hover{border-color:var(--line)}.bname:not([readonly]):focus{border-color:var(--muted);outline:none}.presence{align-items:center;padding-left:4px;display:flex}.presence .avatar+.avatar{margin-left:-8px}.like[aria-pressed=true] svg{fill:var(--record);stroke:var(--record)}.zoom{left:max(16px, env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));align-items:center;gap:4px;padding:4px;display:flex}.zoom .tc{text-align:center;min-width:44px;color:var(--muted)}.hint{text-align:center;pointer-events:none;z-index:2;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hint h2{font-family:var(--display);letter-spacing:-.02em;margin:0;font-size:40px;font-weight:700;line-height:44px}.tip{z-index:60;pointer-events:none;background:var(--raised);box-shadow:var(--shadow);color:var(--muted);white-space:nowrap;border-radius:6px;padding:6px 10px;font-size:13px;line-height:18px;position:fixed}.menu{z-index:50;flex-direction:column;width:232px;padding:4px;font-size:14px;line-height:20px;display:flex;position:fixed}.mi{color:var(--ink);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;font-size:14px;display:flex}.mi:hover,.mi:focus-visible{background:var(--raised-2)}.mi .tc{color:var(--muted)}.mi.col{flex-direction:column;align-items:flex-start;gap:0}.mdiv{background:var(--line);height:1px;margin:4px 8px}.menu .swatches{gap:6px;padding:8px 12px 10px}.menu .swatch{border-radius:5px;height:20px}.mlabel{color:var(--muted);padding:8px 12px 0;font-size:13px;line-height:16px}.phone-note{left:max(12px, env(safe-area-inset-left,0px));right:max(12px, env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));align-items:center;gap:8px;padding:8px 8px 8px 16px;display:flex}.sheet{z-index:65;top:calc(12px + env(safe-area-inset-top,0px));right:max(12px, env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));flex-direction:column;gap:28px;width:min(440px,100% - 24px);padding:24px;display:flex;position:fixed;overflow:auto}.sheet-sec{flex-direction:column;gap:8px;display:flex}.sheet-sec h3{margin:0 0 4px;font-size:18px;font-weight:600;line-height:24px}.vis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.vis label{border:1px solid var(--muted);cursor:pointer;border-radius:6px;align-items:flex-start;gap:10px;padding:12px;display:flex}.vis label:has(input:checked){border:2px solid var(--ink);padding:11px}.vis input{accent-color:var(--ink);margin:4px 0 0}.linkrow{background:var(--paper);border-radius:6px;align-items:center;gap:8px;padding:6px 6px 6px 12px;display:flex}.linkrow input{min-width:0;color:var(--muted);font-family:var(--mono);background:0 0;border:0;flex:1;font-size:12px}.member{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:8px 0;display:flex}.member:last-child{border-bottom:0}.member .who{flex-direction:column;flex:1;min-width:0;display:flex}.danger{border:1px solid var(--muted);border-radius:6px;flex-direction:column;gap:12px;padding:16px;display:flex}@media (max-width:720px){.tb .hide-sm{display:none}.bname{max-width:150px;font-size:16px}.zoom{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}