.scene-main { padding-bottom: 28px; }
.scene-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.scene-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 11px; font-size: 13px; color: #65746b; }
.scene-focus-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; margin: 12px 0; border: 1px solid #e5d9cc; border-radius: 10px; background: #fffdf9; color: #514a42; font-size: 13px; }
.scene-focus-toolbar label { display: inline-flex; align-items: center; gap: 6px; }
.scene-focus-toolbar select { border: 1px solid var(--control-border); border-radius: 8px; padding: 8px 10px; background: var(--control-bg); color: var(--ink); font: inherit; }
.scene-focus-toolbar button:disabled, .scene-focus-toolbar input:disabled { opacity: .55; cursor: default; }
.scene-focus-toolbar input[type="range"] { width: min(180px, 28vw); accent-color: #355d7d; }
.scene-focus-toolbar input[type="checkbox"] { accent-color: #355d7d; }
#scene-density-value { min-width: 46px; color: #355d7d; font-weight: 600; }
.legend-item { display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 7px 9px; border: 1px solid transparent; border-radius: 7px; }
.legend-item:hover { background: #fff; border-color: #e5d9cc; }
.legend-item input { width: 15px; height: 15px; margin: 0; accent-color: var(--graph-color); cursor: inherit; }
.legend-item:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.legend-item[data-visible="false"] { opacity: .6; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--graph-color); }
.legend-empty { opacity: .55; cursor: default; }
.scene-stage { position: relative; min-width: 0; border: 1px solid #e5d9cc; border-radius: 14px; background: radial-gradient(ellipse at 50% 45%, #fff 20%, #f7f2eb 100%); overflow: hidden; }
#graph-canvas { display: block; width: 100%; height: clamp(360px, 65vh, 660px); touch-action: none; cursor: grab; }
#graph-canvas:active { cursor: grabbing; }
#graph-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.scene-transition-panel { position: absolute; z-index: 3; box-sizing: border-box; width: min(430px, calc(100% - 24px)); max-height: 460px; overflow-y: auto; overscroll-behavior: contain; padding: 18px; border: 1px solid #bdcdc3; border-radius: 12px; background: #fffdf9; box-shadow: 0 8px 30px #233b3026; color: #342d28; font-size: 14px; line-height: 1.65; }
.scene-transition-panel[hidden] { display: none; }
.scene-transition-close { position: sticky; top: 0; float: right; margin: 0 0 8px 8px; background: #fffdf9; }
.scene-transition-panel h3, .scene-transition-directory h3 { font-size: 17px; line-height: 1.45; margin: 8px 0 14px; overflow-wrap: anywhere; }
.scene-transition-layers, .scene-transition-note { font-size: 12px; color: #65746b; margin: 8px 0; }
.scene-transition-relation { margin: 12px 0; }
.scene-transition-node { margin-top: 16px; padding-left: 12px; border-left: 2px solid #bdcdc3; }
.scene-transition-field { margin: 12px 0; overflow-wrap: anywhere; }
.scene-transition-field h4 { font-size: 12px; color: #52685a; margin: 0 0 4px; }
.scene-transition-node-link { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.scene-transition-directory { margin: 20px 0; font-size: 14px; line-height: 1.65; }
.scene-transition-directory summary { cursor: pointer; overflow-wrap: anywhere; }
.scene-transition-directory details { margin: 14px 0; }
.scene-transition-directory .scene-transition-field { font-size: 14px; }
.scene-step-panel { position: absolute; right: 16px; bottom: 66px; z-index: 1; width: min(320px, calc(100% - 32px)); box-sizing: border-box; padding: 14px 16px; border: 1px solid #c7d5df; border-radius: 11px; background: #fffffff5; box-shadow: 0 8px 28px #23394a26; color: #293d4c; }
.scene-step-panel[hidden] { display: none; }
.scene-step-count { margin: 0 0 8px; color: #355d7d; font-size: 12px; font-weight: 700; }
.scene-step-transition { margin: 0 0 12px; font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.scene-step-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.scene-step-actions button:disabled { opacity: .45; cursor: default; }
.scene-step-note { margin: 10px 0 0; color: #667781; font-size: 11px; line-height: 1.4; }
.scene-controls { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; z-index: 1; }
.scene-label-toggle { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 7px; border-radius: 7px; background: #fffffff2; color: #65746b; font-size: 12px; cursor: pointer; }
.scene-label-toggle input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
#scene-zoom { min-width: 42px; text-align: center; font-size: 12px; color: #65746b; }
.scene-help { padding: 4px 18px 8px; }
#scene-help { margin: 2px 0 4px; line-height: 1.6; }
.scene-keyboard { font-size: 12px; color: #758077; padding: 0 18px 14px; }
.scene-keyboard summary { cursor: pointer; }
.scene-keyboard p { line-height: 1.6; }
.scene-inspector { min-width: 0; max-width: 100%; background: #fff; border: 1px solid #e5d9cc; border-radius: 12px; padding: 22px; }
.scene-inspector h2 { margin: 0 0 20px; font-size: 22px; }
.scene-inspector dd { font-size: 14px; line-height: 1.7; }
.scene-inspector .field { padding: 14px 0; }
.open-reader-node { display: block; margin-top: 16px; font-size: 14px; text-decoration: none; }
.scene-neighbors { border-top: 1px solid #e8ece5; margin-top: 20px; padding-top: 12px; }
.scene-neighbors h3 { font-size: 13px; color: #65746b; }
.scene-neighbors button { display: block; width: 100%; text-align: left; margin: 6px 0; }
.scene-footer { font-size: 12px; }
@media (max-width: 1000px) {
  .scene-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .scene-step-panel { bottom: 60px; right: 10px; width: min(320px, calc(100% - 20px)); padding: 10px 12px; }
  .scene-step-transition { font-size: 14px; }
}

/* The map is the workspace; cards stay over the scene. */
.graph-workspace { margin: 0; padding: 0; }
.graph-workspace > header { max-width: none; margin: 0; padding: 18px 24px 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.graph-workspace > header > .eyebrow, .graph-workspace .map-return { display: none; }
.graph-workspace > header h1 { font-size: 25px; margin: 0; }
.graph-workspace > header .intro { font-size: 13px; margin: 0; }
.graph-workspace .module-selector { margin: 0 0 0 auto; position: relative; z-index: 8; }
.graph-workspace .module-options { position: absolute; right: 0; top: 100%; width: min(640px, calc(100vw - 48px)); max-height: 70vh; overflow-y: auto; background: #fffdf9; padding: 16px; border: 1px solid #d6d9ce; box-shadow: 0 16px 48px #263c2826; border-radius: 12px; }
.graph-workspace .scene-main { max-width: none; margin: 0; padding: 0 20px 12px; }
.graph-workspace .graph-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.graph-workspace .scene-legend { gap: 4px; padding: 0; }
.graph-workspace .legend-item { background: #fff; border-color: #e1ddd3; }
.graph-workspace .legend-item[data-visible="true"] { box-shadow: inset 0 -3px var(--graph-color); }
.graph-workspace .scene-focus-toolbar { margin: 8px 0; padding: 7px 12px; }
.graph-workspace .scene-layout { display: block; }
.graph-workspace #graph-canvas { height: max(410px, calc(100dvh - 260px)); }
.graph-workspace .scene-stage { background: radial-gradient(ellipse at 45% 40%, #fff 10%, #eff2ee 75%, #e7ede7); }
.graph-workspace .scene-controls { gap: 5px; pointer-events: none; }
.graph-workspace .scene-controls > * { pointer-events: auto; }
.graph-workspace .scene-controls button, .graph-workspace .scene-controls select { background: #fffffff2; font-size: 12px; min-height: 32px; padding: 6px 9px; }
.graph-workspace .scene-controls label { font-size: 12px; }
.graph-workspace [hidden] { display: none !important; }
.scene-label-layer { position: absolute; inset: 0; pointer-events: none; }
.scene-node-label { position: absolute; display: block; pointer-events: auto; box-sizing: border-box; padding: 5px 9px; min-width: 0; min-height: 0; height: auto; border: 1px solid #dce3d8; border-left: 3px solid var(--graph-color, #dce3d8); border-radius: 6px; background: #fffffff2; font: 12px/1.4 system-ui; color: #3c4b3e; white-space: normal; word-break: normal; overflow-wrap: break-word; overflow: visible; text-align: left; box-shadow: 0 2px 8px #1c37280c; touch-action: none; cursor: grab; }
.scene-label-measure { visibility: hidden; pointer-events: none; left: 0; top: 0; width: max-content; }
.scene-node-label[aria-pressed="true"] { font-weight: 700; border-color: var(--graph-color); box-shadow: 0 2px 12px #263c2820; }
.scene-node-label:active { cursor: grabbing; }
.scene-node-label:focus-visible, .scene-sticker-badge:focus-visible { outline: 3px solid #325f77; outline-offset: 2px; }
.scene-sticker-badge { position: absolute; pointer-events: auto; padding: 2px 5px; min-height: 24px; font-size: 11px; background: #fff1ad; border-color: #c3ab59; border-radius: 3px 3px 8px 3px; }
.scene-preview { position: absolute; z-index: 5; width: min(420px, calc(100% - 24px)); max-height: min(580px, calc(100% - 76px)); display: flex; flex-direction: column; border: 1px solid #bdcdc3; border-radius: 13px; background: #fffffc; box-shadow: 0 12px 50px #18352529; overflow: hidden; }
#scene-preview-body { overflow-y: auto; overscroll-behavior: contain; padding: 6px 20px 16px; font-size: 14px; line-height: 1.7; }
#scene-preview-body h2 { font-size: 20px; margin: 4px 0 18px; }
#scene-preview-body h3 { color: #5b7160; font-size: 12px; margin: 16px 0 6px; }
.scene-preview-tools { padding: 8px 12px; display: flex; justify-content: space-between; gap: 8px; background: #f4f6f1; flex-shrink: 0; }
.scene-preview-tools button { font-size: 12px; }
.scene-card-dialog, .scene-expression-dialog { padding: 0; border: 1px solid #bccbbb; border-radius: 16px; width: min(1100px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; color: #342d28; background: #fffdf9; box-shadow: 0 28px 120px #152b3a40; }
.scene-card-dialog::backdrop, .scene-expression-dialog::backdrop, .scene-sticker-dialog::backdrop { background: #243b394a; backdrop-filter: blur(3px); }
.scene-card-toolbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid #e0e6dc; background: #f8faf6; }
#scene-card-close, #scene-expression-close { margin-left: auto; }
.scene-card-dialog .scene-inspector { border: 0; padding: 24px clamp(16px, 4vw, 52px); background: transparent; }
.scene-card-dialog .scene-inspector dd { font-size: 16px; line-height: 1.8; }
.scene-card-dialog .scene-inspector h2 { font-size: 29px; }
.scene-card-dialog .scene-inspector .field { padding: 20px 0; }
.scene-card-dialog .reading-trail { margin-bottom: 20px; }
.scene-full-study { padding: 20px 0; border-top: 1px solid #d5ded0; scroll-margin-top: 80px; }
.scene-card-dialog .scene-transition-directory { scroll-margin-top: 80px; }
.scene-full-study > summary { font-size: 18px; font-weight: 600; cursor: pointer; }
.scene-selection-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; background: #fffdf9; border: 1px solid #e1e5dc; border-radius: 10px; padding: 10px 14px; margin-top: 8px; font-size: 13px; }
#scene-selected-name { max-width: 38vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-right: auto; }
#scene-route-neighbors { display: flex; gap: 8px; }
#scene-route-neighbors details { position: relative; }
#scene-route-neighbors details[open] { position: fixed; z-index: 7; bottom: 90px; right: 24px; width: min(380px, calc(100vw - 48px)); max-height: 55vh; overflow: auto; padding: 16px; border: 1px solid #bacbb9; border-radius: 10px; background: white; box-shadow: 0 8px 40px #243b3930; }
#scene-route-neighbors button { display: block; width: 100%; text-align: left; margin: 8px 0; }
#scene-route-neighbors summary { cursor: pointer; padding: 8px; }
.workspace-settings { margin: 10px 0; font-size: 12px; color: #65746b; }
.workspace-settings summary { cursor: pointer; }
.workspace-settings button, .workspace-settings input { font-size: 12px; }
#workspace-status:empty { display: none; }
#workspace-status { color: #854714; font-size: 13px; }
.scene-sticker-dialog { width: min(480px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); overflow-y: auto; border: 1px solid #c3b67b; border-radius: 8px 8px 24px 8px; padding: 24px; background: #fff9dc; color: #4e4733; }
.scene-sticker-dialog textarea { display: block; box-sizing: border-box; width: 100%; margin: 8px 0 16px; padding: 12px; font: 16px/1.6 system-ui; border: 1px solid #d4c999; border-radius: 6px; resize: vertical; }
.sticker-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#sticker-save-status { font-size: 12px; }
.workspace-note { display: block; padding: 16px; margin: 10px 0; border: 1px solid #cbbf87; border-radius: 4px 4px 14px 4px; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; width: 100%; font: 15px/1.65 system-ui; }
.note-yellow { background: #fff4bd; }.note-green { background: #e2efcf; }.note-blue { background: #deedf5; }.note-pink { background: #f9e2e6; }
.scene-expression-dialog { width: min(1250px, calc(100vw - 32px)); height: calc(100dvh - 32px); }
#scene-expression-frame { display: block; width: 100%; height: calc(100% - 68px); border: 0; }
@media (max-width: 650px) {
  .graph-workspace > header { padding: 10px 12px 6px; }
  .graph-workspace > header .intro { display: none; }
  .graph-workspace .scene-main { padding: 0 8px 8px; }
  .graph-workspace .scene-controls { top: 8px; left: 8px; right: 8px; }
  .graph-workspace #graph-canvas { height: 65dvh; min-height: 430px; }
  .scene-card-dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
  #scene-selected-name { max-width: 80vw; width: 100%; }
  .scene-focus-toolbar { font-size: 12px; }
  .scene-card-toolbar { padding: 8px; gap: 6px; }
  .scene-card-toolbar button { font-size: 12px; }
}

/* Reading comes first; the spatial map remains one switch away. */
.graph-workspace { background: #f5f6f3; color: #243b34; }
.graph-workspace > header { padding: 22px 28px 16px; }
.graph-workspace > header h1 { font-size: 20px; letter-spacing: -.5px; }
.graph-workspace > header .intro { color: #67766d; }
.graph-workspace .scene-main { padding: 0 24px 20px; }
.graph-workspace .graph-toolbar { gap: 12px; padding: 0 0 14px; }
.graph-workspace button:focus-visible, .graph-workspace summary:focus-visible { outline: 3px solid #568d83; outline-offset: 3px; }
.workspace-search { flex: 1; max-width: 430px; text-align: left; padding: 13px 18px; background: white; border: 1px solid #d6ded7; border-radius: 10px; color: #50645a; }
.workspace-view-switch { display: flex; gap: 3px; padding: 4px; border-radius: 10px; background: #e7ece6; }
.workspace-view-switch button { border: 0; border-radius: 7px; background: transparent; padding: 9px 17px; font-size: 13px; }
.workspace-view-switch button[aria-pressed="true"] { background: #fff; color: #254e40; box-shadow: 0 1px 4px #223c211a; font-weight: 700; }
.workspace-popover { position: relative; z-index: 9; font-size: 13px; }
.workspace-popover > summary { padding: 12px 10px; cursor: pointer; }
.workspace-popover-body { position: absolute; top: calc(100% + 6px); right: 0; box-sizing: border-box; width: min(390px, calc(100vw - 40px)); max-height: 75dvh; overflow: auto; padding: 20px; border: 1px solid #d6ded7; border-radius: 14px; background: #fff; box-shadow: 0 12px 45px #203c2420; }
.workspace-popover-body p { margin: 0 0 12px; line-height: 1.6; }
.workspace-popover-body .scene-legend { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
.workspace-popover-body .node-directory { margin: 14px 0; }
.workspace-popover-body .directory-panel { position: static; width: auto; max-height: 40vh; overflow: auto; }
.workspace-popover-body .scene-focus-toolbar { display: grid; padding: 14px 0; border: 0; border-top: 1px solid #e2e8df; border-bottom: 1px solid #e2e8df; border-radius: 0; background: transparent; }
.workspace-label-settings { display: grid; gap: 12px; padding-top: 12px; }
.workspace-orientation { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.workspace-orientation > button { font-size: 12px; background: transparent; border-color: #d6ded7; }
#scene-route-trail { flex: 1; min-width: 0; }
#scene-route-trail.reading-trail { margin: 0; padding: 0; border: 0; background: none; gap: 6px; flex-wrap: nowrap; align-items: center; }
#scene-route-trail .reading-trail-label { flex: 0 1 320px; font-size: 10px; }
#scene-route-trail select { max-width: min(32vw, 320px); font-size: 12px; }
#scene-route-trail button { font-size: 12px; padding: 7px 10px; background: white; }
.graph-workspace .scene-stage { min-height: 580px; border: 1px solid #d6dfd5; border-radius: 18px; background: #fcfdfb; }
.scene-route { box-sizing: border-box; min-height: 580px; height: max(580px, calc(100dvh - 235px)); overflow: auto; padding: 26px; }
.scene-stage[data-reader="true"] .scene-route { margin-right: 360px; }
.route-heading { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 18px; }
.route-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #698272; margin: 0 0 7px; }
.route-heading h2 { font-size: 23px; line-height: 1.3; letter-spacing: -.4px; margin: 0; overflow-wrap: anywhere; }
.route-heading > button { font-size: 11px; padding: 7px 10px; flex-shrink: 0; background: transparent; border-color: #dce4d9; }
.route-layers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 20px; border-bottom: 1px solid #e7ece4; margin-bottom: 24px; }
.route-layers > span { font-size: 11px; color: #738176; margin-right: 5px; }
.route-layers button { font-size: 11px; padding: 5px 9px; min-height: 30px; border-radius: 20px; border: 1px solid #e0e6dc; background: transparent; color: #778177; }
.route-layers button[aria-pressed="true"] { background: #eaf0e6; border-color: #cbd9c5; color: #345943; }
.route-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.route-column { min-width: 0; }
.route-column h3 { font-size: 12px; margin: 0; color: #355743; }
.route-column h3 span { margin-left: 5px; font-size: 10px; color: #7c8c7a; }
.route-column-caption { font-size: 11px; margin: 5px 0 20px; color: #7c897e; }
.route-center { position: sticky; top: 0; }
.route-node { display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; width: 100%; min-height: 116px; padding: 16px 14px; text-align: left; border: 1px solid #dce4d8; border-top: 3px solid var(--graph-color, #aec1ad); border-radius: 11px; background: #fff; color: #294332; box-shadow: 0 2px 4px #20382004; cursor: pointer; transition: border-color .16s, box-shadow .16s; }
.route-node:hover:not(:disabled) { background: #f4f8ee; color: #294332; border-color: #8caa90; box-shadow: 0 5px 16px #234b2612; }
.route-node-layer { color: #7c897b; font-size: 10px; margin-bottom: 9px; }
.route-node-name { font-size: 14px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.route-node-form { display: block; overflow: auto; max-width: 100%; margin-top: 12px; font-size: 13px; line-height: 1.6; }
.route-node-form p { margin: 0; }
.route-node-form .katex-display { margin: .25em 0; }
.route-node-action { display: block; margin-top: 16px; font-size: 10px; color: #71846b; }
.route-current { background: #edf3e9; border-color: #91ae80; box-shadow: 0 5px 20px #27431b0a; }
.route-current .route-node-name { font-size: 17px; }
.route-current .route-node-form { font-size: 15px; }
.route-note-count { font-size: 10px; color: #866e25; margin-top: 10px; }
.route-guidance, .route-empty { font-size: 12px; color: #7b8879; line-height: 1.7; margin: 16px 0; }
.route-branch { position: relative; margin-bottom: 18px; }
.route-edge-group { padding-top: 6px; }
.route-edge { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 0; border: 0; background: transparent; text-align: left; color: #5f7b66; }
.route-edge:hover { background: #eef3ea; }
.route-edge-dot { display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; flex-shrink: 0; border: 1px solid #9bb297; border-radius: 50%; color: #3e6947; background: #f5f8f1; font-size: 24px; }
.route-edge-label { font-size: 10px; line-height: 1.45; }
.route-edge::after { content: '→'; font-size: 16px; margin-left: auto; }
.route-branch::after { content: '→'; position: absolute; right: -19px; top: 46px; font-size: 18px; color: #92ab8b; }
.route-branch-after::after { right: auto; left: -19px; }
.route-more, .route-hidden-links { font-size: 11px; line-height: 1.6; width: 100%; padding: 10px; background: #f2f6ee; border: 1px dashed #c5d4bd; color: #587349; border-radius: 8px; text-align: left; margin-bottom: 10px; }
.route-hidden-links { background: transparent; }
.route-footnote { margin: 28px 0 0; padding-top: 14px; border-top: 1px solid #e7ece4; color: #8a9588; font-size: 11px; line-height: 1.6; }
.graph-workspace .scene-preview, .graph-workspace .scene-transition-panel { left: auto; right: 12px; top: 12px; width: 336px; max-height: calc(100% - 24px); border: 1px solid #d0ddc9; border-radius: 12px; box-shadow: 0 5px 22px #2540230d; background: #fff; }
.graph-workspace .scene-preview { height: calc(100% - 24px); }
.graph-workspace .scene-transition-panel { box-sizing: border-box; overflow: auto; padding-top: 36px; }
.scene-preview-tools { background: #f5f8f1; padding: 12px; }
.scene-preview-tools > span { font-size: 11px; color: #6e8267; align-self: center; }
#scene-preview-body { padding: 10px 20px 20px; font-size: 14px; line-height: 1.8; flex: 1; }
#scene-preview-body > p:first-child { color: #788a70; font-size: 11px; }
#scene-preview-body h2 { font-size: 21px; }
#scene-preview-body section { border-top: 1px solid #edf1e9; margin-top: 18px; }
#scene-preview-full { background: #345b3f; color: #fff; border-color: #345b3f; width: 100%; padding: 10px; }
body[data-graph-view="route"] #graph-canvas { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
body[data-graph-view="route"] .scene-controls,
body[data-graph-view="route"] .scene-label-layer,
body[data-graph-view="route"] .scene-step-panel,
body[data-graph-view="route"] .scene-help,
body[data-graph-view="route"] .scene-keyboard,
body[data-graph-view="route"] .scene-selection-bar,
body[data-graph-view="route"] #scene-count { display: none; }
body[data-graph-view="3d"] .scene-route { display: none; }
.graph-workspace .scene-controls { right: auto; max-width: calc(100% - 32px); }
.scene-stage[data-reader="true"] .scene-controls { max-width: calc(100% - 380px); }
.graph-workspace .workspace-settings { margin: 12px 4px 0; }
@media (min-width: 1101px) {
  .route-columns { animation: route-arrive .18s ease-out; }
  @keyframes route-arrive { from { opacity: .6; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 1100px) {
  .scene-stage[data-reader="true"] .scene-route { margin-right: 0; }
  .scene-route { height: auto; min-height: 450px; }
  .graph-workspace .scene-preview, .graph-workspace .scene-transition-panel { position: relative; top: auto; right: auto; margin: 12px; width: calc(100% - 24px); max-height: 540px; height: auto; }
  .scene-stage[data-reader="true"] .scene-controls { max-width: calc(100% - 32px); }
  #scene-preview-body { max-height: 420px; }
}
@media (max-width: 650px) {
  .graph-workspace > header { padding: 16px 14px 10px; }
  .graph-workspace .scene-main { padding: 0 10px 12px; }
  .graph-workspace .graph-toolbar { gap: 6px; }
  .workspace-search { flex-basis: 100%; max-width: none; }
  .workspace-view-switch { margin-right: auto; }
  .workspace-popover { position: static; }
  .workspace-popover-body { top: 150px; right: 12px; }
  .workspace-orientation { gap: 6px; }
  #scene-route-trail { flex-basis: 100%; }
  #scene-route-trail select { max-width: 50vw; }
  .scene-route { padding: 20px 14px; }
  .route-heading { align-items: flex-start; flex-direction: column; }
  .route-heading h2 { font-size: 21px; }
  .route-columns { grid-template-columns: 1fr; gap: 24px; }
  .route-center { position: static; grid-row: 1; }
  .route-column-caption { margin-bottom: 12px; }
  .route-branch::after { display: none; }
  .route-node { min-height: 0; }
  .route-guidance { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .route-columns { animation: none; } .route-node { transition: none; } }

/* Keep orientation, the formula and the act of navigating distinct. */
.route-study-anchor { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 11px 14px; margin: 0 0 12px; background: #edf2e8; border-left: 3px solid #8ca77e; border-radius: 3px 9px 9px 3px; color: #617457; font-size: 12px; }
.route-center { top: 85px; }
.route-study-anchor > span { flex: 1; min-width: 140px; }
.route-study-anchor strong { color: #3c5c30; font-weight: 600; }
.route-study-anchor button { padding: 5px 9px; min-height: 30px; font-size: 11px; background: #fff; border-color: #cedac5; }
.route-arrival-return { background: none; padding: 4px 0; min-height: 26px; margin: 0 0 12px; border: 0; color: #6f8068; font-size: 11px; text-align: left; }
.route-layers { margin-bottom: 10px; padding-bottom: 12px; }
.route-filter-panel { margin-bottom: 22px; }
.route-filter-panel > summary { cursor: pointer; font-size: 12px; color: #617457; padding: 6px 0; }
.route-link-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 10px 0 4px; }
.route-link-filters label { display: grid; gap: 6px; font-size: 10px; color: #71846b; min-width: 0; }
.route-link-filters .route-search-label { flex: 1; min-width: 170px; }
.route-link-filters select, .route-link-filters input { box-sizing: border-box; max-width: 100%; width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid #d8e2d1; background: white; font: 12px system-ui; color: #3d5733; }
.route-link-filters button { font-size: 11px; padding: 8px; }
.route-card { border: 1px solid #dce4d8; border-top: 3px solid var(--graph-color, #aec1ad); border-radius: 11px; background: white; box-shadow: 0 2px 4px #20382004; overflow: hidden; }
.route-card-current { background: #edf3e9; border-color: #91ae80; box-shadow: 0 5px 20px #27431b0a; }
.route-card > .route-node { border: 0; border-radius: 0; background: transparent; box-shadow: none; min-height: 0; padding: 13px 14px 10px; }
.route-card > .route-node:hover:not(:disabled) { background: #e5eddc; box-shadow: none; }
.route-card > .route-node:focus-visible { outline-offset: -3px; }
.route-card > .route-node-form { margin: 0 12px; padding: 10px 0; border-top: 1px solid #e8eee3; max-height: 165px; overflow: auto; overscroll-behavior: contain; }
.route-card-current > .route-node-form { max-height: 245px; font-size: 15px; }
.route-node-action { margin-top: 9px; }
.route-arrival-mark { margin-top: 7px; color: #517687; font-size: 10px; }
.route-read-formula { padding: 6px 10px; min-height: 30px; font-size: 11px; border: 0; background: transparent; color: #56784a; text-align: left; }
.route-card > .route-read-formula { display: block; width: calc(100% - 12px); margin: 2px 6px 7px; }
.route-reading-key { margin-top: 24px; padding-top: 12px; border-top: 1px solid #e7ece4; color: #71816b; font-size: 11px; line-height: 1.7; }
.route-reading-key > summary { cursor: pointer; }
.scene-reading-jumps { position: sticky; top: 0; display: flex; gap: 6px; margin: 0 0 14px; padding: 8px 0; background: #fff; z-index: 2; }
.scene-reading-jumps button { font-size: 11px; min-height: 30px; padding: 6px 10px; background: #f3f6ee; border-color: #e1e8da; color: #59704a; }
#scene-preview-body > section { scroll-margin-top: 48px; }
.scene-compare-open { font-size: 11px; background: #edf3e7; color: #53703f; border-color: #d8e4ce; padding: 8px 12px; }
.scene-form-comparison { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 20px 0; }
.scene-form-comparison .scene-transition-node { min-width: 0; border: 1px solid #dce6d4; border-radius: 10px; padding: 16px; margin: 0; background: #fafcf7; }
.scene-form-comparison h4 { font-size: 16px; margin: 6px 0 12px; line-height: 1.5; }
.scene-form-comparison .scene-transition-node-link { display: block; width: 100%; text-align: left; margin-top: 12px; padding: 8px; font-size: 12px; }
.scene-form-comparison .route-node-form { font-size: 16px; }
.scene-comparison-note { font-size: 12px; line-height: 1.7; color: #6c7e62; }
.scene-compare-dialog, .route-formula-dialog { box-sizing: border-box; padding: 0; width: min(1080px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); border: 1px solid #bbcdb0; border-radius: 16px; background: #fcfdfb; color: #294332; overflow: auto; overscroll-behavior: contain; box-shadow: 0 20px 80px #243c2429; }
.scene-compare-dialog::backdrop, .route-formula-dialog::backdrop { background: #23392f66; backdrop-filter: blur(3px); }
.scene-compare-dialog > header, .route-formula-dialog > header { position: sticky; top: 0; display: flex; align-items: center; gap: 12px; max-width: none; margin: 0; padding: 20px 26px; background: #f1f6eb; border-bottom: 1px solid #dce7d2; z-index: 3; }
.scene-compare-dialog h2, .route-formula-dialog h2 { font-size: 20px; line-height: 1.4; margin: 0; }
.scene-compare-dialog > header > button, .route-formula-close { margin-left: auto; flex-shrink: 0; font-size: 12px; padding: 8px 12px; }
#scene-compare-body { padding: 8px 28px 28px; }
.scene-compare-dialog .scene-form-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.scene-compare-dialog .scene-transition-field { padding: 15px 0; line-height: 1.8; border-top: 1px solid #e0e8d8; }
.scene-compare-dialog .connection-review-status { padding: 12px 16px; background: #edf3e6; border-radius: 8px; color: #4c663d; line-height: 1.7; }
.route-formula-dialog > header { flex-wrap: wrap; }
.route-formula-dialog > header > .route-eyebrow { flex-basis: 100%; margin: 0; }
.route-formula-navigation, .route-formula-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 26px; }
.route-formula-navigation button, .route-formula-actions button { font-size: 12px; padding: 8px 12px; }
.route-formula-navigation output { font-size: 12px; color: #5b704d; margin: 0 auto; }
.route-formula-navigation select { flex-basis: 100%; width: 100%; min-width: 0; padding: 8px; border: 1px solid #cddcbe; border-radius: 8px; background: white; color: #526c41; font: 12px system-ui; }
.route-formula-page { margin: 14px 26px; padding: 30px 22px; min-height: 80px; border: 1px solid #d7e3cc; border-radius: 12px; background: white; overflow: auto; overscroll-behavior: contain; }
.route-formula-page > .math-expression { display: block; min-width: min-content; }
.route-formula-hint { color: #6d7f62; font-size: 12px; line-height: 1.7; margin: 14px 26px; }
.route-formula-context { margin: 18px 26px 26px; border-top: 1px solid #dce6d3; padding-top: 18px; font-size: 14px; line-height: 1.8; }
.route-formula-context > summary { cursor: pointer; color: #587248; }
.route-formula-field { margin-top: 14px; }
.route-formula-status { margin: 8px 26px; color: #526c41; font-size: 12px; }
.route-formula-status:empty { display: none; }
.route-formula-dialog > textarea { box-sizing: border-box; width: calc(100% - 52px); min-height: 85px; margin: 10px 26px; padding: 12px; font: 13px/1.7 monospace; }
@media (max-width: 650px) {
  .scene-compare-dialog .scene-form-comparison { grid-template-columns: 1fr; }
  .scene-compare-dialog > header, .route-formula-dialog > header { padding: 14px; align-items: flex-start; }
  .scene-compare-dialog > header { flex-direction: column; }
  #scene-compare-body { padding: 8px 14px 18px; }
  .route-formula-navigation, .route-formula-actions, .route-formula-page, .route-formula-context { margin-left: 14px; margin-right: 14px; }
  .route-formula-page { padding: 20px 12px; }
  .route-study-anchor { align-items: flex-start; }
}

/* The learning order and source roles remain available beside the map. */
.learning-panel{border:1px solid #d9d4c9;border-radius:12px;background:#fffdf9;margin:12px 0;padding:12px 16px}
.learning-panel>summary{cursor:pointer;font-weight:650}.learning-panel form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}.learning-panel input[type=search]{flex:1;min-width:220px;padding:9px}.learning-panel button{margin:3px;padding:6px 10px}.learning-panel h3{margin-bottom:8px}.learning-steps{max-height:46vh;overflow:auto;padding-left:28px}.learning-steps>li{padding:8px 0;border-top:1px solid #e8e3da}.learning-steps label{display:inline-flex;gap:6px;align-items:center;font-size:.85rem;margin-left:12px}.learning-steps small{margin-left:10px;color:#375d52}.learning-steps details{margin:6px 10px}.learning-panel p{max-width:85ch}.learning-panel [role=status]{color:#375d52}@media(max-width:650px){.learning-panel form{display:block}.learning-panel input[type=search]{width:100%;min-width:0;margin:8px 0}.learning-steps{max-height:40vh}}