/* brainlocation — "a clear anatomy lab": bench-white / slate-dark surfaces, specimen-coral highlight,
   one system font stack (nothing to download). Shared by every page. */
:root {
  color-scheme: light dark;
  --bg: #f2f4f3;
  --panel: #ffffff;
  --ink: #16201e;
  --muted: #55625f;
  --line: #d3dbd8;
  --accent: #d93a22;
  --accent-soft: #fbe3dd;
  --teal: #0f6b66;
  --stage: radial-gradient(120% 90% at 50% 35%, #ffffff 0%, #e7ecea 70%, #dde4e1 100%);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --r: 14px;
  /* the lobes page: one colour per lobe, from the Okabe-Ito colour-blind-safe set */
  --part-frontal-lobe: #0072b2;
  --part-parietal-lobe: #009e73;
  --part-temporal-lobe: #e69f00;
  --part-occipital-lobe: #cc79a7;
  --part-insula: #f0e442;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1413;
    --panel: #151d1b;
    --ink: #e2eae7;
    --muted: #9aa9a5;
    --line: #2a3734;
    --accent: #ff6247;
    --accent-soft: #3a1d17;
    --teal: #5cc6bb;
    --stage: radial-gradient(120% 90% at 50% 35%, #1e2826 0%, #121a18 70%, #0d1312 100%);
    --part-frontal-lobe: #56b4e9;
    --part-parietal-lobe: #1fb58a;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font); }
a { color: var(--teal); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem clamp(.9rem, 3vw, 2rem); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 750; font-size: 1.1rem; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.brand-mark { width: 1.1rem; height: 1.1rem; border-radius: 50% 50% 46% 54% / 58% 58% 42% 42%; background: var(--panel); border: 2px solid var(--ink); position: relative; }
.brand-mark::after { content: ""; position: absolute; width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); left: .2rem; top: .3rem; }
.top-note { margin: 0; font-size: .85rem; color: var(--muted); }

.lab { display: grid; gap: 1rem 1.5rem; padding: .8rem clamp(.9rem, 3vw, 2rem) 2rem; max-width: 1440px; margin: 0 auto; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .lab { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); align-items: start; }
  .stage { grid-column: 1; grid-row: 1 / span 2; }
  .side { grid-column: 2; grid-row: 1; position: sticky; top: 1rem; }
  .parts, .about, .sources, .guides, .structure-body { grid-column: 1 / -1; }
}

.stage-head h1 { margin: .2rem 0 .6rem; font-size: clamp(1.35rem, 1rem + 1.6vw, 2.2rem); }
.search { display: flex; gap: .5rem; }
.search input { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: .7rem .9rem; border-radius: 999px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); }
.search input:focus { border-color: var(--accent); outline: none; }
.search button, .tools button { font: inherit; font-weight: 650; border-radius: 999px; border: 2px solid var(--ink); background: var(--ink); color: var(--bg); padding: .55rem 1.1rem; cursor: pointer; }
.search-msg { min-height: 1.3em; margin: .35rem .4rem 0; font-size: .9rem; color: var(--muted); }
.search-msg a { color: var(--teal); font-weight: 650; }
.suggest { display: grid; gap: .35rem; margin: .5rem .2rem 0; }
.suggest[hidden] { display: none; }
.suggest-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; min-width: 0; }
.suggest-h { margin: 0; flex: 0 0 7.4rem; white-space: nowrap; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.suggest ul { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; flex: 1 1 12rem; min-width: 0; }
.suggest-item { font: inherit; font-size: .9rem; font-weight: 600; max-width: 100%; text-align: left; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: .3rem .75rem; cursor: pointer; }
.suggest-item small { font-weight: 400; color: var(--muted); }
.suggest-item:hover, .suggest-item:focus-visible { border-color: var(--accent); outline: none; background: var(--accent-soft); }

.viewer { position: relative; height: min(64vh, 640px); min-height: 300px; border-radius: var(--r); background: var(--stage); border: 1px solid var(--line); overflow: hidden; touch-action: none; }
.viewer canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.viewer canvas:active { cursor: grabbing; }
.viewer-status { position: absolute; inset: auto 1rem 1rem; margin: 0; padding: .7rem .9rem; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: .95rem; }
.viewer.is-fallback { height: auto; min-height: 0; }
.viewer.is-fallback .viewer-status { position: static; margin: 1rem; }
.viewer-label { position: absolute; left: 0; top: 0; pointer-events: none; padding: .25rem .6rem; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: .9rem; white-space: nowrap; box-shadow: 0 2px 10px rgb(0 0 0 / .18); }

.tools { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .65rem; }
.tools-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: .1rem; }
.tools button { background: var(--panel); color: var(--ink); border-color: var(--line); padding: .45rem .95rem; }
.tools button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.tools .reset { margin-left: auto; }
.slider { flex: 1 1 8rem; display: flex; }
.slider input { width: 100%; accent-color: var(--accent); }
.slider input:disabled { opacity: .35; }

.side { display: grid; gap: 1rem; }
.info, .how { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.15rem; }
.info { border-left: 6px solid var(--accent); }
.info.is-empty { border-left-color: var(--line); }
.info h2 { margin: 0 0 .4rem; font-size: 1.45rem; }
.info p { margin: .45rem 0; }
.info .where { font-size: 1.05rem; }
.info .does { color: var(--muted); }
.info .does:empty, .info .sides:empty { display: none; }
.info .sides { font-size: .9rem; color: var(--muted); }
.info .source { font-size: .85rem; }
.how h2 { font-size: 1rem; margin: 0 0 .4rem; }
.how ol { margin: 0; padding-left: 1.2rem; font-size: .93rem; }
.how li + li { margin-top: .35rem; }

.parts h2, .about h2, .sources h2 { font-size: 1.3rem; margin: 1.2rem 0 .3rem; }
.parts h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 1.2rem 0 .5rem; }
.lede { margin: 0; color: var(--muted); }
.part-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.part-list li { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; font-size: .9rem; color: var(--muted); }
.part-list button { display: block; font: inherit; font-weight: 700; font-size: 1rem; color: var(--ink); background: none; border: 0; padding: 0 0 .15rem; cursor: pointer; text-align: left; }
.part-list button:hover, .part-list button[aria-pressed="true"] { color: var(--accent); }
.about p { max-width: 75ch; }
.source-list { columns: 2 18rem; font-size: .9rem; padding-left: 1.1rem; }

/* structure pages (/structure/<slug>/) and the front page's list of them */
.crumb { margin: 0; font-size: .85rem; color: var(--muted); }
.crumb a { color: inherit; }
.answer { margin: 0 0 .8rem; font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); max-width: 70ch; }
.model-note { margin: -.35rem 0 .8rem; padding-left: .7rem; border-left: 3px solid var(--line); font-size: .9rem; color: var(--muted); max-width: 75ch; }
.area-note { margin: -.35rem 0 .8rem; padding-left: .7rem; border-left: 3px solid var(--accent); font-size: .9rem; color: var(--muted); max-width: 75ch; }
.area-note strong { color: var(--ink); }
.not-lit { margin: -.35rem 0 .8rem; padding-left: .7rem; border-left: 3px solid var(--accent); font-size: .9rem; color: var(--muted); max-width: 75ch; }
.not-lit strong { color: var(--ink); }
.see-also { margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line); max-width: 75ch; }
.cite { font-size: .72em; vertical-align: super; line-height: 0; text-decoration: none; margin-left: .1em; }
.viewer-hint { margin: .5rem .2rem 0; font-size: .88rem; color: var(--muted); }
.linklike { font: inherit; color: var(--teal); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.more-list { margin: 0; padding-left: 1.1rem; font-size: .95rem; }
.more-list li + li { margin-top: .3rem; }
.structure-body { display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); align-items: start; }
.fact-block h2 { font-size: 1.3rem; margin: 1.2rem 0 .4rem; padding-bottom: .3rem; border-bottom: 2px solid var(--accent-soft); }
.facts { margin: 0; padding-left: 1.15rem; max-width: 75ch; }
.facts li { margin: .4rem 0; }
.facts li::marker { color: var(--accent); }
.ref-list { font-size: .9rem; padding-left: 1.6rem; columns: 2 22rem; }
.ref-list li { margin: .2rem 0; break-inside: avoid; }
.fine { font-size: .85rem; color: var(--muted); max-width: 75ch; }
.guides h2 { font-size: 1.3rem; margin: 1.2rem 0 .3rem; }
.guide-list { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.guide-list li { background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 10px; padding: .6rem .8rem; font-size: .9rem; color: var(--muted); }
.guide-list a { display: block; font-weight: 700; font-size: 1.02rem; color: var(--ink); text-decoration: none; margin-bottom: .15rem; }
.guide-list a:hover { color: var(--accent); }
.takes-part, .part-links { margin: .45rem .2rem 0; font-size: .92rem; }

/* function pages (/function/<slug>/): every part lit at once, one cited role line each */
.function-page .side { position: static; }
.part-roles { margin: 0; padding-left: 1.3rem; font-size: .93rem; color: var(--muted); }
.part-roles li + li { margin-top: .6rem; }
.part-roles li::marker { color: var(--accent); font-weight: 700; }
.part-name { display: block; font: inherit; font-weight: 700; font-size: 1rem; color: var(--ink); background: none; border: 0; padding: 0 0 .1rem; cursor: pointer; text-align: left; }
.part-name:hover, .part-name[aria-pressed="true"] { color: var(--accent); }
.part-where { display: inline-block; margin-left: .15rem; font-size: .88rem; }

/* the lobes page (/lobes/): every lobe lit in its own colour, a legend naming each colour */
.top-nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-left: auto; font-size: .92rem; font-weight: 650; }
.top-nav a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); white-space: nowrap; }
.top-nav a:hover { color: var(--accent); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .93rem; color: var(--muted); }
.legend li { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); gap: .1rem .6rem; align-items: start; }
.swatch { width: 1.15rem; height: 1.15rem; margin-top: .2rem; border-radius: 4px; border: 1px solid var(--ink); background: var(--accent); }
.swatch[data-lobe="frontal-lobe"] { background: var(--part-frontal-lobe); }
.swatch[data-lobe="parietal-lobe"] { background: var(--part-parietal-lobe); }
.swatch[data-lobe="temporal-lobe"] { background: var(--part-temporal-lobe); }
.swatch[data-lobe="occipital-lobe"] { background: var(--part-occipital-lobe); }
.swatch[data-lobe="insula"] { background: var(--part-insula); }
.legend .part-name { display: inline; }
.lobe-sizes { border-collapse: collapse; font-size: .92rem; margin: .4rem 0; }
.lobe-sizes th, .lobe-sizes td { text-align: left; padding: .3rem .8rem .3rem 0; border-bottom: 1px solid var(--line); }
.lobe-sizes td { font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; max-width: 100%; }

/* the quiz (/quiz/): a question card over the viewer, set and mode toggles, a score box */
.quiz-card { background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: var(--r); padding: .7rem 1rem; margin-bottom: .65rem; }
.quiz-prompt { margin: 0; font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); font-weight: 700; line-height: 1.25; }
.quiz-prompt strong { color: var(--accent); }
.quiz-feedback { margin: .35rem 0 0; min-height: 1.4em; font-size: .95rem; color: var(--muted); }
.quiz-feedback.is-right, .quiz-feedback.is-wrong { color: var(--ink); font-weight: 600; }
.quiz-feedback.is-right::before { content: "✓ "; color: var(--teal); font-weight: 800; }
.quiz-feedback.is-wrong::before { content: "✗ "; color: var(--accent); font-weight: 800; }
.quiz-more, .quiz-clue { margin: .25rem 0 0; font-size: .92rem; }
.quiz-more:empty { display: none; }
.quiz-clue { color: var(--muted); max-width: 75ch; }
.quiz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.quiz-actions:has(> :not([hidden])) { margin-top: .5rem; }
.quiz-next, .quiz-reset { font: inherit; font-weight: 650; border-radius: 999px; border: 2px solid var(--ink); background: var(--ink); color: var(--bg); padding: .45rem 1.1rem; cursor: pointer; }
.quiz-reset { background: var(--panel); color: var(--ink); border-color: var(--line); font-size: .9rem; margin-top: .6rem; }
.quiz-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: .4rem; margin-top: .55rem; }
.quiz-choices[hidden] { display: none; }
.quiz-choice { font: inherit; font-weight: 650; text-align: left; border-radius: 10px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); padding: .45rem .7rem; cursor: pointer; }
.quiz-choice span { display: inline-block; min-width: 1.2em; color: var(--muted); font-family: var(--mono); font-size: .85em; }
.quiz-choice:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.quiz-choice:disabled { cursor: default; opacity: .6; }
.quiz-choice.is-right { opacity: 1; border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.quiz-choice.is-right::after { content: " ✓"; color: var(--teal); }
.quiz-choice.is-wrong { opacity: 1; border-color: var(--accent); background: var(--accent-soft); }
.quiz-choice.is-wrong::after { content: " ✗"; color: var(--accent); }
.quiz-page .viewer { height: min(58vh, 600px); }
.quiz-toggle { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.quiz-toggle button { font: inherit; font-size: .92rem; font-weight: 650; border-radius: 999px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); padding: .35rem .85rem; cursor: pointer; }
.quiz-toggle button small { font-weight: 500; color: var(--muted); }
.quiz-toggle button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.quiz-toggle button[aria-pressed="true"] small { color: inherit; }
.quiz-mode-note { margin: 0; font-size: .88rem; color: var(--muted); }
.quiz-score { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 650; }
.quiz-missed-h { margin: .6rem 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.quiz-missed { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .93rem; }
.quiz-missed span { color: var(--muted); font-size: .85em; }
.quiz-missed .none { color: var(--muted); }
.top { flex-wrap: wrap; }

.prose { max-width: 75ch; margin: 0 auto; padding: 1rem clamp(.9rem, 3vw, 2rem) 2rem; }
.prose h1 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); }
.prose h2 { font-size: 1.25rem; margin-top: 1.8rem; }

.foot { border-top: 1px solid var(--line); padding: 1rem clamp(.9rem, 3vw, 2rem) 2rem; font-size: .88rem; color: var(--muted); }
.foot p { max-width: 1440px; margin: 0 auto; }

/* the diagram (/diagram/, /diagram/blank/): outlines projected from the model, one sheet per view, printable */
:root {
  --part-limbic: #d55e00; --part-white: #d9cfb4; --part-deep: #7b6fd0; --part-gland: #d93a22;
  --part-brainstem: #6f8a85; --part-cerebellum: #a0785a; --part-ventricle: #2a9df4;
}
@media (prefers-color-scheme: dark) {
  :root { --part-limbic: #f07a3a; --part-white: #6d6656; --part-deep: #a99cf0; --part-gland: #ff6247;
    --part-brainstem: #8fa8a3; --part-cerebellum: #c49a78; --part-ventricle: #5bb8ff; }
}
.diagram { max-width: 1180px; margin: 0 auto; padding: .8rem clamp(.9rem, 3vw, 2rem) 2rem; }
.diagram-intro h1 { margin: .2rem 0 .5rem; font-size: clamp(1.35rem, 1rem + 1.6vw, 2.2rem); }
.diagram-intro .lede { max-width: 75ch; }
.diagram-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; margin: .8rem 0 .4rem; }
.print-btn { font: inherit; font-weight: 650; border-radius: 999px; border: 2px solid var(--ink); background: var(--ink); color: var(--bg); padding: .45rem 1.1rem; cursor: pointer; }
.key-toggle { font-size: .93rem; display: inline-flex; gap: .4rem; align-items: center; }
.sheet-nav { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .92rem; font-weight: 650; }
.sheet { margin: 1.2rem 0 0; padding: .8rem clamp(.6rem, 2vw, 1.4rem) .6rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.sheet h2 { margin: 0 0 .2rem; font-size: 1.25rem; }
.sheet-plane, .sheet-credit { margin: 0; font-size: .85rem; color: var(--muted); }
.sheet-credit { margin-top: .5rem; }
.sheet-name { display: none; }
.dg-figure { margin: .4rem 0 0; }
.dg-svg { display: block; width: 100%; height: auto; max-height: 80vh; margin: 0 auto; }
.dg-part { fill-opacity: .55; stroke: var(--panel); stroke-width: .5; stroke-linejoin: round; }
.dg-frontal-lobe { fill: var(--part-frontal-lobe); } .dg-parietal-lobe { fill: var(--part-parietal-lobe); }
.dg-temporal-lobe { fill: var(--part-temporal-lobe); } .dg-occipital-lobe { fill: var(--part-occipital-lobe); }
.dg-insula { fill: var(--part-insula); } .dg-limbic { fill: var(--part-limbic); } .dg-white { fill: var(--part-white); }
.dg-deep { fill: var(--part-deep); } .dg-gland { fill: var(--part-gland); } .dg-brainstem { fill: var(--part-brainstem); }
.dg-cerebellum { fill: var(--part-cerebellum); } .dg-ventricle { fill: var(--part-ventricle); } .dg-other { fill: var(--line); }
.dg-blank .dg-part { fill: var(--panel); fill-opacity: 1; stroke: var(--ink); stroke-width: .35; }
.dg-leader { stroke: var(--ink); stroke-width: .4; fill: none; }
.dg-dot { fill: var(--ink); stroke: var(--panel); stroke-width: .4; }
.dg-label { font-family: var(--font); font-size: 6.6px; fill: var(--ink); }
.dg-svg a:hover .dg-label, .dg-svg a:focus .dg-label { fill: var(--accent); text-decoration: underline; }
.dg-num { fill: var(--panel); stroke: var(--ink); stroke-width: .45; }
.dg-numtext { font-family: var(--font); font-weight: 700; font-size: 6.6px; fill: var(--ink); }
.dg-key { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .85rem; color: var(--muted); }
.dg-key li { display: inline-flex; align-items: center; gap: .35rem; }
.dg-swatch { width: .9rem; height: .9rem; border-radius: 3px; border: 1px solid var(--ink); background: var(--line); }
.dg-swatch.dg-frontal-lobe { background: var(--part-frontal-lobe); } .dg-swatch.dg-parietal-lobe { background: var(--part-parietal-lobe); }
.dg-swatch.dg-temporal-lobe { background: var(--part-temporal-lobe); } .dg-swatch.dg-occipital-lobe { background: var(--part-occipital-lobe); }
.dg-swatch.dg-insula { background: var(--part-insula); } .dg-swatch.dg-limbic { background: var(--part-limbic); }
.dg-swatch.dg-white { background: var(--part-white); } .dg-swatch.dg-deep { background: var(--part-deep); }
.dg-swatch.dg-gland { background: var(--part-gland); } .dg-swatch.dg-brainstem { background: var(--part-brainstem); }
.dg-swatch.dg-cerebellum { background: var(--part-cerebellum); } .dg-swatch.dg-ventricle { background: var(--part-ventricle); }
.dg-swatch { opacity: .75; }
.answer-key h3 { margin: .7rem 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.dg-answers { margin: 0; padding-left: 1.8rem; columns: 14rem auto; column-gap: 1.5rem; font-size: .92rem; }
.dg-answers li { break-inside: avoid; }
.dg-answers li::marker { font-weight: 700; color: var(--accent); }
body:has(#hide-key:checked) .answer-key { display: none; }
.diagram-about { margin-top: 1rem; }
.dg-parts-list { display: none; margin: .5rem 0 0; font-size: .92rem; line-height: 1.7; }
.dg-parts-list span { color: var(--muted); }
@media (max-width: 700px) { .dg-parts-list { display: block; } }

@media print {
  @page { size: auto; margin: 12mm; }
  .diagram-page { --bg: #fff; --panel: #fff; --ink: #000; --muted: #333; --line: #999; --accent: #000; --teal: #000;
    --part-frontal-lobe: #0072b2; --part-parietal-lobe: #009e73; --part-temporal-lobe: #e69f00; --part-occipital-lobe: #cc79a7;
    --part-insula: #f0e442; --part-limbic: #d55e00; --part-white: #d9cfb4; --part-deep: #7b6fd0; --part-gland: #d93a22;
    --part-brainstem: #6f8a85; --part-cerebellum: #a0785a; --part-ventricle: #2a9df4;
    background: #fff; color: #000; font-size: 11pt; }
  .diagram-page .top, .diagram-page .foot, .no-print { display: none !important; }
  .diagram { max-width: none; padding: 0; }
  .sheet { margin: 0; padding: 0; border: 0; border-radius: 0; break-after: page; break-inside: avoid; }
  .sheet:last-of-type { break-after: auto; }
  .sheet h2 { font-size: 15pt; }
  /* fits A4 (297 mm) and US Letter (279 mm) in portrait inside 12 mm margins, with the key and credit below */
  .dg-svg { max-height: 165mm; width: 100%; }
  .sheet-name { display: block; margin: .3rem 0 0; font-size: 11pt; }
  .sheet-name span { display: inline-block; width: 70mm; border-bottom: 1px solid #000; }
  .dg-answers { font-size: 9.5pt; columns: 3; }
  .sheet-credit, .dg-key { font-size: 8.5pt; }
  .dg-svg a .dg-label { text-decoration: none; }
}

@media (max-width: 420px) {
  .top-note { display: none; }
  .viewer { height: 58vh; }
  .quiz-page .viewer { height: 52vh; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }