/* @tokens:start — generated by `bun design/tokens.ts`. Do not edit by hand. */
:root{
  --ink: #141413;
  --dim: #5f5e57;
  --faint: #74726a;
  --ink-soft: #3d3d3a;
  --caption: #6b6a63;
  --stone: #b9b6aa;
  --bg: #faf9f5;
  --panel: #ffffff;
  --raised: #f0eee6;
  --line: #e6e3d8;
  --line-bright: #d3d0c4;
  --accent: #d97757;
  --accent-deep: #b9532f;
  --accent-ink: #faf9f5;
  --hue-peach: #f6dfd3;
  --hue-sage: #c9d6ac;
  --hue-sand: #ecd9b8;
  --hue-sky: #c5d9ec;
  --hue-violet: #6d6a9c;
  --hue-olive: #6f8a4a;
  --ok: #4a7a38;
  --warn: #c48a2c;
  --bad: #b0382d;
  --radius-inner: 0.25rem;
  --radius-element: 0.5rem;
  --radius-container: 0.75rem;
  --radius-page: 1.5rem;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Source Serif 4", Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ink: #f2f0e8;
  --dim: #b9b6aa;
  --faint: #9b988c;
  --ink-soft: #d5d2c6;
  --caption: #a5a297;
  --stone: #6b6a63;
  --bg: #191918;
  --panel: #232321;
  --raised: #2c2b28;
  --line: #34322e;
  --line-bright: #4a4842;
  --accent-deep: #e8926f;
  --accent-ink: #191918;
  --hue-peach: #4a2f25;
  --hue-sage: #3d4a2b;
  --hue-sand: #4a3f28;
  --hue-sky: #2b3d4d;
  --ok: #7fb069;
  --warn: #d9a441;
  --bad: #e0685c;
}
/* @tokens:end */
@font-face{font-family:"Inter";src:url(/fonts/Inter-var.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/fonts/SourceSerif4-var.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/JetBrainsMono-var.woff2) format("woff2");font-weight:100 800;font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent-deep);text-decoration:none}
a:hover{color:var(--ink)}
::selection{background:rgba(217,119,87,.28)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink)}
.mark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;background:var(--accent);color:var(--bg)}
.wm{font-family:var(--serif);font-size:19px;font-weight:500;letter-spacing:-.02em}
.menu{display:none;border:0;background:none;color:var(--ink-soft);width:36px;height:36px;margin-left:-8px;border-radius:8px;cursor:pointer}
.search-w{flex:1;display:flex;justify-content:center}
.search{display:inline-flex;align-items:center;gap:8px;height:32px;width:340px;max-width:100%;padding:0 8px 0 11px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--caption);font:inherit;cursor:pointer}
.search:hover{border-color:var(--line-bright)}
.s-l{font-size:12.5px;flex:1;text-align:left}
kbd{font-family:var(--mono);display:inline-flex;align-items:center;height:19px;padding:0 5px;border-radius:4px;background:var(--raised);border:1px solid var(--line);font-size:10.5px;color:var(--caption)}
.tabs{display:flex;align-items:center;gap:2px}
.tab{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.tab:hover{background:var(--raised);color:var(--ink)}
.tab.on{background:var(--raised);color:var(--ink)}
.sep{width:1px;height:20px;background:var(--line);margin:0 8px}
.cta{display:inline-flex;align-items:center;height:32px;margin-left:4px;padding:0 12px;border-radius:8px;font-size:12.5px;font-weight:600;background:var(--ink);color:var(--bg);border:1px solid var(--ink);white-space:nowrap}
.cta:hover{background:var(--ink-soft);color:var(--bg)}

.shell{display:flex;align-items:flex-start;min-height:calc(100vh - 52px)}
.side{position:sticky;top:52px;align-self:flex-start;width:256px;flex:none;height:calc(100vh - 52px);overflow-y:auto;padding:28px 14px;border-right:1px solid var(--line)}
.nav-g{margin-bottom:22px}
.nav-h{padding:0 10px;margin-bottom:6px;font-size:12.5px;font-weight:600}
.nav-i{display:flex;align-items:center;min-height:30px;padding:0 10px;border-radius:8px;font-size:13.5px;color:var(--ink-soft)}
.nav-i:hover{background:var(--raised);color:var(--ink)}
.nav-i.on{background:var(--raised);color:var(--ink);font-weight:550}
main{flex:1;min-width:0;padding:44px 64px 72px}
article{max-width:680px}
.eyebrow{font-size:13.5px;color:var(--caption);margin-bottom:14px}
h1{margin:0;font-family:var(--serif);font-size:48px;line-height:1.08;font-weight:400;letter-spacing:-.024em;text-wrap:balance}
.lede{margin:18px 0 0;font-size:16px;line-height:1.7;color:var(--ink-soft);text-wrap:pretty}
.prose{margin-top:30px;font-size:15.5px;line-height:1.7;color:var(--ink-soft)}
.prose p{margin:0 0 16px;text-wrap:pretty}
.prose h2{margin:44px 0 0;font-family:var(--serif);font-size:28px;line-height:1.2;font-weight:400;letter-spacing:-.018em;color:var(--ink)}
.prose h2+*{margin-top:14px}
.prose h3{margin:32px 0 0;font-size:17px;font-weight:600;color:var(--ink)}
.prose h3+*{margin-top:8px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:4px 0}
.prose strong{color:var(--ink);font-weight:600}
.prose a{text-decoration:underline;text-decoration-color:rgba(185,83,47,.35);text-underline-offset:3px}
.prose a:hover{text-decoration-color:currentColor}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--raised);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--ink)}
.prose blockquote{margin:0 0 16px;padding:2px 0 2px 16px;border-left:2px solid var(--accent);color:var(--ink)}
.prose blockquote p{margin:0}
.prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.table{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:10px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
thead th{border-top:0;font-weight:600;color:var(--ink);background:var(--raised)}
tbody tr:first-child td{border-top:0}
td code{white-space:nowrap}

.code{margin:0 0 20px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.code-h{display:flex;align-items:center;justify-content:space-between;padding:8px 13px;border-bottom:1px solid var(--line);background:var(--raised);font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
.copy{border:0;background:none;font:inherit;color:var(--caption);cursor:pointer;padding:2px 4px;border-radius:4px}
.copy:hover{color:var(--ink)}
.code pre{margin:0;padding:16px 18px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.75;color:var(--ink-soft)}
.code pre code{background:none;border:0;padding:0;font-size:inherit;color:inherit}
.prompt{color:var(--caption)}
.codegroup{margin:0 0 20px}
.codegroup .code{margin:0}
.cg-tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);margin-bottom:14px}
.cg-tab{border:0;background:none;font:inherit;font-size:13.5px;font-weight:500;color:var(--caption);height:34px;padding:0;cursor:pointer}
.cg-tab.on{font-weight:600;color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}

.steps{margin:8px 0 20px;counter-reset:s}
.step{position:relative;padding:0 0 28px 46px;counter-increment:s}
.step:before{content:counter(s);position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9999px;background:var(--raised);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink)}
.step:after{content:"";position:absolute;left:14px;top:36px;bottom:6px;width:1px;background:var(--line)}
.step:last-child{padding-bottom:0}.step:last-child:after{display:none}
.step-t{font-size:16px;font-weight:600;color:var(--ink);padding-top:3px}
.step-b{margin-top:6px}.step-b>:last-child{margin-bottom:0}

.callout{display:flex;flex-direction:column;gap:4px;margin:0 0 20px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:8px}
.callout-t{font-size:13px;font-weight:600;color:var(--ink)}
.callout-b{font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.callout-b p:last-child{margin:0}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:8px 0 20px}
.card{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;color:var(--ink-soft);text-decoration:none!important}
.card:hover{border-color:var(--line-bright)}
a.card-t:after{content:"";position:absolute;inset:0}
a.card-t{color:var(--ink)}
.card-t{font-size:15px;font-weight:600;color:var(--ink)}
.card-b{font-size:14px;line-height:1.5}.card-b p{margin:0}
.accs{margin:8px 0 20px;border-bottom:1px solid var(--line)}
.acc{border-top:1px solid var(--line)}
.acc summary{padding:16px 0;font-size:15.5px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.acc summary::-webkit-details-marker{display:none}
.acc summary:after{content:"+";color:var(--caption);font-weight:400}
.acc[open] summary:after{content:"\2212"}
.acc-b{padding:0 0 8px}

.pn{display:flex;justify-content:space-between;gap:14px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.pn a{display:flex;flex-direction:column;gap:2px;padding:12px 16px;min-width:180px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);font-weight:600;font-size:14.5px}
.pn a:hover{border-color:var(--line-bright)}
.pn a.r{text-align:right;margin-left:auto}
.pn span{font-size:12px;font-weight:500;color:var(--caption)}

.toc{position:sticky;top:52px;align-self:flex-start;width:224px;flex:none;padding:44px 22px;display:flex;flex-direction:column;gap:0}
.toc-h{margin-bottom:12px;font-size:13px;font-weight:600}
.toc a{display:block;padding:6px 0 6px 14px;border-left:1px solid var(--line);font-size:13.5px;line-height:1.4;color:var(--caption)}
.toc a:hover{color:var(--ink)}
.toc a.on{border-left:2px solid var(--accent);padding-left:13px;color:var(--ink)}

.sr{position:fixed;inset:0;z-index:50;background:rgba(20,20,19,.32);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.sr[hidden]{display:none}
.sr-box{width:100%;max-width:560px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(20,20,19,.18);overflow:hidden}
.sr-in{display:flex;align-items:center;gap:10px;padding:0 16px;height:52px;border-bottom:1px solid var(--line);color:var(--caption)}
.sr-in input{flex:1;border:0;outline:0;background:none;font:inherit;font-size:15px;color:var(--ink)}
.sr-r{max-height:50vh;overflow-y:auto;padding:6px}
.sr-r a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink)}
.sr-r a:hover,.sr-r a.on{background:var(--raised)}
.sr-r b{display:block;font-size:14px;font-weight:600}
.sr-r small{display:block;margin-top:2px;font-size:12.5px;color:var(--caption);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-e{padding:20px 12px;font-size:14px;color:var(--caption)}

@media (max-width:1180px){.toc{display:none}}
@media (max-width:900px){
  .menu{display:inline-flex;align-items:center;justify-content:center}
  .side{position:fixed;left:0;top:52px;bottom:0;height:auto;z-index:30;background:var(--bg);transform:translateX(-100%);transition:transform .2s;box-shadow:none}
  body.nav-open .side{transform:none;box-shadow:0 0 40px rgba(20,20,19,.18)}
  main{padding:32px 20px 56px}
  h1{font-size:38px}
  .tabs .tab:not(.on),.tabs .sep{display:none}
  .search{width:auto;flex:none;padding:0 10px}.s-l,.search kbd{display:none}
  .search-w{justify-content:flex-end}
  .cards{grid-template-columns:1fr}
}
@media (max-width:560px){.tabs .cta{display:none}.tabs .tab.on{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.side{transition:none}}
.codegroup .code-h span{visibility:hidden}
.prose a.card-t{text-decoration:none}