.teaching-card { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid #b9cbd8; border-radius: 12px; background: #f6fafc; color: #20384d; }
.teaching-card h3, .teaching-card h4 { margin-top: 0; }
.teaching-controls, .teaching-options { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; margin: 1rem 0; }
.teaching-control, .teaching-controls label { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .6rem 0; font-size: .95rem; }
.teaching-controls label { flex: 1 1 210px; }
.teaching-controls input[type=range] { width: 100%; min-width: 130px; }
.teaching-controls input[type=number] { width: 100px; }
.teaching-card button, .teaching-controls button, .teaching-card select, .teaching-control select, .teaching-controls select { min-height: 42px; padding: .55rem .75rem; border: 1px solid #708b9f; border-radius: 6px; background: white; color: #20384d; font: inherit; max-width: 100%; }
.teaching-card > button { margin: .5rem .6rem .5rem 0; }
.teaching-card button[aria-pressed=true] { background: #135f81; color: white; }
.teaching-card textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 65px; font: inherit; padding: .7rem; border: 1px solid #708b9f; border-radius: 6px; background: white; color: #20384d; }
.teaching-card input { font: inherit; padding: .4rem; }
.teaching-card img { display: block; width: 100%; height: auto; margin: 1rem 0; }
.teaching-card svg { display: block; width: 100%; max-width: 750px; height: auto; color: inherit; }
.teaching-card svg text { fill: currentColor; font: 12px system-ui; }
.teaching-assumption, .teaching-readout { font-size: .9rem; line-height: 1.6; margin: .8rem 0; }
.teaching-details { margin: 1rem 0; padding: .75rem; border: 1px solid #b9cbd8; border-radius: 8px; }
.teaching-details summary { cursor: pointer; font-weight: 600; }
.teaching-field { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(260px, 1fr); gap: 1rem; overflow: auto; }
.teaching-field svg { width: 100%; max-width: 400px; height: auto; color: inherit; }
.teaching-field text { fill: currentColor; font: 11px system-ui; }
.teaching-field table { width: 100%; font-size: .85rem; border-collapse: collapse; }
.teaching-field td, .teaching-field th { padding: .35rem; border-bottom: 1px solid #b9cbd8; text-align: right; }
.teaching-tapes { overflow: auto; }
.teaching-tapes svg { min-width: 440px; }
.seizure-canvas-wrap { overflow-x: auto; }
.lead-lab[data-mode=assessment] #measurement-output { display: none; }
.dark .teaching-card { background: #182b38; color: #dfebf5; border-color: #4a657a; }
.dark .teaching-card button, .dark .teaching-card select, .dark .teaching-control select, .dark .teaching-controls select, .dark .teaching-controls button, .dark .teaching-card textarea, .dark .teaching-card input[type=number] { background: #213d50; color: #edf5fb; border-color: #7593aa; }
.dark .teaching-card button[aria-pressed=true] { background: #166889; }
.teaching-card :focus-visible, .teaching-controls :focus-visible, .teaching-control :focus-visible { outline: 3px solid #c57917; outline-offset: 3px; }
@media(max-width:600px) { .teaching-card { padding: .85rem; } .teaching-field { grid-template-columns: 1fr; } .teaching-controls label { flex-basis: 100%; } .teaching-options { flex-direction: column; align-items: stretch; } }

/* Clear instrument controls with one trace visible at a time. */
.instrument-lab { min-width: 0; padding: 1rem; border: 1px solid #bdcdd9; border-radius: 14px; background: #f6fafc; color: #20384d; }
.instrument-controls { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.instrument-controls label, .instrument-control { display: flex; flex-direction: column; gap: .5rem; font-weight: 600; font-size: .9rem; }
.instrument-controls label > span, .instrument-control > span:last-child { font-size: .82rem; font-weight: 400; line-height: 1.45; }
.instrument-lab button, .instrument-lab select { font: inherit; color: inherit; border: 1px solid #829caf; border-radius: 7px; background: white; padding: .65rem .8rem; min-height: 44px; cursor: pointer; }
.instrument-lab select { width: 100%; }
.instrument-experiments, .instrument-view { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.instrument-experiments button { font-size: .86rem; }
.instrument-lab button[aria-pressed=true] { background: #135f81; color: white; border-color: #135f81; }
.instrument-guidance { padding: .9rem; border-left: 3px solid #187fa1; background: #eaf3f8; line-height: 1.6; }
.instrument-settings { font-size: .85rem; line-height: 1.5; margin: .7rem 0; }
.instrument-trace-scroll { max-width: 100%; min-width: 0; overflow-x: auto; background: white; border: 1px solid #c4d3dd; border-radius: 8px; }
.instrument-trace-scroll canvas { display: block; }
.instrument-trace-scroll canvas[hidden] { display: none; }
.instrument-lab :focus-visible { outline: 3px solid #c57917; outline-offset: 3px; }
.ion-trace .ion-trace-frame { fill: #fff; stroke: #c4d5e1; stroke-width: 1.5; }
.dark .instrument-lab { background: #182b38; border-color: #4a657a; color: #dfebf5; }
.dark .instrument-lab button, .dark .instrument-lab select { background: #213d50; color: #edf5fb; }
.dark .instrument-lab button[aria-pressed=true] { background: #166889; }
.dark .instrument-guidance { background: #213d50; }
.dark .ion-trace .ion-trace-frame { fill: #182b38; stroke: #4a657a; }
@media(max-width:900px) { .instrument-controls { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .instrument-lab { padding: .7rem; } .instrument-controls { grid-template-columns: 1fr; } .instrument-view button { flex: 1; } }

/* A compact cycle-count exercise. */
#pdr-lab .pdr-count-challenge { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
#pdr-lab .pdr-count-choices { grid-template-columns: repeat(4,minmax(0,1fr)); }
#pdr-lab .pdr-count-choices button { min-height: 44px; }
#pdr-lab .pdr-count-choices button[aria-pressed=true] { background: #135f81; color: white; border-color: #135f81; }
#pdr-assess { align-self: flex-start; min-height: 44px; padding: .65rem 1rem; }
#arc-practice { margin-top: 1rem; }
#arc-practice summary { font-weight: 600; cursor: pointer; }
#lab-start-placement { margin-bottom: 1rem; }
.hunter-toolbar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.hunter-toolbar span { font-size: .85rem; }
.hunter-toolbar button { padding: .65rem .9rem; min-height: 44px; cursor: pointer; }
.artifact-hunter .hunter-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .6rem; }
.artifact-hunter .hunter-controls button { min-height: 48px; white-space: normal; }
.hunter-canvas-wrap, .mc-stage { min-width: 0; max-width: 100%; overflow-x: auto; }
@media(max-width:800px) { .artifact-hunter .hunter-controls { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.montage-compare .mc-stage { overflow: hidden; }
.montage-compare #mc-canvas { max-width: 100%; }

#mc-canvas { max-width: none; }
.hunter-controls .btn-toggle[data-state="recognized"]::after { content: "Retained"; }

@media(max-width:600px) { #pdr-lab .pdr-count-choices { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Synaptic field: keep the anatomy readable and let the EEG panel stack. */
#ion-lab .visual-control-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; }
.ion-figure-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(220px,.8fr); align-items: center; gap: 1.2rem; padding: 1rem; }
#ion-svg { max-width: 540px; justify-self: center; }
#ion-lab .ion-cell { stroke-width: 8; }
#ion-lab .ion-label { font: 700 21px Inter,system-ui,sans-serif; }
.ion-anatomy-label { fill: #334f66; font: 650 20px Inter,system-ui,sans-serif; }
.ion-anatomy-kicker { fill: #637a8b; font: 500 17px Inter,system-ui,sans-serif; }
.ion-label-leader { fill: none; stroke: #99acbb; stroke-width: 1.5; }
.ion-synapse-halo { fill: #eeb947; fill-opacity: .16; stroke: #bc861a; stroke-width: 1; stroke-dasharray: 3 4; }
#ion-lab .ion-synapse-dot { stroke-width: 2.5; }
#ion-lab .ion-loop { stroke: #318365; stroke-width: 3; stroke-dasharray: 7 8; }
#ion-lab .ion-return { stroke: #318365; stroke-width: 2; stroke-dasharray: 5 6; opacity: .75; }
#ion-lab.is-surface-positive.is-flowing .ion-loop { animation-direction: normal; }
#ion-lab .ion-particle { opacity: 0; }
#ion-lab.is-flowing .ion-particle { animation: ion-pass 1.35s ease-in-out var(--ion-delay) both; }
#ion-lab.is-flowing .ion-particle > * { animation: ion-in 1.35s ease-in-out var(--ion-delay) both; }
@keyframes ion-pass { 0%,100% { opacity: 0; } 12%,76% { opacity: 1; } }
.ion-signal-panel { background: #fff; border: 1px solid #cfdee8; border-radius: 14px; padding: 1.1rem; text-align: center; }
.ion-panel-kicker { display: block; font-size: .72rem; color: #61788b; text-transform: uppercase; letter-spacing: .06em; }
#ion-lab .ion-signal-panel h4 { margin: .3rem 0 0; font-size: 1.2rem; }
#ion-lab .ion-signal-panel p { margin: .3rem 0; font-size: .85rem; line-height: 1.5; }
.ion-signal-panel .ion-scale-note { color: #677d8e; }
.ion-stage .ion-signal-svg { max-width: 280px; margin: 0 auto; }
#ion-lab .ion-trace .ion-trace-note { font-size: 17px; }
#ion-lab .ion-trace-note.is-negative { fill: #216b9d; }
#ion-lab .ion-trace-note.is-positive { fill: #b14435; }
.dark #ion-lab .ion-stage { background: #182b38; border-color: #4a657a; }
.dark .ion-signal-panel { background: #203746; border-color: #4a657a; }
.dark .ion-panel-kicker, .dark .ion-signal-panel .ion-scale-note { color: #aec2d1; }
.dark #ion-lab .ion-label, .dark .ion-anatomy-label { fill: #e4edf4; }
.dark .ion-anatomy-kicker { fill: #b2c6d5; }
.dark #ion-lab .ion-trace-note.is-negative { fill: #81c5f0; }
.dark #ion-lab .ion-trace-note.is-positive { fill: #f29b89; }
.dark #ion-lab .ion-stage figcaption { background: #203746; color: #d8e5ed; }
#ion-lab button:focus-visible, .ion-model-notes summary:focus-visible { outline: 3px solid #c57917; outline-offset: 3px; }
@media(max-width:650px) { .ion-figure-grid { grid-template-columns: minmax(0,1fr); gap: .3rem; padding: .6rem; } .ion-signal-panel { padding: .8rem; } .ion-stage .ion-signal-svg { max-width: 220px; } #ion-lab .ion-label { font-size: 23px; } .ion-anatomy-label { font-size: 22px; } .ion-anatomy-kicker { font-size: 19px; } }
@media(prefers-reduced-motion:reduce) { #ion-lab .ion-loop, #ion-lab .ion-particle, #ion-lab .ion-particle > * { animation: none !important; } }

#ion-lab .ion-stage { container-type: inline-size; }
@container(max-width:650px) { .ion-figure-grid { grid-template-columns: minmax(0,1fr); } .ion-signal-panel { max-width: 360px; width: 100%; box-sizing: border-box; justify-self: center; } }

.dark #ion-lab #ion-wave { stroke: #81c5f0; }
.dark #ion-lab.is-surface-positive #ion-wave { stroke: #f29b89; }
.dark #ion-lab .ion-loop, .dark #ion-lab .ion-return { stroke: #83cbae; }
.dark #ion-current-arrow path { fill: #83cbae; }
.dark #ion-lab .ion-scalp { stroke: #718a9d; }
.dark #ion-lab .ion-cell { stroke: #d49a65; }
.dark #ion-lab .ion-cell-soma { fill: #604831; }
@media(max-width:650px) { .ion-stage .ion-signal-svg { max-width: 180px; } }

/* Summation: a readable cell population, one trace, and one shared time marker. */
.sum-lab { padding: 1rem; border-radius: 16px; }
.sum-lab .sum-controls { margin-bottom: .85rem; }
.sum-lab .sum-kinds { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
.sum-lab .sum-kinds .dip-chip { padding: .65rem .8rem; line-height: 1.4; border-radius: 10px; }
.sum-lab .sum-kind-note { margin: .6rem 0 1rem; }
.sum-lab .sum-action-row { gap: 1rem; }
.sum-lab .sum-action-row .dip-slider-row { display: grid; grid-template-columns: auto minmax(70px,1fr) 3.2rem; gap: .7rem; align-items: center; }
.sum-lab .sum-action-row input { min-width: 0; width: 100%; }
.sum-lab #sum-jitter-out { font-variant-numeric: tabular-nums; text-align: right; }
.sum-lab .sum-run { min-width: 90px; min-height: 42px; }
.sum-lab .sum-opposing-control { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-weight: 600; margin: .8rem 0 1rem; }
.sum-opposing-control span { font-size: .78rem; font-weight: 400; color: #577084; }
.sum-lab .sum-stage { padding: .8rem; border-radius: 12px; overflow: hidden; }
.sum-snapshot { font-size: .8rem; font-weight: 600; color: #345d79; background: #edf5fa; border-radius: 6px; padding: .5rem .65rem; margin-bottom: .5rem; }
.sum-lab #sum-canvas { width: 100%; }
.sum-lab .sum-stage figcaption { border-top: 1px solid #dce7ee; padding: .7rem .2rem .1rem; margin: 0; font-size: .79rem; line-height: 1.6; color: #577084; }
.sum-lab .dip-readout { display: grid; grid-template-columns: auto 1fr; gap: .7rem 1.5rem; margin-top: 1rem; }
.sum-lab .dip-readout strong { font-size: .95rem; }
.sum-lab #sum-verdict { font-size: .86rem; line-height: 1.6; margin-bottom: .1rem; }
.sum-lab button:focus-visible, .sum-lab input:focus-visible { outline: 3px solid #b66e14; outline-offset: 3px; }
.dark .sum-lab { background: #1c2d39; border-color: #466174; }
.dark .sum-lab .sum-stage { background: #182a38; border-color: #466174; }
.dark .sum-snapshot { background: #253f51; color: #d5eaf7; }
.dark .sum-opposing-control span, .dark .sum-lab .sum-stage figcaption { color: #b5cbd9; }
.dark .sum-lab .sum-stage figcaption { border-color: #3d596c; }
@media(max-width:600px) {
  .sum-lab { padding: .7rem; }
  .sum-lab .sum-kinds .dip-chip { font-size: .78rem; padding: .5rem; }
  .sum-lab .sum-stage { padding: .4rem; }
  .sum-lab .sum-action-row .dip-slider-row { flex-basis: 100%; font-size: .83rem; }
  .sum-opposing-control span { flex-basis: 100%; margin-left: 1.5rem; }
  .sum-lab .dip-readout { grid-template-columns: 1fr; gap: .6rem; }
}

.sum-lab .sum-kinds .dip-chip { white-space: normal; min-width: 0; }
.sum-lab .sum-kinds .dip-chip[aria-pressed="true"] { background: #0b6ab8; border-color: #0b6ab8; color: #fff; }
body.dark .sum-lab .sum-kinds .dip-chip[aria-pressed="true"] { background: #246fa9; border-color: #82bde7; color: #fff; }

/* Dipole explorer: orientation beside a spatial field, with shared polarity. */
.dip-explorer { container-type: inline-size; border-radius: 16px; padding: 1rem; }
.dip-explorer .dip-presets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; }
.dip-explorer .dip-chip { border-radius: 10px; padding: .6rem; white-space: normal; line-height: 1.4; font-size: .88rem; min-height: 50px; }
.dip-explorer .dip-chip span { display: block; font-size: .75rem; font-weight: 400; margin-top: .15rem; }
.dip-adjustments { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1rem 0; }
.dip-explorer .dip-slider-row { display: grid; grid-template-columns: auto minmax(50px,1fr) 2.8rem; gap: .5rem; font-size: .82rem; }
.dip-explorer .dip-slider-row input { min-width: 0; width: 100%; }
.dip-opposing-control { display: flex; gap: .5rem; align-items: center; font-size: .86rem; font-weight: 600; margin: .6rem 0 1rem; }
.dip-explorer .dip-panels { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: .85rem; align-items: stretch; }
.dip-explorer .dip-anatomy, .dip-explorer .dip-stage { border-radius: 12px; padding: .8rem; min-width: 0; overflow: hidden; }
.dip-explorer .dip-panel-title { font-size: .96rem; line-height: 1.4; margin: 0; }
.dip-explorer .dip-panel-subtitle { font-size: .77rem; line-height: 1.5; margin: .35rem 0 .6rem; color: #577084; }
.dip-explorer .dip-fold-svg { max-height: 355px; }
.dip-explorer .dip-fold { padding: .5rem 0 1rem; }
.dip-explorer .dip-lbl { font: 600 14px system-ui; fill: #425e73; }
.dip-label-leader { stroke: #8299aa; stroke-width: 1.2; fill: none; }
.dip-active-halo { fill: #1975aa; fill-opacity: .12; stroke: #1975aa; stroke-width: 1.2; }
.dip-explorer .dip-arrow { stroke: #1975aa; }
.dip-explorer .dip-arrow-head { fill: #1975aa; }
.dip-explorer .dip-panels figcaption { font-size: .79rem; line-height: 1.6; padding-top: .7rem; margin-top: auto; border-top: 1px solid #dce7ee; color: #577084; }
.dip-explorer .dip-readout { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; padding: .9rem 0 .5rem; }
.dip-explorer .dip-readout strong { display: block; font: 600 .86rem/1.5 system-ui; margin-top: .2rem; }
.dip-explorer #dip-note { padding: .8rem; border-radius: 8px; background: #edf5fa; margin-top: .5rem; }
.dip-model-notes { margin-top: .8rem; font-size: .8rem; line-height: 1.6; color: #577084; }
.dip-model-notes summary { cursor: pointer; font-weight: 600; }
.dip-negative { color: #1975aa; } .dip-positive { color: #b54432; }
.dip-explorer :focus-visible { outline: 3px solid #b66e14; outline-offset: 3px; }
body.dark .dip-explorer .dip-anatomy, body.dark .dip-explorer .dip-stage { background: #182a38; border-color: #466174; }
body.dark .dip-explorer .dip-panel-subtitle, body.dark .dip-explorer .dip-panels figcaption, body.dark .dip-model-notes { color: #b5cbd9; }
body.dark .dip-explorer .dip-panels figcaption { border-color: #3d596c; }
body.dark .dip-explorer .dip-lbl { fill: #d3e3ef; }
body.dark .dip-explorer .dip-cortex { stroke: #745949; }
body.dark .dip-explorer .dipcell-apical, body.dark .dip-explorer .dipcell-basal { stroke: #b8c9d4; }
body.dark .dip-explorer .dipcell-soma { fill: #b8c9d4; }
body.dark .dip-explorer .dipcell.is-active .dipcell-apical, body.dark .dip-explorer .dipcell.is-active .dipcell-basal, body.dark .dip-explorer .dip-arrow { stroke: #80c6f0; }
body.dark .dip-explorer .dipcell.is-active .dipcell-soma, body.dark .dip-explorer .dip-arrow-head { fill: #80c6f0; }
body.dark .dip-active-halo { fill: #80c6f0; stroke: #80c6f0; }
body.dark .dip-explorer .dip-scalp { stroke: #7890a2; } body.dark .dip-explorer .dip-skull { stroke: #405565; }
body.dark .dip-explorer #dip-note { background: #253f51; }
body.dark .dip-negative { color: #80c6f0; } body.dark .dip-positive { color: #f6a28e; }
@container(max-width:680px) {
  .dip-explorer .dip-panels { grid-template-columns: minmax(0,1fr); }
  .dip-explorer .dip-adjustments { grid-template-columns: 1fr; gap: .8rem; }
  .dip-explorer .dip-fold-svg { max-height: 300px; }
  .dip-explorer .dip-readout { grid-template-columns: 1fr; gap: .7rem; }
}
@media(max-width:600px) {
  .dip-explorer { padding: .7rem; }
  .dip-explorer .dip-chip { font-size: .75rem; padding: .5rem .25rem; }
  .dip-explorer .dip-chip span { font-size: .68rem; }
  .dip-explorer .dip-anatomy, .dip-explorer .dip-stage { padding: .6rem; }
}

/* A compact laminar map alongside the dipole lesson. */
.cortical-layers { margin: 1.2rem 0; padding: 1rem; background: #f5f9fc; border: 1px solid #c9dce8; border-radius: 12px; }
.cortical-layers h3 { margin: 0 0 .6rem; font-size: 1.1rem; }
.cortical-layers p { font-size: .88rem; line-height: 1.6; }
.cortical-layers table { width: 100%; border-collapse: collapse; font-size: .86rem; line-height: 1.5; margin: .8rem 0; }
.cortical-layers caption { text-align: left; font-size: .76rem; color: #577084; padding-bottom: .5rem; }
.cortical-layers th, .cortical-layers td { padding: .65rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid #d6e3ed; }
.cortical-layers thead th { font-size: .75rem; color: #577084; }
.cortical-layers tbody th { width: 4rem; color: #1975aa; white-space: nowrap; }
.cortical-layers tbody th span { font-weight: 400; }
.cortical-layers .layer-input { background: #fff0d8; }
.cortical-layers .layer-input th { color: #85540e; }
.cortical-layers .layers-eeg-link { border-left: 3px solid #1975aa; padding-left: .8rem; }
.cortical-layers .layers-scope, .cortical-layers .layers-sources { font-size: .78rem; color: #577084; }
body.dark .cortical-layers { background: #182a38; border-color: #466174; }
body.dark .cortical-layers th, body.dark .cortical-layers td { border-color: #3d596c; }
body.dark .cortical-layers caption, body.dark .cortical-layers thead th, body.dark .cortical-layers .layers-scope, body.dark .cortical-layers .layers-sources { color: #b5cbd9; }
body.dark .cortical-layers tbody th { color: #80c6f0; }
body.dark .cortical-layers .layer-input { background: #413523; }
body.dark .cortical-layers .layer-input th { color: #f1c77e; }
@media(max-width:600px) { .cortical-layers { padding: .8rem; } .cortical-layers th, .cortical-layers td { padding: .6rem .4rem; } }

/* Keep voltage comparisons legible at the available canvas width. */
#amplitude-lab .amplitude-grid-note { margin: .6rem 1.4rem 0; font-size: .78rem; line-height: 1.5; color: #577084; }
#amplitude-lab .sensitivity-buttons { grid-template-columns: repeat(5,minmax(0,1fr)); }
#amplitude-lab .amplitude-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
body.dark #amplitude-lab .amplitude-grid-note { color: #b5cbd9; }
@media(max-width:700px) { #amplitude-lab .amplitude-controls { grid-template-columns: 1fr; } }

/* Ocular snapshots: distinguish eyelid motion from gaze rotation. */
#eye-lab { container-type: inline-size; }
#eye-lab .visual-lab-header { flex-wrap: wrap; gap: .8rem; }
#eye-lab .eye-animators { display: flex; flex-wrap: wrap; gap: .4rem; }
#eye-lab .eye-animators button { min-height: 42px; padding: .55rem .75rem; }
#eye-lab .eye-animators button[aria-pressed=true] { background: #0b6ab8; color: #fff; }
#eye-lab .eye-slider { grid-template-columns: auto minmax(50px,1fr) 3.4rem; min-width: 0; }
#eye-lab .eye-slider input { width: 100%; min-width: 0; }
#eye-lab .eye-lab-grid { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
#eye-lab .eye-anatomy-views { grid-template-columns: repeat(2,minmax(0,1fr)); }
#eye-lab .eye-anatomy svg { max-height: 260px; min-height: 0; margin: auto 0; }
#eye-lab .eye-view-title { font-size: .84rem; letter-spacing: 0; text-transform: none; }
#eye-lab .eye-view-sub, #eye-lab .eye-view-hint { font-size: .73rem; line-height: 1.5; letter-spacing: 0; font-weight: 400; }
#eye-lab .eye-view-profile { order: initial; }
#eye-lab .eye-blink-lid rect { fill: #e2c0a6; }
#eye-lab .eye-blink-lid path { fill: none; stroke: #96634a; stroke-width: 2.5; }
#eye-lab .eye-profile-lid { fill: none; stroke: #96634a; stroke-width: 13; stroke-linecap: round; }
#eye-lab .eye-trace-heading { display: flex; flex-direction: column; gap: .25rem; padding: .8rem; font-size: .9rem; }
#eye-lab .eye-trace-heading span { color: #577084; font-size: .74rem; }
#eye-lab .eye-traces { background: #fff; }
#eye-lab .eye-anatomy { display: flex; flex-direction: column; }
#eye-lab .eye-anatomy-views { flex: 1; }
#eye-lab .eye-anatomy figcaption, #eye-lab #eye-explain { line-height: 1.6; font-size: .81rem; border-top: 1px solid #dce7ee; }
#eye-lab .eye-model-notes { font-size: .8rem; line-height: 1.6; margin-top: .8rem; color: #577084; }
#eye-lab .eye-model-notes summary { cursor: pointer; font-weight: 600; }
#eye-lab :focus-visible { outline: 3px solid #b66e14; outline-offset: 3px; }
body.dark #eye-lab .eye-traces { background: #182a38; }
body.dark #eye-lab .eye-trace-heading span, body.dark #eye-lab .eye-model-notes { color: #b5cbd9; }
body.dark #eye-lab .eye-anatomy figcaption, body.dark #eye-lab #eye-explain { border-color: #3d596c; }
@container(max-width:750px) { #eye-lab .eye-lab-grid { grid-template-columns: 1fr; } }
@container(max-width:440px) { #eye-lab .eye-anatomy-views { grid-template-columns: 1fr; } #eye-lab .eye-anatomy svg { max-height: 190px; } #eye-lab .eye-view-front { border-right: 0; } }

#eye-lab .eye-sagittal-svg .eye-electrodes text { font-size: 25px; }
#eye-lab .eye-front-svg .eye-electrodes text { font-size: 19px; }
body.dark #eye-lab .eye-slider, body.dark #eye-lab .visual-kicker { color: #b5cbd9; }
body.dark #eye-lab .eye-slider output, body.dark #eye-lab .eye-electrodes text { color: #80c6f0; fill: #80c6f0; }
body.dark #eye-lab .visual-replay { background: #203c50; color: #e1edf5; border-color: #718fa5; }
body.dark #eye-lab .visual-replay[aria-pressed=true] { background: #246fa9; border-color: #80c6f0; }
@container(max-width:440px) { #eye-lab .eye-animators { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } }