@layer default{body{width:100vw;height:100vh;margin:0}#root{width:100%;height:100%;overflow-y:hidden}div#shader-controls{position:fixed;bottom:10px;left:0}div#shader-controls button{background:0 0;border:none;margin:5px 10px}div#shader-controls button>svg{fill:#ffffff4d;stroke:#0000004d;width:auto;height:75px;transition:transform .2s,fill .2s}div#shader-controls button>svg:hover{fill:#fff;transform:scale(1.1)}div#shader-controls button:first-of-type{left:0}div#shader-controls button:nth-of-type(2){left:50px}#error,#shader-error{z-index:10;width:300px;height:400px;position:fixed;top:0;left:0}#loading{z-index:1000;position:fixed;top:0;left:0}#shader-code{height:var(--code-view-height);right:0;top:calc(100vh - var(--code-view-button-height));flex-direction:column;transition:top 1s;display:flex;position:fixed}#shader-code button#shader-show{height:var(--code-view-button-height);border:unset;border-top-left-radius:10px;border-top-right-radius:10px;align-self:flex-end;width:70px;margin:0 0 2px;right:0}#shader-code button#shader-copy{z-index:20;top:var(--code-view-button-height);border:unset;background:0 0;width:20px;height:20px;position:absolute;right:10px}#shader-code button#shader-copy svg{width:auto;height:100%}#shader-code button#shader-copy svg #p0{fill:gray;transition:fill .3s}#shader-code button#shader-copy svg:hover #p0{fill:#12daab}#shader-code pre{height:var(--code-view-text-height);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background-color:#fffc;width:max-content;max-width:100vw;margin:0;padding:10px;overflow:scroll}#shader-code.shown{top:calc(100vh - var(--code-view-height))}#info{position:fixed;top:5px;left:5px}#info button{background:0 0;border:none}#info svg{width:30px;height:30px}#info svg path{fill:#ffffffe6;transition:fill .2s}#info svg:hover path{fill:#fff}#screenshot{position:fixed;top:60px;left:5px}#screenshot button{background:0 0;border:none}#hide-ui{position:fixed;top:5px;right:5px}#hide-ui button{background:0 0;border:none}#info-modal-container{z-index:30;background:0 0;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}#info-modal-container #info-modal{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:#fff9;border-radius:.6em;flex-direction:column;width:80%;height:80%;padding:1em;display:flex;position:relative;overflow-y:scroll}#info-modal-container #info-modal button#info-modal-exit{border:unset;background:0 0;width:30px;height:30px;position:absolute;top:1em;right:1em}#info-modal-container #info-modal button#info-modal-exit svg path{transition:fill .2s}#info-modal-container #info-modal button#info-modal-exit svg:hover path{fill:red}#info-modal-container #info-modal footer{align-self:center}}@layer utility{.invisible{display:none}.fill-grey svg path{fill:#80808060}.svg-button{transition:transform .2s}.svg-button svg{width:40px;height:40px}.svg-button svg path{fill:#ffffff4d;stroke:#0000004d;stroke-width:20px;transition:fill .2s}.svg-button svg:hover path{fill:#fff}.svg-button:hover{transform:scale(1.1)}}:root{--code-view-height:75vh;--code-view-button-height:5vh;--code-view-text-height:calc(var(--code-view-height) - var(--code-view-button-height))}