body{position:absolute;left:0;top:0;padding:0;margin:0;width:100vw;height:100vh;overflow:hidden;font-family:JetBrains Mono,monospace;font-size:12px}::-webkit-scrollbar{display:none}*{border:none;margin:0;padding:0}button,input,pre,select,textarea{font:inherit;outline:0;border:0}div#content{display:flex;width:100vw;height:100vh;overflow:hidden}div#glsl-editor{display:flex;height:100%;overflow:scroll}div#edit-inputs{height:0;z-index:1}div#edit-inputs-inner{background:#fff;position:absolute;width:100%;height:-moz-fit-content;height:fit-content;transform:translateY(-100%);transition:transform .2s}div#edit-inputs-inner:focus-within,div#edit-inputs-inner:hover{transform:none}div#edit-inputs>div:after{position:absolute;top:100%;content:"";display:block;width:4ex;height:2ex;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 25' %3E%3Crect width='50' height='25' style='fill: rgb(127,127,127);'/%3E%3Cpath d='M 25 18 L 43 7 L 7 7 L 25 18 Z' style='fill: rgb(80,80,80);'/%3E%3C/svg%3E");right:0}@keyframes slide-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-up{0%{transform:translateY(0)}to{transform:translateY(-100%)}}div#input-editors-container{overflow-x:scroll}table#input-editors{padding:0;margin:0;row-gap:0;border-collapse:collapse;border-spacing:0}table#input-editors tr{margin:0}table#input-editors td{padding:0;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}table#input-editors td:first-child,table#input-editors th:first-child{padding-right:1ex;border-right:1px solid #000}table#input-editors td:last-child,table#input-editors th:last-child{padding-left:1ex}th{border-bottom:1px solid #000;white-space:nowrap}button#add-input{text-align:center;width:100%;background:var(--color-yellow);color:var(--color-light);-webkit-user-select:none;-moz-user-select:none;user-select:none}button#add-input:hover{background:var(--color-orange)}div#canvas-container{width:100%;height:100vh;background:var(--color-dark);overflow:hidden}div#canvas-container>canvas{width:100%;height:100%}div.tabs-container{--tab-dark-background:var(--color-darkest)!important;--tab-light-background:var(--color-darker)!important;--tab-active-highlight-color:var(--color-medium)!important}.resizable-panes-container{position:relative;display:flex;width:100%;height:100%;overflow:hidden}.horizontal.resizable-panes-container{flex-direction:row}.vertical.resizable-panes-container{flex-direction:column}div.resizable-panes-container>div.resizer{z-index:2;position:relative}div.horizontal.resizable-panes-container>div.resizer{width:0;height:100%;cursor:ew-resize}div.vertical.resizable-panes-container>div.resizer{width:100%;height:0;cursor:ns-resize}div.resizable-panes-container>div.resizer:after,div.resizable-panes-container>div.resizer:before{position:absolute;display:block;content:""}div.horizontal.resizable-panes-container>div.resizer:after,div.horizontal.resizable-panes-container>div.resizer:before{top:0;bottom:0}div.vertical.resizable-panes-container>div.resizer:after,div.vertical.resizable-panes-container>div.resizer:before{left:0;right:0}div.horizontal.resizable-panes-container>div.resizer:before{left:-1px;width:2px;background-color:#000}div.horizontal.resizable-panes-container>div.resizer:after{left:-5px;width:10px;background-color:#0000}div.vertical.resizable-panes-container>div.resizer:before{top:-1px;height:2px;background-color:#000}div.vertical.resizable-panes-container>div.resizer:after{top:-5px;height:10px;background-color:#0000}div.resizable-panes-container>div.resizer:hover:after{background-color:#0004}.resizable-pane{position:relative}.horizontal.resizable-panes-container>.resizable-pane{overflow-x:hidden}.vertical.resizable-panes-container>.resizable-pane{overflow-y:hidden}div:where(.glsl,.js){background:var(--color-dark);width:-moz-fit-content;width:fit-content;min-width:100%}div:where(.glsl,.js) div.code-highlighter-container{--highlighter-error-fg-color:var(--color-light);--highlighter-error-color:var(--color-red)}div:where(.glsl,.js) pre>span:where(.keyword,.operator,.preprocessor){color:var(--color-red)}div:where(.glsl,.js) pre>span.builtin-type{color:var(--color-blue)}div:where(.glsl,.js) pre>span.builtin-func{color:var(--color-green)}div:where(.glsl,.js) pre>span.builtin-var{color:var(--color-orange)}div:where(.glsl,.js) pre>span.provided{color:var(--color-yellow)}div:where(.glsl,.js) pre>span:where(.reserved,.error-char,.identifier){color:var(--color-light)}div:where(.glsl,.js) pre>span.literal{color:var(--color-purple)}div:where(.glsl,.js) pre>span.string-literal{color:var(--color-yellow)}div:where(.glsl,.js) pre>span:where(.punctuation,.comment){color:var(--color-medium)}div.code-highlighter-container{--highlighter-error-color:red;--highlighter-error-fg-color:#fff}div.code-highlighter-container pre{position:relative;z-index:1}div.code-highlighter-container span.error-line:before{content:"-";color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}div.code-highlighter-container .code-highlighter-errors{display:flex;flex-direction:column;position:absolute;top:0;width:100%}div.code-highlighter-container{position:relative}div.code-highlighter-container div.errors{position:absolute;width:100%;background-color:var(--highlighter-error-color);white-space:wrap;display:flex;flex-direction:column;z-index:3;padding:1ex;color:var(--highlighter-error-fg-color)}div.code-highlighter-container div.errors>:not(:last-child):after{display:block;content:"-";color:transparent}div.code-highlighter-container span.error-line:not(.no-errors):after{content:"";width:100%;margin-top:-5px;height:5px;display:block;border-bottom:1px dashed var(--highlighter-error-color);position:absolute;z-index:2}div.code-highlighter-container .error-line:not(:hover)>div.errors:not(:hover){display:none}div#code-container{overflow:scroll;flex:1 1;display:flex;flex-direction:column;background:var(--color-dark);color:var(--color-light);padding:1ex}div#code-header{width:100%;white-space:nowrap;flex-grow:0}div#code-body{min-width:100%;white-space:nowrap;flex-grow:1}div#bottom-buttons{flex-shrink:0;margin:1ex -1ex -1ex;display:flex;position:-webkit-sticky;position:sticky;left:-1ex;bottom:-.5em;z-index:100}div#bottom-buttons>button{flex-grow:1;font-weight:bolder;padding:1ex;text-shadow:0 0 2px var(--color-dark);background-color:var(--color-purple)}div#bottom-buttons>button:hover{background-color:var(--color-blue)}div#bottom-buttons>.button-divider{flex-grow:0;flex-shrink:0;width:2px}div.code-editor{position:relative;min-width:100%;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}div.code-editor:first-child:last-child{min-height:100%}div.code-overlay{white-space:pre;width:100%;height:-moz-fit-content;height:fit-content;-webkit-user-select:none;-moz-user-select:none;user-select:none}textarea.code-input{position:absolute;width:100%;height:100%;min-width:1ex;min-height:1ex;top:0;left:0;right:0;bottom:0;resize:none;color:transparent;caret-color:var(--color-light);background:transparent;z-index:1}div.tabs-container{--tab-dark-background:#222;--tab-light-background:#444;--tab-active-highlight-color:#666;--tab-foreground:#fff;background:var(--tab-dark-background);width:100%;height:100%;display:flex;flex-direction:column}div.tabs-container>div.tabs-body:not(:empty){flex-grow:1;width:100%;background-color:var(--tab-light-background);overflow:scroll;border-top:2px solid var(--tab-light-background)}div.tabs-container>div.tabs-header{width:100%;display:flex;overflow-x:scroll;flex-grow:0;flex-shrink:0;white-space:nowrap}div.tabs-container>div.tabs-header>div{outline:none;color:#fff;margin-top:2px;padding-bottom:2px;display:flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border-radius:1ex 2ex 0 0}div.tabs-container>div.tabs-header>div.tab-head{margin-right:2px;padding:.5ex 1ex}div.tabs-container>div.tabs-header>div.new-tab-button{margin-left:.5ex;margin-right:1ex}div.tabs-container>div.tabs-header>div.tab-head[data-active]{background:var(--tab-light-background)}div.tabs-container>div.tabs-header>div>button{border:0;outline:none;width:2ex;height:2ex;border-radius:50%}div.tabs-container>div.tabs-header>div>button:after{content:"";border-radius:50%;display:block;width:100%;height:100%;background:var(--tab-light-background)}div.tabs-container>div.tabs-header>div.tab-head>button:not([aria-disabled]):after{-webkit-mask:url(/shader-playground-2/_next/static/media/x-icon.54528ef7.svg) no-repeat center center/cover;mask:url(/shader-playground-2/_next/static/media/x-icon.54528ef7.svg) no-repeat center center/cover}div.tabs-container>div.tabs-header>div.new-tab-button>button:after{-webkit-mask:url(/shader-playground-2/_next/static/media/add-icon.acb18aa9.svg) no-repeat center center/cover;mask:url(/shader-playground-2/_next/static/media/add-icon.acb18aa9.svg) no-repeat center center/cover}div.tabs-container>div.tabs-header>div.tab-head>button{margin-left:5px}div.tabs-container>div.tabs-header>div.tab-head[data-active]>button:after{background-color:var(--tab-dark-background)}div.tabs-container>div.tabs-header>div>button:hover{background-color:var(--tab-light-background)}div.tabs-container>div.tabs-header>div>button:not([aria-disabled]):hover:after{background-color:var(--tab-dark-background)}div.tabs-container>div.tabs-header>div.tab-head[data-active]>button:hover{background-color:var(--tab-active-highlight-color)}div.tabs-container>div.tabs-header>div.new-tab-button>button:after{background-color:var(--tab-foreground)!important}.uniforms-editor-tab-top{width:100%;display:flex;margin-bottom:2px;padding:4px 6px;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.uniforms-editor-tab-content{display:flex;flex-direction:column;height:100%}.uniforms-editor-tab-top{flex-shrink:0}.uniforms-editor-tab-content>.js{flex-grow:1}.uniform-type-select>div>div:last-child>div{outline:1px solid #fff;padding:0 3px;z-index:200;position:relative;margin-right:1ex;background-color:var(--tab-light-background)}.uniform-type-select>div>div:last-child>div>span:not(:last-child){border-bottom:1px solid var(--tab-active-highlight-color);padding-right:3ex}.uniforms-editor-tab-top input{margin-right:1ex}.uniforms-editor-tab-top button,.uniforms-editor-tab-top input{outline:1px solid #fff;padding:0 3px}.uniforms-editor-tab-content[data-disabled] :where(input,.uniform-type-select){cursor:not-allowed}.uniform-type-select>div{outline:1px solid #fff}.uniform-type-select>div>div:first-child>span{padding-left:3px}.uniforms-editor-tab-content>.js{overflow-x:scroll;width:100%;padding:1ex}.uniform-type-select{display:flex;margin-right:2ex}