/* Visual skin only: the original workspace, scene geometry and responsive states own layout. */
body.visual-upgrade {
  --ink: #163d37;
  --teal: #13766d;
  --muted: #5d7068;
  --paper: #f4f1e9;
  --white: #fffdf8;
  --line: #d4d9cf;
  --teal-light: #e8f0eb;
  --vu-surface: #fffdf8;
  --vu-recess: #eeeee5;
  --vu-line: #d4d9cf;
  --vu-line-strong: #a8b8ae;
  --vu-soft: #e8f0eb;
  --vu-muted: #5d7068;
  --vu-number: "Cascadia Code", Consolas, "Microsoft YaHei UI", monospace;
  --ui-focus: #13766d;
  --ui-radius: 8px;
  --ui-shadow: none;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.visual-upgrade ::selection { color: var(--ink); background: #c9ded1; }
body.visual-upgrade :is(button, input, select, textarea, summary) { font-family: var(--sans); }
body.visual-upgrade :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
body.visual-upgrade :is(button, a, input, select, summary) {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
body.visual-upgrade :is(button, input, select) { caret-color: var(--teal); }
body.visual-upgrade button:active:not(:disabled) { transform: none; }
body.visual-upgrade button:disabled { cursor: not-allowed; opacity: .42; box-shadow: none; }

/* A paper masthead and quiet navigation leave saturation to current actions. */
body.visual-upgrade .site-shell {
  background: var(--vu-surface);
  border-bottom-color: #c9d2c6;
  box-shadow: none;
}
body.visual-upgrade .site-shell .brand .brand-icon {
  background: var(--ink);
  border-radius: 7px;
  box-shadow: none;
}
body.visual-upgrade .site-shell .brand .brand-name { color: var(--ink); }
body.visual-upgrade .site-shell .brand-name > span { color: var(--vu-muted); letter-spacing: 1.8px; }
body.visual-upgrade .site-shell .section-navigation > a {
  color: #4b6258;
  border-radius: 5px;
  font-weight: 500;
}
body.visual-upgrade .site-shell .section-navigation > a[aria-current="page"] {
  color: var(--ink);
  background: #e8eee4;
  box-shadow: inset 0 -2px var(--teal);
  font-weight: 700;
}
body.visual-upgrade .site-shell .section-navigation > a:hover { background: #edf1e8; color: var(--teal); }
body.visual-upgrade .site-shell :is(.site-account-link, .site-back-button, .site-nav-toggle) {
  color: var(--ink);
  background: transparent;
  border-color: var(--vu-line);
  border-radius: 5px;
  box-shadow: none;
}
body.visual-upgrade .site-shell .help-button { color: var(--vu-muted); font-weight: 400; }
body.visual-upgrade .site-shell :is(.site-account-link, .site-back-button, .site-nav-toggle):hover {
  background: var(--vu-soft);
  border-color: var(--vu-line-strong);
}
body.visual-upgrade .site-shell :is(.site-account-link, .site-back-button, .site-nav-toggle) svg { stroke-width: 1.7; }
body.visual-upgrade .sidebar { background: #eeeee5; border-right-color: #d3d8cc; }
body.visual-upgrade .book-cover {
  background: #365e50;
  border-left-color: #1d4239;
  box-shadow: 2px 2px 0 #c3ccbc;
}
body.visual-upgrade .book-card h2 { font: 700 17px/1.5 var(--serif); color: var(--ink); }
body.visual-upgrade :is(.book-card p, .nav-heading, .sidebar-note p, .sidebar-bottom) { color: var(--vu-muted); }
body.visual-upgrade .book-selector { border-bottom-color: #cfd6c9; }
body.visual-upgrade .book-selector > span { color: #4b6456; letter-spacing: .1px; }
body.visual-upgrade .book-selector > span::before { width: 1px; background: var(--teal); }
body.visual-upgrade .book-selector select {
  background: #fafaf3;
  color: var(--ink);
  border: 1px solid #adbeae;
  border-radius: 5px;
  box-shadow: none;
  font-weight: 500;
}
body.visual-upgrade .book-selector select:hover { background: var(--vu-surface); border-color: var(--teal); }
body.visual-upgrade .chapter-toggle { color: var(--ink); border-radius: 4px; }
body.visual-upgrade .chapter-toggle:hover { background: #e1e8dc; }
body.visual-upgrade .chapter-toggle[aria-expanded="true"] { color: var(--ink); }
body.visual-upgrade :is(.chapter-number, .lesson-number) { font-family: var(--vu-number); color: #687b6d; }
body.visual-upgrade .lesson { border-radius: 4px; }
body.visual-upgrade .lesson:not(:disabled):hover { background: #e0e8dc; }
body.visual-upgrade .lesson.active,
body.visual-upgrade .lesson.active:hover {
  background: #dce8db;
  color: #174b3d;
  box-shadow: none;
}
body.visual-upgrade .lesson.active::before { width: 2px; border-radius: 0; background: var(--teal); }
body.visual-upgrade .lesson.active :is(.lesson-number, .lesson-status) { color: #315e48; border-color: #b4c8b6; }
body.visual-upgrade .lesson-status { background: #fafbf4; color: #526b5a; border-color: #d0d9c9; }
body.visual-upgrade .sidebar-note strong { color: #435e4b; }
body.visual-upgrade .small-spark { color: #89774e; }
body.visual-upgrade .sidebar-bottom { border-color: #cfd6c9; }

/* Chinese book typography is reserved for titles; controls stay neutral. */
body.visual-upgrade .breadcrumb { color: #637365; }
body.visual-upgrade .breadcrumb a { text-decoration: underline; text-decoration-color: #bdc7b6; text-underline-offset: 4px; }
body.visual-upgrade .breadcrumb span:last-child { color: #455e4e; }
body.visual-upgrade .page-heading h1 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: .025em;
  text-wrap: balance;
}
body.visual-upgrade .page-heading p { color: #52695b; }
body.visual-upgrade .page-heading .section-label { color: #6d7b69; letter-spacing: 1.6px; }
body.visual-upgrade .page-heading .section-label > span { background: #8a9980; }
body.visual-upgrade .dimension-badge {
  color: #486653;
  border-color: #c6d1bd;
  background: #e9eee0;
  border-radius: 3px;
  font-family: var(--sans);
}
body.visual-upgrade .source-tag { color: #62745d; border-left-color: #cdd4c5; }
body.visual-upgrade .source-tag > span > span { color: #395a44; }
body.visual-upgrade .source-tag svg { stroke: #637d60; }
body.visual-upgrade .model-tabs a {
  color: #4a6352;
  border-color: #c6d1bf;
  background: transparent;
  border-radius: 4px;
  box-shadow: none;
  font-weight: 500;
}
body.visual-upgrade .model-tabs a[aria-current="page"] {
  color: #1c5947;
  background: #e4eddf;
  border-color: #a3b99f;
  box-shadow: inset 0 -2px #5e8363;
  font-weight: 600;
}
body.visual-upgrade .model-tabs a:hover { background: #e9eee2; border-color: #819b7c; box-shadow: none; }
body.visual-upgrade :is(.lab-directory-toggle, .lab-parameters-toggle) {
  color: var(--ink);
  background: transparent;
  border-color: #b5c3ad;
  border-radius: 4px;
  font-weight: 500;
}
body.visual-upgrade :is(.lab-directory-toggle, .lab-parameters-toggle):hover { background: #e5edde; border-color: #739474; }

/* Fine rules replace dark title bars. Existing panel dimensions are retained. */
body.visual-upgrade :is(.panel, .simulation-panel, .parameter-panel) {
  background: var(--vu-surface);
  border: 1px solid var(--vu-line);
  border-radius: 8px;
  box-shadow: none;
}
body.visual-upgrade .panel-heading,
body.visual-upgrade .simulation-panel > .panel-heading,
body.visual-upgrade .parameter-panel > .panel-heading {
  color: var(--ink);
  background: var(--vu-surface);
  border-bottom: 1px solid var(--vu-line);
}
body.visual-upgrade .simulation-panel > .panel-heading::after { content: none; animation: none; }
body.visual-upgrade .panel-heading h2 { font-family: var(--serif); font-weight: 700; letter-spacing: .03em; }
body.visual-upgrade .simulation-panel .panel-icon { color: var(--teal); }
body.visual-upgrade .simulation-panel .state-tag {
  background: #edf0e6;
  color: #4c6652;
  border: 1px solid #d6decd;
  border-radius: 4px;
  font-weight: 400;
}
body.visual-upgrade .simulation-panel .state-tag i { width: 5px; height: 5px; background: #8a9d7c; box-shadow: none; }
body.visual-upgrade .simulation-panel .state-tag.playing { background: #e2efe3; color: #18664a; border-color: #9abd9f; }
body.visual-upgrade .simulation-panel .state-tag.playing i { background: #137454; box-shadow: none; animation: none; }
body.visual-upgrade .simulation-stage,
body.visual-upgrade .simulation-panel:has(.state-tag.playing) .simulation-stage {
  background: #fbfcf7;
  background-image: none;
  border-color: #d5ddcf;
  border-radius: 5px;
  box-shadow: inset 0 1px 3px #213b3110;
}
body.visual-upgrade .lab-stage .stage-caption {
  color: #5d7061;
  background: #fbfcf7;
  font-family: var(--sans);
  font-weight: 400;
}
body.visual-upgrade .stage-caption-dot { background: #9cae8c; }
body.visual-upgrade #lab-grid circle { opacity: .18; }
body.visual-upgrade #lab-scene .scene-position-ruler text {
  font-family: var(--vu-number);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
body.visual-upgrade #lab-scene .scene-frame-label { font-family: var(--sans); }
body.visual-upgrade .stage-tools {
  background: #fffef8;
  border-color: #c5d1bd;
  border-radius: 4px;
  box-shadow: 0 2px 5px #163d3709;
}
body.visual-upgrade .stage-tools button {
  color: #365e49;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--sans);
  font-weight: 400;
}
body.visual-upgrade .stage-tools button:nth-child(2),
body.visual-upgrade .stage-tools .model-text-toggle { border-color: #d7dfce; }
body.visual-upgrade .stage-tools button:hover:not(:disabled) { color: var(--ink); background: #e5edde; }
body.visual-upgrade .stage-tools button[aria-pressed="true"] { background: var(--ink); color: var(--vu-surface); }
body.visual-upgrade .lab-stage .stage-bottom > span { color: #5a6f5c; }
body.visual-upgrade :is(.experiment-scan, .interaction-ripple) { display: none; }

/* Primary, soft and ghost controls share geometry, with saturation indicating priority. */
body.visual-upgrade :is(.lab-presets, .preset-row, .spatial-tools, .lab-actions, .record-tools) button,
body.visual-upgrade :is(.force-analysis-toggle, .step-button, .model-fullscreen-toggle) {
  color: #305e47;
  background: #edf2e6;
  border: 1px solid #c6d3bc;
  border-radius: 4px;
  box-shadow: none;
  font-weight: 500;
}
body.visual-upgrade :is(.lab-presets, .preset-row, .spatial-tools, .lab-actions, .record-tools) button:hover:not(:disabled),
body.visual-upgrade :is(.force-analysis-toggle, .step-button, .model-fullscreen-toggle):hover:not(:disabled) {
  color: var(--ink);
  background: #e0ead6;
  border-color: #8da87e;
  box-shadow: none;
  transform: none;
}
body.visual-upgrade :is(.preset-row button.selected, .spatial-tools button[aria-pressed="true"], .force-analysis-toggle[aria-expanded="true"]) {
  color: var(--vu-surface);
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
}
body.visual-upgrade :is(.play-button, .primary-button, .lab-drawer-done),
body.visual-upgrade .record-tools button:first-child,
body.visual-upgrade .simulation-panel:has(.state-tag.playing) .play-button {
  color: #fffdf5;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 9px;
  box-shadow: 0 3px 8px #163d3722, inset 0 1px #ffffff14;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
}
body.visual-upgrade .play-button::after { content: none; animation: none; }
body.visual-upgrade .play-button::before {
  content: "";
  display: block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5 13 8l-9 5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5 13 8l-9 5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.visual-upgrade .play-button[aria-label="暂停实验"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3h3v10h-3Zm6 0h3v10h-3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3h3v10h-3Zm6 0h3v10h-3Z'/%3E%3C/svg%3E");
}
body.visual-upgrade :is(.play-button, .primary-button, .lab-drawer-done):hover:not(:disabled),
body.visual-upgrade .record-tools button:first-child:hover:not(:disabled) {
  background: #24584a;
  border-color: #24584a;
  box-shadow: 0 4px 10px #163d372c, inset 0 1px #ffffff1f;
  transform: none;
}
body.visual-upgrade :is(.reset-parameters, .text-button) {
  background: transparent;
  color: #536d59;
  font-weight: 400;
  text-decoration-color: #a8b99c;
  text-underline-offset: 4px;
}
body.visual-upgrade :is(.reset-parameters, .text-button):hover { color: var(--teal); }
body.visual-upgrade :is(.lab-actions, .force-analysis-tools) { background: transparent; border-color: var(--vu-line); }
body.visual-upgrade .force-analysis-tools > span { color: var(--vu-muted); }
body.visual-upgrade .transport {
  background: #f0f2e8;
  border-top: 1px solid #e0e5d7;
  border-bottom: 1px solid #cdd7c3;
}
body.visual-upgrade .transport .icon-button {
  color: #53705b;
  background: #fffdf8;
  border: 1px solid #cad5c5;
  border-radius: 7px;
  width: 44px;
  min-width: 44px;
  height: 44px;
}
body.visual-upgrade .transport .icon-button:hover { color: var(--ink); background: #e0e9d6; border-color: #c5d4b8; }
body.visual-upgrade .transport .icon-button svg { width: 18px; height: 18px; stroke-width: 1.7; }
body.visual-upgrade .transport .step-button { min-width: 44px; min-height: 44px; background: #fffdf8; border-radius: 7px; color: #3d6352; }
body.visual-upgrade .transport select {
  color: #345c44;
  background: #fafbf4;
  border-color: #c2d0b7;
  border-radius: 4px;
  font-family: var(--vu-number);
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}
body.visual-upgrade .time-display { font-family: var(--vu-number); font-variant-numeric: tabular-nums; color: var(--ink); }
body.visual-upgrade .time-display > span { color: #65765d; }
body.visual-upgrade .time-display output { font-weight: 600; }
body.visual-upgrade .timeline { position: relative; }
body.visual-upgrade .timeline-scale {
  position: absolute;
  top: calc(50% + 11px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  color: #6c7c6c;
  font: 9px/1 var(--vu-number);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
body.visual-upgrade .timeline-scale span { position: relative; min-width: 1ch; text-align: center; }
body.visual-upgrade .timeline-scale span::before { content: ""; position: absolute; top: -5px; left: 50%; width: 1px; height: 3px; background: #a9baa6; }

/* A generous hit area contains a thin calibrated rail and a tactile index. */
body.visual-upgrade input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  --range-accent: #13766d;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important; /* The original renderer may set a filled rail inline; the track below owns it. */
  box-shadow: none;
  accent-color: var(--teal);
}
body.visual-upgrade input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--range-accent) 0 var(--range-progress, var(--fill, 0%)), #d9e1d3 var(--range-progress, var(--fill, 0%)) 100%);
  box-shadow: inset 0 1px 1px #163d3712;
}
body.visual-upgrade input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  background: #fffefb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M7 6v6m4-6v6' stroke='%23adc4b8' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  border: 2px solid var(--range-accent);
  border-radius: 6px;
  box-shadow: 0 3px 6px #163d3729, inset 0 1px #fff;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
body.visual-upgrade input[type="range"]:hover:not(:disabled)::-webkit-slider-thumb { background-color: #fff; box-shadow: 0 4px 8px #163d3733, inset 0 1px #fff; }
body.visual-upgrade input[type="range"]:active:not(:disabled)::-webkit-slider-thumb { background-color: #edf5ef; border-color: var(--ink); box-shadow: 0 1px 3px #163d3729; }
body.visual-upgrade input[type="range"]::-moz-range-track { height: 6px; border: 0; border-radius: 3px; background: #d9e1d3; box-shadow: inset 0 1px 1px #163d3712; }
body.visual-upgrade input[type="range"]::-moz-range-progress { height: 6px; border: 0; border-radius: 3px; background: var(--range-accent); }
body.visual-upgrade input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #fffefb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M7 6v6m4-6v6' stroke='%23adc4b8' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  border: 2px solid var(--range-accent);
  border-radius: 6px;
  box-shadow: 0 3px 6px #163d3729, inset 0 1px #fff;
}
body.visual-upgrade input[type="range"]:hover:not(:disabled)::-moz-range-thumb { background-color: #fff; box-shadow: 0 4px 8px #163d3733, inset 0 1px #fff; }
body.visual-upgrade input[type="range"]:active:not(:disabled)::-moz-range-thumb { background-color: #edf5ef; border-color: var(--ink); box-shadow: 0 1px 3px #163d3729; }
body.visual-upgrade input[type="range"]:disabled { opacity: .42; cursor: not-allowed; }
body.visual-upgrade input[data-range="trainSpeed"] { --range-accent: #527f9b; }
body.visual-upgrade .timeline input[type="range"]::-webkit-slider-thumb { width: 18px; height: 20px; margin-top: -7px; border-radius: 5px; background-size: 16px 16px; }
body.visual-upgrade .timeline input[type="range"]::-moz-range-thumb { width: 14px; height: 16px; border-radius: 5px; background-size: 16px 16px; }

/* Parameter groups are paragraphs, with a ruled pause between each condition. */
body.visual-upgrade .parameter-field { border-radius: 0; }
body.visual-upgrade .parameter-field + .parameter-field::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 1px;
  background: #e8eadf;
}
body.visual-upgrade .parameter-field:focus-within { background: transparent; box-shadow: none; }
body.visual-upgrade .lab-parameters .parameter-label,
body.visual-upgrade .lab-parameters label { color: var(--ink); font-size: 15px; line-height: 1.65; font-weight: 500; }
body.visual-upgrade .parameter-label em { color: #61785f; }
body.visual-upgrade .number-with-unit {
  background: #fff;
  border: 1px solid #b4c3b8;
  border-radius: 6px;
  padding-right: 0;
  overflow: hidden;
  box-shadow: inset 0 1px 2px #163d3708;
}
body.visual-upgrade .lab-parameters .number-with-unit input {
  width: 65px;
  color: #163d37;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 5px 7px;
  font-family: var(--vu-number);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  line-height: 1.3;
  box-shadow: none;
}
body.visual-upgrade .number-with-unit span {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 0 6px;
  border-left: 1px solid #d9e1d8;
  color: #5b7064;
  background: #f5f7f1;
  font: 12px/1 var(--sans);
  white-space: nowrap;
}
body.visual-upgrade .number-with-unit:focus-within { background: #fff; border-color: var(--teal); box-shadow: 0 0 0 3px #13766d17, inset 0 1px 2px #163d3708; }
body.visual-upgrade .number-with-unit input:focus-visible { outline: 0; box-shadow: none; }
body.visual-upgrade .number-with-unit:has(input[aria-invalid="true"]) { border-color: #a9513e; background: #fff0e6; box-shadow: 0 0 0 2px #a9513e16; }
body.visual-upgrade .lab-parameters .range-labels { color: #6a795e; font: 10px/1.5 var(--vu-number); font-variant-numeric: tabular-nums; }
body.visual-upgrade .lab-parameters .field-help { color: var(--vu-muted); }
body.visual-upgrade .lab-select {
  color: #244f38;
  border-color: #b8c9ad;
  border-radius: 4px;
  background: #f7faf0;
  box-shadow: none;
  font-weight: 400;
}
body.visual-upgrade .lab-select:hover { border-color: #729770; }
body.visual-upgrade .display-options { border-color: var(--vu-line); }
body.visual-upgrade .display-options legend { color: #516a4f; font-weight: 600; }
body.visual-upgrade .display-options input { background: #cad5bf; }
body.visual-upgrade .display-options input:checked { background: #3b7c5b; }
body.visual-upgrade .lab-parameters .parameter-error { color: #9b4434; }
body.visual-upgrade .lab-parameters .equations { background: #f1f3e8; border-color: #d6decd; }
body.visual-upgrade .equations .eyebrow { color: #64785b; font-size: 10px; letter-spacing: .6px; }
body.visual-upgrade .equations h3 { color: #2c5037; font-family: var(--serif); font-size: 15px; font-weight: 700; }
body.visual-upgrade .lab-parameters .equation { color: #2d6544; line-height: 1.65; }
body.visual-upgrade .equation-block + .equation-block { border-color: #d8e0ce; }
body.visual-upgrade .lab-parameters .equation-block p { color: #516949; font-size: 13px; line-height: 1.8; }
body.visual-upgrade .model-assumptions { background: #fafbf4; border-color: #dce3d2; }
body.visual-upgrade .model-assumptions > span { color: #5c7756; border-color: #97ac8a; }
body.visual-upgrade .lab-parameters .model-assumptions p { color: #5a7052; font-size: 13px; }

/* Readouts behave like a typeset measurement strip, rather than separate cards. */
body.visual-upgrade .lab-readouts { background: #f9faf3; border-top-color: #d8e1cd; }
body.visual-upgrade .lab-readouts > div { border-right-color: #dce3d2; }
body.visual-upgrade .lab-readouts > div > span { color: #5d7055; font-size: 12px; line-height: 1.65; }
body.visual-upgrade .lab-readouts strong {
  color: #1f5037;
  font-family: var(--vu-number);
  font-size: 26px;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.025em;
  line-height: 1.4;
}
body.visual-upgrade .lab-readouts strong small { color: #526b4c; font: 11px/1.4 var(--sans); letter-spacing: 0; }
body.visual-upgrade .insight-panel { color: var(--ink); background: #e8edde; border: 1px solid #cfd8c1; border-radius: 6px; box-shadow: none; }
body.visual-upgrade .insight-symbol { color: #8a7449; }
body.visual-upgrade .insight-panel h2 { color: #345536; font-family: var(--serif); font-size: 15px; font-weight: 700; }
body.visual-upgrade .insight-panel p { color: #536a49; font-size: 13px; line-height: 1.85; }
body.visual-upgrade .graph-heading h2 { color: #315837; font-family: var(--serif); font-weight: 700; }
body.visual-upgrade :is(.graph-footnote, .record-empty, .data-scroll caption) { color: #607154; font-size: 13px; }
body.visual-upgrade .data-badge { color: #527048; background: #e9efdf; border-radius: 3px; }
body.visual-upgrade .data-scroll table { font-variant-numeric: tabular-nums; color: #34563a; }
body.visual-upgrade .data-scroll th { color: #4e6847; background: #edf2e3; }
body.visual-upgrade .data-scroll :is(th, td) { border-color: #dbe3cf; }
body.visual-upgrade #record-count { color: #627c56; font-family: var(--vu-number); }
body.visual-upgrade .main-footer { color: #63715b; }

/* Dialog and drawer skin changes do not replace their open/hidden rules. */
body.visual-upgrade dialog {
  color: var(--ink);
  background: var(--vu-surface);
  border-color: #bdcbb2;
  box-shadow: 0 18px 60px #163d3726;
}
body.visual-upgrade dialog::backdrop { background: #183b3466; backdrop-filter: none; }
body.visual-upgrade #help-dialog { border-radius: 9px; }
body.visual-upgrade #help-dialog h2 { color: var(--ink); }
body.visual-upgrade :is(.guide-steps p, .dialog-note) { color: #526a4b; font-size: 13px; }
body.visual-upgrade .guide-steps li::before { color: #6f8c5d; font-family: var(--vu-number); }
body.visual-upgrade .lab-drawer-header { background: #f0f4e7; border-color: #d4dfc7; }
body.visual-upgrade .lab-drawer-header h2 { color: #254c33; font-family: var(--serif); font-weight: 700; }
body.visual-upgrade .lab-drawer-close { border-radius: 4px; color: #315b3e; background: #fafcf4; border-color: #bbcdb0; }
body.visual-upgrade .lab-drawer-close:hover { background: #e2ecd7; }
body.visual-upgrade .lab-drawer-content > .parameter-panel { border: 0; border-radius: 0; box-shadow: none; }
body.visual-upgrade .lab-drawer-content .parameter-panel > .panel-heading { background: #fafcf4; }
body.visual-upgrade .lab-drawer-footer { background: var(--vu-surface); border-color: #d4dfc7; }
body.visual-upgrade .model-fullscreen-bar { background: #eef3e5; border-bottom-color: #b7cbae; }
body.visual-upgrade .model-fullscreen-bar button { color: #28533a; background: #fffef7; border-color: #b7cbae; border-radius: 4px; }
body.visual-upgrade .model-fullscreen-bar button:hover { background: #dfead3; }

@media (max-width: 1100px) {
  body.visual-upgrade .site-shell .section-navigation { background: var(--vu-surface); border-color: #c4d1b9; box-shadow: 0 10px 24px #163d3720; }
  body.visual-upgrade .site-shell .site-nav-toggle[aria-expanded="true"] { background: #e4edde; border-color: #7a9d71; }
}
@media (max-width: 720px) {
  body.visual-upgrade .lab-stage .stage-tools { background: #f3f6eb; border-bottom-color: #d6e1ca; box-shadow: none; }
  body.visual-upgrade .lab-readouts strong { font-size: 23px; }
  body.visual-upgrade .lab-readouts > div > span { font-size: 11px; }
  body.visual-upgrade .timeline-scale { top: calc(50% + 10px); font-size: 8px; }
  body.visual-upgrade .lab-parameters .number-with-unit input { font-size: 17px; }
  body.visual-upgrade .lab-parameters .lab-select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.visual-upgrade *, body.visual-upgrade *::before, body.visual-upgrade *::after { animation: none; transition: none; scroll-behavior: auto; }
}

/* Extend the approved experiment palette to the existing site components. */
body.visual-upgrade :is(.card, .library-card, .practice-chapter, .practice-card, .teacher-question-card, .teacher-filters, .teacher-selection, .teacher-workflow, .account-overview, .learning-card) {
  color: var(--ink);
  background: var(--vu-surface);
  border-color: var(--vu-line);
  border-radius: 8px;
  box-shadow: none;
}

body.visual-upgrade :is(.model-page-heading, .practice-heading, .catalog-heading, .teacher-heading, .account-main, .admin-main, .card) :is(h1, h2, h3),
body.visual-upgrade :is(.library-card h2, .practice-chapter strong, .teacher-question-card h3) {
  font-family: var(--serif);
  color: var(--ink);
}

body.visual-upgrade :is(.secondary-button, .secondary, .teacher-panel-close, .copy-button, .library-filter-chip, .example-button, .library-pagination button) {
  color: #305e47;
  background: #edf2e6;
  border-color: #c6d3bc;
  border-radius: 4px;
  box-shadow: none;
}

body.visual-upgrade :is(.secondary-button, .secondary, .teacher-panel-close, .copy-button, .library-filter-chip, .example-button, .library-pagination button):hover:not(:disabled) {
  color: var(--ink);
  background: #e0ead6;
  border-color: #8da87e;
  transform: none;
}

body.visual-upgrade :is(.primary, .teacher-primary, .practice-answer button[type="submit"], .practice-next [data-next]) {
  color: var(--vu-surface);
  background: var(--teal);
  border-color: var(--teal);
  border-radius: 4px;
  box-shadow: none;
}

body.visual-upgrade :is(.primary, .practice-answer button[type="submit"], .practice-next [data-next]):hover:not(:disabled) {
  color: var(--vu-surface);
  background: #0e655e;
  border-color: #0e655e;
}

body.visual-upgrade :is(.library-pagination button[aria-current="page"], .assistant-workflow-nav .assistant-steps li[aria-current="step"] button) {
  color: var(--ink);
  background: #e8eee4;
  border-color: #92ac91;
  box-shadow: inset 0 -2px var(--teal);
}

body.visual-upgrade .assistant-workflow-nav .assistant-steps li[aria-current="step"] span {
  color: var(--teal);
  background: #fffdf8;
  border-color: #a8bda5;
}

body.visual-upgrade :is(.library-discovery, .library-card-bottom, .practice-session-status, .practice-answer, .teacher-selection > header, .teacher-workflow-dialog-heading, .overview-access, .login-modes) {
  color: var(--ink);
  background: #f1f3e8;
  border-color: var(--vu-line);
}

body.visual-upgrade :is(.library-topic, .teacher-topic, .insight-panel, .bind-panel, .new-codes, .user-result) {
  border-color: #cfd8c1;
  border-radius: 6px;
  box-shadow: none;
}

body.visual-upgrade :is(.learning-card, .library-card):hover {
  border-color: #8da87e;
  box-shadow: none;
  transform: none;
}

body.visual-upgrade :is(.account-overview, .welcome-panel, .identity-strip) {
  background: var(--vu-surface);
  color: var(--ink);
  border: 1px solid var(--vu-line);
  border-radius: 8px;
}

body.visual-upgrade :is(.welcome-panel .eyebrow, .identity-strip span) {
  color: var(--teal);
}

body.visual-upgrade :is(.welcome-panel p, .identity-strip p) {
  color: var(--vu-muted);
}

body.visual-upgrade .welcome-art :is(span, b) { color: #527f6d; }
body.visual-upgrade .welcome-art small { color: var(--vu-muted); }

body.visual-upgrade :is(.account-sidebar nav a.selected, .practice-book-switch a[aria-current="page"], .login-modes button[aria-pressed="true"], .type-choice[aria-pressed="true"]) {
  color: var(--ink);
  background: #e8eee4;
  border-color: #92ac91;
}

body.visual-upgrade .admin-sidebar nav a {
  color: #305e47;
  background: #edf2e6;
  border-color: #c6d3bc;
}

body.visual-upgrade :is(.account-main, .admin-main, .account-layout, .model-main, .practice-section, .teacher-main) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):not([aria-invalid="true"]):not(.needs-review) {
  color: var(--ink);
  background-color: var(--vu-surface);
  border-color: var(--vu-line-strong);
  border-radius: 4px;
}

body.visual-upgrade :is(.account-main, .admin-main, .account-layout, .model-main, .practice-section, .teacher-main) :is(input, select, textarea):not([aria-invalid="true"]):not(.needs-review):focus-visible {
  border-color: var(--teal);
  outline-color: var(--teal);
  box-shadow: none;
}

body.visual-upgrade :is(.library-card-bottom, .account-dates, .account-footer, .teacher-selection > header, .selection-footer, .teacher-preview > header, .teacher-preview > footer, .practice-chapter[open] > summary) {
  border-color: var(--vu-line);
}

body.visual-upgrade .table-wrap th {
  color: #4e6847;
  background: #edf2e3;
  border-color: #dbe3cf;
}

body.visual-upgrade .table-wrap td { border-color: #dbe3cf; }

body.visual-upgrade .practice-model-scene { position: relative; }