:root{color:#e6e8ee;font-synthesis:none;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#11141b;font-family:DM Sans,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}header{border-bottom:1px solid #2a2e38;justify-content:space-between;align-items:center;height:76px;padding:0 28px;display:flex}a{color:#aab1c3;font-size:12px;text-decoration:none}.brand{color:#f2f4f8;letter-spacing:2px;font-family:Space Grotesk,sans-serif;font-size:20px}.brand span{color:#8992a5;letter-spacing:1px;margin-left:12px;font-family:DM Sans,sans-serif;font-size:10px}main{grid-template-columns:236px minmax(300px,1fr) 280px;min-height:calc(100vh - 116px);display:grid}aside{padding:25px 20px}.browser{border-right:1px solid #2a2e38;flex-direction:column;align-self:start;max-height:calc(100dvh - 116px);display:flex;position:sticky;top:20px}.browser>:not(#effects){flex-shrink:0}.inspector{border-left:1px solid #2a2e38}.eyebrow{letter-spacing:1.8px;color:#8b96aa;margin:0 0 16px;font-size:10px}h1{margin:0 0 14px;font-family:Space Grotesk,sans-serif;font-size:24px;font-weight:500;line-height:1.2}h2{margin:0;font-family:Space Grotesk,sans-serif;font-size:26px;font-weight:500}.muted{color:#8b94a6;font-size:12px;line-height:1.65}input,select,button,textarea{font:inherit;color:inherit;background:#1a1f2a;border:1px solid #343b49;border-radius:5px;padding:8px;font-size:12px}button{cursor:pointer}button:hover{background:#282f3d}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:2px;outline:2px solid #b3c4ff}label{color:#9ca7bb;font-size:11px;display:block}select{width:100%;margin-top:7px}#search{width:100%;margin:18px 0}.filter{margin:0 0 20px}#effects{overscroll-behavior:contain;scrollbar-gutter:stable;flex:0 auto;grid-auto-rows:max-content;gap:7px;min-height:0;max-height:min(65dvh,720px);display:grid;overflow-y:auto}#effects button{text-align:left;background:0 0;border-color:#0000;padding:13px 12px}#effects button strong{font-size:13px;font-weight:500;display:block}#effects button span{color:#8894a8;margin-top:5px;font-size:10px;display:block}#effects button.selected{background:#28324a;border-color:#4e6391}#effects button.selected strong{color:#d2deff}.workspace{min-width:0;padding:25px 24px}.stage-heading{justify-content:space-between;align-items:center;margin-bottom:23px;display:flex}.stage-heading .eyebrow{margin-bottom:9px}#tier{letter-spacing:1px;color:#adbad1;border:1px solid #384054;border-radius:20px;padding:6px 10px;font-size:9px}#stage{background:#182030;border:1px solid #3b4251;border-radius:9px;height:420px;position:relative;overflow:hidden;box-shadow:0 12px 36px #0004}canvas{width:100%;height:100%;display:block}#fallback{font-size:14px;position:absolute;bottom:24px;left:24px}.transport{flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;display:flex}.transport label{align-items:center;gap:6px;margin-left:5px;display:flex}.transport input[type=number]{width:75px}.transport select{width:76px;margin:0}.transport input[type=checkbox]{accent-color:#9eafff;margin:0}.readout{color:#8491a8;flex-wrap:wrap;justify-content:space-between;gap:8px;min-height:26px;margin-top:14px;font-size:10px;display:flex}#status{margin:0}#status[data-state=error]{color:#ffc0a0}.drawer{border:1px solid #2f3542;border-radius:7px;margin-top:20px;overflow:hidden}.drawer [role=tablist]{background:#181d27;border-bottom:1px solid #2f3542;display:flex}.drawer [role=tab]{color:#8f9aaf;background:0 0;border:0;border-radius:0;padding:13px 18px}.drawer [aria-selected=true]{color:#e1e8ff;box-shadow:inset 0 -2px #9eafff}.drawer-panel{white-space:pre;color:#aab8d0;max-height:330px;margin:0;padding:20px;font:11px/1.7 ui-monospace,SFMono-Regular,monospace;overflow:auto}[hidden]{display:none!important}#controls{margin-top:24px}fieldset{border:0;min-width:0;margin:0 0 26px;padding:0}legend{letter-spacing:1.2px;text-transform:uppercase;color:#bec8da;margin-bottom:17px;font-size:10px}.param{grid-template-columns:1fr 86px;align-items:center;gap:7px;margin-bottom:19px;display:grid}.param label{text-transform:capitalize;color:#c4ccdc}.param input,.param select,.param textarea{width:100%;margin:0}.param:has(textarea){grid-template-columns:1fr}.param textarea{resize:vertical;font:11px/1.5 ui-monospace,monospace}#media-inputs,#compare-panel{border-top:1px solid #343b49;margin-top:22px;padding-top:12px}summary{cursor:pointer;color:#c4ccdc;margin-bottom:12px;font-size:12px}#media-input-controls{gap:10px;display:grid}#media-input-controls input{width:100%}#media-input-controls video,#media-input-controls canvas{object-fit:contain;width:100%;height:auto;max-height:130px}#compare-canvas{pointer-events:none;position:absolute;inset:0}#compare-split{appearance:none;pointer-events:none;background:0 0;border:0;width:100%;height:100%;margin:0;padding:0;position:absolute;inset:0}#compare-split::-webkit-slider-thumb{appearance:none;cursor:ew-resize;pointer-events:auto;background:#1e2b49;border:2px solid #cad6ff;border-radius:7px;width:14px;height:42px}#compare-split::-moz-range-thumb{cursor:ew-resize;pointer-events:auto;background:#1e2b49;border:2px solid #cad6ff;border-radius:7px;width:12px;height:42px}.compare-mode:after{content:"";top:0;bottom:0;left:var(--compare-split,50%);pointer-events:none;border-left:1px solid #cad6ff;position:absolute}#capture-status{color:#aab8d0;font-size:11px}.param input[type=range]{accent-color:#a6b6ff;grid-column:1/-1;height:18px;padding:0}.param small{color:#768298;grid-column:1/-1;font-size:10px;line-height:1.5}.param input[type=color]{height:30px;padding:3px}.param input[type=checkbox]{accent-color:#a6b6ff;justify-self:end;width:18px;height:18px}.param:has(.vector){grid-template-columns:1fr}.vector{gap:5px;display:flex}#defaults{width:100%}footer{color:#758099;letter-spacing:.3px;border-top:1px solid #2a2e38;padding:13px 28px;font-size:10px}@media (width>=1550px){#stage{height:540px}}@media (width<=1000px){main{grid-template-columns:190px minmax(300px,1fr)}.inspector{border-top:1px solid #2a2e38;border-left:0;grid-column:1/-1}#controls{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}#stage{height:360px}.brand span{display:none}}@media (width<=650px){header{padding:0 16px}main{display:block}.browser{border-bottom:1px solid #2a2e38;border-right:0;position:static}h1,.browser .muted,.filter{display:none}#search{margin:0 0 12px}#effects{grid-template-columns:repeat(2,1fr);max-height:35dvh}.workspace{padding:22px 16px}#stage{height:320px}#controls{grid-template-columns:1fr}.inspector{padding:24px 16px}.transport label{margin-left:0}.stage-heading{gap:10px}h2{font-size:24px}}#notes{white-space:normal;color:#bac5d8;font:13px/1.65 system-ui,sans-serif}#notes h2,#notes h3,#notes h4,#notes h5,#notes h6{color:#e1e8ff;margin:1.6em 0 .65em;line-height:1.35}#notes h2{font-size:19px}#notes h3{font-size:15px}#notes>:first-child{margin-top:0}#notes p,#notes ul{max-width:90ch;margin:0 0 1em}#notes a{color:#b5c3ff;text-underline-offset:3px;overflow-wrap:anywhere;text-decoration:underline}#notes code{background:#202735;border-radius:3px;padding:2px 4px;font:.9em/1.6 ui-monospace,SFMono-Regular,monospace}#notes pre{white-space:pre;background:#202735;border-radius:5px;padding:12px;overflow:auto}#notes pre code{padding:0}#notes .note-table{border:1px solid #343c4b;border-radius:5px;margin:0 0 1.2em;overflow-x:auto}#notes table{border-collapse:collapse;min-width:100%;font-size:12px}#notes th,#notes td{text-align:left;vertical-align:top;border-bottom:1px solid #343c4b;min-width:100px;padding:9px 11px}#notes th{color:#e1e8ff;white-space:nowrap;background:#202735}#notes tbody tr:last-child td{border-bottom:0}#notes td:last-child{min-width:240px}#passes{white-space:normal}.tap-controls{flex-wrap:wrap;align-items:end;gap:10px;display:flex}.tap-controls input[type=number]{width:80px}.tap-controls label{flex-direction:column;gap:5px;display:flex}#tap-preview{width:auto;max-width:100%;height:auto;image-rendering:pixelated;border:1px solid #343c4b}#canvas{cursor:crosshair}.editor-toolbar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.editor-toolbar select{width:auto;margin:0}#source-panel,#profiler{white-space:normal;max-height:550px}#shader-editor{resize:vertical;color:#0000;caret-color:#d2deff;tab-size:2;white-space:pre;background:0 0;border:1px solid #343c4b;border-radius:5px;width:100%;min-height:260px;padding:12px;font:12px/1.6 ui-monospace,monospace;display:block;position:relative}.source-edit-stack{background:#141b27;position:relative}.shader-highlights{pointer-events:none;white-space:pre;color:#d2deff;tab-size:2;border:1px solid #0000;margin:0;padding:12px;font:12px/1.6 ui-monospace,monospace;position:absolute;inset:0;overflow:hidden}.wgsl-comment{color:#8391a7}.wgsl-keyword{color:#cbb2ff}.wgsl-attribute{color:#81d6d0}.wgsl-number{color:#efbd8f}#shader-diagnostics,#source{white-space:pre-wrap;overflow-wrap:anywhere}#shader-diagnostics[data-state=error]{color:#ffc0a0}#profile-histogram{width:100%;max-width:480px;height:auto}#profiler table{border-collapse:collapse;width:100%}#profiler th,#profiler td{text-align:left;overflow-wrap:anywhere;border-bottom:1px solid #343c4b;padding:6px 8px}#effect-inputs{gap:10px;margin-top:20px;display:grid}#effect-inputs input{width:100%;margin-top:6px}#stage.dom-mode{background:#151c27;height:560px}#stage.dom-mode>#canvas{display:none}.m5-stage{overscroll-behavior:contain;height:100%;padding:20px;overflow:auto}.m5-article-heading{margin:0 0 22px}.m5-article-heading h3{margin:0 0 10px;font-size:24px;line-height:1.15}.m5-article-heading p{color:#b3c0d2;max-width:48ch;font-size:12px;line-height:1.5}.m5-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding-bottom:180px;display:grid}.m5-card{background:#162335;border:1px solid #687990;border-radius:18px;min-height:260px;display:block;position:relative;overflow:hidden}.m5-card h4,.m5-card p,.m5-card button,.m5-card label{z-index:3;position:relative}.m5-card h4{color:#eff4ff;text-shadow:0 1px 8px #000;max-width:22ch;margin:22px;font-size:18px}.m5-card p{color:#c8d7e9;margin:22px;font-size:12px;line-height:1.7}.m5-card button{margin:0 22px 22px}.m5-holo-control{margin:0 22px 22px;font-size:11px;display:block}.m5-holo-control input{width:auto}.holo-uniform{--hgpu-progress:var(--hcss-number);transition:--hcss-number var(--hcss-duration-slow) var(--hcss-ease-standard)}.scroll-uniform{--hgpu-progress:0}@supports (animation-timeline:view()){.scroll-uniform{animation:1s linear both m5-scroll-progress;animation-timeline:view()}}@keyframes m5-scroll-progress{0%{--hgpu-progress:0}to{--hgpu-progress:1}}#m5-tools{border-top:1px solid #343b49;margin-top:22px;padding-top:12px}#m5-tools label{align-items:center;gap:8px;margin:12px 0;font-size:11px;display:flex}#m5-tools input[type=checkbox]{width:auto}#m5-tools select{max-width:130px;margin-left:auto}#m5-tools button{width:100%;margin-top:8px}#m5-stage-status{color:#a8b9cf;font-size:11px;line-height:1.6}@media (width<=700px){.m5-cards{grid-template-columns:1fr}#stage.dom-mode{height:620px}}#stage[data-reduced-motion=true] .holo-uniform{transition:none}#stage[data-reduced-motion=true] .scroll-uniform{animation:none}@media (prefers-reduced-motion:reduce){.holo-uniform{transition:none}.scroll-uniform{animation:none}}