:root{--bg:#050611;--panel:#0b1023cc;--panel2:#10172f;--cyan:#00f5ff;--pink:#ff2bd6;--yellow:#fcee09;--green:#39ff88;--red:#ff3158;--text:#e8f7ff;--muted:#91a4bd;--line:#263654}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at 20% 0%,#12224a 0,#050611 36%,#02030a 100%);color:var(--text);min-height:100vh;overflow-x:hidden}.city{position:fixed;inset:auto 0 0 0;height:42vh;z-index:-2;opacity:.45;background:linear-gradient(to top,#02030a 0 10%,transparent 70%),linear-gradient(135deg,transparent 0 5%,#111a3b 5% 10%,transparent 10% 20%),repeating-linear-gradient(90deg,transparent 0 40px,#152450 42px 44px,transparent 46px 90px)}.city:before{content:"";position:absolute;bottom:0;left:0;right:0;height:80%;background:linear-gradient(to top,#050611 0 8%,transparent 8%),linear-gradient(90deg,transparent 0 3%,#09122b 3% 7%,transparent 7% 9%,#0d1836 9% 13%,transparent 13% 16%,#09122b 16% 22%,transparent 22% 26%,#0e1d43 26% 34%,transparent 34% 39%,#09122b 39% 45%,transparent 45% 49%,#101d3d 49% 57%,transparent 57% 61%,#08132e 61% 68%,transparent 68% 72%,#0d1939 72% 78%,transparent 78% 83%,#09122b 83% 92%,transparent 92%)}.city:after{content:"OSI MODEL • SUBNETTING • ROUTING • SWITCHING • CCNA 200-301";position:absolute;bottom:20px;left:40px;color:var(--cyan);text-shadow:0 0 12px var(--cyan);letter-spacing:4px;font-size:12px}.scan{pointer-events:none;position:fixed;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 4px);z-index:10}.app{display:grid;grid-template-columns:290px 1fr;min-height:100vh;transition:margin-top .4s cubic-bezier(.2,.8,.4,1)}.side{position:sticky;top:0;height:100vh;padding:18px;background:#060917e8;border-right:1px solid #22385c;overflow:auto}.brand{font-weight:900;font-size:20px;letter-spacing:1px;color:var(--yellow);text-shadow:2px 2px var(--pink),0 0 15px var(--yellow)}.small{color:var(--muted);font-size:12px}.nav button,.btn{width:100%;margin:6px 0;padding:12px;border:1px solid #28446e;background:#0d1530;color:var(--text);cursor:pointer;text-align:left;border-radius:6px;box-shadow:0 0 0 transparent;transition:.15s}.nav button:hover,.btn:hover{border-color:var(--cyan);box-shadow:0 0 18px #00f5ff33}.nav button.active{background:#10294b;border-color:var(--yellow);color:var(--yellow)}main{padding:24px 28px 80px}.hero{border:1px solid #31507e;background:linear-gradient(135deg,#0a1028d9,#160d2dcc);padding:22px;border-radius:14px;box-shadow:0 0 30px #00f5ff16}.hero h1{margin:0;font-size:34px;color:var(--cyan);text-shadow:2px 2px var(--pink)}.grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;margin:18px 0}.card{border:1px solid #263e65;background:var(--panel);border-radius:12px;padding:16px;box-shadow:inset 0 0 30px #0008}.stat{font-size:28px;font-weight:900;color:var(--yellow)}.bar{height:12px;background:#101a31;border:1px solid #2a4269;border-radius:999px;overflow:hidden}.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--cyan),var(--green));width:0}.section{display:none}.section.active{display:block}.panel{border:1px solid #263e65;background:#091024d9;border-radius:12px;padding:18px;margin:16px 0}.pill{display:inline-block;padding:5px 9px;border:1px solid #365783;border-radius:999px;margin:3px;color:#bcecff;font-size:12px}.good{color:var(--green)}.bad{color:var(--red)}.warn{color:var(--yellow)}input,select,textarea{background:#070b19;color:var(--text);border:1px solid #33547c;border-radius:8px;padding:10px;width:100%}textarea{min-height:120px}.qopt{display:block;width:100%;padding:12px;margin:8px 0;text-align:left;border:1px solid #37577c;background:#0b142b;color:var(--text);border-radius:8px;cursor:pointer}.qopt.correct{border-color:var(--green);background:#07351e;color:#caffdf}.qopt.wrong{border-color:var(--red);background:#3b0714;color:#ffd2d9}.qopt:disabled{cursor:default}.refnote{border:1px dashed #456b9b;background:#081326;color:#bcecff;padding:10px;border-radius:8px;margin:12px 0;font-size:13px}.flex{display:flex;gap:10px;flex-wrap:wrap}.flex .btn{width:auto}.toc{columns:2}.item{padding:10px;border-bottom:1px solid #1d3150}.district{border-left:4px solid var(--cyan);padding-left:14px}.hidden{display:none!important}@media(max-width:900px){.app{grid-template-columns:1fr}.side{position:relative;height:auto}.grid{grid-template-columns:1fr 1fr}.toc{columns:1}}@media(max-width:560px){.grid{grid-template-columns:1fr}.hero h1{font-size:26px}}.modal{position:fixed;inset:0;background:#01040bdd;z-index:99;display:none;align-items:center;justify-content:center;padding:20px}.modal.active{display:flex}.modalbox{max-width:900px;width:100%;max-height:88vh;overflow:auto;border:1px solid var(--cyan);background:#070d1f;box-shadow:0 0 35px #00f5ff44;border-radius:14px;padding:20px}.cmgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cmhit{border:1px solid #294a72;background:#09152b;border-radius:10px;padding:12px}.refactions{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}.mini{width:auto!important;padding:8px 10px!important;font-size:12px!important}@media(max-width:700px){.cmgrid{grid-template-columns:1fr}}
.ref-tab{display:none}.dash-tab{display:none}.ref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:14px 0}.layer-row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:6px;margin-bottom:6px;border:1px solid}.layer-n{font-family:monospace;font-size:18px;font-weight:900;min-width:24px;opacity:.45;line-height:1.2}.layer-content strong{display:block;margin-bottom:2px;font-size:13px;font-weight:700}.layer-content span{font-size:12px;color:var(--muted);line-height:1.5}.step-row{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid rgba(255,49,88,.12);border-radius:6px;padding:10px 14px;margin-bottom:6px}.step-n{font-family:monospace;font-size:16px;font-weight:900;color:var(--red);opacity:.45;min-width:20px;line-height:1.2}.step-content strong{display:block;font-size:12px;font-weight:700;color:var(--red);margin-bottom:2px}.step-content p{font-size:12px;color:var(--muted);line-height:1.4}.atk-card{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:6px}.atk-name{font-weight:700;font-size:13px;color:var(--text)}.atk-desc{font-size:12px;color:var(--muted);line-height:1.5}.atk-def{font-size:11px;color:var(--cyan);font-style:italic}.ref-tbl{width:100%;border-collapse:collapse;font-size:12px}.ref-tbl th{background:var(--panel2);color:var(--muted);text-align:left;padding:7px 10px;font-size:11px;letter-spacing:.5px;border-bottom:1px solid var(--line)}.ref-tbl td{padding:7px 10px;border-bottom:1px solid #1d3150;color:var(--text);vertical-align:top}.ref-tbl tr:hover td{background:#0d1530}.sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:12px 0}.sc-card{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:12px}.sc-lang{font-weight:700;font-size:13px;color:var(--yellow);margin-bottom:2px}.sc-ext{font-size:11px;color:var(--cyan);font-family:monospace;margin-bottom:6px}.sc-use{font-size:11px;color:var(--muted);line-height:1.4}.port-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.port-c{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:10px 14px;min-width:110px}.port-n{font-family:monospace;font-size:18px;font-weight:900;color:var(--cyan)}.port-p{font-size:11px;color:var(--muted);margin-top:2px}.flow-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.fnode{background:var(--panel2);border:1px solid rgba(252,238,9,.2);border-radius:8px;padding:12px;min-width:120px;flex:1}.fn-num{font-family:monospace;font-size:10px;color:var(--yellow);opacity:.5;letter-spacing:2px}.fn-t{font-weight:700;font-size:13px;color:var(--yellow);margin-bottom:3px}.fn-d{font-size:11px;color:var(--muted);line-height:1.4}#reference code{font-family:monospace;font-size:11px;color:#b070ff;background:rgba(0,0,0,.3);padding:1px 5px;border-radius:3px}
@keyframes glitch{0%,87%,100%{clip-path:none;transform:none;filter:none}88%{clip-path:polygon(0 18%,100% 18%,100% 34%,0 34%);transform:translate(-3px,0) skewX(4deg);filter:hue-rotate(40deg) brightness(1.3)}89%{clip-path:polygon(0 58%,100% 58%,100% 72%,0 72%);transform:translate(3px,0) skewX(-2deg);filter:saturate(2)}90%{clip-path:polygon(0 5%,100% 5%,100% 12%,0 12%);transform:translate(-1px,0)}91%{clip-path:none;transform:none;filter:none}}
@keyframes chromaShift{0%,85%,100%{text-shadow:2px 2px var(--pink),0 0 15px var(--cyan)}86%{text-shadow:4px 2px rgba(255,0,80,.9),-3px 2px rgba(0,210,255,.9),0 0 28px var(--cyan)}88%{text-shadow:-1px 2px rgba(255,43,214,.7),0 0 10px var(--cyan)}90%{text-shadow:2px 2px var(--pink),0 0 15px var(--cyan)}}
@keyframes neonPulse{0%,100%{box-shadow:0 0 12px #00f5ff1a,inset 0 0 24px #0005}50%{box-shadow:0 0 28px #00f5ff55,0 0 55px #00f5ff1a,inset 0 0 18px #0008}}
@keyframes sectionIn{from{opacity:0;transform:translate(20px,-6px)}to{opacity:1;transform:translate(0,0)}}
@keyframes hudBlink{0%,88%,100%{opacity:1;text-shadow:2px 2px var(--pink),0 0 14px var(--yellow)}90%{opacity:.35;text-shadow:2px 2px var(--pink),0 0 4px var(--yellow)}92%{opacity:1;text-shadow:2px 2px var(--pink),0 0 14px var(--yellow)}}
@keyframes borderFlick{0%,93%,100%{border-color:#28446e}94%{border-color:var(--cyan)}96%{border-color:#28446e}97%{border-color:rgba(0,245,255,.45)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes glitchBar{0%,100%{top:-3px;opacity:0}3%{opacity:.9}25%{top:100vh;opacity:.2}26%{top:-3px;opacity:0}58%{top:-3px;opacity:0}60%{opacity:.7}82%{top:100vh;opacity:0}}
@keyframes bootFlicker{0%{opacity:0}8%{opacity:.85}10%{opacity:0}18%{opacity:.92}20%{opacity:0}30%{opacity:.75}38%{opacity:1}43%{opacity:.2}52%{opacity:1}}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.hero h1{animation:glitch 10s infinite,chromaShift 10s infinite}
.hero{position:relative;animation:neonPulse 4.5s ease-in-out infinite}
.hero::before,.hero::after{content:'';position:absolute;width:22px;height:22px;border-color:var(--cyan);border-style:solid;opacity:.55;pointer-events:none}
.hero::before{top:8px;left:8px;border-width:2px 0 0 2px}
.hero::after{bottom:8px;right:8px;border-width:0 2px 2px 0}
.brand{animation:hudBlink 8s infinite}
.brand::after{content:'▮';animation:blink .9s step-end infinite;color:var(--cyan);font-size:.7em;margin-left:3px}
.section.active{animation:sectionIn .22s cubic-bezier(.2,.8,.4,1) forwards}
.nav button.active{animation:borderFlick 7s infinite}
.panel{position:relative}.panel::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:0;transition:opacity .4s;pointer-events:none}.panel:hover::before{opacity:.5}
.card{animation:cardIn .3s ease-out both}
.glitch-now{animation:glitch .35s ease-out forwards!important;color:var(--cyan)!important}
.glitch-bar{position:fixed;top:-3px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--cyan) 40%,var(--pink) 60%,transparent 100%);animation:glitchBar 9s linear infinite;z-index:9999;pointer-events:none}
body.boot-in{animation:bootFlicker .55s ease-out forwards}
#donate-banner{position:fixed;top:0;left:0;right:0;z-index:10000;background:linear-gradient(90deg,#0a0c1e,#110d28,#0a0c1e);border-bottom:1px solid var(--pink);padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;transform:translateY(-100%);transition:transform .4s cubic-bezier(.2,.8,.4,1);box-shadow:0 2px 24px #ff2bd633}
#donate-banner.visible{transform:translateY(0)}
#donate-banner .db-text{flex:1;font-size:13px;color:var(--text);min-width:200px}
#donate-banner .db-text b{color:var(--pink);text-shadow:0 0 8px var(--pink)}
#donate-banner .db-btn{padding:7px 18px;border:1px solid var(--pink);background:rgba(255,43,214,.12);color:var(--pink);border-radius:6px;cursor:crosshair;font-size:13px;font-weight:700;white-space:nowrap;transition:.15s;text-decoration:none;display:inline-block}
#donate-banner .db-btn:hover{background:rgba(255,43,214,.28);box-shadow:0 0 14px #ff2bd644}
#donate-banner .db-close{background:none;border:none;color:var(--muted);font-size:18px;cursor:crosshair;padding:4px 8px;line-height:1;transition:.15s;flex-shrink:0}
#donate-banner .db-close:hover{color:var(--pink)}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#02030a}::-webkit-scrollbar-thumb{background:linear-gradient(var(--cyan),var(--pink));border-radius:3px}
::selection{background:rgba(0,245,255,.22);color:#fff}
body,button,.nav button,.btn,.qopt{cursor:crosshair}