:root{--bg:#000;--panel:rgba(0,229,255,.05);--cyan:#00e5ff;--cyan-dim:#00a8bd;--line:rgba(0,229,255,.28);--text:#cfeff5;--font:"Share Tech Mono","Fira Code",Consolas,"Courier New",monospace}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);overflow-x:hidden;line-height:1.6}
#matrix{position:fixed;inset:0;z-index:0;opacity:.35}
body::after{content:"";position:fixed;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,229,255,.035) 3px 4px)}
.scan{position:fixed;left:0;right:0;height:120px;z-index:4;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(0,229,255,.07),transparent);animation:scan 7s linear infinite}
@keyframes scan{from{top:-120px}to{top:100%}}
.wrap{position:relative;z-index:2;max-width:980px;margin:0 auto;padding:28px 18px 60px}
header{text-align:center;margin-bottom:26px}
.glitch{font-size:clamp(2rem,7vw,3.6rem);color:var(--cyan);letter-spacing:.08em;position:relative;display:inline-block;text-shadow:0 0 12px rgba(0,229,255,.7),0 0 36px rgba(0,229,255,.35)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden}
.glitch::before{color:#ff2bd6;animation:g1 3.2s infinite steps(1);clip-path:inset(0 0 60% 0)}
.glitch::after{color:#fff;animation:g2 3.2s infinite steps(1);clip-path:inset(60% 0 0 0)}
@keyframes g1{0%,90%,100%{transform:translate(0)}92%{transform:translate(-4px,1px)}95%{transform:translate(3px,-1px)}}
@keyframes g2{0%,88%,100%{transform:translate(0)}91%{transform:translate(4px,-1px)}96%{transform:translate(-3px,1px)}}
.typing{color:var(--cyan-dim);min-height:1.6em;margin-top:6px}
.typing::after{content:"▌";animation:blink 1s steps(1) infinite;color:var(--cyan)}
@keyframes blink{50%{opacity:0}}
nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:22px}
nav a{font:inherit;color:var(--cyan);text-decoration:none;border:1px solid var(--line);padding:10px 16px;position:relative;overflow:hidden;z-index:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:color .25s,box-shadow .25s}
nav a::before{content:"";position:absolute;inset:0;background:var(--cyan);transform:translateX(-101%);transition:transform .3s;z-index:-1}
nav a:hover::before,nav a.active::before{transform:translateX(0)}
nav a:hover,nav a.active{color:#000;box-shadow:0 0 18px rgba(0,229,255,.6)}
nav a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.panel{border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(3px);padding:26px;position:relative;box-shadow:0 0 30px rgba(0,229,255,.08) inset;animation:enter .55s cubic-bezier(.2,.8,.2,1)}
@keyframes enter{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.panel::before,.panel::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--cyan)}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
h2{color:var(--cyan);margin-bottom:16px;font-weight:400;font-size:1.5rem;text-shadow:0 0 10px rgba(0,229,255,.5)}
h3{color:var(--cyan);font-weight:400;margin:18px 0 8px}
p{max-width:70ch;margin-bottom:10px}
.links{display:grid;gap:12px}
.links a{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;color:var(--cyan);text-decoration:none;border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,color .25s}
.links a::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,229,255,.35),transparent);transform:skewX(-20deg);transition:left .6s}
.links a:hover::before{left:130%}
.links a:hover{transform:translateX(8px);box-shadow:0 0 18px rgba(0,229,255,.45);color:#fff}
.links a:focus-visible{outline:2px solid #fff}
.bar{margin:12px 0}
.bar span{display:flex;justify-content:space-between;font-size:.9rem}
.bar i{display:block;height:8px;border:1px solid var(--line);margin-top:4px;overflow:hidden}
.bar i b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan-dim),var(--cyan));box-shadow:0 0 12px var(--cyan);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{border:1px solid var(--line);padding:4px 12px;color:var(--cyan);font-size:.85rem;animation:pulse 3s infinite}
.chip:nth-child(2n){animation-delay:.6s}.chip:nth-child(3n){animation-delay:1.2s}
@keyframes pulse{50%{box-shadow:0 0 12px rgba(0,229,255,.55);border-color:var(--cyan)}}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.card{border:1px solid var(--line);padding:16px;transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-5px);box-shadow:0 0 22px rgba(0,229,255,.4);border-color:var(--cyan)}
.card h4{color:var(--cyan);font-weight:400;margin-bottom:6px}
.card small{color:var(--cyan-dim)}
.prog{height:6px;border:1px solid var(--line);margin-top:10px;overflow:hidden}
.prog b{display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 10px var(--cyan);transition:width 1.2s ease}
.done{color:#7dffb0;font-size:.85rem}.done::before{content:"✔ "}
.term{background:#000;border:1px solid var(--cyan);padding:14px;font-size:.92rem;overflow-x:auto;box-shadow:0 0 20px rgba(0,229,255,.2)}
.term .bar-top{color:var(--cyan-dim);margin-bottom:8px}
.cmd{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-bottom:1px dashed rgba(0,229,255,.15)}
.cmd code{color:var(--cyan);flex:1;word-break:break-all}
.cmd em{color:var(--cyan-dim);font-style:normal;flex:1.2}
.cmd button{font:inherit;background:none;border:1px solid var(--line);color:var(--cyan);cursor:pointer;padding:0 8px;transition:.2s}
.cmd button:hover{background:var(--cyan);color:#000}
.cmd:hover{background:rgba(0,229,255,.06)}
#toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,80px);background:var(--cyan);color:#000;padding:8px 18px;z-index:20;transition:transform .3s}
#toast.show{transform:translate(-50%,0)}
.prompt{color:var(--cyan)}
@media(max-width:600px){.cmd{flex-direction:column;gap:2px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}