:root{--t:#fff;--m:#8a8a8a;--b:rgba(255,255,255,.14);--a:#c8d2dc}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#000;color:var(--t);font:300 16px/1.7 Inter,system-ui,sans-serif}
a{color:var(--t);text-decoration:none;border-bottom:1px solid var(--b)}a:hover{border-color:var(--t)}.mono,code,pre{font-family:"JetBrains Mono",monospace}
.nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 2rem;background:rgba(0,0,0,.85);border-bottom:1px solid var(--b)}
.nav a{border:0}.brand{font:700 .95rem Rajdhani,sans-serif;letter-spacing:.35em;color:var(--t)}.links{display:flex;gap:1.6rem;flex-wrap:wrap}.links a{font:600 .78rem Rajdhani,sans-serif;letter-spacing:.25em;text-transform:uppercase;color:var(--m)}.links a:hover{color:var(--t)}
main{max-width:1240px;margin:0 auto;padding:0 2rem}section{padding:3.5rem 0;border-bottom:1px solid var(--b)}
.hero{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:6rem 0 4rem}.hero.sm{min-height:0;padding:4.5rem 0 2.5rem}
.kicker{font-size:.72rem;letter-spacing:.3em;color:var(--m);text-transform:uppercase}.kicker a{border:0;color:var(--m)}
h1,h2,h3{font-family:Rajdhani,sans-serif;text-transform:uppercase;font-weight:600}
h1{font-size:clamp(2.4rem,8vw,5.6rem);line-height:1;letter-spacing:.12em;margin:.6rem 0 1.4rem}h1 span{color:var(--m);font-weight:500}
h2{font-size:1.25rem;letter-spacing:.3em;margin:0 0 1.6rem}h2 small{color:var(--m);font-size:.8rem;margin-left:.8rem}h3{letter-spacing:.15em}
.lead{color:#bdbdbd;font-size:1.08rem;max-width:640px}
.btn{display:inline-block;padding:.85rem 2.2rem;border:1px solid var(--t);color:var(--t);font:600 .78rem Rajdhani,sans-serif;letter-spacing:.3em;text-transform:uppercase;margin:.4rem .8rem .4rem 0;transition:background .4s,color .4s}.btn:hover{background:#fff;color:#000}.btn.ghost{border-color:var(--b)}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-top:1px solid var(--b);border-bottom:1px solid var(--b)}.strip span{padding:1.1rem 0;font-size:.7rem;letter-spacing:.25em;color:var(--m)}.strip b{display:block;color:var(--t);font-weight:400;font-size:1.25rem;letter-spacing:.08em;margin-top:.2rem}
.filters{display:flex;flex-wrap:wrap;gap:0;margin-bottom:2rem;border:1px solid var(--b);width:fit-content;max-width:100%}.filters button{font:600 .72rem Rajdhani,sans-serif;letter-spacing:.22em;text-transform:uppercase;padding:.6rem 1.1rem;border:0;border-right:1px solid var(--b);background:transparent;color:var(--m);cursor:pointer}.filters button:last-child{border-right:0}.filters button.on{background:#fff;color:#000}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));border-top:1px solid var(--b);border-left:1px solid var(--b)}
.card{display:block;padding:1.6rem;border:0;border-right:1px solid var(--b);border-bottom:1px solid var(--b);color:var(--t);transition:background .5s}.card:hover{background:#0d0d0d}
.card h3{margin:.8rem 0 .4rem;font-size:1.15rem}.card p{color:var(--m);font-size:.9rem;margin:0 0 1rem}.tag{font:.66rem "JetBrains Mono";letter-spacing:.2em;color:var(--m);text-transform:uppercase}
.st{float:right;font:.64rem "JetBrains Mono";letter-spacing:.15em;text-transform:uppercase;color:var(--m)}.st-live{color:var(--t)}.st-live:before{content:"● ";color:var(--a)}.detail .st{float:none}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}.chips i{font:normal .68rem "JetBrains Mono";padding:.15rem .5rem;border:1px solid var(--b);color:#bdbdbd}
.glass{border:1px solid var(--b);padding:1.6rem}
.detail{display:grid;gap:3rem}@media(min-width:900px){.detail{grid-template-columns:300px 1fr;align-items:start}.detail .glass{position:sticky;top:6rem}}
.detail h3{font-size:.72rem;color:var(--m);letter-spacing:.25em;margin:1.4rem 0 .5rem}.detail h3:first-child{margin-top:0}.detail h2{margin-top:2.5rem}.detail>div>h2:first-child{margin-top:0}
.code{position:relative;margin:1rem 0}.code pre{margin:0;padding:1.2rem;overflow:auto;background:#060606;border:1px solid var(--b);font-size:.82rem;color:#e0e0e0}
.copy{position:absolute;top:.6rem;right:.6rem;font:.66rem "JetBrains Mono";letter-spacing:.15em;text-transform:uppercase;padding:.3rem .7rem;border:1px solid var(--b);background:#000;color:var(--m);cursor:pointer}.copy:hover{color:#fff;border-color:#fff}
p code,li code{border:1px solid var(--b);padding:.05rem .35rem;font-size:.85em}.prose{max-width:860px}.prose h2{margin-top:3rem}
.gallery{display:grid;gap:2px;background:var(--b);border:1px solid var(--b)}.gallery figure{margin:0;background:#000}.gallery a{border:0;display:block}.gallery img{width:100%;display:block}.gallery figcaption{padding:.9rem 1.2rem;font:.7rem "JetBrains Mono";letter-spacing:.15em;text-transform:uppercase;color:var(--m)}
.pipe{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--b)}.pipe span{padding:1.2rem;border-right:1px solid var(--b);font-size:.8rem;letter-spacing:.2em;position:relative}.pipe span:last-child{border-right:0}.pipe span:not(:last-child):after{content:"→";position:absolute;right:.7rem;top:1.2rem;color:var(--m)}.pipe small{color:var(--m);letter-spacing:.05em;font-size:.7rem}
.lb{position:fixed;inset:0;z-index:50;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;cursor:zoom-out}.lb[hidden]{display:none}.lb img{max-width:96vw;max-height:86vh}.lb p{font:.72rem "JetBrains Mono";letter-spacing:.15em;text-transform:uppercase;color:var(--m)}
footer{padding:2.5rem 2rem;text-align:center;font:.68rem "JetBrains Mono";letter-spacing:.2em;text-transform:uppercase;color:var(--m)}footer p{margin:0}
main>*{animation:f 1.2s ease both}@keyframes f{from{opacity:0}to{opacity:1}}
@media(max-width:600px){.nav{padding:1rem 1.2rem;flex-direction:column;align-items:flex-start;gap:.5rem}.links{gap:1rem}main{padding:0 1.2rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}