*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#050505;color:#ffc400;font-family:Source Code Pro,Courier New,monospace;font-size:14px;line-height:1.4;-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset}#app{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#050505;position:relative}.crt-monitor{position:relative;width:95vmin;max-width:900px;aspect-ratio:4 / 3;background:#0a0a0a;border:2px solid #1a1a1a;border-radius:12px;box-shadow:0 0 20px #ffc4000d,0 0 60px #ffc40005,inset 0 0 30px #000c;overflow:hidden}.crt-monitor:before{content:"";position:absolute;bottom:8px;right:20px;width:6px;height:6px;border-radius:50%;background:#00ff41;box-shadow:0 0 6px #00ff41;z-index:20}.crt-monitor:after{content:"PATTERN RETRIEVAL";position:absolute;bottom:6px;left:20px;font-size:8px;color:#2a2a1a;letter-spacing:2px;z-index:20}.crt-screen{position:absolute;top:4px;left:4px;right:4px;bottom:4px;background:#0a0a0a;overflow:hidden}.crt-screen canvas{display:block;width:100%;height:100%}#display-canvas{position:absolute;top:0;left:0;z-index:1}#hud-canvas{position:absolute;top:0;left:0;z-index:2;pointer-events:none}.controls{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}.controls button{background:#1a1a1a;color:#ffc400;border:1px solid #3a3a2a;padding:8px 20px;font-family:Source Code Pro,Courier New,monospace;font-size:12px;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .2s ease}.controls button:hover:not(:disabled){background:#2a2a1a;border-color:#ffc400;box-shadow:0 0 10px #ffc40033}.controls button:disabled{opacity:.3;cursor:not-allowed;color:#665}.controls button.primary{background:#3a2a0a;border-color:#ffc400}.controls button.primary:hover:not(:disabled){background:#5a3a0a;box-shadow:0 0 15px #ffc4004d}.controls button.danger{color:#f22;border-color:#3a0a0a}.controls button.danger:hover:not(:disabled){background:#2a0a0a;border-color:#f22;box-shadow:0 0 10px #f223}.upload-zone{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;cursor:pointer;transition:background .3s ease;background:#0a0a0a99}.upload-zone.drag-over{background:#3c3c1e66;border:2px dashed #ffc400}.upload-zone .upload-icon{font-size:32px;margin-bottom:12px;opacity:.5}.upload-zone .upload-text{color:#887;font-size:12px;letter-spacing:1px}.upload-zone .upload-text strong{color:#ffc400}.upload-zone .upload-hint{color:#554;font-size:10px;margin-top:8px}.upload-error{color:#f22;font-size:11px;margin-top:12px;padding:6px 12px;background:#ff22221a;border:1px solid rgba(255,34,34,.3)}.frame-counter{color:#665;font-size:10px;letter-spacing:1px}input[type=file]{display:none}.heading{text-align:center;margin-bottom:10px;font-size:22px;font-weight:600;color:#00ff41;letter-spacing:3px;text-transform:uppercase;text-shadow:0 0 10px rgba(0,255,65,.4),0 0 30px rgba(0,255,65,.15);line-height:1.3}.heading .heading-sub{display:block;font-size:12px;font-weight:400;color:#ffc400;letter-spacing:2px;text-transform:none;text-shadow:0 0 8px rgba(255,196,0,.3)}.heading .heading-sub a,.credit a{color:#ffc400;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:600;transition:text-shadow .2s}.heading .heading-sub a:hover,.credit a:hover{text-shadow:0 0 12px rgba(255,196,0,.6)}.credit{position:fixed;bottom:8px;left:0;right:0;text-align:center;font-size:11px;color:#3a3a2a;letter-spacing:1px;z-index:100;pointer-events:none}.credit strong{color:#ffc400;font-weight:600;letter-spacing:0}.title-bar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:4px 12px;background:linear-gradient(180deg,rgba(10,10,10,.9) 0%,transparent 100%)}.title-bar .title{font-size:9px;color:#3a3a2a;letter-spacing:2px;text-transform:uppercase}.title-bar .title-controls{display:flex;gap:6px}.title-bar .title-dot{width:8px;height:8px;border-radius:50%;border:1px solid #2a2a1a}@media(max-width:768px){.crt-monitor{max-width:100vw;border-radius:6px}.crt-monitor:after{font-size:6px;bottom:4px;left:10px}.crt-monitor:before{bottom:5px;right:10px;width:4px;height:4px}.title-bar{padding:2px 8px}.title-bar .title{font-size:7px}.title-bar .title-dot{width:6px;height:6px}}@media(max-width:600px)and (orientation:landscape){.crt-monitor{width:85vh;max-width:100vw;border-radius:4px}.controls button{padding:4px 10px;font-size:9px}.controls{gap:6px;margin-top:6px}.frame-counter{font-size:8px}}@media(max-width:500px),(max-height:500px){.crt-monitor{width:100vw;max-width:100vw;border-radius:0;border-left:none;border-right:none;aspect-ratio:1 / 1}.crt-monitor:after{display:none}.crt-monitor:before{width:4px;height:4px;bottom:4px;right:8px}.title-bar .title{font-size:6px}.controls{gap:4px;margin-top:6px;padding:0 4px}.controls button{padding:5px 8px;font-size:9px;letter-spacing:.5px;flex:1;min-width:0;white-space:nowrap}.frame-counter{font-size:8px;width:100%;text-align:center;order:10}.upload-zone .upload-icon{font-size:24px;margin-bottom:8px}.upload-zone .upload-text{font-size:10px}.upload-zone .upload-hint{font-size:8px;margin-top:4px}}@media(max-width:360px){.controls button{padding:4px 6px;font-size:8px}}@media(max-width:600px){.heading{font-size:16px;margin-bottom:6px;letter-spacing:2px}.heading .heading-sub{font-size:10px;letter-spacing:1px}}@media(max-width:500px){.heading{font-size:14px;margin-bottom:4px;letter-spacing:1px}.heading .heading-sub{font-size:9px}}@media(max-width:500px){.credit{font-size:9px;bottom:4px}}