:root{--bg:#f7f1e6;--card:#fffdf8;--ink:#2a2520;--muted:#686052;--line:#e7ddca;
--brand:#3f7d52;--brand-ink:#2f6840;--herb-soft:#e6efe2;--surface-2:#f3ecde;
--warn-ink:#855a0c;--saffron-soft:#f7ecd0;--pencil:#c3b69b;--shadow-rgb:63,49,30}
html[data-theme="dark"]{--bg:#15120f;--card:#211d1a;--ink:#edebe7;--muted:#a39e96;
--line:#33302b;--brand:#3b834e;--brand-ink:#95d7a2;--herb-soft:#1c3422;
--surface-2:#1b1815;--warn-ink:#f4c677;--saffron-soft:#403012;--pencil:#57514b;
--shadow-rgb:0,0,0}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.6;
font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:760px;margin:0 auto;padding:0 22px 80px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:22px 0 0}
.brand{display:inline-flex;gap:8px;color:var(--brand-ink);font-weight:700;
text-decoration:none;font-size:1.05rem}
h1{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:2rem;
line-height:1.2;margin:26px 0 12px}
h2{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:1.3rem;
line-height:1.25;margin:38px 0 10px}
h3{font-size:1rem;margin:22px 0 6px}
p{margin:0 0 14px;max-width:64ch}
.lede{font-size:1.08rem;color:var(--muted)}
.url{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--herb-soft);
border:1px solid var(--brand);border-radius:12px;padding:13px 16px;margin:20px 0 8px}
.url code{font-size:1rem;color:var(--brand-ink);background:none;border:0;padding:0;
word-break:break-all;-webkit-user-select:all;user-select:all}
.url .k{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--brand-ink);opacity:.75}
.url .copy{margin-left:auto}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
pre{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
padding:12px 14px;overflow-x:auto;font-size:.85rem;margin:0}
pre code{background:none;border:0;padding:0}
ol,ul{margin:0 0 14px;padding-left:22px}
li{margin-bottom:7px;max-width:62ch}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:18px 20px;margin:14px 0}
.note{background:var(--saffron-soft);border:1px solid var(--warn-ink);color:var(--warn-ink);
border-radius:10px;padding:10px 14px;font-size:.9rem;margin:0 0 14px;max-width:62ch}
table{width:100%;border-collapse:collapse;margin:8px 0 0}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);font-size:.92rem;
vertical-align:top}
th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
font-weight:600}
tr:last-child td{border-bottom:0}
.tag{font-size:.7rem;padding:1px 7px;border-radius:999px;border:1px solid;white-space:nowrap}
.tag.r{background:var(--herb-soft);color:var(--brand-ink);border-color:var(--brand)}
.tag.w{background:var(--saffron-soft);color:var(--warn-ink);border-color:var(--warn-ink)}
a{color:var(--brand-ink)}
.small{font-size:.88rem;color:var(--muted);margin-top:0}
footer{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
color:var(--muted);font-size:.88rem}

/* --- the way back -------------------------------------------------------
   An anchor first and a history step second: somebody who arrived from the
   app's Settings wants Settings back, and "/" is the app's home screen, which
   is not where they were. CONNECT_JS upgrades this to history.back()
   when the page behind it is one of ours. */
.back{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:10px 14px;
border:1px solid var(--line);border-radius:10px;background:var(--card);
color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:600}
.back:hover{color:var(--ink);border-color:var(--muted)}

/* --- buttons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:11px;
background:var(--card);color:var(--ink);font:inherit;font-size:.92rem;font-weight:600;
text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
/* The same primary as the contact page's, token for token: a brand fill with
   white on it, deepened rather than lightened on hover in the dark palette —
   `--brand-ink` there is a mint light enough to read *on*, not through. */
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
html[data-theme="dark"] .btn.primary:hover{background:#2c6d3e;border-color:#2c6d3e;
color:#fff}
/* Beats :hover on purpose: the pointer is still on the button when it flips,
   and the hover fill under the new ink is a "Copied" nobody can read. */
.btn.done,.btn.done:hover{background:var(--herb-soft);border-color:var(--brand);
color:var(--brand-ink)}
.btn svg{width:16px;height:16px;flex:none}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* --- the tab strip ------------------------------------------------------
   Served with `hidden` on it and unhidden by script: with no script every
   panel below stays open and the page reads as one list, which is what a
   crawler and a reader without JavaScript get. */
.seg{display:flex;gap:4px;margin:16px 0 18px;padding:4px;background:var(--surface-2);
border-radius:13px;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg-btn{flex:0 0 auto;min-height:44px;padding:10px 15px;border:0;border-radius:9px;
background:transparent;color:var(--muted);font:inherit;font-size:.9rem;font-weight:600;
cursor:pointer;white-space:nowrap}
.seg-btn:hover{color:var(--ink)}
.seg-btn[aria-selected="true"]{background:var(--card);color:var(--ink);
box-shadow:0 1px 2px rgba(var(--shadow-rgb),.06),0 3px 8px rgba(var(--shadow-rgb),.08)}
/* The panel heading repeats the tab above it once the strip is live, and the
   panel is labelled by that tab, so it is redundant to eye and screen reader
   alike. Without script it is the only thing telling the six panels apart. */
[data-tabs="on"] .panel>h3{display:none}

/* --- a copyable block --------------------------------------------------- */
.codewrap{margin:10px 0 4px}
.codewrap .copy{margin-top:8px;padding:9px 14px;font-size:.85rem}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;border:0}