/* The shell every page on the site shares: the two app identities, the theme
   switcher, the nav, the footer, and prose. Page-specific work stays in the page.
   Loaded before any inline <style>, so a page can still override. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .25s,color .25s}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dt);
  line-height:1.05;text-wrap:balance}
p{margin:0}a{color:inherit}img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:min(1160px,100% - 2.5rem);margin-inline:auto}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-weight:700}
.lede{color:var(--fg2);max-width:62ch;font-size:1.0625rem}

/* Only the two identities that ship in the app. */
[data-style="bento"]{
  --bg:#fff;--panel:#f6f3ef;--card:#fafafb;--line:#e6e6e9;--line2:#cfcfd5;
  --fg:#1f1f23;--fg2:#55555f;--fg3:#8a8a95;--accent:#ff6a3d;--onAccent:#1f1f23;
  --display:"Avenir Next","Nunito Sans",ui-rounded,system-ui,sans-serif;
  --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;--dw:800;--dt:-.03em;
  --r-btn:999px;--r-card:22px;--r-pill:999px;--shadow:0 18px 38px -24px #1f1f2355}
[data-style="steam"]{
  --bg:#0f1013;--panel:#141519;--card:#17181d;--line:#26282f;--line2:#3a3d46;
  --fg:#f2f2f2;--fg2:#a2a5ad;--fg3:#777b84;--accent:#ff6a3d;--onAccent:#180a05;
  --display:"Helvetica Neue","Arial Black",Helvetica,Arial,system-ui,sans-serif;
  --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;--dw:900;--dt:-.05em;
  --r-btn:7px;--r-card:7px;--r-pill:7px;--shadow:0 20px 42px -26px #000}
[data-style="steam"] h1,[data-style="steam"] h2{text-transform:uppercase;line-height:.96}

/* theme switcher + nav */
.switch{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:.55rem 0}
.switch .wrap{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.switch .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg3);margin-right:.2rem}
.sw{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.08em;background:none;border:1px solid var(--line);color:var(--fg2);
  padding:.42rem .7rem .42rem .45rem;border-radius:var(--r-pill);cursor:pointer}
.sw img{width:23px;height:23px;border-radius:7px;flex:none}
.sw:hover{color:var(--fg);border-color:var(--line2)}
.sw[aria-pressed="true"]{background:var(--accent);color:var(--onAccent);border-color:var(--accent);font-weight:700}
.switch-note{margin-left:auto}
.nav{padding:1.1rem 0}
.nav .wrap{display:flex;align-items:center;gap:1.4rem}
.brand{display:flex;align-items:center;gap:.65rem;font-family:var(--display);font-weight:var(--dw);
  letter-spacing:var(--dt);font-size:1.15rem;text-decoration:none}
.brand img{width:38px;height:38px;border-radius:10px}
.brand .tld{color:var(--accent)}
.nav nav{margin-left:auto;display:flex;gap:1.5rem}
.nav nav a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--fg2);text-decoration:none}
.nav nav a:hover{color:var(--accent)}
.nav nav a[aria-current="page"]{color:var(--accent)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:650;
  font-size:1rem;padding:.95rem 1.7rem;border-radius:var(--r-btn);border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .16s,border-color .2s;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--onAccent)}
.btn:hover{transform:translateY(-2px)}
.btn-ghost{border-color:var(--line2);color:var(--fg);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* Store signup overlays use the same typography and theme tokens as the page. */
.signup-open{overflow:hidden}
.signup-dialog{width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;
  padding:32px;border:1px solid var(--line2);border-radius:var(--r-card);background:var(--bg);
  color:var(--fg);box-shadow:0 28px 90px #0005;overflow:auto;overscroll-behavior:contain;
  animation:signup-enter .18s ease-out}
.signup-dialog::backdrop{background:#090a0dcc;backdrop-filter:blur(5px)}
.signup-dialog [hidden]{display:none!important}
.signup-close{position:absolute;top:12px;right:12px;width:44px;height:44px;display:grid;place-items:center;
  border:0;border-radius:var(--r-btn);background:transparent;color:var(--fg2);cursor:pointer}
.signup-close:hover{background:var(--panel);color:var(--fg)}
.signup-brand{display:flex;align-items:center;gap:12px;padding-right:22px;margin:8px 0 26px}
.signup-brand img{border-radius:12px;flex:none}
.signup-badge{font:600 11px/1.5 var(--mono);letter-spacing:.025em;color:var(--fg2)}
.signup-dialog h2{font-size:clamp(28px,5vw,36px);margin:0 0 14px}
.signup-intro{color:var(--fg2);font-size:16px;line-height:1.6}
.signup-intro:empty{display:none}
.signup-form{margin-top:26px}
.signup-label{display:block;font-size:14px;font-weight:650;margin-bottom:8px}
.signup-form input[type=email]{width:100%;min-height:52px;background:var(--card);border:1px solid var(--line2);
  border-radius:10px;color:var(--fg);padding:12px 14px;font-size:16px;transition:border-color .15s}
.signup-form input[type=email]:focus{border-color:var(--accent)}
.signup-help{font-size:13px;line-height:1.5;color:var(--fg2);margin-top:8px}
.signup-consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.6;color:var(--fg2);
  cursor:pointer;margin-top:20px;min-height:44px}
.signup-consent input{accent-color:var(--accent);width:18px;height:18px;margin:2px 0 0;flex:none;cursor:pointer}
.signup-privacy{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:var(--fg2);
  text-underline-offset:3px;margin-left:29px}
.signup-error{font-size:14px;color:#b91c1c;line-height:1.5;margin:8px 0 16px}
[data-style=steam] .signup-error{color:#ffb4a8}
.signup-error:empty{display:none}
.signup-submit{width:100%;min-height:52px;white-space:normal;text-align:center;margin-top:8px}
.signup-submit:disabled{opacity:.7;cursor:wait;transform:none}
.signup-note{margin-top:14px;text-align:center;font-size:12px;line-height:1.6;color:var(--fg2)}
.signup-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.signup-success{margin-top:24px;outline-offset:6px}
.signup-success svg{color:var(--fg);margin-bottom:16px}
.signup-success p{font-size:16px;line-height:1.6;color:var(--fg2)}
.signup-success .btn{width:100%;margin-top:26px;min-height:48px}
@keyframes signup-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:420px){.signup-dialog{padding:28px 22px}.signup-brand{margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){.signup-dialog{animation:none}.signup-dialog *{transition:none}}

/* sections and cards, shared by the landing page and the docs */
.sec{padding:clamp(3.2rem,7vw,6rem) 0}.sec.alt{background:var(--panel);border-block:1px solid var(--line)}
.sec-head{max-width:44rem}.sec-head h2{font-size:clamp(1.8rem,4vw,2.9rem);margin-top:.9rem}.sec-head .lede{margin-top:1rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:1.6rem 1.5rem;transition:border-color .2s,transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:var(--shadow)}
.card .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}
.card h3{font:700 1.15rem var(--body);letter-spacing:-.015em;margin:.75rem 0 .5rem}.card p{color:var(--fg2);font-size:.95rem}
a.card{text-decoration:none;display:block}
.foot{border-top:1px solid var(--line);padding:2.4rem 0 3rem;color:var(--fg3);font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot nav{display:flex;gap:1rem}.foot a:hover{color:var(--accent)}

/* ── prose: docs and the legal pages ─────────────────────────────────────── */
.doc{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,6vw,5rem)}
.doc .wrap{width:min(820px,100% - 2.5rem)}
.doc.wide .wrap{width:min(1160px,100% - 2.5rem)}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}
.doc h1{font-size:clamp(2.2rem,6vw,3.6rem);margin:.9rem 0 1rem}
.doc .lede{font-size:1.15rem}
.prose{margin-top:2.6rem}
.prose h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:2.8rem 0 .8rem}
.prose h3{font:700 1.08rem var(--body);letter-spacing:-.015em;margin:1.9rem 0 .5rem}
.prose p,.prose li{color:var(--fg2)}
.prose p+p{margin-top:.9rem}
.prose ul,.prose ol{margin:.9rem 0 0;padding-left:1.2rem}
.prose li+li{margin-top:.45rem}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:.08em .38em;color:var(--fg)}
.prose pre{margin:1.2rem 0 0;padding:1rem 1.1rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);overflow-x:auto}
.prose pre code{background:none;border:0;padding:0;font-size:.82rem;line-height:1.6}
.prose blockquote{margin:1.2rem 0 0;padding:.1rem 0 .1rem 1rem;border-left:2px solid var(--accent);color:var(--fg2)}
.tablewrap{margin-top:1.2rem;overflow-x:auto}
.prose table{border-collapse:collapse;width:100%;font-size:.94rem}
.prose th,.prose td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line);color:var(--fg2);vertical-align:top}
.prose th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);white-space:nowrap}
.prose tbody tr:last-child td{border-bottom:0}
.note{margin-top:1.4rem;padding:1rem 1.1rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);color:var(--fg2);font-size:.95rem}
.next{display:flex;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px}
.next a{color:var(--accent);text-decoration:none}

/* Docs sub-nav: which of the three pages this is. */
.docnav{border-bottom:1px solid var(--line);background:var(--panel)}
.docnav .wrap{display:flex;gap:1.2rem;flex-wrap:wrap;padding:.7rem 0}
.docnav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent}
.docnav a:hover{color:var(--fg)}
.docnav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}

/* ── the app's own chrome, for showing a control as it really looks ───────
   Always the dark identity, like the phone mockups on the home page: these are
   pictures of the app, not of the site. Values copied from app/assets/app.css. */
.ui{--ui-bg:#0b0c0e;--ui-surface:#17181d;--ui-line:#26282f;--ui-edge:#3a3d46;--ui-fg:#f2f2f2;
  --ui-dim:#a2a5ad;--ui-go:#ff6a3d;--ui-go-edge:#ff8b68;--ui-on-go:#180a05;
  --ui-keybar:#121318;--ui-key:#1f2027;--ui-key-edge:#3a3d46}
.deck{margin-top:1.4rem;padding:9px;background:var(--ui-keybar);border:1px solid var(--ui-line);
  border-radius:12px;display:grid;gap:7px;max-width:24rem}
/* Flex, and square arrows, exactly as the app lays the bar out. */
.keyrow{display:flex;gap:7px}
.k-btn{flex:1 1 0;min-width:0;height:42px;display:grid;place-items:center;background:var(--ui-key);
  border:1px solid var(--ui-key-edge);border-radius:8px;color:var(--ui-fg);font:13px var(--body);position:relative}
.k-btn.arrow{flex:0 0 42px}
.keyrow.tools .k-btn{background:var(--ui-surface)}
.keyrow.tools .k-btn.arrow{background:var(--ui-key)}
.k-btn.armed{background:var(--ui-go);border-color:var(--ui-go-edge);color:var(--ui-on-go)}
.alt-mark{font:.72em/1 ui-monospace,monospace;margin-left:.15em}
.k-btn.wide{grid-column:span 2}
/* A control quoted mid-sentence, at the size of the words around it. */
.chip{display:inline-grid;grid-auto-flow:column;place-items:center;width:2.1em;height:2.1em;vertical-align:-.7em;
  background:var(--ui-key);border:1px solid var(--ui-key-edge);border-radius:7px;color:var(--ui-fg);
  font-size:.8em;font-family:var(--body)}
.chip.armed{background:var(--ui-go);border-color:var(--ui-go-edge);color:var(--ui-on-go)}
.chip.wide{width:auto;padding:0 .5em}
/* The agent-state dot, in the three colours the terminal bar uses. */
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:#a2a5ad;vertical-align:baseline}
.dot.work{background:#37d399}.dot.ask{background:#ffc24b}
.states{display:grid;gap:.9rem;margin-top:1.4rem}
.states .row{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center}
.states .row p{color:var(--fg2);font-size:.95rem}
.states .row b{color:var(--fg);font-weight:650}

.icon{display:inline-block;flex:0 0 auto;width:20px;height:20px;background:center / contain no-repeat}
.icon.small{width:16px;height:16px}
.i-back { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d6d6dd%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%205%208%2012l7%207%22%2F%3E%3C%2Fsvg%3E"); }
.i-gear { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d6d6dd%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h9M17%207h3M4%2012h3M11%2012h9M4%2017h7M15%2017h5%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%227%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2212%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2217%22%20r%3D%222.2%22%2F%3E%3C%2Fsvg%3E"); }
.i-folder { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d6d6dd%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207a2%202%200%200%201%202-2h4l2%202.5h8a2%202%200%200%201%202%202V18a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3C%2Fsvg%3E"); }
.i-mic { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d6d6dd%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%226%22%20height%3D%2211%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M5.5%2011a6.5%206.5%200%200%200%2013%200M12%2017.5V21M9%2021h6%22%2F%3E%3C%2Fsvg%3E"); }
.i-clip { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d6d6dd%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2011.5%2012%2019.5a5%205%200%200%201-7-7l8.5-8.5a3.4%203.4%200%200%201%204.8%204.8L9.6%2017.2a1.8%201.8%200%200%201-2.5-2.5l7.8-7.8%22%2F%3E%3C%2Fsvg%3E"); }
.i-paste { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d6d6dd%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224.5%22%20y%3D%225%22%20width%3D%2215%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%205V3.6A1.6%201.6%200%200%201%2010.6%202h2.8A1.6%201.6%200%200%201%2015%203.6V5%22%2F%3E%3C%2Fsvg%3E"); }
.i-clear { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23d6d6dd%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%205H9.6L3.5%2012l6.1%207H20a1.8%201.8%200%200%200%201.8-1.8V6.8A1.8%201.8%200%200%200%2020%205z%22/%3E%3Cpath%20d=%22m12.2%209.8%204.4%204.4M16.6%209.8l-4.4%204.4%22/%3E%3C/svg%3E"); }
.i-keyboard { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d6d6dd%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%226%22%20width%3D%2219%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M6.5%209.5h.01M10%209.5h.01M13.5%209.5h.01M17%209.5h.01M6.5%2012.8h.01M10%2012.8h.01M13.5%2012.8h.01M17%2012.8h.01M8.5%2015.8h7%22%2F%3E%3C%2Fsvg%3E"); }
.i-exit { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d6d6dd%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%204H6a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h8M17.5%208.5%2021%2012l-3.5%203.5M20.5%2012H10%22%2F%3E%3C%2Fsvg%3E"); }
.i-arrow { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d6d6dd%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2019.5V5M6.2%2010.8%2012%205l5.8%205.8%22%2F%3E%3C%2Fsvg%3E"); }
.i-enter { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d6d6dd%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%205.5v7a2.5%202.5%200%200%201-2.5%202.5H4.5%22%2F%3E%3Cpath%20d%3D%22M9%2010%204%2015l5%205%22%2F%3E%3C%2Fsvg%3E"); }
.i-arrow.down{transform:rotate(180deg)}
.i-arrow.left{transform:rotate(-90deg)}
.i-arrow.right{transform:rotate(90deg)}
.armed .icon{filter:brightness(0) saturate(100%)}

/* The language picker, shared by the landing page and every docs page. It
   lived inline in index.html while only one page had one. */
.language-picker{display:flex;align-items:center;margin-left:auto;flex:none}
.language-picker>.lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.language-dropdown{position:relative}
.language-dropdown summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;list-style:none;color:var(--fg);background:var(--card);border:1px solid var(--line2);border-radius:var(--r-btn);font:600 13px/1 var(--body);letter-spacing:.04em;cursor:pointer;touch-action:manipulation;transition:background .15s,border-color .15s,box-shadow .15s}
.language-dropdown summary::-webkit-details-marker{display:none}
.language-dropdown summary:hover,.language-dropdown[open] summary{border-color:var(--accent);background:var(--panel);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
.language-flag{width:24px;height:18px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px #00000012;flex:none}
.language-chevron{width:14px;height:14px;color:var(--fg2);transition:transform .15s}
.language-dropdown[open] .language-chevron{transform:rotate(180deg)}
.language-menu{position:absolute;inset-inline-end:0;top:calc(100% + 10px);width:224px;max-width:calc(100vw - 24px);max-height:min(60dvh,320px);overflow-y:auto;overscroll-behavior:contain;padding:8px;border:1px solid var(--line2);border-radius:min(var(--r-card),12px);background:var(--bg);box-shadow:0 12px 32px #00000024,0 2px 8px #0000000d;scrollbar-width:thin}
.language-options{display:grid;gap:8px}
.language-button{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;text-align:left;text-decoration:none;color:var(--fg);background:transparent;border:1px solid transparent;border-radius:8px;padding:10px 12px;font:500 14px/1.4 var(--body);cursor:pointer;touch-action:manipulation;transition:background .15s,border-color .15s}
.language-button:hover{background:var(--panel)}
.language-button>span{min-width:0;overflow-wrap:anywhere}
.language-dropdown summary:focus-visible,.language-button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.language-button[aria-current="page"]{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 9%,var(--bg));font-weight:650}
.language-check{margin-left:auto;width:16px;height:16px;color:var(--fg);visibility:hidden;flex:none}
.language-button[aria-current="page"] .language-check{visibility:visible}
.switch .switch-note{margin-left:0}

@media(max-width:820px){.nav nav{display:none}.nav .btn{margin-left:auto}.switch-note{display:none}}
@media(max-width:600px){.wrap{width:min(100% - 1.25rem,1160px)}.doc .wrap,.doc.wide .wrap{width:min(100% - 1.25rem,1160px)}
  .switch .wrap{justify-content:center}.switch .lbl{display:none}.nav{padding:.8rem 0}
  .brand .name{font-size:1rem}.nav .btn{font-size:.8rem;padding:.55rem .8rem}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}html{scroll-behavior:auto}}