/* The Making Software frame, copied from sgnlz/game-refs/fx-study/css/fx.css (2026-10-19), which measured
   makingsoftware.com/chapters/shaders. Kept as it was so the two sites stay alike; the book's own additions
   are in book.css. */
:root {
  --page:        #fbfbfb;
  --card:        #ffffff;
  --ink:         oklch(0.147 0.004 49.25);
  --ink-title:   rgb(0 0 0 / 0.80);
  --ink-sub:     oklch(0.373 0.034 259.733);
  --ink-muted:   rgb(0 0 0 / 0.40);
  --ink-faint:   rgb(0 0 0 / 0.20);
  --rule:        rgb(0 0 0 / 0.10);
  --code-bg:     rgb(0 0 0 / 0.025);
  --accent:      oklch(0.5058 0.2886 264.84);
  --highlight:   oklch(0.945 0.129 101.54 / 0.75);
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --mono:  ui-monospace, "SF Mono", Menlo, monospace;

  /* measured: underline colour of in-text links on the original (cobalt-400) */
  --accent-line: oklch(0.6379 0.1899 269.89);

  line-height: 180%;
  font-feature-settings: "calt";
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  font-family: var(--serif);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 40;
  height: 45px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 36px 0 24px;                        /* measured: md:px-9 md:pl-6 */
  background: rgb(248 248 248 / 0.5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 2px -4px rgb(0 0 0 / 0.1);
}
.bar__arrows { display: grid; grid-template-columns: 24px 24px; align-items: center; flex: none; }
.bar__arrows a, .bar__arrows span {
  display: grid; place-items: center; width: 24px; height: 24px;   /* measured: size-6 */
  color: #000; text-decoration: none;
}
.bar__arrows a:hover { color: var(--accent); }
.bar__arrows span { opacity: 0.5; cursor: not-allowed; }            /* measured: disabled:opacity-50 */
.bar__arrows svg { width: 12px; height: 12px; display: block; }     /* measured: size-3 */
.crumb {
  margin: 0; min-width: 0; flex: 1;
  font: 400 11px/28.8px var(--mono);
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.crumb .here { color: #000; }

/* ── Right rail (ruler + frame counter) ──────────────────────────────── */
.rail {
  position: fixed; top: 80px; bottom: 40px; right: 16px;           /* measured: top-20 bottom-10 right-4 */
  width: 96px; z-index: 30; pointer-events: none;
}
.rail__tick { position: absolute; right: 0; height: 1px; width: 6px; background: var(--ink-faint); }
.rail__tick--major { width: 12px; background: var(--ink-muted); }
.rail__marker { position: absolute; right: 0; top: 0; width: 16px; height: 1px; background: var(--accent); }
.rail__label {
  position: absolute; right: calc(100% + 10px); top: 0; transform: translateY(-50%);
  font: 400 12px/16px var(--mono); color: var(--accent); white-space: nowrap;
}

/* ── Sheet ───────────────────────────────────────────────────────────── */
.sheet {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center;
  width: calc(100% - 64px); max-width: 960px;
  margin: 80px auto 120px;
  padding: 80px 64px;
  background: var(--card);
  border-radius: 2px;
  box-shadow: 0 1px 4px 1px rgb(0 0 0 / 0.05), 0 1px 1px 0 rgb(0 0 0 / 0.5), inset 0 -1px 1px 1px #fff;
  font-size: 14px; line-height: 25.2px;
}
.sheet > * { width: 100%; max-width: 576px; }
.sheet > .wide { max-width: none; }

/* measured: below 1024 the original uses p-8 and pt-8 */
@media (max-width: 1023px) {
  .sheet { margin-top: 32px; padding: 32px; }
}
/* measured: below 768 the sheet goes edge to edge with no card or shadow */
@media (max-width: 767px) {
  .bar { padding: 0 28px; }
  .sheet { width: 100%; background: transparent; box-shadow: none; }
}
@media (max-width: 639px) {
  .crumb .parent { display: none; }                                 /* measured: max-sm:hidden */
  .rail { display: none; }
}

/* ── Chapter header ──────────────────────────────────────────────────── */
.ch-header { display: grid; width: 474px; max-width: 100%; margin: 24px 0; }
.ch-header .ch-meta {
  margin: 8px 0 0; text-align: center;
  font: 400 10px/25.2px var(--mono); text-transform: uppercase; color: #000;
}
.sep { color: var(--ink-faint); margin: 0 6px; }
.ch-header h1 {
  margin: 24px 0 0; text-align: center;
  font: 400 36px/40px var(--serif); letter-spacing: -0.9px; color: var(--ink-title);
}
.ch-header .ch-sub {
  margin: 12px 0 0; text-align: center; text-wrap: pretty;
  font-size: 14px; line-height: 20px; color: var(--ink-sub);
}
.ch-header .ch-dots { margin: 24px 0 0; text-align: center; font: 400 10px/25.2px var(--mono); color: #000; }

/* ── Body text ───────────────────────────────────────────────────────── */
.sheet p { margin: 24px 0 0; text-align: justify; }
.sheet h2 {
  margin: 80px 0 0;
  font-size: 14px; font-weight: 600; letter-spacing: -0.35px; line-height: 21.8px;
}
.sheet h3 { margin: 64px 0 0; font-size: 14px; font-weight: 600; line-height: 21.8px; }
.sheet h2 a.anchor, .sheet h3 a.anchor { text-decoration: none; }
strong { font-weight: 600; }
em { font-style: italic; font-family: var(--serif); }

.sheet ul, .sheet ol { margin: 24px 0 0; padding: 0 0 0 24px; text-align: justify; }
.sheet ul { list-style-type: square; }                             /* measured */
.sheet li { margin: 8px 0 0; padding-left: 8px; }                  /* measured: prose li */
.sheet li:first-child { margin-top: -8px; }                        /* measured */

/* in-text links (entry list, index rows) — measured from the original's section list */
.sheet li > .grp > a, .toc a {
  color: var(--accent); font-weight: 500;
  text-decoration: underline 1px var(--accent-line); text-underline-offset: 2px;
}
.grp sup {
  display: inline-block; vertical-align: super; line-height: 0;
  font: 400 0.6rem var(--mono); color: rgb(0 0 0 / 0.5); text-transform: uppercase;
  transition: transform 150ms;
}
.grp:hover sup { transform: translateY(50%); }

code {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  background: var(--code-bg); padding: 2px; border-radius: 0;
}

.sheet p.divider { text-align: center; font: 400 12px/16px var(--mono); margin-top: 32px; }

/* ── Glossary terms in text ──────────────────────────────────────────── */
a.term {
  color: #000; font-weight: 400; cursor: help; scroll-margin-top: 64px;
  text-decoration: underline 1px dotted rgb(0 0 0 / 0.5); text-underline-offset: 2px;
}
a.term:hover { color: var(--accent); }
a.term sup { font-family: var(--serif); font-size: 0.6em; margin-left: 2px; vertical-align: super; line-height: 0; }
a.term:target, .gloss-def:target {
  background: var(--highlight); margin: 0 -4px; padding: 0 4px; border-radius: 2px;
  animation: fx-fade-in 600ms ease-out;
}
@keyframes fx-fade-in { from { background-color: transparent; } to { background-color: var(--highlight); } }

/* ── Glossary at the end of a chapter ───────────────────────────────── */
.glossary { margin-top: 64px; }                                      /* measured: mt-16 */
.sheet .glossary h2 {
  margin: 0; padding-bottom: 2px; border-bottom: 1px solid;
  font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: normal;
}
.gloss-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 384px)); gap: 16px 48px; }
@media (max-width: 639px) { .gloss-grid { grid-template-columns: minmax(0, 1fr); } }
.sheet p.gloss-def {
  margin: 0; max-width: 384px; scroll-margin-top: 64px;
  font-size: 12px; line-height: 24px; text-align: justify; color: rgb(0 0 0 / 0.75);
}
.gloss-def sup { font-size: 0.7em; margin-right: 2px; vertical-align: super; line-height: 0; }
.gloss-def a {
  color: #000; font-weight: 500;
  text-decoration: underline dotted rgb(0 0 0 / 0.25); text-underline-offset: 2px;
}
.gloss-def a:hover { color: var(--accent); }

/* ── Index rows ──────────────────────────────────────────────────────── */
.toc { list-style-type: decimal !important; }
.toc .row-meta { display: block; font: 400 10px/20px var(--mono); text-transform: uppercase; color: #000; }

/* ── Figures ─────────────────────────────────────────────────────────── */
.sheet > figure { margin: 24px 0 0; }
@media (max-width: 1023px) {
  /* measured: -mx-8, figures bleed to the sheet edge */
  .sheet > figure.wide { width: calc(100% + 64px); margin-left: -32px; margin-right: -32px; }
}
.cmp { outline: none; }
.cmp:focus-visible .transport { color: var(--accent); }
.cmp__panes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 16px; align-items: start;
}
.cmp--stack .cmp__panes { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 767px) {
  .cmp__panes, .cmp--stack .cmp__panes {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%;
    overflow-x: scroll; scroll-snap-type: x proximity;
  }
  .pane { scroll-snap-align: start; scroll-margin-left: 8px; }
}
.pane { min-width: 0; }
.pane__frame {
  display: flex; justify-content: center; align-items: center;
  background: var(--card);
  border: 1px solid transparent; transition: border-color 300ms;
  overflow-x: auto;
}
.pane__frame:hover { border-color: var(--rule); }
.pane__frame canvas { display: block; flex: none; image-rendering: pixelated; }
.pane__frame canvas[hidden] { display: none; }
.pane__label, .transport {
  font: 400 10px/16px var(--mono); text-transform: uppercase; color: #000; text-align: center;
}
.pane__label { margin-top: 8px; }
.transport { margin-top: 8px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 12px; padding: 0 16px; }
.transport__btns { display: inline-flex; gap: 4px; }
.transport button { min-width: 16px; padding: 0 2px; line-height: 16px; }
.transport button:hover { color: var(--accent); }
.transport .num { font-variant-numeric: tabular-nums; white-space: pre; }
.transport .sep { margin: 0; }
.cmp__error { font: 400 10px/16px var(--mono); text-transform: uppercase; text-align: center; color: var(--accent); }

/* Diagram figures: inline SVG */
.diagram { padding: 0 16px; }
.diagram svg { display: block; margin: 0 auto; max-width: 100%; height: auto; overflow: visible; }
.diagram text { font: 400 10px var(--mono); text-transform: uppercase; fill: #000; }
.diagram .stroke { fill: none; stroke: #000; stroke-width: 1; }
.diagram .dash { fill: none; stroke: #000; stroke-width: 1; stroke-dasharray: 2 3; }
.diagram .accent { stroke: var(--accent); fill: none; }
.diagram image { image-rendering: pixelated; }

/* ── Details blocks: RECIPE / THREE.JS / PROVENANCE ─────────────────── */
details.fx { margin-top: 24px; }
details.fx + details.fx { margin-top: 8px; }
details.fx > summary {
  cursor: pointer; width: fit-content;
  font: 400 10px/25.2px var(--mono); text-transform: uppercase; color: #000;
}
details.fx > summary:hover { color: var(--accent); }
details.fx .file { margin: 16px 0 0; font: 400 10px/16px var(--mono); color: var(--ink-muted); text-align: left; }
details.fx pre {
  margin: 8px 0 0; padding: 16px; border-radius: 0;
  background: var(--code-bg); overflow-x: auto;
  font: 400 11px/1.8 var(--mono); color: var(--ink); tab-size: 2;
}
details.fx pre code { background: none; padding: 0; font-size: inherit; font-weight: inherit; }
pre .c { color: rgb(0 0 0 / 0.45); }
pre .n { color: var(--accent); }
.prov { margin-top: 8px !important; }
.sheet .prov li { margin-top: 8px; }
.tag { font: 400 10px var(--mono); text-transform: uppercase; color: #000; }

/* ── Characters (characters/*.html, lib/char/) ───────────────────────────
   Entries are <section class="char-entry"> with display: contents, so their children sit in the sheet's grid
   exactly like a chapter's own h2, p and figures. */
.char-entry { display: contents; }
.char-entry > * { width: 100%; max-width: 576px; }
.char-entry > .wide { max-width: none; }
.char-entry > figure { margin: 24px 0 0; }
@media (max-width: 1023px) {
  .char-entry > figure.wide { width: calc(100% + 64px); margin-left: -32px; margin-right: -32px; }
}
.sheet p.char-part {
  margin-top: 32px; text-align: left;
  font: 400 10px/16px var(--mono); text-transform: uppercase; color: var(--ink-muted);
}
.sheet p.char-empty { margin-top: 8px; text-align: left; font: 400 10px/16px var(--mono); text-transform: uppercase; color: var(--ink-muted); }

/* diagram classes for character SVGs (in addition to .stroke .dash .accent) */
.diagram .fill-acc { fill: var(--accent); stroke: none; }
.diagram .fill-ink { fill: #000; stroke: none; }
.diagram .node { fill: #fff; stroke: #000; stroke-width: 1; }
.diagram .node.on { stroke: var(--accent); }
.diagram text.on { fill: var(--accent); }
.diagram .grid { fill: none; stroke: rgb(0 0 0 / 0.06); stroke-width: 1; }
.diagram .box-hurt { stroke: #2050ff; fill: rgb(32 80 255 / 0.15); stroke-width: 1; }
.diagram .box-hit  { stroke: #e02020; fill: rgb(224 32 32 / 0.15); stroke-width: 1; }
.diagram .box-push { stroke: #10a040; fill: rgb(16 160 64 / 0.15); stroke-width: 1; }

/* the single-pane Live figure */
.live { outline: none; }
.live:focus-visible .transport { color: var(--accent); }
.live__panes { padding: 0 16px; }
.live .pane__frame { justify-content: safe center; }   /* wider than the screen: scroll from the left edge, never clip it */
.live__scrub { width: 160px; height: 16px; margin: 0; accent-color: var(--accent); }

/* RECIPE table */
table.recipe { width: 100%; margin-top: 8px; border-collapse: collapse; font: 400 10px/16px var(--mono); }
table.recipe th { text-align: left; font-weight: 400; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--rule); padding: 4px 8px 4px 0; }
table.recipe td { vertical-align: top; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--rule); }
table.recipe td.v { color: var(--accent); white-space: nowrap; }
table.recipe td.tag { text-transform: uppercase; }
table.recipe td.l .k { color: var(--ink-muted); }
table.recipe td.s { color: rgb(0 0 0 / 0.6); word-break: break-word; }

/* evidence strip: native frames at integer scale, side by side */
.evidence { display: flex; gap: 16px; align-items: flex-end; overflow-x: auto; padding: 0 16px 4px; margin-top: 8px; }
.evidence__item { flex: none; }
.evidence__item img { display: block; image-rendering: pixelated; margin: 0 auto; }

/* Open list */
.sheet ul.open-list { margin-top: 16px; }
.sheet ul.open-list li { font-size: 13px; }