*,:before,:after{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--pad:16px;--gap:16px;--panel-w:17rem;--panel-h:14rem;--header-h:3rem;--bg:#0d0d0d;--text:#e0e0e0;--text-muted:#aaa;--text-dim:#888;--panel-bg:#181820;--border:#ffffff1f;--btn-border:#ffffff2e;--surface:#ffffff14;--surface-hover:#ffffff2e;--surface-subtle:#ffffff0f;--surface-subtle-hover:#ffffff24;--slider-accent:#3ca7dd;--canvas-size:min(calc(100vw - 2 * var(--pad)), calc(100dvh - 2 * var(--pad) - var(--header-h) - 2 * var(--gap) - var(--panel-h)))}@media (prefers-color-scheme:light){:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#fafafa;--text:#1a1a1a;--text-muted:#555;--text-dim:#777;--panel-bg:#fff;--border:#0000001f;--btn-border:#0000002e;--surface:#0000000f;--surface-hover:#00000024;--surface-subtle:#0000000d;--surface-subtle-hover:#0000001f;--slider-accent:#228ec3}}body{background:var(--bg);color:var(--text);height:100dvh;padding:var(--pad);flex-direction:column;align-items:center;font-family:system-ui,sans-serif;font-size:14px;display:flex}#header{height:var(--header-h);flex-direction:column;flex:none;justify-content:center;align-items:center;gap:.15rem;width:100%;padding-bottom:8px;display:flex}#header h1{letter-spacing:.01em;font-size:1.05rem;font-weight:600}#header nav{color:var(--text-dim);font-size:.8rem}#header nav a{color:var(--text-muted);text-decoration:none}#header nav a:hover{color:var(--text);text-decoration:underline}#header .sep{margin:0 .15rem}#app{align-items:stretch;gap:var(--gap);flex-direction:column;margin:auto 0;display:flex}#canvas{width:var(--canvas-size);height:var(--canvas-size);display:block}@media (aspect-ratio>=1){:root{--canvas-size:min(calc(100dvh - 2 * var(--pad) - var(--header-h) - var(--gap)), calc(100vw - 2 * var(--pad) - var(--gap) - var(--panel-w)))}#app{flex-direction:row}#sidebar{width:var(--panel-w)}}#sidebar{background:var(--panel-bg);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:1rem;padding:1.25rem;display:flex}#controls{align-items:center;gap:.5rem;display:flex}#controls button{border:1px solid var(--btn-border);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;border-radius:6px;align-items:center;padding:.45rem 1rem;font-size:.875rem;transition:background .15s;display:flex}#controls button:hover{background:var(--surface-hover)}#controls button svg{width:16px;height:16px}#fps-counter{font-variant-numeric:tabular-nums;margin-left:auto}#fps-counter.fps-warn{color:oklch(85% .18 90)}#fps-counter.fps-danger{color:oklch(65% .22 25)}.setting{flex-direction:column;gap:.25rem;display:flex}.setting label{justify-content:space-between;align-items:baseline;display:flex}.slider-row{align-items:center;gap:.4rem;display:flex}.step-btn{border:1px solid var(--btn-border);background:var(--surface-subtle);width:1.25rem;height:1.25rem;color:var(--text-muted);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;padding:0;font-size:.9rem;line-height:1;transition:background .15s,color .15s;display:flex}.step-btn:hover{background:var(--surface-subtle-hover);color:var(--text)}.setting:has(input:disabled) .step-btn{pointer-events:none}.setting-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.8rem}.setting-value{color:var(--text);font-variant-numeric:tabular-nums;font-size:.85rem}.setting input[type=range]{min-width:0;accent-color:var(--slider-accent);cursor:pointer;flex:1}.setting:has(input:disabled){opacity:.45}.setting input[type=range]:disabled{cursor:not-allowed}