:root{--bg:#09090a;--fg:#f5f5f6;--dim:#a0a0a6;--inv:#09090a;--g1:rgba(255,255,255,.14);--g2:rgba(255,255,255,.04);--gb:rgba(255,255,255,.16);--hi:rgba(255,255,255,.4);--sh:rgba(0,0,0,.45);--b1:rgba(255,255,255,.28);--b2:rgba(150,150,160,.3);--b3:rgba(90,90,100,.4);
    box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme="light"]{--bg:#e9e9ea;--fg:#111;--dim:#5e5e64;--inv:#f5f5f6;--g1:rgba(255,255,255,.7);--g2:rgba(255,255,255,.3);--gb:rgba(255,255,255,.9);--hi:rgba(255,255,255,1);--sh:rgba(40,40,50,.18);--b1:rgba(255,255,255,.9);--b2:rgba(120,120,130,.3);--b3:rgba(60,60,70,.25)}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 "Bricolage Grotesque",system-ui,sans-serif;overflow-x:hidden}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px}
.blob{position:fixed;border-radius:50%;filter:blur(70px);z-index:-1;animation:drift 18s ease-in-out infinite alternate}
.b1{width:46vw;height:46vw;background:var(--b1);top:-8vw;left:-8vw}
.b2{width:40vw;height:40vw;background:var(--b2);top:35vh;right:-10vw;animation-duration:23s}
.b3{width:50vw;height:50vw;background:var(--b3);bottom:-18vw;left:25vw;animation-duration:27s}
@keyframes drift{to{transform:translate(9vw,7vh) scale(1.25)}}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
.glass{position:relative;background:linear-gradient(135deg,var(--g1),var(--g2));backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--gb);box-shadow:inset 0 1px 0 var(--hi),inset 0 -1px 0 rgba(255,255,255,.05),0 24px 50px -12px var(--sh);overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,20%) var(--my,0%),var(--hi),transparent 60%);opacity:.35;pointer-events:none;transition:opacity .3s}
.glass:hover::before{opacity:.6}
nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 10px);z-index:5;margin:10px auto 0;max-width:960px;border-radius:999px}
nav .in{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 8px 22px}
nav a{color:var(--dim);text-decoration:none;margin-left:16px;transition:color .2s}
nav a:hover{color:var(--fg)}
button,.btn{font:inherit;cursor:pointer;border-radius:999px;color:var(--fg);padding:9px 20px;text-decoration:none;display:inline-block}
.btn.main{background:var(--fg);color:var(--inv);font-weight:500;border:0;position:relative;overflow:hidden}
.btn.main::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:shine 3.5s infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
a:focus-visible,button:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
header{padding:80px 0 40px}
h1{font-size:clamp(50px,11vw,118px);line-height:.96;letter-spacing:-.045em;margin:0 0 22px;font-weight:800}
.ch{display:inline-block}
.js .ch{opacity:0;transform:translateY(70%) rotate(6deg);filter:blur(10px);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*60ms)}
@keyframes rise{to{opacity:1;transform:none;filter:none}}
.lead{font-size:20px;color:var(--dim);max-width:580px;margin:0 0 28px;min-height:3.3em}
.caret{display:inline-block;width:2px;height:1em;background:var(--fg);vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn:not(.main){transition:transform .2s}.btn:hover,button:hover{transform:translateY(-2px)}
.strip{border-radius:999px;margin:10px 0 40px;padding:14px 0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.track{display:flex;gap:36px;width:max-content;animation:scroll 28s linear infinite;color:var(--dim)}
.strip:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;padding-bottom:70px}
.c{border-radius:28px;padding:26px;transition:transform .25s ease-out,box-shadow .3s;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.c h2{font-size:14px;font-weight:500;color:var(--dim);margin:0 0 12px}
.c p{margin:0;position:relative}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}
.big{font-size:26px!important;line-height:1.25;font-weight:500;letter-spacing:-.01em}
.tags{display:flex;flex-wrap:wrap;gap:8px;position:relative}
.tags span{border:1px solid var(--gb);background:var(--g2);border-radius:999px;padding:3px 14px;font-size:14px;transition:transform .2s,background .2s}
.tags span:hover{transform:translateY(-3px) scale(1.06);background:var(--g1)}
dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:4px 20px;position:relative}
dt{color:var(--dim)}dd{margin:0;overflow-wrap:anywhere}
a{color:var(--fg)}.dim{color:var(--dim)}
.js .rv{opacity:0;transform:translateY(40px) scale(.96);filter:blur(8px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1),filter .8s}
.js .rv.in{opacity:1;transform:none;filter:none}
footer{padding:24px 0 36px;color:var(--dim)}

.legal{padding-bottom:60px}
.legal h2.t{font-size:28px;letter-spacing:-.02em;margin:0 0 6px}
details.glass{border-radius:20px;margin-top:12px;padding:0}
summary{cursor:pointer;padding:18px 24px;font-weight:500;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:24px;transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
.doc{padding:0 24px 22px;position:relative;max-width:720px}
.doc h3{font-size:16px;margin:20px 0 4px}
.doc p,.doc li{color:var(--dim);margin:4px 0}
.doc ul{padding-left:20px;margin:4px 0}
.doc b{color:var(--fg);font-weight:500}
.fl a,.fl button{color:var(--dim);margin-right:16px;background:none;border:0;padding:0;cursor:pointer;font:inherit;text-decoration:underline}
.acc{max-width:720px;margin:0 0 16px}
#cb{position:fixed;left:50%;transform:translate(-50%,160%);bottom:calc(env(safe-area-inset-bottom,0px) + 14px);width:min(560px,calc(100% - 28px));border-radius:22px;padding:18px 20px;z-index:20;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
#cb.show{transform:translate(-50%,0)}
#cb p{margin:0 0 12px;position:relative}
#cb .row{display:flex;gap:10px;flex-wrap:wrap;position:relative}
#cb button{padding:8px 18px}

.legal{padding-bottom:30px;font-size:13px;line-height:1.55}
.legal h2.t{font-size:14px;font-weight:500;color:var(--dim);letter-spacing:0;margin:0 0 2px}
.legal>p.dim{font-size:12px;margin:0}
details.glass{border-radius:14px;margin-top:8px;box-shadow:inset 0 1px 0 var(--hi)}
summary{padding:10px 16px;font-size:13px}
summary::after{right:16px}
.doc{padding:0 16px 14px;max-width:640px}
.doc h3{font-size:13px;margin:12px 0 2px}
.acc{font-size:12px}
.fl{font-size:12px}
#cb{width:min(400px,calc(100% - 28px));padding:12px 14px;border-radius:16px;font-size:13px}
#cb p{margin:0 0 8px}
#cb button{padding:5px 12px;font-size:12px}
.lt{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px;font-size:12px}
.lt button{background:none;border:0;padding:2px 0;color:var(--dim);cursor:pointer;font:inherit;border-bottom:1px solid transparent}
.lt button:hover,.lt button.on{color:var(--fg);border-color:var(--fg);transform:none}
.lp{border-radius:14px;margin-top:10px}
.lp .doc{padding:6px 16px 14px}
@media(max-width:760px){.s2,.s3,.s4{grid-column:span 6}header{padding-top:50px}nav a{margin-left:10px;font-size:14px}}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}.js .ch,.js .rv{opacity:1!important;transform:none!important;filter:none!important}}
.mt8{margin-top:8px}.mt14{margin-top:14px}.tbtn{margin-left:14px;padding:5px 14px}.bold{font-weight:700}


::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:9999}
#theme{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0}
#theme svg{display:block}
.ico-light{display:none!important}
#theme.is-light .ico-dark{display:none}
#theme.is-light .ico-light{display:block!important}
#theme.spin svg{animation:tspin .65s cubic-bezier(.2,.8,.2,1)}
@keyframes tspin{from{transform:rotate(-120deg) scale(.3);opacity:0}to{transform:none;opacity:1}}

/* Legal row: calmer pill buttons, no slide animations */
.legal{border-top:1px solid var(--gb);padding-top:22px;margin-top:10px}
.lt{gap:8px;margin-top:14px;align-items:center}
.lt button{border:1px solid var(--gb);background:var(--g2);border-radius:999px;padding:6px 14px;font-size:12px;color:var(--dim);transition:background .2s,color .2s}
.lt button:hover{background:var(--g1);color:var(--fg);border-color:var(--gb);transform:none}
.lt button.on{background:var(--fg);color:var(--inv);border-color:var(--fg)}
#cs{margin-left:auto}
.lp .doc{animation:fadein .2s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
#cb{transform:translateX(-50%);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
#cb.show{transform:translateX(-50%);opacity:1;visibility:visible}

/* Tux peeking in from the right edge */
.tux{position:absolute;top:150px;right:-36px;margin:0;z-index:0;pointer-events:none;user-select:none;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:clamp(5px,.5vw,9px);line-height:1.05;white-space:pre;
    color:var(--dim);opacity:.55;animation:tuxin 1.2s .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes tuxin{from{opacity:0;transform:translateX(40px)}to{opacity:.55;transform:none}}
@media(max-width:1200px){.tux{display:none}}

/* Arch logo hanging off the left edge, beside the cards */
.grid{position:relative}
.arch{position:absolute;left:calc(-30px - (100vw - 100%)/2);top:50%;transform:translateY(-50%);margin:0;z-index:0;pointer-events:none;user-select:none;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:clamp(8px,.68vw,13px);line-height:1.05;white-space:pre;color:var(--dim);opacity:.55}
@media(max-width:1360px){.arch{display:none}}

/* Arch logo: bigger */
.arch{font-size:clamp(10px,.95vw,18px)}
@media(max-width:1559px){.arch{display:none}}

/* Arch logo: stretched vertically */
.arch{transform:translateY(-50%) scaleY(1.5);transform-origin:left center}

/* Arch logo: slides in from the left when scrolled into view */
.js .arch{opacity:0;transform:translateY(-50%) scaleY(1.5) translateX(-60px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.js .arch.in{opacity:.55;transform:translateY(-50%) scaleY(1.5)}