:root{--space-h:4px;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--bg:#0d0e10;--canvas:#f4f5f6;--panel:#17191c;--panel-2:#1e2126;--line:#2a2e34;--line-2:#34393f;--ink:#e8eaec;--ink-light:#2e3136;--ink-2:#9aa0a7;--accent:#6ea8ff;--danger:#ff6b61;--warn:#e0b153;--ok:#58c07a}html{font-size:93.75%}*{box-sizing:border-box}[hidden]{display:none!important}body{letter-spacing:-.01em;color:var(--ink);background:var(--bg);flex-direction:column;height:100vh;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:1rem;line-height:1.5;display:flex;overflow:hidden}strong{font-weight:500}.top{align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);background:var(--panel);border-block-end:1px solid var(--line);flex:none;display:flex}.top__title{white-space:nowrap;letter-spacing:-.01em;margin:0;font-size:1rem;font-weight:500}.top__title .muted{color:var(--ink-2);font-weight:400}.toolbar{align-items:center;gap:var(--space-h);background:var(--panel);border:1px solid var(--line-2);border-radius:12px;padding:6px;display:flex;position:absolute;inset-block-end:64px;inset-inline-start:50%;transform:translate(-50%);box-shadow:0 8px 24px #00000059}.toolbar__sep{background:var(--line-2);block-size:20px;inline-size:1px;margin-inline:var(--space-h)}.tool{block-size:36px;inline-size:36px;color:var(--ink-2);cursor:pointer;background:0 0;border:none;border-radius:8px;place-items:center;transition:background .15s,color .15s;display:grid;position:relative}.tool svg{block-size:20px;inline-size:20px}.tool:hover{background:var(--panel-2);color:var(--ink)}.tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tool[aria-pressed=true]{background:var(--ink);color:#101214}.tool:after{content:attr(data-tip);background:var(--panel-2);color:var(--ink);border:1px solid var(--line-2);white-space:nowrap;opacity:0;pointer-events:none;border-radius:6px;padding:.125rem .5rem;font-size:.72rem;font-weight:500;transition:opacity .15s;position:absolute;inset-block-end:calc(100% + 10px);inset-inline-start:50%;transform:translate(-50%)}.tool:hover:after,.tool:focus-visible:after{opacity:1}.vtoolbar{flex-direction:column;inset-block:50% auto;inset-inline-start:auto;inset-inline-end:var(--space-2);transform:translateY(-50%)}.vtoolbar .toolbar__sep{block-size:1px;inline-size:auto;margin-inline:-6px;margin-block:var(--space-h);background:#0a0b0c;align-self:stretch}.vtoolbar .tool[aria-pressed=true]{background:var(--ink-light);color:#cbd0d5}.vtoolbar .tool:after{inset-block:50% auto;inset-inline:auto calc(100% + 10px);transform:translateY(-50%)}.wrap{flex:auto;min-height:0;display:flex}.stage{background:var(--canvas);flex:auto;min-width:0;position:relative}.stage--dark{background:#131518}.stage--dark .stage__readout{color:var(--ink);border-color:var(--line-2);background:#17191ceb}.stage canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.stage__title{pointer-events:none;-webkit-user-select:none;user-select:none;margin:0;position:absolute;inset-block-start:var(--space-2);inset-inline-start:var(--space-2)}.stage__logo{mix-blend-mode:difference;block-size:48px;inline-size:auto;display:block}.switch.switch--theme{background:var(--panel);border:1px solid var(--line-2);block-size:32px;inline-size:60px;position:absolute;inset-block-start:var(--space-2);inset-inline-start:50%;transform:translate(-50%);box-shadow:0 8px 24px #00000059}.switch.switch--theme .switch__knob{background:var(--ink);color:#101214;place-items:center;block-size:24px;inline-size:24px;display:grid;inset-block-start:3px;inset-inline-start:3px}.switch.switch--theme[aria-checked=true]{background:var(--panel)}.switch.switch--theme[aria-checked=true] .switch__knob{background:var(--ink-light);color:#cbd0d5;transform:translate(28px)}.switch.switch--theme svg{block-size:14px;inline-size:14px}.switch.switch--theme .switch__moon,.switch.switch--theme[aria-checked=true] .switch__sun{display:none}.switch.switch--theme[aria-checked=true] .switch__moon{display:block}.stage__readout{font-variant-numeric:tabular-nums;color:#1c1f22;pointer-events:none;background:#ffffffeb;border:1px solid #d9dcdf;border-radius:999px;min-width:12rem;min-height:1.5rem;padding:.25rem .625rem;font-size:.8rem;position:absolute;inset-block-end:var(--space-1);inset-inline-end:var(--space-1)}.side{background:var(--panel);border-inline-start:1px solid var(--line);flex-direction:column;flex:0 0 344px;min-height:0;display:flex}.side__scroll{min-height:0;padding:var(--space-3) var(--space-2);gap:var(--space-4);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;flex-direction:column;flex:auto;display:flex;overflow-y:auto}.side section{gap:var(--space-1);flex-direction:column;display:flex}.side section:not(:first-child){margin-inline:calc(-1 * var(--space-2));padding-inline:var(--space-2);border-block-start:1px solid #0a0b0c;padding-block-start:var(--space-2)}.section__body{gap:var(--space-2);flex-direction:column;display:flex}.section__body>*+.sub{margin-inline:calc(-1 * var(--space-2));padding-inline:var(--space-2);border-block-start:1px solid #0a0b0c;padding-block-start:12px}.sub{gap:var(--space-1);flex-direction:column;display:flex}.sub__label{letter-spacing:-.01em;color:var(--ink-2);opacity:.75;padding-inline:var(--space-1);margin:0;font-size:.72rem;font-weight:500}.sub__body{gap:var(--space-h);flex-direction:column;display:flex}.side h2{padding-inline:var(--space-1)}.acc-item{flex-direction:column;gap:0;display:flex}.acc{grid-template-rows:0fr;transition:grid-template-rows .2s;display:grid}.acc--open{grid-template-rows:1fr}.acc__inner{gap:var(--space-h);flex-direction:column;display:flex;overflow:hidden}.acc--open .acc__inner{padding-block-start:var(--space-h)}@media (prefers-reduced-motion:reduce){.acc{transition:none}}.switchrow{justify-content:space-between;align-items:center;gap:var(--space-1);padding-inline:var(--space-1);min-block-size:32px;display:flex}.switchrow__label{color:var(--ink-2);font-size:.867rem}.switch{background:var(--line-2);cursor:pointer;border:none;border-radius:999px;flex:none;block-size:16px;inline-size:30px;padding:0;transition:background .15s;position:relative}.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.switch[aria-checked=true]{background:var(--ink)}.switch__knob{background:var(--ink-2);border-radius:50%;block-size:12px;inline-size:12px;transition:transform .15s,background .15s;position:absolute;inset-block-start:2px;inset-inline-start:2px}.switch[aria-checked=true] .switch__knob{background:#101214;transform:translate(14px)}#preset-params{flex-direction:column;gap:.25rem;display:flex}.section__body>div:empty,.sub__body:empty,#preset-params:empty{display:none}.side__actions{gap:var(--space-1);padding:var(--space-1) var(--space-2);border-block-start:1px solid var(--line);background:var(--panel);flex:none;grid-template-columns:1fr 1fr;display:grid}.side__actions .chip{text-align:center;background:var(--ink);color:#101214;justify-content:center}.side__actions .chip:hover{color:#101214;background:#fff}.side h2{letter-spacing:-.01em;color:var(--ink-2);margin:0;font-size:.8rem;font-weight:500}#layers,.chiprow,.col{gap:var(--space-h);flex-direction:column;display:flex}.side section>div:empty{display:none}.grid2{gap:var(--space-h);grid-template-columns:1fr 1fr;display:grid}.grid2 .chip{text-align:center;justify-content:center}.chip{width:100%;font:inherit;padding:6px var(--space-1);background:var(--panel-2);min-block-size:32px;color:var(--ink-2);cursor:pointer;text-align:start;border:none;border-radius:4px;justify-content:flex-start;align-items:center;font-size:.867rem;transition:color .15s,background .15s;display:flex}.chip:hover{color:var(--ink)}.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.chip--type{position:relative}.chip--type[aria-pressed=true]:after{content:"";background:var(--ok);border:2px solid #0a0b0c;border-radius:50%;block-size:6px;inline-size:6px;position:absolute;inset-block-start:50%;inset-inline-end:var(--space-1);transform:translateY(-50%)}.chip[aria-pressed=true]{background:var(--ink-light);color:#cbd0d5}.ctl{align-items:center;gap:var(--space-1);padding-inline:var(--space-1);grid-template-columns:128px 1fr 40px;min-block-size:32px;display:grid}.ctl label{color:var(--ink-2);font-size:.867rem}.ctl output{font-variant-numeric:tabular-nums;text-align:end;color:var(--ink);font-size:.8rem}.ctl input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;min-width:0;height:1.25rem}.ctl input[type=range]::-webkit-slider-runnable-track{background:var(--line-2);border-radius:2px;height:3px}.ctl input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--ink);border:none;border-radius:50%;width:10px;height:10px;margin-top:-3.5px;transition:transform .15s;box-shadow:0 1px 3px #00000080}.ctl input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)}.ctl input[type=range]::-moz-range-track{background:var(--line-2);border-radius:2px;height:3px}.ctl input[type=range]::-moz-range-thumb{background:var(--ink);border:none;border-radius:50%;width:10px;height:10px;box-shadow:0 1px 3px #00000080}.ctl input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}select{font:inherit;letter-spacing:-.01em;appearance:none;background-color:var(--panel-2);color:var(--ink);cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0a7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right .625rem center;background-repeat:no-repeat;background-size:12px;border:none;border-radius:4px;width:100%;padding:.375rem 2rem .375rem .625rem;font-size:.867rem;font-weight:500}select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dd{position:relative}.dd__btn{width:100%;font:inherit;letter-spacing:-.01em;padding:6px var(--space-1);background:var(--panel-2);min-block-size:32px;color:var(--ink);cursor:pointer;border:none;border-radius:4px;justify-content:space-between;align-items:center;font-size:.867rem;font-weight:500;display:flex}.dd__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dd__chev{border-inline-end:1.5px solid var(--ink-2);border-block-end:1.5px solid var(--ink-2);block-size:7px;inline-size:7px;transition:transform .15s;transform:rotate(45deg)translateY(-1px)}.dd__btn[aria-expanded=true] .dd__chev{transform:rotate(225deg)translateY(-1px)}.dd__menu{z-index:30;padding:var(--space-h);background:var(--panel-2);border:1px solid var(--line-2);border-radius:8px;flex-direction:column;gap:2px;max-height:60vh;display:flex;position:absolute;inset-block-start:calc(100% + 4px);inset-inline:0;overflow-y:auto;box-shadow:0 12px 32px #00000073}.dd__menu[hidden]{display:none}.dd__opt{font:inherit;letter-spacing:-.01em;text-align:start;padding:6px var(--space-1);color:var(--ink-2);cursor:pointer;background:0 0;border:none;border-radius:6px;font-size:.867rem;font-weight:500}.dd__opt:hover{color:var(--ink);background:#ffffff0f}.dd__opt:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.dd__opt[aria-selected=true]{background:var(--ink-light);color:#cbd0d5}.stats{min-width:0}.stats table{border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums;width:100%;font-size:.72rem}.stats caption{text-align:start;color:var(--ink-2);padding-block-end:.25rem;font-size:.72rem}.stats th,.stats td{text-align:end;border-block-end:1px solid var(--line);text-overflow:ellipsis;white-space:nowrap;padding:.125rem .25rem;overflow:hidden}.stats th{color:var(--ink-2);font-weight:500}.stats th:first-child,.stats td:first-child{text-align:start}.stats td.bad{color:var(--danger);font-weight:500}.stats td.warn{color:var(--warn)}.stats__summary{color:var(--ink-2);margin:0;font-size:.867rem}.stats__summary strong{font-weight:500}.stats__summary strong.bad{color:var(--danger)}.stats__summary strong.ok{color:var(--ok)}.statgrid{column-gap:var(--space-1);row-gap:var(--space-h);font-variant-numeric:tabular-nums;padding-inline:var(--space-1);grid-template-columns:repeat(3,auto 1fr);align-items:baseline;font-size:.8rem;display:grid}.statgrid .statgrid__label{color:var(--ink-2)}.statgrid .statgrid__value{color:var(--ink);text-align:end}.statgrid .statgrid__value.ok{color:var(--ok)}.statgrid .statgrid__value.bad{color:var(--danger)}.warnlist{color:var(--warn);margin:0;padding-inline-start:1.2rem;font-size:.8rem}