:root{--shadow-color: 0deg 0% 55%;--shadow-elevation-low: .1px .1px .1px hsl(var(--shadow-color) / .7), .1px .1px .1px -2.2px hsl(var(--shadow-color) / .49), .2px .3px .3px -4.5px hsl(var(--shadow-color) / .29);--shadow-elevation-medium: .1px .1px .1px hsl(var(--shadow-color) / .74), .1px .1px .1px -1.5px hsl(var(--shadow-color) / .57), .4px .5px .5px -3px hsl(var(--shadow-color) / .41), 1.2px 1.4px 1.5px -4.5px hsl(var(--shadow-color) / .25);--shadow-elevation-high: .1px .1px .1px hsl(var(--shadow-color) / .68), .1px .2px .2px -.6px hsl(var(--shadow-color) / .61), .3px .4px .4px -1.3px hsl(var(--shadow-color) / .53), .7px .8px .9px -1.9px hsl(var(--shadow-color) / .46), 1.3px 1.6px 1.7px -2.6px hsl(var(--shadow-color) / .38), 2.4px 3px 3.2px -3.2px hsl(var(--shadow-color) / .3), 4px 4.9px 5.2px -3.9px hsl(var(--shadow-color) / .23), 6.2px 7.7px 8.2px -4.5px hsl(var(--shadow-color) / .15)}html,body{font-family:Fredoka,sans-serif;font-size:16px}html *,body *{box-sizing:border-box}#root,.app{height:100vh;width:100vw}html{background-image:url(background.jpeg);background-size:contain}.app{display:grid;background:hsl(var(--shadow-color)/.5);grid-template-columns:400px 2fr;grid-template-rows:auto auto 1fr 1fr;grid-template-areas:"debug-utils debug-result" "debug-utils debug-output" "debug-scanner debug-output" "debug-canvas debug-output";gap:2rem;padding:2rem 3rem}.app>*{background:rgba(255,255,255,.5);border-radius:.5rem;box-shadow:var(--shadow-elevation-high);display:grid;grid-template-rows:3rem 1fr}.app>*>*{padding:0 1rem;max-width:100%}.app>* header{background:rgb(255,255,255);border-top-right-radius:inherit;border-top-left-radius:inherit;align-items:center;font-weight:500;height:100%;border-bottom:1px solid hsl(var(--shadow-color)/.1);padding:0 1rem;row-gap:1rem;display:flex;justify-content:space-between}.app>*>div{display:flex;align-items:center;justify-content:center}.app>* video,.app>* canvas{border-radius:.5rem}.logger{overflow-y:hidden;padding:0}.logger .parent{height:100%;width:100%;overflow-y:auto;list-style-type:none;padding:0;margin:0}.logger ul{list-style-type:none;padding:0;margin:0}.logger li{padding:0 1rem;border-bottom:1px solid #fff;display:flex;align-items:center}.logger li pre{margin:0;font-size:14px}.utils.utils{display:block}.utils .util-section{margin-top:1rem;margin-bottom:1rem}.utils .util-title{margin-bottom:4px;font-size:18px;font-weight:600}.utils label{display:block}.scanner-animation{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(to right,white 4px,transparent 4px) 0 0,linear-gradient(to right,white 4px,transparent 4px) 0 100%,linear-gradient(to left,white 4px,transparent 4px) 100% 0,linear-gradient(to left,white 4px,transparent 4px) 100% 100%,linear-gradient(to bottom,white 4px,transparent 4px) 0 0,linear-gradient(to bottom,white 4px,transparent 4px) 100% 0,linear-gradient(to top,white 4px,transparent 4px) 0 100%,linear-gradient(to top,white 4px,transparent 4px) 100% 100%;background-repeat:no-repeat;background-size:40px 40px}:root{font-family:Inter,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;-webkit-text-size-adjust:100%}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}}