/* An accessible, first-person materials workbench. */
.workbench-lab{background:#11231c;color:#e8eee3;padding:6rem 0;scroll-margin-top:6rem}
.workbench-lab [hidden]{display:none!important}
.workbench-lab .lab-heading{padding-top:0;padding-bottom:2rem}
.workbench-lab .lab-heading>.eyebrow{color:#b9c9ad}
.workbench-lab .section-heading{margin-bottom:0}
.workbench-lab .section-heading p{max-width:34rem;color:#cbd4c8}
.lab-shell{width:100%;background:#172c23}
.lab-topbar{min-height:4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem max(1.2rem,4vw);background:#172c23}
.lab-topbar p{margin:0;font:600 .68rem/1.5 Arial,sans-serif;letter-spacing:.13em;display:flex;align-items:center;gap:.7rem}
.lab-dot{width:.5rem;height:.5rem;border-radius:50%;background:#cbdbaa;flex:none}
.workbench-lab button{font:inherit;cursor:pointer}
.lab-topbar button,.lab-playback button{border:1px solid #789082;border-radius:2rem;background:#172c23;color:#f3f4e9;padding:.7rem 1rem;font-size:.82rem;min-height:44px}
.lab-stage{position:relative;width:100%;aspect-ratio:16/9;background:#17261f;overflow:hidden}
.lab-stage>img,.lab-stage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lab-stage>video{z-index:1}
.lab-scene-label{position:absolute;top:1rem;left:1rem;right:1rem;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem;pointer-events:none}
.lab-scene-label span{background:#11231c;color:#f2f2e6;padding:.55rem .75rem;font:600 .65rem/1.3 Arial,sans-serif;letter-spacing:.08em;border:1px solid #61776a;border-radius:3px}
.lab-hotspots{position:absolute;inset:0;z-index:3;pointer-events:none}
.lab-hotspots button{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);pointer-events:auto;background:none;border:none;padding:0;display:flex;align-items:center;flex-direction:column;gap:.6rem;color:#f8f7eb;overflow:visible}
.lab-ring{width:52px;height:52px;display:grid;place-items:center;background:#f0f1d4;border:3px solid #163d2d;border-radius:50%;color:#123523;font:bold .85rem/1 Arial,sans-serif;box-shadow:0 0 0 5px #f6f3dc80,0 3px 12px #0005;transition:transform .2s}
.lab-hotspots button:hover .lab-ring{transform:scale(1.12)}
.lab-object-label{white-space:nowrap;background:#132c21;border:1px solid #a7bd96;border-radius:3px;padding:.5rem .7rem;font:600 .8rem/1.2 Arial,sans-serif;box-shadow:0 3px 9px #0003}
.lab-playback{position:absolute;z-index:4;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;gap:.6rem;white-space:nowrap}
.lab-stations{display:block}
.lab-stations ol{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:0;margin:0}
.lab-stations li{margin:0;min-width:0}
.lab-stations button{width:100%;min-height:78px;display:flex;align-items:center;justify-content:center;gap:.65rem;border:0;border-right:1px solid #455c4b;border-bottom:3px solid transparent;border-top:1px solid #455c4b;background:#172c23;color:#e9eddf;padding:1rem .5rem;font-size:.95rem}
.lab-stations button>span{font-size:.7rem;color:#b8c9aa}
.lab-stations button[aria-current=step]{background:#dce7ce;color:#123523;border-bottom-color:#638645}
.lab-stations button[aria-current=step]>span{color:#39582d}
.lab-stations button:hover{background:#304c39}
.lab-stations button[aria-current=step]:hover{background:#e8f0de}
.lab-stations i{font-style:normal;font-size:.75rem;min-width:.6rem}
.lab-inspector{padding:2.5rem max(1.2rem,6vw);display:grid;grid-template-columns:minmax(230px,.85fr) minmax(0,1.3fr);gap:5vw;background:#e8eee3;color:#153624}
.lab-inspector .eyebrow{color:#466243;margin:0 0 1rem}
.lab-step-heading h3{font:normal clamp(1.9rem,3vw,3rem)/1.07 Georgia,serif;letter-spacing:-.025em;margin:0 0 1.1rem}
.lab-step-heading>p:not(.eyebrow){max-width:30rem}
.lab-inspector p{font-size:1rem;line-height:1.65}
.lab-inspector .lab-step-progress{font-size:.75rem;letter-spacing:.03em;color:#496447;margin-top:1.3rem}
.lab-step-content>p{margin-top:0}
.lab-feedback{border-left:3px solid #617d46;padding:.7rem 1rem;margin:1.2rem 0;background:#dbe5d1;font-size:1rem;line-height:1.65}
.lab-feedback:empty{display:none}
.lab-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem}
.lab-actions button{min-height:48px;padding:.85rem 1.2rem;border-radius:3px;border:1px solid #355b3b;font-size:.95rem}
.lab-primary{background:#183e28;color:#f4f5e9}
.lab-primary:hover{background:#2d5639}
.lab-continue{background:transparent;color:#183e28}
.lab-continue:disabled{cursor:default;opacity:.48}
.lab-continue:not(:disabled):hover{background:#d1dfc6}
.lab-preferences{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:1.2rem;padding-top:1rem;border-top:1px solid #b4c1a9;font-size:.8rem}
.lab-preferences label{display:flex;gap:.55rem;align-items:center;min-height:44px;cursor:pointer}
.lab-preferences input{width:18px;height:18px;accent-color:#214d30;flex:none}
.lab-preferences button{border:0;background:none;color:#27482b;text-decoration:underline;text-underline-offset:.25rem;font-size:.8rem;min-height:44px;padding:.4rem 0}
.lab-size{margin:1.2rem 0}
.lab-size fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.lab-size legend{margin-bottom:.7rem;font-size:.88rem;font-weight:600}
.lab-size label{display:flex;align-items:center;gap:.6rem;border:1px solid #83947c;padding:.75rem 1rem;border-radius:3px;background:#f1f4eb;cursor:pointer}
.lab-size input{position:static;opacity:1;accent-color:#214d30;width:16px;height:16px;margin:0}
.lab-size label>span{border:0}
.lab-measurements{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
.lab-measurements p{margin:0;font-size:.8rem!important;color:#496044}
.lab-measurements strong{display:block;font:normal 1.9rem/1.3 Georgia,serif;color:#183e28}
.lab-materials{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
.lab-materials article{border:1px solid #a8b79c;padding:1rem;border-radius:3px}
.lab-materials span{font-size:.63rem;letter-spacing:.1em;color:#466243}
.lab-materials h4{font:normal 1.35rem/1.25 Georgia,serif;margin:.5rem 0}
.lab-materials p{font-size:.9rem;margin:0}
.lab-footnotes{padding-top:1.75rem!important;padding-bottom:0!important}
.workbench-lab .lab-small{font-size:.8rem;line-height:1.65}
.lab-footnotes>.lab-small{max-width:72rem;color:#c4d0be;margin:0 0 1.8rem}
.workbench-lab details{border-top:1px solid #586d5b;border-bottom:0;margin:0;padding:0}
.workbench-lab summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 0;cursor:pointer;font-size:1rem;font-weight:400}
.workbench-lab summary span{font-size:1.3rem}
.workbench-lab .mini-panels,.workbench-lab .mini-source-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2.5rem;padding:1rem 0 2rem}
.workbench-lab .mini-step{padding:1.5rem;border:1px solid #536950;border-radius:3px;min-width:0}
.workbench-lab .mini-step h3,.workbench-lab .mini-source-grid h3{font:normal 1.7rem/1.15 Georgia,serif;margin:1rem 0}
.workbench-lab .mini-step p,.workbench-lab .mini-step li,.workbench-lab .mini-source-grid p{font-size:1rem;line-height:1.7;color:#d5ddce}
.workbench-lab .mini-step ol{padding-left:1.25rem}
.workbench-lab .mini-step li+li{margin-top:.6rem}
.workbench-lab .mini-small{font-size:.8rem!important}
.workbench-lab .mini-observation{border-left:2px solid #a4bb8b;padding-left:1rem}
.workbench-lab .mini-step .eyebrow{font-size:.65rem;color:#b9cd9e}
.workbench-lab a{color:inherit;text-underline-offset:.2em}
.workbench-lab :focus-visible{outline:3px solid #9dc465;outline-offset:5px}
.lab-inspector :focus-visible{outline-color:#3b6b35}
.lab-shell.is-expanded{position:fixed;inset:0;z-index:1000;overflow:auto;background:#11231c;overscroll-behavior:contain}
.lab-shell.is-expanded .lab-topbar{position:sticky;top:0;z-index:6}
.lab-shell.is-expanded .lab-stage{width:min(100%,calc(70svh * 16 / 9));height:min(calc(100vw * 9 / 16),70svh);aspect-ratio:auto;margin-inline:auto}
body.lab-is-open{overflow:hidden}
@media(max-width:760px){
 .workbench-lab{padding:4rem 0}
 .lab-inspector{grid-template-columns:1fr;gap:1.3rem;padding:1.5rem}
 .lab-step-heading>p:not(.eyebrow){max-width:none}
 .lab-step-heading h3{font-size:2rem}
 .lab-topbar{padding:.65rem 1rem}
 .lab-topbar p{font-size:.55rem;max-width:12rem}
 .lab-topbar button{font-size:.72rem;padding:.5rem .7rem}
 .lab-stations ol{grid-template-columns:repeat(3,minmax(0,1fr))}
 .lab-stations button{min-height:56px;font-size:.85rem;padding:.65rem .3rem;gap:.35rem}
 .lab-ring{width:44px;height:44px;font-size:.73rem;border-width:2px;box-shadow:0 0 0 3px #f6f3dc80,0 2px 7px #0005}
 .lab-object-label{display:none}
 .lab-scene-label{top:.6rem;left:.6rem;right:.6rem}
 .lab-scene-label span{font-size:.5rem;padding:.4rem .5rem}
 .lab-playback{bottom:.5rem;gap:.45rem}
 .lab-playback button{font-size:.72rem;min-height:40px;padding:.5rem .7rem}
 .workbench-lab .mini-panels,.workbench-lab .mini-source-grid{grid-template-columns:1fr}
 .lab-materials{grid-template-columns:1fr}
 .lab-preferences{gap:.1rem}
 .lab-actions{gap:.5rem}
 .lab-actions button{font-size:.88rem;padding:.7rem .9rem}
}
@media(max-width:620px){body:not(.notebook)>header{height:auto;min-height:4.7rem;padding-block:.8rem;flex-wrap:wrap}body:not(.notebook)>header nav{flex:1 1 180px;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.lab-ring{transition:none}}