.shader-panel{top:calc(var(--demo-bar) + 16px);bottom:120px;left:var(--demo-gutter);z-index:5;width:calc(40% - var(--demo-gutter));background:var(--demo-veil);-webkit-backdrop-filter:blur(12px);border:1px solid var(--demo-line);border-radius:var(--radius-rail);flex-direction:column;display:flex;position:absolute}.shader-panel[data-ready=false]{opacity:0;transform:translate(-24px)}.shader-panel[data-open=false]{width:auto;bottom:auto}.shader-panel-body{flex-direction:column;flex:1;min-height:0;display:flex}.shader-panel-body[hidden]{display:none}.shader-editor{overscroll-behavior:contain;border-top:1px solid var(--demo-line);border-bottom:1px solid var(--demo-line);flex:1;min-height:0;overflow:auto}.shader-editor:focus-within{border-color:var(--demo-dim)}.shader-editor-sheet{width:max-content;min-width:100%;min-height:100%;position:relative}.shader-editor-code,.shader-editor-input{font:400 13px/20px var(--font-demo-mono), "JetBrains Mono", "Fira Code", "Courier New", monospace;font-variant-ligatures:none;letter-spacing:0;tab-size:2;white-space:pre;border:0;border-radius:0;margin:0;padding:10px 18px 14px 54px}.shader-editor-code{color:var(--demo-text);counter-reset:shader-line;pointer-events:none}.shader-editor-line{height:20px;display:block;position:relative}.shader-editor-line:before{width:38px;color:var(--demo-dim);text-align:right;content:counter(shader-line);counter-increment:shader-line;position:absolute;left:-54px}.shader-editor-line[data-error=true]>span{text-decoration:underline;-webkit-text-decoration-color:var(--signal-change);text-decoration-color:var(--signal-change);text-underline-offset:4px;text-decoration-thickness:2px}.shader-editor-line[data-error=true]:before{color:var(--signal-change)}.shader-tone-comment{color:var(--demo-dim)}.shader-tone-word{color:var(--demo-white);font-weight:500}.shader-tone-number{color:var(--demo-bone)}.shader-editor .shader-editor-input{color:#0000;width:100%;height:100%;caret-color:var(--demo-white);resize:none;background:0 0;outline:none;display:block;position:absolute;inset:0;overflow:hidden}.shader-editor-input::selection{color:#0000;background:#ffffff38}.shader-editor[data-readonly=true] .shader-editor-input{caret-color:#0000}.shader-status{flex:none;max-height:132px;padding:10px 18px 12px;font-size:12px;overflow-y:auto}.shader-status p{overflow-wrap:anywhere;margin:0}.shader-status p+p,.shader-status div:not(:empty)+p{margin-top:4px}.shader-status a{color:var(--demo-white);text-underline-offset:4px;text-decoration:underline}.shader-readout{padding-top:10px}.shader-color{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;min-height:44px;display:flex}.shader-color input{border:1px solid var(--demo-line);cursor:pointer;appearance:none;background:0 0;width:44px;height:24px;padding:0}.shader-color input::-webkit-color-swatch-wrapper{padding:0}.shader-color input::-webkit-color-swatch{border:0}.shader-color input::-moz-color-swatch{border:0}.shader-note{color:var(--demo-text);margin:0;font-size:12px}.shader-note:empty,.shader-narrow{display:none}.shader-list{margin:0 0 16px;padding:0;list-style:none}.shader-list li+li{margin-top:6px}.shader-poster-source{text-align:left;background:var(--demo-veil);border:1px solid var(--demo-line);border-radius:var(--radius-control);width:min(100%,640px);max-height:50dvh;display:flex;overflow:hidden}.shader-poster-source .shader-editor{border:0}@media (max-width:767px){.shader-wide,.shader-hint{display:none}.shader-narrow{display:inline}.shader-sheet-source{margin:0 -18px}.shader-sheet-source .shader-editor{flex:none}}