:root{color-scheme:light;--ink:#101218;--muted:#6f7480;--paper:#f4f0e8;--cream:#fbf9f3;--line:#ded9cd;--dark:#161920;--dark-2:#1e222b;--green:#8db98b;--green-bright:#b8d7a7;--orange:#d97b4f;--surface:#f0ece3;--surface-2:#eeeae0;--surface-border:#e2ddd1;--tint:#e4eee0;--tint-ink:#4f6650;--tint-strong:#315236;--band:#e8e5dc;--text:#626772;--metric:#6e956e;--hover-line:#a8a395;--bar:rgba(251,249,243,.9);--float:rgba(255,253,248,.92);--input:#f7f3ea;--input-focus:#fbf8f1;--btn-bg:#161920;--btn-ink:#fbf9f3;--btn-hover:#303642;--run-bg:#161920;--run-ink:#b8d7a7;--run-hover:#0c0e13;--well-line:transparent;--shadow:rgba(54,47,30,.08);--serif:Georgia,"Times New Roman",serif;--sans:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;--mono:"SFMono-Regular",Consolas,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.6}.noise{position:fixed;inset:0;pointer-events:none;opacity:.045;z-index:5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}.shell{width:min(1160px,calc(100% - 48px));margin-inline:auto}.topbar{height:82px;display:flex;align-items:center;gap:40px;padding:0 max(24px,calc((100vw - 1160px)/2));border-bottom:1px solid var(--line);background:var(--bar);position:relative;z-index:10}.brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-weight:800;text-decoration:none;letter-spacing:-.05em;font-size:21px}.brand-mark{display:grid;place-items:center;width:29px;height:29px;box-shadow:0 0 0 1px var(--well-line);background:var(--dark);color:var(--green-bright);border-radius:50%;font-family:var(--serif);font-style:italic;font-size:20px}.main-nav{display:flex;gap:27px;margin-left:auto}.main-nav a,.nav-github,.footer a{color:var(--muted);font-size:13px;text-decoration:none}.main-nav a:hover,.nav-github:hover,.footer a:hover{color:var(--ink)}.nav-github{border-left:1px solid var(--line);padding-left:27px}.nav-github span{color:var(--orange);margin-left:5px}.hero{min-height:650px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px;padding-block:74px 82px}.eyebrow{margin:0 0 18px;color:var(--orange);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.pulse{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:8px;box-shadow:0 0 0 5px rgba(141,185,139,.15)}h1,h2,h3,p{margin-top:0}.hero h1{max-width:630px;margin-bottom:24px;font-family:var(--serif);font-size:clamp(54px,6.4vw,83px);font-weight:400;line-height:.98;letter-spacing:-.065em}.hero h1 em{color:var(--orange);font-style:italic}.hero-lede{max-width:550px;color:var(--text);font-size:18px;line-height:1.7}.hero-actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;gap:25px;padding:13px 18px;text-decoration:none;font-size:13px;font-weight:750}.button-primary{background:var(--btn-bg);color:var(--btn-ink);border:1px solid var(--btn-bg)}.button-primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}.button-quiet{color:var(--ink);border:1px solid var(--line);background:transparent}.button-quiet:hover{border-color:var(--hover-line)}.hero-meta{display:flex;gap:27px;margin-top:53px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.hero-meta b{color:var(--orange);margin-right:7px}.hero-visual{height:470px;position:relative}.orbit{position:absolute;border:1px solid var(--surface-border);border-radius:50%;transform:rotate(-21deg)}.orbit-one{inset:64px 20px 72px 20px}.orbit-two{inset:10px 80px 118px 90px;transform:rotate(40deg)}.process-card{position:absolute;display:flex;flex-direction:column;gap:2px;min-width:145px;padding:15px 17px;background:var(--float);border:1px solid var(--surface-border);box-shadow:0 14px 32px var(--shadow)}.process-card strong{font-size:12px}.process-card small{font-size:10px;color:var(--muted)}.central{top:178px;left:50%;transform:translateX(-50%);width:166px;align-items:center;padding-block:20px;background:var(--dark);color:#fff8eb;border-color:var(--well-line);z-index:2}.central small{color:#aab0b7}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 0 5px rgba(184,215,167,.12);margin-bottom:6px}.card-a{top:72px;left:19px;transform:rotate(-4deg)}.card-b{top:47px;right:13px;transform:rotate(5deg)}.card-c{bottom:47px;left:96px;transform:rotate(3deg)}.mini-icon{color:var(--orange);font-size:16px}.spark{position:absolute;color:var(--orange);font-family:var(--serif);font-size:25px}.spark-one{top:8px;left:48%}.spark-two{right:8px;bottom:144px;color:var(--green)}.spark-three{left:35px;bottom:90px}.statement{background:var(--dark);color:#f9f4e9;padding:87px 0;border-block:1px solid var(--well-line)}.statement-grid{display:grid;grid-template-columns:1fr 1.8fr 1.15fr;gap:55px;align-items:start}.statement .eyebrow{color:var(--green-bright)}.statement h2{font-family:var(--serif);font-size:39px;font-weight:400;line-height:1.12;letter-spacing:-.04em}.statement p:last-child{color:#aeb1b3;font-size:15px;line-height:1.8}.section{padding-block:105px}.section-heading{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:end;margin-bottom:42px}.section-heading h2,.code-layout h2,.docs-callout h2{font-family:var(--serif);font-size:42px;font-weight:400;line-height:1.08;letter-spacing:-.045em;margin-bottom:0}.section-heading>p,.code-layout>div>p:not(.eyebrow),.docs-callout p{color:var(--muted);font-size:15px;line-height:1.8;margin-bottom:0}.feature-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px}.feature-card{min-height:245px;padding:29px;background:var(--surface);border:1px solid var(--surface-border);position:relative}.feature-card:hover{border-color:var(--hover-line)}.feature-large{grid-row:span 2;min-height:505px;background:var(--dark);color:#f9f4e9;border-color:var(--well-line)}.feature-wide{grid-column:span 2;min-height:245px;background:var(--tint)}.feature-number{font-size:11px;color:var(--orange);letter-spacing:.1em}.feature-card h3{margin:75px 0 13px;font-family:var(--serif);font-size:28px;font-weight:400;letter-spacing:-.035em}.feature-card p{color:var(--muted);font-size:14px;line-height:1.75}.feature-large p{color:#afb2b7;max-width:390px}.feature-card a,.text-link{display:inline-flex;gap:15px;margin-top:17px;color:var(--green-bright);font-size:12px;font-weight:750;text-decoration:none}.feature-card:not(.feature-large) h3{margin-top:58px;font-size:24px}.feature-wide h3{margin-top:37px}.metric{position:absolute;right:29px;bottom:28px;color:var(--metric);font-family:var(--serif);font-size:33px}.metric small{display:block;font-family:var(--sans);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.code-section{background:var(--band);padding:92px 0}.code-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:85px;align-items:center}.code-window,.code-block{background:#171a20;color:#e9eadf;border:1px solid #292e37}.code-window{box-shadow:15px 18px 0 rgba(45,49,55,.07)}.window-bar{height:38px;border-bottom:1px solid #2d333d;display:flex;align-items:center;gap:6px;padding:0 15px}.window-bar span{width:7px;height:7px;border-radius:50%;background:#555b63}.window-bar span:first-child{background:var(--orange)}.window-bar i{margin-left:auto;color:#737982;font:10px var(--mono);font-style:normal}.code-window pre,.code-block pre{margin:0;padding:25px;overflow:auto;font:13px/1.8 var(--mono)}code b{color:#d2a783;font-weight:500}code em{color:#a6cd91;font-style:normal}code{font-family:var(--mono)}.docs-callout{padding-block:105px;display:grid;grid-template-columns:.8fr 1.2fr;gap:85px}.callout-links{border-top:1px solid var(--line)}.callout-links a{display:grid;grid-template-columns:40px 1fr 1fr 25px;align-items:center;gap:12px;padding:17px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}.callout-links a:hover{color:var(--orange)}.callout-links span{font:12px var(--mono);color:var(--orange)}.callout-links b{font-size:14px}.callout-links small{color:var(--muted);font-size:12px}.callout-links strong{font-size:18px;font-weight:400}.footer{background:var(--dark);color:#9ca2a3;padding:33px 0;border-top:1px solid var(--well-line)}.footer-inner{width:min(1160px,calc(100% - 48px));margin:auto;display:flex;align-items:center;gap:25px}.footer .brand{color:#f9f4e9}.footer .brand-mark{background:var(--green);color:var(--dark)}.footer p{margin:7px 0 0;font-size:11px}.footer-links{display:flex;gap:25px;margin-left:auto}.footer-note{font:10px var(--mono);color:#6c7378}.docs-shell{padding:105px 0 135px}.docs-intro{max-width:720px;margin-bottom:54px}.docs-intro h1,.doc-content h1,.not-found h1{font-family:var(--serif);font-size:64px;line-height:1;letter-spacing:-.06em;font-weight:400;margin-bottom:23px}.docs-intro p:not(.eyebrow){max-width:630px;color:var(--muted);font-size:18px}.doc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.doc-card{min-height:320px;padding:28px;background:var(--dark);color:#f9f4e9;text-decoration:none;display:flex;flex-direction:column;border:1px solid var(--well-line)}.doc-card:hover{border-color:var(--green)}.card-index{color:var(--green-bright);font:12px var(--mono)}.doc-card h2{margin-top:auto;font:400 34px var(--serif)}.doc-card p{color:#abb0b5;font-size:14px;line-height:1.7}.doc-card>span:last-child{margin-top:20px;color:var(--green-bright);font-size:12px;font-weight:750}.docs-page{display:grid;grid-template-columns:205px 1fr;gap:92px;padding:72px 0 130px}.docs-sidebar{font-size:12px}.docs-sidebar .eyebrow{margin-bottom:23px}.docs-sidebar>a{display:block;padding:8px 0;color:var(--muted);text-decoration:none}.docs-sidebar>a:hover,.docs-sidebar>a.active{color:var(--ink);font-weight:750}.docs-sidebar>a.active{border-left:2px solid var(--orange);padding-left:12px;margin-left:-14px}.sidebar-note{margin-top:38px;padding:17px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;line-height:1.7}.doc-content{max-width:760px}.doc-content h1{font-size:58px}.doc-content h2{font:400 32px var(--serif);letter-spacing:-.035em;margin:58px 0 15px;padding-top:5px}.doc-content p{color:var(--text);font-size:15px;line-height:1.85}.doc-content .lead{font-size:19px;color:var(--text);line-height:1.7;margin-bottom:45px}.code-block{margin:24px 0 30px;position:relative}.code-label{border-bottom:1px solid #2d333d;padding:10px 17px;color:#858b91;font:10px var(--mono)}.tip{display:grid;grid-template-columns:150px 1fr;gap:20px;background:var(--tint);border-left:3px solid var(--green);padding:19px;margin:27px 0;color:var(--tint-ink);font-size:13px}.tip b{color:var(--tint-strong)}.tip span{line-height:1.7}.next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px}.next-grid a{display:flex;flex-direction:column;gap:8px;padding:17px;background:var(--surface-2);color:var(--ink);text-decoration:none;font-size:12px}.next-grid a:hover{background:var(--tint)}.next-grid span{color:var(--muted);font-size:11px}.lesson-list{border-top:1px solid var(--line)}.lesson-list>a,.lesson-muted{display:grid;grid-template-columns:45px 1fr 30px;gap:12px;padding:25px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}.lesson-list>a:hover h2{color:var(--orange)}.lesson-list span,.lesson-muted>span{font:12px var(--mono);color:var(--orange)}.lesson-list h2,.lesson-muted h2{margin:0 0 4px;font:400 24px var(--serif)}.lesson-list p,.lesson-muted p{margin:0;font-size:13px}.lesson-list b{font-size:20px;font-weight:400}.lesson-muted{opacity:.6}.layer-map{display:flex;flex-direction:column-reverse;gap:8px;margin:35px 0 50px}.layer-map>div{display:grid;grid-template-columns:45px 180px 1fr;align-items:center;padding:13px 16px;background:var(--surface-2)}.layer-map span{color:var(--orange);font:11px var(--mono)}.layer-map b{font-size:13px}.layer-map small{color:var(--muted);font-size:12px}.diagram{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:23px 18px;background:var(--dark);color:#f9f4e9;margin:25px 0;border:1px solid var(--well-line)}.diagram span{color:var(--green-bright);font:11px var(--mono)}.diagram strong{font:13px var(--serif);font-weight:400}.diagram i{color:var(--orange);font-style:normal}.explain-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:25px 0}.explain-grid>div{background:var(--surface-2);padding:20px}.explain-grid b{font-size:12px}.explain-grid p{font-size:13px;margin:9px 0 0}.ref-table{width:100%;border-collapse:collapse;margin:25px 0 42px;font-size:12px}.ref-table th,.ref-table td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}.ref-table th{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.ref-table td:first-child{color:var(--orange);font-weight:700}.api-list{border-top:1px solid var(--line);margin:25px 0 45px}.api-list div{display:grid;grid-template-columns:285px 1fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);font-size:12px}.api-list code{color:var(--orange)}.api-list span{color:var(--muted)}.not-found{padding:130px 0 180px}.not-found p:not(.eyebrow){color:var(--muted);margin-bottom:28px}
@media(max-width:850px){.main-nav{display:none}.topbar{gap:0;justify-content:space-between}.nav-github{border:0;padding:0}.hero{grid-template-columns:1fr;padding-block:60px;min-height:0}.hero-visual{height:390px;order:-1}.hero h1{font-size:57px}.statement-grid,.section-heading,.code-layout,.docs-callout{grid-template-columns:1fr;gap:22px}.feature-grid{grid-template-columns:1fr 1fr}.feature-large{grid-row:span 1;min-height:340px}.feature-wide{grid-column:span 2}.docs-page{grid-template-columns:1fr;gap:25px}.docs-sidebar{display:flex;gap:17px;align-items:center;overflow:auto;white-space:nowrap}.docs-sidebar .eyebrow,.sidebar-note{display:none}.docs-sidebar>a.active{margin-left:0;padding-left:0;border:0}.doc-cards{grid-template-columns:1fr}.docs-intro h1{font-size:52px}.doc-content h1{font-size:51px}.footer-inner{flex-wrap:wrap}.footer-note{margin-left:auto}}
@media(max-width:560px){.shell{width:min(100% - 32px,1160px)}.topbar{padding-inline:16px;height:70px}.nav-github{font-size:11px}.hero{padding-top:42px}.hero h1{font-size:49px}.hero-lede{font-size:16px}.hero-meta{gap:12px;flex-wrap:wrap;margin-top:34px}.hero-visual{height:325px;transform:scale(.82);transform-origin:left center;width:122%;margin-bottom:-42px}.statement{padding:65px 0}.statement h2{font-size:32px}.section,.docs-shell{padding-block:72px}.feature-grid{display:flex;flex-direction:column}.feature-card,.feature-large,.feature-wide{min-height:245px}.metric{position:static;display:block;margin-top:22px}.code-section{padding:65px 0}.code-layout,.docs-callout{gap:45px}.callout-links a{grid-template-columns:30px 1fr 25px}.callout-links small{display:none}.docs-page{padding-block:45px 85px}.doc-content h1{font-size:45px}.doc-content h2{font-size:29px}.tip,.explain-grid{grid-template-columns:1fr}.diagram{flex-wrap:wrap;justify-content:center}.ref-table{font-size:11px;display:block;overflow:auto;white-space:nowrap}.api-list div{grid-template-columns:1fr;gap:5px}.footer-inner{width:calc(100% - 32px)}.footer-links{margin-left:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.docs-note{padding:15px 18px;background:var(--tint);border-left:3px solid var(--green);font-size:13px!important;line-height:1.7!important}.docs-note code{color:var(--tint-ink)}.dashboard-preview{margin:28px 0 38px;padding:22px;background:var(--dark);color:#f6f1e8;border:1px solid #2d333d;box-shadow:12px 14px 0 rgba(45,49,55,.06)}.preview-top{display:flex;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #303640;font:11px var(--mono);color:#a2a9ad}.preview-top b{color:var(--green-bright);font-weight:400}.preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:22px 0}.preview-stats span{display:flex;flex-direction:column;gap:3px}.preview-stats b{font:24px var(--serif);font-weight:400}.preview-stats small{color:#858c91;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.preview-row{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-top:1px solid #303640;font-size:12px}.preview-row i{width:6px;height:6px;background:var(--green);border-radius:50%}.preview-row em{font:10px var(--mono);color:#9ca4a5;font-style:normal}@media(max-width:560px){.preview-stats b{font-size:19px}.preview-row{font-size:11px}}

.docs-subheading{margin:48px 0 18px;font:400 28px var(--serif);letter-spacing:-.03em}.concept-detail{margin:30px 0;padding:24px;background:var(--surface-2);border-top:2px solid var(--green)}.concept-detail h3{margin:0 0 12px;font:400 24px var(--serif)}.concept-detail p{margin:12px 0 0}.concept-detail ol{margin:15px 0 0;padding-left:22px;color:var(--text);font-size:14px;line-height:1.9}.concept-detail li::marker{color:var(--orange);font-family:var(--mono)}.docs-sidebar>a.sidebar-next{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink);font-weight:750}

@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--ink:#ece7dc;--muted:#9aa1ad;--paper:#1a1e26;--cream:#12151b;--line:#2b303a;--dark:#0b0d11;--dark-2:#161a21;--orange:#e58a5f;--surface:#1a1e26;--surface-2:#1d222b;--surface-border:#2b303a;--tint:#19271d;--tint-ink:#a9cfa1;--tint-strong:#c5e3b8;--band:#161a21;--text:#b4b9c2;--metric:#8db98b;--hover-line:#4a5160;--bar:rgba(18,21,27,.88);--float:rgba(29,34,43,.94);--input:#161a21;--input-focus:#1a1f27;--btn-bg:#b8d7a7;--btn-ink:#12151b;--btn-hover:#cde6bf;--run-bg:#b8d7a7;--run-ink:#12151b;--run-hover:#cde6bf;--well-line:#2b303a;--shadow:rgba(0,0,0,.35)}}
:root[data-theme=dark]{color-scheme:dark;--ink:#ece7dc;--muted:#9aa1ad;--paper:#1a1e26;--cream:#12151b;--line:#2b303a;--dark:#0b0d11;--dark-2:#161a21;--orange:#e58a5f;--surface:#1a1e26;--surface-2:#1d222b;--surface-border:#2b303a;--tint:#19271d;--tint-ink:#a9cfa1;--tint-strong:#c5e3b8;--band:#161a21;--text:#b4b9c2;--metric:#8db98b;--hover-line:#4a5160;--bar:rgba(18,21,27,.88);--float:rgba(29,34,43,.94);--input:#161a21;--input-focus:#1a1f27;--btn-bg:#b8d7a7;--btn-ink:#12151b;--btn-hover:#cde6bf;--run-bg:#b8d7a7;--run-ink:#12151b;--run-hover:#cde6bf;--well-line:#2b303a;--shadow:rgba(0,0,0,.35)}
body{transition:background-color .2s ease,color .2s ease}
.theme-toggle{display:inline-flex;align-items:center;gap:7px;margin-left:22px;padding:6px 11px;border:1px solid var(--line);background:transparent;color:var(--muted);font:600 12px var(--sans);cursor:pointer}
.theme-toggle:hover{color:var(--ink);border-color:var(--hover-line)}
.theme-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.theme-toggle[hidden]{display:none}
.theme-toggle i{font-style:normal;font-size:14px;line-height:1}
code em{color:#a6cd91}
@media(max-width:850px){.theme-toggle{margin-left:14px}}
@media(prefers-reduced-motion:reduce){body{transition:none}}

/* ── identity: display face, mark, accents ─────────────────────────────── */
@font-face{font-family:Fraunces;font-style:normal;font-weight:300 600;font-display:swap;src:url(/static/assets/fraunces-roman.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-style:italic;font-weight:300 600;font-display:swap;src:url(/static/assets/fraunces-italic.woff2) format("woff2")}
:root{--serif:Fraunces,Georgia,"Times New Roman",serif;--glow:rgba(217,123,79,.13);--glow-2:rgba(141,185,139,.16);--mark-bg:#161920}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--glow:rgba(229,138,95,.12);--glow-2:rgba(141,185,139,.1);--mark-bg:#1d222b}}
:root[data-theme=dark]{--glow:rgba(229,138,95,.12);--glow-2:rgba(141,185,139,.1);--mark-bg:#1d222b}
::selection{background:var(--orange);color:#fff8eb}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
[id]{scroll-margin-top:28px}
.hero h1{font-weight:380;letter-spacing:-.045em;line-height:.96}
.hero h1 em{font-weight:340;background:linear-gradient(100deg,var(--orange) 20%,#e9a15f 60%,var(--green) 130%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.statement h2,.section-heading h2,.code-layout h2,.docs-callout h2,.name-section h2{letter-spacing:-.03em;font-weight:380}
.docs-intro h1,.doc-content h1,.not-found h1{letter-spacing:-.04em;font-weight:380}
.doc-content h2,.feature-card h3,.doc-card h2,.lesson-list h2,.docs-subheading,.concept-detail h3,.split-panel h3,.download-card h2,.plat-card b,.data-card b{letter-spacing:-.02em}
.name-lockup{letter-spacing:-.05em}
.brand{letter-spacing:-.03em}
svg.brand-mark{display:block;width:29px;height:29px;background:none;border-radius:0;box-shadow:none;flex:none}
.brand-mark rect{fill:var(--mark-bg)}
.brand-mark path{fill:none;stroke:var(--green-bright);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.brand-mark circle{fill:var(--orange)}
.footer svg.brand-mark{background:none}
.footer .brand-mark rect{fill:var(--green)}
.footer .brand-mark path{stroke:#161920}
.brand:hover .brand-mark circle{transform-origin:16px 16px;animation:mark-orbit 1.2s ease-in-out}
@keyframes mark-orbit{to{transform:rotate(360deg)}}
.hero{position:relative}
.hero::before{content:"";position:absolute;inset:-82px -12vw auto auto;width:min(780px,70vw);height:620px;pointer-events:none;background:radial-gradient(closest-side,var(--glow-2),transparent 70%),radial-gradient(closest-side at 70% 40%,var(--glow),transparent 75%);z-index:-1}
.button{transition:background-color .15s,border-color .15s,transform .15s}
.button:hover{transform:translateY(-1px)}
.button span{transition:transform .15s}
.button:hover span{transform:translateX(3px)}
.feature-card,.doc-card,.data-card,.plat-card,.next-grid a,.download-card{transition:border-color .2s,transform .2s,box-shadow .2s,background-color .2s}
.doc-card:hover,.data-card:hover,.plat-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px var(--shadow)}
.callout-links a strong,.lesson-list b{transition:transform .15s}
.callout-links a:hover strong,.lesson-list>a:hover b{transform:translateX(5px)}
.main-nav a{position:relative}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.main-nav a:hover::after{transform:scaleX(1)}

/* ── the live hero ─────────────────────────────────────────────────────── */
.hero-visual{height:540px}
.orbit-one{inset:64px 20px 142px 20px}
.orbit-two{inset:10px 80px 188px 90px}
.card-c{bottom:117px}
.spark-two{bottom:214px}
.spark-three{bottom:160px}
.live-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:16px;min-height:52px}
.live-bar p{margin:0;color:var(--muted);font-size:12px;line-height:1.55;max-width:400px}
.live-start{flex:none;padding:10px 16px;border:1px solid var(--orange);background:transparent;color:var(--orange);font:750 12px var(--sans);letter-spacing:.02em;cursor:pointer;transition:background-color .15s,color .15s}
.live-start:hover{background:var(--orange);color:#fff8eb}
.live-start:disabled{opacity:.6;cursor:progress}
.live-start[hidden]{display:none}
.live-crash{display:none;position:absolute;top:8px;right:8px;width:24px;height:24px;padding:0;border:1px solid var(--surface-border);border-radius:50%;background:transparent;font-size:12px;line-height:1;cursor:pointer;transition:border-color .15s,transform .15s}
.live-crash:hover{border-color:var(--orange);transform:scale(1.12)}
.is-live .live-crash{display:block}
.is-live .process-card small{font-family:var(--mono);font-size:10px}
.is-live .process-card{transition:border-color .25s,opacity .25s,background-color .25s}
.live-mail{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(217,123,79,.2);pointer-events:none;z-index:3}
.live-sent{animation:live-sent .5s ease-out}
@keyframes live-sent{30%{border-color:var(--green)}}
.live-crashed{animation:live-crashed 1.1s ease-out}
@keyframes live-crashed{0%{border-color:#d1543b;background:rgba(209,84,59,.16)}10%{translate:-4px 0}20%{translate:4px 0}30%{translate:-3px 0}40%{translate:2px 0;border-color:#d1543b}60%{translate:0 0;border-color:var(--green);background:rgba(141,185,139,.18)}100%{}}
.live-restarting .status-dot{animation:live-ring 1.1s ease-out}
@keyframes live-ring{0%{box-shadow:0 0 0 0 rgba(184,215,167,.7)}100%{box-shadow:0 0 0 22px rgba(184,215,167,0)}}
.live-down{opacity:.45}
.live-down strong{text-decoration:line-through}

/* ── code actions: copy and run ────────────────────────────────────────── */
.code-label,.window-bar{position:relative}
.code-actions{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;gap:6px}
.window-bar .code-actions{position:static;transform:none;margin-left:14px}
.code-action{padding:3px 9px;border:1px solid #333a45;background:transparent;color:#9aa1a8;font:10px var(--mono);cursor:pointer;transition:color .15s,border-color .15s,background-color .15s}
.code-action:hover{color:#f3efe6;border-color:#5a6270}
.code-run{color:#b8d7a7;border-color:#4d6a4c}
.code-run:hover{background:#b8d7a7;color:#12151b;border-color:#b8d7a7}
.code-action:disabled{opacity:.5;cursor:progress}
.run-out{margin:0;padding:16px 25px;border-top:1px solid #2d333d;background:#0e1014;color:#b8d7a7;font:12.5px/1.75 var(--mono);white-space:pre-wrap}
.run-out.run-bad{color:#e8a087}
.run-out[hidden]{display:none}
.run-out::before{content:"output";display:block;margin-bottom:6px;color:#6c737b;font-size:10px;letter-spacing:.08em;text-transform:uppercase}

/* ── terminal replays ──────────────────────────────────────────────────── */
.term{margin:28px 0 34px;background:#0e1014;color:#d9dbd2;border:1px solid #292e37;box-shadow:15px 18px 0 var(--shadow)}
.term-bar{height:38px;border-bottom:1px solid #2d333d;display:flex;align-items:center;gap:6px;padding:0 15px}
.term-bar span{width:7px;height:7px;border-radius:50%;background:#555b63}
.term-bar span:first-child{background:var(--orange)}
.term-bar i{margin-left:10px;color:#737982;font:10px var(--mono);font-style:normal}
.term-play{margin-left:auto;padding:3px 10px;border:1px solid #333a45;background:transparent;color:#9aa1a8;font:10px var(--mono);cursor:pointer}
.term-play:hover{color:#f3efe6;border-color:#5a6270}
.term-play[hidden]{display:none}
.term-lines{list-style:none;margin:0;padding:20px 22px;min-height:230px;max-height:420px;overflow:auto;font:12.5px/1.8 var(--mono)}
.term-lines li{white-space:pre-wrap;overflow-wrap:anywhere}
.term-lines li[hidden]{display:none}
.term-cmd{color:#f3efe6}
.term-cmd::before{content:"$ ";color:var(--green)}
.term-key{color:#e8a087}
.term-bad{color:#e8a087}
.term-good{color:#b8d7a7}
.term-playing .term-lines li:not([hidden]):last-of-type::after,.term-playing .term-lines li:not([hidden]):not(:has(~ li:not([hidden])))::after{content:"▍";color:var(--green);animation:term-caret 1s steps(2) infinite}
@keyframes term-caret{50%{opacity:0}}
.term figcaption,.shot figcaption{padding:10px 22px;border-top:1px solid #2d333d;color:#737982;font-size:11px}
.replay-section .term{margin:0}
.shot{margin:28px 0 38px;background:#0e1014;border:1px solid #292e37;box-shadow:12px 14px 0 var(--shadow)}
.shot img{display:block;width:100%;height:auto}

/* ── motion: the diagrams move, when motion is welcome ─────────────────── */
@media(prefers-reduced-motion:no-preference){
.orbit-one{animation:orbit-a 46s linear infinite}
.orbit-two{animation:orbit-b 62s linear infinite}
@keyframes orbit-a{from{transform:rotate(-21deg)}to{transform:rotate(339deg)}}
@keyframes orbit-b{from{transform:rotate(40deg)}to{transform:rotate(-320deg)}}
.hero-visual:not(.is-live) .card-a{animation:bob 7s ease-in-out infinite}
.hero-visual:not(.is-live) .card-b{animation:bob 8s ease-in-out -2s infinite}
.hero-visual:not(.is-live) .card-c{animation:bob 9s ease-in-out -4s infinite}
@keyframes bob{50%{translate:0 -7px}}
.pulse,.status-dot{animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 0 9px rgba(141,185,139,0)}}
.spark{animation:twinkle 4s ease-in-out infinite}
.spark-two{animation-delay:-1.3s}
.spark-three{animation-delay:-2.6s}
@keyframes twinkle{50%{opacity:.25;scale:.8}}
/* A message travelling the path a diagram draws. */
.diagram{position:relative;overflow:hidden}
.diagram::after{content:"";position:absolute;top:50%;left:0;width:9px;height:9px;margin-top:17px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(217,123,79,.22);animation:travel 4.2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes travel{0%{left:2%;opacity:0}10%{opacity:1}88%{opacity:1}100%{left:96%;opacity:0}}
.diagram i{animation:nudge 4.2s ease-in-out infinite}
.diagram i:nth-of-type(2){animation-delay:.9s}
.diagram i:nth-of-type(3){animation-delay:1.8s}
.diagram i:nth-of-type(4){animation-delay:2.7s}
@keyframes nudge{8%{translate:4px 0;color:var(--green-bright)}20%{translate:0 0}}
/* The layers of the architecture light up from the bottom, in order. */
.layer-map>div{animation:layer 7.5s ease-in-out infinite}
.layer-map>div:nth-child(1){animation-delay:6s}
.layer-map>div:nth-child(2){animation-delay:4.5s}
.layer-map>div:nth-child(3){animation-delay:3s}
.layer-map>div:nth-child(4){animation-delay:1.5s}
@keyframes layer{0%,14%,100%{box-shadow:inset 0 0 0 var(--orange)}5%{box-shadow:inset 3px 0 0 var(--orange)}}
/* "Let it crash": the card's number blinks out and comes back. */
.feature-card:nth-child(2) .feature-number{animation:restart 6s steps(1) infinite}
@keyframes restart{0%{opacity:1}46%{opacity:0}50%{opacity:1;color:var(--green)}62%{color:var(--orange)}}
.practice-timeline>div{animation:layer 9s ease-in-out infinite}
.practice-timeline>div:nth-child(2){animation-delay:1.5s}
.practice-timeline>div:nth-child(3){animation-delay:3s}
.practice-timeline>div:nth-child(4){animation-delay:4.5s}
.practice-timeline>div:nth-child(5){animation-delay:6s}
.practice-timeline>div:nth-child(6){animation-delay:7.5s}
}
/* Sections rise into view as they are scrolled to, where the browser can. */
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
.feature-card,.data-card,.plat-card,.doc-card,.split-panel,.term,.shot,.code-window,.callout-links a,.lesson-list>a{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
}}
@media(max-width:850px){.hero-visual{height:460px}.live-bar{flex-direction:column;align-items:flex-start;gap:8px}}
@media(max-width:560px){.hero-visual{height:420px}.term-lines{padding:16px;font-size:11.5px}.code-copy{display:none}}
html,body{overflow-x:clip}
.code-window pre,.code-block pre,.run-out,.term-lines{tab-size:4}
.is-live .process-card:not(.central){min-width:178px}
.is-live .card-b{right:0}
/* ── words a page relies on, and the glossary ──────────────────────────── */
.words{margin:0 0 46px;padding:20px 22px 16px;background:var(--surface-2);border-left:3px solid var(--orange)}
.words .eyebrow{margin-bottom:12px}
.words dl,.glossary{margin:0;display:grid;gap:9px}
.words dl>div{display:grid;grid-template-columns:132px 1fr;gap:14px;font-size:13px;line-height:1.6}
.words dt,.glossary dt{font-weight:750;color:var(--ink)}
.words dd,.glossary dd{margin:0;color:var(--text)}
.words>a{display:inline-block;margin-top:14px;color:var(--orange);font-size:12px;font-weight:750;text-decoration:none}
.words>a:hover{text-decoration:underline}
.words code,.glossary code{font-size:12px;color:var(--tint-ink)}
.glossary{gap:0;border-top:1px solid var(--line);margin:30px 0 40px}
.glossary>div{display:grid;grid-template-columns:190px 1fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.7}
.glossary>div:target{background:var(--tint)}
@media(max-width:560px){.words dl>div,.glossary>div{grid-template-columns:1fr;gap:2px}}