/* The chosen concept is a single instrument desk. Its hierarchy is spatial:
   parts at hand, a close working view, inspection beside it, evidence below. */
:root { --bench-height:clamp(570px,calc(100svh - 298px),800px); --tray-width:200px; --inspector-width:290px }
[hidden] { display:none !important }
.masthead { height:58px; min-height:58px; padding:0 26px; gap:30px; background:var(--rail) }
.wordmark { font-size:20px; font-weight:600; letter-spacing:3.5px; padding-right:29px; border-right:1px solid var(--rule) }
.page-nav { height:100%; gap:29px; flex-wrap:nowrap }
.page-nav a { font-size:14px; display:flex; align-items:center; height:100%; padding:0 3px }
.page-nav a[aria-current=page] { font-weight:500 }
.page-nav a[aria-current=page]:after { bottom:0; height:2px; left:-10px; right:-10px }
.header-context { font-size:12px; color:var(--muted); white-space:nowrap; border-left:1px solid var(--rule); padding-left:20px }
body[data-panel=workshop] .title-row,body[data-panel=builds] .title-row,body[data-panel=watch] .title-row { display:none }
body[data-panel=workshop] .site-footer { display:none }
.instrument-workshop { overflow:clip }
.instrument-workshop .workbench { display:grid; grid-template-columns:minmax(0,1fr) var(--inspector-width); grid-template-rows:minmax(0,1fr); min-height:0; height:var(--bench-height); border:0 }
.instrument-workshop .model-column { position:relative; display:block; min-height:0; height:100%; background:var(--ground); overflow:hidden }
.bench-heading { position:absolute; z-index:3; top:22px; left:27px; right:24px; display:flex; gap:18px; justify-content:space-between; align-items:flex-start; pointer-events:none }
.bench-heading h1 { font-size:clamp(28px,3.05vw,46px); letter-spacing:-1.6px; line-height:1.12; margin:0 0 10px; font-weight:650; text-wrap:balance; text-shadow:0 2px 7px #0009 }
.bench-heading p { font-size:17px; margin:0; color:var(--secondary-ink); max-width:650px }
.bench-heading button { pointer-events:auto; flex-shrink:0; margin-top:3px; font-size:12px; padding:9px 12px; background:var(--panel); display:flex; gap:12px; border-color:var(--control-rule) }
#chapter-count { font:11px var(--mono); color:var(--muted) }
.instrument-workshop .model-stage { height:calc(100% - 78px); min-height:0; flex:none; background:transparent; overflow:hidden }
.cloud-assembly-modes { position:absolute; z-index:4; top:110px; left:calc(var(--tray-width) + 42px); right:22px; display:flex; gap:0; width:max-content; max-width:calc(100% - var(--tray-width) - 64px); border:1px solid var(--control-rule); background:var(--rail) }
.cloud-assembly-modes button { border:0; border-right:1px solid var(--rule); border-radius:0; padding:9px 13px; font-size:11px; min-height:36px }
.cloud-assembly-modes button:last-child { border-right:0 }
.cloud-assembly-modes button[aria-pressed=true] { color:var(--accent); box-shadow:inset 0 -2px var(--accent); background:var(--accent-wash) }
.cloud-mechanical-parts { display:flex; gap:5px; margin:0 0 10px }
.cloud-mechanical-parts button { min-height:30px; border-radius:0; font-size:10px; padding:5px 9px }
.cloud-mechanical-parts button[aria-pressed=true] { background:var(--accent-wash); color:var(--accent) }
@media(max-width:760px) { .cloud-assembly-modes { top:5px; left:12px; right:12px; max-width:calc(100% - 24px) }.cloud-assembly-modes button { padding:7px 10px; font-size:10px; min-height:34px } }
.instrument-workshop #model,.instrument-workshop .poster { inset:0 0 0 calc(var(--tray-width) + 24px); width:calc(100% - var(--tray-width) - 24px); height:100% }
.instrument-workshop .model-column:has(#model:not(.ready)) .bench-heading { background:var(--ground); padding:10px; left:17px; right:14px; top:12px }
.instrument-workshop .poster { object-fit:cover; background:var(--poster-ground) }
.instrument-workshop .stage-status { position:absolute; bottom:12px; left:calc(var(--tray-width) + 42px); right:22px; display:flex; justify-content:space-between; gap:10px; font:9px var(--mono); color:var(--secondary-ink); pointer-events:none }
.instrument-workshop .stage-status span { background:var(--overlay); padding:5px 7px }
.instrument-workshop .viewer-help { bottom:49px; left:calc(var(--tray-width) + 24px); right:100px; color:var(--secondary-ink); font-size:9px; text-shadow:0 1px 3px #000 }
.stage-zoom { position:absolute; bottom:41px; right:18px; display:flex; background:var(--rail); border:1px solid var(--rule) }
.stage-zoom button { border:0; font-size:17px; line-height:1; min-height:34px; min-width:34px }
.stage-zoom #touch-rotate { font-size:11px }
.instrument-workshop .model-error { left:calc(var(--tray-width) + 40px); bottom:80px; right:20px; z-index:4; background:var(--panel) }
.component-tray { position:absolute; z-index:3; top:136px; bottom:16px; left:20px; width:var(--tray-width); display:grid; grid-template-rows:repeat(4,minmax(0,1fr)); background:var(--rail); border:1px solid var(--rule) }
.component-tray button { border:0; border-bottom:1px solid var(--rule); border-radius:0; padding:9px 11px 5px; min-height:0; display:flex; flex-direction:column; text-align:left; position:relative; background:transparent }
.component-tray button:last-child { border-bottom:0 }
.component-tray button:hover { background:var(--surface-hover) }
.component-tray button[aria-pressed=true] { background:var(--accent-wash); box-shadow:inset 2px 0 var(--accent) }
.component-tray button>span { display:flex; justify-content:space-between; font-size:13px; line-height:1.3; gap:8px; width:100% }
.component-tray b { font:12px var(--mono); color:var(--muted) }
.component-tray img { display:block; width:100%; min-height:0; flex:1; object-fit:contain }
.component-tray small { position:absolute; right:10px; bottom:7px; font:9px var(--mono); color:var(--muted) }
.bench-tools.view-controls { position:absolute; bottom:0; left:calc(var(--tray-width) + 26px); right:0; height:78px; border-top:1px solid var(--rule); padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; background:var(--rail) }
.bench-tools>button,.bench-tools>.assembly-controls>summary { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:0; border-radius:0; font-size:12px; position:relative; height:100%; background:transparent; color:var(--ink); cursor:pointer; padding:6px }
.bench-tools>button:after,.bench-tools>.assembly-controls:after { content:''; position:absolute; right:0; height:46px; top:16px; width:1px; background:var(--rule) }
.bench-tools>button:last-child:after { display:none }
.bench-tools svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round }
.bench-tools>button[aria-pressed=true] { color:var(--accent); background:transparent; box-shadow:inset 0 -3px var(--accent) }
.bench-tools>button:hover,.assembly-controls summary:hover { background:var(--surface-hover); color:var(--accent) }
.assembly-controls { position:relative; height:78px; z-index:6 }
.assembly-controls summary { list-style:none }
.assembly-controls summary::-webkit-details-marker { display:none }
.assembly-controls[open] summary { color:var(--accent) }
.assembly-controls>div { position:absolute; width:270px; bottom:85px; right:0; border:1px solid var(--control-rule); background:var(--paper); padding:20px; box-shadow:0 8px 25px #0008 }
.assembly-controls .explode-control { flex-wrap:wrap; justify-content:flex-start; min-width:0; font-size:12px }
.assembly-controls .explode-control input { max-width:none; flex:1; height:32px }
.assembly-controls .housing-control { display:flex; gap:8px; margin:16px 0 5px; font-size:12px }
.assembly-controls p { font-size:11px; color:var(--muted); margin:10px 0 0 }
.bench-sidebar { border-left:1px solid var(--rule); background:var(--panel); min-width:0; height:100%; display:flex; flex-direction:column }
.inspector-tabs { display:flex; height:47px; min-height:47px; border-bottom:1px solid var(--rule); margin:0 18px }
.inspector-tabs button { flex:1; border:0; border-radius:0; font-size:12px; color:var(--muted) }
.inspector-tabs button[aria-selected=true] { color:var(--ink); box-shadow:inset 0 -2px var(--accent) }
#inspection-panel { overflow:auto; padding:18px 18px 14px; scrollbar-width:thin; min-height:0 }
#inspection-panel h2 { font-size:20px; letter-spacing:-.4px; font-weight:550; line-height:1.2; margin:0 0 17px }
.inspection-photo { margin:0 0 14px; position:relative; border:1px solid var(--rule); background:var(--surface-raised); height:clamp(120px,calc(100svh - 780px),205px) }
.inspection-photo img { display:block; width:100%; height:100%; object-fit:contain }
.inspection-photo figcaption { position:absolute; bottom:0; left:0; right:0; font:9px var(--mono); color:var(--muted); padding:6px 8px; background:var(--caption-ground) }
.instrument-workshop .part-inspector { padding:0; border:0; min-height:0; background:transparent }
.instrument-workshop .part-title { font-size:16px; font-weight:550; margin:0 0 8px }
.instrument-workshop .part-inspector p { font-size:12px; line-height:1.6; margin:0 0 14px }
.instrument-workshop .part-focus { gap:5px; margin-bottom:14px }
.instrument-workshop .part-focus button { padding:4px 8px; min-height:30px; font-size:11px }
.inspection-readings { margin:0 0 17px; border-top:1px solid var(--rule) }
.inspection-readings>div { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--rule); font-size:12px }
.inspection-readings dt { color:var(--muted) }
.inspection-readings dd { margin:0; text-align:right; max-width:65%; font-size:11px }
.inspection-readings a { color:var(--ink) }
#inspect-part { width:100%; min-height:43px; border-radius:0; font-size:14px }
#jump-to-lesson { display:block; width:100%; text-align:center; margin-top:10px; min-height:38px; color:var(--muted); font-size:12px }
.instrument-workshop .lesson-panel { min-height:0; max-height:none; height:100%; overflow:auto; border:0; padding:22px 20px; background:transparent; scrollbar-width:thin }
.instrument-workshop .lesson-panel h2 { font-size:24px }
.instrument-workshop .lesson-panel .lesson-lede { font-size:13px }
.instrument-workshop .lesson-panel p,.instrument-workshop .bench-actions li { font-size:12px }
#chapters-dialog { background:var(--paper); color:var(--ink); border:1px solid var(--control-rule); padding:0; width:min(470px,calc(100vw - 32px)); max-height:85svh }
#chapters-dialog::backdrop { background:#000b }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--rule) }
.dialog-heading h2 { font-size:23px; margin:0 }
.dialog-heading button { font-size:24px; padding:0; width:38px; height:38px; border:0 }
#chapters-dialog .lesson-rail { border:0; padding:16px 22px; display:block; background:transparent }
#chapters-dialog .rail-heading { display:none }
#chapters-dialog #lessons-nav { display:flex; flex-direction:column }
#chapters-dialog .lesson-link { font-size:14px; padding:10px 12px }
#chapters-dialog .review-progress { margin-top:15px; padding:18px 12px 0 }
.bench-dock { display:grid; grid-template-columns:minmax(360px,1fr) 182px 155px 190px; min-height:210px; padding:16px 20px; gap:0; border-top:1px solid var(--control-rule); border-bottom:1px solid var(--rule); background:var(--rail) }
.bench-waveform { margin:0; min-width:0; padding-right:18px; position:relative }
.dock-plot-heading { display:flex; align-items:baseline; justify-content:space-between; gap:15px }
.dock-plot-heading h2 { font-weight:500; font-size:16px; margin:0 0 4px }
.dock-plot-heading .mono { color:var(--accent); font-size:10px; white-space:nowrap }
#bench-scope { width:100%; height:139px; display:block; overflow:visible }
.bench-waveform figcaption { display:flex; justify-content:space-between; gap:16px; font-size:10px; color:var(--muted); padding-left:54px }
.dock-control { border-left:1px solid var(--rule); padding:0 16px; min-width:0 }
.dock-control:last-child { padding-right:0 }
.dock-control legend { float:left; display:flex; align-items:center; font-size:15px; font-weight:450; gap:8px; width:100%; margin:0 0 14px; line-height:24px }
.dock-control legend svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.dock-control select { width:100%; min-width:0; color:var(--ink); background:var(--panel); border:1px solid var(--control-rule); border-radius:3px; padding:8px 7px; height:37px; font-size:12px }
.dock-control label:not(.sr-only) { display:block; font-size:11px; margin:10px 0 5px; color:var(--muted); clear:both }
.power-toggle { display:flex; align-items:center; border:0; border-radius:0; padding:5px 0; min-height:37px; gap:10px; width:100% }
.power-toggle>span { display:block; width:43px; height:24px; background:var(--rule); border:1px solid var(--control-rule); border-radius:20px; position:relative; flex-shrink:0 }
.power-toggle>span:before { content:''; position:absolute; width:18px; height:18px; top:2px; left:2px; background:var(--ink); border-radius:50% }
.power-toggle[aria-checked=true]>span { background:var(--switch-active); border-color:var(--accent) }
.power-toggle[aria-checked=true]>span:before { left:21px; background:var(--accent) }
.power-toggle>b { font:11px var(--mono); font-weight:400 }
#bench-data-error { position:absolute; inset:25px 18px 15px 0; background:var(--paper); padding:15px }
.bench-footnote { display:flex; justify-content:space-between; gap:20px; font-size:10px; color:var(--muted); padding:10px 20px; min-height:30px }
.bench-footnote a { color:var(--ink) }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.library-build { display:grid; grid-template-columns:1.3fr 1fr; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); text-decoration:none; align-items:center; margin:35px 0 }
.library-build img { width:100%; max-height:460px; object-fit:cover }
.library-build>div { padding:40px }
.library-build h2 { font-size:36px; line-height:1.15; margin:0 0 20px }
.library-build span { display:block; color:var(--muted); font-size:12px }
.library-build strong { color:var(--accent); display:block; margin-top:26px; font-weight:500 }
.reference-intro h1 { font-size:clamp(30px,4vw,50px); line-height:1.1; font-weight:550; letter-spacing:-1.3px; margin:15px 0 }
.watch-panel video { width:100%; max-height:70svh; display:block; background:#000 }
.watch-links { display:flex; flex-wrap:wrap; gap:20px; margin:25px 0 }
@media(min-width:1650px) { :root { --tray-width:220px; --inspector-width:310px } .bench-heading h1 { font-size:48px } .component-tray button>span { font-size:15px } }
@media(max-width:1250px) {
  :root { --tray-width:166px; --inspector-width:265px }
  .masthead { gap:22px; padding:0 20px }.wordmark { font-size:17px; letter-spacing:2.5px; padding-right:20px }.header-context { display:none }.page-nav { justify-content:space-between; gap:15px }
  .bench-heading { left:20px; right:16px }.bench-heading h1 { font-size:34px }.bench-heading p { font-size:14px; max-width:460px }.bench-heading button { font-size:11px; gap:7px }
  .component-tray { left:14px }.component-tray button>span { font-size:12px }.component-tray small { font-size:8px }
  .bench-tools.view-controls { left:calc(var(--tray-width) + 20px) }.bench-tools>button,.bench-tools>.assembly-controls>summary { font-size:11px }
  .bench-dock { grid-template-columns:minmax(280px,1fr) 160px 140px 165px; padding:15px }
  .dock-control { padding:0 12px }.dock-plot-heading h2 { font-size:14px }.dock-plot-heading .mono { font-size:9px }
}
@media(max-width:960px) and (min-width:761px) {
  :root { --tray-width:140px; --inspector-width:245px }
  .bench-heading h1 { font-size:29px }.bench-heading { flex-wrap:wrap; gap:8px }.bench-heading p { font-size:13px }.bench-heading button { position:absolute; top:82px; right:0 }
  .component-tray { top:145px }.component-tray button>span { font-size:11px }
  .bench-dock { grid-template-columns:minmax(260px,1fr) 145px 125px 145px }
  .bench-waveform figcaption { padding-left:20px;font-size:9px }.dock-plot-heading { display:block }.dock-plot-heading .mono { position:absolute; top:26px; right:20px }
  .instrument-workshop #model,.instrument-workshop .poster { inset:110px 0 0 160px; width:calc(100% - 160px); height:calc(100% - 110px) }
  .instrument-workshop .viewer-help { display:none }.bench-tools svg { width:23px; height:23px }.bench-tools>button,.bench-tools>.assembly-controls>summary { font-size:10px }
}
@media(max-width:760px) {
  :root { --tray-width:0px }
  .masthead { height:auto; min-height:0; display:block; padding:14px 16px 0 }
  .wordmark { font-size:18px; border:0; padding:0 0 12px }.page-nav { display:flex; height:38px; gap:0; justify-content:space-between; padding:0; flex-wrap:nowrap }.page-nav a { font-size:11px; padding:0 2px }.page-nav a[aria-current=page]:after { left:0;right:0 }
  .instrument-workshop { display:flex; flex-direction:column; overflow:visible }
  .instrument-workshop .workbench { display:contents; height:auto }
  .instrument-workshop .model-column { order:1; height:auto; width:100%; overflow:visible; display:flex; flex-direction:column }
  .bench-heading { position:relative; top:auto; left:auto; right:auto; display:block; padding:22px 18px 16px }.bench-heading h1 { font-size:31px; letter-spacing:-1px; margin-bottom:8px }.bench-heading p { font-size:14px; max-width:96% }.bench-heading button { margin-top:15px; min-height:36px }
  .instrument-workshop .model-column:has(#model:not(.ready)) .bench-heading { top:auto; left:auto; right:auto; padding:22px 18px 16px }
  .instrument-workshop .model-stage { height:275px; min-height:275px; width:100% }
  .instrument-workshop #model,.instrument-workshop .poster { inset:0; width:100%; height:100% }
  .instrument-workshop .viewer-help { bottom:37px; left:15px; right:100px; font-size:8px }
  .instrument-workshop .stage-status { bottom:9px; left:12px; right:12px; font-size:8px }
  .stage-zoom { bottom:36px; right:12px }.stage-zoom button { min-height:35px }.stage-zoom #touch-rotate { font-size:10px }
  .component-tray { position:relative; left:auto; right:auto; top:auto; bottom:auto; height:90px; min-height:90px; width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:1fr; border-left:0; border-right:0 }
  .component-tray button { border-bottom:0; border-right:1px solid var(--rule); padding:7px 8px 5px }.component-tray button:last-child { border-right:0 }.component-tray button>span { font-size:10px; gap:3px; flex-wrap:wrap }.component-tray b { font-size:9px }.component-tray img { height:40px; flex:1 }.component-tray small { font-size:7px; bottom:4px; right:6px }
  .bench-tools.view-controls { height:60px; min-height:60px; left:auto; bottom:auto; position:relative; flex:none; width:100% }.bench-tools svg { width:23px; height:23px }.bench-tools>button,.bench-tools>.assembly-controls>summary { font-size:10px; gap:4px; padding:6px 0 }.bench-tools>button:after,.bench-tools>.assembly-controls:after { height:32px; top:14px }.assembly-controls { height:60px }.assembly-controls>div { bottom:70px; width:245px; right:-20px }
  .bench-dock { order:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:16px 12px; gap:17px 0 }
  .bench-waveform { grid-column:1/-1; padding:0 }.dock-plot-heading h2 { font-size:14px }.dock-plot-heading .mono { font-size:9px }#bench-scope { height:130px }.bench-waveform figcaption { font-size:9px;padding-left:30px }
  .dock-control { padding:0 10px }.dock-control:nth-child(2) { border-left:0;padding-left:0 }.dock-control legend { font-size:13px; gap:5px; margin-bottom:10px }.dock-control legend svg { width:18px;height:18px }.dock-control select { font-size:10px;padding:6px 3px;height:36px }.dock-control label:not(.sr-only) { font-size:10px }.power-toggle { gap:5px }.power-toggle>b { font-size:9px }
  .bench-sidebar { order:3; width:100%; height:auto; border-left:0;border-top:1px solid var(--rule) }.inspector-tabs { height:50px; margin:0 16px }.inspector-tabs button { font-size:14px;min-height:50px }#inspection-panel { padding:20px }.inspection-photo { height:210px }.instrument-workshop .part-inspector p { font-size:14px }.inspection-readings>div { font-size:14px;padding:14px 0 }.inspection-readings dd { font-size:13px }.instrument-workshop .part-focus button { min-height:44px;min-width:44px }
  .instrument-workshop .lesson-panel { max-height:none; overflow:visible; padding:24px 20px }.instrument-workshop .lesson-panel p,.instrument-workshop .bench-actions li { font-size:14px }.instrument-workshop .lesson-panel .lesson-lede { font-size:16px }
  .bench-footnote { order:4; flex-wrap:wrap; padding:15px 18px; gap:10px; border-top:1px solid var(--rule) }
  .instrument-workshop .model-error { left:12px;right:12px;bottom:55px;font-size:11px }
  .library-build { grid-template-columns:1fr }.library-build>div { padding:24px }.library-build h2 { font-size:28px }.library-build img { max-height:300px }.watch-links { flex-direction:column }
}
@media(pointer:coarse) { .stage-zoom #touch-rotate { display:block }.stage-zoom button { min-height:40px }.instrument-workshop .viewer-help { right:175px } }
@media(max-width:360px) { .bench-heading h1 { font-size:27px }.bench-heading p { font-size:12px }.component-tray button>span { font-size:9px }.dock-control { padding:0 6px }.power-toggle>span { width:39px }.power-toggle[aria-checked=true]>span:before { left:17px }.page-nav a { font-size:10px }.wordmark { font-size:17px } }
