:root{--bg: #04070f;--cyan: #00e5ff;--magenta: #ff2bd6;--amber: #ffb547;--green: #53ffb0;--text: #d6edf8;--dim: #587a96}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Cascadia Code,JetBrains Mono,Consolas,Courier New,PingFang SC,Microsoft YaHei,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}.scene{position:relative;height:100%}.scene:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 70% 45% at 50% -8%,rgba(0,229,255,.1),transparent 60%),radial-gradient(ellipse 55% 40% at 50% 112%,rgba(255,43,214,.07),transparent 60%)}.starfield{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%}.gridfloor{position:fixed;left:-25%;right:-25%;bottom:-6%;height:46%;z-index:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(0,229,255,.08) 0 1px,transparent 1px 90px),repeating-linear-gradient(0deg,rgba(0,229,255,.08) 0 1px,transparent 1px 56px);transform:perspective(520px) rotateX(62deg);animation:gridmove 9s linear infinite;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 45%,transparent 100%)}@keyframes gridmove{to{background-position:0 0,0 56px}}.scanbeam{position:fixed;left:0;right:0;top:0;height:140px;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(0,229,255,.05),transparent);animation:beam 8s linear infinite}@keyframes beam{0%{transform:translateY(-160px)}to{transform:translateY(110vh)}}.scanlines{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px)}.vignette{position:fixed;top:0;right:0;bottom:0;left:0;z-index:31;pointer-events:none;background:radial-gradient(ellipse at center,transparent 52%,rgba(1,3,8,.6) 100%)}.hud{position:fixed;left:0;right:0;z-index:20;display:flex;justify-content:center;align-items:center;padding:16px 28px;font-size:11px;letter-spacing:.22em;color:var(--dim);text-shadow:0 0 8px rgba(0,229,255,.25)}.hud-top{top:0}.hud-item:before{content:"[ ";color:#00e5ff80}.hud-item:after{content:" ]";color:#00e5ff80}.blink-dot{animation:hudBlink 2.4s steps(1) infinite}@keyframes hudBlink{0%,70%,to{opacity:1}75%,85%{opacity:.25}}.stage{position:relative;z-index:10;height:100%;display:flex;align-items:center;justify-content:center;padding:70px 24px}.query{display:flex;flex-direction:column;align-items:center;text-align:center;animation:rise .7s ease both}.query-box{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 20px;background:#050e1cbf;border:1px solid rgba(0,229,255,.4);box-shadow:0 0 26px #00e5ff1f,inset 0 0 26px #00e5ff0d;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);transition:border-color .25s,box-shadow .25s}.query-box:focus-within{border-color:#00e5fff2;box-shadow:0 0 40px #00e5ff4d,inset 0 0 30px #00e5ff14}.query-caret{color:var(--cyan);font-size:20px;text-shadow:0 0 10px rgba(0,229,255,.8);animation:caretBlink 1.1s steps(1) infinite}@keyframes caretBlink{50%{opacity:.2}}.query-input{width:min(320px,52vw);background:transparent;border:none;outline:none;color:var(--text);font-family:inherit;font-size:21px;letter-spacing:.15em;caret-color:var(--cyan);padding:8px 0}.query-input::placeholder{color:#587a9699;letter-spacing:.3em}.btn-launch{font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.28em;text-indent:.28em;color:#02131c;background:linear-gradient(180deg,#7df8ff,#00cfe8);border:none;padding:14px 26px;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);box-shadow:0 0 22px #00e5ff73;transition:transform .15s,box-shadow .25s,filter .25s}.btn-launch:hover{box-shadow:0 0 38px #00e5ffd9;filter:brightness(1.08);transform:translateY(-1px)}.btn-launch:active{transform:translateY(1px) scale(.98)}.query-error{margin-top:18px;color:var(--amber);font-size:13px;letter-spacing:.18em;text-shadow:0 0 12px rgba(255,181,71,.5)}.corner{position:absolute;width:16px;height:16px;border-color:#00e5ffcc;border-style:solid;border-width:0;pointer-events:none}.corner.tl{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}.corner.tr{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}.corner.bl{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}.corner.br{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}.glitch{position:relative;z-index:0;display:inline-block}.glitch:before,.glitch:after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;text-shadow:none;pointer-events:none}.glitch:before{color:var(--magenta);z-index:-1;animation:glitchA 2.8s infinite steps(1)}.glitch:after{color:var(--cyan);z-index:-2;animation:glitchB 3.4s infinite steps(1)}@keyframes glitchA{0%,88%,94%,to{clip-path:inset(50% 0 50% 0);opacity:0;transform:translate(0)}88.5%{clip-path:inset(8% 0 62% 0);opacity:.85;transform:translate(-5px,-2px)}90%{clip-path:inset(62% 0 6% 0);opacity:.85;transform:translate(5px,2px)}92%{clip-path:inset(35% 0 40% 0);opacity:.85;transform:translate(-3px,1px)}}@keyframes glitchB{0%,80%,90%,to{clip-path:inset(50% 0 50% 0);opacity:0;transform:translate(0)}81%{clip-path:inset(48% 0 30% 0);opacity:.8;transform:translate(4px,1px)}84%{clip-path:inset(12% 0 70% 0);opacity:.8;transform:translate(-4px,-1px)}87%{clip-path:inset(70% 0 12% 0);opacity:.8;transform:translate(3px,-2px)}}.rise{animation:rise .5s ease both}@keyframes rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes holoIn{0%{opacity:0;transform:skew(10deg) scaleX(1.6);filter:blur(16px) brightness(3)}55%{opacity:1;transform:skew(-4deg) scaleX(.96);filter:blur(2px) brightness(1.6)}80%{transform:skew(1deg) scaleX(1.02);filter:blur(0) brightness(1.2)}to{opacity:1;transform:none;filter:none}}.scanfx{position:relative;width:min(880px,94vw);animation:rise .5s ease both}.scanfx-inner{padding:34px 40px 30px;background:#040a1699;border:1px solid rgba(0,229,255,.3);box-shadow:0 0 50px #00e5ff14,inset 0 0 40px #00e5ff0a;clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px)}.scanfx-title{display:block;text-align:center;font-size:clamp(20px,3.4vw,30px);font-weight:700;letter-spacing:.3em;text-indent:.3em;color:#eafcff;text-shadow:0 0 14px rgba(0,229,255,.7);margin-bottom:30px}.scanfx-body{display:flex;gap:44px;align-items:center;justify-content:center}.radar{position:relative;width:230px;height:230px;flex:0 0 auto}.radar-ring{position:absolute;border:1px solid rgba(0,229,255,.28);border-radius:50%}.radar-ring.r1{top:0;right:0;bottom:0;left:0}.radar-ring.r2{top:15%;right:15%;bottom:15%;left:15%;border-color:#00e5ff33}.radar-ring.r3{top:31%;right:31%;bottom:31%;left:31%;border-color:#00e5ff24}.radar-cross-h,.radar-cross-v{position:absolute;background:#00e5ff29}.radar-cross-h{left:0;right:0;top:50%;height:1px}.radar-cross-v{top:0;bottom:0;left:50%;width:1px}.radar-sweep{position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:50%;background:conic-gradient(from 0deg,rgba(0,229,255,.45),rgba(0,229,255,.08) 55deg,transparent 80deg);animation:spin 1.7s linear infinite;filter:drop-shadow(0 0 8px rgba(0,229,255,.5))}@keyframes spin{to{transform:rotate(360deg)}}.blip{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 10px #53ffb0e6;animation:blipFade 2.2s ease-out infinite}.blip.b1{left:30%;top:38%}.blip.b2{left:66%;top:26%;animation-delay:.7s}.blip.b3{left:58%;top:70%;animation-delay:1.4s;background:var(--magenta);box-shadow:0 0 10px #ff2bd6e6}@keyframes blipFade{0%{opacity:0;transform:scale(.4)}12%{opacity:1;transform:scale(1.25)}45%{opacity:.5}to{opacity:0;transform:scale(.6)}}.radar-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:7px 14px;font-size:15px;letter-spacing:.2em;color:#eaffff;background:#020a14eb;border:1px solid rgba(0,229,255,.75);box-shadow:0 0 18px #00e5ff66;white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}.readout{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px;font-size:13px;letter-spacing:.14em}.readout-line{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.readout-line:first-child{color:var(--cyan)}.stream{display:flex;flex-direction:column;gap:5px;margin:8px 0;padding:12px 14px;background:#00e5ff0b;border-left:2px solid rgba(0,229,255,.5);min-height:118px}.stream-row{display:flex;justify-content:space-between;gap:18px;font-size:12.5px;animation:streamFlick .16s steps(2) infinite}@keyframes streamFlick{0%,to{opacity:.92}50%{opacity:.55}}.stream-name{color:#d6edf8d9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stream-tag{color:var(--dim);flex:0 0 auto}.readout-status{color:var(--green);text-shadow:0 0 10px rgba(83,255,176,.35)}.progress{position:relative;height:6px;background:#00e5ff1a;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,rgba(0,229,255,.5),var(--cyan));box-shadow:0 0 14px #00e5ffcc;transition:width .1s linear}.progress-num{color:var(--cyan);font-size:12px;letter-spacing:.3em;text-align:right;text-shadow:0 0 10px rgba(0,229,255,.5)}.scanfx-flash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;pointer-events:none;background:radial-gradient(circle at center,rgba(210,250,255,.95),rgba(0,229,255,.35) 55%,transparent 75%);animation:flashOut .6s ease-out both}@keyframes flashOut{0%{opacity:0}10%{opacity:1}to{opacity:0}}.result{position:relative;width:min(760px,94vw);padding:40px 44px 34px;background:#040a16b8;border:1px solid rgba(0,229,255,.35);box-shadow:0 0 60px #00e5ff1a,inset 0 0 40px #00e5ff0a;clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);animation:holoIn .7s cubic-bezier(.2,.8,.3,1.1) both}.result.is-missing{border-color:#ffb54773;box-shadow:0 0 60px #ffb5471a,inset 0 0 40px #ffb5470a}.result.is-missing .corner{border-color:#ffb547cc}.result.is-missing .result-sigil,.result.is-missing .result-label{color:var(--amber);text-shadow:0 0 12px rgba(255,181,71,.5)}.result.is-missing .result-name{color:#ffe9cf;text-shadow:0 0 14px rgba(255,181,71,.55),0 0 44px rgba(255,181,71,.25)}.result-head{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.22em;color:var(--green);text-shadow:0 0 10px rgba(83,255,176,.4);animation:rise .5s ease .25s both}.result-time{margin-left:auto;color:var(--dim);letter-spacing:.12em}.result-sigil{font-size:16px;animation:hudBlink 2s steps(1) infinite}.result-name{margin:26px 0 8px;font-size:clamp(40px,7.5vw,72px);font-weight:700;letter-spacing:.12em;color:#f1feff;text-shadow:0 0 12px rgba(0,229,255,.6),0 0 40px rgba(0,229,255,.3);animation:holoIn .8s cubic-bezier(.2,.8,.3,1.1) .12s both;word-break:break-all}.result-body{animation:rise .55s ease .4s both}.result-chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}.chip{padding:7px 14px;font-size:14px;letter-spacing:.16em;color:var(--cyan);border:1px solid rgba(0,229,255,.55);background:#00e5ff12;box-shadow:0 0 14px #00e5ff2e;animation:chipIn .45s cubic-bezier(.2,.9,.3,1.4) both}.chip:nth-child(2){animation-delay:.08s}.chip:nth-child(3){animation-delay:.16s}.chip:nth-child(4){animation-delay:.24s}.chip:nth-child(5){animation-delay:.32s}@keyframes chipIn{0%{opacity:0;transform:scale(.7) translateY(6px)}to{opacity:1;transform:none}}.result-soft{margin:22px 0 6px;padding:16px 18px;font-size:clamp(16px,2.6vw,20px);letter-spacing:.12em;color:#ffe3b8;border-left:3px solid rgba(255,181,71,.8);background:#ffb54712;text-shadow:0 0 10px rgba(255,181,71,.3);line-height:1.7}.result-meta{margin-top:16px;font-size:11.5px;letter-spacing:.16em;color:var(--dim);line-height:1.8}.btn-ghost{margin-top:30px;font-family:inherit;font-size:13px;letter-spacing:.22em;text-indent:.22em;color:var(--cyan);background:transparent;border:1px solid rgba(0,229,255,.45);padding:11px 22px;cursor:pointer;transition:background .2s,box-shadow .25s,border-color .2s;animation:rise .5s ease .55s both}.btn-ghost:hover{background:#00e5ff1a;border-color:#00e5ffe6;box-shadow:0 0 22px #00e5ff4d}@media (max-width: 760px){.scanfx-body{flex-direction:column;gap:26px}.radar{width:180px;height:180px}.hud{padding:12px 14px;font-size:9.5px;letter-spacing:.12em}.result{padding:28px 20px 24px}.query-input{font-size:17px;width:min(200px,44vw)}.btn-launch{padding:12px 16px;font-size:13px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
