:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#000;font-family:Arial,sans-serif}*{box-sizing:border-box}body{margin:0;overflow:hidden}#sketch{place-items:center;width:100vw;height:100dvh;display:grid}canvas{display:block}#label{color:#555;letter-spacing:.08em;pointer-events:none;font-size:10px;position:fixed;bottom:21px;left:24px}#label span{padding:0 5px}#error{color:#aaa;font-size:14px;line-height:1.6;position:fixed;inset:35% 15%}.lil-gui{--background-color:#111;--widget-color:#262626;--text-color:#bbb;--title-background-color:#171717}#controls{right:max(14px, env(safe-area-inset-right));bottom:max(14px, env(safe-area-inset-bottom));opacity:.28;z-index:10;gap:8px;transition:opacity .4s;display:flex;position:fixed}#controls.awake{opacity:.9}#controls button{color:#bbb;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:#0c0c0cb8;border:1px solid #2a2a2a;border-radius:50%;width:40px;height:40px;padding:9px}#controls button.on{color:#fff;border-color:#555}#controls svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%}#controls button svg path[d^=M8\ 5l]{fill:currentColor}.lil-gui.lil-root{max-height:calc(100dvh - 80px);overflow-y:auto}@media (pointer:coarse){.lil-gui{--widget-height:26px;--font-size:12px}}@media (width<=480px){body:has(#controls button[title="Ripple (W)"]:not([hidden])) #label{bottom:max(66px, calc(env(safe-area-inset-bottom) + 66px))}}#tip{color:#bbb;text-align:center;z-index:11;background:#0c0c0cd9;border:1px solid #2a2a2a;border-radius:12px;width:min(320px,100vw - 32px);padding:10px 14px;font-size:13px;line-height:1.5;position:fixed;bottom:70px;left:50%;transform:translate(-50%)}