: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}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}::-webkit-scrollbar{width:.625rem;height:.625rem}::-webkit-scrollbar-thumb{background:#111;border-radius:.3125rem;box-shadow:inset .125rem .125rem .125rem #ffffff40,inset -.125rem -.125rem .125rem #00000040;cursor:default}::-webkit-scrollbar-track{background:#333}::selection{background:#fff;color:#333}html,body{height:100vh;height:100dvh;margin:0;overflow:hidden}body{display:grid;grid-template-rows:calc(100dvh - 4rem) 4rem;font-family:system-ui,sans-serif}canvas,.editor,#controls{grid-row:1;grid-column:1}canvas{--canvas-z-index: -1;width:100%;height:auto;object-fit:contain;background:#000;touch-action:none;z-index:var(--canvas-z-index)}.editor,.overlay,#error{font-family:Courier New,Courier,monospace;background:repeating-linear-gradient(0deg,#000a,#1119,#000a .25rem);padding:1em}.editor{color:#fefefe;tab-size:2;border:none;resize:none}.editor:focus{outline:none}#error{grid-row:2;grid-column:1;margin:0;padding-block:0;padding-top:.5em;color:#b22222;overflow:auto;text-wrap:pretty}#indicator{visibility:hidden;position:absolute;top:calc(var(--top, 0px) - var(--scroll-top, 0px));width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid firebrick;transform:translateY(-25%)}.overlay{position:absolute;top:0;left:0;right:0;margin:0}.editor,.overlay{font-size:1rem;line-height:1.2;white-space:pre}#controls{position:fixed;top:1em;right:2em}.controls{position:relative;display:flex;gap:1.5em;padding:.5em 1.25em;background:#1110;border-radius:4px;font-family:Audiowide,system-ui,sans-serif;letter-spacing:.12em;color:#0a8896;text-transform:uppercase;font-size:20px;text-shadow:0 0 5px #0ff,0 0 10px #0ff,0 0 20px #0ff,0 0 40px rgba(0,255,255,.6)}.controls:before,.controls:after{content:"";position:absolute;z-index:-1;inset:0;transform:scale(.95);border-radius:inherit;opacity:0}.controls:before{background:#aef;animation:pulse 2s infinite}.controls:after{background:#fefefe66;transition:transform .2s ease-in-out}.controls:hover:before,.controls:hover:after{opacity:1}.controls:hover:before{transform:scale(.98);filter:blur(2px)}.controls:hover:after{transform:scale(1.025,1.1)}.controls:hover{background:#1114}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.0125)}to{transform:scale(1)}}.hidden{display:none!important}.opaque{opacity:1!important;background:#111!important}input{all:unset;opacity:.2;filter:saturate(0) invert(1);cursor:pointer;transition:opacity .2s ease-in-out;padding:.25em .5em}input:hover{opacity:1}.icon{text-align:center;line-height:1}#btnToggleView{width:1.25em}#btnToggleView:after{content:"👁"}#btnToggleView:checked:after{content:"✏️"}#btnToggleResolution:after{content:"1️⃣"}#btnToggleResolution:checked:after{content:"2️⃣"}#btnReset:after{content:"⏮️"}