@font-face{font-family:"Hanken Grotesk";font-weight:300;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:500;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Fragment Mono";font-weight:400;font-display:swap;src:url(/assets/fonts/fragment-mono-latin-400-normal.woff2) format("woff2")}
/* colours: same tokens as app.kelvara.xyz and the landing page */
:root{color-scheme:dark;--night:#121716;--raise:#161c1a;--bone:#f5f7f2;--text:#c4cbc6;--mute:#7d8983;--hair:rgba(196,203,198,.12);--hair2:rgba(196,203,198,.22);--accent:#e7ff81;--alarm:#ff4d4d;--ok:#8fd4a4;--warn:#ffb45e;--mono:"Fragment Mono",ui-monospace,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px;scrollbar-color:#252d29 var(--night)}
body{margin:0;background:var(--night);color:var(--text);font:400 16px/1.7 "Hanken Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--bone);text-decoration-color:var(--hair2);text-underline-offset:4px}a:hover{text-decoration-color:var(--bone)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.top{position:sticky;top:0;z-index:30;height:72px;border-bottom:1px solid var(--hair);background:rgba(18,23,22,.86);backdrop-filter:blur(14px)}
.top-in{max-width:1440px;height:100%;margin:auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--bone);text-decoration:none;font-weight:500;font-size:19px;letter-spacing:-.02em}
.brand img{display:block;width:24px;height:24px}.brand small{margin-left:10px;font:12.5px var(--mono);color:var(--mute);letter-spacing:0}
.top nav{display:flex;gap:28px;align-items:center}.top nav a{text-decoration:none;color:var(--mute);font-size:15px}.top nav a:hover{color:var(--bone)}
.launch{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:var(--accent);color:var(--night)!important;font-weight:500;font-size:14px!important}
.menu{display:none;border:1px solid var(--hair2);background:none;color:var(--bone);padding:7px 14px;border-radius:999px;font:12.5px var(--mono)}
.shell{max-width:1440px;margin:auto;display:grid;grid-template-columns:220px minmax(0,760px) 180px;gap:72px;padding:64px 32px 120px}
.side,.toc{position:sticky;top:112px;align-self:start;max-height:calc(100vh - 136px);overflow:auto;scrollbar-width:none}
.nav-group{margin-bottom:28px}
.nav-group>b,.toc>b{display:block;margin-bottom:10px;color:var(--mute);font:400 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.nav-group a{display:block;padding:5px 0 5px 14px;border-left:1px solid var(--hair);color:var(--mute);text-decoration:none;font-size:14px}
.nav-group a:hover{color:var(--bone)}.nav-group a.active{color:var(--bone);border-left-color:var(--accent)}
.toc a{display:block;padding:4px 0;color:var(--mute);text-decoration:none;font-size:13px}.toc a:hover{color:var(--bone)}
.article{min-width:0}
.crumb{font:12px var(--mono);color:var(--mute);margin-bottom:40px}
.eyebrow{margin:0;font:12.5px var(--mono);color:var(--accent)}
h1{margin:14px 0 24px;max-width:760px;color:var(--bone);font-weight:300;font-size:clamp(42px,5.6vw,72px);line-height:.98;letter-spacing:-.05em;text-wrap:balance}
h2{margin:0 0 20px;color:var(--bone);font-weight:400;font-size:30px;line-height:1.1;letter-spacing:-.035em}
h3{margin:0 0 8px;color:var(--bone);font-weight:500;font-size:16px;letter-spacing:-.01em}
.lead{max-width:640px;margin:0 0 48px;color:var(--mute);font-size:19px;line-height:1.55}
.article section{padding:56px 0;border-top:1px solid var(--hair)}
.article strong{color:var(--bone);font-weight:500}
.article ul,.article ol{padding-left:20px}.article li{margin:6px 0}.article li::marker{color:var(--mute)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);margin:32px 0;border-top:1px solid var(--hair)}
.card{padding:22px 22px 4px 0}.card+.card{padding-left:22px;border-left:1px solid var(--hair)}.card:nth-child(3n+1){padding-left:0;border-left:0}
.card p{margin:0;font-size:14px;color:var(--mute)}
.product-map{display:flex;align-items:stretch;margin:32px 0;border:1px solid var(--hair)}
.map-node{flex:1;padding:18px 12px;font:12.5px var(--mono);color:var(--bone);text-align:center}
.product-map>span{display:flex;align-items:center;padding:0 2px;color:var(--accent);font:12.5px var(--mono)}
.badge{display:inline-flex;align-items:center;gap:8px;margin:12px 20px 0 0;font:12px var(--mono);color:var(--mute)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.live{color:var(--ok)}.beta{color:var(--warn)}.dev{color:var(--accent)}.planned{color:var(--mute)}.planned::before{background:none;box-shadow:inset 0 0 0 1px currentColor}
.callout{margin:28px 0;padding:4px 0 4px 20px;border-left:1px solid var(--accent)}
.callout strong{display:block;margin-bottom:4px;color:var(--bone);font-weight:500}.callout p{margin:0;color:var(--text)}
.callout.warn{border-left-color:var(--alarm)}
.table-wrap{overflow:auto;margin:28px 0;border-top:1px solid var(--hair2)}
table{border-collapse:collapse;width:100%;min-width:600px}
th,td{text-align:left;vertical-align:top;padding:14px 20px 14px 0;border-bottom:1px solid var(--hair)}
th{font:400 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}td{font-size:14px;color:var(--text)}
pre{position:relative;overflow:auto;margin:24px 0;padding:22px;background:var(--raise);border:1px solid var(--hair);color:var(--bone);font:12.5px/1.75 var(--mono)}
code{font-family:var(--mono);font-size:.88em;color:var(--bone)}
.copy{position:absolute;right:12px;top:12px;border:1px solid var(--hair2);border-radius:999px;background:none;color:var(--mute);padding:4px 12px;font:11px var(--mono);cursor:pointer}.copy:hover{color:var(--bone)}
.next{display:flex;justify-content:space-between;gap:16px;margin-top:64px;border-top:1px solid var(--hair)}
.next a{padding:20px 0;text-decoration:none;color:var(--bone);font-size:17px}.next a:last-child{text-align:right}
.next small{display:block;margin-bottom:4px;font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.updated{margin:8px 0 0;font:12px/1.8 var(--mono);color:var(--mute)}.updated:first-of-type{margin-top:56px;padding-top:24px;border-top:1px solid var(--hair)}.updated a{color:var(--mute)}.updated a:hover{color:var(--bone)}
details{margin-top:24px;border-top:1px solid var(--hair);padding:16px 0}summary{cursor:pointer;color:var(--bone);font-weight:500}details p{color:var(--mute)}
@media(max-width:1100px){.shell{grid-template-columns:200px minmax(0,1fr);gap:56px}.toc{display:none}}
@media(max-width:760px){.top-in{padding:0 20px}.top nav>a:not(.launch){display:none}.menu{display:block}.shell{display:block;padding:36px 20px 80px}.side{display:none}.side.open{display:block;position:fixed;inset:72px 0 0;z-index:35;max-height:none;background:var(--night);padding:28px 20px;overflow:auto}.cards{grid-template-columns:1fr}.card,.card+.card{padding:20px 0 4px;border-left:0}.card+.card{border-top:1px solid var(--hair)}.product-map{flex-direction:column}.product-map>span{justify-content:center;padding:2px 0;transform:rotate(90deg)}.article section{padding:44px 0}.lead{font-size:17px}.next{flex-direction:column;gap:0}.next a:last-child{text-align:left;border-top:1px solid var(--hair)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}