*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0a0a0a;--bg2:#111;--surface:rgba(255,255,255,.04);--border:rgba(255,255,255,.08);
--border-v:rgba(180,0,255,.25);--violet:#cc00ff;--violet-dim:rgba(204,0,255,.12);--violet-glow:rgba(204,0,255,.25);
--white:#f5f5f5;--text:#e8e8e8;--text2:#888;--font-mono:'Space Mono',ui-monospace,monospace;--font-body:'Outfit',system-ui,sans-serif;
--radius:12px;--radius-sm:6px}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--violet);text-decoration:none}
.wrap{max-width:860px;margin:0 auto;padding:0 1.5rem}
nav{border-bottom:1px solid var(--border);padding:1.1rem 0;position:sticky;top:0;background:rgba(10,10,10,.85);backdrop-filter:blur(10px);z-index:10}
nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.logo{font-family:var(--font-mono);font-size:.9rem;color:var(--white)}
.logo span{color:var(--violet)}
.back{font-family:var(--font-mono);font-size:.8rem;color:var(--text2);min-height:44px;display:inline-flex;align-items:center}
.back:hover{color:var(--violet)}
header.hero{padding:4rem 0 2.5rem;border-bottom:1px solid var(--border)}
.tag{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);margin-bottom:1rem}
.tag::before{content:"// "}
h1{font-size:clamp(2rem,6vw,3.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.08;color:var(--white);margin-bottom:.6rem}
.sub{font-size:1.05rem;color:var(--text2);max-width:60ch}
.meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.chip{font-family:var(--font-mono);font-size:.72rem;color:var(--violet);border:1px solid var(--border-v);
background:var(--violet-dim);padding:.4rem .7rem;border-radius:var(--radius-sm)}
.visit{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;min-height:44px;
font-family:var(--font-mono);font-size:.85rem;border:1px solid var(--border-v);background:var(--violet-dim);
padding:.7rem 1.2rem;border-radius:var(--radius-sm);color:var(--white)}
.visit:hover{background:var(--violet-glow);border-color:var(--violet)}
section{padding:2.8rem 0;border-bottom:1px solid var(--border)}
h2{font-size:1.35rem;font-weight:700;color:var(--white);margin-bottom:1rem;letter-spacing:-.01em}
p{margin-bottom:1rem;max-width:68ch}
ul{list-style:none;margin:.5rem 0 1rem}
li{padding-left:1.4rem;position:relative;margin-bottom:.55rem;max-width:68ch}
li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;background:var(--violet);border-radius:50%}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.2rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem}
.card h3{font-size:.95rem;color:var(--white);margin-bottom:.4rem}
.card p{font-size:.9rem;color:var(--text2);margin:0}
.stack-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.pill{font-family:var(--font-mono);font-size:.72rem;color:var(--violet);border:1px solid var(--border-v);
background:var(--violet-dim);padding:.35rem .65rem;border-radius:var(--radius-sm)}
footer{padding:2.5rem 0 3.5rem;text-align:center}
footer a{font-family:var(--font-mono);font-size:.85rem;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:600px){header.hero{padding:2.5rem 0 2rem}section{padding:2rem 0}}