:root{
  --ground:#FAF3E7; --paper:#FFFCF6; --edge:#E8D8C0; --well:#F3E6D3;
  --ink:#33241A; --ink2:#4A362A; --ink3:#6B4B37; --faint:#796654;
  --accent:#C6633C; --gold:#E0A339;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#1E1711; --paper:#282019; --edge:#3B2F24; --well:#221B15;
    --ink:#F3E8D8; --ink2:#DCCDB8; --ink3:#BCA88E; --faint:#9A8770;
    --accent:#D9784E; --gold:#E5B057;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.65;
}
.wrap{max-width:760px; margin:0 auto; padding-inline:22px; padding-block:48px 80px}
a{color:var(--accent)}
h1{font-family:"Baloo 2",system-ui,sans-serif; font-weight:700; font-size:clamp(28px,5vw,38px);
   line-height:1.15; margin:0 0 8px; text-wrap:balance}
h2{font-family:"Baloo 2",system-ui,sans-serif; font-weight:600; font-size:21px; margin:38px 0 8px}
h3{font-size:16px; margin:22px 0 6px; color:var(--ink2)}
p,li{color:var(--ink2); max-width:68ch}
.lede{color:var(--ink3)}
.upd{color:var(--faint); font-size:14px; margin-top:4px}
.todo{background:color-mix(in srgb, var(--gold) 22%, transparent); border:1px solid color-mix(in srgb, var(--gold) 55%, transparent);
      border-radius:5px; padding:1px 6px; font-weight:600; color:var(--ink)}
.note{background:var(--well); border:1px solid var(--edge); border-left:4px solid var(--accent);
      border-radius:10px; padding:14px 16px; margin:22px 0}
.note p{margin:0}
table{border-collapse:collapse; width:100%; margin:14px 0; font-size:15px}
th,td{text-align:left; vertical-align:top; padding:9px 10px; border-bottom:1px solid var(--edge)}
th{color:var(--ink); font-weight:600}
td{color:var(--ink2)}
.tablewrap{overflow-x:auto}
code{font-family:ui-monospace,Menlo,monospace; font-size:13.5px; background:var(--well);
     border:1px solid var(--edge); border-radius:4px; padding:1px 5px}
nav{margin-bottom:30px; font-size:14px}
nav a{margin-right:14px}
footer{margin-top:52px; padding-top:20px; border-top:1px solid var(--edge); color:var(--faint); font-size:14px}

/* ── the landing page and the invite page ──────────────────────────────────────
   The legal pages above are documents; these two are the only places on this host
   somebody arrives at from outside. They share the tokens and add nothing new. */
.narrow{max-width:560px}
.hero{padding-block:8px 0}
.hero h1{font-size:clamp(30px,6.2vw,44px); max-width:15ch}
.hero .lede{font-size:clamp(16px,2.6vw,18px); max-width:46ch; margin-bottom:26px}
.cta{display:inline-block; background:var(--accent); color:#FFFCF6; text-decoration:none;
     font-weight:600; font-size:16px; border-radius:999px; padding:13px 26px;
     border:1px solid color-mix(in srgb, var(--accent) 70%, #000)}
.cta:hover{filter:brightness(1.06)}
.cta:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.fine{font-size:14px; color:var(--faint); margin-top:12px}
.feature{border-top:1px solid var(--edge); padding-block:22px}
.feature h2{margin:0 0 4px; font-size:19px}
.feature p{margin:0}
.code-slab{background:var(--paper); border:1px solid var(--edge); border-left:4px solid var(--accent);
           border-radius:10px; padding:18px 20px; margin:26px 0}
.code-label{margin:0 0 6px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.code{margin:0; font-family:ui-monospace,Menlo,monospace; font-size:clamp(20px,5vw,27px);
      font-weight:600; color:var(--ink); letter-spacing:.04em; word-break:break-all}
.copy{margin-top:12px; background:none; border:1px solid var(--edge); border-radius:999px;
      padding:6px 14px; font:inherit; font-size:14px; color:var(--ink2); cursor:pointer}
.copy:hover{background:var(--well)}
.copy:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.steps{padding-left:20px; margin:22px 0}
.steps li{margin-bottom:8px}