/* Visual layers share the scene's single 1672 x 941 coordinate system. */
#rear-project-light,#front-project-light,#foreground-layer{pointer-events:none}
.glow-layer.is-active{opacity:1}
.secret-door{outline:none;cursor:pointer}
.secret-door .door-outline{fill:#fabd4b06;stroke:#ffd27c;stroke-width:2;stroke-opacity:0;transition:stroke-opacity .2s}
.secret-plate{fill:#101826;stroke:#efb45a;stroke-width:2}
.secret-door text{fill:#ffe0a0;font:bold 12px monospace;letter-spacing:.5px;pointer-events:none}
.secret-door .secret-small{font-size:8px;letter-spacing:0}
.secret-led{fill:#ffc264;filter:drop-shadow(0 0 5px #ffbb47)}
.secret-door:hover .door-outline,.secret-door:focus-visible .door-outline{stroke-opacity:1;fill:#fabd4b15}
.secret-door:hover .secret-plate,.secret-door:focus-visible .secret-plate{fill:#41301c;filter:drop-shadow(0 0 7px #f8b74a88)}
.lab-nav{color:#f5c779}
/* Explicit dimensions prevent image height from collapsing inside the dialog. */
#project{width:min(1450px,96vw);height:min(940px,94dvh);max-height:94dvh;overflow:hidden;background:#edf0ed;color:#15232c;margin:auto;border:1px solid #6e8491}
#project .modal-head{height:64px;padding:12px 20px;gap:10px}
#project .modal-body{height:calc(100% - 64px);display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);overflow:hidden}
#project .viewer{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(160px,1fr) auto auto;background:#dbe0df}
#project .image-zone{display:block;position:relative;min-height:160px;overflow:hidden;background:#e1e5e3}
#project #main-image{position:absolute;inset:0;width:100%;height:100%;padding:20px;object-fit:contain;mix-blend-mode:normal;display:block}
#project .image-zone.is-zoomed{overflow:auto}
#project #main-image.zoomed{position:relative;inset:auto;width:180%;height:auto;min-height:100%;padding:0;max-width:none;object-fit:contain}
#project .image-status{position:absolute;inset:50% 10px auto;margin:0;text-align:center;font:12px/1.6 monospace;background:#edf0edee;padding:12px}
#project .image-status[hidden]{display:none}
#project .image-caption{font:11px/1.5 monospace;padding:10px 16px;min-height:38px;background:#e4e8e5}
#project .viewer-controls{padding:10px 12px;gap:12px;justify-content:flex-end;min-height:60px}
#project .viewer-controls button{width:42px;height:38px;padding:5px}
#project .viewer-controls button:disabled{opacity:.3;cursor:default}
#project .image-original{margin-right:auto;font:9px monospace;text-decoration:underline;text-underline-offset:4px}
#project .media-tabs{display:flex;gap:0;min-height:45px;background:#cfd9d9;border-bottom:1px solid #bbc9cb}
#project .media-tabs button{border:0;border-right:1px solid #bbc9cb;background:none;color:#2d454f;padding:12px 16px;font:bold 10px monospace}
#project .media-tabs button span{opacity:.55;margin-left:7px}
#project .media-tabs button[aria-pressed=true]{background:#123044;color:#a3ebff}
#project .media-tabs button:disabled{opacity:.35;cursor:default}
#project .modal-info{min-height:0;overflow:auto;padding:28px}
#project .modal-info h2{font-size:38px;margin:12px 0 24px}
#project .thumbs{margin-top:25px}
#project .thumbs img{mix-blend-mode:normal}
#project .hint{font-size:9px!important}
#project .close{min-height:38px}
@media(max-width:750px){header{flex-wrap:wrap;gap:15px}header nav{font-size:9px;gap:16px}.brand .brand-name{font-size:9px}#project{width:100vw;height:100dvh;max-height:100dvh;border:0}#project .modal-head{height:58px;padding:10px 14px;font-size:9px}#project .modal-body{height:calc(100% - 58px);display:block;overflow:auto}#project .viewer{height:64dvh;min-height:390px;grid-template-rows:auto minmax(220px,1fr) auto auto}#project .modal-info{padding:25px;overflow:visible}#project #main-image{padding:10px}#project .media-tabs button{padding:12px;font-size:9px}#project .viewer-controls{gap:8px;font-size:9px}#project .image-original{font-size:8px}#project .modal-info h2{font-size:32px}}

/* Keep visual outlines in the same depth plane as their project, too. */
#scene-controls .hit-area{stroke:none;fill:transparent}
.light-outline{fill:none;stroke:#83e7ff;stroke-width:1.5;vector-effect:non-scaling-stroke}
.highlight .glow-layer{opacity:.38}
.highlight .glow-layer.is-active{opacity:1}