*{box-sizing:border-box}html{color-scheme:dark;scroll-padding-top:1rem}body{margin:0;background:#081b23;color:#e3eeeb;font:1rem/1.5 'Segoe UI',Arial,sans-serif}button,input,select{font:inherit}button,select,input:not([type=range]){border:1px solid #486870;border-radius:6px;background:#17353e;color:#e3edeb;min-height:42px;padding:.5rem .8rem}button{cursor:pointer;touch-action:manipulation}button:hover:not(:disabled){border-color:#a8dac6;background:#284c50}button:disabled{opacity:.45;cursor:default}button.primary{background:#b6e8cf;border-color:#b6e8cf;color:#10372f;font-weight:600}button.primary:hover:not(:disabled){background:#d0f5e1}a{color:#a9dfd1;text-underline-offset:.24em}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #f1c891;outline-offset:3px}[hidden]{display:none!important}.skip{position:fixed;z-index:50;left:12px;top:0;transform:translateY(-150%);background:#c4eddb;color:#14362b;padding:1rem}.skip:focus{top:12px;transform:none}h1,h2,h3,p{margin-top:0}h2{font-size:1.25rem;line-height:1.25;margin-bottom:.5rem}h3{font-size:1.05rem}p{margin-bottom:.8rem}p,h1,h2,h3,a{overflow-wrap:anywhere}.site-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem max(24px,calc((100vw - 1480px)/2));border-bottom:1px solid #294952}.brand{display:flex;gap:.65rem;align-items:center;color:#d9eee5;font-weight:650;text-decoration:none}.brand span{color:#a2bdc0;font-size:.8rem;font-weight:400}.site-header nav{display:flex;gap:1.3rem;font-size:.8rem}.site-header nav a{text-decoration:none}main{max-width:1510px;padding:1.5rem 24px 2rem;margin:auto}.intro{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-bottom:1.2rem}.eyebrow{font-size:.68rem;letter-spacing:.15em;color:#a7d8c7;font-weight:650;margin-bottom:.3rem}.intro h1{font:400 clamp(2.3rem,3.4vw,3.65rem)/1.05 Georgia,serif;letter-spacing:-.045em;margin:.2rem 0 .6rem}.lead{color:#c6dad9;margin:0;font-size:1.05rem}.intro-note{font-size:.83rem;color:#b5caca;border-left:1px solid #44605b;padding-left:1.1rem;margin:0;max-width:340px}.intro-note a{display:block;margin-top:.35rem}.mode-row{display:flex;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.mode-tabs,.utility{display:flex;gap:.45rem;flex-wrap:wrap}.mode-tabs button,.utility button{font-size:.8rem}.mode-tabs button[aria-pressed=true]{background:#284e48;border-color:#afd7bd;color:#def1e3}.utility button{background:transparent;color:#bbd1d1}.guide{padding:.8rem 1rem;background:#15342f;border:1px solid #477460;border-radius:9px;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;margin-bottom:.85rem}.guide h2{font:400 1.4rem/1.15 Georgia,serif;margin:.15rem 0 .3rem;color:#eee1c3}.guide p{font-size:.85rem;margin:0;color:#c0d7c9}.guide>button{flex:none;font-size:.85rem}.workbench{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:.85rem;align-items:stretch}.bench-panel,.image-panel{background:#102b34;border:1px solid #365b64;border-radius:12px;overflow:hidden;min-width:0}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem .8rem;border-bottom:1px solid #36525d;min-height:52px}.panel-top h2{font-size:.82rem;letter-spacing:.02em;margin:0}.panel-top button{font-size:.73rem;min-height:34px;padding:.35rem .6rem}.panel-top>div{display:flex;gap:.4rem}.scene-shell{position:relative;height:330px;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#314f57,#0a1f27 85%)}#scene{position:absolute;inset:0}#scene canvas{display:block;touch-action:none}#diagram{display:block;width:100%;height:100%}.stage-note{position:absolute;left:12px;bottom:9px;font-size:.65rem;color:#bdcdca;background:#0a2124ce;padding:.18rem .4rem;border-radius:3px;pointer-events:none}.maker-label{position:absolute;max-width:170px;font-size:11px;line-height:1.35;color:#e6efe8;background:#10262ee8;padding:3px 6px;border:1px solid #527b74;border-radius:3px;pointer-events:none}.camera-row{display:flex;gap:.3rem;padding:.45rem .6rem;align-items:center;flex-wrap:wrap;min-height:43px;border-top:1px solid #2f4c53}.camera-row>span:first-child{font-size:.65rem;color:#afc6c9;margin-right:.3rem}.camera-row button{font-size:.68rem;min-height:30px;padding:.25rem .5rem;background:transparent}.camera-row #scene-state{font-size:.64rem;color:#bbd1c9;margin-left:auto}.ports{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.3rem;padding:.5rem .6rem}.port{min-width:0;text-align:left;font-size:.66rem;background:#0a2129;min-height:52px;padding:.35rem .5rem;position:relative}.port strong{display:block;font-size:.74rem;font-weight:550}.port[aria-pressed=true]{border-color:#e2c48e;box-shadow:inset 0 2px #e2c48e}.port.empty{border-style:dashed;color:#a7bec1}.port.drop-ready{background:#4d6550;border-color:#f8d69a}.port span{display:block;color:#96bcb0;font-size:.62rem}.image-panel{display:flex;flex-direction:column}.image-area{background:#07181e;padding:8px 14px;flex:1;display:grid;place-items:center;min-height:260px}.sensor-crop{width:min(100%,330px);aspect-ratio:1;position:relative;overflow:hidden;box-shadow:0 0 0 1px #35525a}#image{display:block;width:100%;height:100%;image-rendering:pixelated;background:#000}#image-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:1.5rem;text-align:center;background:radial-gradient(ellipse,#163039,#07171e);color:#bbcece}#image-empty strong{font:400 1.5rem/1.2 Georgia,serif;color:#d8ddcf}#image-empty p{font-size:.78rem;max-width:240px;margin:.5rem 0}.empty-mark{font-size:3rem;color:#658b87;margin-bottom:.5rem}#scale-bar{position:absolute;right:12px;bottom:11px;text-align:center;background:#06171be0;color:#eef1e8;padding:4px 7px;font-size:10px}#scale-bar i{display:block;border-top:3px solid #f0efe6;margin:0 auto 2px;max-width:100%}#sensor-badge{position:absolute;top:6px;left:7px;font-size:9px;letter-spacing:.08em;color:#ecede3;background:#0c2227e0;padding:2px 4px}#image-caption{font-size:.75rem;color:#bbd1d2;margin:.55rem .8rem;min-height:2.2em}.image-bottom{display:flex;align-items:end;gap:.7rem;padding:.3rem .8rem .75rem}.image-bottom label{font-size:.66rem;color:#afcbca;flex:1}.image-bottom select{display:block;width:100%;font-size:.76rem;padding:.3rem .5rem;min-height:36px;margin-top:.2rem}.image-bottom button{font-size:.75rem;min-height:36px;white-space:nowrap}.focus-dock{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:1.3rem;margin:.8rem 0 0;padding:.8rem 1rem;border:1px solid #416559;border-radius:8px;background:#14342f}.focus-dock label{display:flex;justify-content:space-between;gap:.4rem;font-size:.79rem;font-weight:550;color:#d6e6d5}.focus-dock output{color:#f0d29c;font-variant-numeric:tabular-nums;font-weight:400;white-space:nowrap}.focus-dock input{width:100%;accent-color:#b8e1ba;min-height:28px}.focus-dock p{font-size:.65rem;color:#aac6bb;margin:0}.range-row{display:flex;align-items:center;gap:.5rem}.range-row span{font-size:.65rem;color:#a9c5b9;white-space:nowrap}#status{font-size:.83rem;color:#edce94;min-height:1.5em;margin:.45rem .1rem}.readouts{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;border-top:1px solid #35525d;padding:.65rem .2rem}.readouts span{font-size:.65rem;color:#a8c4c7;display:block}.readouts strong{font-size:1.13rem;font-weight:500;color:#e3dcc1}.metric-note{font-size:.72rem;color:#a4bfc1;margin:.2rem 0 1.5rem}.cabinet,.experiments,.notebook{background:#0e2930;border:1px solid #35555a;border-radius:12px;padding:1.2rem;margin-top:1.2rem}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem}.section-heading p:not(.eyebrow){font-size:.83rem;color:#b4cacc}.section-heading button{font-size:.77rem;background:transparent}.section-heading h2{font:400 1.6rem/1.25 Georgia,serif;margin:.25rem 0 .45rem}.slot-tabs,.experiment-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0 1rem}.slot-tabs button,.experiment-tabs button{font-size:.78rem;background:transparent}.slot-tabs button[aria-pressed=true],.experiment-tabs button[aria-pressed=true]{background:#30514a;border-color:#b8d9b7;color:#e8eed5}.part-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.part-card{border:1px solid #486366;border-radius:9px;padding:1rem;background:#15343c;min-width:0}.part-card.installed{border-color:#b7d8b3;background:#183e36}.part-card h3{font-size:1rem;margin:.4rem 0 .3rem}.part-card p{font-size:.8rem;color:#b8cecc;margin:.4rem 0 .7rem}.part-card .part-visual{height:65px;display:flex;align-items:center;gap:1rem}.part-visual svg{width:70px;height:62px;flex:none}.part-visual span{font-size:.7rem;letter-spacing:.06em;color:#dbc695}.part-actions{display:flex;justify-content:space-between;gap:.6rem}.part-actions button{font-size:.78rem;flex:1}.part-actions .drag-handle{flex:none;cursor:grab;touch-action:none;font-size:.73rem;background:transparent}.part-card[draggable=true]{cursor:grab}.part-card:active{cursor:grabbing}#part-explanation{font-size:.8rem;color:#b8cfca;margin:.85rem 0 0}.drag-ghost{position:fixed;z-index:1000;pointer-events:none;background:#d4e6c4;color:#14352c;padding:.55rem 1rem;border-radius:8px;box-shadow:0 7px 25px #0008;font-size:.85rem;max-width:240px}.scene-shell.drop-ready{outline:3px solid #e7c391;outline-offset:-3px}#drop-hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#e7dab5;color:#1a3934;border-radius:6px;padding:.5rem .8rem;font-size:.8rem;pointer-events:none;z-index:3}.prediction-label{font-size:.82rem;display:block;color:#c2d8cc}#prediction{width:100%;display:block;margin:.35rem 0;font-size:.85rem}.small{font-size:.76rem;color:#a8c2c2}#experiment-copy{font-size:.95rem;color:#d9dbc4;border-left:2px solid #ddc18c;padding:.4rem .8rem}#record-count{font-size:.8rem;white-space:nowrap;color:#c2d8c7}.notebook>p{font-size:.84rem;color:#bbcfcb}#records{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.record{padding:1rem;background:#13322e;border:1px solid #52765f;border-radius:9px;min-width:0}.record img{width:100%;max-height:310px;object-fit:contain;background:#061820;border:1px solid #557167;image-rendering:pixelated}.record h3{display:flex;justify-content:space-between;gap:.7rem;margin:.5rem 0;font-size:.92rem}.record h3 button{min-height:30px;font-size:.7rem;background:transparent}.record p,.record li{font-size:.78rem;color:#c5d6c9}.record summary{font-size:.8rem;cursor:pointer;color:#e2d3b0}.record ul{padding-left:1.3rem}.record .prediction{border-left:2px solid #e2c18e;padding-left:.7rem;color:#dfd6b8}.explanation{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;padding:2.5rem .4rem 1.5rem}.explanation h2{font:400 2rem/1.2 Georgia,serif;color:#e5dcc3}.explanation p,.explanation li{font-size:.91rem;color:#bbd0cf}.explanation li{padding-left:.5rem;margin-bottom:1.2rem}#model-details{border:1px solid #3e5e63;border-radius:8px;padding:1rem 1.2rem;margin-top:.7rem}#model-details summary{cursor:pointer;color:#d8e5d4;font-size:.9rem}#model-details>div{padding-top:1rem;max-width:1100px}#model-details p,#model-details li{font-size:.88rem;color:#b9cecc}#model-details li{margin:.6rem 0}.next-links{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.6rem 0 .6rem}.next-links a{display:block;padding:1rem;border:1px solid #3d615d;border-radius:8px;text-decoration:none;font-size:.88rem;background:#112f2d}.next-links span{display:block;font-size:.65rem;letter-spacing:.12em;color:#94c6b6;margin-bottom:.5rem}.transfer-note{margin:0}footer{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;font-size:.8rem;color:#a5bdbc}dialog{width:min(850px,95vw);max-height:94dvh;overflow:auto;border:1px solid #87a090;background:#0e2931;border-radius:14px;color:#dcebe0;padding:1.2rem}dialog::backdrop{background:#020d15dd}.dialog-heading,.dialog-actions{display:flex;justify-content:space-between;gap:1rem;align-items:center}.dialog-heading h2{font:400 1.5rem/1.2 Georgia,serif}.dialog-heading button{flex:none}.dialog-actions{justify-content:end}#large-image{display:block;width:min(100%,650px);height:auto;aspect-ratio:1;margin:.8rem auto;image-rendering:pixelated}#large-caption{font-size:.85rem}#share-url{display:block;width:100%;margin:.5rem 0 1rem;font-size:.8rem}#share-dialog p{font-size:.85rem}#reset-dialog{max-width:520px}#reset-dialog p{font-size:.9rem}.no-js{padding:2rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1700px){.scene-shell{height:405px}.sensor-crop{width:min(100%,390px)}}
@media(max-width:1050px){.intro-note{display:none}.workbench{grid-template-columns:1.2fr 1fr}.scene-shell{height:310px}.focus-dock{gap:1rem;grid-template-columns:1.5fr 1fr}.exposure-control{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}.exposure-control p{grid-column:1/-1}.ports{grid-template-columns:repeat(3,minmax(0,1fr))}.part-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.site-header nav{gap:.8rem}.readouts strong{font-size:1rem}}
@media(max-width:700px){main{padding:1.1rem 14px 2rem}.site-header{padding:.75rem 14px}.brand span{display:none}.site-header nav a:first-child{display:none}.site-header nav{font-size:.73rem;gap:.8rem}.intro{margin-bottom:1rem}.intro h1{font-size:2.6rem}.lead{font-size:.95rem}.mode-row{display:block}.utility{margin-top:.5rem}.mode-tabs button{flex:1;font-size:.75rem}.guide{display:block;padding:.85rem}.guide>button{margin-top:.7rem;width:100%}.guide h2{font-size:1.3rem}.workbench{grid-template-columns:1fr}.image-panel{order:2}.scene-shell{height:260px}.image-area{min-height:260px}.sensor-crop{width:min(100%,330px)}.ports{grid-template-columns:repeat(5,minmax(0,1fr));gap:.25rem;padding:.4rem}.port{font-size:.58rem;padding:.3rem;min-height:54px;overflow-wrap:anywhere}.port strong{font-size:.66rem}.port span{font-size:.57rem}.focus-dock{grid-template-columns:1fr;padding:.85rem;gap:.7rem}.focus-control{border-bottom:1px solid #456356;padding-bottom:.55rem}.sensor-control,.exposure-control{display:block;grid-column:auto}.readouts{grid-template-columns:repeat(3,1fr);gap:.7rem}.metric-note{font-size:.7rem}.section-heading{display:block}.section-heading button{margin-bottom:.7rem}.cabinet,.experiments,.notebook{padding:.85rem}.part-cards{grid-template-columns:1fr}.slot-tabs button,.experiment-tabs button{font-size:.74rem;flex:1}.slot-tabs{gap:.3rem}.section-heading h2{font-size:1.4rem}#records{grid-template-columns:1fr}.explanation{grid-template-columns:1fr;gap:.8rem;padding:2rem .2rem 1rem}.explanation h2{font-size:1.7rem}.next-links{grid-template-columns:1fr;gap:.5rem}footer{flex-wrap:wrap}.dialog-heading h2{font-size:1.2rem}.dialog-actions{flex-wrap:wrap}.camera-row #scene-state{width:100%;margin-left:0}.image-bottom{flex-wrap:wrap}.image-bottom label{min-width:150px}.focus-dock label{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.image-panel>.focus-control{padding:.7rem .85rem;background:#15372f;border-bottom:1px solid #426455}.image-panel>.focus-control label{display:flex;justify-content:space-between;gap:.4rem;flex-wrap:wrap;font-size:.77rem;font-weight:550}.image-panel>.focus-control output{color:#ecd099;font-variant-numeric:tabular-nums}.image-panel>.focus-control input{width:100%;min-height:30px;accent-color:#bce6c6}.image-panel>.focus-control p{font-size:.65rem;color:#b2cbbc;margin:0}.focus-dock{grid-template-columns:1fr 1fr}.image-area{min-height:230px}.sensor-crop{width:min(100%,290px)}
@media(max-width:700px){.image-panel{order:-1}.focus-dock{grid-template-columns:1fr}.sensor-crop{width:min(100%,320px)}}

/* Component controls reflow with the reader’s font size. */
.ports{grid-template-columns:repeat(auto-fit,minmax(min(100%,7rem),1fr))}.port{overflow-wrap:normal}.part-actions{flex-wrap:wrap}.part-actions button{min-width:0;max-width:100%;overflow-wrap:anywhere;flex:1 1 9rem}.part-actions .drag-handle{flex:0 1 auto}.part-visual{min-width:0}.part-visual span{overflow-wrap:anywhere}

/* Keep the consequence beside construction, with a compact preview on narrow screens. */
.brand{white-space:nowrap;flex-shrink:0;overflow-wrap:normal}.brand img{flex-shrink:0}
.site-header nav{flex-wrap:wrap;justify-content:flex-end}
.workbench{align-items:start;grid-template-columns:minmax(0,1.2fr) minmax(320px,1fr)}
.assembly-column{min-width:0}.assembly-column .cabinet{margin-top:.85rem;padding:.85rem}
.assembly-column .section-heading{align-items:start;flex-wrap:wrap;gap:.4rem}.assembly-column .section-heading p{margin-bottom:.2rem}
.assembly-column .part-cards{grid-template-columns:1fr}.assembly-column .part-card{display:grid;grid-template-columns:85px 1fr;gap:.2rem .6rem;padding:.7rem}.assembly-column .part-visual{grid-row:1/4;height:auto;display:block}.assembly-column .part-visual span{font-size:.6rem;display:block}.assembly-column .part-card p{margin:0}.assembly-column .part-actions{grid-column:2}.assembly-column .part-card h3{margin:0}
.image-panel{position:sticky;top:12px;align-self:start}.image-area{flex:none}.image-settings{font-size:.78rem;color:#eee0be;margin:.4rem .8rem 0}.image-panel #image-caption{min-height:0}
#live-preview{position:fixed;z-index:15;bottom:10px;right:14px;display:flex;gap:12px;padding:10px;border:1px solid #b8d9b7;border-radius:10px;background:#0b262ef7;box-shadow:0 5px 25px #0009;width:min(390px,calc(100vw - 28px))}
#preview-image{width:110px;height:110px;object-fit:contain;image-rendering:pixelated;background:#06151b;flex:none}#live-preview strong{font-size:.8rem}#preview-summary{font-size:.73rem;margin:.2rem 0 .4rem}#preview-jump{font-size:.72rem;min-height:32px;padding:.3rem .6rem}
html:has(#live-preview:not([hidden])){scroll-padding-bottom:160px}
.comparison-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.comparison-pair figure{margin:0;min-width:0}.comparison-pair figcaption{font-size:.84rem;margin:.2rem 0 .6rem}.comparison-pair figure p{font-size:.72rem;margin:.5rem 0}.comparison-pair canvas{display:block;width:100%;height:auto;aspect-ratio:1;margin:0}#specimen-reference{image-rendering:auto}.large-sensor{position:relative}#large-image{margin:0;width:100%}#large-scale{position:absolute;right:12px;bottom:12px;border-top:3px solid white;color:white;background:#06171beb;text-align:center;font-size:.7rem}#large-field{font-size:.85rem;color:#e7d4ae}
@media(max-width:1050px){.workbench{grid-template-columns:minmax(0,1fr) minmax(280px,1fr)}.assembly-column .part-card{display:block}.assembly-column .part-visual{display:flex;height:48px}.assembly-column .part-visual svg{width:48px;height:48px}.assembly-column .part-actions{margin-top:.5rem}.image-bottom button{white-space:normal}}
@media(max-width:700px){.workbench{grid-template-columns:1fr}.image-panel{position:static;order:-1}.assembly-column{order:1}.assembly-column .part-card{display:grid;grid-template-columns:65px minmax(0,1fr)}.assembly-column .part-visual{height:auto;display:block}.assembly-column .part-actions{grid-column:1/-1}.site-header{gap:.5rem}.site-header nav a:nth-child(2){display:none}.comparison-pair{grid-template-columns:1fr}.assembly-column .cabinet{scroll-margin-bottom:160px}.image-panel{scroll-margin-top:10px}.sensor-crop{width:min(100%,320px)}}

/* The compact camera occupies cabinet space; it never floats over lower actions. */
#live-preview{position:sticky;top:8px;bottom:auto;right:auto;width:100%;max-width:none;margin:.7rem 0;z-index:8;box-shadow:0 4px 14px #0005}
html:has(#live-preview:not([hidden])){scroll-padding-top:160px;scroll-padding-bottom:1rem}
.cabinet button{scroll-margin-top:165px;scroll-margin-bottom:1rem}