:root {
  --bg: #f7f7f5; --panel: #ffffff; --fg: #1b1c1f; --muted: #5f636b; --border: #e0e1e4; --accent: #0b62c9; --code-bg: #f0f1f3;
  --up: 217, 83, 30; --down: 30, 110, 200;
  --hl-word: #ffe8a3; --hl-phrase: #ffd2c2; --hl-shape: #d9e7ff;
  --pill-machine-bg: #ffe0d6; --pill-machine-fg: #9a2a07;
  --pill-register-bg: #e9e4ff; --pill-register-fg: #4a2fb0;
  --pill-other-bg: #d8f0e1; --pill-other-fg: #13653a;
  --pill-none-bg: #eceef1; --pill-none-fg: #5a5f69;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1114; --panel: #171a1f; --fg: #e7e8ea; --muted: #9ca2ab; --border: #2a2f37; --accent: #6db3ff; --code-bg: #12151a;
    --up: 255, 128, 80; --down: 90, 160, 255;
    --hl-word: #5a4a12; --hl-phrase: #5c2c1c; --hl-shape: #1f3556;
    --pill-machine-bg: #4d2012; --pill-machine-fg: #ffb49a;
    --pill-register-bg: #2e2560; --pill-register-fg: #c7bbff;
    --pill-other-bg: #143a25; --pill-other-fg: #86e0ad;
    --pill-none-bg: #262a31; --pill-none-fg: #b3b8c0;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1114; --panel: #171a1f; --fg: #e7e8ea; --muted: #9ca2ab; --border: #2a2f37; --accent: #6db3ff; --code-bg: #12151a;
  --up: 255, 128, 80; --down: 90, 160, 255;
  --hl-word: #5a4a12; --hl-phrase: #5c2c1c; --hl-shape: #1f3556;
  --pill-machine-bg: #4d2012; --pill-machine-fg: #ffb49a;
  --pill-register-bg: #2e2560; --pill-register-fg: #c7bbff;
  --pill-other-bg: #143a25; --pill-other-fg: #86e0ad;
  --pill-none-bg: #262a31; --pill-none-fg: #b3b8c0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); font-size: 13.5px; }
.foot { font-size: 12.5px; }
h1 { margin: 0 0 8px; font-size: clamp(26px, 5vw, 34px); letter-spacing: -.4px; }
h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.2px; }
.top { padding: 30px 0 8px; }
.lede { margin: 0 0 12px; max-width: 760px; font-size: 16.5px; }
.links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.links a.star { padding: 3px 10px; border: 1px solid var(--accent); border-radius: 6px; }
.links a.star:hover { background: var(--accent); color: var(--panel); text-decoration: none; }
button { border: 1px solid var(--border); background: var(--panel); color: var(--fg); border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 13px; }
button:hover { border-color: var(--accent); }
.notice { margin: 16px 0 0; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--panel); border-radius: 0 8px 8px 0; max-width: 760px; font-size: 14px; }

main section { margin: 26px 0; }
.section-head { margin-bottom: 10px; }
.section-head p { margin: 2px 0 0; max-width: 820px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; vertical-align: -1px; }
.swatch.up { background: rgba(var(--up), .45); } .swatch.down { background: rgba(var(--down), .45); }

/* the table scrolls inside its box on a phone; the page itself never does */
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 9px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
th:first-child, td:first-child { text-align: left; position: sticky; left: 0; background: var(--panel); z-index: 1; }
thead th { font-size: 12px; font-weight: 600; color: var(--muted); vertical-align: bottom; }
thead th.ctx, td.ctx { color: var(--muted); }
th.sep, td.sep { border-left: 1px dashed var(--border); }
tr.group th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: var(--code-bg); position: static; }
tbody tr.row { cursor: pointer; }
tbody tr.row:hover td { background-image: linear-gradient(var(--code-bg), var(--code-bg)); }
tbody tr.row:hover td:first-child { background: var(--code-bg); }
tbody tr.row.open td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
td .belief, td .flag { display: block; color: var(--muted); font-size: 11px; line-height: 1.2; }
td .flag { margin-top: 2px; }
/* the marker column wraps on a phone so the numbers get the width */
tbody tr.row td:first-child { white-space: normal; min-width: 150px; max-width: 230px; }
td.num.dim { color: var(--muted); }
.pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .2px; padding: 1px 8px; border-radius: 10px; }
.pill.machine { background: var(--pill-machine-bg); color: var(--pill-machine-fg); }
.pill.register { background: var(--pill-register-bg); color: var(--pill-register-fg); }
.pill.other { background: var(--pill-other-bg); color: var(--pill-other-fg); }
.pill.none { background: var(--pill-none-bg); color: var(--pill-none-fg); }

tr.detail td { white-space: normal; text-align: left; background: var(--bg); padding: 12px 14px 14px; position: static; }
/* inside the scrolling table the explanation stays in view instead of running off to the right */
.detail-inner { max-width: min(980px, calc(100vw - 70px)); position: sticky; left: 14px; }
.detail-inner .tabs { margin-bottom: 8px; }
.facts { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 8px; font-size: 13px; }
.facts b { font-weight: 600; }
.facts code { background: var(--code-bg); padding: 0 5px; border-radius: 4px; }
.detail-inner code { overflow-wrap: anywhere; }
ul.examples { margin: 0; padding-left: 18px; }
ul.examples li { margin: 4px 0; max-width: 900px; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button[aria-selected="true"] { border-color: var(--accent); background: var(--accent); color: var(--panel); }
.tabs button .n { opacity: .7; margin-left: 4px; font-size: 11.5px; }
.doc-bar { display: flex; gap: 10px; align-items: center; margin: 4px 0 10px; }
.doc-bar b { flex: 1; min-width: 0; }
.prose { margin: 12px 0 0; padding: 12px 14px; background: var(--code-bg); border-radius: 8px; max-width: 900px; white-space: pre-wrap; overflow-wrap: anywhere; }
.prose:empty { display: none; }
/* the assignment every writer answered: the teacher's words, marked off from the writers' own */
.assignment { margin: 0 0 4px; padding: 10px 14px; border-left: 3px solid var(--accent); max-width: 900px; }
.assignment .assignment-text { margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.assignment p.muted { margin: 0; }
mark { color: inherit; border-radius: 3px; padding: 0 1px; }
mark.word { background: var(--hl-word); } mark.phrase { background: var(--hl-phrase); } mark.shape { background: var(--hl-shape); }
.found { margin-top: 10px; font-size: 13.5px; overflow-x: auto; }
.found:empty { display: none; }
.found table { width: auto; font-size: 13px; }
.found th, .found td { padding: 4px 8px; }
.found td:first-child, .found th:first-child { position: static; background: none; }
textarea { width: 100%; max-width: 900px; resize: vertical; border: 1px solid var(--border); border-radius: 8px; background: var(--code-bg); color: var(--fg); padding: 10px 12px; font: inherit; font-size: 14px; }
/* the grid across kinds of writing: a glyph and a word in every cell, never colour alone */
table.grid td.gcell { text-align: left; cursor: pointer; vertical-align: top; }
table.grid td.gcell:hover { background: var(--code-bg); }
table.grid td.gcell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
table.grid th.gcol { text-align: left; white-space: normal; min-width: 170px; }
table.grid th .sub { display: block; font-weight: 400; font-size: 11.5px; line-height: 1.3; }
table.grid tbody td:first-child { white-space: normal; min-width: 150px; max-width: 230px; }
td.gcell .k { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
td.gcell .flag { display: block; color: var(--muted); font-size: 11px; }
button.glink { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; font-size: 13px; text-align: left; }
button.glink:hover { text-decoration: underline; }
.legend .pill { margin: 0 2px; }
.genre-switch { margin: 8px 0 6px; }
.genre-switch[hidden] { display: none; }
.genre-switch button { font-size: 14px; padding: 5px 12px; }

.how { max-width: 860px; }
.how li { margin: 6px 0; }
footer { padding: 10px 16px 30px; }