:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  --bg: #def4e9;
  --surface: #ffffff;
  --ink: #163f37;
  --muted: #537469;
  --primary: #087c76;
  --primary-soft: #e5f3ed;
  --blue: #23769b;
  --blue-soft: #e3f1fa;
  --orange: #b46120;
  --yellow: #8f6c08;
  --green: #217e50;
  --green-soft: #ddf1e4;
  --red: #aa3443;
  --red-soft: #fbe7e9;
  --line: #c4ded2;
  --radius: 22px;
  --control-radius: 14px;
  --header-height: 64px;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
button, input { font: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 3px;
}
button:disabled { cursor: default; }
[hidden] { display: none !important; }
a { color: var(--blue); text-underline-offset: 3px; }
header {
  height: var(--header-height);
  padding: env(safe-area-inset-top) max(18px, calc((100vw - 640px) / 2)) 0;
  box-sizing: content-box;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-bottom: 1px solid var(--line); background: var(--bg);
  position: sticky; top: 0; z-index: 4;
}
header strong { font-size: 23px; font-weight: 850; letter-spacing: .035em; white-space: nowrap; }
header > span { font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--muted); text-align: right; }
#back { background: none; border: 0; color: var(--primary); font-weight: 750; font-size: 17px; padding: 10px 0; min-height: 44px; white-space: nowrap; }
main { max-width: 680px; margin: auto; padding: 24px 20px calc(100px + env(safe-area-inset-bottom)); min-height: 80vh; min-width: 0; }
h1, h2, h3, p, small, summary, button { overflow-wrap: anywhere; }
h1 { font-size: clamp(28px, 7.2vw, 40px); line-height: 1.16; margin: 8px 0 14px; letter-spacing: -.035em; font-weight: 820; text-wrap: balance; }
h2 { font-size: clamp(21px, 4.7vw, 24px); line-height: 1.3; margin: 24px 0 12px; letter-spacing: -.02em; }
h3 { font-size: 18px; line-height: 1.35; margin: 20px 0 9px; letter-spacing: -.01em; }
p { line-height: 1.65; margin: 12px 0; }
.eyebrow { font-size: 11px; line-height: 1.5; font-weight: 800; letter-spacing: .15em; color: var(--primary); }
.lead, .muted { color: var(--muted); line-height: 1.6; }
.lead { font-size: 16px; margin: 0 0 22px; }
.blue { color: var(--blue); }
.gold { color: var(--yellow); }
.orange, .num { color: var(--orange); }
.green { color: var(--green); }
.error { color: var(--red); }
.num { font-weight: 800; }
main[data-page="home"] h1, main[data-page="theme"] h1, main[data-page="lesson"] h1,
main[data-page="questioncourse"] h1 { color: var(--blue); }
main[data-page="phase"] h1 { color: var(--orange); }
main[data-page="review"] h1, main[data-page="defs"] h1, main[data-page="memo"] h1 { color: var(--yellow); }
main[data-page="lesson"] h3, main[data-page="questioncourse"] h3 { color: var(--blue); }
.card, .settings {
  background: var(--surface); border: 1px solid #d0e5da; border-radius: var(--radius);
  padding: 20px; margin: 14px 0; box-shadow: 0 3px 12px #163f3704; min-width: 0;
}
.card > :first-child, .settings > :first-child { margin-top: 0; }
.card > :last-child, .settings > :last-child { margin-bottom: 0; }
.card h2 { margin-top: 0; }
.card p { line-height: 1.65; }
.card .small { font-size: 14px; }
.card img { display: block; max-width: 100%; width: 100%; height: auto; object-fit: contain; border-radius: 12px; margin: 16px auto; }
.button, .outline, .choice, .row {
  width: 100%; display: block; border-radius: var(--control-radius);
  min-height: 48px; padding: 14px 16px; margin: 10px 0; font-size: 16px;
  line-height: 1.45; text-align: left; color: var(--ink); background: var(--surface); border: 0;
}
.button { background: var(--primary); color: #fff; text-align: center; font-weight: 750; }
.outline { background: transparent; border: 1.5px solid #91bbaa; color: var(--primary); text-align: center; font-weight: 700; }
.button:disabled, .outline:disabled { opacity: .5; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 74px; border: 1px solid #d0e5da; font-weight: 720; }
.row > span { min-width: 0; color: var(--blue); }
.row small { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); font-weight: 400; margin-top: 5px; }
.row b { color: var(--primary); flex-shrink: 0; font-size: 19px; }
.row b.green { color: var(--green); }
.row[data-action^="phase:"] > span { color: var(--orange); }
.row[data-action="go:review"] > span, .row[data-action="go:progress"] > span { color: var(--yellow); }
.pill { display: inline-block; border-radius: 999px; background: var(--primary-soft); padding: 5px 11px; color: var(--primary); font-size: 13px; font-weight: 700; }
.summary { background: #0e72680d; border: 1px solid #a7cdbb; border-radius: var(--radius); padding: 20px; margin: 20px 0 24px; }
.summary strong { font-size: clamp(24px, 5.5vw, 29px); line-height: 1.25; color: var(--orange); }
.summary small { color: var(--muted); font-size: 13px; line-height: 1.6; display: block; }
.meter { background: #c6e4d6; height: 8px; border-radius: 999px; margin: 16px 0; overflow: hidden; }
.meter i { display: block; background: var(--primary); height: 100%; border-radius: 999px; }
.choice { border: 1.5px solid #b1d0c1; }
.choice.selected { border-color: var(--blue); background: var(--blue-soft); }
.choice.correct { border-color: var(--green); background: var(--green-soft); }
.choice.wrong { border-color: var(--red); background: var(--red-soft); }
.choice:disabled { opacity: 1; cursor: default; }
.question, .manual-prompt { font-size: 19px; line-height: 1.55; font-weight: 700; overflow-wrap: anywhere; }
.manual-prompt { white-space: pre-line; }
.takeaway { border-left: 3px solid var(--primary); padding: 13px 15px; background: #f0f8f3; border-radius: 0 12px 12px 0; }
.takeaway > strong:first-child { color: var(--yellow); }
.note { background: #fff4d6; border: 1px solid #ecdbab; border-radius: var(--control-radius); padding: 14px 15px; margin: 16px 0; line-height: 1.6; }
.status { font-size: 14px; line-height: 1.6; }
.flash { min-height: 185px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 28px; font-weight: 760; flex-direction: column; color: var(--blue); }
.flash small { font-size: 16px; color: var(--ink); font-weight: 400; line-height: 1.6; margin-top: 16px; }
.spaced { display: flex; align-items: stretch; gap: 10px; }
.spaced > * { flex: 1; min-width: 0; }
nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 680px;
  display: flex; gap: 4px; background: #f8fcf9; border-top: 1px solid var(--line);
  padding: 8px max(8px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)); z-index: 5;
}
nav button { width: 20%; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px; border-radius: 14px; background: none; border: 0; color: var(--muted); }
nav svg { width: 22px; height: 22px; flex-shrink: 0; }
nav small { display: block; font-size: 11px; line-height: 1.3; font-weight: 650; }
nav .active { color: var(--primary); background: #e4f2eb; }
details { background: var(--surface); border: 1px solid #d0e5da; padding: 16px 18px; margin: 10px 0; border-radius: 16px; min-width: 0; }
details summary { font-weight: 720; cursor: pointer; line-height: 1.5; min-height: 24px; color: var(--blue); }
details p { line-height: 1.65; }
.manual-scan { display: block; width: 100%; height: auto; max-height: none; border-radius: 4px; margin: 12px 0; }
.scan-link { display: block; color: inherit; }
.manual-options { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.manual-options .choice { display: flex; align-items: flex-start; gap: 10px; text-align: left; font-size: 16px; line-height: 1.55; padding: 14px 13px; margin: 0; min-width: 0; }
.manual-options .choice > span:nth-child(2) { flex: 1; min-width: 0; }
.manual-options .selected { font-weight: 700; }
.answer-letter { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #a4c6b5; font-size: 12px; font-weight: 800; color: var(--primary); margin-top: 1px; }
.manual-options .selected .answer-letter { background: var(--blue); color: #fff; border-color: var(--blue); }
.manual-options .correct .answer-letter { background: var(--green); color: #fff; border-color: var(--green); }
.manual-options .wrong .answer-letter { background: var(--red); color: #fff; border-color: var(--red); }
.manual-options div.choice { cursor: default; }
.manual-diagram { max-height: 350px; object-fit: contain; }
.stats-card { padding: 20px 14px; }
.stats-card h2 { margin: 0; font-size: 22px; }
.stats-radar { display: block; width: 100%; height: auto; max-width: 460px; margin: 6px auto; }
.radar-label, .radar-theme-name { font-size: 15px; font-weight: 750; fill: var(--blue); }
.radar-theme-number, .radar-value { fill: var(--orange); font-weight: 750; }
.radar-value { font-size: 14px; }
.radar-scale { font-size: 10px; fill: var(--muted); }
.radar-note { text-align: center; font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0 0 16px; }
.stats-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; }
.stats-totals strong { display: block; font-size: 26px; line-height: 1.2; color: var(--orange); }
.stats-totals small { display: block; font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 6px; }
.radar-theme { cursor: pointer; text-decoration: none; }
.radar-theme:hover rect, .radar-theme:focus rect { fill: #23769b0d; stroke: var(--blue); stroke-width: 1.5; }
.review-answers { padding-left: 25px; line-height: 1.6; }
.review-answers li { padding: 7px 0; }
.review-question { margin: 12px 0; }
.card details small { display: block; color: var(--muted); font-weight: 400; margin-top: 5px; }
.revision-queue-number { font-size: 44px; font-weight: 800; line-height: 1.1; margin: 18px 0 0; }
.revision-queue > .muted { margin-top: 5px; }
.revision-queue h2 { margin-top: 0; }
.explanation-text { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.7; }
.course-reference { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 16px; font-size: 13px; line-height: 1.65; color: var(--muted); overflow-wrap: anywhere; }
.cycle-block h2 { margin-top: 8px; color: var(--orange); }
.cycle-count strong { font-size: 25px; color: var(--orange); }
.cycle-block .eyebrow { color: var(--orange); }
.cycle-block .meter { margin: 14px 0; }
.cycle-block .status { margin-bottom: 12px; }
.revision-feedback { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.revision-feedback h3 { margin-top: 10px; }
.exam-navigation { position: sticky; top: calc(var(--header-height) + env(safe-area-inset-top)); z-index: 3; background: #f7fdf9; border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; margin: 16px 0; box-shadow: 0 4px 12px #163f3708; }
.exam-navigation-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 12px; font-size: 13px; line-height: 1.5; }
.exam-review-link { background: none; border: 0; padding: 8px 0; color: var(--primary); font-weight: 750; min-height: 44px; }
.exam-number-strip { display: flex; gap: 8px; overflow-x: auto; padding: 8px 4px 12px; overscroll-behavior-x: contain; scrollbar-width: thin; }
.exam-number { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #abc8bd; background: var(--surface); color: var(--muted); font-weight: 750; margin: 0; padding: 0; }
.exam-number.answered { background: var(--blue-soft); border-color: var(--blue); color: #195d7e; }
.exam-number.mark-red, .exam-number.result-wrong { background: var(--red-soft); border-color: var(--red); color: #982338; }
.exam-number.mark-orange { background: #ffedd5; border-color: #b66b13; color: #8c4c07; }
.exam-number.result-right { background: var(--green-soft); border-color: var(--green); color: #19643f; }
.exam-number.current { box-shadow: 0 0 0 3px var(--blue); outline: 2px solid white; outline-offset: 0; }
.exam-number:focus-visible, .exam-mark-button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.exam-number-check { position: absolute; right: -2px; bottom: -2px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 10px; border: 1px solid #fff; }
.exam-number.result-right .exam-number-check { background: var(--green); }
.exam-number.result-wrong .exam-number-check { background: var(--red); }
.exam-legend { display: flex; gap: 4px 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin: 4px 0 0; line-height: 1.5; }
.exam-legend-red { color: var(--red); }
.exam-legend-orange { color: #98580e; }
.correction-legend-right { color: var(--green); }
.exam-mark-controls { border: 0; border-top: 1px solid var(--line); margin: 22px 0 0; padding: 15px 0 0; min-width: 0; }
.exam-mark-controls legend { font-size: 14px; font-weight: 750; padding: 0 10px 0 0; }
.exam-mark-controls > div { display: flex; flex-wrap: wrap; gap: 10px; }
.exam-mark-button { flex: 1; min-height: 44px; padding: 11px; border: 1.5px solid; border-radius: var(--control-radius); font-weight: 700; background: #fff; font-size: 14px; }
.exam-mark-button.red { color: var(--red); border-color: #d4939f; }
.exam-mark-button.orange { color: #98580e; border-color: #d4ae7a; }
.exam-mark-button.red[aria-pressed="true"] { background: var(--red-soft); border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.exam-mark-button.orange[aria-pressed="true"] { background: #ffedd5; border-color: #b66b13; box-shadow: inset 0 0 0 1px #b66b13; }
.exam-clear-mark { display: block; background: none; border: 0; color: var(--muted); font-size: 13px; min-height: 44px; padding: 10px 0; text-decoration: underline; }
.exam-number-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 12px 8px; margin: 24px 0; justify-items: center; }
.exam-review h2 { margin-top: 0; }
.correction-answer-label { display: block; font-size: 12px; font-weight: 750; margin-top: 6px; }
.correction-verdict { margin: 12px 0 18px; }
.correction-explanation-title { margin-top: 24px; }
.diagram-trigger { display: block; width: 100%; padding: 10px; margin: 18px 0; border: 1px solid var(--line); background: #f8fcf9; border-radius: 16px; color: var(--blue); text-align: center; }
.diagram-trigger img { margin: 0 auto; max-height: 340px; width: 100%; height: auto; }
.diagram-trigger small { display: block; font-size: 12px; font-weight: 650; margin-top: 10px; }
.diagram-viewer { width: calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width: 1050px; max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); }
.diagram-viewer::backdrop { background: #163f37b3; }
.diagram-viewer:not([open]) { display: none; }
.diagram-viewer-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.diagram-viewer-heading h2 { margin: 4px 0 0; font-size: 20px; }
.diagram-viewer-close { border: 1px solid var(--line); background: #f2f8f4; border-radius: 12px; min-width: 44px; min-height: 44px; padding: 10px 12px; color: var(--primary); font-weight: 750; }
.diagram-canvas { max-height: calc(100dvh - 240px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin: 12px 0; overscroll-behavior: contain; }
.diagram-canvas img { display: block; width: 100%; max-width: 100%; height: auto; }
.diagram-canvas.is-zoomed img { width: auto; min-width: 100%; max-width: none; }
body.diagram-open { overflow: hidden; }
@media (max-width: 360px) {
  main { padding-right: 16px; padding-left: 16px; }
  header { padding-right: 16px; padding-left: 16px; }
  header > span { font-size: 9px; letter-spacing: .1em; }
  .card, .settings { padding: 17px; }
  .stats-card { padding: 18px 10px; }
  .question, .manual-prompt { font-size: 18px; }
  .manual-options .choice { padding: 13px 11px; gap: 8px; }
  .stats-totals { gap: 8px; }
  .stats-totals strong { font-size: 24px; }
  .spaced { flex-wrap: wrap; }
  .spaced > * { flex-basis: 130px; }
}
@media (min-width: 700px) {
  main { padding-top: 32px; }
  .card { padding: 24px; }
  .stats-card { padding: 24px 20px; }
  nav { border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .button, .outline, .row, .exam-mark-button { transition: background-color .15s ease, border-color .15s ease; }
}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#search-open{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;background:#edf8f1;color:var(--primary);border:1px solid var(--line);border-radius:14px;padding:10px}#search-open svg,.search-field svg{width:21px;height:21px;flex-shrink:0}header>span{flex:1;min-width:0}.search-launcher,.search-form{margin:18px 0 22px}.search-field{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid #a8cbb9;border-radius:16px;padding:5px 6px 5px 14px;min-width:0;color:var(--primary)}.search-field:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px #23769b14}.search-field input{border:0;outline:0;background:transparent;min-width:0;width:100%;font-size:16px;color:var(--ink);padding:12px 0;line-height:1.4}.search-field input::placeholder{color:var(--muted);opacity:1}.search-field button{flex-shrink:0;width:44px;height:44px;border:0;border-radius:12px;background:var(--primary);color:white;font-size:23px;font-weight:750}.search-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}.search-filter{border:1px solid var(--line);border-radius:999px;padding:10px 14px;min-height:44px;font-size:14px;background:#f8fcf9;color:var(--muted)}.search-filter[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700}.search-result{display:block;width:100%;text-align:left;color:var(--ink)}.search-result>strong{display:block;color:var(--blue);font-size:19px;line-height:1.35;margin:12px 0 6px}.search-result-context{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-bottom:12px}.search-result-snippet{display:block;font-size:15px;line-height:1.6;font-weight:400}.search-result-open{display:block;margin-top:14px;font-size:13px;font-weight:750;color:var(--primary)}.search-result .pill{font-size:11px}.search-suggestions{display:flex;flex-wrap:wrap;gap:8px}.search-suggestions .outline{width:auto;font-size:14px;margin:0;padding:10px 14px;border-radius:999px;background:#f8fcf9}.search-empty{border:1px dashed #a8cbb9;border-radius:18px;padding:20px;margin:20px 0}.search-empty h2{margin-top:0}main[data-page="lookup"] h1{color:var(--blue)}

/* Compact teaching figures: vector labels stay sharp on phone and when zoomed. */
.learning-visual { margin: 0 0 24px; }
.learning-figure { margin: 0; min-width: 0; }
.learning-figure .diagram-trigger { margin: 12px 0; padding: 6px; }
.learning-figure img { display: block; width: 100%; max-width: 420px; height: auto; margin: 8px auto; border-radius: 12px; }
.learning-figure figcaption { font-size: 15px; line-height: 1.55; }
.learning-figure figcaption strong { color: var(--blue); font-size: 17px; }
.learning-figure figcaption p { margin: 6px 0; }
.learning-figure figcaption small { display: block; color: var(--muted); font-size: 12px; }
.schema-switch { display: flex; gap: 8px; overflow-x: auto; padding: 2px 1px 10px; margin: 8px 0; overscroll-behavior-x: contain; }
.schema-switch button { flex: 0 0 auto; max-width: 260px; min-height: 44px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.3; text-align: left; }
.schema-switch button[aria-pressed="true"] { color: var(--primary); background: var(--primary-soft); border-color: var(--primary); font-weight: 750; }
.diagram-canvas.is-zoomed img[src$=".svg"] { width: 900px; min-width: 100%; max-width: none; }

.science-media { overflow: hidden; border: 1px solid #cfdee7; border-radius: 16px; margin: 12px 0; background: #f8fbfe; box-shadow: 0 5px 20px #31576e0a; }
.science-loop, .science-viewer video { display: block; width: 100%; height: auto; aspect-ratio: 18 / 11; object-fit: contain; background: #f8fbfe; }
.science-controls { display: flex; align-items: stretch; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.science-controls button,.science-controls a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--primary); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; }
.science-model { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 9px 0; }
.science-still { padding: 10px 0; margin: 8px 0 18px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.science-still summary { color: var(--blue); font-size: 14px; font-weight: 650; }
.science-viewer { max-width: 1120px; }
.science-viewer video { margin-top: 14px; max-height: calc(100dvh - 190px); }
@media (prefers-reduced-motion: reduce) { .science-loop { scroll-behavior: auto; } }
.science-explanation { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); font-size:16px; line-height:1.7; overflow-wrap:anywhere; }
.science-explanation h3 { color:var(--blue); font-size:21px; line-height:1.4; margin:0 0 22px; }
.science-explanation h4 { color:var(--primary); font-size:17px; line-height:1.4; margin:24px 0 10px; }
.science-legend { margin:0; }
.science-legend>div { padding:12px 14px; margin:9px 0; border-left:3px solid var(--blue); background:#edf5f9; border-radius:0 10px 10px 0; }
.science-legend>div:nth-child(2) { border-color:var(--orange); background:#fcf2e7; }
.science-legend>div:nth-child(3) { border-color:var(--primary); background:#eaf6ef; }
.science-legend dt { font-weight:750; color:var(--ink); }
.science-legend dd { margin:3px 0 0; }
.science-steps { padding-left:25px; margin:12px 0; }
.science-steps li { padding-left:4px; margin:0 0 17px; }
.science-steps li::marker { color:var(--orange); font-weight:750; }
.science-formula { padding:14px; border:1px solid var(--line); border-radius:12px; background:#f6faf8; }
.science-pitfall { padding:1px 14px; border-left:3px solid var(--orange); background:#fcf4eb; border-radius:0 12px 12px 0; margin-top:20px; }
.science-pitfall h4 { margin-top:14px; }
.technical-toc { padding:18px; }
.technical-toc summary,.technical-related summary { cursor:pointer; font-weight:750; color:var(--primary); line-height:1.5; }
.technical-section-list { display:grid; gap:5px; margin-top:16px; }
.technical-section-list button { display:flex; gap:12px; align-items:baseline; padding:12px; text-align:left; background:transparent; border:1px solid transparent; border-radius:10px; color:var(--ink); font:inherit; line-height:1.45; }
.technical-section-list button span { color:var(--orange); font-weight:750; }
.technical-section-list button[aria-current] { border-color:var(--primary); background:#eaf6ef; }
.technical-article { font-size:17px; line-height:1.75; overflow-wrap:anywhere; min-width:0; }
.technical-article h2 { font-size:24px; line-height:1.35; color:var(--blue); margin-top:14px; }
.technical-article h3 { font-size:18px; line-height:1.4; }
.technical-figure { margin:22px 0; min-width:0; }
.technical-figure img { display:block; width:100%; max-width:440px; height:auto; margin:auto; object-fit:contain; }
.technical-figure figcaption { padding:12px 0; font-size:14px; line-height:1.55; color:var(--muted); }
.technical-figure figcaption p { margin:7px 0; }
.technical-example { border-left:3px solid var(--blue); padding:1px 15px; background:#edf5f9; border-radius:0 12px 12px 0; margin:22px 0; }
.technical-table-wrap { overflow-x:auto; max-width:100%; margin:22px 0; border:1px solid var(--line); border-radius:10px; }
.technical-table { border-collapse:collapse; width:100%; font-size:14px; line-height:1.5; }
.technical-table th,.technical-table td { padding:10px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.technical-table th { background:#edf5f9; color:var(--blue); }
.technical-pager { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 20px; }
.technical-pager button { flex:1 1 145px; margin:0; }
.technical-related .row { box-shadow:none; font-size:16px; padding:16px 0; margin-bottom:0; }
.technical-section-list button:focus-visible,.technical-toc summary:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }

.legal-links{display:flex;flex-wrap:wrap;gap:4px 18px;padding:22px 0 8px;margin-top:26px;border-top:1px solid var(--line)}.legal-links a{display:inline-flex;align-items:center;min-height:44px;font-size:.85rem;color:var(--muted)}.legal-links small{flex-basis:100%;font-size:.75rem;color:var(--muted);line-height:1.6}