@font-face{font-family:Archivo;font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/archivo-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:100 900;font-style:normal;font-display:swap;src:url(../fonts/inter-latin-opsz-normal.woff2) format("woff2-variations"),url(../fonts/inter-latin-opsz-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}

/* One system on every page: loose points of light become connected structure, structure becomes understanding. */
:root{
  --bg:#05070d; --bg2:#080c16; --panel:#0a0e1a; --ink:#eef1f7; --soft:#c9d4e8; --mute:#9aa6bb; --faint:#5d6b82;
  --line:rgba(140,170,220,.14); --line2:rgba(140,170,220,.26); --a1:#5fe0ff; --a2:#2a7bff; --azure:#56a0ff; --lit:#8eeaff; --ok:#6fe3b2; --warn:#ffcf8a;
  --display:Inter,"Helvetica Neue",Arial,sans-serif; --body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font:400 17px/1.6 var(--body); -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column}
.wrap{width:100%; max-width:1120px; margin:0 auto; padding-left:max(24px, env(safe-area-inset-left, 0px)); padding-right:max(24px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--display); font-weight:600; margin:0; text-wrap:balance}
p,ul,ol,figure,blockquote{margin:0}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--lit); outline-offset:3px; border-radius:6px}
.ark{background:linear-gradient(90deg,var(--a1),var(--a2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.kicker{font:500 12.5px/1.4 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:16px}
.node{display:inline-block; flex:none; width:10px; height:10px; border-radius:50%; border:1.5px solid var(--faint); background:transparent; transition:all .5s ease}
.node.lit{background:var(--lit); border-color:var(--lit); box-shadow:0 0 12px rgba(95,224,255,.8)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer; text-decoration:none;
  font:500 16px/1 var(--body); color:#04101f; background:linear-gradient(90deg,#8eeaff,#5aa8ff); padding:14px 22px; border-radius:999px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 30px rgba(42,123,255,.25)}
.btn:hover{filter:brightness(1.08)}
.btn.quiet{background:transparent; color:var(--soft); border:1px solid var(--line2); box-shadow:none}
.btn.quiet:hover{color:var(--ink); border-color:rgba(95,180,255,.55)}
.more{display:inline-flex; align-items:center; gap:8px; color:var(--lit); text-decoration:none; font-weight:500}
.more:hover{text-decoration:underline; text-underline-offset:4px}
.more::after{content:"→"}

/* header and navigation */
header.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:22px; padding-bottom:22px}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font:600 20px/1 var(--display); letter-spacing:-.025em}
.brand img{width:32px; height:32px}
nav.site{display:flex; align-items:center; gap:28px}
nav.site a{font-size:15px; color:var(--mute); text-decoration:none}
nav.site a:hover,nav.site a[aria-current="page"]{color:var(--ink)}
nav.site a.navcta{color:var(--soft); border:1px solid var(--line2); border-radius:999px; padding:8px 16px}
nav.site a.navcta:hover{border-color:rgba(95,180,255,.5)}
.menu{display:none; position:relative}
.menu summary{list-style:none; cursor:pointer; font-size:15px; color:var(--soft); border:1px solid var(--line2); border-radius:999px; padding:8px 16px}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{border-color:rgba(95,180,255,.55); color:var(--ink)}
.menu .panel{position:absolute; right:0; top:calc(100% + 10px); z-index:20; min-width:220px; background:#0b1222; border:1px solid var(--line2); border-radius:16px; padding:8px; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.menu .panel a{display:block; padding:12px 14px; border-radius:10px; text-decoration:none; color:var(--soft)}
.menu .panel a:hover,.menu .panel a[aria-current="page"]{background:rgba(95,180,255,.08); color:var(--ink)}
main{flex:1; overflow:hidden}

/* sections */
section.s{padding:120px 0 0}
.s h2{font-size:clamp(32px,4.6vw,56px); line-height:1.04; letter-spacing:-.035em}
.lead{color:var(--mute); font-size:clamp(17px,1.8vw,19.5px); line-height:1.6; max-width:680px; margin-top:22px}
.lead + .lead{margin-top:14px}
.lead strong{color:var(--ink); font-weight:500}
.page-head{padding:56px 0 0}
.page-head h1{font-size:clamp(44px,6.4vw,84px); line-height:1; letter-spacing:-.045em}
.page-head .sub{font:600 clamp(20px,2.4vw,28px)/1.3 var(--display); letter-spacing:-.02em; color:var(--soft); margin-top:20px; max-width:760px}

/* a trail of nodes on one line: the site's recurring structure */
.trail{list-style:none; padding:0}
.trail > li{display:grid; grid-template-columns:22px 1fr; gap:14px; position:relative; padding-bottom:26px}
.trail > li::before{content:""; position:absolute; left:4.5px; top:16px; bottom:-2px; width:1px; background:var(--line2)}
.trail > li:last-child::before{display:none}
.trail .node{margin-top:7px}
.trail h3{font-size:20px; letter-spacing:-.02em; margin-bottom:4px}
.trail p{color:var(--mute); font-size:16px; line-height:1.6}

/* a horizontal path of nodes */
.hpath{position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; margin-top:52px}
.hpath::before{content:""; position:absolute; left:5px; right:0; top:5px; height:1px; background:linear-gradient(90deg,var(--lit),rgba(95,180,255,.18))}
.hpath > div{position:relative; min-width:0}
.hpath .node{position:relative; background:var(--bg)}
.hpath .node.lit{background:var(--lit)}
.hpath h3{font-size:22px; letter-spacing:-.02em; margin:18px 0 8px}
.hpath p{color:var(--mute); font-size:16px; line-height:1.6}

/* rows with a node: formats, lists */
.rows{list-style:none; padding:0; border-top:1px solid var(--line)}
.rows li{display:flex; align-items:baseline; gap:16px; padding:16px 4px; border-bottom:1px solid var(--line); font-size:17px}
.rows li .node{transform:translateY(1px)}
.rows li b{font-weight:500; color:var(--ink); width:110px; flex:none}
.rows li span:last-child{color:var(--mute)}

.ticks{list-style:none; padding:0; display:grid; gap:13px}
.ticks li{display:grid; grid-template-columns:20px 1fr; gap:10px; color:var(--soft); font-size:16px; line-height:1.55}
.ticks li .node{margin-top:7px; width:9px; height:9px}
.ticks.later li{color:var(--mute)}
.ticks li b{color:var(--ink); font-weight:500}

.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:start}
.panel-line{border-top:1px solid var(--line); padding-top:26px}
.tag{display:inline-block; font:500 11.5px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--a1); border:1px solid rgba(95,224,255,.3); border-radius:999px; padding:6px 10px}
.tag.later{color:var(--mute); border-color:var(--line2)}

/* sign-up */
.access{margin-top:40px; border:1px solid var(--line2); border-radius:22px; padding:32px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:28px; align-items:center;
  background:radial-gradient(600px 220px at 0% 0%,rgba(42,123,255,.15),transparent),var(--panel)}
.access h3{font-size:28px; letter-spacing:-.025em}
.access > div > p{color:var(--mute); margin-top:6px; font-size:16px}
form.signup{display:flex; gap:10px; flex-wrap:wrap; min-width:0}
.signup input[type=email]{flex:1 1 240px; min-width:0; font:400 16px var(--body); color:var(--ink); background:#060a14; border:1px solid var(--line2); border-radius:999px; padding:14px 18px; outline:none}
.signup input[type=email]:focus{border-color:#5aa8ff; box-shadow:0 0 0 3px rgba(90,168,255,.2)}
.signup .btn{flex:0 0 auto}
.signup .note{flex-basis:100%; font-size:13px; color:var(--faint); line-height:1.5; margin-top:2px}
.signup .note a{color:var(--mute)}
.signup .msg{flex-basis:100%; font-size:15px}
.signup .msg:empty{display:none}
.signup .msg.ok{color:var(--ok)} .signup .msg.err{color:#ff9b9b}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

footer{padding:96px 0 40px; color:var(--faint); font-size:14px}
footer .row{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:24px}
footer nav{display:flex; gap:18px; flex-wrap:wrap}
footer a{color:var(--mute); text-decoration:none}
footer a:hover{color:var(--ink)}

.fade-in{animation:fadeIn .45s ease both}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.fade-in{animation:none}}

@media (max-width:900px){
  nav.site{display:none}
  .menu{display:block}
}
@media (max-width:820px){
  section.s{padding-top:80px}
  .page-head{padding-top:28px}
  .split{grid-template-columns:1fr; gap:32px}
  .hpath{grid-template-columns:1fr; gap:26px; margin-top:36px}
  .hpath::before{left:5px; right:auto; top:6px; bottom:6px; width:1px; height:auto; background:linear-gradient(180deg,var(--lit),rgba(95,180,255,.15))}
  .hpath > div{padding-left:34px}
  .hpath .node{position:absolute; left:0; top:2px}
  .hpath h3{margin-top:0}
  .rows li b{width:96px}
  .access{grid-template-columns:1fr; padding:24px 20px}
  footer{padding-top:72px}
}