@font-face{font-family:Geist;src:url(fonts/Geist-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url(fonts/Geist-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Geist;src:url(fonts/Geist-SemiBold.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:GeistMono;src:url(fonts/GeistMono-Regular.woff2) format('woff2');font-display:swap}

:root{--bg:#f7f7f4;--ink:#20211f;--muted:#666761;--line:#d9dad4;--mono:GeistMono,monospace;--sans:Geist,sans-serif;--pad:clamp(24px,5vw,88px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
button,input{font:inherit}
a{color:inherit;text-decoration:none}
button,a,input{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:wait}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid currentColor;outline-offset:5px}
button{color:inherit}
p,h1,h2,h3,figure{margin:0}
::selection{background:#d3d4ce}
.mono{font-family:var(--mono);font-size:10px;letter-spacing:.07em}
.header{position:sticky;top:0;z-index:50;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);background:var(--bg)}
.logo{display:flex;align-items:center;gap:10px;font-size:29px;font-weight:600;letter-spacing:-1.5px}
.header nav{display:flex;gap:32px;align-items:center;font-size:12px}
.header nav a{transition:opacity .2s}
.header nav a:hover{opacity:.55}
.nav-source{margin-left:28px}
.tiny-dot{display:inline-block;width:4px;height:4px;background:currentColor;border-radius:50%;vertical-align:super}
.hero{padding:28px var(--pad) 0;overflow:hidden}
.hero-top,.hero-bottom,.section-label{display:flex;justify-content:space-between;align-items:center}
.hero-top{color:var(--muted)}
.hero-layout{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;min-height:590px;gap:10px}
.hero-copy{position:relative;z-index:1;padding:55px 0 60px}
h1{font-size:clamp(58px,6.2vw,102px);line-height:1.02;font-weight:500;letter-spacing:-.075em;white-space:nowrap}
.period{color:#83847d}
.hero-sub{margin-top:30px;color:var(--muted);font-size:16px;line-height:1.7}
.hero-actions{display:flex;gap:26px;align-items:center;margin-top:32px}
.button{display:inline-flex;align-items:center;gap:35px;background:var(--ink);color:var(--bg);padding:14px 20px;font-size:12px;transition:background .2s,transform .2s}
.button:hover{background:#43443f;transform:translateY(-2px)}
.text-link{font-size:12px;border-bottom:1px solid var(--line);padding:5px 0}
.install{display:flex;align-items:center;gap:10px;margin-top:27px;font-size:10px;max-width:390px}
.install code{font-family:var(--mono);font-size:10px}
.install-prompt{color:var(--muted)}
.install button{background:none;border:0;border-left:1px solid var(--line);padding:0 0 0 12px;font:10px var(--mono);margin-left:4px;color:var(--muted)}
.identity{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0}
.identity-stage{position:relative;width:100%;aspect-ratio:1}
.identity canvas{width:100%;height:100%;position:absolute;inset:0}
.identity-fallback{position:absolute;width:75%;height:75%;top:12.5%;left:12.5%;opacity:.7}
.identity.ready .identity-fallback{visibility:hidden}
.cross{position:absolute;font:16px var(--mono);color:#9c9d96}
.cross-a{left:4%;top:9%}
.cross-b{right:3%;bottom:8%}
.identity figcaption{display:flex;justify-content:space-between;padding:0 3% 28px;color:var(--muted)}
.material-options{display:flex;gap:12px}
.material-options button{border:0;background:none;padding:0;font:10px var(--mono);color:var(--muted)}
.material-options button.active{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.hero-bottom{border-top:1px solid var(--line);height:69px;color:var(--muted)}
.status-dot{display:inline-block;width:5px;height:5px;margin-right:9px;background:currentColor;border-radius:50%;vertical-align:middle}
.section{padding:35px var(--pad) 90px;border-top:1px solid var(--line)}
.section-label{color:var(--muted);margin-bottom:65px}
.section-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:end;margin-bottom:65px}
h2{font-size:clamp(38px,4.4vw,68px);font-weight:400;letter-spacing:-.065em;line-height:1.08}
.section-intro>p{max-width:420px;color:var(--muted);font-size:15px}
.foundation{display:grid;grid-template-columns:1.2fr 1fr;gap:80px}
.measure>.mono{color:var(--muted)}
.big-number{font-size:clamp(55px,6vw,90px);letter-spacing:-.075em;line-height:1.4}
.big-number>span{font:15px var(--mono);letter-spacing:-1px;color:var(--muted)}
.ruler{height:27px;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 7px);border-top:1px solid var(--ink);margin:5px 0 20px;mask-image:linear-gradient(90deg,black 0 94%,transparent 100%)}
.measure>p{font-size:13px;color:var(--muted)}
.metrics{display:flex;gap:45px;margin-top:35px}
.metrics div{display:flex;flex-direction:column}
.metrics strong{font-size:23px;font-weight:400;letter-spacing:-1px}
.metrics span{font:10px var(--mono);color:var(--muted)}
.principles article{display:flex;gap:24px;border-top:1px solid var(--line);padding:22px 0}
.principles article>.mono{color:var(--muted);padding-top:4px}
.principles h3{font-size:16px;font-weight:500;margin-bottom:7px}
.principles p{font-size:13px;color:var(--muted);max-width:360px}
.code-section{background:#242622;color:#eeeeea;padding-bottom:105px}
.code-section .section-label{color:#a7aaa2}
.code-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}
.code-grid h2{font-size:clamp(35px,3.6vw,55px)}
.code-description{color:#b1b4ac;max-width:370px;font-size:14px;margin-top:26px}
.code-section .install{margin-top:35px}
.code-section .install button,.code-section .install-prompt{color:#b1b4ac}
.code-section .text-link{display:inline-block;margin-top:22px;border-color:#656860}
.demo{border-top:1px solid #656860;min-width:0}
.demo-header{display:flex;justify-content:space-between;padding:19px 0;color:#b1b4ac}
.terminal{font:12px/1.9 var(--mono);padding:25px 0 32px;min-height:255px}
.terminal-muted{color:#a7aaa2}
.terminal-prompt{padding-right:10px}
.event-track{height:26px;margin:22px 0;width:100%;background:repeating-linear-gradient(90deg,#c5c8c0 0 3px,transparent 3px 7px);transition:opacity .4s}
.demo.interrupted .event-track{opacity:.18}
.demo-controls{border-top:1px solid #656860;display:flex;align-items:center;justify-content:space-between;padding-top:17px;gap:12px}
.demo-controls>.mono{color:#a7aaa2;font-size:9px}
.demo-button{border:1px solid #777a72;padding:10px 14px;background:transparent;font-size:11px}
.demo-button:hover{background:#3a3d36}
.demo-caption{font-size:10px;color:#a7aaa2;margin-top:20px}
.app{display:grid;grid-template-columns:170px 1fr 1.1fr;border:1px solid var(--line);font-size:11px;min-height:355px;overflow:hidden}
.app-side{border-right:1px solid var(--line);padding:25px 17px;background:#eeefea}
.app-row{padding:5px 7px;color:var(--muted);font-size:10px}
.app-row.is-sel{background:#dddfd7;color:var(--ink);border-radius:3px}
.app-row.is-on{color:var(--ink)}
.app-head{font:9px var(--mono);color:var(--muted);margin:22px 7px 8px}
.app-main{padding:30px 24px;display:flex;flex-direction:column;gap:17px}
.app-you{background:#edeee7;padding:12px;border-radius:5px}
.app-said{color:var(--muted)}
.app-card{display:flex;flex-direction:column;border:1px solid var(--line);padding:10px 12px;gap:4px}
.app-card-name{font-size:11px}
.app-card-meta{font:9px var(--mono);color:var(--muted)}
.app-composer{padding:12px;border:1px solid var(--line);border-radius:5px;color:var(--muted);margin-top:auto;font-size:10px}
.app-pane{border-left:1px solid var(--line);padding:20px}
.app-pane-bar{padding-bottom:15px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px}
.app-v{float:right;color:var(--muted)}
.app-pane-h{font-size:19px;letter-spacing:-.6px;margin:30px 0 20px}
.app-tbl{display:grid;grid-template-columns:.4fr .8fr .8fr 1.3fr;gap:0 8px;font-size:9px}
.app-tbl span{padding:9px 0;border-bottom:1px solid var(--line)}
.app-th{color:var(--muted)}
.app-pane-note{font-size:10px;color:var(--muted);margin-top:20px}
.preview-caption{display:flex;justify-content:space-between;margin:15px 0;color:var(--muted);font-size:9px}
.signup{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center;border-top:1px solid var(--line);padding-top:55px;margin-top:65px}
.signup h3{font-size:36px;line-height:1.1;letter-spacing:-1.8px;font-weight:400}
.signup p{font-size:12px;color:var(--muted);margin-top:15px}
.waitlist label{display:block;margin-bottom:14px}
.form-row{display:flex;border-bottom:1px solid var(--ink);gap:10px;padding-bottom:12px}
.form-row input{width:100%;min-width:0;border:0;background:none;font-size:14px;outline-offset:0}
.form-row button{white-space:nowrap;background:none;border:0;font-size:12px}
.signup #waitlist-helper{font-size:10px}
footer{padding:35px var(--pad);border-top:1px solid var(--line)}
.footer-top{display:flex;justify-content:space-between;align-items:center;padding:20px 0 50px}
.footer-top p{font-size:14px;color:var(--muted)}
.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;font-size:9px;color:var(--muted)}
.footer-bottom>div{display:flex;gap:25px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:15px;top:15px;background:var(--bg);padding:15px;z-index:10}

@media(min-width:1600px){body{max-width:1800px;margin:auto;border-inline:1px solid var(--line)}
.hero-layout{min-height:720px}
}

@media(max-width:1000px){.brand-note{display:none}
.hero-layout{min-height:530px;grid-template-columns:1.2fr 1fr}
h1{font-size:6.4vw}
.section-intro,.foundation,.code-grid,.signup{gap:35px}
.hero-actions{gap:15px}
.app{grid-template-columns:130px 1fr 1fr}
.app-main{padding:20px 15px}
.app-pane{padding:15px}
.install{gap:6px}
.install code{font-size:9px}
}

@media(max-width:700px){.header{height:52px}
.header nav{gap:17px;font-size:11px}
.header nav .nav-section{display:none}
.nav-source{display:none}
.logo{font-size:26px}
.hero-top{font-size:8px}
.hero-top>span:last-child{display:none}
.hero-layout{display:flex;flex-direction:column;gap:0}
.hero-copy{width:100%;padding:46px 0 15px}
h1{font-size:clamp(48px,10.5vw,72px)}
.hero-sub{font-size:14px;margin-top:23px}
.hero-actions{margin-top:23px}
.identity{width:100%;max-width:410px;align-self:center;margin-top:8px}
.identity-stage{aspect-ratio:1.12}
.identity figcaption{font-size:9px;padding-bottom:25px}
.hero-bottom{font-size:8px;height:60px}
.hero-bottom>a{font-size:0}
.hero-bottom>a::after{content:'↓';font-size:16px}
.section{padding-top:25px;padding-bottom:60px}
.section-label{font-size:8px;margin-bottom:38px}
.section-intro,.foundation,.code-grid,.signup{grid-template-columns:1fr;gap:30px}
.section-intro{margin-bottom:40px}
h2{font-size:43px}
.section-intro>p{font-size:14px}
.big-number{font-size:72px}
.foundation{gap:40px}
.metrics{justify-content:space-between}
.code-grid{gap:45px}
.code-grid h2{font-size:40px}
.terminal{font-size:11px}
.app{grid-template-columns:1fr;min-height:0}
.app-side,.app-pane{display:none}
.app-main{padding:25px}
.preview-caption>span:last-child{display:none}
.signup{margin-top:40px;padding-top:35px}
.footer-top{flex-wrap:wrap;gap:20px;padding-bottom:30px}
.footer-top p{font-size:11px}
.footer-top>a:last-child{display:none}
.footer-bottom{gap:20px;flex-direction:column}
.footer-bottom>div{justify-content:space-between;gap:10px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
}