@font-face{font-family:InterDisplay;src:url(/fonts/InterDisplay-Regular.woff2) format("woff2");font-weight:400 600;font-display:swap}@font-face{font-family:InterDisplay;src:url(/fonts/InterDisplay-Bold.woff2) format("woff2");font-weight:650 900;font-display:swap}:root{font-family:InterDisplay,sans-serif;font-synthesis:none;color:#eee;background:#000;--panel:#161616;--surface:#202020;--field:#101010;--border:#ffffff0d;--text:#eee;--muted:#888;--fill:#303030;--selected:#eee;--selected-text:#171717;--focus:#bbb;--line:#ffffff0d}:root.inverted{color:#171717;background:#fff;--panel:#f5f5f5;--surface:#ebebeb;--field:#fff;--border:#0000000b;--text:#171717;--muted:#5f5f5f;--fill:#ddd;--selected:#222;--selected-text:#fff;--focus:#555;--line:#0000000b}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button:focus-visible,textarea:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}[hidden]{display:none!important}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:100dvh;background:#000;align-items:start}.inverted .workspace{background:#fff}.workspace.editor-hidden{grid-template-columns:1fr}.stage{position:sticky;top:0;height:100dvh;min-width:0;background:#000;overflow:hidden}.inverted .stage{background:#fff}canvas{display:block;position:absolute;width:100%;height:100%;touch-action:pan-y}#editor{height:100dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#5553 transparent;background:var(--panel);padding:24px 20px 16px;border-radius:24px 0 0 24px;color:var(--text)}.panel-title{font-size:15px;font-weight:500;letter-spacing:-.3px;height:24px;margin:4px 0 26px;display:flex;align-items:center}.editor-toggle{position:fixed;right:18px;top:20px;z-index:10;border:1px solid var(--border);border-radius:100px;background:var(--surface);color:var(--text);padding:9px 14px;font-size:11px;line-height:16px;transition:background .18s,transform .18s}@media(hover:hover)and (pointer:fine){.editor-toggle:hover{background:var(--fill)}}.editor-toggle:active{transform:scale(.96)}.label{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px;font-weight:500;letter-spacing:.1px;margin-bottom:10px}.label span{font-size:10px;font-variant-numeric:tabular-nums;font-weight:400;color:var(--muted)}textarea{width:100%;resize:vertical;min-height:76px;max-height:140px;padding:13px 15px;background:var(--field);border:1px solid var(--border);border-radius:16px;color:var(--text);line-height:1.5;font-size:14px;margin-bottom:24px;transition:border-color .18s}@media(hover:hover)and (pointer:fine){textarea:hover{border-color:var(--fill)}}.modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:none;overflow:visible;padding:0;margin:0 0 12px}.mode{display:flex;align-items:center;gap:9px;min-height:38px;padding:8px 12px;border:1px solid transparent;border-radius:12px;background:var(--surface);color:var(--muted);font-size:12px;line-height:20px;text-align:left;transition:background .18s,color .18s,transform .18s}.mode span{display:inline-flex;justify-content:center;align-items:center;width:18px;height:20px;font-size:18px;line-height:1;flex-shrink:0;opacity:.8}@media(hover:hover)and (pointer:fine){.mode:hover{background:var(--fill);color:var(--text)}}.mode:active{transform:scale(.97)}.mode.active{background:var(--selected);color:var(--selected-text);box-shadow:0 1px 3px #0001}.mode.active span{opacity:1}#behavior-note{font-size:11px;color:var(--muted);line-height:1.5;margin:0 2px 22px;min-height:33px}.slider-control{--fraction:0;position:relative;isolation:isolate;height:44px;margin:10px 0 12px;border:1px solid var(--border);border-radius:14px;background:var(--field);overflow:hidden;transition:box-shadow .18s}.slider-fill{position:absolute;inset:0 auto 0 0;width:calc(22px + (100% - 22px)*var(--fraction));background:var(--fill);border-radius:13px;pointer-events:none;transition:background .18s}.slider-fill:after{content:"";position:absolute;right:8px;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--muted);opacity:0;transition:opacity .18s}.slider-control:has(:focus-visible) .slider-fill:after,.slider-control.dragging .slider-fill:after{opacity:1}@media(hover:hover)and (pointer:fine){.slider-control:hover .slider-fill:after{opacity:1}}@media(hover:hover)and (pointer:fine){.slider-control:hover{box-shadow:inset 0 0 0 1px var(--border)}}.slider-control:has(:focus-visible){outline:2px solid var(--focus);outline-offset:3px}.range-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text)}.slider-control .range-label{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:0 14px;pointer-events:none;font-size:12px;color:var(--text)}.slider-control output{font-size:12px;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}.slider-control input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:2;touch-action:pan-y}.range-ends{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin:-4px 2px 18px}.cursor-settings{border-top:1px solid var(--line);padding:18px 0 8px}.cursor-settings summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:2px 0;margin-bottom:16px}.cursor-settings summary::-webkit-details-marker{display:none}.cursor-settings summary:after{content:"";width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .18s;margin-right:5px}.cursor-settings[open] summary:after{transform:rotate(45deg)}.cursor-settings:not([open]) summary{margin-bottom:4px}.cursor-settings select{width:100%;appearance:none;background:var(--field);color:var(--text);border:1px solid var(--border);border-radius:14px;padding:13px 32px 13px 14px;font-size:12px;margin-bottom:6px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}.loop-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:18px 0}.loop-row label{font-size:12px}.loop-row small{display:block;color:var(--muted);font-size:10px;margin-top:5px}input[role=switch]{appearance:none;flex-shrink:0;width:34px;height:20px;margin:0;background:var(--fill);border-radius:20px;cursor:pointer;position:relative;transition:background .18s}input[role=switch]:before{content:"";position:absolute;width:14px;height:14px;background:var(--muted);top:3px;left:3px;border-radius:50%;transition:transform .2s,background .2s}input[role=switch]:checked{background:var(--selected)}input[role=switch]:checked:before{background:var(--selected-text);transform:translate(14px)}.copy{width:100%;border:1px solid var(--border);border-radius:14px;color:var(--text);background:var(--surface);padding:13px 15px;display:flex;justify-content:space-between;font-size:12px;margin-top:18px;transition:background .18s}@media(hover:hover)and (pointer:fine){.copy:hover{background:var(--fill)}}#notice{display:block;font-size:10px;line-height:1.5;color:var(--muted);margin-top:8px;min-height:15px}.stage-bottom{position:absolute;bottom:22px;right:24px;z-index:2}.replay{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:100px;padding:10px 16px;font-size:16px;display:flex;gap:8px;align-items:center;transition:background .18s,transform .18s}.replay span{font-size:11px}@media(hover:hover)and (pointer:fine){.replay:hover{background:var(--surface)}}.replay:active{transform:scale(.96)}@media(max-width:720px){.workspace{display:block}.stage{position:relative}#editor{position:fixed;top:0;right:0;width:min(320px,100%);z-index:5;box-shadow:-12px 0 40px #0002}.editor-toggle{right:18px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}.panel-title{position:sticky;top:-24px;z-index:4;height:68px;margin:-24px -20px 20px;padding:24px 20px;background:var(--panel)}.editor-actions{position:fixed;right:18px;top:20px;z-index:10;display:flex;align-items:center;gap:8px}.editor-actions .editor-toggle{position:static}.theme-toggle{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);transition:background .18s,transform .18s}@media(hover:hover)and (pointer:fine){.theme-toggle:hover{background:var(--fill)}}.theme-toggle:active{transform:scale(.94)}.moon-icon,.inverted .sun-icon{display:none}.inverted .moon-icon{display:block}#code-dialog{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:26px;border:1px solid var(--border);border-radius:24px;background:var(--panel);color:var(--text);box-shadow:0 24px 100px #0005;overflow:auto}#code-dialog::backdrop{background:#0009;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.code-header{display:flex;justify-content:space-between;gap:16px;align-items:start}.code-header h2{font-size:20px;font-weight:500;letter-spacing:-.5px;margin:0 0 8px}.code-header p,#code-help{font-size:12px;color:var(--muted);line-height:1.6;margin:0}.code-header button{width:32px;height:32px;border:0;border-radius:50%;background:var(--surface);font-size:22px;flex-shrink:0}.code-tabs{display:flex;gap:5px;background:var(--field);border-radius:13px;padding:4px;margin:24px 0 16px;width:max-content}.code-tabs button{border:0;background:transparent;color:var(--muted);font-size:12px;padding:9px 20px;border-radius:10px}.code-tabs button[aria-pressed=true]{background:var(--fill);color:var(--text)}#code-source{height:320px;max-height:45dvh;min-height:140px;resize:vertical;margin:14px 0 16px;font:11px/1.7 ui-monospace,SFMono-Regular,monospace;white-space:pre;tab-size:2;border-radius:16px}.code-actions{display:flex;justify-content:flex-end;gap:8px}.code-actions button{padding:11px 18px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font-size:12px}#code-copy{background:var(--selected);color:var(--selected-text)}#code-status{font-size:11px;color:var(--muted);min-height:16px;margin:12px 0 0;text-align:right}button:disabled{opacity:.5;cursor:wait}@media(max-width:520px){#code-dialog{padding:20px}.code-actions button{flex:1}}.typography{border-top:0;padding-top:0;margin-bottom:20px}.font-upload{display:flex;flex-direction:column;gap:5px;font-size:12px;padding:12px 14px;border-radius:12px;background:var(--surface);cursor:pointer;margin:10px 0 16px}.font-upload span{font-size:10px;color:var(--muted)}#font-upload{width:100%;font-size:11px;margin-bottom:16px}#reset{justify-content:center;color:var(--muted)}.shader-select{margin-bottom:22px}.shader-select select{width:100%;padding:12px 14px;border-radius:14px;background:var(--surface);color:var(--text);border:1px solid var(--border);font-size:13px}#liquid-controls>.cursor-settings{border:0;padding-top:0}.visual-select{position:relative;margin:0 0 16px}.select-trigger{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);font-size:13px;text-align:left}.select-chevron{margin-left:auto;color:var(--muted)}.select-options{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;padding:5px;border:1px solid var(--border);border-radius:16px;background:var(--panel);box-shadow:0 12px 35px #0003;max-height:290px;overflow-y:auto}.select-option{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:10px;background:transparent;padding:10px;font-size:12px;text-align:left}.select-option:focus-visible{background:var(--fill)}@media(hover:hover)and (pointer:fine){.select-option:hover{background:var(--fill)}}.select-option[aria-selected=true]{background:var(--surface)}.selection-check{margin-left:auto;opacity:0}.select-option[aria-selected=true] .selection-check{opacity:1}.palette-chip{width:32px;height:18px;flex-shrink:0;border-radius:6px;border:1px solid #8883}.shader-icon{width:22px;height:22px;display:grid;place-items:center}.shader-icon svg{width:20px;height:20px}.segmented{margin:0 0 18px}.segmented .select-options{display:flex;position:static;padding:4px;background:var(--field);box-shadow:none;border-radius:12px;overflow:visible}.segmented .select-option{justify-content:center;text-align:center;flex:1}.segmented .selection-check{display:none}.segmented [aria-pressed=true]{background:var(--selected);color:var(--selected-text)}.shader-chip{width:22px;height:22px;flex-shrink:0;border-radius:6px;background:linear-gradient(135deg,#702aa4,#fa7148 58%,#ffe7a3);box-shadow:inset 0 0 0 1px #ffffff18}@font-face{font-family:Space Grotesk;src:url(/fonts/google/spacegrotesk.ttf) format("truetype");font-weight:700;font-display:swap}@font-face{font-family:Sora;src:url(/fonts/google/sora.ttf) format("truetype");font-weight:700;font-display:swap}@font-face{font-family:Manrope;src:url(/fonts/google/manrope.ttf) format("truetype");font-weight:700;font-display:swap}@font-face{font-family:Outfit;src:url(/fonts/google/outfit.ttf) format("truetype");font-weight:700;font-display:swap}@font-face{font-family:DM Sans;src:url(/fonts/google/dmsans.ttf) format("truetype");font-weight:700;font-display:swap}@font-face{font-family:Bungee;src:url(/fonts/google/bungee.ttf) format("truetype");font-weight:700;font-display:swap}.font-preview{font-size:13px;font-weight:700;line-height:1.5}:root{--ease-out:cubic-bezier(.23,1,.32,1)}.editor-toggle,.mode,.replay,.theme-toggle{transition:background .18s ease,color .18s ease,transform .16s var(--ease-out)}.copy,.select-trigger,.select-option,.code-tabs button,.code-actions button,.code-header button{transition:background .16s ease,color .16s ease,transform .16s var(--ease-out)}.copy:active,.select-trigger:active,.code-actions button:active,.code-tabs button:active{transform:scale(.98)}.select-option:active,.code-header button:active{transform:scale(.96)}@media(hover:hover)and (pointer:fine){.select-trigger:hover{background:var(--fill)}.code-tabs button:hover{color:var(--text)}.code-actions button:hover{background:var(--fill)}}.select-chevron{transition:transform .2s var(--ease-out)}.select-trigger[aria-expanded=true] .select-chevron{transform:rotate(180deg)}.visual-select .select-options{transform-origin:top center;transition:opacity .16s var(--ease-out),transform .16s var(--ease-out)}@starting-style{.visual-select .select-options{opacity:0;transform:translateY(-4px) scale(.97)}}#code-dialog[open]{transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}@starting-style{#code-dialog[open]{opacity:0;transform:translateY(8px) scale(.97)}}#code-dialog[open]::backdrop{transition:opacity .22s ease}@starting-style{#code-dialog[open]::backdrop{opacity:0}}#code-status{transition:opacity .2s ease}canvas{animation:canvas-in .32s var(--ease-out)}@keyframes canvas-in{0%{opacity:0}}@media(prefers-reduced-motion:reduce){.select-trigger[aria-expanded=true] .select-chevron{transform:rotate(180deg)}*:active{transform:none!important}}:root{--spring-glide:linear(0,.043,.131,.243,.346,.441,.526,.6,.663,.722,.767,.805,.836,.863,.886,.906,.921,.934,.945,.954,.962,.968,.974,.978,.982,.985,.987,.989,.991,.993,.994,.995,.996,.996,.997,.998,.998,.998,.999,.999,1);--spring-press:linear(0,.044,.13,.257,.397,.518,.645,.756,.838,.912,.962,1.004,1.031,1.045,1.053,1.054,1.052,1.046,1.039,1.032,1.025,1.018,1.013,1.008,1.004,1.002,.999,.998,.997,.997,.997,.997,.998,.998,.998,.999,.999,.999,1,1,1);--spring-bouncy:linear(0,.115,.371,.673,.946,1.145,1.253,1.277,1.238,1.164,1.08,1.006,.954,.927,.924,.936,.958,.981,1.001,1.014,1.021,1.021,1.018,1.011,1.005,1,.996,.994,.994,.995,.997,.999,1,1.001,1.002,1.002,1.001,1.001,1,1,1);interpolate-size:allow-keywords}.editor-toggle,.mode,.replay,.theme-toggle,.copy,.select-trigger,.select-option,.code-tabs button,.code-actions button,.code-header button{transition:background .16s ease,color .16s ease,transform .5s var(--spring-press)}.editor-toggle:active,.mode:active,.replay:active,.theme-toggle:active,.copy:active,.select-trigger:active,.select-option:active,.code-tabs button:active,.code-actions button:active,.code-header button:active{transition-duration:.16s,.16s,.12s}.has-pill{position:relative}.has-pill>:not(.pill){position:relative;z-index:1}.pill{position:absolute;left:0;top:0;z-index:2;pointer-events:none;opacity:0;overflow:hidden;border-radius:10px;background:var(--selected);transition:transform .7s var(--spring-glide),width .7s var(--spring-glide),height .7s var(--spring-glide),opacity .15s ease}.pill-layer{position:absolute;left:0;top:0;transition:transform .7s var(--spring-glide)}.pill-layer>*{color:var(--selected-text)!important;background:transparent!important;transition:none!important;transform:none!important}.code-tabs>.pill{background:var(--fill)}.code-tabs>.pill .pill-layer>*{color:var(--text)!important}.has-pill>[aria-pressed=true]{background:transparent!important;box-shadow:none;color:var(--muted)}.segmented .select-option{color:var(--muted)}@media(hover:hover)and (pointer:fine){.segmented .select-option:hover{color:var(--text)}}.mode{transition:background .2s var(--ease-out),color .2s var(--ease-out),box-shadow .2s ease,transform .5s var(--spring-press)}.slider-control:not(.scrubbing):not(.live) .slider-fill{transition:background .18s,width .55s var(--spring-glide)}.slider-fill:after{transition:opacity .18s,transform .73s var(--spring-bouncy)}.slider-control.dragging .slider-fill:after{transform:scaleY(1.35)}.range-label output{font-variant-numeric:tabular-nums}input[role=switch]:before{transition:transform .74s var(--spring-press),background .2s ease}input[role=switch]:active:before{transform:scale(.85)}input[role=switch]:checked:active:before{transform:translate(14px) scale(.85)}#code-copy{transition:background .16s ease,transform .5s var(--spring-press),filter .12s ease,opacity .12s ease}#code-copy.swap{filter:blur(2px);opacity:.4}details.cursor-settings::details-content{block-size:0;overflow:clip;transition:block-size .35s var(--ease-out),content-visibility .35s allow-discrete}details.cursor-settings[open]::details-content{block-size:auto}@media(pointer:coarse){.theme-toggle{width:44px;height:44px}.editor-toggle,.mode,.select-trigger,.replay{min-height:44px}.segmented .select-option{min-height:40px}.loop-row{min-height:44px}.cursor-settings summary{min-height:44px}}@media(max-width:720px){textarea{font-size:16px}}.stage.checker{background-color:#0d0d0d;background-image:conic-gradient(#1a1a1a 25%,transparent 0 50%,#1a1a1a 0 75%,transparent 0);background-size:20px 20px}.inverted .stage.checker{background-color:#fff;background-image:conic-gradient(#ececec 25%,transparent 0 50%,#ececec 0 75%,transparent 0)}