:root {
  --ground: #EDF0F4;
  --paper: #FFFFFF;
  --ink: #17202B;
  --muted: #586376;
  --rule: #D3D9E2;
  --code-bg: #E3E8EF;
  --mark: #FBE27A;
  --mark-ink: #17202B;
  --warn: #A8490F;
  --k-in: #0B7A6B;
  --k-cp: #8A5C00;
  --k-rs: #B23C17;
  --k-dt: #2256C2;
  --k-md: #A12C6B;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #10141A;
    --paper: #181D25;
    --ink: #E4E8EE;
    --muted: #97A1B2;
    --rule: #2A313C;
    --code-bg: #212833;
    --mark: #5E4C0E;
    --mark-ink: #FFF1BF;
    --warn: #F0A064;
    --k-in: #4FD1BC;
    --k-cp: #E5B94C;
    --k-rs: #FF8C66;
    --k-dt: #8AADF6;
    --k-md: #F28BC3;
  }
}
:root[data-theme="dark"] {
  --ground: #10141A;
  --paper: #181D25;
  --ink: #E4E8EE;
  --muted: #97A1B2;
  --rule: #2A313C;
  --code-bg: #212833;
  --mark: #5E4C0E;
  --mark-ink: #FFF1BF;
  --warn: #F0A064;
  --k-in: #4FD1BC;
  --k-cp: #E5B94C;
  --k-rs: #FF8C66;
  --k-dt: #8AADF6;
  --k-md: #F28BC3;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  padding-inline: 20px;
  padding-block: 40px 72px;
}
.wrap { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
section { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 80px; }

h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 800; line-height: 1.02; }
h2 { font-size: 1.55rem; font-weight: 600; line-height: 1.2; }
h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
p { margin: 0; max-width: 65ch; }
a { color: inherit; }
.eyebrow {
  font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--muted);
}
.lede { font-size: 1.2rem; color: var(--muted); }
.aside { color: var(--muted); font-size: 0.95rem; }

code, pre { font-family: var(--mono); font-size: 0.86rem; }
code { background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 4px; overflow-wrap: anywhere; }
mark { background: var(--mark); color: var(--mark-ink); padding: 0.05em 0.15em; border-radius: 2px; }

.in { color: var(--k-in); font-weight: 600; }
.cp { color: var(--k-cp); font-weight: 600; }
.rs { color: var(--k-rs); font-weight: 600; }
.dt { color: var(--k-dt); font-weight: 600; }
.md { color: var(--k-md); font-weight: 600; }
.arg { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.c { color: var(--muted); font-style: italic; }
.tag { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; color: var(--muted); }

/* Tool switch */
.switch-bar {
  position: sticky; top: 0; z-index: 5;
  background: var(--ground);
  padding-block: 12px; border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
.switch-bar .eyebrow { margin-right: 4px; }
.tabs { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--ink); border-radius: 9px; padding: 3px; gap: 3px; }
.tabs button {
  font: 600 1rem var(--body); color: var(--ink); background: transparent;
  border: 0; border-radius: 6px; padding: 7px 18px; cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--ground); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--k-dt); outline-offset: 3px; border-radius: 4px; }

.panel { display: flex; flex-direction: column; gap: 56px; }
.panel-head { display: flex; flex-direction: column; gap: 10px; }
.panel-head h2 { font-size: clamp(1.9rem, 5vw, 2.5rem); font-weight: 800; line-height: 1.05; }
.jump { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--mono); font-size: 0.8rem; }
.jump a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.jump a:hover { color: var(--ink); border-color: var(--ink); }

.rule-line {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.4rem, 4vw, 1.9rem); line-height: 1.25;
  text-wrap: balance; max-width: 28ch;
}

/* Tree */
.tree {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px;
  padding: 18px 22px; margin: 0; line-height: 1.7; overflow-x: auto; color: var(--ink);
}
.tree .dim { color: var(--muted); }
.tree .n { font-weight: 600; }
.tree .note { color: var(--muted); font-style: italic; }
.tree .lbl { font-weight: 500; padding: 0 6px; border-radius: 3px; background: var(--code-bg); }
.tree .lbl.solo { background: var(--mark); color: var(--mark-ink); }
.tree .lbl.shared { background: transparent; box-shadow: inset 0 0 0 1.5px var(--k-md); color: var(--k-md); }

/* Row lists */
.rows { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 8px 24px;
  padding-block: 16px; border-bottom: 1px solid var(--rule);
}
.row-who { display: flex; flex-direction: column; gap: 2px; }
.row-who strong { font-weight: 600; }
.row-who span { color: var(--muted); font-size: 0.9rem; }
.row-who .step { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.row-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.row-body code { background: none; padding: 0; }
.row-body .aside { font-size: 0.92rem; }
.row-code { display: grid; grid-template-columns: 5.8em minmax(0, 1fr); gap: 8px 12px; align-items: baseline; min-width: 0; }
.row-code code { background: none; padding: 0; }
.what { display: flex; align-items: baseline; }
@media (max-width: 640px) { .row { grid-template-columns: 1fr; } }

.cheat-code {
  display: grid; grid-template-columns: 2.6em minmax(0, 1fr);
  gap: 4px 12px; align-items: baseline; min-width: 0;
}
.cheat-code .wu { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.cheat-code code { background: none; padding: 0; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; }
.sw.in { background: var(--k-in); } .sw.cp { background: var(--k-cp); } .sw.rs { background: var(--k-rs); }
.sw.dt { background: var(--k-dt); } .sw.md { background: var(--k-md); }

.callout {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(20 30 50 / 0.18);
}
.callout .eyebrow { color: var(--warn); }

.traps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.traps li { display: grid; grid-template-columns: minmax(0, 15em) 1fr; gap: 4px 20px; align-items: baseline; }
.traps li code { background: none; padding: 0; }
@media (max-width: 560px) { .traps li { grid-template-columns: 1fr; } }

.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.85rem; }
.flow .node { border: 1px solid var(--rule); border-radius: 999px; padding: 4px 12px; background: var(--ground); }
.flow .node.mid { background: var(--mark); color: var(--mark-ink); border-color: transparent; }
.flow .arrow { color: var(--muted); }

/* Code files */
.file { display: flex; flex-direction: column; min-width: 0; }
.file-name {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 500;
  background: var(--ink); color: var(--ground);
  align-self: flex-start; padding: 3px 10px; border-radius: 5px 5px 0 0;
}
.file-name .lines { opacity: 0.7; font-weight: 400; }
.file pre, .snip pre {
  margin: 0; background: var(--code-bg); border-radius: 0 6px 6px 6px; padding: 14px 16px;
  line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}
.snip pre { border-radius: 6px; }
.gap-mark { color: var(--muted); }
.files { display: flex; flex-direction: column; gap: 18px; }

/* Diagrams */
.diagram { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.diagram svg { display: block; width: 100%; height: auto; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; }
.diagram figcaption { color: var(--muted); font-size: 0.95rem; max-width: 70ch; }
.diagram figcaption strong { color: var(--ink); }
.diagram text { font-family: var(--mono); font-size: 12px; fill: var(--ink); }
.diagram .t-title { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; }
.diagram .t-path { fill: var(--muted); }
.diagram .t-label { font-family: var(--body); font-size: 12.5px; fill: var(--muted); }
.diagram .t-small { font-family: var(--body); font-size: 11px; fill: var(--muted); }
.diagram .t-arrow { font-family: var(--body); font-size: 11.5px; fill: var(--muted); }
.diagram .t-val { font-size: 11px; fill: var(--muted); }
.diagram .t-in { fill: var(--k-in); font-weight: 600; }
.diagram .t-cp { fill: var(--k-cp); font-weight: 600; }
.diagram .t-rs { fill: var(--k-rs); font-weight: 600; }
.diagram .t-md { fill: var(--k-md); font-weight: 600; }
.d-wall { fill: var(--ground); stroke: var(--ink); stroke-width: 2; }
.d-you { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 3; }
.d-slot { fill: var(--paper); stroke: var(--k-in); stroke-width: 1.5; }
.d-mod { fill: var(--paper); stroke: var(--k-md); stroke-width: 1.5; }
.d-res { fill: var(--paper); stroke: var(--k-rs); stroke-width: 1.5; }
.d-outslot { fill: var(--paper); stroke: var(--k-md); stroke-width: 1.5; stroke-dasharray: 5 3; }
.d-wire { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.d-return { stroke: var(--k-md); stroke-width: 1.75; fill: none; stroke-dasharray: 6 4; }
.d-tip { fill: var(--ink); }
.d-tip-md { fill: var(--k-md); }

/* Script, quiz */
.script {
  margin: 0; border-left: 3px solid var(--ink); padding: 4px 0 4px 20px;
  font-size: 1.12rem; line-height: 1.6; max-width: 64ch; display: flex; flex-direction: column; gap: 12px;
}
.script p { max-width: none; }
.quiz { display: flex; flex-direction: column; gap: 10px; }
details { border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
summary {
  cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "Show"; font-family: var(--mono); font-size: 0.75rem; font-weight: 400; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; }
details[open] summary::after { content: "Hide"; }
summary:focus-visible { outline: 2px solid var(--k-dt); outline-offset: 2px; border-radius: 8px; }
details .ans { padding: 0 18px 16px; }

.sources { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 0.95rem; }
.sources a { color: var(--ink); text-underline-offset: 3px; }
footer { color: var(--muted); font-size: 0.9rem; }

@media (max-width: 640px) {
  .tree { font-size: 0.75rem; padding-inline: 14px; }
  .tree .note { display: none; }
}

/* [hidden] has to beat the display rules above it, or hiding a flex container
   does nothing. This came from the artifact wrapper originally. */
[hidden] { display: none !important; }

/* Shared button, used by the drift demo and the game overlay. */
.btn {
  font: 600 0.92rem var(--body); cursor: pointer;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  border-radius: 8px; padding: 9px 16px;
}
.btn:hover { background: var(--code-bg); }
.btn.primary { background: var(--ink); color: var(--ground); }
.btn.primary:hover { opacity: 0.86; }
.btn:focus-visible { outline: 2px solid var(--k-dt); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Wide screens.

   This was laid out for a narrow reading panel: an 820px shell with paragraphs
   capped tighter still. On a large monitor that leaves a ribbon of text in the
   middle of the screen. Above 1200px the shell widens and the row lists go
   two-up, which is what actually fills the space. Prose keeps a measure,
   because a 200-character line is harder to read, not easier: the fix for a
   wide screen is more columns, not longer lines.

   Delete this block to get the original single column back.
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .wrap { max-width: min(1500px, 94vw); }

  /* The page's dominant pattern. Two-up only once each column can still hold a
     210px label plus a readable body, so it stays single below roughly 1350px. */
  .rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); column-gap: 48px; }
  .quiz { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 10px; }
  .traps { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 10px 48px; }

  /* A little more room, still a measure. */
  p { max-width: 74ch; }
  .rule-line { max-width: 34ch; }
  .callout { max-width: 1000px; }

  /* Fixed-size artwork should not balloon with the shell. The diagrams are
     drawn at 680 units wide and the trees are about 60 characters, so both
     keep their natural size instead of scaling up. */
  .diagram svg { max-width: 860px; }
  .tree { width: fit-content; max-width: 100%; }

  /* Code is the exception: long lines wrap less when the block is wider. */
  .files, .snip { max-width: none; }
}