/* Product surface. Anatomy colors and the learning/touch contracts stay in styles.css. */
:root {
  --ink: #202b3b;
  --bg: #f3f5f8;
  --surface: #fff;
  --surface-soft: #f8f9fb;
  --line: #dce1e8;
  --muted: #626d7c;
  --accent: #245da8;
  --shadow: 0 12px 40px rgba(30, 46, 70, .06);
  --ui-motion-fast: 140ms;
  --ui-motion-content: 160ms;
  --ui-motion-surface: 220ms;
  --ui-motion-ease: cubic-bezier(.2,.7,.2,1);
}
body { color: var(--ink); background: var(--bg); }
button, input, select { font: inherit; }
button { transition: color var(--ui-motion-fast) ease, background-color var(--ui-motion-fast) ease, border-color var(--ui-motion-fast) ease, box-shadow var(--ui-motion-fast) ease; }
input, select { transition: border-color var(--ui-motion-fast) ease, box-shadow var(--ui-motion-fast) ease, background-color var(--ui-motion-fast) ease; }
input:focus-visible, select:focus-visible { border-color: #79a5dc; }
.feedback { transition: color var(--ui-motion-fast) ease; }
button:not(:disabled):hover { border-color: #b1bdcf; }
button:not(:disabled):active { filter: brightness(.97); }
button:focus-visible, select:focus-visible, input:focus-visible, [tabindex="0"]:focus-visible {
  outline: 3px solid #79a5dc;
  outline-offset: 3px;
}
.topbar { gap: 16px; align-items: center; }
.brand { flex: 1; min-width: 0; }
.brand h1 { font-size: clamp(18px, 1.65vw, 24px); line-height: 1.17; letter-spacing: -.025em; }
.brand h1 .brand-author { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.mode-switch { flex-shrink: 0; padding: 4px; border: 1px solid var(--line); background: #e9edf3; border-radius: 12px; }
.mode-switch button { min-height: 38px; border-radius: 8px; font-weight: 650; color: #536176; }
.mode-switch button.active { color: var(--accent); background: #fff; box-shadow: 0 2px 6px #253d5b12; }
.ui-motion-track { position: relative; isolation: isolate; }
.ui-motion-track > button { position: relative; z-index: 1; }
.ui-selection-indicator { position: absolute; top: 0; left: 0; pointer-events: none; border-radius: 8px; background: #fff; box-shadow: 0 2px 6px #253d5b12; }
.ui-motion-ready > .ui-selection-indicator { transition: transform var(--ui-motion-surface) var(--ui-motion-ease), width var(--ui-motion-surface) var(--ui-motion-ease), height var(--ui-motion-surface) var(--ui-motion-ease); }
.mode-switch.ui-motion-track > button.active,
.reference-tabs.ui-motion-track > button[aria-selected="true"] { background: transparent; box-shadow: none; }
.viewer-wrap { border: 1px solid #d4dae3; border-radius: 20px; background: #e7e9ed; box-shadow: var(--shadow); }
.webgl-status { z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.webgl-status button { min-height: 44px; padding: 10px 16px; }
.viewer-tools button, .viewer-tools select { min-height: 38px; background: rgba(255,255,255,.94); border-color: #ccd4df; box-shadow: 0 2px 5px #233e5b08; color: var(--ink); }
.viewer-hint { background: rgba(255,255,255,.9); color: #536176; }
.display-panel, .display-panel-head { background: #fafbfd; }

.display-panel h3, .display-panel strong { color: var(--ink); }
.panel { padding: 22px; background: var(--surface-soft); scrollbar-width: thin; scrollbar-color: #c1cad7 transparent; }
.question-card { padding: 20px; border-color: var(--line); border-radius: 18px; box-shadow: 0 4px 22px #26395006; }
.question-card h2 { margin-top: 6px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.14; color: var(--ink); }
.question-card .feedback { line-height: 1.55; color: var(--muted); }
.question-card .feedback.correct { color: #1b7149; }
.question-card .feedback.wrong { color: #922d3e; }
.question-card .feedback.navigation { color: #765315; }
.scope-controls { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.learning-field > span, .search-field > span { font-size: 12px; color: #536176; font-weight: 650; }
.learning-field select, .search-field input { min-height: 44px; padding: 10px 12px; border: 1px solid #cbd3de; border-radius: 10px; color: var(--ink); background: #fff; font-size: 14px; }
.scope-isolation { color: #536176; line-height: 1.45; }
.explore-controls { margin: 16px 0 20px; gap: 8px; }
.search-field { position: relative; }
.search-field input { width: 100%; box-sizing: border-box; }
.search-field input::placeholder { color: #798596; }
.search-results { max-height: 280px; overflow-y: auto; }
.search-results button { padding: 10px 12px; border-radius: 9px; font-size: 13px; }
.selected-structure-actions { gap: 7px; margin: 14px 0; }
.selected-structure-actions button { min-height: 40px; border-radius: 9px; font-size: 12px; }
.structure-reference { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.structure-reference-head strong { color: #536176; font-size: 12px; font-weight: 650; }
.structure-reference-head span { font-size: 14px; color: var(--muted); line-height: 1.4; }
.structure-reference-grid { gap: 8px; margin: 14px 0; }
.structure-reference-grid > div { padding: 8px 9px; background: #f5f7fa; border-radius: 8px; }
.structure-reference-grid dt { font-size: 10px; color: #667486; text-transform: none; letter-spacing: 0; }
.structure-reference-grid dd { font-size: 12px; line-height: 1.4; color: var(--ink); }
.structure-reference-context { font-size: 13px; line-height: 1.5; color: #536176; }
.structure-reference-badges > span { color: #596a7e; background: #f1f5fa; border-color: #dfe6ef; }
.structure-reference-facts { gap: 0; }
.reference-tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; padding: 4px; margin: 6px 0 18px; border: 1px solid var(--line); border-radius: 11px; background: #f1f4f8; }
.reference-tabs button { width: auto; min-width: 0; min-height: 40px; padding: 8px 5px; border: 1px solid transparent; border-radius: 7px; font-size: 13px; font-weight: 650; background: transparent; color: #59677a; }
.reference-tabs button[aria-selected="true"] { color: #174d94; background: #fff; border-color: #dce4ef; box-shadow: 0 1px 4px #283f5a0c; }
.reference-tab-panel:not([hidden]) { animation: reference-arrive var(--ui-motion-content) var(--ui-motion-ease); }
.learning-controls:not([hidden]),
.quiz-muscle-actions:not([hidden]), .selected-structure-actions:not([hidden]),
.learning-progress[open] > .learning-progress-content {
  animation: reference-arrive var(--ui-motion-content) var(--ui-motion-ease);
}
.session-progress:not([hidden]), .name-choices:not([hidden]) { animation: content-arrive var(--ui-motion-content) ease-out; }
.reference-section { display: grid; gap: 12px; margin: 0; padding: 18px 0; border-bottom: 1px solid #e5eaf0; }
.reference-section:first-child { padding-top: 0; }
.reference-section:last-child { border-bottom: 0; padding-bottom: 0; }
.reference-section h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.reference-section p, .reference-section span, .reference-section li, .reference-function li { font-size: 14px; line-height: 1.65; color: #3f4d60; }
.reference-section p { margin: 0; }
.reference-section ul { margin: 0; padding-left: 18px; }
.reference-section li + li, .reference-function li + li { margin-top: 7px; }
.reference-section .structure-reference-fact { gap: 4px; }
.reference-section .structure-reference-fact > strong { color: #657185; font-size: 12px; font-weight: 650; }
.reference-study-cue { display: grid; gap: 5px; padding: 12px 14px; margin: 16px 0; border-left: 3px solid #84a8d3; background: #f1f6fc; border-radius: 0 9px 9px 0; }
.reference-study-cue strong { color: #315681; font-size: 12px; }
.reference-study-cue span { font-size: 13px; line-height: 1.6; color: #425b79; }
.reference-select-field { display: grid; gap: 6px; }
.reference-select-field > span { font-size: 12px; line-height: 1.4; font-weight: 650; color: #657185; }
.reference-select-field select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 30px 10px 11px; border: 1px solid #cad4e1; border-radius: 9px; font-size: 13px; color: var(--ink); background-color: #fff; }
.reference-section .reference-intro, .reference-intro { font-size: 13px; line-height: 1.55; color: #657185; }
.functional-role { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 2px; }
.functional-role button { min-height: 40px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 13px; color: #536176; }
.functional-role button[aria-pressed="true"] { border-color: #68a3ac; color: #12646b; background: #eff8f8; font-weight: 650; }
.functional-role button[data-functional-role="antagonists"][aria-pressed="true"] { color: #904819; border-color: #cd9a78; background: #fdf5ef; }
.structure-reference-functional { gap: 12px; }
.functional-muscle-list { display: grid; gap: 6px; }
.functional-muscle { width: 100%; padding: 10px 12px; border: 1px solid #d8e2ed; border-radius: 9px; text-align: left; color: #294d78; background: #f8fafd; font-size: 13px; line-height: 1.5; }
.functional-muscle:hover { background: #edf3fc; }
.reference-section .functional-empty, .reference-section .functional-conditional { font-size: 13px; line-height: 1.55; color: #657185; }
.reference-section .structure-reference-functional-row-note { font-size: 12px; line-height: 1.6; color: #657185; margin-top: 12px; }
.functional-source { display: inline-block; margin-top: 8px; font-size: 11px; line-height: 1.5; color: #315b8c; text-underline-offset: 3px; }
.functional-show-group { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #245da8; border-radius: 10px; color: #fff; background: #245da8; font-size: 13px; font-weight: 650; }
.functional-show-group:not(:disabled):hover { background: #1c4e90; }
.functional-show-group[aria-pressed="true"] { color: #245da8; background: #edf4fd; }
.functional-show-group[aria-pressed="true"]:not(:disabled):hover { background: #dfebfa; }
.functional-show-group:disabled { color: #818c9b; border-color: var(--line); background: #f2f4f7; }
.reference-section .functional-model-status { color: #49617e; font-size: 12px; line-height: 1.6; }
.functional-model-status:empty { display: none; }
.structure-reference-gallery-head > div > span { font-size: 12px; line-height: 1.5; }
.structure-reference-gallery .structure-reference-figure figcaption { font-size: 12px; line-height: 1.5; }
.structure-reference-source-item strong, .structure-reference-source-link { font-size: 12px; line-height: 1.45; }
.structure-reference-source-item span { font-size: 11px; line-height: 1.55; }
.attribution { margin-top: auto; color: #748093; line-height: 1.55; }
.attribution a { color: #536a89; }
/* Immediate movement comparison, shared with the full reference controller. */
.atlas-relations { min-width: 0; box-sizing: border-box; }
.atlas-relation-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.atlas-relations[data-expanded="true"] .atlas-relation-roles { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 44px; }
.atlas-relation-roles button { min-width: 0; min-height: 44px; padding: 8px; border: 1px solid #ccd7e4; border-radius: 9px; background: #fff; color: #536176; font-size: 13px; font-weight: 650; }
.atlas-relation-roles button[aria-expanded="true"] { color: #12646b; border-color: #68a3ac; background: #eff8f8; }
.atlas-relation-roles button[data-quick-role="antagonists"][aria-expanded="true"] { color: #904819; border-color: #cd9a78; background: #fdf5ef; }
.atlas-relation-roles button:disabled { color: #818c9b; background: #f2f4f7; }
.atlas-relations-body:not([hidden]) { display: grid; gap: 9px; padding-top: 12px; }
.atlas-relations-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 112px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.atlas-relation-muscle { padding: 5px 8px; border: 1px solid #c5e1e1; border-radius: 7px; background: #f1f9f8; color: #12646b; font-size: 12px; line-height: 1.4; }
.atlas-relations[data-role="antagonists"] .atlas-relation-muscle { color: #904819; border-color: #efd3bd; background: #fdf5ef; }
.atlas-relations .atlas-relation-muscle[data-availability="hidden"], .atlas-relations .atlas-relation-muscle[data-availability="missing"] { color: #657185; border-color: var(--line); background: #f6f7f9; }
.atlas-relations-status, .atlas-relations-unavailable, .atlas-relations-list p { margin: 0; font-size: 12px; line-height: 1.5; color: #657185; }
.atlas-relations-status:empty { display: none; }
.atlas-relations-unavailable { margin-top: 8px; }
.atlas-relation-roles .atlas-relations-close { padding: 5px; color: #657185; background: #f8fafd; font-size: 23px; font-weight: 400; }
@keyframes reference-arrive { from { opacity: .65; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes content-arrive { from { opacity: .65; } to { opacity: 1; } }
@keyframes drawer-arrive { from { opacity: .7; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@media (min-width: 921px) {
  .app-shell { height: 100dvh; min-height: 640px; overflow: hidden; }
  .stage { min-height: 0; padding: 22px; gap: 18px; }
  .viewer-wrap { min-height: 0; }
  .panel { max-height: 100dvh; box-sizing: border-box; overflow-y: auto; }
  .structure-reference-gallery .structure-reference-figure img,
  .structure-reference-gallery .structure-reference-course-art-image { height: 330px; min-height: 280px; max-height: 360px; object-fit: contain; }
}
@media (max-width: 920px) {
  body:not(.session-active):not(.motion-mode) .mobile-muscle-card:not([hidden]) {
    position: static; width: auto; margin: 0; box-sizing: border-box; box-shadow: 0 2px 10px #26395008;
    border-color: var(--line); background: #fff; backdrop-filter: none; border-radius: 14px; padding: 12px;
  }
  .mobile-muscle-actions button { min-height: 44px; }
  .mobile-muscle-card-copy { order: 1; }
  .mobile-muscle-card .atlas-relations { order: 2; }
  .mobile-muscle-actions { order: 3; }
  body:not(.session-active):not(.motion-mode) .stage:has(.mobile-muscle-card:not([hidden])) .viewer-wrap {
    flex: none; height: max(260px, calc(100dvh - 256px)); min-height: max(260px, calc(100dvh - 256px));
  }
  .mobile-muscle-card:has(.atlas-relations[data-expanded="true"]) .mobile-muscle-actions { display: none; }
  body:not(.session-active):not(.motion-mode) .mobile-muscle-card:has(.atlas-relations[data-expanded="true"]) {
    display: flex; flex-direction: column; max-height: max(240px, calc(58dvh - 148px));
  }
  .mobile-muscle-card .atlas-relations[data-expanded="true"] { display: flex; flex-direction: column; min-height: 0; }
  .mobile-muscle-card .atlas-relation-roles { flex: none; }
  body:not(.session-active):not(.motion-mode) .stage:has(.atlas-relations[data-expanded="true"]) .viewer-wrap {
    flex: none; height: max(260px, 42dvh); min-height: max(260px, 42dvh);
  }
  .mobile-muscle-card .atlas-relations-body { gap: 7px; padding-top: 9px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .mobile-muscle-card .atlas-relations-list { max-height: none; overflow: visible; }
  .mobile-muscle-card .atlas-relations-status { order: -1; }
  .mobile-muscle-card .atlas-relations-body .reference-select-field > span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .topbar { align-items: center; }
  .brand h1 { font-size: 18px; }
  .brand h1 .brand-author { font-size: 12px; margin-top: 3px; }
  .viewer-tools button, .viewer-tools select { min-height: 44px; }
  .mode-switch button { min-height: 40px; padding: 8px 10px; font-size: 12px; }
  .panel { padding: 14px; }
  .question-card { padding: 16px; }
  .viewer-wrap { border-radius: 16px; }
  .reference-tabs { position: sticky; top: 0; z-index: 2; }
  .reference-tabs button, .functional-role button, .functional-muscle { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* A quiet, always visible touch lane; the 3D canvas keeps its own gestures. */
.mobile-page-scroll { position: fixed; z-index: 30; right: max(1px, env(safe-area-inset-right)); top: max(110px, 18dvh); bottom: max(60px, env(safe-area-inset-bottom)); width: 24px; touch-action: none; user-select: none; cursor: grab; border-radius: 14px; }
.mobile-page-scroll::before { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; left: 10px; border-radius: 4px; background: #cfdae7; }
.mobile-page-scroll-thumb { display: block; position: absolute; top: 0; left: 5px; width: 14px; min-height: 52px; border-radius: 9px; background: #6b88ad; border: 2px solid #f3f5f8; box-sizing: border-box; box-shadow: 0 1px 4px #253d5b20; }
.mobile-page-scroll-thumb::after { content: ""; position: absolute; top: 50%; left: 2px; right: 2px; height: 12px; transform: translateY(-50%); border-top: 1px solid #ffffffb0; border-bottom: 1px solid #ffffffb0; }
.mobile-page-scroll[data-dragging="true"] { cursor: grabbing; }
.mobile-page-scroll[data-dragging="true"] .mobile-page-scroll-thumb { background: #245da8; }
.atlas-context-layers { flex: none; border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: #fff; }
.atlas-context-layer-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.atlas-context-layer-buttons button { min-width: 0; min-height: 44px; padding: 6px 3px; font-size: 12px; background: #f5f7fa; }
.atlas-context-layer-buttons button::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; background: #d1ad5d; }
[data-context-layer="vascular"]::before { background: #a44f4b !important; }
[data-context-layer="lymphatic"]::before { background: #78966f !important; }
[data-context-layer="organs"]::before { background: #c88179 !important; }
.atlas-context-layer-buttons button[aria-pressed="true"], #atlas-context-muscles[aria-pressed="true"] { color: #244d78; background: #e8f0fa; border-color: #a9c1df; }
.atlas-context-layer-buttons button[aria-busy="true"] { opacity: .65; }
.atlas-context-layer-footer { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.nerve-muscle-links { display: grid; gap: 8px; }
.nerve-muscle-links > div { display: flex; flex-wrap: wrap; gap: 6px; }
.nerve-muscle-links button { min-height: 40px; padding: 7px 9px; font-size: 12px; }
.nerve-muscle-links p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
#atlas-context-muscles { flex: none; min-height: 36px; padding: 6px 9px; font-size: 11px; background: #fff; }
#atlas-context-status { font-size: 11px; line-height: 1.4; color: var(--muted); }
@media (max-width: 920px) {
  .app-shell { margin-right: 22px; }
  .atlas-context-layer-footer { align-items: flex-start; }
  body.bones-mode .viewer-wrap { flex: none; }
  body:not(.session-active):not(.motion-mode) .panel:has(#structure-reference[data-reference-kind="context"]) #structure-reference,
  body:not(.session-active):not(.motion-mode) .question-card:has(#structure-reference[data-reference-kind="context"]) > :is(#question-label, #question, #feedback) { display: none; }
}

[data-context-layer="joints"]::before { background: #a7bac9 !important; }
.muscle-transparency-field { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.muscle-transparency-field > span { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.muscle-transparency-field output { color: #244d78; font-variant-numeric: tabular-nums; }
.muscle-transparency-field input { width: 100%; height: 32px; margin: 0; accent-color: #5682b5; cursor: pointer; }
.atlas-context-restore-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas-context-restore-actions:has(button:not([hidden])) { margin-top: 10px; }
.atlas-context-restore-actions button { min-height: 40px; padding: 6px 10px; font-size: 14px; }
@media (max-width: 360px) {
  .atlas-context-layer-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mobile-muscle-card:has(#mobile-focus-structure:not([hidden])) .mobile-muscle-actions button { min-height: 44px; font-size: 14px; }

.display-panel-toggle::after { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 1px 3px 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .18s; }
.display-panel-toggle[aria-expanded="true"]::after { transform: translateY(3px) rotate(225deg); }
#atlas-view-back { margin-right: auto; }
.atlas-selection-menu { position: absolute; z-index: 8; width: min(270px, calc(100% - 16px)); padding: 10px; background: rgba(255,255,255,.97); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px #26395026; }
.atlas-selection-menu[hidden] { display: none; }
.atlas-selection-menu-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.atlas-selection-menu-head strong { flex: 1; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.atlas-selection-menu-head button { flex: none; width: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; font-size: 22px; }
.atlas-selection-menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.atlas-selection-menu-actions button { min-height: 44px; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: #f6f8fc; color: inherit; font: inherit; font-size: 12px; font-weight: 600; }
.atlas-selection-menu-actions [data-atlas-action="reveal"] { grid-column: 1 / -1; }
.atlas-card-illustrations { display: grid; gap: 12px; }
.atlas-card-illustrations figure { margin: 0; }
.atlas-card-illustrations img { display: block; width: 100%; max-height: 440px; object-fit: contain; background: white; }
.atlas-card-illustrations figcaption { font-size: 12px; line-height: 1.45; color: var(--muted); }
.atlas-mini-view { margin-top: 12px; }
.atlas-mini-view summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.atlas-mini-stage { position: relative; height: 260px; }
.atlas-mini-stage canvas { width: 100%; height: 100%; touch-action: none; border-radius: 12px; }
.atlas-mini-stage button { position: absolute; top: 8px; right: 8px; min-height: 36px; }
@media (max-width: 920px) {
 .viewer-tools { flex-wrap: wrap; }
 .viewer-tools #atlas-view-back { min-height: 36px; padding: 6px 8px; }
 .viewer-tools #atlas-bones-toggle { font-size: 11px; padding: 6px 8px; }
 .viewer-tools #display-panel-toggle[aria-expanded="true"] { min-width: 0; }
 .mobile-muscle-card:has(#mobile-isolate-structure:not([hidden])) .mobile-muscle-actions { display: grid; grid-template-columns: 1fr 1fr; }
 .mobile-muscle-card:has(#mobile-isolate-structure:not([hidden])) .mobile-back-context { grid-column: 1 / -1; }
}


/* Stage 1 — unified visual language, additive and layout-safe. */
:root {
  --ui-ink: #243043;
  --ui-ink-soft: #455267;
  --ui-muted: #697587;
  --ui-bg: #f3f5f8;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f8fafc;
  --ui-surface-control: rgba(255,255,255,.94);
  --ui-border: #d8dfe8;
  --ui-border-strong: #c7d0dc;
  --ui-accent: #245da8;
  --ui-accent-soft: #edf4fd;
  --ui-focus: #6f9dd6;
  --ui-radius-control: 10px;
  --ui-radius-card: 14px;
  --ui-radius-panel: 18px;
  --ui-radius-viewer: 20px;
  --ui-shadow-float: 0 8px 28px rgba(30,46,70,.10);
  --ui-shadow-panel: 0 14px 42px rgba(30,46,70,.07);
}

body {
  color: var(--ui-ink);
  background: var(--ui-bg);
}

button,
select,
input[type="search"] {
  border-radius: var(--ui-radius-control);
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex="0"]:focus-visible {
  outline-color: var(--ui-focus);
}

.brand h1 {
  color: var(--ui-ink);
  font-weight: 720;
}

.brand h1 .brand-author {
  color: var(--ui-muted);
}

.mode-switch {
  border-color: var(--ui-border);
  background: #e9edf3;
  border-radius: 12px;
}

.mode-switch button {
  border-radius: 8px;
}

.mode-switch button.active {
  color: var(--ui-accent);
}

.viewer-wrap {
  border-color: #d2d9e3;
  border-radius: var(--ui-radius-viewer);
  box-shadow: var(--ui-shadow-panel);
}

/* Scene toolbar: compact tools, not a row of pills. */
.viewer-tools button,
.viewer-tools > select {
  min-height: 38px;
  padding: 7px 10px;
  border-radius: var(--ui-radius-control);
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-control);
  color: var(--ui-ink);
  box-shadow: 0 2px 7px rgba(35,62,91,.06);
  font-size: 12px;
  font-weight: 620;
}

.viewer-tools button:not(:disabled):hover,
.viewer-tools > select:hover {
  border-color: #aeb9c8;
  background: #fff;
  box-shadow: 0 3px 10px rgba(35,62,91,.08);
}

.viewer-quick-toggle[aria-pressed="true"] {
  color: #244d78;
  border-color: #9eb8d8;
  background: var(--ui-accent-soft);
  box-shadow: inset 0 0 0 1px rgba(36,93,168,.05);
}

/* "Display settings" is a gateway to a panel, not an anatomical action. */
.display-panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 10px;
  border-radius: var(--ui-radius-control);
  border-color: #bcc7d4;
  background: rgba(248,250,252,.96);
  color: #4d5a6c;
  box-shadow: none;
  font-weight: 630;
}

.display-panel-toggle::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 10px;
  opacity: .72;
  background:
    linear-gradient(currentColor 0 0) top / 100% 1.5px no-repeat,
    linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor 0 0) bottom / 100% 1.5px no-repeat;
}

.display-panel-toggle::after {
  width: 6px;
  height: 6px;
  margin: 0 1px 3px 1px;
  border-width: 0 1.5px 1.5px 0;
  opacity: .7;
}

.display-panel-toggle:not(:disabled):hover {
  color: #35465b;
  border-color: #9fabb9;
  background: #fff;
}

.display-panel-toggle.active,
.display-panel-toggle[aria-expanded="true"] {
  color: var(--ui-accent);
  border-color: #a9bed9;
  background: #f1f6fc;
  box-shadow: 0 2px 8px rgba(36,93,168,.08);
}

.display-panel {
  background: #fbfcfd;
  border-right-color: var(--ui-border);
  box-shadow: 12px 0 34px rgba(30,46,70,.10);
}

.display-panel-head {
  background: rgba(251,252,253,.97);
  border-bottom-color: var(--ui-border);
}

.display-panel-head strong {
  font-size: 15px;
  font-weight: 720;
}

.display-panel-head span,
.display-section-head > span,
.viewer-setting-note {
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.45;
}

.display-section {
  gap: 11px;
  border-bottom-color: #e3e8ef;
}

.display-section h3 {
  color: var(--ui-ink);
  font-size: 13px;
  font-weight: 720;
}

.viewer-setting-field {
  color: #59677a;
  font-size: 12px;
}

.viewer-setting-field select {
  min-height: 40px;
  border-color: var(--ui-border-strong);
  border-radius: var(--ui-radius-control);
  color: var(--ui-ink);
}

.connective-layer-options label {
  color: var(--ui-ink-soft);
  font-size: 13px;
  line-height: 1.4;
}

.panel {
  background: var(--ui-surface-subtle);
  border-left-color: var(--ui-border);
}

.question-card {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface);
  box-shadow: 0 5px 24px rgba(30,46,70,.045);
}

.question-card h2 {
  color: var(--ui-ink);
  letter-spacing: -.022em;
}

.learning-field > span,
.learning-mode-field > span,
.search-field > span,
.control-group-label {
  color: #59677a;
  font-size: 12px;
  font-weight: 660;
}

.learning-field select,
.search-field input,
.reference-select-field select {
  border-color: var(--ui-border-strong);
  border-radius: var(--ui-radius-control);
  background: #fff;
  color: var(--ui-ink);
}

.selected-structure-actions button,
.layer-actions button,
.atlas-selection-menu-actions button,
.mobile-muscle-actions button {
  border-radius: var(--ui-radius-control);
}

.atlas-selection-menu {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: rgba(255,255,255,.975);
  box-shadow: var(--ui-shadow-float);
}

.structure-reference {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: #fbfcfd;
}

.structure-reference-grid > div {
  border-radius: 9px;
  background: #f4f7fa;
}

.structure-reference-grid dt {
  color: var(--ui-muted);
  font-size: 11px;
}

.structure-reference-grid dd {
  color: var(--ui-ink);
  font-size: 13px;
}

.reference-tabs {
  border-color: var(--ui-border);
  border-radius: 12px;
  background: #f0f3f7;
}

.reference-tabs button {
  border-radius: 8px;
}

.reference-section h3 {
  color: var(--ui-ink);
}

.reference-section p,
.reference-section span,
.reference-section li,
.reference-function li {
  color: #465468;
}

.functional-role button,
.atlas-relation-roles button,
.functional-muscle {
  border-radius: var(--ui-radius-control);
}

.atlas-context-layers {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: #fff;
  box-shadow: 0 3px 16px rgba(30,46,70,.035);
}

.atlas-context-layer-buttons button {
  border-radius: 9px;
}

.deeper-structures {
  border-radius: var(--ui-radius-card);
}

.mobile-muscle-card {
  border-radius: var(--ui-radius-card);
}

@media (max-width: 920px) {
  .viewer-tools button,
  .viewer-tools > select,
  .display-panel-toggle {
    min-height: 44px;
  }

  .display-panel-toggle {
    padding-inline: 10px;
  }
}

@media (max-width: 430px) {
  .display-panel-toggle {
    font-size: 11px;
  }
}