/* Sandbox — a sandpit on paper. Light sand ground, primary-coloured toy blocks, Recursive in its
   casual cut for headings and its mono for code, Onest for prose. The one light page in the suite. */

:root {
  --page-bg: #f3ead8; --page-text: #2b2620; --page-muted: #6b5f50; --page-line: #ddcfb5;
  --page-accent: #a8380a; --strong: #14110d; --surface: #fbf6ec; --raise: #efe3cb;
  --code-bg: #2b2620; --code-text: #f7ecd6;
  --page-ui: "Onest", system-ui, sans-serif;
  --display: "Recursive", "Onest", sans-serif;
  --mono: "Recursive", ui-monospace, monospace;
  --k-ink: #2b2620; --k-accent: #d9480f; --k-b: #1c64c8; --k-c: #8a3fd1; --k-ok: #2b8a3e; --k-muted: #8d7f6b; --k-file: #6b5f50;
  color-scheme: light;
}
.hero h1 { font: 800 clamp(56px, 8vw, 104px)/0.95 var(--display); font-variation-settings: "CASL" 1; letter-spacing: -0.03em; }
.hero h1::after { content: ""; display: block; height: 14px; width: 168px; margin-top: 16px;
  background: linear-gradient(90deg, #d9480f 0 25%, #f2b705 25% 50%, #2b8a3e 50% 75%, #1c64c8 75%); border-radius: 3px; }
.part > h2 { font: 750 clamp(28px, 3.4vw, 40px)/1.1 var(--display); font-variation-settings: "CASL" 1; }
code, pre { font-variation-settings: "MONO" 1; }
.fig { padding: 16px 12px; background: var(--surface); border: 2px solid var(--strong); border-radius: 10px; box-shadow: 5px 5px 0 var(--strong); }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
table.apps { background: var(--surface); border: 2px solid var(--strong); }
table.apps th[scope="row"] { white-space: nowrap; font-family: var(--display); font-variation-settings: "CASL" 1; }
table.apps tbody tr:nth-child(4n+1) th { color: #a8380a; } table.apps tbody tr:nth-child(4n+2) th { color: #6f4c00; }
table.apps tbody tr:nth-child(4n+3) th { color: #1d6b2e; } table.apps tbody tr:nth-child(4n) th { color: #1650a6; }
pre.term { background: var(--code-bg); color: var(--code-text); border-radius: 10px; }
p.note { font-size: 14px; color: var(--page-muted); }
pre.term .c { color: #c4b59c; }
pre.term .p { color: #ffb38a; }
pre.term .p::before { color: #ffb38a; }