:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #342d28;
  background: #f8f6f3;
  --accent: #f2994a;
  --control-height: 40px;
  --control-font-size: 14px;
  --control-line-height: 20px;
  --control-padding: 9px 14px;
}

.embedded-reader body > header { display: none; }
.embedded-reader body > main { margin-top: 12px; }

.construction-completeness { margin: 16px 0; padding: 16px; border: 1px solid #c6cec9; border-radius: 10px; background: #f3f7f4; }
.construction-completeness h3 { margin-top: 0; }
.completeness-formula, .completeness-input { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.completeness-statuses { display: grid; grid-template-columns: minmax(130px, 1fr) 3fr; gap: 8px 16px; }
.completeness-statuses dt { font-weight: 600; }
.completeness-statuses dd { margin: 0; }
.completeness-issue { border-left: 3px solid #aa7028; padding-left: 12px; margin: 12px 0; }
.construction-completeness details { margin-top: 12px; }
.construction-completeness details section { border-top: 1px solid #d5dcd7; padding: 8px 0; }
.construction-completeness button { margin: 4px 8px 4px 0; }
@media (max-width: 600px) { .completeness-statuses { display: block; } .completeness-statuses dd { margin: 4px 0 12px; } }

/* Read-only mathematical presentation of the saved perceptron materials. */
.topic-representation { min-width: 0; margin: 8px auto 28px; line-height: 1.65; }
.topic-representation h3 { font-size: 19px; line-height: 1.4; margin: 0 0 12px; }
.topic-representation h4 { font-size: 15px; margin: 16px 0 6px; }
.topic-formula { padding: 20px; background: #faf6f1; border: 1px solid #e5d9cc; border-radius: 12px; font: 21px/1.9 "Cambria Math", Cambria, serif; overflow-wrap: anywhere; }
.topic-formula mark { color: #583009; background: #ffe1b5; border-radius: 3px; box-decoration-break: clone; }
.topic-fragments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.topic-fragments .topic-fragment { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; color: #435549; border: 1px solid #d3dbd2; border-radius: 8px; background: #fff; min-width: 0; }
.topic-fragments .topic-fragment[aria-pressed="true"] { color: #693a12; background: #fff1dc; border-color: #b5783f; box-shadow: inset 3px 0 #b5783f; }
.topic-fragment-formula, .topic-part-formula { font-family: "Cambria Math", Cambria, serif; overflow-wrap: anywhere; }
.topic-fragment-formula { font-size: 17px; }
.topic-part-formula { font-size: 21px; margin: 12px 0; }
.topic-fragment-panel { padding: 20px; border: 1px solid #d3dbd2; border-radius: 12px; background: #fcfcf9; }
.topic-detail, .topic-case { padding: 12px 0; border-top: 1px solid #e5d9cc; }
.topic-detail > summary, .topic-case > summary { cursor: pointer; font-size: 15px; font-weight: 600; color: #435549; }
.topic-source-text { margin: 12px 0 6px; padding-left: 14px; border-left: 2px solid #d1dacf; font-size: 16px; overflow-wrap: anywhere; white-space: pre-wrap; }
.topic-source-link { font-size: 12px; }
.topic-source-location { font-size: 11px; color: #65746b; overflow-wrap: anywhere; }
.topic-conditions { padding: 12px; border-left: 3px solid #b5783f; background: #fff5e8; font-size: 14px; overflow-wrap: anywhere; }
.topic-node-link, .topic-step-controls button { border: 1px solid #d3dbd2; border-radius: 6px; background: #fff; color: #435549; }
.topic-node-link { margin: 4px 6px 4px 0; }
.topic-step-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 20px; }
.topic-step-controls button:disabled { opacity: .45; cursor: default; }
.topic-development, .topic-general, .topic-numerical, .topic-layers { margin-top: 30px; }
.topic-gap { padding: 14px; background: #fff5e8; border: 1px dashed #b5783f; border-radius: 8px; font-size: 14px; }
.node-workspace:has(.topic-representation) .route { grid-template-columns: minmax(0, 1fr); }
.node-workspace:has(.topic-representation) .node-connections { display: none; }
.topic-representation { max-width: 950px; }
.topic-formula { font-family: inherit; padding: 12px 22px; }
.topic-formula-row { padding: 12px 0; border-bottom: 1px solid #e5d9cc; }
.topic-formula-row:last-child { border: 0; }
.topic-formula-label { display: block; font: 13px/1.5 system-ui, sans-serif; color: #65746b; margin-bottom: 10px; }
.topic-formula-parts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.topic-highlight { background: #ffe7bf; border-radius: 6px; outline: 5px solid #ffe7bf; }


.topic-fragments { display: flex; flex-wrap: wrap; }
.topic-fragments .topic-fragment { flex-direction: row; }
.topic-source-text { border: 0; padding: 0; margin: 12px 0; line-height: 1.9; max-width: 76ch; }
.topic-fragment-panel { padding: 24px; }
.topic-detail { margin-top: 8px; }
.topic-detail > a { font-size: 12px; }
.topic-descent h4 { font-size: 19px; margin: 26px 0 12px; }
.descent-controls { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(200px, 2fr); gap: 16px; margin: 20px 0; }
.descent-controls label { display: grid; gap: 7px; font-size: 13px; color: #65746b; }
.descent-controls select { width: 100%; min-width: 0; padding: 10px; font: inherit; color: #342d28; background: white; border: 1px solid #d3dbd2; border-radius: 6px; }
.topic-example-result { font-size: 14px; color: #435549; }
.descent-branch { margin: 12px 0; padding: 12px 14px; border: 1px solid #d3dbd2; border-radius: 8px; background: #fff; min-width: 0; }
.descent-branch > summary { cursor: pointer; font-size: 15px; line-height: 1.6; }
.descent-result { font-weight: 600; color: #713c10; }
.descent-path { margin: 12px 0; padding-left: 20px; }
.descent-path > li { padding: 14px 0 14px 12px; border-left: 2px solid #d3dbd2; list-style: none; margin-left: -12px; }
.descent-path .topic-math { font-size: 19px; }
.descent-arrow { display: block; color: #9d744f; }
.descent-node-link { border: 0; border-bottom: 1px dotted #9d744f; background: none; padding: 2px 0; font-size: 14px; color: #805022; }
.descent-node-card { margin-top: 10px; font-size: 14px; }
.descent-node-card h5 { margin: 12px 0 3px; font-size: 13px; color: #65746b; }
.descent-end-label { font-size: 13px; font-weight: 600; color: #386047; margin: 18px 0 4px; }
.descent-expand-all { margin: 12px 0; border: 1px solid #ba8659; border-radius: 6px; background: #fff5e8; color: #713c10; }
.topic-reference-links { display: flex; flex-wrap: wrap; gap: 12px 24px; border-top: 1px solid #e5d9cc; padding-top: 18px; margin-top: 30px; font-size: 13px; }
@media (max-width: 650px) { .descent-controls { grid-template-columns: 1fr; } .topic-fragment-panel { padding: 16px; } }
.topic-trace-scroll { overflow-x: auto; max-height: 380px; overflow-y: auto; border: 1px solid #e5d9cc; border-radius: 6px; }
.topic-trace-scroll table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }
.topic-trace-scroll caption { padding: 10px; text-align: left; color: #65746b; }
.topic-trace-scroll td, .topic-trace-scroll th { padding: 8px; border-bottom: 1px solid #e5d9cc; white-space: nowrap; }
.topic-trace-scroll th { background: #f5f3ed; position: sticky; top: 0; }
@media (max-width: 600px) {
  .topic-fragments { grid-template-columns: 1fr; }
  .topic-formula { font-size: 19px; padding: 14px; }
  .topic-fragment-panel { padding: 14px; }
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
a { color: #8e4314; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.info-details { color: var(--muted, #65746b); font-size: 12px; line-height: 1.5; }
.info-details > summary { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; list-style: none; }
.info-details > summary::-webkit-details-marker { display: none; }
.info-details > summary > span { display: inline-grid; place-items: center; width: 19px; height: 19px; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; font-weight: 700; font-style: normal; line-height: 1; }
.info-details > summary:hover { background: #fff5ec; color: #8e4314; }
.info-details > p { margin: 4px 0 8px; }
.control-help { flex: 0 0 22px; width: 22px; min-width: 22px; max-width: 100%; align-self: flex-start; color: #7b857e; }
.control-help > summary { width: 22px; height: 24px; }
.control-help > summary > span { width: auto; height: auto; border: 0; border-radius: 0; font-size: 12px; font-weight: 400; }
.control-help > summary:hover { color: #435549; background: #f5f6f3; }
.control-help-body { position: fixed; z-index: 1000; box-sizing: border-box; width: min(560px, calc(100vw - 24px)); max-height: min(600px, calc(100dvh - 24px)); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 18px 38px 18px 18px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf9; color: var(--ink); box-shadow: 0 8px 28px #342d2826; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.control-help .control-help-close { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; background: transparent; color: #7b857e; font-size: 19px; font-weight: 400; }
.control-help-body > p { margin: 0; }
.control-help-body > p + p { margin-top: 12px; }
.control-help > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.page-tabs { margin: 20px 0 0; gap: 20px; }
.page-tabs a { color: #758077; text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; font-size: 14px; }
.page-tabs a[aria-current="page"] { color: #8e4314; border-color: var(--accent); }
.graph-toolbar { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.graph-toolbar nav { margin: 0; }
.node-directory { position: relative; z-index: 10; }
.node-directory > summary { cursor: pointer; padding: 11px 16px; color: #8e4314; border: 1px solid #e5d9cc; border-radius: 8px; background: #fff; font-size: 14px; }
.directory-panel { position: absolute; right: 0; top: calc(100% + 8px); display: flex; flex-direction: column; width: 420px; max-width: calc(100vw - 24px); max-height: 65vh; overflow: hidden; background: #fff; border: 1px solid #e5d9cc; border-radius: 12px; box-shadow: 0 12px 32px #342d281a; }
.directory-panel.directory-above { top: auto; bottom: calc(100% + 8px); }
.directory-search { flex: none; padding: 16px 16px 12px; border-bottom: 1px solid #f0e7dd; }
.directory-panel label { display: block; font-size: 13px; margin-bottom: 8px; color: #65746b; }
#node-search { width: 100%; padding: 10px; border: 1px solid #cbbeb0; border-radius: 6px; font: inherit; }
.directory-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.directory-actions button { padding: 4px 0; border: 0; background: transparent; color: #8e4314; font-size: 12px; }
#node-tree { min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 4px 10px 12px; scrollbar-gutter: stable; }
.directory-group h3 { margin: 14px 8px 6px; color: #65746b; font-size: 12px; font-weight: 600; }
.directory-group ul { list-style: none; margin: 0; padding-left: 0; }
.directory-row { display: flex; align-items: flex-start; gap: 2px; padding-left: calc(var(--depth, 0) * 12px); min-width: 0; }
.directory-toggle, .directory-spacer { flex: 0 0 24px; width: 24px; }
.directory-toggle { margin-top: 5px; height: 28px; padding: 0; border: 0; border-radius: 5px; color: #a76a3d; background: transparent; font-size: 20px; line-height: 1; }
.directory-toggle:hover { background: #fff5ec; }
.directory-node { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 9px 8px; text-align: left; border: 0; border-radius: 6px; color: #342d28; background: transparent; font-size: 13px; line-height: 1.45; }
.directory-node > span { max-width: 100%; overflow-wrap: anywhere; font-weight: 500; }
.directory-node small { display: block; max-width: 100%; color: #997553; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.directory-node:hover { background: #faf6f1; }
.directory-panel button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.directory-node[aria-current="true"] { background: #fff5ec; box-shadow: inset 2px 0 var(--accent); }
.directory-group .empty { margin: 6px 8px; font-size: 12px; }
header, main { max-width: 1440px; margin: 0 auto; padding: 0 36px; }
header { padding-top: 40px; padding-bottom: 26px; }
.eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: #65746b; }
h1 { font-size: 30px; font-weight: 600; margin: 0; }
.intro { margin: 10px 0 0; color: #65746b; }
.study-entry-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 16px; }
.study-entry-controls .module-selector { order: -1; margin-top: 0; }
.all-nodes-button { display: inline-flex; align-items: center; gap: 10px; }
#all-nodes-count { font-size: 12px; color: #65746b; }
.node-picker { box-sizing: border-box; width: min(1160px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: 24px; border: 1px solid #e5d9cc; border-radius: 16px; background: #fffdf9; color: #342d28; overflow: auto; }
.node-picker:not([open]) { display: none; }
.node-picker[open] { display: flex; flex-direction: column; gap: 18px; }
.node-picker::backdrop { background: #172c2666; }
.node-picker-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.node-picker-header h2 { margin: 0; font-size: 25px; }
.node-picker-total { margin: 6px 0 0; font-size: 13px; color: #65746b; }
.node-picker-graphs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.node-picker-quantity { --picker-color: #d57b2d; }
.node-picker-quality { --picker-color: #4e9389; }
.node-picker-history { --picker-color: #7b81bf; }
.node-picker-hooks { --picker-color: #ba7b9e; }
.node-picker-graph { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; text-align: left; white-space: normal; padding: 14px; background: #fff; }
.node-picker-graph-name::before, .node-picker-kind::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--picker-color); }
.node-picker-graph-name { font-weight: 600; }
.node-picker-graph-count { color: #65746b; font-size: 13px; }
.node-picker-graph small { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; color: #65746b; }
.node-picker-graph[aria-pressed="true"] { background: #edf4ef; border-color: #6f9384; }
.node-picker-search-controls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr) auto; align-items: end; gap: 12px; }
.node-picker-search-controls label { display: grid; gap: 7px; min-width: 0; font-size: 13px; color: #65746b; }
.node-picker-search-controls input, .node-picker-search-controls select { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px 12px; color: #342d28; background: #fff; border: 1px solid #cbbeb0; border-radius: 8px; font: inherit; }
.node-picker-result-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.node-picker-result-bar button[aria-pressed="true"] { background: #edf4ef; border-color: #6f9384; }
.node-picker-status { margin: 0; color: #65746b; font-size: 13px; }
.node-picker-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 340px); gap: 24px; min-height: 180px; height: min(52dvh, 520px); }
.node-picker-results { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 12px; scrollbar-gutter: stable; }
.node-picker-group { margin-bottom: 20px; }
.node-picker-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid #e5d9cc; color: #52685a; font-size: 14px; }
.node-picker-group ul { list-style: none; margin: 0; padding: 0; }
.node-picker-node { display: grid; width: 100%; gap: 5px; padding: 12px; text-align: left; white-space: normal; background: transparent; border: 1px solid transparent; border-radius: 8px; }
.node-picker-node-name { overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; }
.node-picker-node small { color: #65746b; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.node-picker-node:hover { background: #f5f3ed; }
.node-picker-node[aria-pressed="true"] { background: #edf4ef; border-color: #bdcdc3; }
.node-picker-preview { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding-left: 22px; border-left: 1px solid #e5d9cc; }
.node-picker-preview-content { min-height: 0; overflow-y: auto; overflow-wrap: anywhere; overscroll-behavior: contain; padding-right: 8px; font-size: 14px; line-height: 1.7; }
.node-picker-preview h3 { margin: 8px 0; font-size: 21px; line-height: 1.4; }
.node-picker-preview h4 { margin: 18px 0 8px; font-size: 13px; color: #52685a; }
.node-picker-kind, .node-picker-topic { margin: 0 0 8px; font-size: 12px; color: #65746b; }
.node-picker-form { margin: 18px 0; max-width: 100%; overflow-x: auto; }
.node-picker-preview-actions { flex: 0 0 auto; margin-top: auto; padding-top: 18px; }
.node-picker-preview-actions button { width: 100%; white-space: normal; background: #375d52; border-color: #375d52; color: #fff; }
.node-picker-preview-actions button:hover:not(:disabled) { background: #29493f; border-color: #29493f; color: #fff; }
.node-picker-unavailable { font-size: 13px; color: #805631; line-height: 1.5; }
.node-picker-empty { font-size: 14px; color: #65746b; line-height: 1.7; }
@media (max-width: 700px) {
  .node-picker { padding: 16px; }
  .node-picker-graphs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .node-picker-search-controls { grid-template-columns: minmax(0, 1fr); }
  .node-picker-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .node-picker-results { max-height: 35dvh; min-height: 140px; padding-right: 4px; }
  .node-picker-preview { border-left: 0; border-top: 1px solid #e5d9cc; padding: 18px 0 0; max-height: 45dvh; }
  .node-picker-graph { padding: 10px; }
}
nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
/* Shared action metrics. Multiline labels grow without clipping their text. */
button, input[type="button"], input[type="submit"], .current-node-map {
  appearance: none; box-sizing: border-box; min-height: var(--control-height); min-width: 0; max-width: 100%;
  border: 1px solid var(--control-border); border-radius: 8px; padding: var(--control-padding);
  background: var(--control-bg); color: var(--control-ink); font: inherit; font-size: var(--control-font-size);
  font-weight: 500; line-height: var(--control-line-height); text-align: center; vertical-align: middle;
  white-space: normal; overflow-wrap: anywhere; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
nav button { border: 1px solid #d3dbd2; border-radius: 8px; background: transparent; color: #435549; }
nav button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #542609; }
nav button:disabled { color: #92978f; background: #efeeeb; border-color: #e1e1dd; cursor: default; }
nav button:disabled:hover { filter: none; }
button:hover { filter: none; }
/* Change foreground and background together, including component overrides. */
button:hover:not(:disabled), input[type="button"]:hover:not(:disabled), input[type="submit"]:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-line); color: var(--control-ink); }
button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled { opacity: .5; cursor: default; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.route { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(320px, 2fr) minmax(180px, 1fr); gap: 20px; align-items: start; padding-bottom: 36px; }
.neighbor, .current { border: 1px solid #dbe0d7; border-radius: 12px; padding: 24px; }
.neighbor { background: #f3efe9; }
.current { background: #fff; box-shadow: 0 4px 18px #25372b08; }
.neighbor h2 { font-size: 14px; font-weight: 600; margin: 0 0 20px; }
.current h2 { font-size: 24px; font-weight: 600; margin: 0 0 24px; }
.empty { color: #758077; font-size: 14px; line-height: 1.6; }
dl { margin: 0; }
.field { padding: 17px 0; border-top: 1px solid #e8ece5; }
.field-review-hint { margin: -10px 0 12px; }
.field dt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.field-review { display: inline-block; position: relative; font-size: 12px; font-weight: 500; }
.field-review-badge { display: inline-grid; place-items: center; min-width: 25px; height: 25px; padding: 0 5px; border: 1px solid #b88a59; border-radius: 50%; color: #794715; background: #fff2df; cursor: pointer; list-style: none; }
.field-review-badge::-webkit-details-marker { display: none; }
.field-review-needs-work .field-review-badge { color: #963c27; border-color: #d19a8d; background: #fff0eb; }
.field-review-reviewed .field-review-badge { color: #276742; border-color: #88b79c; background: #edf8ef; }
.field-review-actions { position: absolute; z-index: 5; top: calc(100% + 5px); left: 0; display: flex; flex-direction: column; gap: 3px; min-width: 175px; padding: 6px; background: white; border: 1px solid #dbe0d7; border-radius: 8px; box-shadow: 0 6px 18px #25372b18; }
.field-review-actions button { padding: 7px 9px; border: 0; border-radius: 5px; background: transparent; color: #342d28; text-align: left; font-size: 12px; }
.field-review-actions button:hover:not(:disabled) { background: #fff5ec; }
.field-review-actions button:disabled { opacity: .45; cursor: default; }
dt { color: #435549; font-size: 13px; font-weight: 600; }
dd { margin: 10px 0 0; font-size: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.node-link { display: block; width: 100%; border: 1px solid #edc8ac; background: white; color: var(--accent); border-radius: 6px; margin-top: 8px; text-align: left; }
.node-link[aria-pressed="true"] { background: #fff5ec; border-color: var(--accent); color: #8e4314; }
.node-source { margin-top: 18px; border-top: 2px solid var(--accent); padding-top: 18px; min-width: 0; }
.node-source h3 { margin: 0 0 12px; font-size: 14px; color: var(--accent); }
.node-source pre { margin: 0; padding: 16px; background: #fff5ec; border: 1px solid #f1d7c3; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.7; }
.node-source code { font-family: Consolas, "Courier New", monospace; }
.number-analysis { margin-bottom: 28px; padding: 24px; border: 1px solid #e5d9cc; border-radius: 12px; background: #fff; }
.number-analysis h2 { margin: 0 0 18px; font-size: 22px; }
.number-analysis form { max-width: 880px; }
.number-analysis label { display: block; margin-bottom: 8px; font-size: 14px; }
.number-analysis select, #group-input, #root-index { display: block; width: 100%; max-width: 400px; padding: 12px; margin-bottom: 18px; font: inherit; color: inherit; background: white; border: 1px solid #cbbeb0; border-radius: 8px; }
.number-analysis [hidden] { display: none; }
#group-input[hidden] { display: none; }
#group-controls, #root-controls { margin-top: 18px; }
.input-row { display: flex; gap: 10px; flex-wrap: wrap; }
.input-row input { min-width: 0; flex: 1 1 180px; max-width: 400px; padding: 12px; font: inherit; border: 1px solid #cbbeb0; border-radius: 8px; }
.number-analysis .input-row input { max-width: none; }
.input-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.input-row button { background: var(--accent); color: #542609; border: 0; border-radius: 8px; font-weight: 600; }
.input-examples { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 13px; color: #758077; }
.input-examples button { border: 1px solid #e8e1d9; background: #faf8f5; border-radius: 6px; color: #62584e; }
.input-examples .featured-example { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.number-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.number-actions button { border: 1px solid #e5d9cc; background: #fff; color: #62584e; border-radius: 8px; }
.number-actions button[aria-pressed="true"] { border-color: var(--accent); background: #fff5ec; color: #8e4314; }
.root-option { display: flex; align-items: center; gap: 20px; }
#root-index { width: 100px; margin-bottom: 0; }
#root-preview { font-size: 22px; color: #8e4314; overflow-wrap: anywhere; min-width: 0; }
#root-hint { margin-bottom: 0; }
#number-hint { margin-bottom: 0; }
.output-tools { display: flex; justify-content: flex-end; border-top: 1px solid #eee7df; margin-top: 24px; padding-top: 12px; }
#clear-output { border: 0; background: transparent; color: #8e4314; padding: 6px 0 6px 12px; font-size: 13px; }
#number-result > h3 { margin-top: 4px; }
.analysis-detail { margin-top: 14px; border-top: 1px solid #e8ece5; padding-top: 14px; }
.analysis-detail > summary { cursor: pointer; color: #8e4314; font-size: 14px; }
.sum-expression { padding: 16px; background: #fff5ec; border-radius: 8px; overflow-wrap: anywhere; line-height: 1.7; }
.analysis-error { color: #9e3315; }
#number-result { overflow-wrap: anywhere; }
.workflow-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.workflow-table th { text-align: left; color: #8e4314; }
.workflow-table th, .workflow-table td { padding: 10px 12px; border-bottom: 1px solid #eee7df; vertical-align: top; }
.workflow-table td:nth-child(2) { overflow-wrap: anywhere; }
.workflow-table td:last-child { font-variant-numeric: tabular-nums; }
.workflow-calculations > summary { font-weight: 600; }
.workflow-note { color: #68716a; font-size: 13px; line-height: 1.5; }
.workflow-calculation-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.workflow-calculation { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 11px 14px; border: 1px solid #ece7df; border-radius: 8px; background: #fffdfa; }
.workflow-calculation-kind { flex: 0 0 180px; color: #68716a; font-size: 12px; }
.workflow-calculation-formula { flex: 1 1 230px; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.workflow-calculation-count { color: #8e4314; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.workflow-zero-details { margin-top: 14px; }
.workflow-zero-details > summary { cursor: pointer; color: #62584e; font-size: 13px; }
.node-source summary { cursor: pointer; color: #8e4314; margin-bottom: 12px; }
.related-nodes { margin-top: 20px; border-top: 1px solid #e8ece5; padding-top: 16px; }
.related-nodes h3 { font-size: 15px; color: #8e4314; }
.related-nodes p { line-height: 1.6; }
.derivation-steps { padding-left: 24px; }
.derivation-steps li { padding: 8px 0 16px; }
.derivation-steps li::marker { color: #8e4314; font-weight: 600; }
.graph-validation { margin-bottom: 28px; padding: 20px 24px; background: #fff; border: 1px solid #e5d9cc; border-radius: 12px; }
.graph-validation > summary { cursor: pointer; color: #8e4314; font-weight: 600; }
#validate-graphs { margin-top: 18px; padding: 10px 16px; border: 1px solid var(--accent); border-radius: 8px; color: #8e4314; background: white; }
.validation-checks { padding-left: 22px; line-height: 1.8; }
.validation-error { color: #9e3315; }
.validation-warning { color: #8e4314; }
@media (max-width: 800px) {
  header, main { padding-left: 18px; padding-right: 18px; }
  .route { grid-template-columns: 1fr; gap: 12px; }
  .neighbor, .current { padding: 20px; }
  h1 { font-size: 26px; }
}

/* Three connected reading surfaces. Graph content remains in graph-data.js. */
:root { --accent: #f2994a; --accent-ink: #8e4314; --accent-soft: #fff5ec; --accent-line: #edc8ac; --ink: #342d28; --muted: #746b63; --line: #e9e0d7; --control-bg: #fffcf9; --control-border: #ddcfc1; --control-ink: #69492f; background: #f8f6f3; color: var(--ink); }
header, main { max-width: 1540px; }
header { padding-top: 30px; padding-bottom: 22px; }
h1 { letter-spacing: -.035em; font-size: 32px; }
.page-tabs { gap: 28px; margin-top: 24px; margin-bottom: 0; border-bottom: 1px solid var(--line); }
.page-tabs a { padding: 12px 1px; margin-bottom: -1px; font-weight: 600; }
.page-tabs a[aria-current="page"] { color: var(--accent-ink); border-color: var(--accent); }
.number-analysis { padding: 0; border: 0; background: transparent; }
.number-analysis > h2 { font-size: 17px; font-weight: 500; margin-bottom: 14px; }
.number-analysis form { max-width: none; }
.number-analysis .input-row input { background: #fff; padding: 14px 16px; font-size: 17px; border-color: #ccd3cb; }
.number-analysis .input-row button { background: var(--accent); color: #542609; }
.input-examples .featured-example { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.input-examples button { background: white; }
.more-examples { margin-top: 12px; font-size: 13px; color: var(--muted); }
.more-examples summary { cursor: pointer; }
.output-tools { margin-top: 18px; padding: 5px 0; border-color: var(--line); }
.reading-welcome { margin: 36px auto 80px; max-width: 680px; padding: 28px; text-align: center; color: var(--muted); line-height: 1.7; }
.reading-welcome > p:nth-child(2) { color: var(--ink); font-size: 25px; }
.reading-workspace { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 30px; align-items: start; padding-bottom: 64px; }
.reading-outline { position: sticky; top: 20px; min-width: 0; padding: 16px 0; }
.reading-outline h3 { font-size: 17px; margin: 0 0 10px; line-height: 1.4; font-weight: 600; }
.reading-progress { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0 0 18px; }
.reading-tree { max-height: 66vh; overflow: auto; padding-right: 10px; scrollbar-width: thin; }
.reading-outline-details > summary { cursor: pointer; color: var(--muted); font-size: 12px; padding-bottom: 12px; }
.outline-item { padding-left: calc(var(--level) * 10px); }
.outline-row { display: flex; gap: 3px; align-items: start; }
.outline-toggle, .outline-dot { width: 22px; flex: 0 0 22px; color: var(--muted); text-align: center; padding: 8px 0; border: 0; background: transparent; font-size: 14px; }
.outline-link { min-width: 0; text-align: left; padding: 9px 8px; border: 0; background: transparent; color: var(--muted); font-size: 12px; line-height: 1.5; border-radius: 5px; overflow-wrap: anywhere; }
.outline-link[aria-current="step"] { color: var(--accent-ink); background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); font-weight: 650; }
.reading-main { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px 38px; }
.reading-crumbs { gap: 5px; margin: 0 0 14px; color: var(--muted); font-size: 11px; align-items: baseline; }
.reading-crumbs:empty { display: none; }
.reader-text-button { color: var(--accent-ink); background: transparent; padding: 3px 0; border: 0; text-align: left; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; line-height: 1.5; }
.step-heading h2 { font-size: 28px; letter-spacing: -.025em; line-height: 1.25; margin: 0 0 18px; }
.step-heading h2:focus { outline: none; }
.step-heading .eyebrow { color: var(--accent-ink); margin-bottom: 10px; }
.step-purpose { line-height: 1.75; max-width: 76ch; font-size: 16px; color: #4f5d53; margin-bottom: 24px; }
.formula-label { font-size: 12px; color: var(--muted); margin: 22px 0 8px; }
.reader-formula { font-family: "Cambria Math", Cambria, Georgia, serif; font-size: 25px; line-height: 1.65; background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 18px 22px; overflow-wrap: anywhere; max-width: 100%; overflow-x: auto; }
.reader-formula math { font-size: inherit; margin: 0; text-align: left; }
.reading-original { color: var(--muted); margin-bottom: 24px; font-size: 12px; }
.reading-original summary { cursor: pointer; }
.reading-original .reader-formula { margin-top: 10px; font-size: 17px; padding: 10px 14px; background: transparent; }
.reader-muted { color: var(--muted); font-size: 13px; line-height: 1.7; }
.step-note { color: #586459; line-height: 1.7; font-size: 14px; border-left: 2px solid #ded8c9; padding-left: 14px; }
.reader-warning { color: #8a3d26; background: #fff1e6; padding: 13px 16px; border-radius: 6px; line-height: 1.6; }
.reader-complete { color: #2b593d; border-left: 3px solid #91b397; padding: 12px 16px; background: #f0f6ed; }
.step-navigation { display: flex; justify-content: space-between; gap: 12px; margin: 30px 0 22px; }
.reader-button { border: 1px solid var(--accent-line); border-radius: 7px; background: white; color: var(--accent-ink); }
.reader-primary { background: var(--accent); color: #542609; border-color: var(--accent); }
.reader-button:disabled { opacity: .45; cursor: default; }
.step-branches { border-top: 1px solid var(--line); padding-top: 4px; margin-bottom: 24px; }
.branch-link { display: block; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 12px 0; text-align: left; color: var(--accent-ink); font-size: 14px; }
.step-node-tools { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; padding-top: 16px; border-top: 1px solid var(--line); }
.step-node-tools a { color: var(--accent-ink); }
.step-fields, .reader-report { margin-top: 18px; font-size: 13px; }
.step-fields > summary, .reader-report > summary { cursor: pointer; color: var(--muted); padding: 7px 0; }
.reader-report { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 26px; }
.reader-report > div { margin-top: 20px; }
.visited-step { border-top: 1px solid var(--line); padding: 16px 0; }
.visited-step .reader-formula { font-size: 18px; margin-top: 10px; }
.reader-fields > div { margin: 16px 0; }
.reader-fields dd { font-size: 14px; line-height: 1.7; margin-top: 6px; }
.step-related { margin-top: 20px; border-left: 3px solid var(--graph-tint); padding-left: 15px; }
.related-quality { --graph-tint: #63968b; }
.related-history { --graph-tint: #8a8fbd; }
.related-hooks { --graph-tint: #b785a4; }
.step-related h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }
.step-related details { margin: 7px 0; line-height: 1.7; font-size: 14px; }
.step-related summary { cursor: pointer; }
.step-related a, .step-related .reader-text-button { display: block; margin: 8px 0; }
.reader-inputs { margin: 20px 0; }
.reader-inputs > div { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 4fr); align-items: baseline; border-bottom: 1px solid var(--line); padding: 8px 0; gap: 10px; }
.reader-inputs dd { margin: 0; }
.reader-inputs .reader-formula { background: transparent; border: 0; padding: 4px 0; font-size: 20px; }
.nodes-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 0 0 20px; font-size: 13px; }
.nodes-actions button { background: transparent; border: 0; color: var(--accent-ink); padding: 0; }
.node-workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; }
.node-workspace .route { min-width: 0; grid-template-columns: minmax(0, 1fr) 220px; }
.node-workspace .current { padding: 30px; border-color: var(--line); }
.current-node-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 24px; }
.current .current-node-heading h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.current-node-next { background: #edf4ef; border-color: #91b4a4; }
.current-node-next:disabled { opacity: .55; cursor: default; }
.next-node-dialog { box-sizing: border-box; width: min(760px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: clamp(16px, 3vw, 28px); overflow-y: auto; border: 1px solid #e5d9cc; border-radius: 16px; background: #fffdf9; color: #342d28; overflow-wrap: anywhere; }
.next-node-dialog::backdrop { background: #172c2666; }
.next-node-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.next-node-header h2 { margin: 0; font-size: 23px; }
.next-node-header button { flex-shrink: 0; }
.next-node-source { color: #52685a; }
.next-node-group { margin-top: 24px; }
.next-node-group h3 { font-size: 15px; }
.next-node-group ul { list-style: none; padding: 0; margin: 0; }
.next-node-group li { padding: 16px 0; border-top: 1px solid #e5d9cc; }
.next-node-choice { width: 100%; text-align: left; white-space: normal; }
.next-node-relation { font-size: 14px; line-height: 1.6; }
.next-node-relation p { margin: 8px 0 0; }
.current-node-map { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--accent-ink); text-decoration: none; }
.current-node-map:hover { border-color: var(--accent); background: #faf6f1; }
.current-node-map:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.node-connections { display: grid; gap: 16px; align-content: start; min-width: 0; }
.node-workspace .neighbor { min-width: 0; padding: 18px; background: #faf6f1; border-color: var(--line); }
.node-workspace .neighbor .node-link { color: var(--accent-ink); border-color: var(--accent-line); }
.node-workspace .linked-graph-neighbors { max-height: 68vh; overflow-y: auto; scrollbar-width: thin; }
.node-workspace .neighbor .related-nodes { margin: 0; border: 0; padding: 0; }
.node-workspace .neighbor h3 { font-size: 13px; margin: 0 0 14px; }
.node-workspace .neighbor-help { margin: -8px 0 14px; }
.node-workspace dd { font-size: 16px; line-height: 1.75; }
.connection-relation { font-size: 12px; color: var(--muted); margin: 5px 0 14px; }
.node-transition + .node-transition { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--line); }
.node-transition-direction { font-size: 11px; line-height: 1.5; color: var(--muted); margin: 7px 0; overflow-wrap: anywhere; }
.node-transition-form { font-family: "Cambria Math", Georgia, serif; font-size: 15px; line-height: 1.5; margin: 7px 0; overflow-wrap: anywhere; }
.node-context-preview { margin: 8px 0 14px; font-size: 13px; line-height: 1.6; }
.node-context-preview > summary { color: var(--accent-ink); cursor: pointer; }
.node-context-preview p { overflow-wrap: anywhere; }
.node-context-preview h4 { font-size: 12px; margin: 12px 0 6px; }
.graph-validation { border-color: var(--line); padding: 13px 18px; font-size: 13px; }
.graph-validation > summary { font-size: 12px; color: var(--muted); }
@media (max-width: 1050px) {
  .reading-workspace { grid-template-columns: 220px minmax(0, 1fr); gap: 18px; }
  .reading-main { padding: 25px; }
  .node-workspace { grid-template-columns: 240px minmax(0, 1fr); gap: 18px; }
  .node-workspace .route { grid-template-columns: 1fr; }
  .node-connections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .node-workspace .linked-graph-neighbors { grid-column: 1 / -1; max-height: none; }
}
@media (max-width: 760px) {
  header, main { padding-left: 16px; padding-right: 16px; }
  header { padding-top: 22px; }
  h1 { font-size: 28px; }
  .page-tabs { gap: 20px; }
  .page-tabs a { font-size: 12px; }
  .reading-workspace, .node-workspace { grid-template-columns: 1fr; }
  .reading-outline { position: static; }
  .reading-tree { max-height: 180px; }
  .reading-main { padding: 22px 18px; }
  .step-heading h2 { font-size: 24px; }
  .reader-formula { font-size: 20px; padding: 14px; }
  .step-purpose { font-size: 15px; }
  .node-workspace .current { padding: 24px 20px; }
  .node-workspace .route { grid-template-columns: 1fr; }
  .node-connections { grid-template-columns: 1fr; }

}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* The expression stays in place; each branch grows below its own source. */
.formula-workspace { padding: 28px 0 70px; }
.formula-board-heading { margin-bottom: 24px; }
.formula-board-heading h2 { font-size: 28px; margin: 0 0 10px; letter-spacing: -.025em; }
.formula-board-heading .eyebrow { color: var(--accent-ink); }
.formula-board-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.reader-quiet-button { border-color: transparent; background: transparent; color: var(--accent-ink); }
.reader-quiet-button:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.narration-ready { align-self: center; color: var(--muted); font-size: 12px; padding: 8px 10px; }
.collapse-all-top:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.formula-columns { display: grid; gap: 20px; align-items: start; }
.formula-columns.parallel { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 14px; }
.formula-equality { position: sticky; top: 0; align-self: start; text-align: center; font: 32px Cambria, serif; padding-top: 58px; color: var(--accent-ink); }
.formula-highlight { background: #ffe0bc; color: inherit; box-shadow: 0 2px 0 var(--accent); border-radius: 3px; }
.formula-branch { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: white; overflow: hidden; }
.formula-branch.is-open { border-color: var(--accent-line); }
.formula-columns > .formula-branch { overflow: visible; align-self: stretch; }
.formula-columns > .formula-branch > .branch-head { position: sticky; top: 0; z-index: 2; border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--line); }
.formula-branch.is-active > .branch-head { box-shadow: inset 4px 0 var(--accent); background: var(--accent-soft); }
.branch-head { display: block; width: 100%; text-align: left; background: white; color: var(--ink); border: 0; padding: 18px 20px; border-radius: 0; }
.branch-head:hover { background: #fffaf5; }
.branch-head:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.branch-caption { display: flex; justify-content: space-between; align-items: start; gap: 14px; color: var(--accent-ink); font-size: 13px; line-height: 1.5; }
.branch-toggle { font-size: 22px; line-height: 1; flex-shrink: 0; }
.branch-head .reader-formula { margin: 12px 0 0; padding: 12px 14px; font-size: 24px; pointer-events: none; }
.branch-body { padding: 0 20px 20px; }
.branch-body > .reader-formula { font-size: 21px; }
.branch-explanation { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--ink); max-width: 78ch; }
.branch-change { display: flex; align-items: center; gap: 12px; overflow-x: auto; background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 6px 12px; margin: 2px 0 12px; }
.branch-change .reader-formula { flex: 0 0 auto; background: transparent; border: 0; padding: 2px 0; font-size: 20px; }
.branch-change-arrow { color: var(--accent-ink); font-size: 18px; flex: 0 0 auto; }
.context-source-fields { max-height: 240px; overflow: auto; margin: 10px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 7px; background: #faf8f5; }
.context-source-fields > div + div { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.context-source-fields dt { font-weight: 600; }
.context-source-fields dd { margin: 3px 0 0; line-height: 1.5; }
.branch-connection { color: var(--accent-ink); font-size: 12px; line-height: 1.6; margin: 16px 0 12px; }
.branch-children { border-left: 2px solid var(--accent-line); padding-left: 12px; display: grid; gap: 12px; }
.branch-children .branch-head { padding: 12px; }
.branch-children .branch-body { padding: 0 12px 14px; }
.branch-children .reader-formula { font-size: 19px; padding: 10px; }
.branch-children .branch-children .branch-children { padding-left: 5px; }
.branch-children .branch-children .branch-children .branch-body { padding-left: 6px; padding-right: 6px; }
.branch-next { margin-top: 14px; width: 100%; text-align: left; background: var(--accent-soft); }
.branch-context { margin-top: 16px; font-size: 12px; line-height: 1.6; }
.branch-context > summary { color: var(--accent-ink); cursor: pointer; }
.formula-condition { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 22px; }
.formula-condition > .eyebrow { color: var(--muted); }
.formula-condition > .formula-branch { max-width: 920px; }
.formula-checks { display: grid; gap: 14px; margin-top: 28px; }
.formula-checks h3 { font-size: 17px; font-weight: 500; }
@media (max-width: 760px) {
  .formula-columns.parallel { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .formula-equality { position: static; padding: 0; }
  .formula-board-heading h2 { font-size: 24px; }
  .branch-head { padding: 14px; }
  .branch-body { padding: 0 10px 14px; }
  .branch-head .reader-formula { font-size: 21px; }
  .branch-children { padding-left: 6px; }
  .branch-change { gap: 8px; padding: 5px 9px; }
  .branch-change .reader-formula { font-size: 18px; }
}

/* Topic composition is independent from the four graph tabs. */
.reading-trail { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; margin: 14px 0 22px; }
.reading-trail button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); cursor: pointer; }
.reading-trail button:disabled { opacity: .45; cursor: default; }
.reading-trail-label { display: grid; gap: 5px; flex: 1 1 200px; min-width: 0; color: var(--muted); font-size: 12px; }
.reading-trail select { box-sizing: border-box; width: 100%; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font: inherit; }
.reading-trail :focus-visible, .reading-context summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.reading-context { min-width: 0; margin: 14px 0; }
.reading-context > summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); overflow-wrap: anywhere; }
.reading-context .node-transition { padding: 10px 0; border-bottom: 1px solid var(--line); }
.reading-context .node-transition p, .reading-context dd { overflow-wrap: anywhere; white-space: pre-wrap; }
.reading-context .reader-fields { font-size: 13px; }
.reading-context .node-context-preview { max-width: 100%; }
.context-application { border-left: 3px solid var(--accent); padding-left: 12px; }
.directory-node .directory-match { white-space: normal; overflow: visible; color: var(--muted); }
.scene-neighbors .node-link { width: 100%; text-align: left; }
.scene-inspector .reading-trail-label { flex-basis: 100%; order: -1; }
.scene-inspector #scene-return-analysis { display: inline-block; margin-bottom: 18px; }
.scene-inspector #scene-return-analysis[hidden] { display: none; }
.formula-branch:focus { outline: 3px solid var(--accent-line); outline-offset: 2px; }
.module-selector { margin-top: 16px; max-width: 850px; border: 1px solid #ded5cc; border-radius: 12px; background: #fffdf9; }
.module-selector > summary { padding: 10px 14px; cursor: pointer; color: #4e6055; font-size: .9rem; }
.module-selector:not([open]) { width: fit-content; max-width: 100%; }
.module-selector > summary { white-space: nowrap; }
.module-options { padding: 0 14px 12px; }
.module-options > label { display: flex; align-items: center; gap: 9px; margin: 10px 0; flex-wrap: wrap; }
.module-options input[type="checkbox"] { width: 18px; height: 18px; accent-color: #ed9141; }
.module-options small, .module-options > p { color: #6c756c; font-size: .85rem; }
.module-presets { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.module-presets button, .module-notice button, .module-missing button { border: 1px solid #d5dcd4; border-radius: 9px; background: #fff; color: #4e6055; cursor: pointer; }
.module-notice button + button { margin-left: 8px; }
.module-missing { padding: 12px 16px; background: #fff1de; border: 1px solid #efc995; border-radius: 12px; margin-bottom: 16px; }
.module-learning { display: inline-block; margin: 6px 0 10px; font-size: 14px; }
.module-options .module-filter { display: grid; gap: 6px; margin: 12px 0; font-size: 13px; color: #65746b; }
.module-filter input { width: 100%; padding: 10px 12px; border: 1px solid #cbbeb0; border-radius: 7px; font: inherit; background: white; }
.module-topic-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0 20px; max-height: 330px; overflow: auto; padding: 2px 8px 8px 0; border-block: 1px solid #e8ece5; overscroll-behavior: contain; }
.module-topic-list .module-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-content: start; align-items: start; gap: 5px 9px; margin: 0; padding: 12px 0; border-bottom: 1px solid #f0ece5; font-size: 13px; line-height: 1.5; }
.module-item input { margin: 2px 0 0; }
.module-item small { grid-column: 2; }
.graph-rich-text { line-height: 1.75; white-space: normal; overflow-wrap: break-word; }


.graph-rich-formula { background: #faf8f5; border: 1px solid #ece4da; border-radius: 8px; padding: 14px 16px; max-width: 100%; overflow-x: auto; }

.node-workspace .field > dd { font-size: 16px; line-height: 1.75; max-width: 78ch; }
.node-workspace .field > dt { color: #65746b; font-weight: 500; }
.node-workspace .node-source { border-top-width: 1px; border-top-color: #e5d9cc; }
.learning-main { max-width: 900px; padding-bottom: 70px; }
.learning-main .learning-step { margin: 22px 0; padding: 22px 26px; background: white; border: 1px solid #e5d9cc; border-radius: 12px; }
.learning-step h2 { font-size: 20px; margin: 0 0 14px; }
.learning-step p, .learning-step li { font-size: 16px; line-height: 1.75; }
.learning-step code { background: #f7f2eb; padding: 3px 6px; border-radius: 4px; overflow-wrap: anywhere; }
.learning-step details { padding-top: 8px; }
.learning-step summary { cursor: pointer; color: #8e4314; }
.learning-math { font-family: "Cambria Math", math; padding: 12px 0; overflow-x: auto; font-size: 20px; }
.learning-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; }
@media (max-width: 760px) { .module-selector { max-width: 100%; } .learning-main .learning-step { padding: 18px; } .graph-rich-formula { padding: 12px; } }
/* The assembled path is primary; numerical applications remain optional. */
.construction-path { margin: 1.5rem 0; }
.construction-trail { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0; }
.construction-trail button { text-align: left; }
.construction-trail [aria-current="step"] { background: #fff1dd; border-color: #b97434; }
.construction-steps { padding-left: 1.4rem; }
.construction-steps > li { padding-left: .35rem; margin: .65rem 0; }
.construction-step { border: 1px solid #d9e2dc; border-radius: 10px; padding: .9rem 1rem; background: #fff; }
.construction-step > summary { cursor: pointer; line-height: 1.8; font-weight: 600; }
.construction-kind { display: inline-block; font-size: .75rem; margin-right: .65rem; padding: .05rem .45rem; border-radius: 4px; background: #eef3ef; font-weight: normal; }
.construction-step p, .construction-fields p { line-height: 1.7; margin: .6rem 0 1rem; }
.construction-fields h5, .construction-notation h5 { margin: 1rem 0 .25rem; font-size: .9rem; color: #385c53; }
.construction-needs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; border-top: 1px solid #e4e8e4; padding: 1rem 0; }
.construction-needs button { text-align: left; }
.construction-limit { padding: 1rem; background: #faf5ed; line-height: 1.65; border-radius: 8px; }
.topic-fragment-role { max-width: 75ch; line-height: 1.65; color: #526963; }
.topic-descent > summary { cursor: pointer; font-weight: 600; padding: 1rem 0; }
.descent-node-inline { margin: .7rem 0; }
.descent-node-inline > summary { cursor: pointer; }
.node-construction { max-width: 100%; }
.route:has(.node-construction) { grid-template-columns: minmax(0, 1fr); }
.route:has(.node-construction) .node-connections { display: none; }
.construction-layers { border-top: 1px solid #e2e7e2; margin: 1rem 0; padding: .75rem 0; }
.construction-layer-entry { margin: .6rem 0 .6rem .7rem; border-left: 2px solid #d5dfd9; padding: .4rem .85rem; }
.construction-layer-entry > summary, .construction-layers > summary, .construction-example > summary { cursor: pointer; line-height: 1.7; }
.construction-example { margin-top: 1.5rem; padding: 1rem; border: 1px solid #dce2dc; border-radius: 10px; }
.construction-example form { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; margin: 1rem 0; }
.construction-example label { flex: 1 1 20rem; }
.construction-example input { display: block; width: 100%; box-sizing: border-box; margin-top: .4rem; padding: .7rem; }
.construction-numeric-step { padding: .75rem; border-left: 2px solid #dce5df; margin: .65rem 0; }
.construction-numeric-step > summary { cursor: pointer; }

/* Shared rendering contract for every reading surface and native MathML. */
.route > *, .reading-workspace > *, .node-workspace > *, .scene-layout > *,
.formula-columns > *, .formula-row > *,
.construction-path, .construction-steps, .construction-steps > li,
.construction-step, .construction-fields, .construction-layers,
.construction-layer-entry, .reader-fields, .reader-fields > div,
.reading-context, .node-context-preview, .node-transition {
  min-width: 0; max-width: 100%; box-sizing: border-box;
}
.formula-surface, .topic-math, .reader-formula, .graph-rich-formula, .learning-math {
  box-sizing: border-box; min-width: 0; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  line-height: 1.75; padding-block: .65em;
}
.topic-math { font-size: 20px; padding-inline: 2px; }
.topic-math.graph-rich-formula { background: transparent; border: 0; border-radius: 0; }
.graph-text-clause { max-width: 100%; }
.graph-clauses > .graph-text-clause { display: block; overflow-x: auto; padding-block: .15em; scrollbar-width: thin; }
.graph-clauses > .graph-text-clause + .graph-text-clause { margin-top: .5em; }
.math-expression { display: inline-block; max-width: 100%; overflow-x: auto; vertical-align: middle; padding-block: .15em; scrollbar-width: thin; }
.graph-rich-text math, .formula-surface math, .learning-math math {
  font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", math;
  font-size: 1em; line-height: normal; white-space: nowrap; text-align: left;
}
.graph-rich-text mtext, .formula-surface mtext { font-style: normal; white-space: pre; }
.math-literal { white-space: pre-wrap; overflow-wrap: anywhere; }
.node-construction > label, .construction-example label { display: grid; gap: .4rem; min-width: 0; max-width: 100%; }
.node-construction > label { margin-bottom: 1rem; }
.node-construction select { box-sizing: border-box; width: 100%; max-width: 40rem; min-width: 0; padding: .65rem .75rem; font: inherit; color: inherit; background: #fff; border: 1px solid #ccd3cb; border-radius: 7px; }
.construction-trail button, .construction-needs button { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.construction-layer-entry h5 { font-size: .9rem; line-height: 1.4; margin: 1.25rem 0 .35rem; }
.construction-layer-entry p, .reader-fields dd { font-size: 1rem; line-height: 1.8; }
.construction-layer-entry > summary, .construction-step > summary { overflow-wrap: break-word; }
.construction-layers, .construction-layer-entry { clear: both; }
.workflow-table { display: block; max-width: 100%; overflow-x: auto; }

/* Shared action variants: components keep their layout, not a separate button skin. */
:is(.input-examples, .number-actions, .module-presets, .module-notice, .module-missing,
    .construction-needs, .construction-trail, .topic-step-controls, .reading-trail,
    .overview-actions, .overview-branches, .overview-trail, .scene-controls, .scene-focus-toolbar,
    .scene-step-actions, .scene-neighbors) button,
.topic-fragments .topic-fragment, .reader-button, .node-link, .topic-node-link,
.descent-expand-all, .current-node-map {
  border: 1px solid var(--control-border); border-radius: 8px;
  background: var(--control-bg); color: var(--control-ink); box-shadow: none;
}
:is(.input-examples, .number-actions, .module-presets, .module-notice, .module-missing,
    .construction-needs, .construction-trail, .topic-step-controls, .reading-trail,
    .overview-actions, .overview-branches, .overview-trail, .scene-controls, .scene-focus-toolbar,
    .scene-step-actions, .scene-neighbors) button:hover:not(:disabled),
.topic-fragments .topic-fragment:hover:not(:disabled), .reader-button:hover:not(:disabled),
.node-link:hover:not(:disabled), .current-node-map:hover {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--control-ink);
}
.input-row button, .construction-example button[type="submit"], .reader-button.reader-primary {
  border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: #542609;
  font-weight: 600;
}
.input-row button:hover:not(:disabled), .construction-example button[type="submit"]:hover:not(:disabled), .reader-button.reader-primary:hover:not(:disabled) {
  border-color: #cf762d; background: #f6ab69; color: #542609;
}
.construction-trail button[aria-current="step"], .number-actions button[aria-pressed="true"],
.topic-fragments .topic-fragment[aria-pressed="true"], .node-link[aria-pressed="true"] {
  border-color: #bd7b41; background: #fff0de; color: #743f13; box-shadow: inset 0 0 0 1px #bd7b4130;
}
.directory-toggle, .outline-toggle, .reader-text-button, .nodes-actions button { min-height: 0; }
.construction-example input { border: 1px solid var(--control-border); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; line-height: 1.5; }
.construction-example input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }

/* Concept, construction and numerical application are independent reading modes. */
.node-workspace { display: block; }
.node-workspace .route { display: block; }
.node-workspace .node-connections { display: none; }
.study-tab-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin: 18px 0 24px; }
.study-tabs { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
.study-tabs button[aria-selected="true"] { background: #fff0de; border-color: #bd7b41; color: #743f13; box-shadow: inset 0 -2px #bd7b41; }
.study-panel[hidden] { display: none; }
.concept-card { max-width: 84ch; line-height: 1.8; }
.concept-card > section { margin-top: 25px; }
.concept-card h3 { font-size: 16px; margin: 0 0 7px; color: #385c53; }
.concept-card p { margin: 0; }
.card-development { width: 100%; max-width: 950px; min-width: 0; margin: 0 auto; }
.card-transition-trail { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 0 0 18px; }
.card-transition-trail > .control-help { margin-top: 6px; }
.card-transition-trail [aria-current="location"] { background: #edf4ef; border-color: #6f9384; }
.card-transition-controls { margin-bottom: 22px; }
.card-transition-choice + .card-transition-choice { margin-top: 16px; }
.card-transition-choice { display: grid; gap: 8px; min-width: 0; }
.card-transition-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.connection-review-status { font-size: 14px; color: #655844; }
.connection-development-review h4 { margin: 16px 0 4px; }
.connection-development-review p { margin: 4px 0 12px; }
.connection-development-review a { display: block; margin: 8px 0; overflow-wrap: anywhere; }
.card-transition-bridge[data-connection-kind="development"] { background: #f1f6f2; }
.card-transition-bridge:not([data-connection-kind="development"]) { border-left-style: dashed; }
.card-transition-controls label { display: grid; gap: 8px; color: #52685a; font-size: 14px; }
.card-transition-controls select { box-sizing: border-box; min-width: 0; width: 100%; padding: 10px 12px; background: #fff; color: #342d28; border: 1px solid #cbd8cf; border-radius: 8px; font: inherit; }
.card-transition-pair { min-width: 0; }
.card-transition-pair > .concept-card { box-sizing: border-box; max-width: none; padding: 24px; border: 1px solid #e5d9cc; border-radius: 12px; background: #fffdf9; }
.card-development .card-node-heading { max-width: none; margin: 0 0 18px; padding: 0; }
.card-development .card-node-title { margin: 4px 0 12px; font-size: 22px; line-height: 1.4; color: #342d28; }
.card-node-kind { font-size: 13px; color: #65746b; }
.card-node-links { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13px; }
.card-field-linked { padding: 14px 16px; border-left: 3px solid #375d52; background: #edf4ef; }
.card-development .card-field-connection { margin-top: 12px; font-size: 13px; color: #375d52; font-weight: 600; }
.card-other-fields { margin: 22px 0 0; }
.card-other-fields > summary { color: #65746b; cursor: pointer; }
.card-other-fields > section { margin-top: 20px; }
.card-transition-bridge { position: relative; margin-left: 25px; border-left: 2px solid #6f9384; padding: 20px 24px; line-height: 1.7; overflow-wrap: anywhere; }
.card-transition-bridge::before { content: ""; position: absolute; left: -5px; top: 29px; width: 8px; height: 8px; background: #375d52; border-radius: 50%; }
.card-transition-title { font-weight: 600; margin: 0; }
.card-transition-kind, .card-transition-fields { font-size: 13px; color: #52685a; margin: 6px 0; }
.card-transition-continue { margin-top: 18px; }
.card-transition-continue:disabled { opacity: .5; cursor: default; }
@media (max-width: 600px) {
  .card-transition-pair > .concept-card { padding: 16px; }
  .card-field-linked { padding: 12px; }
  .card-transition-bridge { margin-left: 16px; padding: 16px; }
}
.study-numeric .construction-example { margin-top: 0; }
.construction-inspect { margin: 8px 0 14px; }
.node-overview { box-sizing: border-box; width: min(1340px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 22px; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: auto; }
.node-overview:not([open]) { display: none; }
.node-overview::backdrop { background: #172c2666; }
.overview-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.current .overview-header h2 { margin: 0; font-size: 23px; }
.overview-trail { margin: 18px 0; gap: 6px; }

.overview-trail [aria-current="location"] { border-color: #bd7b41; background: #fff0de; }
.overview-layout { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
.overview-scheme { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #faf8f5; max-height: calc(100dvh - 220px); overflow: auto; }
.overview-center { width: 100%; background: #fff0de; border-color: #bd7b41; font-weight: 600; }
.overview-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 22px 0 16px; padding-top: 16px; border-top: 2px solid var(--accent-line); position: relative; }
.overview-branches::before { content: ""; position: absolute; width: 2px; height: 22px; background: var(--accent-line); top: -22px; left: 50%; }

.overview-branches button[aria-pressed="true"], .overview-neighbor-node[aria-pressed="true"] { border-color: #bd7b41; background: #fff0de; }
.overview-neighbor { padding: 12px 0; border-top: 1px solid var(--line); }
.overview-neighbor-node { display: block; width: 100%; text-align: left; }
.overview-edge { display: block; width: 100%; margin-top: 6px; border: 0; background: transparent; font-size: 12px; line-height: 1.6; text-align: left; color: var(--accent-ink); }
.overview-edge[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 2px 0 #bd7b41; }
.overview-reader { min-width: 0; padding: 4px 6px; }
.overview-reader > h3 { font-size: 23px; line-height: 1.45; margin: 0 0 16px; }
.overview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.overview-reader .concept-card { max-width: none; }
@media (max-width: 850px) {
  .overview-layout { grid-template-columns: minmax(0, 1fr); }
  .overview-scheme { max-height: 35dvh; }
  .node-overview { padding: 16px; }
}
@media (max-width: 760px) {
  .construction-steps { padding-left: .9rem; }
  .construction-step { padding: .8rem; }
  .construction-layer-entry { margin-left: 0; padding-left: .65rem; padding-right: 0; }
  .topic-math { font-size: 1.05rem; }
}

/* Action rows align independently of multiline labels and taller inputs. */
nav, .input-row, .number-actions, .module-presets, .topic-fragments,
.topic-step-controls, .step-navigation, .formula-board-controls, .construction-trail,
.construction-needs { align-items: center; }
.overview-branches { align-items: start; }

/* Fixed-size content actions stay beside the heading at every width. */
.content-actions { display: inline-flex; flex: 0 0 auto; gap: 6px; vertical-align: middle; margin-left: auto; }
.construction-step > summary .content-actions { float: right; margin: 0 0 4px 12px; }
.construction-step > summary { min-height: 32px; }
.content-field-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.content-actions .content-icon-button { display: inline-grid; place-items: center; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 6px; border: 1px solid var(--control-border); border-radius: 7px; line-height: 1; vertical-align: middle; }
.content-icon-button svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.content-action-panel { clear: both; margin: 12px 0; padding: 16px; border: 1px solid var(--accent-line); border-radius: 9px; background: var(--accent-soft); font-size: 15px; line-height: 1.7; min-width: 0; }
.content-action-panel h4 { margin: 0 0 12px; }
.content-action-panel label { display: grid; gap: 8px; }
.content-action-panel textarea { box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: 150px; resize: vertical; padding: 12px; border: 1px solid var(--control-border); border-radius: 7px; background: white; color: var(--ink); font: inherit; line-height: 1.6; }
.content-action-panel textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.content-editor-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reader-fields dt, .scene-inspector dt { display: flex; align-items: center; gap: 12px; }
.content-author-note { display: block; color: var(--muted); }

/* One search and one selected node; the map is a contextual action. */
.node-search { margin: 0 0 26px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 12px; background: #fff; min-width: 0; }
.node-search h2 { font-size: 18px; margin: 0 0 14px; }
.node-search .input-row { display: flex; gap: 10px; }
.node-search .input-row input { min-width: 0; flex: 1; }
.node-search-examples { margin: 12px 0; }
.node-search-examples > summary { color: var(--muted); font-size: 14px; cursor: pointer; }
.node-search #number-hint { font-size: 13px; margin-bottom: 0; }
.study-direction { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 16px; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 10px; background: #faf8f5; }
.study-direction > span { margin-right: 12px; color: var(--muted); font-size: 14px; }
.study-direction button[aria-pressed="true"] { background: #385c53; color: #fff; border-color: #385c53; }
.study-direction[hidden], [data-screen][hidden] { display: none; }
.expression-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 20px; }
.expression-heading h2 { margin: 0; margin-right: auto; }
.map-return { margin-top: 16px; }
@media (max-width: 600px) {
  .node-search { padding: 16px; }
  .node-search .input-row { flex-wrap: wrap; }
  .node-search .input-row input { flex-basis: 100%; width: 100%; }
  .study-direction { padding: 10px; }
  .study-direction > span { flex-basis: 100%; }
}