:root{--w:#f5f8ff;--b:#5cc8ff;--v:#a46bff;--m:#8a93ad;--line:rgba(255,255,255,.09)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#000;scroll-behavior:smooth}
body{background:#000;color:var(--w);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--b)}
:focus-visible{outline:2px solid var(--b);outline-offset:3px}
.skip{position:absolute;left:-999px;top:.5rem;background:var(--w);color:#000;padding:.5rem 1rem;z-index:99}.skip:focus{left:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#void{position:fixed;inset:0;z-index:-1;pointer-events:none;background:#000}
/* side rail nav */
.rail{position:fixed;left:0;top:0;bottom:0;width:84px;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1.6rem 0;border-right:1px solid var(--line);background:rgba(0,0,0,.55);backdrop-filter:blur(10px)}
.mark{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,var(--b) 30%,var(--v) 60%,transparent 72%);box-shadow:0 0 24px var(--b);animation:breathe 5s ease-in-out infinite}
.rail ul{list-style:none;display:flex;flex-direction:column;gap:2rem}
.rail ul a{writing-mode:vertical-rl;transform:rotate(180deg);text-decoration:none;color:var(--m);letter-spacing:.35em;font-size:.75rem;font-weight:700;text-transform:uppercase;transition:color .3s,text-shadow .3s}
.rail ul a:hover,.rail ul a[aria-current]{color:var(--w);text-shadow:0 0 12px var(--b)}
.rail small{writing-mode:vertical-rl;transform:rotate(180deg);color:#4a5068;font-size:.65rem;letter-spacing:.3em}
.wrap{margin-left:84px}
main section{padding:7rem 6vw}
@keyframes breathe{50%{box-shadow:0 0 44px var(--v);transform:scale(1.08)}}
/* home hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;padding:0 6vw 9vh!important;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 30%;animation:drift 30s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.6) 40%,transparent 70%),linear-gradient(0deg,#000 0%,transparent 40%)}
@keyframes drift{to{transform:scale(1.08) translateX(-1.5%)}}
.hero-txt{position:relative;z-index:1;max-width:640px}
.kicker{font-size:.75rem;letter-spacing:.5em;text-transform:uppercase;color:var(--b);font-weight:700}
h1{font-size:clamp(3rem,9vw,7.5rem);line-height:.92;font-weight:900;letter-spacing:-.03em;margin:1rem 0 1.4rem}
h1 em,h2 em{font-style:normal;background:linear-gradient(100deg,#fff 10%,var(--b) 45%,var(--v) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(92,200,255,.35))}
.lede{color:#c3c9db;font-size:1.1rem;max-width:30rem}
.cta{display:flex;gap:1.6rem;margin-top:2.2rem;align-items:center;flex-wrap:wrap}
.btn{position:relative;display:inline-block;padding:1rem 2rem;color:#000;background:var(--w);text-decoration:none;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;clip-path:polygon(0 0,100% 0,100% 70%,90% 100%,0 100%);transition:box-shadow .3s,background .3s}
.btn:hover{background:var(--b);box-shadow:0 0 40px var(--b)}
.link{color:var(--w);text-decoration:none;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;border-bottom:1px solid var(--v);padding-bottom:.2rem}
.scroll{position:absolute;right:6vw;bottom:9vh;z-index:1;color:var(--m);font-size:.7rem;letter-spacing:.4em;writing-mode:vertical-rl}
/* streak divider */
.streak{height:1px;margin:0 6vw;background:linear-gradient(90deg,transparent,var(--b),#fff,var(--v),transparent);box-shadow:0 0 18px var(--b)}
/* numbered technique index */
h2{font-size:clamp(2rem,5vw,3.8rem);line-height:1;font-weight:900;letter-spacing:-.02em;margin-bottom:3rem}
.tech{list-style:none;border-top:1px solid var(--line)}
.tech li{display:grid;grid-template-columns:5rem 1fr 1.3fr;gap:2rem;align-items:baseline;padding:2rem 0;border-bottom:1px solid var(--line);transition:background .4s,padding .4s}
.tech li:hover{background:linear-gradient(90deg,rgba(92,200,255,.07),transparent);padding-left:1rem}
.tech .n{font-family:ui-monospace,monospace;color:var(--v)}
.tech h3{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:800}
.tech p{color:var(--m)}
/* split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}
.frame{position:relative;border-radius:2px;overflow:hidden}
.frame::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 80px 20px #000;z-index:1}
.frame img{transition:transform 1.2s}
.frame:hover img{transform:scale(1.05)}
.split p{color:#c3c9db;margin-bottom:1rem;max-width:34rem}
blockquote{font-size:clamp(1.4rem,3vw,2.4rem);font-weight:300;line-height:1.3;text-align:center;max-width:900px;margin:auto}
blockquote cite{display:block;margin-top:1.4rem;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--m);font-style:normal}
/* page header */
.phead{padding:10rem 6vw 4rem!important;position:relative}
.phead .big{position:absolute;right:4vw;top:5rem;font-size:clamp(5rem,18vw,16rem);font-weight:900;color:transparent;-webkit-text-stroke:1px rgba(164,107,255,.25);line-height:1;pointer-events:none;user-select:none}
.phead p{color:var(--m);max-width:36rem}
/* gallery bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:260px;grid-auto-flow:dense;gap:12px;padding-top:0!important}
.tile{position:relative;overflow:hidden;background:#05060c;border:1px solid var(--line);cursor:pointer;padding:0;color:inherit;font:inherit;text-align:left}
.tile img,.tile .css-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s,filter 1s}
.tile:hover img,.tile:hover .css-art,.tile:focus-visible img{transform:scale(1.07);filter:brightness(1.2)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:1.2rem;background:linear-gradient(0deg,rgba(0,0,0,.9),transparent);z-index:1}
.tile .cap b{display:block;font-size:1.05rem}
.tile .cap span{font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--b)}
.w2{grid-column:span 2}.h2{grid-row:span 2}
.ca1{background:radial-gradient(circle at 50% 50%,#fff 0 3%,var(--b) 8%,transparent 30%),repeating-radial-gradient(circle at 50% 50%,transparent 0 18px,rgba(92,200,255,.18) 19px 20px),#000}
.ca2{background:conic-gradient(from 0deg at 50% 50%,#000,var(--v),#000,var(--b),#000,#fff,#000);filter:blur(.5px)}
.ca3{background:linear-gradient(115deg,transparent 45%,rgba(255,255,255,.9) 49.5%,transparent 54%),linear-gradient(115deg,transparent 30%,rgba(92,200,255,.6) 33%,transparent 37%),linear-gradient(115deg,transparent 62%,rgba(164,107,255,.7) 65%,transparent 69%),#000}
.ca2{animation:spin 40s linear infinite;transform-origin:center;inset:-50%!important;width:200%!important;height:200%!important}
@keyframes spin{to{transform:rotate(360deg)}}
dialog{margin:auto;border:1px solid var(--line);background:#000;color:var(--w);max-width:min(92vw,900px);padding:0}
dialog::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(6px)}
dialog img{max-height:80vh;margin:auto}
dialog .bar{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem}
dialog button{background:none;border:1px solid var(--line);color:var(--w);padding:.4rem .9rem;cursor:pointer;font:inherit}
/* news timeline */
.banner{border:1px solid rgba(164,107,255,.5);background:linear-gradient(90deg,rgba(164,107,255,.12),transparent);padding:1rem 1.4rem;margin:0 6vw;font-size:.95rem}
.timeline{position:relative;max-width:980px;padding-top:4rem!important}
.timeline::before{content:"";position:absolute;left:calc(6vw + 7.5rem);top:4rem;bottom:7rem;width:1px;background:linear-gradient(var(--b),var(--v),transparent);box-shadow:0 0 12px var(--b)}
.entry{display:grid;grid-template-columns:7rem 1fr;gap:3rem;margin-bottom:4rem;position:relative}
.entry::before{content:"";position:absolute;left:calc(7.5rem - 6px);top:.4rem;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 14px var(--b),0 0 30px var(--v)}
.entry time{font-family:ui-monospace,monospace;color:var(--m);font-size:.8rem;text-align:right;padding-top:.15rem;padding-right:1.4rem}
.entry h3{font-size:1.6rem;line-height:1.2;margin:.5rem 0}
.entry p{color:#aab2c8}
.pill{display:inline-block;font-size:.65rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;padding:.2rem .6rem;margin-right:.5rem;border:1px solid var(--line)}
.pill.ph{border-color:var(--v);color:#d3b8ff}
footer{border-top:1px solid var(--line);padding:3rem 6vw;color:var(--m);font-size:.82rem}
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s,transform 1s}.reveal.in{opacity:1;transform:none}
@media(max-width:860px){
 .rail{top:auto;right:0;bottom:0;width:auto;height:60px;flex-direction:row;padding:0 1.2rem;border-right:0;border-top:1px solid var(--line)}
 .rail ul{flex-direction:row;gap:1.4rem}.rail ul a,.rail small{writing-mode:horizontal-tb;transform:none;letter-spacing:.2em}.rail small{display:none}
 .wrap{margin-left:0;padding-bottom:60px}
 .hero img{object-position:72% 20%}.hero::after{background:linear-gradient(0deg,#000 15%,rgba(0,0,0,.55) 55%,transparent 85%)}.scroll{display:none}
 main section{padding:4.5rem 6vw}
 .tech li{grid-template-columns:2.5rem 1fr;gap:.4rem 1rem}.tech p{grid-column:2}
 .split{grid-template-columns:1fr}
 .bento{grid-template-columns:1fr 1fr;grid-auto-rows:200px}
 .timeline::before{left:calc(6vw + 4px)}.entry{grid-template-columns:1fr;gap:.5rem;padding-left:2rem}.entry::before{left:-1px}.entry time{text-align:left}
 .phead{padding-top:6rem!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.full{grid-column:1/-1}
.spoil{font-size:.8rem;border-left:2px solid var(--v);padding-left:.8rem;color:#c9b3ff!important}
.credits{border-top:1px solid var(--line);padding:3rem 6vw 1rem}
.credits ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.4rem;margin-top:1.2rem}
.credits b{display:block;font-size:1.05rem}.credits span{color:var(--m);font-size:.8rem}
.fine{font-size:.8rem;color:var(--m);margin-top:1rem}
footer{border-top:0}
.legal{max-width:960px}
.legal article{display:grid;grid-template-columns:4rem 1fr;gap:1.5rem;padding:2.2rem 0;border-top:1px solid var(--line)}
.legal .n{font-family:ui-monospace,monospace;color:var(--v)}
.legal h2{font-size:1.6rem;margin-bottom:.8rem}
.legal p,.legal li{color:#c3c9db}.legal .list{padding-left:1.1rem;display:grid;gap:.5rem}
@media(max-width:860px){.rail ul{gap:1rem}.rail ul a{font-size:.65rem;letter-spacing:.12em}.legal article{grid-template-columns:2.5rem 1fr}}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;padding:0 6vw}
.filters button{background:transparent;border:1px solid var(--line);color:var(--m);padding:.55rem 1.2rem;font:inherit;font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:.3s}
.filters button:hover{color:var(--w);border-color:var(--b)}
.filters button[aria-pressed=true]{background:var(--w);color:#000;border-color:var(--w);box-shadow:0 0 24px rgba(92,200,255,.5)}
.pill.v{border-color:var(--b);color:var(--b)}
.src{display:inline-block;margin-top:.7rem;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-decoration:none;border-bottom:1px solid var(--v);color:var(--w)}
.src:hover{color:var(--b)}
.hidden{display:none!important}.empty{color:var(--m)}

.webring{width:fit-content;margin:1.4rem 0 .4rem;border:1px solid var(--line);text-align:center;background:#000;box-shadow:0 0 24px rgba(92,200,255,.12)}
.webring .wr-t{margin:0;padding:.5rem 1rem;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--m);border-bottom:1px solid var(--line)}
.webring .wr-l{display:flex}
.webring .wr-l a{flex:1;padding:.55rem 1rem;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--w);border-right:1px solid var(--line);transition:.3s;white-space:nowrap}
.webring .wr-l a:last-child{border-right:0}
.webring .wr-l a:hover{color:var(--b);background:rgba(92,200,255,.06)}
@media(max-width:560px){.webring{width:100%}.webring .wr-l{flex-direction:column}.webring .wr-l a{border-right:0;border-top:1px solid var(--line)}}