:root{--p:#8b3dff;--t:#14e0c8;--bg:#000;--fg:#e9e7f2;--mut:#9a96ad}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(40% 35% at 30% 20%,rgba(139,61,255,.22),transparent 70%),radial-gradient(40% 35% at 75% 70%,rgba(20,224,200,.14),transparent 70%)}
a{color:var(--t)}.wrap{max-width:820px;margin:0 auto;padding:2rem 1.25rem}
header nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
header a.brand{font-weight:700;text-decoration:none;color:var(--fg);letter-spacing:.08em}
nav .links a{margin-left:1rem;color:var(--mut);text-decoration:none}nav .links a:hover{color:var(--t)}
.hero{text-align:center;padding:2rem 0 3rem}.hero img{width:min(340px,75vw);height:auto;filter:drop-shadow(0 0 40px rgba(139,61,255,.35))}
h1{font-size:clamp(2rem,6vw,3.2rem);margin:.5rem 0 0;background:linear-gradient(90deg,var(--p),var(--t));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.06em}
.tag{color:var(--mut);text-transform:uppercase;letter-spacing:.2em;font-size:.85rem}
.about{max-width:560px;margin:1.5rem auto;font-size:1.1rem}
.btn{display:inline-block;margin-top:1rem;padding:.8rem 1.6rem;border-radius:999px;background:linear-gradient(90deg,var(--p),var(--t));color:#000;font-weight:700;text-decoration:none}
.card{border:1px solid rgba(139,61,255,.35);border-radius:14px;padding:1.5rem;background:rgba(15,10,25,.6)}
.doc h1{text-align:left}.doc h2{color:var(--t);font-size:1.15rem;margin-top:1.8rem}
.todo{background:rgba(255,200,0,.12);border:1px dashed #e6b800;padding:.1rem .4rem;border-radius:4px;color:#ffd54a}
footer{color:var(--mut);font-size:.85rem;text-align:center;padding:2rem 0}footer a{color:var(--mut);margin:0 .5rem}
@media(max-width:520px){nav .links a{margin:0 .8rem 0 0}}