/* Wakeshift · the landing page, light and dark. Only the landing page loads
   this file; every other page uses site.css. Text and headings are
   Instrument Sans (SIL Open Font License, static/fonts/instrument-sans-OFL.txt),
   served from the site itself so every system shows the same page: no
   external requests. Code and labels use the system's monospace font.

   The type scale: labels 12px (mono, uppercase, .1em), small text and code
   13, secondary text 14.5,
   body 15, lead 17, card titles 20 (600, 1.3); section headings, the hero
   and the close scale with the viewport, at 600 with tightened tracking,
   in rem so they follow the reader's font size. */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/instrument-sans.woff2?v=2ee17598a98d8a59) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400 700;font-display:swap;src:url(/static/fonts/instrument-sans-italic.woff2?v=77210cdde0281b5e) format("woff2")}
/* Charis SIL (SIL Open Font License, fonts/charis-sil-OFL.txt), served from the site: the serif for headings and the wordmark. */
@font-face{font-family:"Charis SIL";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/charis-sil.woff2?v=3c8fa875bfeb3ca1) format("woff2")}
@font-face{font-family:"Charis SIL";font-style:italic;font-weight:400;font-display:swap;src:url(/static/fonts/charis-sil-italic.woff2?v=b786ebf8ad9578e6) format("woff2")}
@font-face{font-family:"Charis SIL";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/charis-sil-bold.woff2?v=b74180e80da234f3) format("woff2")}
@font-face{font-family:"Charis SIL";font-style:italic;font-weight:700;font-display:swap;src:url(/static/fonts/charis-sil-bold-italic.woff2?v=ae75f246ba9af7d9) format("woff2")}
/* Until Instrument Sans loads, Arial stands in at its size and line metrics, so the swap moves nothing. */
@font-face{font-family:"Instrument Sans Fallback";src:local("Arial"),local("ArialMT");size-adjust:101.9%;ascent-override:95.2%;descent-override:24.5%;line-gap-override:0%}
:root{
  /* Text weight by size: small gray text a touch heavier on the light
     background; on dark, light text reads heavier, so small text comes down
     (body text is already at the font's lightest weight, 400). */
  --w-body:400; --w-small:450;
  /* Two text inks: --ink and --ink-2. --ink-3 is for edges and marks (hover borders, chevrons), never text. */
  --bg:#F7F3EA; --bg-2:#EFE8DA; --card:#FFFDF8; --card-2:#FBF7EF;
  --ink:#1D1B17; --ink-2:#4A463E; --ink-3:#6B665B; --rule:#E3DACA; --rule-2:#D3C8B3;
  --accent:#C25418; --accent-text:#A9460F; --accent-2:#E39A6E; --accent-soft:#F8E4D4; --accent-glow:rgba(194,84,24,.22);
  --sage:#3E6B55; --sage-soft:#DFEBE2;
  --code-bg:#1B1915; --code-bar:#24211C; --code-rule:#34302A; --code-ink:#ECE6D9; --code-dim:#5E5950;
  --code-dot:#3A362F; --code-tab:#9C968A; --code-tab-on:#34302A; --code-file:#8A8478; --code-install:#24211C; --code-install-ink:#CFC8BA;
  --syn-k:#EE9C68; --syn-s:#BBD6A6; --syn-c:#8C867A; --syn-f:#F3CB7E; --syn-t:#A9C5E2; --syn-p:#CDB8EA;
  --shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(40,25,5,.06), 0 18px 40px -24px rgba(60,35,10,.28);
  --serif:"Charis SIL",Charter,"Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Instrument Sans","Instrument Sans Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --round:ui-rounded,"SF Pro Rounded","Nunito","Varela Round",-apple-system,sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --max:1240px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --w-small:420;
    --bg:#14120F; --bg-2:#1A1713; --card:#1F1B16; --card-2:#24201A;
    --ink:#F3EDE1; --ink-2:#C9C1B2; --ink-3:#9B9385; --rule:#2F2A23; --rule-2:#433C32;
    --accent:#EC854A; --accent-text:#F09A64; --accent-2:#F2B48C; --accent-soft:#3A2417; --accent-glow:rgba(236,133,74,.25);
    --sage:#7FB79A; --sage-soft:#1E2C24;
    --code-bg:#0F0E0C; --code-bar:#171512; --code-rule:#2A2621;
    --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.7);
  }
}
:root[data-theme=dark]{
    --w-small:420;
    --bg:#14120F; --bg-2:#1A1713; --card:#1F1B16; --card-2:#24201A;
    --ink:#F3EDE1; --ink-2:#C9C1B2; --ink-3:#9B9385; --rule:#2F2A23; --rule-2:#433C32;
    --accent:#EC854A; --accent-text:#F09A64; --accent-2:#F2B48C; --accent-soft:#3A2417; --accent-glow:rgba(236,133,74,.25);
    --sage:#7FB79A; --sage-soft:#1E2C24;
    --code-bg:#0F0E0C; --code-bar:#171512; --code-rule:#2A2621;
    --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.7);
  }
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);font-family:var(--sans);font-weight:var(--w-body);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
main{overflow-x:clip}
a{color:inherit;text-decoration:none}
img,svg{display:block}
code{font-family:var(--mono)}
p,li{text-wrap:pretty}
.wrap{max-width:calc(var(--max) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter);width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;z-index:10;font-weight:600}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Orange marks what you can act on (the main button, links) and the wake
   (the hero's words and illustration). Labels, numbers and icons are ink. */
.kicker{font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
h1,h2,h3{font-weight:600;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:clamp(2rem,0.5rem + 3.50vw,3rem);line-height:1.08;margin-top:14px}
h3{letter-spacing:-.008em}
/* Headings are set in Charis SIL (served from the site, with Charter, Palatino and Georgia after it); body text and card titles stay in Instrument Sans. */
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
h2 em,h1 em{font-style:italic;color:var(--accent)}
section{scroll-margin-top:24px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px var(--sans);padding:13px 22px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
/* Hover shifts a button's fill toward the page; nothing lifts or casts a shadow. */
.btn:hover{background:color-mix(in srgb,var(--ink) 86%,var(--bg))}
/* The hero's main button: white on the dark page (ink on the light one), and on hover a warm tint fills it from the bottom. */
.btn.accent{--btn-fill:var(--ink);--btn-text:var(--bg);position:relative;isolation:isolate;overflow:hidden;background:var(--btn-fill);border-color:var(--btn-fill);color:var(--btn-text)}
.btn.accent::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:color-mix(in srgb,var(--accent) 22%,var(--btn-fill));transform:scaleY(0);transform-origin:bottom;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn.accent:hover{background:var(--btn-fill);border-color:var(--btn-fill)}
.btn.accent:hover::before,.btn.accent:focus-visible::before{transform:scaleY(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .btn.accent{--btn-fill:#fff;--btn-text:#14120F}}:root[data-theme=dark] .btn.accent{--btn-fill:#fff;--btn-text:#14120F}
@media (prefers-reduced-motion:reduce){.btn.accent::before{transition:none}}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.ghost:hover{background:transparent;border-color:var(--ink-3)}
.btn.sm{padding:8px 15px;font-size:14.5px}

/* A trailing arrow, drawn from arrow.svg in the text's color: the fonts' Latin subsets have no arrow characters. */
.go::after{content:"";display:inline-block;width:.85em;height:.85em;margin-left:.3em;vertical-align:-.1em;background:currentColor;-webkit-mask:url(/static/arrow.svg?v=f825034a508796f6) center/contain no-repeat;mask:url(/static/arrow.svg?v=f825034a508796f6) center/contain no-repeat}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px}
/* Sticky nav: flat at the top of the page; once scrolled (nav.js sets .is-scrolled) it draws in to a floating, blurred glass pill. */
.nav{position:sticky;top:0;z-index:40;transition:padding .3s ease,border-color .3s ease}
.nav::before{content:"";position:absolute;z-index:-1;inset:8px var(--gutter);border-radius:999px;border:1px solid transparent;pointer-events:none;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease,backdrop-filter .3s ease,-webkit-backdrop-filter .3s ease}
.nav.is-scrolled{padding-block:20px;padding-inline:calc(var(--gutter) + 12px);border-bottom-color:transparent}
.nav.is-scrolled .logo{margin-left:12px}
.nav.is-scrolled::before{background:color-mix(in srgb,var(--bg) 72%,transparent);border-color:var(--rule);box-shadow:0 14px 34px -22px color-mix(in srgb,var(--ink) 45%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}
@media (prefers-reduced-motion:reduce){.nav,.nav::before{transition:none}}
@media (max-width:860px){.nav::before{inset-inline:8px}.nav.is-scrolled{padding-inline:var(--gutter)}}
.logo{display:flex;align-items:center;gap:10px;font:600 21px var(--serif);letter-spacing:-.01em}
.logo svg{width:34px;height:22px}
.nav-links{display:flex;gap:32px;list-style:none;font-size:15px;color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
.nav-actions{display:flex;gap:10px;align-items:center}
.nav-m{display:none;position:relative}
.nav-m summary{list-style:none;cursor:pointer}
.nav-m summary::-webkit-details-marker{display:none}
.nav-m-list{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:240px;padding:6px;list-style:none;background:var(--card);border:1px solid var(--rule);border-radius:12px;box-shadow:0 18px 40px -20px rgba(40,25,5,.35)}
.nav-m-list a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink-2);font-size:15px}
.nav-m-list a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
/* nav: the use-case pages under "Use cases", on hover or keyboard focus */
.menu{position:relative}
.menu>a::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.6}
.menu-list{display:none;position:absolute;top:100%;left:-14px;z-index:20;min-width:250px;margin-top:10px;padding:6px;list-style:none;background:var(--card);border:1px solid var(--rule);border-radius:12px;box-shadow:0 18px 40px -20px rgba(40,25,5,.35)}
.menu-list::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.menu:hover .menu-list,.menu:focus-within .menu-list{display:block}
.menu.shut .menu-list{display:none}
.menu-list a{display:block;padding:8px 12px;border-radius:8px;color:var(--ink-2);white-space:nowrap}
.menu-list a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
/* The current page: full ink and heavier in the nav, a filled pill in the menus; the "Use cases" label too, when one of its pages is open. */
.nav-links a[aria-current=page],.menu:has([aria-current=page])>a{color:var(--ink);font-weight:600}
.menu-list a[aria-current=page],.nav-m-list a[aria-current=page]{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent);font-weight:600}

/* hero */
.hero{position:relative;padding-block:56px 72px;display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:40px;align-items:center}
.hero h1{font-size:clamp(2.125rem,0.5rem + 4.04vw,4.125rem);line-height:1.02;letter-spacing:-.025em;margin:24px 0 24px}
.lede{font-size:clamp(1.125rem,0.5rem + 1.05vw,1.3125rem);line-height:1.55;color:var(--ink-2);max-width:540px;text-wrap:balance}
.nb{white-space:nowrap}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* The coding-agent prompt, at the foot of the hero across both columns: a heading over the prompt, centred. */
.prompt{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.prompt-hd{margin:0;font-size:clamp(1.375rem,1rem + 1.2vw,1.75rem);line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.agent-logos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 18px;color:var(--ink-3);margin-top:4px}
/* Each logo darkens on hover and shows its name in a tooltip above it (data-tip; screen readers get the hidden name instead). */
.agent-logos li{position:relative;display:flex;padding:4px;transition:color .15s ease}
.agent-logos li:hover{color:var(--ink)}
.agent-logos li::after,.agent-logos li::before{position:absolute;left:50%;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}
.agent-logos li::after{content:attr(data-tip);bottom:calc(100% + 8px);transform:translate(-50%,4px);padding:6px 10px;border-radius:8px;background:var(--ink);color:var(--bg);font:600 12.5px/1 var(--sans);white-space:nowrap;box-shadow:0 8px 20px -10px color-mix(in srgb,var(--ink) 50%,transparent)}
.agent-logos li::before{content:"";bottom:calc(100% + 3px);width:10px;height:10px;margin-left:-5px;background:var(--ink);border-radius:2px;transform:translateY(4px) rotate(45deg)}
.agent-logos li:hover::after{opacity:1;transform:translate(-50%,0)}
.agent-logos li:hover::before{opacity:1;transform:translateY(0) rotate(45deg)}
@media (prefers-reduced-motion:reduce){.agent-logos li,.agent-logos li::after,.agent-logos li::before{transition:none}}
.agent-logos .lg{width:22px;height:22px;fill:currentColor}
.agents-more{font-size:15px;font-weight:600;color:var(--accent-text)}
.agents-more:hover{color:var(--accent)}
/* The languages, inside the dark prompt card: a label, the three SDKs and the link for any other language. */
.prompt-stack{display:flex;flex-direction:column;align-items:center;gap:14px}
.prompt-stack-hd{font:600 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--pc-ink-2)}
.prompt-stack .chips{justify-content:center}
.prompt-stack .chip{color:var(--pc-ink)}
.prompt-stack .chip .lg{color:#fff}
.prompt-stack .chip.sdk a{border-bottom:0;padding-bottom:0;transition:color .15s}
.prompt-stack .chip.sdk a:hover{color:#E89A6A}
.prompt-stack .chip.more{color:#E89A6A}
.prompt-stack .chip.more a:hover{color:#F5B48C}
.prompt-box{width:min(100%,720px);text-align:left;display:flex;align-items:center;gap:12px;padding:9px 9px 9px 14px;border:1px solid var(--rule);border-radius:12px;background:var(--card)}
.prompt-box code{flex:1;min-width:0;font:13px/1.5 var(--mono);color:var(--ink);overflow-wrap:anywhere;user-select:all}
.copy{flex:none;font:600 13px var(--sans);padding:6px 13px;border-radius:999px;border:1px solid var(--rule-2);background:transparent;color:var(--ink-2);cursor:pointer}
.copy:hover{border-color:var(--ink-3);color:var(--ink)}
/* Copying the prompt: the button pops and fills white with a tick, and a light sweeps across the prompt (copy.js adds .is-copied for two seconds). */
.prompt .prompt-box{position:relative;overflow:hidden}
.prompt .prompt-box::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(232,154,106,.28) 50%,transparent 70%);transform:translateX(-100%);opacity:0}
.prompt .prompt-box.is-copied{border-color:rgba(232,154,106,.7);transition:border-color .2s}
.prompt .prompt-box.is-copied::after{animation:copy-sweep .8s cubic-bezier(.3,.6,.3,1)}
.prompt .copy.is-copied{display:inline-flex;align-items:center;gap:6px;background:#fff;border-color:#fff;color:#1A0F08;animation:copy-pop .45s cubic-bezier(.3,1.6,.5,1)}
.prompt .copy.is-copied::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:url(/static/check.svg?v=00c08e4243e90dfe) center/12px no-repeat;mask:url(/static/check.svg?v=00c08e4243e90dfe) center/12px no-repeat;animation:copy-tick .35s .1s both}
@keyframes copy-sweep{0%{transform:translateX(-100%);opacity:1}100%{transform:translateX(100%);opacity:1}}
@keyframes copy-pop{0%{transform:scale(.9)}100%{transform:none}}
@keyframes copy-tick{from{transform:scale(0)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.prompt .prompt-box.is-copied::after,.prompt .copy.is-copied,.prompt .copy.is-copied::before{animation:none}}
/* ...on a dark card, behind which prompt-shader.js runs Spirehawk's Grain Gradient shader in Wakeshift's ember colors. The canvas rules are the shader library's own (its inline <style> is refused by the CSP). */
.prompt{--pc-bg:#1D1B17;--pc-ink:#F5F1E8;--pc-ink-2:#BDB6A6;--pc-rule:rgba(245,241,232,.16);position:relative;isolation:isolate;overflow:hidden;margin-top:24px;padding:56px clamp(20px,5vw,64px);border-radius:28px;background:var(--pc-bg);color:var(--pc-ink)}
.prompt>:not(.prompt-shader):not(.sr-only){position:relative;z-index:1}
.prompt-shader{position:absolute;inset:0;z-index:0;opacity:.7;pointer-events:none;border-radius:inherit}
.prompt-shader canvas{contain:strict;display:block;position:absolute;inset:0;width:100%;height:100%;border-radius:inherit}
.prompt .prompt-hd{color:var(--pc-ink)}
.prompt .prompt-box{border-radius:100px;padding-left:22px;background:rgba(20,18,15,.6);border-color:var(--pc-rule);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.prompt .prompt-box code{color:var(--pc-ink)}
.prompt .copy{color:var(--pc-ink-2);border-color:rgba(245,241,232,.28)}
.prompt .copy:hover{color:var(--pc-ink);border-color:rgba(245,241,232,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .prompt{--pc-bg:#0F0E0C;border:1px solid var(--rule)}}:root[data-theme=dark] .prompt{--pc-bg:#0F0E0C;border:1px solid var(--rule)}

/* hero illustration */
.scene{position:relative;width:100%;max-width:480px;justify-self:center}
.scene svg{width:100%;height:auto;overflow:visible}
.scene text{font-family:var(--sans)}
.s-panel{fill:none}
.s-label{font-family:var(--sans)!important;font-weight:600;font-size:10.5px;letter-spacing:1.2px;fill:var(--ink-2)}
.s-card{fill:var(--card);stroke:var(--rule-2);stroke-width:1}
.s-ink{fill:var(--ink)} .s-ink2{fill:var(--ink-2)} .s-ink3{fill:var(--ink-2)}
.s-mono,.s-mono tspan{font-family:var(--mono)!important}
.s-serif{font-family:var(--serif)!important;letter-spacing:-.01em}
.s-track{fill:none;stroke:var(--rule-2);stroke-width:2;stroke-linecap:round}
.s-arrow{fill:none;stroke:var(--rule-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s-comet{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:34 300;stroke-dashoffset:34;opacity:0}
.s-hub{fill:var(--card);stroke:var(--rule-2)}
.s-hubglow{fill:var(--accent-glow);opacity:0}
.s-ring{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:0;transform-origin:center;transform-box:fill-box}
.s-sagesoft{fill:var(--sage-soft)}
.s-accsoft{fill:var(--accent-soft)}
.s-shadow{filter:drop-shadow(0 10px 18px rgba(60,35,10,.12))}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .s-shadow{filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}}:root[data-theme=dark] .s-shadow{filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.s-zz,.s-idle{opacity:1}
.s-name{opacity:0}.s-name.n1{opacity:1}
.s-awake,.s-line1,.s-line2,.s-line3,.s-cursor{opacity:0}
.s-done{transform-origin:center;transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
  .s-done{animation:pop 3.6s ease-out infinite}
  .s-c1{animation:c1 3.6s linear infinite}
  .s-c2{animation:c2 3.6s linear infinite}
  .s-ring.r1{animation:ring 3.6s ease-out infinite}
  .s-hubglow{animation:hubglow 3.6s ease-out infinite}
  .s-zz{animation:zz 3.6s ease-in-out infinite}
  .s-idle{animation:idle 3.6s linear infinite}
  .s-awake{animation:awake 3.6s linear infinite}
  .s-line1{animation:l1 3.6s linear infinite}
  .s-line2{animation:l2 3.6s linear infinite}
  .s-line3{animation:l3 3.6s linear infinite}
  .s-cursor{animation:cur 3.6s steps(1) infinite}
  .s-agentcard{animation:agentcard 3.6s ease-out infinite}
  .s-zfloat{animation:zfloat .94s ease-in-out infinite}
  /* The agent changes with each loop, three loops to a turn. */
  .s-name.n1{animation:name1 10.8s steps(1) infinite}
  .s-name.n2{animation:name2 10.8s steps(1) infinite}
  .s-name.n3{animation:name3 10.8s steps(1) infinite}
}
@media (prefers-reduced-motion:reduce){
  .s-zz,.s-idle{opacity:0}
  .s-awake,.s-line1,.s-line2,.s-line3{opacity:1}
  .s-track,.s-arrow{stroke:var(--accent)}
}
@keyframes pop{0%,4.8%{transform:scale(.6);opacity:0}8.8%{transform:scale(1.08);opacity:1}12%,92%{transform:scale(1);opacity:1}100%{opacity:0}}
@keyframes c1{0%,11.2%{stroke-dashoffset:34;opacity:0}12%{opacity:1}24%{stroke-dashoffset:-100;opacity:1}24.8%,100%{opacity:0;stroke-dashoffset:-100}}
/* A gentle pulse from the hub when an event passes through: one faint ring that barely grows, and a soft glow. */
@keyframes ring{0%,24.8%{opacity:0;transform:scale(1)}27%{opacity:.3}44%,100%{opacity:0;transform:scale(1.05,1.18)}}
@keyframes hubglow{0%,24%{opacity:0}30%{opacity:.45}52%,100%{opacity:0}}
@keyframes c2{0%,30.4%{stroke-dashoffset:34;opacity:0}31.2%{opacity:1}43.2%{stroke-dashoffset:-100;opacity:1}44%,100%{opacity:0;stroke-dashoffset:-100}}
@keyframes zz{0%,43.2%{opacity:1}46.4%,96%{opacity:0}100%{opacity:1}}
@keyframes idle{0%,44%{opacity:1}44.8%,97%{opacity:0}100%{opacity:1}}
@keyframes awake{0%,44%{opacity:0}44.8%,96%{opacity:1}100%{opacity:0}}
@keyframes l1{0%,46.4%{opacity:0}48.8%,96%{opacity:1}100%{opacity:0}}
@keyframes l2{0%,52.8%{opacity:0}55.2%,96%{opacity:1}100%{opacity:0}}
@keyframes l3{0%,59.2%{opacity:0}61.6%,96%{opacity:1}100%{opacity:0}}
@keyframes cur{0%,61.6%{opacity:0}64%{opacity:1}67.2%{opacity:0}70.4%{opacity:1}73.6%{opacity:0}76.8%{opacity:1}80%{opacity:0}83.2%{opacity:1}86.4%,100%{opacity:0}}
@keyframes agentcard{0%,44%{stroke:var(--rule-2)}48.8%,94%{stroke:var(--accent-2)}100%{stroke:var(--rule-2)}}
@keyframes name1{0%{opacity:1}33.333%,100%{opacity:0}}
@keyframes name2{0%{opacity:0}33.333%{opacity:1}66.667%,100%{opacity:0}}
@keyframes name3{0%,33.333%{opacity:0}66.667%,100%{opacity:1}}
@keyframes zfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* works with */
.works{padding-block:8px 72px}
.works-in{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:baseline;gap:12px 40px;padding-block:22px;border-top:1px solid var(--rule)}
.works-in:last-child{border-bottom:1px solid var(--rule)}
.works-in p{font:600 12px/1.6 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.chips{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.chip{display:inline-flex;align-items:center;gap:9px;font:500 17px/1.4 var(--sans);color:var(--ink);letter-spacing:-.005em}
.chip .lg{flex:none;width:18px;height:18px;fill:currentColor;color:var(--ink-2)}
/* Go's logo is a wordmark, about 2.7 times as wide as it is tall: a wider slot so it reads at the others' size. */
.chip .lg.lg-go{width:36px;height:14px}
.chip a{color:inherit;transition:color .15s}
.chip.sdk a{border-bottom:1px solid var(--rule-2);padding-bottom:1px}
.chip.sdk a:hover{border-color:var(--ink-3)}
.chip.more{font-size:15px;font-weight:600;color:var(--accent-text)}
.chip.more a:hover{color:var(--accent)}
/* The languages row: its label, list and link, centred. */
.works-in.works-center{border-block:0;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.works-center .chips{justify-content:center}

/* section frame */
.sect{padding-block:96px}
.sect-hd{display:grid;gap:32px;margin-bottom:48px}

/* use cases: the three waits */
.statement{margin-top:0;max-width:66ch;font:400 clamp(1.0625rem,0.5rem + 0.87vw,1.1875rem)/1.55 var(--sans);color:var(--ink)}
.waits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.wait{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:28px;transition:border-color .2s}
.wait:hover{border-color:var(--ink-3)}
.wait .ic{display:flex;color:var(--ink-2);margin-bottom:16px}
.wait .n{font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.wait h3{font-size:20px;line-height:1.3;margin-top:10px}
.wait p{font-size:15px;line-height:1.6;color:var(--ink-2);margin-top:10px}
.wait .more{margin-top:auto;padding-top:18px;font:600 14.5px var(--sans);color:var(--accent-text)}

/* how it works */
.flow{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;position:relative;counter-reset:step}
.step{position:relative;z-index:1;background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:28px}
/* Each step's illustration runs the card's full width, flush with its top edge; only its tint sets it apart from the text. */
.step .art{height:150px;border-radius:15px 15px 0 0;background:var(--card-2);display:grid;place-items:center;margin:-28px -28px 24px;overflow:hidden}
.step .art svg{width:100%;height:100%}
.step .n{font:600 12px var(--sans);letter-spacing:.08em;color:var(--ink-2);text-transform:uppercase}
.step h3{font-size:20px;line-height:1.3;margin:8px 0 8px}
.step p{font-size:15px;line-height:1.6;color:var(--ink-2)}
.step code{white-space:nowrap;font-size:13px;background:var(--bg-2);border:1px solid var(--rule);padding:1px 6px;border-radius:5px;color:var(--ink)}

/* code */
.dev{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:56px;align-items:center}
/* The three calls as a vertical timeline: a ring for each, joined by a line down to the next. */
.calls{list-style:none;margin-top:32px;display:grid}
.calls li{position:relative;padding:0 0 26px 34px}
.calls li:last-child{padding-bottom:0}
.calls li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:2px solid var(--accent);background:var(--bg)}
.calls li::after{content:"";position:absolute;left:6px;top:23px;bottom:4px;width:2px;border-radius:1px;background:color-mix(in srgb,var(--ink-3) 40%,transparent)}
.calls li:last-child::after{display:none}
.calls .call{display:block;font:600 15px/1.6 var(--sans);color:var(--ink)}
.calls p{font-size:15px;color:var(--ink-2);line-height:1.6;margin-top:2px}
.dev-more{margin-top:24px;font-size:15px;color:var(--ink-2);line-height:1.6}
.dev-more a,.textlink{color:var(--accent-text);border-bottom:1px solid currentColor;padding-bottom:1px}
.dev-more code{font-size:13px}
.dev-more b{color:var(--ink);font-weight:600}

.code{background:var(--code-bg);border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(40,22,5,.55),0 0 0 1px rgba(0,0,0,.04);min-width:0;color:var(--code-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .code{box-shadow:0 0 0 1px var(--code-rule),0 40px 80px -40px rgba(0,0,0,.8)}}:root[data-theme=dark] .code{box-shadow:0 0 0 1px var(--code-rule),0 40px 80px -40px rgba(0,0,0,.8)}
.code-bar{display:flex;align-items:center;gap:6px;padding:10px 12px 10px 16px;background:var(--code-bar);border-bottom:1px solid var(--code-rule)}
.dots{display:flex;gap:6px;margin-right:10px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--code-dot)}
[role=tablist]{display:flex;gap:2px}
[role=tab]{display:flex;align-items:center;gap:7px;font:500 13px var(--sans);color:var(--code-tab);background:none;border:0;padding:7px 12px;border-radius:8px;cursor:pointer}
[role=tab] .lg{flex:none;width:14px;height:14px;fill:currentColor}
[role=tab] .lg.lg-go{width:28px;height:11px}
[role=tab]:hover{color:var(--code-ink)}
[role=tab][aria-selected=true]{background:var(--code-tab-on);color:#fff}
.code-file{margin-left:auto;font:13px var(--mono);color:var(--code-file)}
.panel{min-width:0}
.panel pre{font:13px/1.7 var(--mono);padding:20px 24px 16px 8px;overflow:auto;white-space:pre;counter-reset:l;tab-size:4;scrollbar-width:thin;scrollbar-color:var(--code-dim) transparent}
.panel pre .l{display:block}
.panel pre .l::before{counter-increment:l;content:counter(l);display:inline-block;width:28px;margin-right:18px;text-align:right;color:var(--code-dim);user-select:none}
.panel .install{display:flex;align-items:center;gap:10px;margin:8px 16px 16px;padding:10px 14px;border-radius:10px;background:var(--code-install);font:13px var(--mono);color:var(--code-install-ink);overflow-x:auto;white-space:nowrap}
.panel .install span{color:var(--syn-k)}
.panel[hidden]{display:none}
/* The panels share one grid cell, sized by the TypeScript example: the card keeps that height whichever tab is open, and a longer example (Go) scrolls inside it. */
html.js .code-body{display:grid}
html.js .code-body .panel{grid-area:1/1;display:flex;flex-direction:column}
html.js .code-body .panel[hidden]{display:flex;visibility:hidden}
html.js .code-body .panel pre{flex:1;min-height:0}
html.js .code-body .panel:not(#c-ts) pre{contain:size}
html:not(.js) .panel[hidden]{display:block}
.k{color:var(--syn-k)}.s{color:var(--syn-s)}.c{color:var(--syn-c);font-style:italic}.f{color:var(--syn-f)}.t{color:var(--syn-t)}.p{color:var(--syn-p)}

/* features */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 48px}
.feat{padding:0}
.feat .ic{color:var(--ink-2);display:flex;margin-bottom:16px}
.feat h3{font-size:20px;line-height:1.3}
.feat p{font-size:15px;line-height:1.6;color:var(--ink-2);margin-top:8px}

/* apps */
.apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.app{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:16px;overflow:hidden;transition:border-color .2s}
.app:hover{border-color:var(--ink-3)}
.app .pv{height:184px;position:relative;overflow:hidden}
.app .pv svg.full{position:absolute;inset:0;width:100%;height:100%}
.app .cap{padding:18px 20px 20px;display:flex;flex-direction:column;gap:4px;flex:1}
.app .cap b{font:600 18px/1.3 var(--sans);letter-spacing:-.012em}
.app .cap span{font-size:15px;color:var(--ink-2);line-height:1.5}
.app .cap .tag{margin-top:auto;padding-top:14px;font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.app.yours{border-style:dashed;border-color:var(--rule-2);background:transparent}
.app.yours .pv{display:grid;place-items:center}
.plus{width:56px;height:56px;border-radius:16px;border:1.5px dashed var(--accent);color:var(--accent);display:grid;place-items:center;font:300 32px/1 var(--sans)}
.app.yours .tag{color:var(--accent-text)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.plan{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:30px;display:flex;flex-direction:column}
.plan.hl{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.plan h3{font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:10px}
.plan h3 small{font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-soft);padding:4px 8px;border-radius:999px}
.price{font:600 44px/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums;margin:18px 0 6px}
.price span{font:400 15px var(--sans);color:var(--ink-2);letter-spacing:0;margin-left:4px}
.rate-line{font:600 15px/1.6 var(--sans);margin-bottom:8px}
.plan p{font-size:15px;color:var(--ink-2);line-height:1.6}
.plan ul{list-style:none;margin:20px 0 24px;display:grid;gap:10px;font-size:14.5px;font-weight:var(--w-small);color:var(--ink-2)}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;background:var(--sage);-webkit-mask:url(/static/check.svg?v=00c08e4243e90dfe) center/16px no-repeat;mask:url(/static/check.svg?v=00c08e4243e90dfe) center/16px no-repeat}
.plan .btn{margin-top:auto;align-self:flex-start}
.plans-note{margin-top:24px;font-size:14.5px;font-weight:var(--w-small);color:var(--ink-2);text-align:center}

/* close */
.close{position:relative;overflow:hidden;background:var(--ink);color:var(--bg);border-radius:28px;padding:72px clamp(28px,6vw,80px);display:grid;gap:32px}
.close>:not(.close-shader){position:relative;z-index:1}
/* The same shader as the prompt card, moving very slowly (data-speed). */
.close .close-shader{position:absolute;inset:0;z-index:0;opacity:.55}
.close h2{color:var(--bg);margin-top:12px;font-size:clamp(2.125rem,0.5rem + 3.94vw,3.5rem)}
.close h2 em{color:var(--accent-2)}
.close .kicker{color:color-mix(in srgb,var(--bg) 72%,transparent)}
.close p{color:color-mix(in srgb,var(--bg) 80%,transparent);font-size:17px;margin-top:14px;max-width:520px}
.close .btn{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.close .btn.ghost{background:transparent;color:var(--bg);border-color:color-mix(in srgb,var(--bg) 35%,transparent)}
.close .btn:hover{background:color-mix(in srgb,var(--bg) 86%,var(--ink))}
.close .btn.ghost:hover{background:transparent;border-color:color-mix(in srgb,var(--bg) 60%,transparent)}
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.path{display:flex;flex-direction:column;gap:10px;padding:24px;background:#0F0E0C;border:0;border-radius:16px}
.path h3{font-size:20px;line-height:1.3;color:var(--bg)}
.close .path p{margin-top:0;font-size:15px;line-height:1.6;max-width:none}
.close .path p a{color:var(--bg);border-bottom:1px solid currentColor;padding-bottom:1px}
.path .btn{align-self:flex-start;margin-top:auto}
.close .close-dev{font-size:15px;margin-top:-8px}
.close .close-dev a{color:var(--bg);border-bottom:1px solid currentColor;padding-bottom:1px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .close{background:var(--card-2);color:var(--ink);border:1px solid var(--rule)}:root:not([data-theme=light]) .close h2{color:var(--ink)}:root:not([data-theme=light]) .close p{color:var(--ink-2)}:root:not([data-theme=light]) .close .btn{background:var(--ink);color:var(--bg);border-color:var(--ink)}:root:not([data-theme=light]) .close .btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}:root:not([data-theme=light]) .close .btn:hover{background:color-mix(in srgb,var(--ink) 86%,var(--bg))}:root:not([data-theme=light]) .close .btn.ghost:hover{background:transparent;border-color:var(--ink-3)}:root:not([data-theme=light]) .close .kicker{color:var(--ink-2)}:root:not([data-theme=light]) .close .close-dev a{color:var(--ink)}:root:not([data-theme=light]) .path{border-color:var(--rule-2)}:root:not([data-theme=light]) .path h3{color:var(--ink)}:root:not([data-theme=light]) .close .path p a{color:var(--ink)}}:root[data-theme=dark] .close{background:var(--card-2);color:var(--ink);border:1px solid var(--rule)}:root[data-theme=dark] .close h2{color:var(--ink)}:root[data-theme=dark] .close p{color:var(--ink-2)}:root[data-theme=dark] .close .btn{background:var(--ink);color:var(--bg);border-color:var(--ink)}:root[data-theme=dark] .close .btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}:root[data-theme=dark] .close .btn:hover{background:color-mix(in srgb,var(--ink) 86%,var(--bg))}:root[data-theme=dark] .close .btn.ghost:hover{background:transparent;border-color:var(--ink-3)}:root[data-theme=dark] .close .kicker{color:var(--ink-2)}:root[data-theme=dark] .close .close-dev a{color:var(--ink)}:root[data-theme=dark] .path{border-color:var(--rule-2)}:root[data-theme=dark] .path h3{color:var(--ink)}:root[data-theme=dark] .close .path p a{color:var(--ink)}

.closing{padding-bottom:72px}
/* footer */
.ft{position:relative;display:flex;justify-content:space-between;align-items:start;gap:32px;flex-wrap:wrap;padding-block:40px 56px;border-top:1px solid transparent}
/* The footer's logo; its mark (and the header's) wakes up: the sun rises, then the arcs radiate in (layout.html, nav.js). */
.ft .logo{font-size:23px;gap:11px}
.ft .logo svg{width:35px;height:24px}
.mk-anim .mk-sun{transform-box:fill-box;transform-origin:50% 100%}
/* The arcs radiate out from the sun, after it has risen: each grows from the sun's center and sweeps open from its middle to its ends. */
.mk-anim .mk-a1,.mk-anim .mk-a2{transform-box:view-box;transform-origin:215px 222px}
.logo.is-awake .mk-a1{animation:mk-arc .7s .85s cubic-bezier(.2,.8,.25,1) both}
.logo.is-awake .mk-a2{animation:mk-arc .7s 1.15s cubic-bezier(.2,.8,.25,1) both}
@keyframes mk-arc{from{opacity:0;transform:scale(.9)}60%{opacity:1}to{opacity:1;transform:none}}
.logo.is-awake .mk-sun{animation:mk-rise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes mk-rise{from{transform:translateY(110%)}to{transform:none}}
/* Before the header logo's first-visit animation starts, hold it at its first frame. */
@media (prefers-reduced-motion:no-preference){:root[data-intro] .nav .logo:not(.is-awake) .mk-sun{transform:translateY(110%)}:root[data-intro] .nav .logo:not(.is-awake) .mk-a1,:root[data-intro] .nav .logo:not(.is-awake) .mk-a2{opacity:0}}
@media (prefers-reduced-motion:reduce){.logo.is-awake .mk-sun,.logo.is-awake .mk-a1,.logo.is-awake .mk-a2{animation:none}}
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(120px,auto));gap:24px 64px}
.ft-h{font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px}
.ft ul{list-style:none;display:grid;gap:8px;font-size:14.5px;font-weight:var(--w-small);color:var(--ink-2)}
@media (max-width:640px){.ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}}
.ft a:hover{color:var(--ink)}

/* responsive */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr;gap:40px;padding-top:32px}
  .hero h1{font-size:clamp(2.125rem,0.5rem + 6.56vw,4rem)}
  .scene{order:2}
  .scene{max-width:480px;justify-self:center}
  .dev{grid-template-columns:1fr;gap:40px}
  .apps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .waits{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-m{display:block}
  .sect{padding-block:72px}
  .sect-hd{gap:16px;margin-bottom:32px}
  .flow{grid-template-columns:1fr}
  .waits,.paths{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .close{padding-block:56px}
}
@media (max-width:600px){
  .apps,.feats{grid-template-columns:1fr}
  .hero{padding-bottom:48px}
  .hero h1{margin:20px 0 18px}
  .cta .btn{flex:1 1 auto}
  .works-in{grid-template-columns:1fr;gap:10px}
  .chips{gap:8px 20px}
  .panel pre{font-size:13px;padding:16px 14px 8px 4px;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
  .panel pre .l{padding-left:32px;text-indent:-32px}
  .panel pre .l::before{width:22px;margin-right:10px;text-indent:0}
  .panel .install{margin:6px 10px 12px;font-size:13px;white-space:normal;overflow-wrap:anywhere}
  .code-file{display:none}
  .dots{display:none}
  .step{padding:22px}
  .step .art{margin:-22px -22px 20px}
  .feat{display:grid;grid-template-columns:40px 1fr;gap:4px 16px}
  .feat .ic{grid-row:span 2;margin:0}
  .feat p{margin-top:0}
  .close{border-radius:22px}
}

/* Colors and fonts for the inline SVGs (the CSP allows no style attributes). */
.c-ink{color:var(--ink)!important}
.c-none{color:transparent!important}
.ff-mono{font-family:var(--mono)!important}
.ff-round{font-family:var(--round)!important}
.ff-georgia{font-family:Georgia,serif!important}
.ff-sans{font-family:var(--sans)!important}
.fill-accent{fill:var(--accent)!important}
.fill-accent-text{fill:var(--accent-text)!important}
.fill-accent-soft{fill:var(--accent-soft)!important}
.fill-bg-2{fill:var(--bg-2)!important}
.fill-card{fill:var(--card)!important}
.fill-code-bg{fill:var(--code-bg)!important}
.fill-code-dot{fill:var(--code-dot)!important}
.fill-code-ink{fill:var(--code-ink)!important}
.fill-syn-k{fill:var(--syn-k)!important}
.fill-syn-s{fill:var(--syn-s)!important}
.fill-syn-c{fill:var(--syn-c)!important}
.fill-ink{fill:var(--ink)!important}
.fill-rule-2{fill:var(--rule-2)!important}
.fill-sage{fill:var(--sage)!important}
.fill-sage-soft{fill:var(--sage-soft)!important}
.pv-chat{background:#FFF8F1}
.pv-channel3{background:#fff}
.pv-try{background:var(--accent-soft)}
.pv-holdem{background:radial-gradient(ellipse at 50% 55%,#1E5B40,#0B1411 75%)}
.pv-sketch{background:#0d1530}
.pv-superlog{background:#000}
.pv-agentphone{background:radial-gradient(ellipse 90% 70% at 50% 0%,#1F8A47,#0B2414 55%,#0A0A0A 85%)}
.sprite{position:absolute}
.stroke-accent{stroke:var(--accent)!important}
.stroke-accent-text{stroke:var(--accent-text)!important}
.stroke-rule-2{stroke:var(--rule-2)!important}
.stroke-sage{stroke:var(--sage)!important}

/* The footer's theme toggle: a sun (Light) and a moon (Dark), named for screen readers and on hover; saved for next time (nav.js; theme.js applies it before the page draws). Hidden until its script runs. */
.ft-brand{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
/* The footer's last line: the copyright, then the privacy policy and the theme toggle. */
.ft-base{flex-basis:100%;display:flex;font-size:13px;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;margin-top:24px;font-size:13px;color:var(--ink-2)}
.ft-base-end{display:flex;align-items:center;gap:20px}
.ft-base a{color:var(--ink-2)}
.ft-base a:hover{color:var(--ink)}
.theme-toggle{display:inline-flex;padding:3px;gap:2px;border:1px solid var(--rule-2);border-radius:999px}
.theme-toggle[hidden]{display:none}
.theme-toggle button{display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);background:none;border:0;border-radius:999px;padding:7px 10px;cursor:pointer;transition:background .15s,color .15s}
.theme-toggle button:hover{color:var(--ink)}
.theme-toggle button[aria-pressed=true]{background:var(--ink);color:var(--bg,var(--paper))}
/* A theme picked with the footer's toggle (theme.js, nav.js) beats the system's: each dark-mode block above applies
   under :root:not([data-theme=light]) while the system is dark, and again under :root[data-theme=dark]. */
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}