/* Layout: a page from an account book, off-white by day and warm charcoal ink by night. Content sits on ruled rows
   behind a red double margin rule; code and receipts are written on the ruling, and totals take the double underline.
   The closing band is the book's cloth cover. */
:root {
  --paper: #F5F4EE;
  --panel: #FBFAF6;
  --sunk: #ECEAE1;
  --ink: #262B27;
  --ink-2: #5E655F;
  --rule: #D5DED6;
  --rule-strong: #B5C4B9;
  --red: #B03A2F;
  --green: #2E6646;
  --brass: #876221;
  --hot: rgba(176, 58, 47, .09);
  --on-ink: #FBFAF6;
  --cover: #24392F;
  --on-cover: #F2F0E8;
  color-scheme: light;

  --display: "Archivo", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --body: "Libre Franklin", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --mono: "Azeret Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;

  --row: 1.625rem;
  --wrap: 72rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1A1816; --panel: #211F1C; --sunk: #151311; --ink: #ECE8DF; --ink-2: #A8A196;
    --rule: #302D29; --rule-strong: #47423B; --red: #E8705F; --green: #8BC79E; --brass: #D9A85C;
    --hot: rgba(232, 112, 95, .13); --on-ink: #1A1816; --cover: #22362C; --on-cover: #EEEBE2;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1A1816; --panel: #211F1C; --sunk: #151311; --ink: #ECE8DF; --ink-2: #A8A196;
  --rule: #302D29; --rule-strong: #47423B; --red: #E8705F; --green: #8BC79E; --brass: #D9A85C;
  --hot: rgba(232, 112, 95, .13); --on-ink: #1A1816; --cover: #22362C; --on-cover: #EEEBE2;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10;
  background: var(--paper);
}
/* the account book's margin: a red double rule down the whole page, in the gutter of a wide screen */
body::after {
  content: ""; position: fixed; top: 0; bottom: 0; left: calc(50% - var(--wrap) / 2 - 2.25rem);
  width: 5px; border-left: 1px solid var(--red); border-right: 1px solid var(--red);
  opacity: .45; pointer-events: none; display: none;
}
@media (min-width: 1240px) { body::after { display: block; } }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
code, kbd, pre { font-family: var(--mono); }
.wrap {
  max-width: calc(var(--wrap) + 2rem); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.label {
  font: 600 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--red);
}
h1, h2, h3 { text-wrap: balance; margin: 0; }
h2 {
  font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.05; letter-spacing: -.01em;
}
h3 { font: 600 1.05rem/1.3 var(--body); }
p { margin: 0; }
.lede { font-size: 1.125rem; color: var(--ink-2); max-width: 40rem; }
.lede code, p code, li code { font-size: .86em; background: var(--sunk); padding: .08em .35em; border-radius: 3px; }

/* ---------- header ---------- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.top .wrap { display: flex; align-items: center; gap: 1.5rem; height: 3.75rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand svg { width: 1.6rem; height: 1.6rem; flex: none; }
.brand span { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 1.15rem; letter-spacing: .01em; }
.nav { display: flex; gap: 1.4rem; margin-left: .5rem; }
.nav a { text-decoration: none; font-size: .9rem; color: var(--ink-2); }
.nav a:hover { color: var(--ink); }
.top .spacer { flex: 1; }
.ver { font: 500 .75rem/1 var(--mono); color: var(--ink-2); white-space: nowrap; }
.nav a, .top .btn { white-space: nowrap; }
@media (max-width: 1180px) { .ver { display: none; } }
@media (max-width: 900px) { .nav .wide { display: none; } }
@media (max-width: 480px) { .top .btn { display: none; } .nav { gap: 1rem; margin-left: 0; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; height: 2.75rem; padding: 0 1.15rem;
  font: 600 .95rem/1 var(--body); text-decoration: none; border-radius: 4px;
  border: 1px solid var(--ink); color: var(--ink); background: transparent; cursor: pointer;
}
.btn.primary { background: var(--ink); color: var(--on-ink); }
.btn:hover { background: var(--sunk); }
.btn.primary:hover { background: var(--green); border-color: var(--green); color: var(--on-ink); }
.btn.sm { height: 2.25rem; font-size: .85rem; padding: 0 .9rem; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3rem, 8vw, 6rem) 2.5rem; }
.hero .wrap { display: grid; gap: 1.75rem; justify-items: start; }
.status {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .55rem; font: 500 .8rem/1.4 var(--mono);
  color: var(--ink-2); border: 1px solid var(--rule-strong); border-radius: 999px; padding: .35rem .85rem;
}
.status i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); }
.status a { color: var(--red); text-decoration: none; }
h1 {
  font-family: var(--display); font-stretch: 125%; font-weight: 800;
  font-size: clamp(2.2rem, 7.4vw, 5.6rem); line-height: .98; letter-spacing: -.02em; max-width: 14ch;
}
h1 em {
  font-style: normal; color: var(--red);
  text-decoration: underline double var(--red); text-decoration-thickness: .045em; text-underline-offset: .12em;
}
.hero .lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 42rem; color: var(--ink); }
.hero .lede b { font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.cmd {
  display: flex; align-items: center; gap: .75rem; max-width: 100%;
  background: var(--panel); border: 1px solid var(--rule-strong); border-radius: 4px;
  padding: .55rem .55rem .55rem 1rem; font: 500 .92rem/1.4 var(--mono);
}
.cmd .p { color: var(--red); }
.cmd code { min-width: 0; overflow-x: auto; white-space: nowrap; }
.copy {
  font: 600 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  background: var(--sunk); border: 1px solid var(--rule); border-radius: 3px; padding: .5rem .65rem; cursor: pointer;
}
.copy:hover { color: var(--ink); }
.fine { font: 400 .8rem/1.5 var(--mono); color: var(--ink-2); }

/* ---------- sheets: code and output written on ruled rows ---------- */
.sheet {
  margin: 0; min-width: 0; background: var(--panel); border: 1px solid var(--rule-strong); border-radius: 6px;
  overflow: hidden; display: flex; flex-direction: column;
}
.sheet > figcaption, .bar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  padding: .6rem .9rem; border-bottom: 1px solid var(--rule-strong); background: var(--sunk);
  font: 500 .78rem/1.3 var(--mono); color: var(--ink-2);
}
.sheet .file { color: var(--ink); overflow-wrap: anywhere; }
.tag {
  font: 600 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--green); border: 1px solid currentColor; border-radius: 3px; padding: .3rem .45rem;
}
.tag.red { color: var(--red); }
.ruled {
  background-image: linear-gradient(to bottom, transparent calc(var(--row) - 1px), var(--rule) calc(var(--row) - 1px));
  background-size: 100% var(--row); background-origin: content-box;
}
.src-rows { font: 400 .8rem/var(--row) var(--mono); padding-block: calc(var(--row) / 2); flex: 1; }
.l { display: grid; grid-template-columns: 3rem minmax(0, 1fr); transition: background-color .2s; }
.l .n {
  text-align: right; padding-right: .55rem; color: var(--ink-2); font-size: .85em; user-select: none;
  border-right: 3px double var(--red); font-variant-numeric: tabular-nums;
}
.l code {
  white-space: pre-wrap; overflow-wrap: break-word; padding-left: calc(.85rem + 4ch); text-indent: -4ch;
  padding-right: .85rem;
}
.l.hot { background: var(--hot); }
.l.hot .n { color: var(--red); font-weight: 600; }
.src-rows .d { color: var(--red); font-weight: 600; }
.src-rows .k { color: var(--green); }
.src-rows .n2 { color: var(--ink); font-weight: 600; }
.src-rows .r { color: var(--ink-2); font-style: italic; }
.src-rows .u { color: var(--brass); }
.src-rows .c { color: var(--ink-2); font-style: italic; }
.src-rows .s { color: var(--ink-2); }
pre.src { margin: 0; padding: 1rem; font: .8rem/1.6 var(--mono); white-space: pre-wrap; }

pre.out {
  margin: 0; font: 400 .8rem/var(--row) var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
  padding: calc(var(--row) / 2) 1rem; color: var(--ink);
}
pre.out .hd { color: var(--ink-2); }
pre.out b { font-weight: 600; color: var(--red); }
pre.out .ok { color: var(--green); font-weight: 500; }

/* ---------- the hero's demo ---------- */
.demo { padding-block: .5rem 1rem; }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }
@media (max-width: 960px) { .demo-grid { grid-template-columns: minmax(0, 1fr); } }

.rc { padding: 1rem 1rem .75rem; display: grid; gap: .9rem; font-family: var(--mono); flex: 1; align-content: start; }
.rc-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
.rc-head .who { font: 500 .78rem/1.3 var(--mono); color: var(--ink-2); }
.rc-head .hp { font: 800 2rem/1 var(--display); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.rc-head .hp small { font: 500 .85rem/1 var(--mono); color: var(--ink-2); margin-left: .35rem; }
.hitnow { text-align: right; font: 500 .75rem/1.3 var(--mono); color: var(--ink-2); }
.hitnow b { display: block; font: 600 1.35rem/1.1 var(--mono); color: var(--red); font-variant-numeric: tabular-nums; }
.rc-sub { font: 400 .75rem/1.5 var(--mono); color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: .6rem; }
.rc-sub b { color: var(--ink); font-weight: 600; }

.items { display: grid; }
.grp { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); border-top: 1px solid var(--rule-strong); }
.grp .st {
  font: 600 .66rem/var(--row) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  border-right: 3px double var(--red); padding-right: .5rem;
}
.grp ol { list-style: none; margin: 0; padding: 0; }
.it {
  display: grid; grid-template-columns: minmax(0, 1fr) 3.2rem 6.6rem; gap: .5rem; align-items: center;
  font: 400 .78rem/var(--row) var(--mono); padding-left: .7rem; border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums; transition: background-color .2s; cursor: default;
}
.grp ol .it:last-child { border-bottom: 0; }
.it .amt { text-align: right; font-weight: 600; }
.it .run { text-align: right; color: var(--ink-2); white-space: nowrap; }
.neg { color: var(--red); }
.pos { color: var(--green); }
.zero { color: var(--ink-2); }
.it.on { background: var(--hot); }
.it.on .run { color: var(--ink); }
.total {
  display: grid; grid-template-columns: minmax(0, 1fr) 3.2rem 6.6rem; gap: .5rem; align-items: center;
  font: 600 .82rem/var(--row) var(--mono); padding-left: 6.1rem; border-top: 1px solid var(--ink);
  font-variant-numeric: tabular-nums;
}
.total .amt, .total .run { text-align: right; }
.total .run { text-decoration: underline double var(--ink); text-underline-offset: 4px; }
.total.on { background: var(--hot); }
.stat-rc { border: 1px dashed var(--rule-strong); border-radius: 4px; padding: .6rem .75rem; display: grid; gap: .1rem; }
.stat-rc .cap { font: 400 .72rem/1.5 var(--mono); color: var(--ink-2); margin-bottom: .3rem; }
.stat-rc .row {
  display: flex; justify-content: space-between; gap: 1rem; font: 400 .78rem/1.75 var(--mono);
  padding-inline: .35rem; border-radius: 3px; transition: background-color .2s;
}
.stat-rc .row.on { background: var(--hot); }
.stat-rc .row.eq { border-top: 1px solid var(--rule); margin-top: .2rem; padding-top: .15rem; font-weight: 600; }
.rc-foot { display: flex; gap: .5rem; flex-wrap: wrap; padding: 0 1rem 1rem; }
.rc-foot button {
  font: 500 .75rem/1 var(--mono); color: var(--ink); background: transparent; border: 1px solid var(--rule-strong);
  border-radius: 3px; padding: .55rem .75rem; cursor: pointer;
}
.rc-foot button:hover { background: var(--sunk); }
.demo-note { margin-top: 1rem; font: 400 .8rem/1.6 var(--mono); color: var(--ink-2); }
.demo-note b { color: var(--ink); font-weight: 600; }
@media (max-width: 520px) {
  .grp { grid-template-columns: minmax(0, 1fr); }
  .grp .st { border-right: 0; border-bottom: 1px dashed var(--rule); padding-left: .7rem; }
  .total { padding-left: .7rem; }
  .it, .total { grid-template-columns: minmax(0, 1fr) 2.8rem 6rem; font-size: .74rem; }
  .rc-head .hp { font-size: 1.6rem; }
}

/* ---------- sections ---------- */
.sec { padding-block: clamp(4rem, 9vw, 7rem) 0; }
.sec-head { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* the loop: an account of steps, in order */
.loop { border-top: 2px solid var(--ink); }
.step {
  display: grid; grid-template-columns: 3rem minmax(0, 15rem) minmax(0, 1fr); gap: 1.5rem; padding-block: 1.4rem;
  border-bottom: 1px solid var(--rule-strong); align-items: start;
}
.step .no { font: 800 1.6rem/1 var(--display); font-stretch: 112%; color: var(--red); font-variant-numeric: tabular-nums; }
.step h3 { margin-bottom: .35rem; }
.step p { color: var(--ink-2); font-size: .95rem; }
.term {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; padding: .7rem .9rem;
  font: 400 .78rem/1.65 var(--mono); overflow-x: auto; min-width: 0;
}
.term .in { color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; padding-left: 2ch; text-indent: -2ch; }
.term .in::before { content: "> "; color: var(--red); }
.term .res { color: var(--green); white-space: pre-wrap; }
.term .note { color: var(--ink-2); font-family: var(--body); font-size: .85rem; }
@media (max-width: 760px) {
  .step { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .step .term { grid-column: 1 / -1; }
}

/* plays */
.pair { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.25rem; align-items: start; }
@media (max-width: 960px) { .pair { grid-template-columns: minmax(0, 1fr); } }
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 2rem; }
.points div { border-top: 1px solid var(--ink); padding-top: .8rem; }
.points p { color: var(--ink-2); font-size: .95rem; margin-top: .35rem; }
@media (max-width: 760px) { .points { grid-template-columns: minmax(0, 1fr); } }

/* ask why: tabs */
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--rule-strong); }
.tab {
  font: 600 .85rem/1 var(--body); color: var(--ink-2); background: transparent; border: 0;
  border-bottom: 3px solid transparent; padding: .8rem .9rem .7rem; cursor: pointer; margin-bottom: -1px;
}
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }
.tab:hover { color: var(--ink); }
.why-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem; padding-top: 1.5rem; align-items: start; }
.why-body .explain { display: grid; gap: .9rem; color: var(--ink-2); }
.why-body .explain h3 { color: var(--ink); font-size: 1.15rem; }
@media (max-width: 900px) { .why-body { grid-template-columns: minmax(0, 1fr); } }

/* godot */
.dock {
  background: var(--panel); border: 1px solid var(--rule-strong); border-radius: 6px; overflow: hidden;
  font: 400 .8rem/1.5 var(--mono); min-width: 0;
}
.dock-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--rule-strong); background: var(--sunk); }
.dock-tabs span { padding: .55rem .8rem; color: var(--ink-2); font-size: .75rem; }
.dock-tabs span.on { color: var(--ink); background: var(--panel); border-right: 1px solid var(--rule-strong); border-left: 1px solid var(--rule-strong); }
.dock-tabs span.on:first-child { border-left: 0; }
.dock-body { padding: 1rem; display: grid; gap: .85rem; }
.dock-body .q { color: var(--ink); font-weight: 600; }
.rule-card { border-left: 3px double var(--red); padding-left: .8rem; display: grid; gap: .15rem; }
.rule-card .stage { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.rule-card .what { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: baseline; }
.rule-card .line {
  font-size: .7rem; color: var(--green); border: 1px solid currentColor; border-radius: 3px; padding: 0 .35rem;
  text-decoration: none; white-space: nowrap;
}
.rule-card .by { color: var(--ink-2); font-size: .75rem; }
.dock-foot { color: var(--ink-2); font-size: .75rem; border-top: 1px solid var(--rule); padding-top: .7rem; }
.dock-cap { font: 400 .75rem/1.5 var(--mono); color: var(--ink-2); margin-top: .6rem; }
.feats { display: grid; gap: 0; }
.feat { border-top: 1px solid var(--rule-strong); padding-block: 1.1rem; display: grid; gap: .35rem; }
.feat:last-child { border-bottom: 1px solid var(--rule-strong); }
.feat p { color: var(--ink-2); font-size: .95rem; }

/* principles */
.princ { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 760px) { .princ { grid-template-columns: minmax(0, 1fr); } }
.pc {
  background: var(--panel); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 1.4rem 1.4rem 1.1rem;
  display: grid; gap: .7rem; grid-template-rows: auto 1fr auto;
}
.pc h3 { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 1.35rem; line-height: 1.1; }
.pc p { color: var(--ink-2); font-size: .95rem; }
.pc .chk { border-top: 1px solid var(--rule); padding-top: .7rem; font: 400 .76rem/1.55 var(--mono); color: var(--ink); }
.pc .chk span { color: var(--red); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .66rem; margin-right: .4rem; }
.engine-note {
  margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline;
  border: 1px dashed var(--rule-strong); border-radius: 6px; padding: 1rem 1.4rem; color: var(--ink-2); font-size: .95rem;
}
.engine-note b { color: var(--ink); font-weight: 600; }

/* cookbook */
.book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 2rem; align-items: start; }
@media (max-width: 900px) { .book { grid-template-columns: minmax(0, 1fr); } }
.shelves { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.shelf { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding-block: .9rem; border-bottom: 1px solid var(--rule-strong); align-items: baseline; }
.shelf h3 { font-size: .95rem; }
.shelf h3 small { display: block; font: 400 .72rem/1.4 var(--mono); color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  font: 500 .78rem/1 var(--mono); color: var(--ink); background: var(--panel); border: 1px solid var(--rule-strong);
  border-radius: 3px; padding: .45rem .6rem; cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
@media (max-width: 520px) { .shelf { grid-template-columns: minmax(0, 1fr); gap: .6rem; } }
.recipe {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 5rem); background: var(--panel);
  border: 1px solid var(--rule-strong); border-radius: 6px; padding: 1.25rem; display: grid; gap: .75rem;
}
.recipe .nm { font: 800 1.6rem/1 var(--display); font-stretch: 112%; }
.recipe .from { font: 400 .75rem/1.5 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.recipe .ds { font-size: 1rem; }
.recipe .how { font-size: .88rem; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: .75rem; }

/* not */
.nots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 1000px) { .nots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nots { grid-template-columns: minmax(0, 1fr); } }
.nots div { border-top: 2px solid var(--red); padding-top: .9rem; display: grid; gap: .45rem; align-content: start; }
.nots p { color: var(--ink-2); font-size: .95rem; }

/* start */
.starts { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.agent {
  background: var(--panel); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 1.4rem; display: grid; gap: .8rem;
}
.agent p { color: var(--ink-2); font-size: .95rem; }

/* closing band */
.close { margin-top: clamp(4rem, 9vw, 7rem); background: var(--cover); color: var(--on-cover); }
.close .wrap { padding-block: clamp(3rem, 7vw, 5rem); display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: end; justify-content: space-between; }
.close h2 { max-width: 18ch; }
.close h2 em { font-style: normal; text-decoration: underline double; text-decoration-thickness: .05em; text-underline-offset: .12em; }
.close p { color: var(--on-cover); opacity: .78; margin-top: .9rem; max-width: 34rem; }
.close .btn { border-color: var(--on-cover); color: var(--on-cover); }
.close .btn.primary { background: var(--on-cover); color: var(--cover); }
.close .btn:hover { background: transparent; opacity: .85; }
.close .btn.primary:hover { background: var(--on-cover); border-color: var(--on-cover); color: var(--cover); }
footer .wrap {
  padding-block: 1.75rem 2.5rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
  font: 400 .78rem/1.5 var(--mono); color: var(--ink-2);
}

@media (prefers-reduced-motion: reduce) {
  .l, .it, .stat-rc .row { transition: none; }
}

/* ---------- the page frame the artifact host used to supply ---------- */
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- line numbers are links; a linked line is marked ---------- */
a.n { text-decoration: none; }
a.n:hover { color: var(--red); }
.l.target { background: var(--hot); }
.l.target .n { color: var(--red); font-weight: 600; }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline double var(--red); text-underline-offset: 6px; }
.recipe .open { justify-self: start; }
footer a { color: inherit; }

/* ---------- inner pages: the cookbook and the reference ---------- */
.page-head { padding-block: clamp(2.5rem, 6vw, 4rem) 1.75rem; }
.page-head .wrap { display: grid; gap: 1rem; justify-items: start; }
.page-head h1 { font-size: clamp(2rem, 5.2vw, 3.6rem); max-width: 24ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: .45rem; font: 500 .78rem/1.4 var(--mono); color: var(--ink-2); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--red); }
.meta-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.badge {
  font: 500 .74rem/1.2 var(--mono); color: var(--ink-2); background: var(--panel);
  border: 1px solid var(--rule-strong); border-radius: 999px; padding: .4rem .75rem;
}
.badge.ok { color: var(--green); border-color: currentColor; }
.badge.fail { color: var(--red); border-color: currentColor; }
.prose { max-width: 46rem; display: grid; gap: .9rem; }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.prose a, .entry a, .rrow-link { color: var(--red); text-underline-offset: 2px; }
.prose code, .entry code { font-size: .86em; background: var(--sunk); padding: .08em .35em; border-radius: 3px; overflow-wrap: anywhere; }
.forms-used { display: flex; flex-wrap: wrap; gap: .35rem; }
.forms-used code { font: 400 .74rem/1.4 var(--mono); color: var(--green); background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; padding: .2rem .45rem; }

.doc { padding-bottom: 1rem; }
.doc > .wrap { display: grid; gap: 1.5rem; }
.doc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .doc-cols { grid-template-columns: minmax(0, 1fr); } }
.doc h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.how { display: grid; gap: .5rem; }
.pager {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--rule-strong); padding-top: 1.25rem;
}
.pager a { display: grid; gap: .3rem; text-decoration: none; font: 600 1rem/1.3 var(--mono); color: var(--ink); }
.pager a small { font: 600 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.pager a.next { margin-left: auto; text-align: right; }
.pager a:hover { color: var(--red); }

.filter { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.filter input {
  font: 400 1rem/1.4 var(--body); color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule-strong); border-radius: 4px; padding: .6rem .8rem; width: min(26rem, 100%);
}
.filter input:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.filter .count { font: 500 .78rem/1 var(--mono); color: var(--ink-2); }

.games { display: grid; gap: 2.5rem; }
.game > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .75rem; margin-bottom: .9rem; }
.game > h2 small { font: 500 .78rem/1 var(--mono); color: var(--ink-2); letter-spacing: 0; }
.rlist { border-top: 2px solid var(--ink); }
.rrow {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 17rem); gap: 1rem; align-items: baseline;
  padding: .75rem .5rem; border-bottom: 1px solid var(--rule-strong); text-decoration: none; color: var(--ink);
}
.rrow:hover { background: var(--sunk); }
.rrow .nm { font: 600 .9rem/1.3 var(--mono); color: var(--red); }
.rrow .ds { font-size: .95rem; }
.rrow .fr { font: 400 .72rem/1.5 var(--mono); color: var(--ink-2); }
@media (max-width: 760px) { .rrow { grid-template-columns: minmax(0, 1fr); gap: .25rem; } }

.ref { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 1000px) { .ref { grid-template-columns: minmax(0, 1fr); } .ref-index { display: none; } }
.ref-index {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 4.75rem); max-height: calc(100vh - 6rem);
  overflow-y: auto; font: 400 .78rem/1.5 var(--mono); padding-right: .5rem;
}
.ref-index h3 { font: 600 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin: 1.1rem 0 .4rem; }
.ref-index h3:first-child { margin-top: 0; }
.ref-index h4 { font: 600 .75rem/1.2 var(--mono); color: var(--ink-2); margin: .7rem 0 .2rem; }
.ref-index a { display: block; padding: .1rem 0; text-decoration: none; color: var(--ink); }
.ref-index a:hover { color: var(--red); }
.ref-body { display: grid; gap: .5rem; min-width: 0; }
.ref-sec > h2 { margin: 1.75rem 0 .4rem; }
.ref-sec > p { color: var(--ink-2); margin-bottom: .75rem; max-width: 46rem; }
.scope > h3 { font: 600 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 1.5rem 0 .25rem; }
.entry { display: grid; gap: .6rem; padding-block: 1.25rem; border-top: 1px solid var(--rule-strong); scroll-margin-top: 5rem; }
.entry h4 { margin: 0; font: 600 1.05rem/1.3 var(--mono); }
.entry h4 .sc { color: var(--ink-2); font-weight: 400; margin-right: .4rem; }
.entry h4 a { color: inherit; text-decoration: none; }
.entry .spell {
  margin: 0; font: 500 .85rem/1.6 var(--mono); background: var(--panel); white-space: pre-wrap; overflow-wrap: anywhere;
  border: 1px solid var(--rule); border-left: 3px double var(--red); border-radius: 0; padding: .5rem .8rem;
}
.entry .mean { max-width: 48rem; }
.entry dl { margin: 0; display: grid; gap: .5rem; max-width: 52rem; }
.entry dt { font: 600 .8rem/1.4 var(--mono); color: var(--green); }
.entry dd { margin: 0 0 0 1rem; font-size: .9rem; color: var(--ink-2); }
.entry .used { font: 400 .74rem/1.4 var(--mono); color: var(--ink-2); }
.entry .ex {
  margin: 0; font: 400 .8rem/1.6 var(--mono); background: var(--sunk); border-radius: 4px; padding: .5rem .75rem;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.entry .ex .where { display: block; color: var(--ink-2); font-size: .72rem; }
.ex .d { color: var(--red); font-weight: 600; }
.ex .k { color: var(--green); }
.ex .n2 { color: var(--ink); font-weight: 600; }
.ex .r, .ex .c { color: var(--ink-2); font-style: italic; }
.ex .u { color: var(--brass); }
.ex .s { color: var(--ink-2); }