@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;700&display=swap";@import"https://db.onlinewebfonts.com/c/5f21b8d13dad527377311ec2d5388bdf?family=Ndot+55";:root{--nothing-red: #d71921;--nothing-white: #fff;--nothing-black: #000}*{box-sizing:border-box}body{align-items:center;background-color:var(--nothing-black);color:var(--nothing-white);display:grid;font-family:JetBrains Mono,monospace;grid-template-rows:auto auto 1fr auto;height:100vh;justify-content:center;margin:0;min-height:100vh;overflow:hidden;padding:1rem}h1{font-family:"Ndot 55",sans-serif;font-size:clamp(1.5rem,8vw,4rem);font-weight:700;grid-row:1;letter-spacing:-2px;margin:1rem 0;text-align:center;-webkit-user-select:none;user-select:none}h1>span{color:var(--nothing-red)}.hidden{display:none}.btns{align-items:center;display:flex;flex-wrap:wrap;gap:10px;grid-row:2;justify-content:center;margin:.5rem 0}.menu-buttons{background-color:var(--nothing-white);border:none;color:var(--nothing-black);cursor:pointer;font-family:"Ndot 55",sans-serif;font-size:clamp(.8rem,2vw,1rem);font-weight:600;height:35px;padding:0 .5rem;text-align:center;transition:all .3s;width:clamp(100px,20vw,125px)}.menu-buttons:hover{background-color:var(--nothing-red);color:var(--nothing-white)}.footer{align-items:center;color:#ffffff7f;display:flex;font-family:"Ndot 55",sans-serif;font-size:clamp(.7rem,2vw,1rem);font-weight:300;gap:8px;grid-row:4;justify-content:center;letter-spacing:2px;margin:.5rem 0;place-self:center;text-decoration:none;text-transform:uppercase;transition:all .3s ease;will-change:transform,color;z-index:10}.footer:hover{color:var(--nothing-red);filter:drop-shadow(0 0 8px rgb(255 0 0 / 40%));transform:translateY(-3px)}.footer svg{height:clamp(16px,3vw,20px);opacity:.8;width:clamp(16px,3vw,20px)}#feed{align-items:center;display:flex;flex-wrap:wrap;gap:20px;grid-row:3;height:100%;justify-content:center;overflow:hidden;padding:2rem 1rem;position:relative;width:100%}#ascii-canvas{filter:contrast(1.2) brightness(1.1);height:auto;max-height:clamp(210px,80vh,480px);max-width:clamp(280px,45vw,640px);object-fit:contain;transition:all .3s;width:auto;z-index:1}#webcam{height:auto;max-height:clamp(210px,80vh,480px);max-width:clamp(280px,45vw,640px);transform:scaleX(-1);transition:all .3s}@media(min-width:769px){#webcam.hidden~#ascii-canvas,#feed:has(#webcam.hidden) #ascii-canvas{height:auto;max-height:clamp(400px,55vh,800px);max-width:none;width:clamp(640px,85vw,1400px)}}#output{color:var(--nothing-white);font-size:.6vw;letter-spacing:.23vw;line-height:.555vw;position:relative;text-align:center;text-shadow:0 0 2px rgb(255 255 255 / 20%);transform:scaleX(-1);transition:all .3s;white-space:pre;z-index:1}.viewfinder{border:1px solid rgb(255 255 255 / 10%);inset:clamp(10px,2vw,25px);margin:clamp(60px,10vh,100px) clamp(.5rem,2vw,1rem) clamp(30px,5vh,50px);pointer-events:none;position:fixed;z-index:10}.corner{border:2px solid var(--nothing-white);height:clamp(15px,3vw,20px);position:absolute;width:clamp(15px,3vw,20px)}.top-left{border-bottom:0;border-right:0;left:-2px;top:-2px}.top-right{border-bottom:0;border-left:0;right:-2px;top:-2px}.bottom-left{border-right:0;border-top:0;bottom:-2px;left:-2px}.bottom-right{border-left:0;border-top:0;bottom:-2px;right:-2px}.status-bar{align-items:center;display:flex;font-size:clamp(10px,2vw,12px);gap:8px;left:clamp(10px,2vw,20px);position:absolute;top:clamp(10px,2vw,20px)}.label{font-family:"Ndot 55",sans-serif;font-size:clamp(.8rem,2vw,1rem)}.rec-dot{background:var(--nothing-red);border-radius:50%;height:clamp(6px,1.5vw,8px);opacity:.2;transition:opacity .3s;width:clamp(6px,1.5vw,8px)}.rec-dot.active{animation:blink 1s infinite;opacity:1}.metadata{bottom:clamp(10px,2vw,20px);display:flex;flex-wrap:wrap;font-size:clamp(8px,1.5vw,10px);gap:clamp(10px,2vw,20px);opacity:.5;position:absolute;right:clamp(10px,2vw,20px)}#boot-overlay{align-items:center;background-color:#000;display:flex;inset:0;justify-content:center;padding:1rem;pointer-events:none;position:fixed;z-index:9999}.boot-terminal{color:#fff;font-family:"Ndot 55",monospace;font-size:clamp(2rem,8vw,4rem);font-weight:700;letter-spacing:-2px;text-align:center;text-transform:uppercase}#cursor{animation:blink .8s step-end infinite;color:var(--nothing-red);font-family:"Ndot 55",monospace;margin-left:5px}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@media(max-width:768px){body{padding:.5rem}h1{font-size:clamp(1.2rem,6vw,2rem);margin:.5rem 0}.btns{gap:8px}.menu-buttons{font-size:.75rem;height:30px;width:90px}#feed{flex-direction:column;gap:15px;padding:.5rem}#webcam{max-height:40%;max-width:90%}#ascii-canvas{max-height:50%;max-width:95%}#feed:has(#webcam.hidden) #ascii-canvas{max-height:85%;max-width:98%}.viewfinder{inset:8px;margin:80px .5rem 30px}.metadata{flex-direction:column;font-size:8px;gap:5px}.footer{font-size:.7rem;gap:6px}}@media(max-width:480px){.menu-buttons{font-size:.65rem;height:28px;width:70px}.btns{gap:5px}.metadata span{font-size:7px}}@media(max-height:500px)and (orientation:landscape){body{grid-template-rows:auto auto 1fr auto}h1{font-size:1.5rem;margin:.3rem 0}.btns{margin:.3rem 0}.menu-buttons{height:28px}#feed{flex-direction:row}.viewfinder{margin:40px .5rem 20px}.footer{margin:.3rem 0}}