@property --ground{syntax:"";inherits:true;initial-value:#020307}@property --wash{syntax:"";inherits:true;initial-value:#020307}:root{--bg:2 3 7;--ink:245 240 230;--dim:122 120 134;--accent:255 176 96;--ui:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;--sans:"Geist", "Inter", system-ui, -apple-system, sans-serif;--hair:rgb(var(--ink) / .08);--line:rgb(var(--ink) / .12);--fill:rgb(var(--ink) / .045);--fill-2:rgb(var(--ink) / .085);--panel:color-mix(in srgb, color-mix(in srgb, var(--ground) 97%, var(--wash)) 97.5%, rgb(var(--ink)));--grain:none;--r:6px;--gap:12px;--plate-r:8px;--plate:0 0 0 1px rgb(var(--ink) / .1), 0 24px 64px #00000080;--h:28px;--slide:.24s cubic-bezier(.3, .7, .2, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;transition:--ground .8s,--wash .8s}*{box-sizing:border-box}html,body{height:100%;margin:0}body{gap:var(--gap);padding:var(--gap);background:var(--ground);color:rgb(var(--ink));font:400 12.5px/1.4 var(--sans);-webkit-font-smoothing:antialiased;grid-template-columns:288px minmax(0,1fr);display:grid}.rail{background:var(--grain), var(--panel);border-radius:var(--plate-r);box-shadow:var(--plate);align-content:start;gap:20px;min-height:0;padding:14px 14px 28px;display:grid;overflow-y:auto}.rail::-webkit-scrollbar{width:10px}.rail::-webkit-scrollbar-track{background:0 0}.rail::-webkit-scrollbar-thumb{background:rgb(var(--ink) / .1);background-clip:padding-box;border:3px solid #0000;border-radius:10px}.rail:hover::-webkit-scrollbar-thumb{background-color:rgb(var(--ink) / .18)}.rail::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--ink) / .3)}@supports not selector(::-webkit-scrollbar){.rail{scrollbar-width:thin;scrollbar-color:rgb(var(--ink) / .16) transparent}}section{min-width:0}.brand{letter-spacing:-.005em;align-items:center;gap:5px;min-width:0;height:32px;padding:0 0 0 4px;font-size:12px;font-weight:500;display:flex}.brand .mark{background:radial-gradient(circle at 35% 35%, #fffffff2, rgb(var(--accent)) 45%, rgb(var(--accent) / .25) 72%, transparent 74%);width:14px;height:14px;box-shadow:0 0 10px rgb(var(--accent) / .45);border-radius:50%;flex:none}.brand>span:not(.mark){white-space:nowrap}.brand-dim{color:rgb(var(--dim));text-overflow:ellipsis;min-width:0;font-weight:400;overflow:hidden}.icon-btn{border-radius:var(--r);width:22px;height:28px;color:rgb(var(--dim));flex:none;place-items:center;margin-left:auto;padding:0;display:grid}.icon-btn svg{width:15px;height:15px}.icon-btn+.icon-btn{margin-left:-3px}#show-keys{font:500 13px/1 var(--ui)}h2{font:500 10px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--dim));justify-content:space-between;align-items:baseline;margin:0 0 6px;padding:0 8px;display:flex}.h-value{letter-spacing:.02em;text-transform:none;color:rgb(var(--ink) / .8);font-variant-numeric:tabular-nums}kbd{min-width:18px;height:18px;font:400 10px/1 var(--ui);color:rgb(var(--ink) / .75);border:1px solid var(--line);background:var(--fill);border-bottom-width:1.5px;border-radius:4px;place-items:center;padding:0 5px;display:inline-grid}button{font:inherit;color:rgb(var(--ink) / .72);border-radius:var(--r);height:var(--h);cursor:pointer;text-align:left;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:0;width:100%;padding:0 8px;transition:color .12s,background-color .12s,border-color .12s,box-shadow .12s;overflow:hidden}button:hover{color:rgb(var(--ink));background:var(--fill)}button:focus-visible{outline:2px solid rgb(var(--accent) / .7);outline-offset:1px}button:disabled{opacity:.35;cursor:default;background:0 0}.list{gap:1px;display:grid}.list button{justify-content:space-between;align-items:center;gap:8px;display:flex}.list button span{text-overflow:ellipsis;overflow:hidden}.list button[aria-pressed=true]{color:rgb(var(--ink));background:var(--fill-2)}.list button[aria-pressed=true]:after{content:"";background:rgb(var(--accent));width:5px;height:5px;box-shadow:0 0 6px rgb(var(--accent) / .6);border-radius:50%;flex:none}.list small{font:400 10px/1 var(--ui);color:rgb(var(--dim));letter-spacing:.04em;margin-left:auto}.list button[aria-pressed=true] small{display:none}.seg{border:1px solid var(--hair);border-radius:calc(var(--r) + 2px);background:#00000047;grid-template-columns:repeat(4,1fr);gap:2px;padding:2px;display:grid}.seg-2{grid-template-columns:repeat(2,1fr)}#object-groups{grid-template-columns:repeat(3,1fr)}#object-groups button{padding:0 2px;font-size:11.5px}.seg button{text-align:center;border-radius:var(--r);height:24px;padding:0 6px;font-size:12px}.seg button:hover{background:0 0}.seg button[aria-pressed=true]{color:rgb(var(--ink));background:var(--fill-2);box-shadow:inset 0 1px 0 rgb(var(--ink) / .08), 0 1px 2px #0006}#objects{height:calc(8 * var(--h) + 7px);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgb(var(--ink) / .16) transparent;align-content:start;margin-top:6px;overflow-y:auto}.row{gap:6px;display:flex}.row+.row,.seg+.row,.row+.seg,.list+.keylist,.list+.row{margin-top:6px}.act{text-align:center;border:1px solid var(--line);background:var(--fill);color:rgb(var(--ink) / .85);box-shadow:inset 0 1px 0 rgb(var(--ink) / .04)}.act:hover{border-color:rgb(var(--ink) / .22);background:var(--fill-2)}.row .act{flex:1;width:auto;min-width:0}.row .act.tight{flex:none;width:30px;padding:0}.row .act.tight-text{flex:none;padding:0 12px}.act[hidden]{display:none}.act.set{color:rgb(var(--ink));border-color:rgb(var(--ink) / .25)}.act.set:after{content:" ●";color:rgb(var(--accent));font-size:.8em}.rec{color:rgb(var(--accent));border-color:rgb(var(--accent) / .35);background:rgb(var(--accent) / .06)}.rec:hover{border-color:rgb(var(--accent) / .7);background:rgb(var(--accent) / .1);color:rgb(var(--accent))}.rec[aria-pressed=true]{background:rgb(var(--accent));border-color:rgb(var(--accent));color:rgb(var(--bg));animation:1.2s steps(2,end) infinite rec}@keyframes rec{50%{background:rgb(var(--accent) / .1);color:rgb(var(--accent))}}.act[aria-pressed=true]:not(.rec){border-color:rgb(var(--accent) / .7);color:rgb(var(--ink))}.readout{color:rgb(var(--dim));font-variant-numeric:tabular-nums;margin:8px 0 0;padding:0 8px;font-size:11.5px;line-height:1.5}.readout b{color:rgb(var(--ink) / .9);font-weight:500}#presets button:before{content:"▶";color:rgb(var(--accent));margin-right:2px;font-size:8px}#presets button{justify-content:flex-start}.keylist{gap:4px;margin-bottom:6px;display:grid}.keylist:empty{display:none}.key{border:1px solid var(--line);border-radius:var(--r);background:var(--fill);grid-template-columns:1fr auto auto;align-items:center;display:grid}.key-go{height:26px}.key-go b{font:500 11px/1 var(--ui);color:rgb(var(--accent));margin-right:6px}.key-icon{text-align:center;width:26px;height:26px;color:rgb(var(--dim));padding:0}.key-times{grid-column:1/-1;gap:4px;padding:0 6px 6px;display:flex}.chip{width:auto;height:20px;font:400 10px/1 var(--ui);letter-spacing:.02em;border:1px solid var(--line);color:rgb(var(--dim));border-radius:4px;padding:0 6px}.chip b{color:rgb(var(--ink));font-weight:400}.chip.quiet{border-color:#0000;align-items:center;padding-left:2px;display:inline-flex}.key-times .chip.quiet:last-child:not(:first-child){margin-left:auto;padding-right:2px}.checks+.readout,.row+.checks{margin-top:6px}.checks{gap:1px;display:grid}.checks label{height:var(--h);border-radius:var(--r);cursor:pointer;color:rgb(var(--ink) / .72);white-space:nowrap;justify-content:space-between;align-items:center;gap:10px;padding:0 8px;display:flex}.checks label span{text-overflow:ellipsis;overflow:hidden}.checks label:hover{color:rgb(var(--ink));background:var(--fill)}.checks label[hidden]{display:none}.checks label:has(input:checked){color:rgb(var(--ink))}.checks input{appearance:none;cursor:pointer;background:radial-gradient(circle at 7px 50%, rgb(var(--ink) / .75) 4.5px, transparent 5px), rgb(var(--ink) / .14);border-radius:7px;flex:none;width:24px;height:14px;margin:0;transition:background .15s}.checks input:checked{background:radial-gradient(circle at 17px 50%, rgb(var(--bg)) 4.5px, transparent 5px), rgb(var(--ink) / .88)}.checks input:focus-visible{outline:2px solid rgb(var(--accent) / .7);outline-offset:2px}.fold{border-top:1px solid var(--hair);min-width:0;padding-top:12px}.fold summary{cursor:pointer;border-radius:var(--r);font:500 10px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--ink) / .8);align-items:baseline;gap:8px;padding:4px 8px;list-style:none;display:flex}.fold summary::-webkit-details-marker{display:none}.fold summary:after{content:"";border-right:1.3px solid rgb(var(--dim));border-bottom:1.3px solid rgb(var(--dim));align-self:center;width:6px;height:6px;margin-left:auto;transition:transform .15s;transform:rotate(-45deg)}.fold[open] summary:after{transform:rotate(45deg)translate(-2px,-2px)}.fold summary:hover{background:var(--fill)}.fold summary:focus-visible{outline:2px solid rgb(var(--accent) / .7);outline-offset:1px}.fold summary>span:first-child{white-space:nowrap}.fold-sub{letter-spacing:.02em;text-transform:none;color:rgb(var(--dim));white-space:nowrap;text-overflow:ellipsis;min-width:0;font-weight:400;overflow:hidden}.fold-body{gap:20px;padding-top:14px;display:grid}.shortcuts{border-radius:var(--plate-r);width:min(340px,100vw - 32px);max-height:calc(100vh - 48px);box-shadow:var(--plate);background:var(--grain), var(--panel);color:rgb(var(--ink));font:400 12.5px/1.4 var(--sans);border:0;padding:16px 10px 14px;overflow-y:auto}.shortcuts h2{margin:0 8px 10px}.shortcuts::backdrop{background:#00000059}.keys{grid-template-columns:1fr auto;align-items:center;gap:4px 8px;margin:0;padding:0 8px;display:grid}.keys dt{color:rgb(var(--ink) / .65);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.keys dd{justify-content:flex-end;gap:3px;margin:0;display:flex}.stage{place-items:center;min-width:0;min-height:0;padding:24px;display:grid;position:relative;overflow:hidden}.stage canvas{touch-action:none;cursor:grab;border-radius:var(--plate-r);box-shadow:var(--plate);display:block}.stage canvas.dragging{cursor:grabbing}.stage canvas.pointing{cursor:pointer}.stage.screen{padding:0;overflow:visible}.float-btn,.scrim,#show-rail{display:none}@media not ((width<=760px) or (height<=500px)){body,.stage{transition:grid-template-columns var(--slide), gap var(--slide), padding var(--slide)}.rail{justify-self:end;width:288px;transition:opacity .2s}.stage canvas{transition:border-radius var(--slide)}body.rail-off{grid-template-columns:0 minmax(0,1fr);gap:0;padding:0}body.rail-off .rail{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s,visibility 0s .24s}body.rail-off .stage{padding:0}body.rail-off .stage canvas{box-shadow:none;border-radius:0}#show-rail{z-index:10;background:rgb(var(--bg) / .5);border:1px solid rgb(var(--ink) / .1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;width:30px;height:30px;margin:0;transition:opacity .15s,visibility 0s .15s;display:grid;position:absolute;top:12px;left:12px}body.rail-off #show-rail{opacity:.45;visibility:visible;transition:opacity .2s .18s,background-color .12s}body.rail-off #show-rail:hover,body.rail-off #show-rail:focus-visible{opacity:1;color:rgb(var(--ink));transition-delay:0s}}@media (width<=760px),(height<=500px){html,body{overscroll-behavior:none;height:100%;overflow:hidden}body{height:100dvh;padding:0;display:block}.stage{padding:0;position:fixed;inset:0}.stage canvas{box-shadow:none;border-radius:0}.rail{--h:40px;z-index:20;width:min(300px,86vw);padding:calc(14px + env(safe-area-inset-top)) 12px calc(28px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));border-radius:0 var(--plate-r) var(--plate-r) 0;overscroll-behavior:contain;visibility:hidden;transition:transform .26s cubic-bezier(.3,.7,.2,1);position:fixed;top:0;bottom:0;left:0;transform:translate(-105%)}body.menu-open .rail{visibility:visible;transform:none}body:not(.menu-open) .rail{transition:transform .26s cubic-bezier(.3,.7,.2,1),visibility 0s .26s}#studio,#shortcuts,#show-keys,#hide-rail,.shortcuts{display:none}.brand{height:40px;font-size:14px}.icon-btn{width:40px;height:40px}.icon-btn svg{width:18px;height:18px}button,.checks label{font-size:14px}.seg button{height:34px;font-size:13px}#object-groups button{font-size:13px}#objects{height:auto;overflow:visible}.row .act.tight{width:48px}.rail{touch-action:pan-y}.scrim{z-index:15;opacity:0;pointer-events:none;background:#00000073;transition:opacity .26s;display:block;position:fixed;inset:0}body.menu-open .scrim{opacity:1;pointer-events:auto}.float-btn{z-index:10;bottom:calc(14px + env(safe-area-inset-bottom));text-align:center;width:48px;height:48px;color:rgb(var(--ink) / .9);background:rgb(var(--bg) / .55);border:1px solid rgb(var(--ink) / .14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-tap-highlight-color:transparent;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute}.float-btn:hover{background:rgb(var(--bg) / .55)}.float-btn:active{background:rgb(var(--ink) / .12)}.float-btn svg{width:20px;height:20px}#m-menu{left:calc(14px + env(safe-area-inset-left))}#m-play{right:calc(14px + env(safe-area-inset-right))}#m-play:before{content:"";background:linear-gradient(90deg,currentColor 0 35%,#0000 35% 65%,currentColor 65%);width:14px;height:16px}#m-play.paused:before{clip-path:polygon(0 0,100% 50%,0 100%);background:currentColor;margin-left:3px}}@media (prefers-reduced-motion:reduce){body,.stage,.rail,.stage canvas{transition:none!important}.rec[aria-pressed=true]{animation:none}button,.checks input{transition:none}}