:root{--back:#0e0f12;--logo:#ffffff05;--text:#ffffff1a;--track:#ffffff0a;--pulse:#ffffff14;--frame:#1a1b1f;--arrow:#ffffff4d;--cross:#ffffff4d;--barcode:#ffffff4d;--polygon-fill:#ffffff0d;--polygon-stroke:#ffffff4d;--alert-stroke:#ffffff80;--alert-fill:#0e0f12e0;--alert-text:#ffffff8c;--alert-username:#ffffffeb;--glitch-r:#ff003ce6;--glitch-c:#00c8ffe6;--glitch-r-mid:#ff003cb3;--glitch-c-mid:#00c8ffb3;--glitch-r-low:#ff003c66;--glitch-c-low:#00c8ff66}html,body{margin:0;padding:0;overflow:hidden}#app{width:100vw;height:100vh}svg{width:100%;height:100%;display:block}.back{fill:var(--back)}.track{fill:var(--track)}.pulse{fill:none;stroke:var(--element-color,var(--pulse));stroke-width:2px;stroke-opacity:0;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px var(--element-color,var(--pulse)));animation:pulse-move var(--duration,12s) linear var(--delay,0s) infinite, pulse-fade var(--duration,12s) linear var(--delay,0s) infinite;transition:stroke 1.5s}.logo{fill:var(--logo);stroke:var(--element-color,var(--pulse));stroke-width:2px;stroke-opacity:0;stroke-linecap:round;stroke-linejoin:round;animation:logo-move var(--duration,24s) linear var(--delay,0s) infinite, pulse-fade var(--duration,24s) linear var(--delay,0s) infinite}.frame{fill:var(--frame);fill-rule:evenodd;clip-rule:evenodd}.arrow{fill:none;stroke:var(--element-color,var(--arrow));stroke-linecap:round;stroke-linejoin:round;animation:arrow-move var(--duration,3s) ease-in-out var(--delay,0s) infinite alternate;transition:stroke 1.5s}.cross{fill:none;stroke:var(--element-color,var(--cross));stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:50%;animation:cross-spin var(--duration,7s) linear 0s infinite;transition:stroke 1.5s}.polygon{fill:var(--polygon-fill);stroke:var(--element-color,var(--polygon-stroke));stroke-width:2px;stroke-opacity:1;stroke-linecap:round;stroke-linejoin:round;animation:polygon-fade var(--duration,7s) cubic-bezier(.445, .05, .55, .95) var(--delay,0s) infinite alternate;transition:fill 1.5s,stroke 1.5s}.barcode{fill:var(--barcode)}.text{fill:var(--text)}@keyframes pulse-move{0%{stroke-dashoffset:0}to{stroke-dashoffset:calc(var(--length) * -1px)}}@keyframes logo-move{0%{stroke-dashoffset:calc(var(--length) * 1px)}to{stroke-dashoffset:calc(var(--length) * -1px)}}@keyframes arrow-move{0%{transform:translate(0)}to{transform:translate(var(--toX,0px), var(--toY,0px))}}@keyframes cross-spin{0%{transform:rotate(0)}to{transform:rotate(var(--rotate,360deg))}}@keyframes pulse-fade{0%{stroke-opacity:0}15%{stroke-opacity:.7}50%{stroke-opacity:1}75%{stroke-opacity:.7}to{stroke-opacity:0}}@keyframes polygon-fade{0%{stroke-opacity:1}to{stroke-opacity:.3}}.alert-bg{fill:var(--alert-fill);stroke:var(--alert-color,var(--alert-stroke));stroke-width:1px;stroke-dasharray:var(--perimeter,1344);stroke-dashoffset:var(--perimeter,1344);animation:.28s ease-out forwards alert-draw}.alert-stripe{fill:var(--alert-color,var(--alert-stroke));transform-box:fill-box;transform-origin:50% 0;animation:.2s ease-out 80ms forwards alert-stripe-in;transform:scaleY(0)}.alert-pad{fill:var(--alert-color,var(--alert-stroke));opacity:0;animation:80ms ease-out .12s forwards alert-text-in}.alert-icon-node{fill:none;stroke:var(--alert-color,var(--alert-stroke));stroke-width:1.5px;opacity:0;animation:.15s ease-out .2s forwards alert-text-in}.alert-icon{fill:var(--alert-color,var(--alert-stroke));text-anchor:middle;dominant-baseline:middle;opacity:0;font-family:monospace,sans-serif;font-size:20px;animation:.15s ease-out .22s forwards alert-text-in}.alert-sep{stroke:var(--alert-color,var(--alert-stroke));stroke-width:1px;stroke-linecap:round;stroke-dasharray:var(--sep-len,64) var(--sep-len,64);stroke-dashoffset:var(--sep-len,64);animation:.16s ease-out .18s forwards alert-sep-draw}.alert-username{fill:var(--alert-username);opacity:0;font-family:monospace,sans-serif;font-size:20px;font-weight:700;animation:.15s ease-out .25s forwards alert-text-in}.alert-label{fill:var(--alert-text);opacity:0;font-family:monospace,sans-serif;font-size:13px;animation:.15s ease-out .31s forwards alert-text-in}.alert-progress{stroke:var(--alert-color,var(--alert-stroke));stroke-width:2px;stroke-linecap:round;stroke-dasharray:var(--progress-len,574) var(--progress-len,574);stroke-dashoffset:0;opacity:0;animation:alert-text-in 50ms linear .28s forwards, alert-progress-drain var(--hold-ms,3s) linear .28s forwards}.alert-hold{animation:1.6s linear infinite alert-glitch-loop}@keyframes alert-glitch-loop{0%,78%,to{filter:none;transform:translate(0)}80%{filter:drop-shadow(-3px 0 0 var(--glitch-r)) drop-shadow(3px 0 0 var(--glitch-c));transform:translate(-2px,1px)}83%{filter:none;transform:translate(3px)}86%{filter:drop-shadow(-4px 0 0 var(--glitch-r-mid)) drop-shadow(4px 0 0 var(--glitch-c-mid));transform:translateY(-1px)}88%{filter:drop-shadow(-1px 0 0 var(--glitch-r-low)) drop-shadow(1px 0 0 var(--glitch-c-low));transform:translate(1px)}91%{filter:none;transform:translate(0)}}.alert-fading,.alert-fading *{animation:.35s ease-in forwards alert-fade-out!important}@keyframes alert-draw{0%{stroke-dashoffset:var(--perimeter,1344)}to{stroke-dashoffset:0}}@keyframes alert-stripe-in{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes alert-sep-draw{0%{stroke-dashoffset:var(--sep-len,64)}to{stroke-dashoffset:0}}@keyframes alert-text-in{0%{opacity:0}to{opacity:1}}@keyframes alert-progress-drain{0%{stroke-dashoffset:0}to{stroke-dashoffset:var(--progress-len,574)}}@keyframes alert-fade-out{0%{opacity:1}to{opacity:0}}.scanlines{pointer-events:none;z-index:10;background:repeating-linear-gradient(#0000 0 3px,#00000014 3px 4px);position:fixed;inset:0}.vignette{animation:8s ease-in-out infinite alternate vignette-breathe}@keyframes vignette-breathe{0%{opacity:.6}to{opacity:.9}}.grain-overlay{mix-blend-mode:overlay;opacity:.18}.data-packet{fill:#ffffffe6;filter:drop-shadow(0 0 4px #fffc)}svg.glitch{animation:.5s steps(5,end) forwards glitch-shift}@keyframes glitch-shift{0%{filter:none;transform:translate(0)}10%{filter:drop-shadow(-3px 0 0 var(--glitch-r-mid)) drop-shadow(3px 0 0 var(--glitch-c-mid));transform:translate(-2px)}20%{filter:none;transform:translate(3px)}35%{filter:drop-shadow(-4px 0 0 var(--glitch-r-mid)) drop-shadow(4px 0 0 var(--glitch-c-mid));transform:translateY(1px)}50%{filter:none;transform:translate(-1px)}65%{filter:drop-shadow(-2px 0 0 var(--glitch-r-low)) drop-shadow(2px 0 0 var(--glitch-c-low));transform:translate(2px)}80%{filter:none;transform:translate(0)}to{filter:none;transform:translate(0)}}#logo-group.logo-glitch{animation:.65s linear forwards logo-glitch}@keyframes logo-glitch{0%{filter:none;opacity:1;transform:translate(0)}12%{filter:drop-shadow(-5px 0 0 var(--glitch-r)) drop-shadow(5px 0 0 var(--glitch-c));opacity:1;transform:translate(-4px)}20%{filter:none;opacity:.6;transform:translate(5px,2px)}30%{filter:drop-shadow(-8px 0 0 var(--glitch-r)) drop-shadow(8px 0 0 var(--glitch-c));opacity:1;transform:translateY(-3px)}42%{filter:none;opacity:.8;transform:translate(3px)}55%{filter:drop-shadow(-4px 0 0 var(--glitch-r-mid)) drop-shadow(4px 0 0 var(--glitch-c-mid));opacity:1;transform:translate(-2px,1px)}68%{filter:none;opacity:.9;transform:translate(2px)}80%{filter:drop-shadow(-2px 0 0 var(--glitch-r-low)) drop-shadow(2px 0 0 var(--glitch-c-low));transform:translate(-1px)}to{filter:none;opacity:1;transform:translate(0)}}.corner-flash{animation:.9s ease-out forwards corner-flash-out}@keyframes corner-flash-out{0%{opacity:.8;stroke-dashoffset:0}30%{opacity:.9}to{opacity:0}}.barcode-scan-line{animation-duration:1.8s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:var(--scan-delay,0s)}@keyframes barcode-scan-y{0%{transform:translateY(0)}to{transform:translateY(calc(var(--scan-range,20) * 1px))}}@keyframes barcode-scan-x{0%{transform:translate(0)}to{transform:translateX(calc(var(--scan-range,20) * 1px))}}
