html,body{background:#000;height:100%;margin:0;overflow:hidden}#app{position:fixed;inset:0}#hint{color:#ffffff80;z-index:10;pointer-events:none;font:12px system-ui;position:fixed;top:12px;left:50%;transform:translate(-50%)}#panel{color:#fff;z-index:10;-webkit-user-select:none;user-select:none;background:#121218e0;border-radius:12px;flex-direction:column;gap:14px;width:224px;height:calc(100% - 64px);padding:14px;font:13px/1.4 system-ui;display:flex;position:fixed;top:16px;right:16px;overflow-y:auto;box-shadow:0 4px 20px #00000080}#panel .section{border-top:1px solid #ffffff1a;padding-top:10px}#panel .section:first-of-type{border-top:0;padding-top:0}#panel .section summary{cursor:pointer;text-transform:uppercase;letter-spacing:.04em;color:#ffffffbf;font-size:11px;list-style:none}#panel .section summary::-webkit-details-marker{display:none}#panel .section summary:before{content:"▸";color:#fff6;width:1em;display:inline-block}#panel .section[open]>summary:before{content:"▾"}#panel .section-body{flex-direction:column;gap:14px;margin-top:10px;display:flex}#panel .group{color:#fff9;text-transform:uppercase;letter-spacing:.04em;flex-direction:column;gap:6px;font-size:11px;display:flex}#panel .group.presets,#panel .group.specimen,#panel .group.replayer,#panel .group.screenshot{border-bottom:1px solid #ffffff1a;padding-bottom:10px}#panel .preset-row,#panel .specimen-row,#panel .replayer-row,#panel .screenshot-row{gap:6px;display:flex}#panel .preset-row select,#panel .group select,#panel .preset-row input[type=text]{color:#fff;text-transform:none;letter-spacing:0;background:#ffffff14;border:1px solid #ffffff29;border-radius:6px;flex:1;min-width:0;padding:6px;font:12px system-ui}#panel .preset-row button,#panel .specimen-row button,#panel .replayer-row button,#panel .screenshot-row button,#panel .perf-button{color:#fff;text-transform:none;letter-spacing:0;cursor:pointer;white-space:nowrap;background:#ffffff1a;border:1px solid #fff3;border-radius:6px;padding:6px 8px;font:12px system-ui}#panel .specimen-row button,#panel .replayer-row button{flex:1}#panel .preset-row button:hover,#panel .specimen-row button:hover,#panel .replayer-row button:hover,#panel .screenshot-row button:hover{background:#ffffff2e}#panel .specimen-row button:disabled,#panel .replayer-row button:disabled,#panel .screenshot-row button:disabled{opacity:.5;cursor:not-allowed}#panel .specimen-row button.paused,#panel .replayer-row button.playing{background:#ffffff38;border-color:#fff6}#panel .segmented{border:1px solid #ffffff29;border-radius:8px;display:flex;overflow:hidden}#panel .segmented button{color:#ffffffb3;text-transform:none;letter-spacing:0;cursor:pointer;white-space:nowrap;background:0 0;border:0;flex:1;padding:7px 6px;font:12px/1 system-ui}#panel .segmented button+button{border-left:1px solid #ffffff29}#panel .segmented button.active{color:#fff;background:#ffffff29}#panel .slider{flex-direction:column;gap:4px;display:flex}#panel .slider-head{text-transform:none;letter-spacing:0;color:#ffffffd9;justify-content:space-between;font-size:12px;display:flex}#panel .slider-head .readout{color:#ffffff8c;font-variant-numeric:tabular-nums}#panel input[type=range]{accent-color:#c96f4a;width:100%}#panel input[type=range]:disabled{opacity:.4;cursor:not-allowed}#panel #reset,#panel #reset-view{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:8px;padding:8px;font:12px system-ui}#panel #reset:hover,#panel #reset-view:hover{background:#ffffff2e}#panel .warning{color:#fbe3c9;background:#c96f4a2e;border:1px solid #c96f4a80;border-radius:8px;padding:8px;font:12px system-ui}#panel .perf-hint{color:#9fb0bd;margin:0;font:12px system-ui}#panel .readout{color:#c9d4dc;background:#ffffff0f;border-radius:8px;justify-content:space-between;gap:8px;padding:8px;font:12px system-ui;display:flex}#panel .readout .readout-value{color:#f0f4f7;font-variant-numeric:tabular-nums}#panel .color-row{color:#ffffffd9;justify-content:space-between;align-items:center;font-size:12px;display:flex;position:relative}#panel .color-row .color-control{align-items:center;gap:8px;display:flex}#panel .color-row .readout{color:#ffffff8c;font-variant-numeric:tabular-nums;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:monospace;font-size:11px}#panel .color-row .readout:hover{color:#ffffffd9}#panel .color-swatch{cursor:pointer;border:1px solid #ffffff40;border-radius:4px;width:24px;height:24px;padding:0;transition:border-color .15s,transform .1s;box-shadow:0 1px 3px #0000004d}#panel .color-swatch:hover{border-color:#ffffffb3;transform:scale(1.05)}#panel .color-row .color-input-anchor{opacity:0;pointer-events:none;border:0;width:1px;height:24px;margin:0;padding:0;position:absolute;top:0;right:calc(100% + 260px)}