/* Refresh docs theme. Tokens match the dashboard (Paper file 01M52QAQ5XZ2P45D5N7K23F72S, refresh.gg 2026 system).
   Layout follows docs.automaticcss.com: top bar with search, left nav, article, "On this page" rail, previous/next cards. */
@font-face{font-family:"Untitled Sans";src:url(/assets/fonts/UntitledSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Untitled Sans";src:url(/assets/fonts/UntitledSans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Untitled Sans";src:url(/assets/fonts/UntitledSans-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Untitled Serif";src:url(/assets/fonts/UntitledSerif-Medium.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ink:#353148;--ink-soft:#5F5B54;--cream:#F7F4EE;--cream-2:#F0ECE0;--cream-3:#E6DFCB;--paper:#FFFDF9;
  --night:#16151E;--night-2:#24222F;--night-line:#33303F;--night-text:#D4D1E0;--night-muted:#9B95B7;
  --pink:#D83474;--pink-text:#961D4C;--pink-wash:#FBEAF0;
  --line:#DBDAD6;--line-soft:#E9E6DE;
  --note:#4C89FF;--note-wash:#EAF1FF;--tip:#9CC04A;--tip-wash:#EEF4DE;--warn:#FF9A20;--warn-wash:#FFF0DE;--later:#9B95B7;--later-wash:#F1F0F5;
  --heading:"Untitled Serif",Georgia,serif;--body:"Untitled Sans",system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --top:60px;--side:280px;--toc:220px;--measure:44rem;
  --radius:6px;--radius-l:12px;
}
*{box-sizing:border-box}
html{scroll-padding-block-start:calc(var(--top) + 16px)}
body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.65 var(--body);-webkit-font-smoothing:antialiased;font-synthesis:none}
a{color:var(--pink-text);text-underline-offset:2px}
a:hover{color:var(--pink)}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit;cursor:pointer}
kbd{font:500 12px/1 var(--mono);border:1px solid var(--line);border-block-end-width:2px;border-radius:4px;padding:2px 5px;background:var(--paper);color:var(--ink)}

/* Top bar */
.top{position:sticky;inset-block-start:0;z-index:20;block-size:var(--top);display:flex;align-items:center;gap:16px;padding-inline:16px 20px;background:var(--cream);border-block-end:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand__mark{display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:8px;background:var(--pink);color:#fff;font:500 19px/1 var(--heading)}
.brand__name{font:500 20px/1 var(--heading)}
.brand__site{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);border-radius:100px;padding:5px 8px}
.top__links{display:flex;gap:4px;margin-inline-start:12px}
.top__links a{color:var(--ink);text-decoration:none;font-weight:500;font-size:15px;padding:6px 10px;border-radius:var(--radius)}
.top__links a:hover{background:var(--cream-2);color:var(--ink)}
.top__links a[aria-current]{color:var(--pink-text)}
.top__grow{flex:1}
.searchbtn{display:flex;align-items:center;gap:8px;inline-size:220px;border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:6px 8px 6px 10px;color:var(--ink-soft);font-size:15px}
.searchbtn:hover{border-color:var(--ink-soft)}
.searchbtn span{flex:1;text-align:start}
.top__user{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-soft)}
.top__user form{margin:0}
.linkbtn{background:none;border:0;padding:0;color:var(--pink-text);font-weight:700;font-size:14px}
.menubtn{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:6px 8px}

/* Shell */
.layout{display:grid;grid-template-columns:var(--side) minmax(0,1fr)}
.side{position:sticky;inset-block-start:var(--top);block-size:calc(100dvh - var(--top));overflow-y:auto;background:var(--night);color:var(--night-text);padding:20px 12px 40px}
.side__group{margin-block-end:8px}
.side__group summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:8px 12px;border-radius:var(--radius);font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--night-muted)}
.side__group summary::-webkit-details-marker{display:none}
.side__group summary::after{content:"";inline-size:7px;block-size:7px;border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.side__group:not([open]) summary::after{transform:rotate(-45deg)}
.side__group summary:hover{color:#fff}
.side a{display:block;color:var(--night-text);text-decoration:none;font-size:15px;line-height:1.35;padding:7px 12px;border-radius:var(--radius);margin-block:1px}
.side a:hover{background:var(--night-2);color:#fff}
.side a[aria-current="page"]{background:var(--night-2);color:#fff;box-shadow:inset 3px 0 0 var(--pink)}
.side__tag{font:500 10px/1 var(--mono);letter-spacing:.04em;color:var(--night);background:var(--cream-3);border-radius:100px;padding:3px 6px;margin-inline-start:6px;vertical-align:2px}

.page{display:grid;grid-template-columns:minmax(0,1fr) var(--toc);gap:40px;padding:28px 40px 64px;max-inline-size:1180px}
.doc{min-inline-size:0;max-inline-size:var(--measure)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 18px;padding:0;list-style:none;font-size:13px}
.crumbs li{display:flex;align-items:center;gap:6px;color:var(--ink-soft)}
.crumbs li+li::before{content:"›";color:var(--line)}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--pink-text)}
.crumbs [aria-current]{background:var(--cream-2);border-radius:100px;padding:3px 10px;color:var(--ink)}
.pill{display:inline-block;font:500 12px/1 var(--mono);background:var(--cream-3);border-radius:100px;padding:5px 10px;margin-block-end:12px}

/* Prose */
.doc h1{font:500 clamp(34px,5vw,46px)/1.08 var(--heading);letter-spacing:-.01em;margin:0 0 14px}
.doc .lead{font-size:19px;line-height:1.5;color:var(--ink-soft);margin:0 0 28px}
.doc h2{font:500 30px/1.15 var(--heading);margin:48px 0 14px;padding-block-start:4px}
.doc h3{font:700 19px/1.3 var(--body);margin:32px 0 10px}
.doc h4{font:700 16px/1.4 var(--body);margin:24px 0 8px}
.doc :is(h2,h3) a.anchor{opacity:0;margin-inline-start:8px;text-decoration:none;color:var(--line)}
.doc :is(h2,h3):hover a.anchor{opacity:1}
.doc p,.doc ul,.doc ol{margin:0 0 16px}
.doc li{margin-block:4px}
.doc li>ul,.doc li>ol{margin-block:4px 0}
.doc strong{font-weight:700}
.doc hr{border:0;border-block-start:1px solid var(--line);margin:40px 0}
.doc code{font:450 .86em/1.4 var(--mono);background:var(--cream-2);border:1px solid var(--line-soft);border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}
.doc pre{background:var(--night);color:var(--cream-2);border-radius:var(--radius-l);padding:16px 18px;overflow-x:auto;margin:0 0 20px}
.doc pre code{background:none;border:0;padding:0;color:inherit;font-size:13.5px;line-height:1.6;overflow-wrap:normal}
.doc table{inline-size:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px;display:block;overflow-x:auto}
.doc th,.doc td{text-align:start;vertical-align:top;padding:9px 12px;border-block-end:1px solid var(--line)}
.doc th{font-weight:700;background:var(--cream-2)}
.doc img{max-inline-size:100%;block-size:auto;border-radius:var(--radius-l);border:1px solid var(--line);display:block;margin:8px 0 6px}
.doc figure{margin:0 0 24px}
.doc figcaption{font-size:13px;color:var(--ink-soft)}
.doc blockquote{margin:0 0 20px;padding:4px 18px;border-inline-start:3px solid var(--line);color:var(--ink-soft)}

/* Callouts: > [!NOTE] / [!TIP] / [!WARNING] / [!LATER] */
.callout{--c:var(--note);--w:var(--note-wash);background:var(--w);border-inline-start:4px solid var(--c);border-radius:var(--radius);padding:12px 16px;margin:0 0 20px;font-size:15px}
.callout>:last-child{margin-block-end:0}
.callout__label{display:flex;align-items:center;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin:2px 0 8px;color:var(--ink)}
.callout__label::before{content:"";inline-size:8px;block-size:8px;border-radius:50%;background:var(--c)}
.callout--tip{--c:var(--tip);--w:var(--tip-wash)}
.callout--warning{--c:var(--warn);--w:var(--warn-wash)}
.callout--later{--c:var(--later);--w:var(--later-wash)}

/* Step cards on the quickstart */
.doc ol.steps{counter-reset:step;list-style:none;padding:0}
.doc ol.steps>li{counter-increment:step;position:relative;padding-inline-start:44px;margin-block:0 18px}
.doc ol.steps>li::before{content:counter(step);position:absolute;inset-inline-start:0;inset-block-start:0;inline-size:30px;block-size:30px;border-radius:50%;background:var(--ink);color:var(--cream);display:grid;place-items:center;font:500 14px/1 var(--mono)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:0 0 24px}
.card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-l);padding:16px;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--pink);color:var(--ink)}
.card b{display:block;font:500 19px/1.2 var(--heading);margin-block-end:4px}
.card span{font-size:14px;color:var(--ink-soft);line-height:1.45;display:block}

/* Previous / next */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-block-start:56px}
.pager a{display:block;border:1px solid var(--line);border-radius:var(--radius-l);padding:14px 16px;text-decoration:none;background:var(--paper)}
.pager a:hover{border-color:var(--pink)}
.pager small{display:block;font-size:13px;color:var(--ink-soft)}
.pager b{font-size:16px;color:var(--pink-text)}
.pager .next{grid-column:2;text-align:end}
.updated{margin-block-start:28px;font-size:13px;color:var(--ink-soft)}

/* On this page */
.toc{position:sticky;inset-block-start:calc(var(--top) + 28px);align-self:start;max-block-size:calc(100dvh - var(--top) - 56px);overflow-y:auto;border-inline-start:1px solid var(--line);padding-inline-start:16px;font-size:13.5px}
.toc h2{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:4px 0 12px}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{margin-block:6px}
.toc .lvl3{padding-inline-start:12px}
.toc a{color:var(--ink-soft);text-decoration:none;line-height:1.35;display:block}
.toc a:hover,.toc a.is-active{color:var(--pink-text)}

/* Footer */
.foot{background:var(--night);color:var(--night-muted);font-size:14px;padding:28px 40px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
.foot a{color:var(--night-text)}

/* Search dialog */
.search{border:0;padding:0;border-radius:var(--radius-l);inline-size:min(640px,calc(100vw - 32px));max-block-size:min(560px,calc(100dvh - 80px));margin-block-start:72px;background:var(--paper);color:var(--ink);box-shadow:0 24px 64px rgba(22,21,30,.35);overflow:hidden}
.search::backdrop{background:rgba(22,21,30,.45)}
.search__in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-block-end:1px solid var(--line)}
.search__in input{flex:1;border:0;background:none;font:400 17px/1.4 var(--body);color:var(--ink);outline:none;min-inline-size:0}
.search__list{overflow-y:auto;max-block-size:calc(min(560px,100dvh - 80px) - 100px);padding:8px}
.search__item{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink)}
.search__item.is-sel,.search__item:hover{background:var(--cream-2);color:var(--ink)}
.search__item small{display:block;font:500 11px/1.3 var(--mono);color:var(--ink-soft);letter-spacing:.03em;text-transform:uppercase}
.search__item b{display:block;font-size:15px}
.search__item span{display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.4}
.search__item mark{background:var(--pink-wash);color:var(--pink-text);border-radius:2px}
.search__empty{padding:16px;color:var(--ink-soft)}
.search__foot{display:flex;gap:16px;padding:10px 16px;border-block-start:1px solid var(--line);font-size:12px;color:var(--ink-soft)}

/* Sign-in (team site) */
.gate{min-block-size:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.gate__brand{background:var(--night);color:var(--night-text);padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.gate__brand h2{font:500 44px/1.05 var(--heading);color:#fff;margin:0 0 12px}
.gate__panel{display:grid;place-items:center;padding:32px 16px}
.gate__form{inline-size:min(400px,100%)}
.gate__form h1{font:500 34px/1.1 var(--heading);margin:0 0 8px}
.gate__form p{color:var(--ink-soft)}
.gate label{display:block;font-weight:700;font-size:14px;margin:20px 0 6px}
.gate input{inline-size:100%;font:400 16px/1.4 var(--body);padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:100px;background:var(--pink);color:#fff;font-weight:700;font-size:15px;padding:12px 22px;text-decoration:none;margin-block-start:16px}
.btn:hover{background:var(--pink-text);color:#fff}
.btn--block{inline-size:100%}
.err{color:#B3261E;font-weight:500}

@media (max-width:1100px){.page{grid-template-columns:minmax(0,1fr)}.toc{display:none}}
@media (max-width:860px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .side{display:none;position:fixed;inset:var(--top) 0 0 0;block-size:auto;z-index:15}
  body.is-menu .side{display:block}
  .menubtn{display:inline-flex}
  .top__links,.brand__site,.top__user span{display:none}
  .searchbtn{inline-size:auto}.searchbtn span,.searchbtn kbd{display:none}
  .page{padding:20px 16px 48px}
  .foot{padding:24px 16px}
  .gate{grid-template-columns:minmax(0,1fr)}.gate__brand{padding:28px 16px}.gate__brand h2{font-size:32px}
}
@media (max-width:520px){.pager{grid-template-columns:1fr}.pager .next{grid-column:1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
