/* instrument-sans-latin-ext-400-normal */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/instrument-sans-latin-ext-400-normal-Q_nF8v4l.woff2) format('woff2'), url(/assets/instrument-sans-latin-ext-400-normal-r32jotim.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* instrument-sans-latin-400-normal */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/instrument-sans-latin-400-normal-DRC__1Mx.woff2) format('woff2'), url(/assets/instrument-sans-latin-400-normal-D1W7dsQl.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* instrument-sans-latin-ext-500-normal */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/instrument-sans-latin-ext-500-normal-CTEe1bJa.woff2) format('woff2'), url(/assets/instrument-sans-latin-ext-500-normal-CAxz3nsc.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* instrument-sans-latin-500-normal */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/instrument-sans-latin-500-normal-Dk9ku72i.woff2) format('woff2'), url(/assets/instrument-sans-latin-500-normal-Z6ESRlEs.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* instrument-sans-latin-ext-600-normal */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/instrument-sans-latin-ext-600-normal-BsaQcF38.woff2) format('woff2'), url(/assets/instrument-sans-latin-ext-600-normal-DMks36a2.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* instrument-sans-latin-600-normal */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/instrument-sans-latin-600-normal-B7fBEWYG.woff2) format('woff2'), url(/assets/instrument-sans-latin-600-normal-B9e8oLYv.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* jetbrains-mono-cyrillic-ext-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/jetbrains-mono-cyrillic-ext-400-normal-C_uLvvQ5.woff2) format('woff2'), url(/assets/jetbrains-mono-cyrillic-ext-400-normal-Bh0R7Dhr.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/jetbrains-mono-cyrillic-400-normal-BEIGL1Tu.woff2) format('woff2'), url(/assets/jetbrains-mono-cyrillic-400-normal-ugxPyKxw.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/jetbrains-mono-greek-400-normal-C190GLew.woff2) format('woff2'), url(/assets/jetbrains-mono-greek-400-normal-B9oWc5Lo.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/jetbrains-mono-vietnamese-400-normal-ByoDsISC.woff2) format('woff2'), url(/assets/jetbrains-mono-vietnamese-400-normal-CqNFfHCs.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* jetbrains-mono-latin-ext-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/jetbrains-mono-latin-ext-400-normal-Bc8Ftmh3.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-ext-400-normal-fXTG6kC5.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* jetbrains-mono-latin-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/jetbrains-mono-latin-400-normal-V6pRDFza.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-400-normal-6-qcROiO.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* jetbrains-mono-cyrillic-ext-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/jetbrains-mono-cyrillic-ext-600-normal-Dj6eZy5f.woff2) format('woff2'), url(/assets/jetbrains-mono-cyrillic-ext-600-normal-DVvC-yKp.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/jetbrains-mono-cyrillic-600-normal-EVf6-Yzo.woff2) format('woff2'), url(/assets/jetbrains-mono-cyrillic-600-normal-8K4wrrwR.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/jetbrains-mono-greek-600-normal-H7WoG9Et.woff2) format('woff2'), url(/assets/jetbrains-mono-greek-600-normal-mc2nkWzM.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/jetbrains-mono-vietnamese-600-normal-Dtizs43-.woff2) format('woff2'), url(/assets/jetbrains-mono-vietnamese-600-normal-OWROknRo.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* jetbrains-mono-latin-ext-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/jetbrains-mono-latin-ext-600-normal-BfB_LPfz.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-ext-600-normal-DObL3zCW.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* jetbrains-mono-latin-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/jetbrains-mono-latin-600-normal-C8RAYTDA.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-600-normal-BfsvjouI.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*
  j2n design tokens. Source of truth, settled 2026-09-29.
  Taken from the approved mockups in design/mockups/. Where j2n-ds.html differs, this file wins.

  Themes: the bare :root is light. Dark applies from the OS setting unless the user picked light,
  or always when the user picked dark (data-theme on <html>). Components use only these tokens.
*/

:root{
  color-scheme:light;

  /* Chrome: neutral surfaces and text */
  --bg:#F3F3F4;        /* page and output background */
  --panel:#FFFFFF;     /* panes, header, bars, cards */
  --panel-2:#F7F7F8;   /* table headers, hover on rows */
  --sunk:#F1F1F3;      /* chips, segmented control track, ghost hover */
  --ink:#18181B;       /* primary text, keys, primary button fill */
  --ink-2:#4B4B52;     /* secondary text */
  --ink-3:#686871;     /* quiet text, meta lines, placeholders. Darkened from #7C7C85 (a11y pass:
                           that shade cleared only 3.7-4.1:1 against --panel/--bg/--panel-2/--sunk,
                           short of WCAG AA's 4.5:1 for normal-weight text; this clears 4.9:1+ on all four). */
  --line:#DCDCE0;      /* borders */
  --line-2:#EAEAED;    /* dividers inside a surface */

  /* JSON value types: the brand. Same color everywhere a type shows. */
  --t-str:#17704F;     /* text / string */
  --t-num:#2148C0;     /* number */
  --t-bool:#A12C78;    /* true/false / boolean */
  --t-null:#6C6F74;    /* empty / null */
  --t-punct:#9C9CA4;   /* brackets, commas, colons */

  /* States: text, tint fill, card outline. Never a colored side stripe. */
  --err:#B92E27;  --err-bg:#FBEAE8;  --err-line:#EFC3BF;
  --warn:#8E5508; --warn-bg:#FAF0DB; --warn-line:#EBD3A3;
  --ok:#17704F;   --ok-bg:#E3F1EA;   --ok-line:#B9DCCB;
  --sel:#E4EBFE;       /* selected row */
  --focus:#2148C0;     /* focus ring */
  --heart:#E5484D;     /* footer heart only */

  /* n8n: only inside n8n views (Workflow/Node tab dot, node details) */
  --n8n:#EA4B71; --n8n-bg:#FDE9EE;

  /* Elevation: only for things that float */
  --scrim:rgba(24,24,27,.32);
  --shadow-pop:0 1px 2px rgba(24,24,27,.06), 0 8px 24px rgba(24,24,27,.10);     /* menus, popovers, toasts */
  --shadow-modal:0 2px 6px rgba(24,24,27,.08), 0 24px 64px rgba(24,24,27,.18);  /* palette, review, sheets */

  /* Type: two families, one scale. Self-hosted in the build. */
  --ui:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-display:28px;  --fw-display:600;   /* marketing and explainer pages */
  --fs-heading:20px;  --fw-heading:600;   /* modal titles ("Review 3 fixes") */
  --fs-empty:22px;                        /* "Paste JSON here" (24px on phones) */
  --fs-title:15px;    --fw-title:600;     /* record names, popover titles */
  --fs-body:14px;     --lh-body:1.5;
  --fs-control:13px;  --fw-control:500;   /* buttons, tabs, menu items */
  --fs-small:12.5px;                      /* status bar, path bar, captions, tooltips */
  --fs-caption:11.5px;                    /* chips, meta lines, column-header detail */
  --fs-code:13px;     --lh-editor:1.75;   /* tree, editor, paths */
  --fs-logo:21px;                         /* wordmark, mono 600, letter-spacing -.04em */

  /* Space: 4 px base */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* Radius */
  --r-chip:5px; --r-ctl:7px; --r-card:10px; --r-modal:14px;

  /* Sizes */
  --h-ctl:32px; --h-ctl-sm:26px; --h-ctl-touch:44px;
  --h-header:52px; --h-pane-head:44px; --h-pathbar:40px; --h-status:34px;
  --tree-indent:18px; --tree-indent-touch:13px; --h-row:28px; --h-row-touch:36px;
  --tip-max:280px;
  --bp-stack:900px;    /* below this, one pane at a time (CSS can't read vars in media queries; mirror in code) */

  /* Motion */
  --dur-fast:120ms;    /* hover and color changes */
  --dur:220ms;         /* anything that moves or changes size */
  --ease:cubic-bezier(.2,.7,.2,1);
  --tip-delay:350ms;
  --query-error-delay:800ms;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#111113; --panel:#18181B; --panel-2:#1E1E22; --sunk:#151518;
    --ink:#ECECEE; --ink-2:#AAAAB2; --ink-3:#878797; --line:#2C2C31; --line-2:#232327;
    /* --ink-3 lightened from #7A7A83 for a11y: same 4.5:1 shortfall as light, mirrored (see light --ink-3). */
    --t-str:#72D4A6; --t-num:#93B2FF; --t-bool:#F08CCB; --t-null:#9296A0; --t-punct:#5F5F68;
    --err:#FF8B82;  --err-bg:#3A201E;  --err-line:#5E302C;
    --warn:#F1C06A; --warn-bg:#342A17; --warn-line:#56451F;
    --ok:#72D4A6;   --ok-bg:#16302A;   --ok-line:#23493E;
    --sel:#1D2A46; --focus:#93B2FF; --heart:#FF6B70;
    --n8n:#FF6E90; --n8n-bg:#3A1C26;
    --scrim:rgba(0,0,0,.55);
    --shadow-pop:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.5);
    --shadow-modal:0 2px 6px rgba(0,0,0,.4), 0 24px 64px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#111113; --panel:#18181B; --panel-2:#1E1E22; --sunk:#151518;
  --ink:#ECECEE; --ink-2:#AAAAB2; --ink-3:#878797; --line:#2C2C31; --line-2:#232327;
  --t-str:#72D4A6; --t-num:#93B2FF; --t-bool:#F08CCB; --t-null:#9296A0; --t-punct:#5F5F68;
  --err:#FF8B82;  --err-bg:#3A201E;  --err-line:#5E302C;
  --warn:#F1C06A; --warn-bg:#342A17; --warn-line:#56451F;
  --ok:#72D4A6;   --ok-bg:#16302A;   --ok-line:#23493E;
  --sel:#1D2A46; --focus:#93B2FF; --heart:#FF6B70;
  --n8n:#FF6E90; --n8n-bg:#3A1C26;
  --scrim:rgba(0,0,0,.55);
  --shadow-pop:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.5);
  --shadow-modal:0 2px 6px rgba(0,0,0,.4), 0 24px 64px rgba(0,0,0,.6);
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:0ms; --dur:0ms; }
}

/* The static explainer pages (/errors, /learn, /privacy). Tokens only, from design/tokens.css. No script. */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); font:15px/1.65 var(--ui); -webkit-font-smoothing:antialiased; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:3px; }

.bar{ max-width:780px; margin:0 auto; padding:0 var(--sp-5); display:flex; align-items:center; gap:var(--sp-4); }
.top{ background:var(--panel); border-bottom:1px solid var(--line); }
.top .bar{ height:var(--h-header); }
.logo{ font:600 var(--fs-logo)/1 var(--mono); letter-spacing:-.04em; color:var(--ink); text-decoration:none; flex:none; }
.logo{ display:inline-flex; align-items:baseline; width:6ch; }
.logo .l{ color:var(--t-num); } .logo .r{ color:var(--t-str); }
/* The same hover as the app's wordmark: {j2n} opens to {json}. */
.logo .swap{ display:inline-grid; }
.logo .two, .logo .so{ grid-area:1/1; overflow:hidden; white-space:nowrap; transition:opacity var(--dur) ease-out, transform var(--dur) ease-out, max-width var(--dur) ease-out; }
.logo .two{ max-width:1ch; }
.logo .so{ max-width:0; opacity:0; transform:scaleX(.6); transform-origin:left; }
.logo:is(:hover,:focus-visible) .two{ max-width:0; opacity:0; transform:scale(.6); }
.logo:is(:hover,:focus-visible) .so{ max-width:2ch; opacity:1; transform:none; }
nav{ margin-left:auto; display:flex; gap:2px; }
nav a{ color:var(--ink-2); text-decoration:none; font:var(--fw-control) var(--fs-control)/1 var(--ui); padding:9px 10px; border-radius:var(--r-ctl); transition:background var(--dur-fast), color var(--dur-fast); }
nav a:hover{ background:var(--sunk); color:var(--ink); }
nav a[aria-current="page"]{ color:var(--ink); background:var(--sunk); }

main{ flex:1; width:100%; max-width:780px; margin:0 auto; padding:var(--sp-8) var(--sp-5) 56px; }
h1{ font-size:var(--fs-display); font-weight:var(--fw-display); line-height:1.2; letter-spacing:-.015em; margin:0 0 var(--sp-3); }
h2{ font-size:17px; font-weight:600; line-height:1.3; letter-spacing:-.005em; margin:36px 0 var(--sp-2); }
p{ margin:0 0 var(--sp-3); }
.lede{ font-size:16px; color:var(--ink-2); }
ul{ margin:0 0 var(--sp-3); padding-left:22px; }
li{ margin:0 0 6px; }
a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--ink-3); text-underline-offset:3px; }
a:hover{ text-decoration-color:var(--ink); }
code{ font-family:var(--mono); font-size:.86em; background:var(--sunk); border-radius:var(--r-chip); padding:1px 5px; overflow-wrap:anywhere; }

.said{ font-size:var(--fs-small); color:var(--ink-3); }
.said code{ color:var(--ink-2); }

figure{ margin:var(--sp-5) 0; min-width:0; }
figcaption{ font:500 var(--fs-small)/1.3 var(--ui); color:var(--ink-3); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
pre{ margin:0; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-card); padding:14px 16px; overflow-x:auto; font:var(--fs-code)/1.7 var(--mono); tab-size:2; }
pre code{ background:none; padding:0; font-size:inherit; border-radius:0; overflow-wrap:normal; }
.pair{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-4); margin:var(--sp-5) 0; }
.pair figure{ margin:0; display:flex; flex-direction:column; }
.pair pre{ flex:1; }
/* State through a full outline and an icon, never a side stripe. */
.code.bad pre{ border-color:var(--err-line); }
.code.good pre{ border-color:var(--ok-line); }
.code.bad figcaption{ color:var(--err); }
.code.good figcaption{ color:var(--ok); }
.code.bad figcaption::before, .code.good figcaption::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
mark{ background:var(--err-bg); color:inherit; border-radius:3px; box-shadow:0 0 0 1px var(--err-line); }
.ins{ display:inline-block; width:.55ch; height:1.2em; vertical-align:-.25em; margin:0 1px; border:1px dashed var(--err); border-radius:2px; }

.j-key{ color:var(--ink); } .j-str{ color:var(--t-str); } .j-num{ color:var(--t-num); } .j-bool{ color:var(--t-bool); }
.j-null{ color:var(--t-null); } .j-punct{ color:var(--t-punct); } .j-com{ color:var(--ink-3); font-style:italic; }

/* The one action on a page: primary. */
.open{ margin:var(--sp-6) 0; }
.btn{ display:inline-flex; align-items:center; gap:6px; height:var(--h-ctl); padding:0 14px; border-radius:var(--r-ctl); font:var(--fw-control) var(--fs-control)/1 var(--ui); text-decoration:none; }
.btn.primary{ background:var(--ink); color:var(--panel); }
.btn.primary:hover{ opacity:.88; }
.btn.primary::after{ content:"→"; font-family:var(--mono); }

.table{ overflow-x:auto; margin:var(--sp-4) 0 var(--sp-5); border:1px solid var(--line-2); border-radius:var(--r-card); background:var(--panel); }
table{ border-collapse:collapse; width:100%; font-size:14px; }
th, td{ text-align:left; vertical-align:top; padding:9px 12px; border-top:1px solid var(--line-2); }
thead th{ border-top:0; background:var(--panel-2); font-weight:600; font-size:var(--fs-small); color:var(--ink-2); }
tbody th{ font-weight:600; white-space:nowrap; }

.related{ margin-top:44px; padding-top:var(--sp-2); border-top:1px solid var(--line); }
.related h2{ margin-top:var(--sp-4); font-size:var(--fs-control); color:var(--ink-3); font-weight:600; }
.related ul{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:6px 20px; }

.index{ list-style:none; padding:0; margin:var(--sp-6) 0 0; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-card); }
.index li{ margin:0; padding:14px 18px; border-top:1px solid var(--line-2); }
.index li:first-child{ border-top:0; }
.index a{ font-weight:600; text-decoration:none; }
.index a:hover{ text-decoration:underline; }
.index p{ margin:2px 0 0; color:var(--ink-3); font-size:var(--fs-small); }

/* The /learn hub. Cards and rows are whole-box links: the title link stretches over its box, so the link's name stays the title. */
.hub .sec{ margin-top:var(--sp-8); }
.hub h2{ margin:0 0 var(--sp-3); }
.hub .note{ font-size:var(--fs-small); color:var(--ink-3); margin:-4px 0 var(--sp-3); }
.cards{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--sp-3); }
.cards.one{ grid-template-columns:minmax(0, 1fr); }
.card{ position:relative; margin:0; padding:14px 16px; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-card); transition:border-color var(--dur-fast); }
.card:hover{ border-color:var(--ink-3); }
.card a, .rows a{ font-weight:600; text-decoration:none; }
.card a::after, .rows a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.card a:focus-visible{ outline:none; }
.card:has(a:focus-visible){ outline:2px solid var(--focus); outline-offset:2px; }
.rows li:has(a:focus-visible){ outline:2px solid var(--focus); outline-offset:-2px; }
.card p{ margin:4px 0 0; color:var(--ink-2); font-size:14px; line-height:1.5; }
.rows{ list-style:none; padding:0; margin:0; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-card); overflow:hidden; }
.rows li{ position:relative; margin:0; padding:11px 16px; border-top:1px solid var(--line-2); display:grid; gap:2px; line-height:1.45; transition:background var(--dur-fast); }
.rows li:first-child{ border-top:0; }
.rows li:hover{ background:var(--panel-2); }
.rows a:focus-visible{ outline:none; }
.rows .sym{ color:var(--ink-2); font-size:14px; }
.rows .msg{ justify-self:start; background:none; padding:0; font-size:12px; color:var(--ink-3); }

.foot{ position:sticky; bottom:0; z-index:1; background:var(--panel); border-top:1px solid var(--line); font-size:var(--fs-small); padding-bottom:env(safe-area-inset-bottom, 0px); }
.foot .bar{ min-height:var(--h-status); justify-content:flex-end; gap:14px; flex-wrap:wrap; }
.foot a{ color:var(--ink-2); text-decoration:none; }
.foot a:hover{ color:var(--ink); text-decoration:underline; }
.heart{ color:var(--heart); }

@media (max-width: 640px){
  .bar{ padding:0 var(--sp-4); gap:var(--sp-2); }
  nav a{ padding:9px 7px; }
  main{ padding:var(--sp-6) var(--sp-4) 40px; }
  h1{ font-size:24px; }
  .pair{ grid-template-columns:minmax(0, 1fr); }
  .btn{ height:var(--h-ctl-touch); padding:0 18px; font-size:14.5px; border-radius:11px; }
  .foot .bar{ justify-content:center; }
}