/* Instrument bench: slate-grey surfaces, off-white type and one blue accent.
   Share these colors with SVG instruments and WebGL so all views read as one desk. */
:root {
  color-scheme:dark;
  --paper:#24282d;
  --ground:#292f35;
  --ink:#f3f0e8;
  --muted:#b8c0c8;
  --rule:#48515b;
  --control-rule:#7c8895;
  --accent:#81b9ee;
  --accent-wash:#293e51;
  --accent-hover:#a6d1f7;
  --on-accent:#172633;
  --panel:#2c3238;
  --rail:#20252a;
  --plot-grid:#495560;
  --plot-grid-fine:#36404a;
  --surface-raised:#343b42;
  --surface-hover:#323d47;
  --overlay:#242a30eb;
  --caption-ground:#242a30ef;
  --secondary-ink:#d5dbe0;
  --switch-active:#294967;
  --poster-ground:#eceae2;
  --poster-ink:#303740;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:"Helvetica Neue",Arial,sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.55
}
button,input,select {
  font:inherit
}
button,a,input {
  touch-action:manipulation
}
a {
  color:inherit;
  text-underline-offset:4px
}
button {
  cursor:pointer;
  border:1px solid var(--control-rule);
  color:var(--ink);
  background:transparent;
  padding:8px 12px;
  border-radius:3px
}
button:hover {
  background:var(--accent-wash);
  border-color:var(--accent)
}
button:disabled {
  opacity:.4;
  cursor:default
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px
}
button.primary,.check-button {
  background:var(--accent);
  color:var(--on-accent);
  font-weight:600;
  border-color:var(--accent)
}
button.primary:hover,.check-button:hover {
  background:var(--accent-hover)
}
.skip {
  position:absolute;
  left:18px;
  top:-60px;
  z-index:20;
  background:var(--accent);
  color:var(--on-accent);
  padding:12px
}
.skip:focus {
  top:12px
}
.masthead {
  display:flex;
  align-items:center;
  gap:28px;
  padding:17px 32px;
  border-bottom:1px solid var(--rule);
  min-height:72px
}
.wordmark {
  font-size:12px;
  font-weight:750;
  letter-spacing:1.2px;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap
}
.mark {
  font-size:38px;
  color:var(--accent);
  line-height:24px;
  font-weight:400
}
.page-nav {
  display:flex;
  gap:25px;
  align-items:center;
  flex:1;
  flex-wrap:wrap
}
.page-nav a {
  font-size:13px;
  text-decoration:none;
  position:relative;
  white-space:nowrap
}
.page-nav a[aria-current=page] {
  color:var(--accent);
  font-weight:650
}
.page-nav a[aria-current=page]:after {
  content:"";
  position:absolute;
  height:2px;
  background:var(--accent);
  bottom:-24px;
  left:0;
  right:0
}
.source-download {
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap
}
.source-download span {
  color:var(--accent);
  margin-left:8px
}
.title-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:30px 32px 28px;
  gap:30px
}
.title-row h1 {
  font-size:clamp(28px,3vw,43px);
  line-height:1.12;
  font-weight:550;
  letter-spacing:-1.8px;
  margin:0 0 9px
}
.title-row p {
  margin:0;
  color:var(--muted);
  font-size:15px
}
.edition {
  font-size:12px;
  line-height:1.8;
  text-align:right;
  white-space:nowrap
}
.edition>span:last-child {
  color:var(--muted)
}
.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--accent);
  border-radius:50%;
  margin-right:6px
}
.workbench {
  display:grid;
  grid-template-columns:218px minmax(0,1fr) 355px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  min-height:720px
}
.lesson-rail {
  border-right:1px solid var(--rule);
  padding:24px 17px;
  background:var(--rail)
}
.rail-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:16px;
  padding:0 7px
}
.rail-heading h2 {
  font-weight:600;
  font-size:15px;
  margin:0
}
.rail-heading span {
  font-family:var(--mono);
  font-size:10px;
  color:var(--muted)
}
#lessons-nav {
  display:flex;
  flex-direction:column;
  gap:3px
}
.lesson-link {
  display:block;
  text-decoration:none;
  padding:12px 10px;
  border-left:2px solid transparent;
  font-size:12px;
  line-height:1.35;
  position:relative
}
.lesson-link .duration {
  display:block;
  color:var(--muted);
  font-family:var(--mono);
  font-size:10px;
  margin-top:4px
}
.lesson-link:hover {
  background:var(--accent-wash)
}
.lesson-link.active {
  background:var(--paper);
  border-left-color:var(--accent);
  color:var(--accent);
  font-weight:600
}
.lesson-link.reviewed:after {
  content:"✓";
  position:absolute;
  right:10px;
  top:11px;
  font-size:12px
}
.review-progress {
  padding:22px 7px 0;
  margin-top:22px;
  border-top:1px solid var(--rule)
}
.review-progress>span {
  font-family:var(--mono);
  font-size:11px
}
.review-progress p {
  font-size:11px;
  color:var(--muted);
  margin:10px 0
}
.review-progress progress {
  appearance:none;
  width:100%;
  height:3px;
  display:block;
  margin-top:10px;
  border:0;
  background:var(--rule)
}
.review-progress progress::-webkit-progress-bar {
  background:var(--rule)
}
.review-progress progress::-webkit-progress-value {
  background:var(--accent)
}
.review-progress progress::-moz-progress-bar {
  background:var(--accent)
}
.text-button {
  border:0;
  font-size:11px;
  padding:0;
  text-decoration:underline;
  text-underline-offset:4px
}
.model-column {
  min-width:0;
  display:flex;
  flex-direction:column;
  background:var(--ground)
}
.model-heading {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  font-size:12px;
  padding:17px 22px;
  border-bottom:1px solid var(--rule)
}
.mono {
  font-family:var(--mono);
  font-size:10px;
  color:var(--muted)
}
.model-stage {
  position:relative;
  min-height:380px;
  height:min(47vw,500px);
  flex:1;
  overflow:hidden;
  background:var(--ground)
}
#model {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  touch-action:pan-y
}
#model.ready {
  opacity:1
}
.poster {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:contain;
  /* The authored still has a paper studio ground. Match its letterboxing so
     the dark fallback labels remain readable at every stage aspect ratio. */
  background:var(--poster-ground);
  inset:0;
  mix-blend-mode:normal
}
.poster.hidden {
  visibility:hidden
}
.scene-labels {
  position:absolute;
  top:18px;
  left:22px;
  right:22px;
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:9px;
  color:var(--muted);
  pointer-events:none
}
.viewer-help {
  position:absolute;
  bottom:20px;
  left:0;
  right:0;
  text-align:center;
  font-family:var(--mono);
  font-size:9px;
  pointer-events:none;
  color:var(--muted)
}
.model-error {
  position:absolute;
  bottom:50px;
  left:25px;
  right:25px;
  background:var(--paper);
  border:1px solid var(--rule);
  padding:15px;
  font-size:12px
}
.model-error p {
  margin:0 0 10px
}
.view-controls {
  padding:15px 20px;
  border-top:1px solid var(--rule);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 18px
}
.view-buttons {
  display:flex;
  gap:3px;
  flex-wrap:wrap
}
.view-buttons button {
  border:0;
  font-size:11px;
  padding:6px 9px
}
.view-buttons button[aria-pressed=true] {
  background:var(--accent);
  color:var(--on-accent)
}
#touch-rotate {
  display:none
}
.explode-control {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  flex:1;
  min-width:200px;
  justify-content:flex-end
}
.explode-control input {
  width:100%;
  min-width:65px;
  max-width:115px;
  height:22px;
  accent-color:var(--accent);
  cursor:pointer
}
.explode-control output {
  font-family:var(--mono);
  font-size:10px;
  width:32px
}
.extra-controls {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  font-size:11px
}
.extra-controls label {
  margin-right:auto;
  display:flex;
  gap:6px;
  align-items:center
}
.extra-controls input {
  accent-color:var(--accent)
}
.extra-controls button {
  border:0;
  font-size:11px;
  padding:3px 8px
}
.part-inspector {
  background:var(--paper);
  padding:18px 22px;
  min-height:125px;
  border-top:1px solid var(--rule)
}
.part-title {
  font-weight:600;
  font-size:13px
}
.part-inspector p {
  font-size:11px;
  color:var(--muted);
  margin:4px 0 12px
}
.part-focus {
  display:flex;
  gap:6px;
  flex-wrap:wrap
}
.part-focus button {
  font-family:var(--mono);
  font-size:10px;
  padding:5px 9px;
  min-height:30px
}
.part-focus button[aria-pressed=true] {
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent)
}
.model-note {
  font-size:10px;
  line-height:1.6;
  color:var(--muted);
  padding:13px 22px;
  margin:0;
  border-top:1px solid var(--rule);
  background:var(--paper)
}
.lesson-panel {
  border-left:1px solid var(--rule);
  padding:24px 25px 22px;
  background:var(--panel);
  max-height:1000px;
  overflow-y:auto
}
.lesson-meta {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px;
  font-size:10px;
  color:var(--muted)
}
.lesson-panel h2 {
  font-size:27px;
  line-height:1.15;
  font-weight:500;
  letter-spacing:-.75px;
  margin:0 0 16px
}
.lesson-panel h3 {
  font-size:12px;
  font-weight:650;
  margin:24px 0 10px
}
.lesson-panel p {
  font-size:12px;
  line-height:1.7
}
.lesson-panel .lesson-lede {
  font-size:14px;
  line-height:1.6;
  margin:0 0 15px
}
.bench-actions {
  padding:0;
  list-style:none;
  counter-reset:bench
}
.bench-actions li {
  counter-increment:bench;
  position:relative;
  padding:0 0 15px 25px;
  margin:0 0 15px;
  border-bottom:1px solid var(--rule);
  font-size:12px;
  line-height:1.65
}
.bench-actions li:before {
  content:counter(bench);
  position:absolute;
  left:0;
  top:1px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--accent)
}
.checkpoint {
  border-left:2px solid var(--accent);
  padding-left:13px;
  margin:20px 0
}
.checkpoint h3 {
  margin:0 0 5px
}
.checkpoint p {
  margin:0
}
fieldset {
  border:0;
  padding:0;
  margin:0
}
legend {
  font-size:12px;
  font-weight:600;
  margin:0 0 12px;
  line-height:1.5
}
#answers label {
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:11px;
  line-height:1.6;
  margin:9px 0;
  cursor:pointer
}
#answers input {
  margin:4px 0 0;
  accent-color:var(--accent);
  flex-shrink:0
}
#answers label span {
  flex:1
}
.check-button {
  padding:7px 12px;
  margin-top:8px;
  font-size:11px
}
#feedback {
  min-height:1px;
  font-size:11px
}
#feedback.correct {
  color:var(--ink)
}
.teaching-note {
  font-size:11px;
  padding-top:14px;
  border-top:1px solid var(--rule)
}
summary {
  cursor:pointer
}
.teaching-note p {
  font-size:11px
}
.lesson-footer {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:25px
}
.lesson-footer button {
  font-size:11px;
  min-height:38px
}
.reference-panel {
  padding:35px 6vw 60px;
  border-top:1px solid var(--rule)
}
.reference-intro {
  max-width:780px;
  margin-bottom:30px
}
.reference-intro h2 {
  font-size:34px;
  line-height:1.15;
  font-weight:500;
  letter-spacing:-1px;
  margin:0 0 12px
}
.reference-intro p {
  font-size:15px;
  color:var(--muted);
  line-height:1.7;
  margin:0
}
.circuit-layout {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(230px,1fr);
  gap:40px
}
.reference-panel figure {
  margin:0
}
.reference-panel figure img {
  width:100%;
  display:block;
  background:var(--ground);
  border:1px solid var(--rule)
}
figcaption {
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
  margin-top:10px
}
.reference-panel h3 {
  font-size:17px;
  font-weight:550;
  margin:25px 0 10px
}
.circuit-notes h3:first-child {
  margin-top:0
}
.reference-panel p {
  font-size:13px;
  line-height:1.75
}
.inline-link {
  display:block;
  color:var(--accent);
  font-size:12px;
  margin:14px 0
}
.two-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  margin:40px 0 0;
  border-top:1px solid var(--rule);
  padding-top:6px
}
.reference-panel table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  text-align:left
}
caption {
  text-align:left;
  font-size:11px;
  color:var(--muted);
  padding:0 0 12px
}
th,td {
  border-bottom:1px solid var(--rule);
  padding:12px 14px 12px 0;
  vertical-align:top
}
th {
  font-size:11px;
  color:var(--muted);
  font-weight:550
}
td:first-child {
  font-family:var(--mono);
  font-size:11px
}
td code {
  font-size:10px
}
.all-nets {
  border-top:1px solid var(--rule);
  margin-top:35px;
  padding-top:20px
}
.table-scroll {
  overflow:auto
}
.parts-alert {
  border-left:2px solid var(--accent);
  padding:4px 0 4px 18px;
  margin:0 0 28px;
  max-width:850px
}
.parts-alert strong {
  font-weight:550;
  font-size:15px
}
.parts-alert p {
  margin:7px 0
}
.parts-layout {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:35px;
  align-items:start
}
.evidence-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin-bottom:25px
}
.evidence-strip>div {
  padding:20px 25px 20px 0;
  display:flex;
  flex-direction:column;
  gap:5px
}
.evidence-strip strong {
  font-size:15px;
  font-weight:550
}
.evidence-strip span {
  font-size:12px;
  color:var(--muted)
}
.sources-list>article {
  display:grid;
  grid-template-columns:150px 1fr;
  gap:25px;
  border-bottom:1px solid var(--rule);
  padding:23px 0
}
.sources-list .source-kind {
  font-family:var(--mono);
  font-size:10px;
  color:var(--muted);
  padding-top:3px
}
.sources-list h3 {
  margin:0;
  font-size:16px
}
.sources-list h3 a {
  text-decoration:none
}
.sources-list h3 a:after {
  content:" ↗";
  color:var(--accent)
}
.sources-list p {
  margin:7px 0 0;
  font-size:12px;
  max-width:780px
}
.muted {
  color:var(--muted)
}
code {
  font-family:var(--mono);
  font-size:11px;
  overflow-wrap:anywhere
}
.site-footer {
  padding:22px 32px;
  display:flex;
  justify-content:space-between;
  gap:25px;
  flex-wrap:wrap;
  font-size:10px;
  color:var(--muted)
}
#storage-note {
  display:block!important;
  font-size:10px!important;
  color:var(--accent);
  margin-top:8px
}
.noscript,#app-error {
  padding:20px 32px;
  border-top:1px solid var(--rule)
}
[hidden] {
  display:none!important
}
@media(min-width:1650px) {
  .workbench {
    grid-template-columns:240px minmax(0,1fr) 395px
  }
  .lesson-panel {
    padding:27px 32px
  }
  .model-stage {
    height:570px
  }
  .lesson-panel p,.bench-actions li {
    font-size:13px
  }
}
@media(max-width:1180px) {
  .masthead {
    padding:15px 22px;
    gap:20px
  }
  .page-nav {
    gap:16px
  }
  .page-nav a {
    font-size:11px
  }
  .source-download {
    font-size:11px
  }
  .title-row {
    padding:25px 22px
  }
  .workbench {
    grid-template-columns:190px minmax(0,1fr) 310px
  }
  .lesson-rail {
    padding:22px 10px
  }
  .lesson-panel {
    padding:22px 20px
  }
  .scene-labels {
    font-size:8px;
    left:15px;
    right:15px
  }
  .model-heading {
    padding:16px 15px;
    font-size:11px
  }
  .model-heading .mono {
    font-size:9px
  }
  .view-controls {
    padding:13px
  }
  .explode-control {
    justify-content:flex-start
  }
  .model-stage {
    min-height:350px
  }
  .lesson-panel h2 {
    font-size:24px
  }
}
@media(max-width:960px) {
  .masthead {
    flex-wrap:wrap;
    gap:16px 25px
  }
  .page-nav {
    order:3;
    flex-basis:100%;
    gap:24px
  }
  .page-nav a {
    font-size:12px
  }
  .page-nav a[aria-current=page]:after {
    bottom:-15px
  }
  .source-download {
    margin-left:auto
  }
  .title-row h1 {
    font-size:34px
  }
  .edition {
    font-size:10px
  }
  .workbench {
    grid-template-columns:190px minmax(0,1fr)
  }
  .lesson-rail {
    grid-row:1 / 3
  }
  .lesson-panel {
    grid-column:2;
    border-left:0;
    border-top:1px solid var(--rule);
    max-height:none;
    padding:30px
  }
  .model-stage {
    height:460px;
    flex:none
  }
  .model-column {
    display:flex
  }
  .view-controls {
    justify-content:space-between
  }
  .explode-control {
    flex:0 1 220px;
    justify-content:flex-end
  }
  .extra-controls {
    width:auto;
    flex:1
  }
  .part-inspector {
    min-height:100px
  }
  .lesson-panel h2 {
    font-size:30px
  }
  .lesson-panel p,.bench-actions li {
    font-size:14px
  }
  .lesson-panel .lesson-lede {
    font-size:16px
  }
  .lesson-panel h3,legend {
    font-size:14px
  }
  #answers label {
    font-size:13px
  }
  .lesson-panel .teaching-note p {
    font-size:12px
  }
  .circuit-layout {
    grid-template-columns:1fr
  }
  .circuit-notes {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 35px
  }
  .circuit-notes h3 {
    margin-top:25px!important
  }
  .parts-layout {
    grid-template-columns:1fr
  }
  .parts-layout figure {
    max-width:650px
  }
}
@media(max-width:650px) {
  .masthead {
    padding:17px 18px;
    gap:17px
  }
  .wordmark {
    font-size:10px
  }
  .source-download {
    font-size:10px
  }
  .page-nav {
    gap:9px 22px
  }
  .page-nav a {
    font-size:11px;
    white-space:normal
  }
  .page-nav a[aria-current=page]:after {
    bottom:-3px
  }
  .title-row {
    display:block;
    padding:25px 18px 21px
  }
  .title-row h1 {
    font-size:31px;
    letter-spacing:-1px;
    max-width:340px
  }
  .title-row p {
    font-size:13px;
    max-width:300px
  }
  .edition {
    font-size:10px;
    text-align:left;
    margin-top:14px;
    line-height:1.7
  }
  .edition br {
    display:none
  }
  .edition>span:last-child {
    margin-left:8px
  }
  .workbench {
    display:flex;
    flex-direction:column;
    min-height:0
  }
  .lesson-rail {
    border-right:0;
    border-bottom:1px solid var(--rule);
    padding:18px
  }
  .rail-heading {
    padding:0;
    margin-bottom:12px
  }
  #lessons-nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px 9px
  }
  .lesson-link {
    font-size:11px;
    padding:10px 8px;
    min-height:54px
  }
  .lesson-link .duration {
    font-size:9px;
    margin-top:3px
  }
  .review-progress {
    margin-top:13px;
    padding:12px 0 0;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px
  }
  .review-progress progress {
    margin:0;
    flex:1;
    min-width:50px
  }
  .review-progress p {
    display:none
  }
  .review-progress .text-button {
    font-size:9px
  }
  #storage-note:empty {
    display:none!important
  }
  .model-heading {
    padding:15px 18px
  }
  .model-stage {
    height:370px;
    min-height:370px
  }
  .scene-labels {
    top:17px;
    font-size:8px;
    flex-direction:column;
    gap:4px
  }
  .viewer-help {
    font-size:8px;
    bottom:16px
  }
  .view-controls {
    padding:13px 18px;
    gap:12px
  }
  .view-buttons {
    gap:1px
  }
  .view-buttons button {
    font-size:10px;
    padding:7px 8px
  }
  .explode-control {
    justify-content:flex-start;
    flex:1;
    min-width:220px
  }
  .explode-control input {
    flex:1;
    max-width:none
  }
  .extra-controls {
    width:100%;
    flex:auto
  }
  .part-inspector {
    padding:17px 18px
  }
  .model-note {
    padding:12px 18px
  }
  .lesson-panel {
    padding:27px 22px
  }
  .lesson-panel h2 {
    font-size:28px
  }
  .lesson-footer button {
    min-height:44px
  }
  .reference-panel {
    padding:30px 20px 45px
  }
  .reference-intro h2 {
    font-size:29px
  }
  .reference-intro p {
    font-size:14px
  }
  .circuit-layout {
    gap:25px
  }
  .circuit-notes {
    display:block
  }
  .two-columns {
    grid-template-columns:1fr;
    gap:20px;
    margin-top:25px
  }
  .evidence-strip {
    grid-template-columns:1fr
  }
  .evidence-strip>div {
    padding:15px 0;
    border-bottom:1px solid var(--rule)
  }
  .evidence-strip>div:last-child {
    border:0
  }
  .sources-list>article {
    grid-template-columns:1fr;
    gap:8px
  }
  .sources-list h3 {
    font-size:15px
  }
  .site-footer {
    padding:22px 18px;
    gap:12px
  }
  .site-footer>span:nth-child(2) {
    display:none
  }
}
@media(pointer:coarse) {
  #touch-rotate {
    display:block
  }
  .view-buttons button,.extra-controls button {
    min-height:40px
  }
  .part-focus button {
    min-height:40px
  }
  .text-button {
    min-height:32px
  }
  .page-nav a {
    min-height:30px;
    display:flex;
    align-items:center
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
}

/* The simulation is a single instrument desk: open columns, explicit units,
   and the same slate grey, off-white text and blue accent as the build lessons. */
.lab-panel {border-top:1px solid var(--rule);padding:28px 32px 45px}
.lab-intro {display:flex;justify-content:space-between;gap:25px;align-items:center;margin-bottom:25px}
.lab-intro h1 {font-size:34px;font-weight:500;line-height:1.15;letter-spacing:-1px;margin:0 0 10px}
.lab-intro p {margin:0;max-width:680px;color:var(--muted);font-size:14px}
.lab-evidence {font-family:var(--mono);font-size:10px;line-height:1.8;text-align:right;white-space:nowrap;color:var(--muted)}
.lab-desk {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);border:1px solid var(--rule)}
.lab-scene-column {background:var(--ground);min-width:0;border-right:1px solid var(--rule)}
.lab-model-desk {background:var(--ground)}
@media(min-width:961px) and (min-height:700px) {
  /* Keep the circuit in view while the learner reads the longer instruments. */
  .lab-model-desk {position:sticky;top:16px}
}
.lab-instruments {min-width:0;background:var(--panel)}
.lab-section-heading {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--rule)}
.lab-section-heading h2 {font-weight:600;font-size:13px;margin:0}
.lab-stage {position:relative;height:380px;overflow:hidden}
.lab-stage canvas,.lab-stage>img {position:absolute;inset:0;width:100%;height:100%;display:block}
.lab-stage>img {object-fit:contain;mix-blend-mode:normal;background:var(--poster-ground)}
.lab-stage canvas {opacity:0;touch-action:pan-y}
.lab-stage canvas.ready {opacity:1}
.lab-flow-label {position:absolute;bottom:16px;left:20px;font-family:var(--mono);font-size:9px;color:var(--muted);pointer-events:none}
.lab-model-error {position:absolute;inset:auto 20px 45px;background:var(--paper);border:1px solid var(--rule);padding:12px;font-size:11px}
.lab-model-error p {margin:0 0 8px}
.lab-model-error button {font-size:11px}
.lab-model-controls {display:flex;gap:8px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:11px 15px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.lab-model-controls>button {font-size:10px;padding:6px;border:0}
#lab-touch {display:none}
.flow-modes {padding:17px 20px 0}
.flow-modes legend {padding:15px 0 0;font-size:11px;font-weight:600}
.flow-modes>div {display:flex;flex-wrap:wrap;gap:5px}
.flow-modes button {font-size:10px;padding:7px 9px;min-height:34px}
.flow-modes button[aria-pressed=true] {background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.flow-explanation {font-size:11px;line-height:1.7;margin:12px 20px 20px;max-width:600px;min-height:57px;color:var(--muted)}
.probe-desk {padding:18px 20px 20px;border-top:1px solid var(--rule);background:var(--paper)}
.probe-desk label {font-size:11px;font-weight:600;display:block;margin-bottom:8px}
.lab-panel select {font:inherit;max-width:100%;border:1px solid var(--control-rule);border-radius:2px;background:var(--panel);color:var(--ink);padding:8px 27px 8px 9px;min-height:36px}
.probe-desk select {width:100%;font-size:12px}
.probe-desk p {font-size:11px;line-height:1.7;margin:12px 0}
.probe-desk dl {display:grid;grid-template-columns:1fr auto;font-size:10px;gap:6px;margin:0}
.probe-desk dt {color:var(--muted)}
.probe-desk dd {font-family:var(--mono);margin:0;text-align:right}
.lab-settings {padding:17px 20px;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;border-bottom:1px solid var(--rule)}
.lab-settings label {font-size:10px;line-height:1.5;min-width:0}
.lab-settings select {font-size:11px;display:block;margin-top:5px;width:100%}
.lab-meters {display:grid;grid-template-columns:1fr 1fr;margin:0;padding:4px 20px 15px;border-bottom:1px solid var(--rule)}
.lab-meters>div {padding:12px 8px 0 0}
.lab-meters dt {font-size:10px;color:var(--muted);margin:0 0 4px}
.lab-meters dd {font-family:var(--mono);font-size:23px;letter-spacing:-.8px;line-height:1.2;margin:0}
.scope-figure,.response-figure {margin:0;padding:15px 18px 12px}
.plot-heading {display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 9px;flex-wrap:wrap}
.plot-heading h3 {font-size:12px;font-weight:600;margin:0}
.plot-heading .mono {font-size:8px}
.scope-figure svg,.response-figure svg {display:block;width:100%;height:auto;overflow:visible;font-family:var(--mono)}
.plot-label {font-size:12px;letter-spacing:.25px}
.plot-unit {font-size:11px}
.scope-figure figcaption,.response-figure figcaption {font-size:10px;line-height:1.6;margin-top:7px}
.lab-transport {border-bottom:1px solid var(--rule);padding:0 20px 15px;display:flex;align-items:center;gap:8px}
.lab-transport button {font-size:10px;padding:7px 9px;min-height:34px}
#sim-play {border-color:var(--accent);color:var(--accent);min-width:84px}
.lab-transport label {font-size:10px;display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.lab-transport input {min-width:25px;width:100%;accent-color:var(--accent);height:25px}
.lab-transport output {font-family:var(--mono);font-size:9px;white-space:nowrap;min-width:52px}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Cursor values form one quiet instrument strip. Keep the sign and units
   visible so a matching trace height cannot be mistaken for equal voltage. */
#scope-plot {touch-action:pan-y;cursor:crosshair}
.cursor-desk {padding:17px 20px 15px;border-bottom:1px solid var(--rule)}
.cursor-heading {display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.cursor-heading h3 {font-size:12px;font-weight:600;margin:0}
.cursor-heading button {font-size:10px;min-height:36px;padding:7px 9px}
.cursor-desk p {font-size:10px;line-height:1.7;color:var(--muted);margin:10px 0}
.cursor-form {display:flex;align-items:center;gap:8px;margin:12px 0}
.cursor-form label {font-size:11px;flex:1}
.cursor-form label span {font-size:10px;color:var(--muted);margin-left:5px}
.cursor-form input {width:100px;min-width:0;min-height:38px;background:var(--panel);border:1px solid var(--control-rule);border-radius:2px;color:var(--ink);padding:6px 8px;font:12px var(--mono)}
.cursor-form input[aria-invalid=true] {border-color:var(--accent)}
.cursor-form button {font-size:11px;min-height:38px}
#cursor-table {width:100%;border-collapse:collapse;font-size:11px;table-layout:fixed}
#cursor-table th,#cursor-table td {text-align:right;padding:9px 0 9px 8px;border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
#cursor-table thead th {font-size:10px;font-weight:500;color:var(--muted)}
#cursor-table th:first-child {text-align:left;width:20%;padding-left:0;font-weight:500}
#cursor-table td {font-family:var(--mono);font-variant-numeric:tabular-nums}
#cursor-table td:last-child {color:var(--accent)}
.cursor-desk #cursor-method {font-size:9px;margin-bottom:0}
.cursor-desk #cursor-status,.cursor-desk #cursor-coverage {color:var(--accent)}
#cursor-status:empty,#cursor-coverage:empty {display:none}
.lab-assumptions {margin-top:25px;padding-top:18px;border-top:1px solid var(--rule);font-size:12px}
.lab-assumptions>div {max-width:1000px;padding-top:10px}
.lab-assumptions p {font-size:12px;line-height:1.8;color:var(--muted)}
.lab-downloads {display:flex;gap:12px 25px;flex-wrap:wrap}
.lab-downloads a,#lab-error a {font-size:11px;color:var(--accent)}
#lab-error {padding:20px;border:1px solid var(--rule);font-size:13px}
#lab-error a {display:inline-block;margin:12px}
.model-note a {white-space:nowrap;color:var(--accent)}
@media(max-width:1180px) {
  .lab-panel {padding:25px 22px}
  .lab-stage {height:350px}
  .lab-section-heading {padding:13px 15px}
  .lab-section-heading .mono {font-size:8px}
  .lab-settings {padding:15px;gap:11px}
  .lab-settings select {font-size:10px}
  .flow-modes {padding:14px 15px 0}
  .flow-explanation {margin:12px 15px 18px}
  .flow-modes button {font-size:9px}
  .probe-desk {padding:17px 15px}
}
@media(max-width:960px) {
  .lab-evidence {font-size:8px}
  .lab-intro h1 {font-size:30px}
  .lab-desk {grid-template-columns:1fr}
  .lab-scene-column {border-right:0;border-bottom:1px solid var(--rule)}
  .lab-stage {height:430px}
  .flow-explanation {min-height:0}
  .lab-instruments {padding-bottom:10px}
  .lab-settings {grid-template-columns:repeat(4,minmax(0,1fr))}
  .lab-meters {grid-template-columns:repeat(4,minmax(0,1fr))}
  .probe-desk {display:grid;grid-template-columns:1fr 1.3fr;gap:8px 25px}
  .probe-desk label {grid-column:1}
  .probe-desk select {grid-column:1}
  .probe-desk p {grid-column:2;grid-row:1 / 3;margin:0}
  .probe-desk dl {grid-column:1 / 3}
}
@media(max-width:650px) {
  .lab-panel {padding:25px 18px 35px}
  .lab-intro {display:block}
  .lab-intro h1 {font-size:29px}
  .lab-intro p {font-size:13px}
  .lab-evidence {display:block;text-align:left;font-size:9px;margin-top:14px;white-space:normal}
  .lab-evidence br {display:block}
  .lab-stage {height:310px}
  .lab-model-controls {padding:10px}
  .lab-model-controls .view-buttons button {padding:7px;font-size:10px}
  .lab-section-heading {padding:13px 12px}
  .lab-section-heading h2 {font-size:12px}
  .lab-flow-label {font-size:8px;left:12px;right:12px}
  .lab-settings {grid-template-columns:1fr 1fr;padding:14px 12px;gap:13px 10px}
  .lab-settings select {font-size:10px;padding:8px 17px 8px 7px}
  .lab-meters {grid-template-columns:1fr 1fr;padding:3px 12px 16px}
  .lab-meters dd {font-size:23px}
  .flow-modes {padding:13px 12px 0}
  .flow-modes button {font-size:10px;padding:8px 9px}
  .flow-explanation {font-size:11px;margin:12px}
  .probe-desk {display:block;padding:16px 12px}
  .probe-desk p {margin:10px 0}
  .scope-figure,.response-figure {padding:15px 8px 12px}
  .plot-heading {padding:0 4px}
  .plot-heading .mono {font-size:8px}
  .plot-unit {font-size:17px}
  .plot-label {font-size:17px}
  .lab-transport {flex-wrap:wrap;padding:0 12px 15px}
  .lab-transport label {flex-basis:100%;margin-top:4px}
  .lab-transport output {font-size:10px}
  .cursor-desk {padding:15px 12px}
  .cursor-form input {width:105px}
  #cursor-table {font-size:10px}
  #cursor-table thead th {font-size:9px}
  .lab-assumptions {font-size:11px}
  .lab-assumptions p {font-size:11px}
}
@media(pointer:coarse) {
  #lab-touch {display:block}
  .flow-modes button,.lab-model-controls button,.lab-transport button,.lab-panel select {min-height:42px}
  .cursor-heading button,.cursor-form input,.cursor-form button {min-height:44px}
}

/* Experiments share the workbench grid. A prompt, a measurement and a source
   connection stay adjacent instead of becoming three disconnected pages. */
.experiment-nav {display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--rule);margin-top:8px}
.experiment-nav button {border:0;border-radius:0;padding:12px 18px;font-size:12px;position:relative;min-height:44px}
.experiment-nav button:first-child {padding-left:0;padding-right:24px}
.experiment-nav button[aria-pressed=true] {font-weight:650;color:var(--accent)}
.experiment-nav button[aria-pressed=true]:after {content:"";position:absolute;inset:auto 0 -1px;height:2px;background:var(--accent)}
.experiment-hint {font-size:11px;color:var(--muted);margin:12px 0 20px;max-width:800px}
.experiment-panel {padding:22px 22px 18px;background:var(--paper);border-bottom:1px solid var(--rule)}
.experiment-heading {display:flex;align-items:baseline;justify-content:space-between;gap:15px}
.experiment-heading h2 {font-size:21px;line-height:1.25;letter-spacing:-.5px;margin:0;font-weight:600;max-width:400px}
.experiment-heading .mono {font-size:10px;color:var(--accent)}
.experiment-panel>p,.experiment-panel form+p,.experiment-panel #experiment-observation p {font-size:12px;line-height:1.7;margin:12px 0}
.experiment-panel #experiment-intro {color:var(--muted)}
.experiment-panel legend {font-size:12px;font-weight:650;margin:8px 0 10px;padding:0}
.bench-choices {display:grid;gap:0;margin-bottom:12px}
.bench-choices label {display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.55;padding:10px 2px;border-bottom:1px solid var(--rule);cursor:pointer;min-height:42px}
.bench-choices input {accent-color:var(--accent);margin:3px 0 0;flex:none;width:15px;height:15px}
.bench-choices label:has(input:checked) {color:var(--accent);font-weight:550}
.bench-choices label:has(input:disabled) {cursor:default}
.experiment-panel button {font-size:11px;min-height:38px}
.experiment-panel #prediction-status,.experiment-panel #reflection-status {color:var(--accent)}
.experiment-panel #prediction-status:empty,.experiment-panel #reflection-status:empty {display:none}
#experiment-observation {padding-top:14px;border-top:1px solid var(--rule);margin-top:16px}
#experiment-observation h3 {font-size:12px;margin:0}
#reflection-form {margin-top:18px}
#experiment-inspect {font-size:11px;color:var(--muted);line-height:1.7}
.experiment-links {display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}
.experiment-links a {font-size:11px;color:var(--accent)}
.experiment-links .text-button {padding:5px 0}
.guided-settings-note {font-size:10px;color:var(--muted);margin:0;padding:10px 20px;border-bottom:1px solid var(--rule)}
.probe-trace-note {font-size:10px;line-height:1.7;color:var(--muted);margin:0;padding:0 20px 18px;background:var(--paper)}
.lab-settings select:disabled {opacity:.75;cursor:default}
.lab-panel select:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.comparison-desk {padding:16px 20px 15px;border-bottom:1px solid var(--rule)}
.comparison-heading {display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.comparison-heading h3 {font-size:12px;margin:0;font-weight:600}
.comparison-heading>div {display:flex;gap:8px}
.comparison-heading button {font-size:10px;padding:7px 9px;min-height:34px}
.comparison-desk p {font-size:10px;line-height:1.7;color:var(--muted);margin:10px 0}
.comparison-desk #baseline-status {font-family:var(--mono);overflow-wrap:anywhere}
.comparison-table-scroll {overflow-x:auto;margin:10px 0}
#comparison-table {border-collapse:collapse;width:100%;font-size:10px;line-height:1.5}
#comparison-table caption {text-align:left;font-size:10px;margin:0 0 9px;color:var(--muted)}
#comparison-table th,#comparison-table td {padding:8px 6px;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap}
#comparison-table thead th {font-weight:500;color:var(--muted)}
#comparison-table th:first-child {text-align:left;padding-left:0;font-weight:500}
#comparison-table td {font-family:var(--mono)}
#comparison-table td:nth-child(3) {color:var(--accent)}
.scope-scale {display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px;margin-top:14px}
.scope-scale select {font-size:10px;min-width:0;max-width:64%}
.comparison-desk #scale-note {margin-bottom:0}
.comparison-desk #scale-note.scale-clipped {color:var(--accent);font-weight:600}
.schematic-desk {border:1px solid var(--rule);background:var(--paper);margin-top:24px}
.schematic-layout {display:grid;grid-template-columns:minmax(0,2.3fr) minmax(260px,1fr);align-items:start}
.schematic-inspector {border-left:1px solid var(--rule);align-self:stretch}
.schematic-inspector .probe-desk {display:block;border-top:0;padding:22px}
.schematic-inspector .probe-desk select {font-size:12px;min-height:42px}
.schematic-inspector .probe-desk p {font-size:12px}
.schematic-inspector .probe-desk dl {font-size:11px;gap:10px}
.schematic-inspector .probe-trace-note {padding:0 22px 20px;font-size:11px}
.connection-help {padding:20px 22px;border-top:1px solid var(--rule)}
.connection-help h3 {font-size:12px;margin:0 0 12px}
.connection-help p {font-size:11px;line-height:1.8;color:var(--muted)}
.connection-help a {font-size:11px;color:var(--accent)}
.schematic-desk>p {font-size:11px;line-height:1.7;margin:12px 20px;color:var(--muted)}
#lab-schematic {padding:8px 10px}
#lab-schematic svg {display:block;width:100%;height:auto;overflow:visible}
#lab-schematic [data-probe] {cursor:pointer;outline:none}
#lab-schematic [data-probe] .symbol-target {transition:none}
#lab-schematic [data-probe]:hover .symbol-target {fill:var(--accent-wash)}
#lab-schematic [data-probe].is-active .symbol-target {fill:var(--accent-wash);stroke:var(--accent);stroke-width:2}
#lab-schematic [data-probe]:focus-visible .symbol-target {stroke:var(--ink);stroke-width:3;stroke-dasharray:5 3}
#lab-schematic .wire.net-active {stroke:var(--accent);stroke-width:4}
#lab-schematic .dot.net-active {fill:var(--accent)}
#lab-schematic .is-active .ref {fill:var(--accent);font-weight:700}
#lab-schematic .connectivity-svg .ref {font-size:21px}
#lab-schematic .connectivity-svg .small {font-size:17px}
#schematic-error .text-button {font-size:inherit}
@media(max-width:960px) {
  /* Let instruments precede the long PCB explanation on narrow screens; the
     experiment itself stays first so prediction still precedes observation. */
  .lab-desk {display:flex;flex-direction:column}
  .lab-scene-column {display:contents}
  .lab-model-desk {display:contents}
  .experiment-panel {order:0}
  .lab-instruments {order:1}
  .lab-model-desk>.lab-section-heading {order:2;background:var(--ground);border-top:1px solid var(--rule)}
  .lab-stage {order:3;background:var(--ground);height:360px}
  .lab-model-controls {order:4;background:var(--ground)}
  .flow-modes {order:5}
  .flow-explanation {order:6}
  .probe-desk {order:7}
  .probe-trace-note {order:7}
  .schematic-desk {order:8}
  #lab-schematic svg {max-width:760px;margin:auto}
  .schematic-layout {grid-template-columns:minmax(0,1.7fr) minmax(230px,1fr)}
  .schematic-inspector .probe-desk {padding:16px}
  .schematic-inspector .probe-trace-note,.connection-help {padding:0 16px 16px}
  .connection-help {padding-top:16px}
}
@media(max-width:650px) {
  .experiment-nav {display:grid;grid-template-columns:1fr 1fr}
  .experiment-nav button,.experiment-nav button:first-child {padding:12px 8px;text-align:left;font-size:11px}
  .experiment-nav button[aria-pressed=true]:after {right:12px}
  .experiment-panel {padding:18px 14px}
  .experiment-heading h2 {font-size:20px}
  .experiment-heading {align-items:flex-start}
  .comparison-desk {padding:15px 12px}
  .guided-settings-note {padding:10px 12px}
  .scope-scale {align-items:flex-start}
  .scope-scale select {max-width:61%;font-size:10px}
  .schematic-desk>p {margin:12px}
  #comparison-table th,#comparison-table td {padding:8px 4px;font-size:9px}
  .lab-stage {height:310px}
  #lab-schematic {padding:10px 5px}
  /* A readable, scrollable drawing is preferable to illegible symbol targets. */
  #lab-schematic {overflow-x:auto;overscroll-behavior-x:contain}
  #lab-schematic svg {min-width:590px}
  .schematic-layout {display:flex;flex-direction:column}
  .schematic-inspector {border-left:0;order:0;width:100%;border-bottom:1px solid var(--rule)}
  #lab-schematic {order:1;max-width:100%;width:100%}
}
@media(prefers-reduced-motion:reduce) {
  #lab-schematic [data-probe] .symbol-target {transition:none}
}

/* The lesson remains reachable before the long narrow-screen model. This is a
   focusable action, not a hash link that would replace the active lesson route. */
.workshop-mobile-actions {display:none}
.masthead {background:var(--rail)}
.wordmark {font-size:13px;letter-spacing:1.5px}
.title-row {padding-top:27px;padding-bottom:27px}
.lesson-panel h2 {font-weight:600}
.lab-meters dd {color:var(--ink);font-variant-numeric:tabular-nums}
.lab-settings select,.cursor-form input {background:var(--rail)}
.scope-figure,.response-figure {background:var(--rail)}
.scene-labels,.viewer-help,.lab-flow-label {text-shadow:0 1px 3px #111}
.poster:not(.hidden)~.scene-labels,.poster:not(.hidden)~.viewer-help {color:var(--poster-ink);text-shadow:none}
#lab-poster:not([hidden])~.lab-flow-label {color:var(--poster-ink);text-shadow:none}
@media(max-width:650px) {
  .workshop-mobile-actions {display:flex;align-items:center;padding:0 18px 18px}
  .workshop-mobile-actions button {width:100%;min-height:44px;text-align:left;color:var(--accent);border-color:var(--accent);font-size:12px}
  .wordmark {font-size:10px}
}