:root{--bg:#f3f7f9;--paper:#fbfdfe;--ink:#002a40;--muted:#607784;--line:#cfdae0;--accent:#126e9e;--accent2:#8ad0f5;--brand-dark:#002a40;--brand-mid:#126e9e;--brand-light:#8ad0f5;--brand-pale:#e7f5fc;--dark:#002a40;--panel:#06354e;--cyan:#8ad0f5;--green:#8ad0f5;--amber:#4fa8d6;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;--sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5}a{color:inherit;text-decoration:none}img{display:block}.shell{width:min(1180px,calc(100% - 48px));margin:auto}.nav{height:74px;display:flex;align-items:center;padding:0 max(24px,calc((100vw - 1180px)/2));border-bottom:1px solid var(--line);background:rgba(243,247,249,.94);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.03em}.brand img{width:30px;height:30px}.nav nav{display:flex;gap:28px;margin-left:auto;margin-right:34px;font-size:13px;color:#536b78}.nav nav a:hover{color:#002a40}.github{font:600 13px var(--mono);border-left:1px solid var(--line);padding-left:24px}.github span{color:var(--accent)}
.hero{padding:86px 0 54px}.hero-copy{max-width:820px;margin-bottom:64px}.eyebrow,.kicker,.section-head>span,.shipping-copy>span,.ai-inner>div>span{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#58717e}.eyebrow i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:8px}.hero h1{font-size:clamp(58px,8vw,112px);line-height:.87;letter-spacing:-.072em;margin:24px 0 30px;font-weight:760}.hero h1 em{font-style:normal;color:var(--accent)}.lead{max-width:720px;font-size:21px;line-height:1.55;color:#536d7a;margin:0}.actions{display:flex;gap:10px;margin-top:34px}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 19px;font:700 13px var(--mono);border:1px solid #002a40}.primary{background:#002a40;color:white}.primary:hover{background:var(--accent);border-color:var(--accent)}.secondary:hover{background:#ffffff}.install{display:inline-flex;align-items:center;margin-top:20px;border:1px solid var(--line);background:#edf4f7;height:38px;font:12px var(--mono)}.install span{padding:0 0 0 12px;color:var(--accent)}.install code{padding:0 12px 0 8px}.install button{height:100%;border:0;border-left:1px solid var(--line);background:transparent;padding:0 12px;font:10px var(--mono);text-transform:uppercase;cursor:pointer;color:#607784}
.app-window{border:1px solid #0b4c6c;background:var(--dark);box-shadow:0 32px 90px rgba(0,42,64,.22);color:#eaf7fd;overflow:hidden}.windowbar{height:43px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 15px;background:#001f30;border-bottom:1px solid #174b64;font:9px var(--mono);letter-spacing:.12em}.windowbar>div{display:flex;gap:6px}.windowbar b{width:8px;height:8px;border-radius:50%;background:#35647a}.windowbar b:first-child{background:#126e9e}.windowbar small{justify-self:end;color:var(--green);font-size:9px}.app-grid{display:grid;grid-template-columns:205px 1fr;min-height:480px}.tree{background:#032f46;border-right:1px solid #174b64;padding:22px 12px;position:relative}.tree label{display:block;font:9px var(--mono);letter-spacing:.15em;color:#6f9bb1;margin:0 8px 14px}.tree-row{font:11px var(--mono);padding:8px;border-radius:2px;color:#a9c9d8}.tree-row strong{color:#eff9fd}.tree-row.indent{padding-left:23px}.tree-row.selected{background:#0e5a80;color:#ffffff;border-left:2px solid var(--accent)}.tree-status{position:absolute;bottom:18px;left:20px;font:9px var(--mono);color:#74a4ba}.tree-status span{color:var(--green)}.dash{padding:24px 28px;background:linear-gradient(180deg,#063a55,#002a40)}.dash-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #174b64;padding-bottom:18px}.dash-head small,.metrics small,.chart-title small{font:8px var(--mono);letter-spacing:.1em;color:#79a6ba}.dash-head h3{margin:4px 0 0;font-size:20px}.ok{font:8px var(--mono);color:var(--green);border:1px solid #2d7598;padding:6px 8px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#174b64;margin:20px 0}.metrics>div{background:#033149;padding:16px}.metrics strong{display:block;font-size:25px;margin:5px 0 12px}.metrics sup{font:10px var(--mono);color:#7aa9bf}.metrics i{height:3px;background:#174b64;display:block;position:relative}.metrics i:after{content:'';position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--cyan)}.chart{border:1px solid #174b64;background:#032f46}.chart-title{height:40px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;font:10px var(--mono)}.chart svg{display:block;width:100%;height:145px}.gridline{stroke:#164b64;stroke-width:1}.area{fill:rgba(138,208,245,.08)}.line{fill:none;stroke:var(--cyan);stroke-width:2}.events{margin-top:14px;border-top:1px solid #174b64;font:9px var(--mono)}.events>div{display:grid;grid-template-columns:18px 1fr auto;align-items:center;border-bottom:1px solid #123f56;padding:8px 4px}.events .event-head{grid-template-columns:1fr auto;color:#80aabc}.events time{color:#6f9bb1}.dot{width:5px;height:5px;border-radius:50%}.blue{background:var(--cyan)}.green{background:var(--green)}.amber{background:var(--amber)}.mocknote{text-align:right;font:10px var(--mono);color:#6e8792;margin-top:10px}
.statement{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:62px 0;background:#e8f2f6}.statement p{font:13px var(--mono);color:#607784}.statement h2{font-size:clamp(30px,4vw,52px);letter-spacing:-.04em;margin:8px 0 0;font-weight:500}.statement strong{font-weight:760}.section{padding:110px 0}.section-head{display:grid;grid-template-columns:180px 1fr 1fr;gap:40px;align-items:start;margin-bottom:50px}.section-head h2{font-size:43px;line-height:1;letter-spacing:-.045em;margin:0}.section-head p{margin:0;color:var(--muted);max-width:480px}.primitive-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}.primitive-grid article{min-height:270px;padding:25px;border-right:1px solid var(--line);background:rgba(255,255,255,.48)}.primitive-grid article:last-child{border:0}.primitive-grid article>span{font:9px var(--mono);color:#7a929d}.primitive-grid h3{font-size:21px;margin:52px 0 12px}.primitive-grid p{font-size:14px;color:var(--muted);min-height:88px}.primitive-grid code{font:11px var(--mono);color:var(--accent)}
.dark-section{background:var(--dark);color:#f0f9fd;padding:110px 0}.code-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px;align-items:center}.code-copy h2,.split h2,.shipping h2,.ai h2{font-size:48px;line-height:1.02;letter-spacing:-.05em;margin:14px 0 22px}.code-copy p{color:#9dc2d3;max-width:470px}.code-copy ul{padding:0;list-style:none;margin:32px 0 0;border-top:1px solid #174b64}.code-copy li{padding:11px 0;border-bottom:1px solid #174b64;font:11px var(--mono);color:#aacbd9}.code-copy li:before{content:'→';color:var(--accent);margin-right:10px}.editor{border:1px solid #1b5d7b;background:#033149;box-shadow:0 20px 60px rgba(0,42,64,.30)}.tabs,.editor-foot{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;background:rgba(0,42,64,.72);border-bottom:1px solid #174b64;font:9px var(--mono);color:#7fa9bc}.editor pre{margin:0;padding:30px;overflow:auto;min-height:310px;font:13px/1.9 var(--mono);color:#e6f4fa}.editor code b{color:#8ad0f5}.editor code em{color:#64b9e4;font-style:normal}.editor code u{color:#b9e4fa;text-decoration:none}.editor code s{color:#93d4f5;text-decoration:none}.editor-foot{border:0;border-top:1px solid #174b64}
.toolkit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:84px}.toolkit-card{position:relative;min-height:390px;padding:28px;border:1px solid var(--line);background:#edf5f8;overflow:hidden}.toolkit-card:before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--accent)}.toolkit-top{display:flex;justify-content:space-between;align-items:flex-start;min-height:70px;font:9px var(--mono);letter-spacing:.12em;color:#617b87}.toolkit-top strong{font:750 64px/0.8 var(--sans);letter-spacing:-.07em;color:var(--accent)}.toolkit-top b{font:10px var(--mono);letter-spacing:0;text-transform:none;color:#315d72;border:1px solid #bfd3dc;padding:6px 8px;background:#f8fbfc}.toolkit-card h3{font-size:25px;line-height:1.1;letter-spacing:-.025em;margin:8px 0 10px}.toolkit-card>p{font-size:14px;color:var(--muted);max-width:360px;margin:0}.component-cloud{display:flex;flex-wrap:wrap;gap:6px;margin-top:30px}.component-cloud i{font:9px var(--mono);font-style:normal;padding:7px 8px;border:1px solid #bfd3dc;background:#f8fbfc;color:#315d72}.component-cloud i:last-child{border-color:#8dbbd0;color:var(--accent);font-weight:700}.toolkit-card.extend{background:#002a40;color:#eff9fd;border-color:#174b64}.toolkit-card.extend:before{background:var(--accent2)}.toolkit-card.extend .toolkit-top{color:#83aec1}.toolkit-card.extend .toolkit-top b{background:#073850;border-color:#1e617e;color:#a9d8ed}.toolkit-card.extend>p{color:#9ec3d4}.toolkit-card.extend pre{margin:27px 0 0;padding:18px;border:1px solid #174b64;background:#032f46;font:10px/1.75 var(--mono);overflow:auto;color:#d5edf8}.toolkit-card.extend pre b{color:#8ad0f5}.toolkit-card.extend pre em{font-style:normal;color:#ffffff}.toolkit-card.third-party{background:#e7f5fc}.toolkit-card.third-party:before{background:var(--brand-light)}.vendor-diagram{margin-top:34px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:8px}.vendor-diagram>span{min-height:58px;display:flex;align-items:center;justify-content:center;border:1px solid #a9c9d8;background:#f8fbfc;font:700 10px var(--mono);text-align:center;color:#244e62}.vendor-diagram>b{font:400 18px var(--mono);color:var(--brand-mid)}.vendor-diagram>small{grid-column:1/-1;text-align:center;margin-top:9px;font:8px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#6f8792}
.toolkit-card.theme{background:linear-gradient(145deg,#edf5f8 0%,#e4f2f8 100%)}.theme-demo{margin-top:31px;border:1px solid #bfd3dc;background:#f8fbfc;padding:18px}.theme-swatches{display:grid;grid-template-columns:repeat(4,1fr);height:44px;margin-bottom:16px}.theme-swatches i:nth-child(1){background:#002a40}.theme-swatches i:nth-child(2){background:#126e9e}.theme-swatches i:nth-child(3){background:#8ad0f5}.theme-swatches i:nth-child(4){background:#e7f5fc;border:1px solid #c6dce6}.theme-demo code{display:block;font:10px var(--mono);color:#315d72}.theme-demo small{display:block;margin-top:9px;font:8px var(--mono);letter-spacing:.04em;color:#6f8792}.capability-head{display:grid;grid-template-columns:180px 1fr 1fr;gap:40px;align-items:start;margin-bottom:30px;padding-top:2px}.capability-head>span{font:700 10px var(--mono);letter-spacing:.12em;color:#58717e}.capability-head h3{font-size:30px;line-height:1.05;letter-spacing:-.035em;margin:0}.capability-head p{margin:0;color:var(--muted);max-width:480px}.capabilities{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.capabilities article{background:#eaf3f7;border:1px solid var(--line);padding:26px;min-height:300px}.capabilities article.wide{grid-column:span 3;display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;min-height:270px}.capabilities small{font:9px var(--mono);letter-spacing:.12em;color:#647c88}.capabilities h3{font-size:24px;margin:12px 0 8px}.capabilities p{color:var(--muted);font-size:14px;max-width:410px}.mini-grid{display:grid;grid-template-columns:.5fr 1.4fr .8fr 1fr;align-self:center;border:1px solid #c5d6de;font:10px var(--mono)}.mini-grid>*{padding:10px;border-right:1px solid #cfdee5;border-bottom:1px solid #cfdee5}.mini-grid b{font-size:8px;color:#607784}.good{color:#126e9e}.warn{color:#347fa6}.tree-demo,.form-demo{margin-top:35px;border-top:1px solid #cbdbe2;padding-top:18px;font:11px/2 var(--mono);color:#536d79}.form-demo{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}.form-demo div{border:1px solid #c6d8df;background:#f7fbfd;padding:4px 7px}.gauge-demo{margin:42px auto 0;width:130px;height:65px;border-radius:130px 130px 0 0;border:10px solid #bfd8e4;border-bottom:0;position:relative;text-align:center}.gauge-demo:after{content:'';position:absolute;left:-10px;top:-10px;width:130px;height:65px;border-radius:130px 130px 0 0;border:10px solid transparent;border-top-color:var(--accent);border-left-color:var(--accent);transform:rotate(18deg)}.gauge-demo strong{position:relative;top:28px;font:16px var(--mono)}
.split-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:110px 0;background:#e7f1f5}.split{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px}.split p{color:var(--muted);max-width:440px}.compare{border:1px solid #c4d6de;background:#f3f7f9}.compare>div{display:grid;grid-template-columns:90px 1fr;border-bottom:1px solid #cbdbe2}.compare label{padding:20px 14px;font:9px var(--mono);color:#607784;border-right:1px solid #cbdbe2}.compare pre{padding:18px;margin:0;font:11px/1.7 var(--mono);overflow:auto}.compare footer{padding:12px 14px;font:9px var(--mono);color:#607784;text-align:right}.shipping{display:grid;grid-template-columns:1fr 1fr;gap:110px;align-items:center}.shipping-copy p{color:var(--muted);max-width:520px}.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:25px}.badges b{font:9px var(--mono);padding:7px 9px;border:1px solid var(--line);background:#e8f2f6}.bundle{border:1px solid var(--line);padding:24px;font:10px var(--mono);background:#e8f2f6}.bundle>div:first-child{display:flex;justify-content:space-between}.bundle strong{color:#6f8792}.modules{display:flex;gap:6px;margin:20px 0}.modules i{font-style:normal;border:1px solid #9ebac7;background:#fbfdfe;padding:8px}.modules .off{opacity:.3;text-decoration:line-through}.arrow{text-align:center;color:#6f8792;padding:10px}.output{background:#002a40;color:#f0f9fd;padding:15px;display:flex;justify-content:space-between}.output b{color:var(--green)}.bundle>small{display:block;margin-top:15px;color:#607784}
.ai{background:#002a40;color:#f0f9fd;padding:95px 0}.ai-inner{display:grid;grid-template-columns:1fr 430px;gap:100px;align-items:center}.ai h2{margin-bottom:18px}.ai p{color:#9ec3d4;max-width:650px}.ai-inner>a{border:1px solid #1b5d7b;background:#032f46;padding:22px;display:grid;grid-template-columns:1fr auto;gap:10px;font-family:var(--mono)}.ai-inner>a span{font-size:14px}.ai-inner>a small{font-size:9px;color:#7fa9bc}.ai-inner>a b{grid-column:1/-1;border-top:1px solid #174b64;padding-top:16px;margin-top:8px;color:var(--cyan);font-size:10px}.cta{text-align:center;padding:120px 0}.cta>span{font:9px var(--mono);letter-spacing:.13em;color:#607784}.cta h2{font-size:clamp(50px,7vw,84px);line-height:.94;letter-spacing:-.06em;margin:18px 0 0}.cta .actions{justify-content:center}body>footer{border-top:1px solid var(--line);padding:32px 0 45px}body>footer>.shell{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center}body>footer p{text-align:center;font:10px var(--mono);color:#607784}body>footer nav{display:flex;justify-content:flex-end;gap:20px;font:10px var(--mono)}
@media(max-width:900px){.nav nav{display:none}.github{margin-left:auto}.hero{padding-top:55px}.app-grid{grid-template-columns:150px 1fr}.tree{font-size:9px}.section-head{grid-template-columns:1fr}.primitive-grid{grid-template-columns:1fr 1fr}.primitive-grid article:nth-child(2){border-right:0}.primitive-grid article{border-bottom:1px solid var(--line)}.code-layout,.split,.shipping,.ai-inner{grid-template-columns:1fr;gap:50px}.toolkit-grid{grid-template-columns:1fr}.toolkit-card{min-height:auto}.capability-head{grid-template-columns:1fr}.capabilities{grid-template-columns:1fr}.capabilities article.wide{grid-column:auto;grid-template-columns:1fr}.ai-inner>a{max-width:520px}.section{padding:80px 0}}
@media(max-width:650px){.shell{width:min(100% - 28px,1180px)}.nav{padding:0 14px;height:62px}.hero h1{font-size:55px}.lead{font-size:17px}.actions{flex-direction:column;align-items:stretch}.app-window{overflow-x:auto}.app-grid{min-width:700px}.statement{padding:44px 0}.section-head h2,.code-copy h2,.split h2,.shipping h2,.ai h2{font-size:36px}.primitive-grid{grid-template-columns:1fr}.primitive-grid article{border-right:0;min-height:auto}.primitive-grid h3{margin-top:28px}.toolkit-grid{margin-bottom:60px}.toolkit-card{padding:22px}.toolkit-top{min-height:55px}.toolkit-top strong{font-size:52px}.capability-head h3{font-size:27px}.capabilities article.wide{gap:25px}.mini-grid{font-size:8px}.dark-section,.split-section,.ai{padding:75px 0}.editor pre{padding:20px;font-size:11px}.modules{flex-wrap:wrap}.ai-inner>a{grid-template-columns:1fr}.ai-inner>a small{grid-row:2}.cta{padding:85px 0}body>footer>.shell{grid-template-columns:1fr;gap:18px;text-align:center}body>footer .brand{justify-content:center}body>footer nav{justify-content:center}body>footer p{order:3}}

@media(max-width:520px){.vendor-diagram{grid-template-columns:1fr}.vendor-diagram>b{display:none}.vendor-diagram>small{grid-column:1}}

/* language switch */
.lang-switch{display:flex;align-items:center;gap:5px;margin-right:18px;font:700 10px var(--mono);color:#78909b;white-space:nowrap}.lang-switch button{appearance:none;border:0;background:transparent;padding:5px 2px;font:inherit;color:inherit;cursor:pointer}.lang-switch button:hover,.lang-switch button.active{color:var(--accent)}.lang-switch button.active{text-decoration:underline;text-underline-offset:4px}.lang-switch span{opacity:.45}

/* developer experience */
.dev-experience{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:64px;align-items:center;padding:110px 0}.dev-experience .section-copy{max-width:680px}.dev-experience .section-copy>h2{font-size:48px;line-height:1.02;letter-spacing:-.05em;margin:14px 0 22px}.dev-experience .section-copy>p{max-width:620px;margin:20px 0 32px;color:var(--muted);font-size:1.05rem;line-height:1.7}.feature-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.feature-row>div{padding:18px;border:1px solid rgba(18,110,158,.16);background:rgba(138,208,245,.08)}.feature-row strong,.feature-row span{display:block}.feature-row strong{margin-bottom:8px;color:#126e9e;font-size:.92rem;font-weight:700}.feature-row span{color:var(--muted);font-size:.86rem;line-height:1.5}.try-x4{overflow:hidden;border:1px solid rgba(138,208,245,.18);background:#002a40;box-shadow:0 28px 70px rgba(0,42,64,.18),0 8px 20px rgba(0,42,64,.12)}.terminal-title{display:flex;align-items:center;height:46px;padding:0 18px;border-bottom:1px solid rgba(138,208,245,.14);background:rgba(255,255,255,.035);color:#8ad0f5;font:700 .78rem var(--mono);letter-spacing:.08em;text-transform:uppercase}.try-x4 pre{margin:0;padding:28px 30px 32px;overflow-x:auto;background:transparent}.try-x4 code{color:#d8edf7;font: .92rem/1.9 var(--mono);white-space:pre}.try-x4 .prompt{color:#8ad0f5;user-select:none}.try-x4 .terminal-ok{color:#8ad0f5;opacity:.82}

@media(max-width:1050px){.dev-experience{grid-template-columns:1fr;gap:42px}.dev-experience .section-copy{max-width:none}}
@media(max-width:900px){.lang-switch{margin-left:auto;margin-right:12px}.github{margin-left:0}}
@media(max-width:720px){.dev-experience{padding:80px 0}.feature-row{grid-template-columns:1fr}.try-x4 pre{padding:22px}.try-x4 code{font-size:.82rem}}
@media(max-width:650px){.lang-switch{margin-right:8px}.github{padding-left:12px}.dev-experience .section-copy>h2{font-size:36px}}