:root{--panel:#000;--pane-right:min(410px, 100vw);--pane-bottom:0px;--ease:cubic-bezier(.2, .7, .2, 1)}html,body{height:100%;overflow:hidden}#stage{width:100%;height:100%;height:100lvh;transition:width .28s var(--ease), height .28s var(--ease);display:block;position:fixed;top:0;left:0}body[data-ui=on][data-pane=open] #stage{width:calc(100% - var(--pane-right));height:calc(100dvh - var(--pane-bottom))}#error{z-index:5;font:12px/1.5 var(--mono);white-space:pre-wrap;color:#ffd9c2;background:#2a0703;border:1px solid #a3260b;padding:12px 14px;position:fixed;inset:auto 16px 16px}.disc{top:max(14px, env(safe-area-inset-top));z-index:3;width:38px;height:38px;color:var(--ink);cursor:pointer;opacity:.6;background:#0000004d;border:0;border-radius:50%;padding:8px;transition:opacity .2s,visibility .2s,transform .5s,background .2s;display:block;position:fixed}.disc:focus-visible{opacity:1;background:#0009}.disc svg{width:100%;height:100%;display:block}#back{left:max(14px, env(safe-area-inset-left));z-index:1}#cog{right:max(14px, env(safe-area-inset-right))}#play{right:calc(max(14px, env(safe-area-inset-right)) + 46px)}#shot{right:calc(max(14px, env(safe-area-inset-right)) + 92px)}body:not([data-pane=open]) #shot{opacity:0;visibility:hidden}#shot:disabled{opacity:.3;cursor:progress}body:not([data-pane=open]):not([data-paused=true]) #play{opacity:0;visibility:hidden}#play .icon-play,body[data-paused=true] #play .icon-pause{display:none}body[data-paused=true] #play .icon-play{display:block}#cog[aria-expanded=true]{opacity:1;background:#0009;transform:rotate(60deg)}@media (min-width:700px){body[data-pane=open] #shot,body[data-pane=open] #play,body[data-pane=open] #cog{background:#ffffff1a}:is(body[data-pane=open] #shot:focus-visible,body[data-pane=open] #play:focus-visible,body[data-pane=open] #cog:focus-visible){background:#ffffff2e}}@media (hover:hover){.disc:hover{opacity:1;background:#0009}#cog:hover{opacity:1;background:#0009;transform:rotate(60deg)}}@media (hover:hover) and (min-width:700px){body[data-pane=open] #shot:hover,body[data-pane=open] #play:hover,body[data-pane=open] #cog:hover{background:#ffffff2e}}#panel{z-index:2;width:var(--pane-right);color:var(--ink);background:var(--panel);border-left:1px solid var(--line);font:11px/1.4 var(--mono);visibility:hidden;transition:transform .28s var(--ease), visibility 0s linear .28s;flex-direction:column;display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(102%)}body[data-ui=on][data-pane=open] #panel{visibility:visible;transition:transform .28s var(--ease), visibility 0s;transform:none}body[data-ui=off] .disc,body[data-ui=off] #panel{display:none}@media (max-width:699px){:root{--pane-right:0px;--pane-bottom:50dvh}#panel{width:100%;height:var(--pane-bottom);border-left:0;border-top:1px solid var(--line);top:auto;left:0;transform:translateY(102%)}}.head{min-height:62px;padding:14px 154px 10px 16px;padding-top:max(14px, env(safe-area-inset-top));border-bottom:1px solid var(--line);align-items:center;gap:12px;display:flex}@media (max-width:699px){.head{min-height:0;padding:10px 16px}}#fps{color:var(--ink-dim);white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}#controls{overscroll-behavior:contain;flex:1;padding:4px 0 10px;overflow-y:auto}.group{border-bottom:1px solid var(--line)}.group[open]{padding-bottom:3px}.group summary{cursor:pointer;-webkit-user-select:none;user-select:none;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:10px 14px;font-size:10px;list-style:none}.group summary::-webkit-details-marker{display:none}.group summary:before{content:"▸ ";width:1.2em;display:inline-block}.group[open] summary:before{content:"▾ "}.row{grid-template-columns:124px 1fr 84px;align-items:center;gap:8px;padding:3px 14px;display:grid}.row-select{grid-template-columns:124px 1fr}.row-bool input[type=checkbox]{grid-column:3}.row[hidden]{display:none}.lbl{color:var(--ink-dim);white-space:nowrap;text-overflow:ellipsis;cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden}.row.changed .lbl{color:var(--ink)}.track{display:block;position:relative}.track .home{background:var(--ink-dim);opacity:.6;pointer-events:none;width:1px;height:10px;margin-left:-.5px;position:absolute;top:4px}.track .home[hidden],.track .rerange[hidden]{display:none}.rerange{color:var(--ink-dim);font:10px/1 var(--mono);cursor:pointer;background:0 0;border:0;padding:0 2px;position:absolute;top:-9px;right:0}.rerange.at-min{left:0;right:auto}.rerange:hover{color:var(--ink)}#controls.bypassed{opacity:.45;pointer-events:none}#show-changes{vertical-align:-2px;accent-color:var(--accent);margin:0 4px 0 0}input[type=range]{-webkit-appearance:none;appearance:none;background:0 0;width:100%;height:18px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:#fff3;height:2px}input[type=range]::-moz-range-track{background:#fff3;height:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--ink-dim);border-radius:50%;width:10px;height:10px;margin-top:-4px}input[type=range]::-moz-range-thumb{background:var(--ink-dim);border:0;border-radius:50%;width:10px;height:10px}.row.changed input[type=range]::-webkit-slider-thumb{background:var(--accent)}.row.changed input[type=range]::-moz-range-thumb{background:var(--accent)}.num{border:1px solid var(--line);width:100%;color:var(--ink);font:11px var(--mono);background:#0d0d0d;border-radius:2px;padding:2px 4px}.num:focus{outline:1px solid var(--accent)}.num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.num[type=number]{-webkit-appearance:textfield;appearance:textfield}.swatch{border:1px solid var(--line);cursor:pointer;border-radius:0;width:100%;height:18px;padding:0}.swatch:focus-visible{outline:1px solid var(--accent)}.picker{z-index:5;background:var(--panel);color:var(--ink);font:11px/1.4 var(--mono);border:1px solid var(--line);border-radius:4px;flex-direction:column;display:flex;position:fixed;overflow:hidden;box-shadow:0 12px 40px #0009}.picker[hidden]{display:none}.picker-bar{cursor:move;touch-action:none;border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:6px 6px 6px 10px;display:flex}.picker-title{letter-spacing:.14em;text-transform:uppercase;-webkit-user-select:none;user-select:none;font-size:10px}.picker-close{width:22px;height:22px;color:var(--ink-dim);cursor:pointer;background:0 0;border:0;border-radius:2px;padding:4px}:is(.picker-close:hover,.picker-close:focus-visible){color:var(--ink);background:#ffffff1a;outline:none}.picker-close svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;width:100%;height:100%;display:block}.picker-swatch{border-bottom:1px solid #000;flex:none;height:48px}.picker-square{aspect-ratio:4/3;touch-action:none;cursor:crosshair;outline:none;position:relative}.picker-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.picker-hue{border-top:1px solid var(--line);touch-action:none;cursor:ew-resize;outline:none;flex:none;height:24px;position:relative}.picker-dot{pointer-events:none;border:2px solid #fff;border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;position:absolute;box-shadow:0 0 0 1px #00000080}.picker-hue .picker-dot{top:50%}.picker[data-keys] .picker-square:focus .picker-dot,.picker[data-keys] .picker-hue:focus .picker-dot{box-shadow:0 0 0 1px #00000080, 0 0 0 3px var(--accent)}@media (max-width:699px){.picker{width:auto;height:var(--pane-bottom);border:0;border-top:1px solid var(--line);box-shadow:none;padding-bottom:env(safe-area-inset-bottom);border-radius:0;inset:auto 0 0}.picker-square{aspect-ratio:auto;flex:1}.picker-bar{cursor:default}}input[type=checkbox]{accent-color:var(--accent);justify-self:start;margin:0}select{border:1px solid var(--line);width:100%;color:var(--ink);font:11px var(--mono);cursor:pointer;background:#0d0d0d;border-radius:2px;padding:2px 4px}select:focus{outline:1px solid var(--accent)}.state{padding:12px 14px max(14px, env(safe-area-inset-bottom));border-top:1px solid var(--line);gap:8px;display:grid}.changes{color:var(--ink-dim)}#reset{color:var(--ink);font:inherit;cursor:pointer;background:0 0;border:0;padding:0}#reset:hover{text-decoration:underline}#copy{cursor:pointer;background:var(--ink);color:#000;width:100%;font:600 11px var(--mono);letter-spacing:.06em;border:0;border-radius:2px;padding:9px}#copy:hover{background:#fff}