:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;height:100%;box-sizing:content-box}body,div,canvas{margin:0;padding:0}body{display:flex;min-width:100%;min-height:100%}#app{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden}#canvas-container{flex:1;width:100cqw;height:100cqh;display:flex;flex-direction:row;container:canvas-container/size}#gl-canvas{width:100cqw;height:100cqh;background-color:#000}#gl-canvas.shadertoy-low{width:420px;height:236px;margin:auto}#gl-canvas.shadertoy-med{width:640px;height:360px;margin:auto}#gl-canvas.shadertoy-high{width:800px;height:450px;margin:auto}#gl-canvas.square{margin:auto;height:auto;aspect-ratio:1}#user-action-requester{position:absolute;inset:33%;display:flex}#user-action-requester button{margin:auto}#loader-dialog{position:absolute;inset:33%;display:flex;flex-direction:column;align-items:center}#loader-dialog h1{font-size:18px;margin:0}#loader-dialog ul{list-style:none;padding:0;display:flex;flex-direction:column;flex:1;align-items:center}#start-button{font-size:2em}@container canvas-container (aspect-ratio > 1){body{flex-direction:column}#gl-canvas.square{width:auto;height:100cqh}}#control-bar{position:absolute;left:0;right:0;bottom:-100%;transition:bottom .3s ease-in-out;background-color:#e3e3e8;align-content:start;border-top-left-radius:4px;border-top-right-radius:4px;height:fit-content;padding:.3em;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:stretch;align-items:center;color:#000;grid-column-gap:1em}#control-bar button{padding:.2em;width:2em;aspect-ratio:1;cursor:pointer}#control-bar button:disabled{cursor:default}#control-bar .label{font-size:1em;font-weight:700;text-wrap:nowrap;-webkit-user-select:none;user-select:none}#control-bar>div{flex:1}#control-bar #loop-controls{display:flex;grid-column-gap:.3em}#control-bar #loop-controls #play-pause-button.highlight{outline-offset:0;outline:rgba(40,206,40,.8) solid 1px;animation:animateOutline 1.5s ease-out infinite}@keyframes animateOutline{0%{outline-width:1px;outline-offset:0;outline-color:#28ce2800}10%{outline-color:#28ce28bf}50%{outline-width:7px;outline-offset:4px;outline-color:#28ce2800}to{outline-width:7px;outline-offset:4px;outline-color:#28ce2800}}#control-bar #time-label{min-width:4em}#control-bar #resolution-label .resolution{display:inline-block;width:5em}#control-bar #speed-control{display:flex}#control-bar #speed-control .slider{min-width:2em;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}#control-bar #speed-control .slider::-webkit-slider-runnable-track{background-color:#fff;height:.6em;border-radius:.3em}#control-bar #speed-control .slider::-webkit-slider-thumb{box-shadow:none;margin-top:-.3em;cursor:ew-resize}#control-bar #speed-control #speed-label{text-align:right;min-width:50px}#control-bar .other-buttons{display:flex;place-items:center;justify-content:right;grid-column-gap:.3em}#control-bar #volume-control{display:flex;align-items:center}#control-bar div.spacer{flex:10;padding:0}#control-bar #rtcanvas{background-color:#000;height:1.6em;aspect-ratio:1.6}#control-bar #timing-controls{position:relative;display:flex;flex-direction:row;align-items:center}#control-bar #timing-controls #fps-label{width:4em}#control-bar #timing-controls #rendertime-popup{position:absolute;bottom:100%;left:-40%;width:8em;display:flex;flex-direction:column;align-items:center;padding:.3em;background-color:#ffffe0;border:1px solid darkgray;border-radius:5px}#control-bar #timing-controls #rendertime-popup .fps-label{min-width:100%;padding:.1em;text-align:start;font-size:.75em;text-wrap:nowrap;line-height:1em}#control-bar #timing-controls #rendertime-popup .fps-label label{display:inline-block;width:2.5em}#control-bar #timing-controls #rendertime-popup .fps-label span{font-weight:700}#control-bar #timing-controls #rendertime-popup #rtcanvas{background-color:#000;width:100%;height:2.2em}#volume-control{position:relative}#volume-control #volume-slider-popup{position:absolute;left:-.2em;bottom:-.2em;height:1.8em;transform:rotate(-90deg);transform-origin:top left;z-index:5;display:flex;align-items:center;background-color:#d3d3d3;border:1px solid darkgray;border-radius:5px;transition:opacity .3s ease-in-out;opacity:0}#volume-control #volume-slider-popup.visible{opacity:1}