:root{--cyan:#00d9ff;--cyan2:#5fe9ff;--red:#ff172f;--green:#00e59b;--ink:#01070d;--panel:rgba(2,13,22,.78);--line:rgba(0,205,245,.34)}
*{box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}body{margin:0;background:#01060b;color:#8bc6da;font-family:Consolas,"Courier New",monospace;cursor:default}button,input{font:inherit}
#matrix,.noise,.scanline{position:fixed;inset:0;pointer-events:none}#matrix{width:100%;height:100%;opacity:.32}.noise{z-index:2;opacity:.15;background-image:repeating-radial-gradient(circle at 17% 33%,transparent 0 1px,rgba(255,255,255,.04) 1px 2px);background-size:5px 5px;animation:noise .18s steps(2) infinite}.scanline{z-index:3;background:linear-gradient(transparent 0 49%,rgba(0,216,255,.07) 50%,transparent 51%);background-size:100% 5px;mix-blend-mode:screen;animation:scan 7s linear infinite}
.cyber-shell{position:relative;z-index:4;width:100vw;height:100vh;min-height:640px;padding:2.4vh 2vw 2vh;display:grid;grid-template-columns:19% 1fr 18%;grid-template-rows:5.5% 17% 20% 1fr 16% 5%;gap:1.2vh 1.4vw;background:radial-gradient(circle at 50% 46%,rgba(0,141,189,.14),transparent 35%),linear-gradient(90deg,rgba(0,16,29,.85),rgba(0,4,9,.52),rgba(0,12,22,.86));box-shadow:inset 0 0 12vw #000}
.top-brand{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:18px;font:600 clamp(16px,1.65vw,31px)/1 sans-serif;letter-spacing:.48em;color:#eefaff;text-shadow:0 0 15px rgba(0,211,255,.75)}.mark{font-size:1.4em;color:#fff;filter:drop-shadow(0 0 9px var(--cyan))}
.panel{position:relative;border:1px solid var(--line);background:linear-gradient(180deg,rgba(2,18,29,.88),rgba(1,8,14,.73));box-shadow:0 0 22px rgba(0,187,228,.08),inset 0 0 24px rgba(0,191,230,.04);overflow:hidden;padding:12px;font-size:clamp(8px,.72vw,13px)}.panel:before,.panel:after{content:"";position:absolute;width:12px;height:12px;border-color:var(--cyan);opacity:.7}.panel:before{left:-1px;top:-1px;border-left:2px solid;border-top:2px solid}.panel:after{right:-1px;bottom:-1px;border-right:2px solid;border-bottom:2px solid}.panel-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(0,208,246,.13);padding-bottom:7px;margin-bottom:8px;letter-spacing:.04em}.panel-head strong{font-weight:600;color:#8fb6c4}.panel-head em{font-style:normal;color:var(--green);font-size:.85em}.panel-head .win{color:#6a9aaa}.panel b,.panel .red,.panel-head strong b{color:var(--red)}.panel p{margin:.42em 0}.dim{opacity:.55}.mono-list{display:grid;gap:.25em}.blocks{letter-spacing:2px}.progress,.mini-progress{height:12px;border:1px solid rgba(255,23,47,.55);padding:2px;margin:7px 0 12px;background:#02070c}.progress i,.mini-progress i{display:block;height:100%;width:20%;background:repeating-linear-gradient(90deg,var(--red) 0 8px,transparent 8px 11px);filter:drop-shadow(0 0 5px var(--red));transition:width .3s}.progress.red i{width:58%}.mini-progress{height:8px;margin-top:4px}.mini-progress i{animation:mini 3.3s ease-in-out infinite}
pre{margin:0;white-space:pre-wrap;line-height:1.42;color:#718e9b;overflow:hidden}.p-packet pre,.p-intrusion pre{color:#ff3548}.p-exploit pre{color:#8aa7b5}.p-scramble pre{color:#6f96a7}
.p-init{grid-column:1;grid-row:2}.p-packet{grid-column:1;grid-row:3}.p-map{grid-column:1;grid-row:4}.p-process{grid-column:1;grid-row:5}.p-exploit{grid-column:3;grid-row:2}.p-brute{grid-column:3;grid-row:3}.p-scramble{grid-column:3;grid-row:4}.p-connection{grid-column:3;grid-row:5}.p-intrusion{grid-column:2;grid-row:5}
.hero{grid-column:2;grid-row:2/5;position:relative;display:grid;place-items:center;overflow:hidden}.hero:before{content:"";position:absolute;inset:3% 0;background:linear-gradient(90deg,transparent,rgba(0,217,255,.04),transparent),repeating-linear-gradient(0deg,transparent 0 12px,rgba(0,188,238,.025) 13px);mask-image:radial-gradient(ellipse at center,#000 10%,transparent 70%)}
.hero h1{position:relative;z-index:5;margin:11vh 0 0;font:900 clamp(72px,10.6vw,202px)/.85 Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;letter-spacing:-.035em;color:#edfaff;text-shadow:-5px 0 0 rgba(0,205,255,.35),5px 0 0 rgba(255,0,35,.32),0 0 20px rgba(196,241,255,.44);transform:scaleY(1.18);animation:glitch 2.6s infinite}.hero h1 span{display:inline-block;position:relative}.hero h1 span:nth-child(3n){animation:letter 3.2s steps(2) infinite}.hero h1 .red-letter{color:var(--red);font-size:.55em;transform:translateY(.14em);text-shadow:0 0 13px var(--red)}[data-gate]{cursor:default;outline:none}
.hero h1:before,.hero h1:after{content:"TERHACKED";position:absolute;inset:0;overflow:hidden;pointer-events:none}.hero h1:before{color:rgba(0,222,255,.55);clip-path:inset(9% 0 71% 0);transform:translate(-9px,2px)}.hero h1:after{color:rgba(255,20,45,.45);clip-path:inset(63% 0 14% 0);transform:translate(10px,-2px)}.reflection{position:absolute;z-index:2;top:61%;font:900 clamp(72px,10.6vw,202px)/1 Impact,sans-serif;color:rgba(145,224,247,.07);transform:scaleY(-.35);filter:blur(3px);mask-image:linear-gradient(#000,transparent 72%)}
.skull{position:absolute;z-index:1;top:5%;width:min(27vw,470px);aspect-ratio:.78;border:1px solid rgba(0,224,255,.12);border-radius:47% 47% 38% 38%;filter:drop-shadow(0 0 13px rgba(0,211,255,.2));background:radial-gradient(ellipse at 34% 39%,rgba(0,204,255,.13) 0 9%,transparent 10%),radial-gradient(ellipse at 66% 39%,rgba(0,204,255,.13) 0 9%,transparent 10%),repeating-linear-gradient(78deg,transparent 0 13px,rgba(0,212,255,.035) 14px 15px)}.skull:after{content:"";position:absolute;left:27%;right:27%;bottom:-13%;height:27%;border:1px solid rgba(0,224,255,.12);clip-path:polygon(0 0,100% 0,86% 100%,14% 100%)}.eye{position:absolute;top:36%;width:17%;height:13%;border:1px solid rgba(0,224,255,.25);transform:rotate(8deg);box-shadow:inset 0 0 12px rgba(0,204,255,.12)}.e1{left:23%}.e2{right:23%;transform:rotate(-8deg)}.nose{position:absolute;left:46%;top:51%;width:8%;height:10%;border-left:1px solid rgba(0,224,255,.25);border-right:1px solid rgba(0,224,255,.25);clip-path:polygon(50% 0,100% 100%,0 100%)}
.radar{position:absolute;left:10%;top:17%;width:42%;aspect-ratio:1;border:1px solid rgba(0,221,255,.38);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 17%,rgba(0,208,245,.1) 18% 19%,transparent 20% 34%)}.radar:after{content:"";position:absolute;inset:50% 0 auto 50%;height:1px;background:rgba(0,229,255,.5);transform-origin:left;animation:radar 3s linear infinite}.radar i{position:absolute;inset:17%;border:1px solid rgba(0,218,255,.14);border-radius:50%}.nodes{position:absolute;right:8%;top:18%;display:grid;gap:8px}.nodes span:before{content:"NODE_0" counter(node) " // ";counter-increment:node}.nodes{counter-reset:node}.nodes span:nth-child(4){color:var(--green)}.p-map small{position:absolute;left:10%;bottom:27px;color:var(--red)}.p-map .mini-progress{position:absolute;left:10%;bottom:8px;width:72%}
#spark{width:100%;height:48px}.conn-row{display:grid;grid-template-columns:1fr 75px auto;gap:7px;align-items:center;margin:9px 0}.conn-row i{height:7px;background:repeating-linear-gradient(90deg,var(--red) 0 7px,transparent 7px 10px);animation:pulse 1.1s infinite}.conn-row b{color:#84aab7;font-weight:400}
footer{grid-column:1/-1;grid-row:6;display:flex;justify-content:center;align-items:center;gap:30px;position:relative;color:#92afbb;letter-spacing:.2em;font-size:clamp(9px,.8vw,14px)}footer b{position:absolute;top:-17px;color:#7a99a6;font-weight:400}footer span:first-child,footer span:last-of-type{color:var(--red)}
@keyframes glitch{0%,91%,100%{transform:scaleY(1.18) translate(0)}92%{transform:scaleY(1.18) translate(-4px,1px)}93%{transform:scaleY(1.18) translate(6px,-1px)}94%{transform:scaleY(1.18) translate(-2px)}}@keyframes letter{0%,97%,100%{transform:translate(0)}98%{transform:translateY(-4px) skewX(7deg)}}@keyframes scan{to{transform:translateY(10px)}}@keyframes noise{50%{transform:translate(1px,-1px)}}@keyframes radar{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.35}}@keyframes mini{0%,100%{width:18%}50%{width:95%}}
@media(max-width:900px){html,body{overflow:auto;background:#01070d}.cyber-shell{min-height:100svh;height:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto auto minmax(48vh,1fr) auto auto auto;padding:16px;gap:10px}.top-brand{grid-column:1/-1;grid-row:1;height:42px}.hero{grid-column:1/-1;grid-row:3;min-height:48vh}.hero h1{font-size:clamp(52px,15vw,132px);margin-top:9vh}.skull{width:min(58vw,390px)}.p-init{grid-column:1;grid-row:2}.p-exploit{grid-column:2;grid-row:2}.p-packet{grid-column:1;grid-row:4}.p-brute{grid-column:2;grid-row:4}.p-map{grid-column:1;grid-row:5;min-height:230px}.p-scramble{grid-column:2;grid-row:5;min-height:230px}.p-process{grid-column:1;grid-row:6}.p-connection{grid-column:2;grid-row:6}.p-intrusion{grid-column:1/-1;grid-row:7;min-height:150px}footer{grid-row:8}.panel{font-size:10px}}
@media(max-width:620px){.cyber-shell{display:block;padding:10px}.top-brand{height:54px}.hero{min-height:54svh}.hero h1{font-size:17vw}.panel{margin:8px 0;min-height:160px}.p-map{min-height:250px}.p-intrusion{min-height:180px}footer{height:55px}.p-packet,.p-map,.p-scramble,.p-process,.p-connection{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important}}