/* ============================================================ TOKENS */
:root{
  --paper:#F4F1EA;        --paper-2:#EFEBE2;
  --surface:#FFFDF8;      --surface-2:#FAF7F0;
  --ink:#17130F;          --ink-2:#4E453C;      --ink-3:#8B8177;
  --line:#E3DBCD;         --line-2:#D3C9B8;
  --accent:#0C6B60;       --accent-2:#0E8074;   --accent-wash:#E2EDEA;
  --ok:#3D6B43;           --ok-wash:#E4EDE2;
  --warn:#946313;         --warn-wash:#F6EBD6;
  --bad:#A33323;          --bad-wash:#F6E3DE;
  --code:#221E18;         --code-ink:#E9E2D4;

  --r-lg:26px; --r-md:18px; --r-sm:11px; --r-xs:8px;
  --shadow-sm:0 1px 2px rgba(43,33,20,.05), 0 2px 8px rgba(43,33,20,.04);
  --shadow-md:0 2px 4px rgba(43,33,20,.05), 0 12px 28px -8px rgba(43,33,20,.12);
  --shadow-lg:0 4px 10px rgba(43,33,20,.06), 0 28px 60px -18px rgba(43,33,20,.20);
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --z-grain:60; --z-nav:40; --z-toast:70;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#131211;      --paper-2:#0D0C0B;
    --surface:#1C1A18;    --surface-2:#211E1B;
    --ink:#F2EDE4;        --ink-2:#B7ADA1;      --ink-3:#867C72;
    --line:#2E2A26;       --line-2:#3B352F;
    --accent:#3FAE9F;     --accent-2:#57C4B4;   --accent-wash:#17322E;
    --ok:#7FB585;         --ok-wash:#1B2A1D;
    --warn:#D2A052;       --warn-wash:#2E2415;
    --bad:#E08472;        --bad-wash:#31201C;
    --code:#100F0E;       --code-ink:#D9D2C6;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 2px 4px rgba(0,0,0,.35), 0 14px 30px -10px rgba(0,0,0,.6);
    --shadow-lg:0 4px 10px rgba(0,0,0,.4), 0 30px 64px -20px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Plus Jakarta Sans", ui-sans-serif, "Segoe UI", sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  background-image:
    radial-gradient(60rem 30rem at 12% -8%, var(--accent-wash) 0%, transparent 62%),
    radial-gradient(46rem 26rem at 92% 4%, var(--paper-2) 0%, transparent 60%);
  background-attachment:fixed;
}
/* Film grain: fixed, inert, keeps flat surfaces from looking like plastic. */
body::after{
  content:""; position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){ body::after{ mix-blend-mode:screen; opacity:.05 } }

h1,h2,h3{ font-family:"Fraunces", ui-serif, Georgia, serif; font-weight:600; margin:0;
          letter-spacing:-.018em; text-wrap:balance; }
p{ margin:0 0 .85em; max-width:68ch; text-wrap:pretty }
a{ color:var(--accent) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px }

/* ============================================================ CHROME */
.masthead{ max-width:1120px; margin:0 auto; padding:34px 26px 0;
           display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap }
.brand{ display:flex; align-items:center; gap:13px; min-width:0 }
.mark{ width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center;
       background:var(--accent); box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.22) }
.mark svg{ display:block }
.brand h1{ font-size:23px; line-height:1.15 }
.brand .tag{ font-size:12.5px; color:var(--ink-3); letter-spacing:.01em }
.masthead .spacer{ flex:1 1 60px }
.status{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end }

.chip{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:500;
       padding:5px 11px; border-radius:999px; background:var(--surface); color:var(--ink-3);
       border:1px solid var(--line); box-shadow:var(--shadow-sm); white-space:nowrap }
.chip.on{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 32%, var(--line)) }
.chip.off{ opacity:.6 }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--bad); flex:0 0 auto }
.dot.live{ background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent) }
.dot.live::after{ content:""; display:block; width:7px; height:7px; border-radius:50%;
  background:var(--ok); animation:ping 2.4s var(--ease-out) infinite }
@keyframes ping{ 0%{transform:scale(1);opacity:.7} 70%,100%{transform:scale(3.2);opacity:0} }

/* Floating glass island nav, detached from the top edge. */
.navwrap{ position:sticky; top:14px; z-index:var(--z-nav); padding:20px 26px 4px; }
nav{ width:max-content; max-width:100%; margin:0 auto; display:flex; gap:3px; padding:5px;
     border-radius:999px; border:1px solid var(--line);
     background:color-mix(in srgb, var(--surface) 93%, transparent);
     backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5);
     box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.5);
     overflow-x:auto; scrollbar-width:none }
nav::-webkit-scrollbar{ display:none }
nav button{ font:inherit; font-size:13.5px; font-weight:500; color:var(--ink-3);
  background:none; border:0; padding:9px 15px; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  transition:color .35s var(--ease), background .35s var(--ease) }
nav button svg{ opacity:.7; transition:opacity .35s var(--ease) }
nav button:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent) }
nav button.active{ color:var(--surface); background:var(--accent);
  box-shadow:0 1px 2px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.22) }
nav button.active svg{ opacity:1 }

main{ max-width:1120px; margin:0 auto; padding:14px 26px 96px }

/* ============================================================ SURFACES */
/* Double bezel: an outer shell holds an inner core, so cards read as objects. */
.card{ background:color-mix(in srgb, var(--ink) 4%, transparent);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:7px; margin-bottom:18px }
.card > .inner{ background:var(--surface); border-radius:calc(var(--r-lg) - 7px);
  padding:24px 26px; box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.6) }
@media (prefers-color-scheme:dark){ .card > .inner{ box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.05) } }

.eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; color:var(--accent);
  background:var(--accent-wash); padding:5px 11px; border-radius:999px; margin-bottom:13px }
.card h2{ font-size:19px; margin:0 0 6px }
.card h3{ font-size:15.5px; margin:26px 0 7px; letter-spacing:-.01em }
.lede{ color:var(--ink-2); margin-bottom:18px }
.meta{ font-size:12.5px; color:var(--ink-3) }

/* ============================================================ CONTROLS */
button, select, input[type=text], textarea{ font:inherit; color:var(--ink) }
.btn{ display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--surface); cursor:pointer; font-weight:500;
  font-size:13.5px; box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s var(--ease), border-color .3s var(--ease) }
.btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:var(--shadow-md); border-color:var(--ink-3) }
.btn:active:not(:disabled){ transform:scale(.98) translateY(0) }
.btn:disabled{ opacity:.42; cursor:not-allowed; box-shadow:none }
.btn.primary{ background:var(--accent); border-color:transparent; color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.14), 0 8px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent) }
.btn.primary:hover:not(:disabled){ background:var(--accent-2); border-color:transparent }
/* Nested icon disc — never a naked arrow beside the label. */
.btn .disc{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:rgba(255,255,255,.18); margin-right:-6px;
  transition:transform .4s var(--ease) }
.btn:not(.primary) .disc{ background:color-mix(in srgb, var(--ink) 8%, transparent) }
.btn:hover:not(:disabled) .disc{ transform:translateX(2px) }
.btn.ghost{ background:transparent; border-color:transparent; box-shadow:none; color:var(--ink-2) }
.btn.ghost:hover:not(:disabled){ background:color-mix(in srgb, var(--ink) 6%, transparent); border-color:transparent }
.btn.danger{ color:var(--bad); border-color:color-mix(in srgb, var(--bad) 30%, var(--line)) }
.btn.sm{ padding:6px 12px; font-size:12.5px; gap:6px }

.row{ display:flex; gap:11px; align-items:center; flex-wrap:wrap }
.row.mb{ margin-bottom:13px }
.spacer{ flex:1 }

input[type=text], textarea, select{
  width:100%; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:11px 13px; box-shadow:inset 0 1px 2px rgba(43,33,20,.05);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease) }
input[type=text]:focus, textarea:focus, select:focus{ outline:none; border-color:var(--accent);
  background:var(--surface); box-shadow:0 0 0 3px var(--accent-wash) }
textarea{ font-family:"JetBrains Mono", ui-monospace, monospace; font-size:13px; line-height:1.6; resize:vertical }
select{ width:auto; cursor:pointer }
.field{ margin-bottom:14px }
.field label{ display:block; font-size:12.5px; font-weight:500; color:var(--ink-2); margin-bottom:6px }

/* Option rows */
.opts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:11px }
.opt{ display:flex; gap:12px; align-items:flex-start; padding:14px 15px; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--line); cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .4s var(--ease) }
.opt:hover{ border-color:var(--line-2); transform:translateY(-1px) }
.opt:has(input:checked){ background:var(--accent-wash); border-color:color-mix(in srgb, var(--accent) 34%, transparent) }
.opt input{ appearance:none; width:19px; height:19px; flex:0 0 auto; margin:2px 0 0; border-radius:6px;
  border:1.5px solid var(--line-2); background:var(--surface); cursor:pointer; position:relative;
  transition:background .25s var(--ease), border-color .25s var(--ease) }
.opt input:checked{ background:var(--accent); border-color:var(--accent) }
.opt input:checked::after{ content:""; position:absolute; left:5.5px; top:2px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg) }
.opt input:disabled{ opacity:.4; cursor:not-allowed }
.opt .t{ font-size:13.5px; font-weight:600; letter-spacing:-.005em }
.opt .s{ display:block; font-size:12.5px; color:var(--ink-3); font-weight:400; margin-top:3px; line-height:1.5 }
.scope{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  color:var(--accent); margin-left:7px }

/* ============================================================ DROPZONE */
.drop{ position:relative; border:1.5px dashed var(--line-2); border-radius:var(--r-md);
  padding:42px 26px; text-align:center; cursor:pointer; overflow:hidden;
  background:var(--surface-2);
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .5s var(--ease) }
.drop::before{ content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(26rem 12rem at 50% 0%, var(--accent-wash), transparent 70%);
  transition:opacity .5s var(--ease) }
.drop:hover{ border-color:var(--accent); transform:translateY(-2px) }
.drop:hover::before{ opacity:1 }
.drop.over{ border-style:solid; border-color:var(--accent); transform:scale(1.008);
  background:var(--accent-wash) }
.drop.over::before{ opacity:1 }
.drop .glyph{ width:52px; height:52px; margin:0 auto 14px; border-radius:16px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); color:var(--accent);
  box-shadow:var(--shadow-sm); transition:transform .5s var(--ease) }
.drop:hover .glyph{ transform:translateY(-3px) rotate(-4deg) }
.drop .big{ font-family:"Fraunces",serif; font-size:19px; font-weight:600; letter-spacing:-.015em }
.drop .sub{ font-size:12.5px; color:var(--ink-3); margin-top:5px }
.drop .sub b{ color:var(--ink-2); font-weight:500 }

/* ============================================================ FILE ROWS */
.item{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  margin-bottom:9px; overflow:hidden; box-shadow:var(--shadow-sm);
  animation:rise .5s var(--ease-out) both;
  transition:border-color .3s var(--ease), box-shadow .4s var(--ease) }
.item:hover{ box-shadow:var(--shadow-md) }
@keyframes rise{ from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none} }
.item .head{ display:flex; align-items:center; gap:13px; padding:13px 15px; cursor:pointer }
.item .head:hover{ background:var(--surface-2) }
.caret{ color:var(--ink-3); flex:0 0 auto; transition:transform .4s var(--ease) }
.item.open .caret{ transform:rotate(90deg) }
.item .name{ font-weight:600; font-size:14px; letter-spacing:-.008em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.item .sub{ font-size:12px; color:var(--ink-3); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.item .body{ display:none; padding:2px 15px 16px; border-top:1px solid var(--line);
  animation:fade .45s var(--ease-out) both }
.item.open .body{ display:block }
@keyframes fade{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }

.badge{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; white-space:nowrap; flex:0 0 auto }
.b-clean{ background:var(--ok-wash); color:var(--ok) }
.b-marked{ background:var(--warn-wash); color:var(--warn) }
.b-err{ background:var(--bad-wash); color:var(--bad) }
.b-busy{ background:var(--accent-wash); color:var(--accent) }
.b-done{ background:var(--accent); color:#fff }
.b-busy{ position:relative; overflow:hidden }
.b-busy::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:shimmer 1.4s linear infinite }
@keyframes shimmer{ to{ transform:translateX(100%) } }

ul.find{ margin:12px 0 0; padding-left:19px; font-size:13.5px; color:var(--ink-2) }
ul.find li{ margin:4px 0 }
pre{ background:var(--code); color:var(--code-ink); border-radius:var(--r-sm); padding:14px 16px;
  overflow:auto; max-height:320px; font-size:12.5px; line-height:1.55; margin:12px 0 0;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3) }
code{ font-family:"JetBrains Mono", ui-monospace, monospace; font-size:.88em;
  background:color-mix(in srgb, var(--ink) 7%, transparent); padding:2px 6px; border-radius:5px }

.note{ font-size:13px; color:var(--ink-2); background:var(--accent-wash);
  border-left:2.5px solid var(--accent); padding:12px 15px; border-radius:0 var(--r-sm) var(--r-sm) 0;
  margin:12px 0; max-width:74ch }
.note.warn{ background:var(--warn-wash); border-left-color:var(--warn) }
.note.bad{ background:var(--bad-wash); border-left-color:var(--bad) }
.note b{ color:var(--ink) }

.empty{ text-align:center; padding:34px 20px; color:var(--ink-3); font-size:13.5px }
.empty .glyph{ font-size:26px; margin-bottom:8px; opacity:.5 }

/* ============================================================ PROGRESS */
.stat{ display:flex; gap:30px; flex-wrap:wrap; margin-bottom:16px }
.stat b{ display:block; font-family:"Fraunces",serif; font-size:26px; font-weight:600; line-height:1.1 }
.stat span{ font-size:10.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.13em; font-weight:600 }
.prog{ height:7px; border-radius:999px; background:var(--paper-2); overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(43,33,20,.1) }
.prog i{ display:block; height:100%; width:0; border-radius:999px; background:var(--accent);
  transition:width .5s var(--ease) }

table{ width:100%; border-collapse:collapse; font-size:12.5px }
th,td{ text-align:left; padding:9px 11px; border-bottom:1px solid var(--line) }
th{ color:var(--ink-3); font-size:10.5px; text-transform:uppercase; letter-spacing:.11em; font-weight:600 }
td.p{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; word-break:break-all }
.scroller{ overflow:auto; max-height:440px; margin-top:16px; border-radius:var(--r-sm) }

/* ============================================================ METADATA */
.mdgroup{ border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:9px;
  background:var(--surface); overflow:hidden }
.mdgroup > summary{ cursor:pointer; padding:12px 15px; list-style:none; display:flex;
  align-items:center; gap:10px; font-weight:600; font-size:13.5px;
  transition:background .3s var(--ease) }
.mdgroup > summary:hover{ background:var(--surface-2) }
.mdgroup > summary::-webkit-details-marker{ display:none }
.mdgroup > summary::before{ content:"›"; color:var(--ink-3); font-size:17px; line-height:1;
  transition:transform .35s var(--ease) }
.mdgroup[open] > summary::before{ transform:rotate(90deg) }
.mdgroup .count{ margin-left:auto; font-size:11px; font-weight:500; color:var(--ink-3);
  background:var(--paper-2); padding:3px 9px; border-radius:999px }
.mdtable{ border-top:1px solid var(--line) }
.mdrow{ display:grid; grid-template-columns:minmax(150px,30%) 1fr; gap:14px;
  padding:8px 15px; border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent);
  font-size:12.5px; align-items:baseline }
.mdrow:last-child{ border-bottom:0 }
.mdrow:hover{ background:var(--surface-2) }
.mdrow .k{ color:var(--ink-2); font-weight:500; word-break:break-word }
.mdrow .v{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px;
  color:var(--ink); word-break:break-word; white-space:pre-wrap }
.tagflag{ display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:2px 7px; border-radius:999px; margin-left:7px;
  background:var(--warn-wash); color:var(--warn); vertical-align:middle }

.mapcard{ margin:16px 0; padding:16px 18px; border-radius:var(--r-md);
  border:1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  background:linear-gradient(160deg, var(--accent-wash), var(--surface-2)) }
.mapcard-head{ display:flex; gap:12px; align-items:flex-start; color:var(--accent) }
.mapcard-t{ font-weight:600; font-size:14px; color:var(--ink); letter-spacing:-.008em }
.mapcard-c{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12.5px;
  color:var(--ink-2); margin-top:3px }
.mapcard-note{ font-size:11.5px; color:var(--ink-3); margin-top:11px }
a.btn{ text-decoration:none }

/* ============================================================ TOAST */
.toast{ position:fixed; right:22px; bottom:22px; z-index:var(--z-toast); max-width:400px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-left:3px solid var(--accent); padding:13px 17px; border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg); font-size:13.5px;
  animation:toastIn .55s var(--ease-out) both }
.toast.bad{ border-left-color:var(--bad) }
@keyframes toastIn{ from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none} }

/* ============================================================ TABS */
.tab{ display:none }
.tab.active{ display:block; animation:tabIn .55s var(--ease-out) both }
@keyframes tabIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

/* Staggered first paint. */
.masthead{ animation:rise .7s var(--ease-out) both }
.navwrap{ animation:rise .7s var(--ease-out) .07s both }
main{ animation:rise .7s var(--ease-out) .14s both }

@media (max-width:720px){
  .masthead{ padding:24px 16px 0 }
  .navwrap{ padding:16px 16px 4px }
  main{ padding:10px 16px 72px }
  .card > .inner{ padding:19px 17px }
  .drop{ padding:32px 16px }
  .status{ justify-content:flex-start }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important }
}


/* ============================================================ CONTENT PAGES
   Used by the static pages under /pages and by the hero lede on the
   dashboard. Scoped so nothing here can reach existing dashboard rules:
   `.masthead + .lede` matches only the hero paragraph, never the `.lede`
   used inside cards. */
.masthead + .lede{ max-width:1120px; margin:12px auto 0; padding:0 26px;
  font-family:"Fraunces", ui-serif, Georgia, serif; font-size:19px; line-height:1.45;
  color:var(--ink-2); max-width:1120px }
/* Content pages set a narrower measure than the dashboard, so the
   masthead has to match it or the brand hangs left of the text. */
.masthead.narrow{ max-width:768px }
a.brand{ text-decoration:none; color:inherit }
a.brand:hover .wordmark{ color:var(--accent) }
.wordmark{ display:block; font-family:"Fraunces", ui-serif, Georgia, serif; font-weight:600;
  font-size:23px; line-height:1.15; letter-spacing:-.018em; color:var(--ink) }

.page{ max-width:768px; margin:0 auto; padding:28px 26px 24px }
.page h1{ font-size:34px; line-height:1.13; margin:0 0 16px }
.page h2{ font-size:21px; margin:36px 0 10px }
.page h3{ font-size:16px; margin:24px 0 6px; letter-spacing:-.01em }
.page p{ max-width:none; color:var(--ink-2) }
.page ul{ margin:0 0 1em; padding-left:20px; color:var(--ink-2) }
.page li{ margin:0 0 .45em }
.page li b, .page p b{ color:var(--ink) }
.page table{ width:100%; border-collapse:collapse; margin:0 0 1.2em; font-size:14px }
.page th, .page td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--ink-2); overflow-wrap:anywhere }
/* Long tag names and code spans must wrap rather than push the page sideways. */
.page code, .page a{ overflow-wrap:anywhere }
.page th{ color:var(--ink); font-weight:600; background:var(--surface-2) }
.kicker{ font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin:0 0 10px }
.cta{ margin:32px 0 0 }
.page-foot{ max-width:768px; margin:0 auto; padding:0 26px 64px; font-size:13px; color:var(--ink-3) }
/* The dashboard styles a bare `nav` as the pill-shaped tab bar, so the
   footer nav has to opt out of all of it. */
.page-foot nav{ display:flex; flex-wrap:wrap; gap:7px 18px; margin:0 0 14px;
  width:auto; max-width:none; padding:24px 0 0; border:0; border-radius:0;
  border-top:1px solid var(--line); background:none; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none }
.page-foot a{ color:var(--ink-2) }
@media (max-width:720px){
  .masthead + .lede{ padding:0 16px; font-size:17px }
  .page{ padding:22px 16px 20px }
  .page h1{ font-size:27px }
  .page-foot{ padding:0 16px 48px }
}