/* Original opaque project renders are contained media, not a dark page section. */
/* Hover-driven inspection does not need an empty scroll runway. */
#pc-scroll.pc-hover-scroll{height:auto;min-height:0;margin-bottom:65px}
#pc-scroll.pc-hover-scroll .pc-sticky{position:relative;top:0;height:auto;min-height:0;max-height:none;padding-block:25px}
#pc-scroll.pc-hover-scroll .pc-media{cursor:ns-resize}
.pcbuild{padding-top:130px}.pc-intro .text-link{margin-top:16px;color:var(--ink)}.pc-scroll{height:220vh;min-height:1300px;margin-top:50px;position:relative}.pc-sticky{position:sticky;top:94px;height:calc(100vh - 100px);max-height:1050px;min-height:580px;display:flex;flex-direction:column;justify-content:center;background:var(--paper);padding:20px var(--pad)}.pc-original{display:grid;grid-template-columns:1fr minmax(0,2.9fr) .8fr;align-items:center;gap:35px;max-width:1450px;width:100%;margin:auto;min-height:0}.pc-media{position:relative;width:100%;max-width:min(74vh,800px);margin:auto;overflow:hidden;border-radius:3px;background:#eee;box-shadow:0 25px 45px -25px #29291c35}.pc-media img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}.pc-source{position:absolute;bottom:14px;left:18px;font-size:9px;color:#fff;background:#2229;padding:4px 7px;border-radius:2px}.pc-side{align-self:center}.pc-side>.mono{font-size:9px;display:block;color:var(--muted)}.pc-side__large{display:block;font-size:clamp(65px,8vw,125px);letter-spacing:-.07em;line-height:1;margin-top:35px;font-weight:400}.pc-side>#pc-view-label{display:block;font-size:18px;letter-spacing:-.03em;margin-top:10px}.pc-side p{font-size:11px;color:var(--muted);margin-top:35px}.pc-components{display:flex;flex-direction:column;gap:14px;color:var(--muted);font-size:11px;padding-left:10px}.pc-components .mono{font-size:8px;margin-bottom:14px}.pc-components>span:not(:first-child){border-top:1px solid var(--line);padding-top:9px}.pc-controls{display:flex;align-items:center;gap:25px;width:min(900px,100%);margin:28px auto 0;padding:18px 0;border-top:1px solid var(--line);position:relative;z-index:3}.pc-controls label{font-size:12px;white-space:nowrap}.pc-controls input{width:100%;min-width:70px;accent-color:var(--accent);height:24px;cursor:ew-resize}.pc-controls .mono{font-size:9px;white-space:nowrap;color:var(--muted)}.pc-controls button{border:0;background:none;color:var(--muted);font-size:11px;white-space:nowrap;min-height:44px;padding:0 8px}.pc-controls button:hover{color:var(--ink)}.pc-disclosure{text-align:center;font-size:9px;color:var(--muted);padding-bottom:15px}.pcbuild .project-heading h3{font-size:clamp(42px,5.3vw,80px)}
@media(max-width:1100px){.pc-original{grid-template-columns:1fr 3.3fr;gap:25px}.pc-components{display:none}.pc-media{max-width:65vh}.pc-controls{gap:15px}}
@media(max-width:760px){.pcbuild{padding-top:85px}.pcbuild .project-heading h3{font-size:44px}.pc-scroll{height:175vh;min-height:1050px;margin-top:35px}.pc-sticky{top:76px;height:calc(100svh - 80px);min-height:560px;padding:16px var(--pad);justify-content:center}.pc-original{display:flex;flex-direction:column;gap:16px;margin:0 auto}.pc-side{width:100%;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.pc-side>.mono{font-size:8px;margin-right:auto}.pc-side__large{font-size:22px;margin:0;letter-spacing:-.04em}.pc-side>#pc-view-label{font-size:12px;margin:0}.pc-side p{display:none}.pc-media{max-width:420px;max-height:none;width:100%}.pc-source{font-size:8px;left:10px;bottom:10px}.pc-controls{display:grid;grid-template-columns:1fr auto;gap:8px 15px;margin-top:20px;padding-top:15px}.pc-controls label{font-size:11px}.pc-controls input{grid-row:2;grid-column:1/-1}.pc-controls .mono{grid-row:1;grid-column:2;font-size:8px}.pc-controls button{grid-column:2;min-height:36px;text-align:right;padding:0}.pc-disclosure{font-size:8px;text-align:left;max-width:40ch;padding:0;line-height:1.6;margin-top:-30px;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.pc-scroll{height:auto;min-height:0;margin-bottom:50px}.pc-sticky{position:relative;top:0;height:auto;min-height:0;padding-block:25px}.pc-media{max-width:650px}}
/* the GLB canvas fills its box; without a height the renderer size and the CSS size disagree */
#pc-glb-wrapper .pc-media{aspect-ratio:1}
#pc-glb{width:100%;height:100%;display:block}

/* the wrapper's class is pc-glb, so styles.css's .pc-glb-wrapper rules never applied and the
   component list dropped below the model. Same three columns as the frames viewer. */
#pc-glb-wrapper{display:grid;grid-template-columns:1fr minmax(0,2.9fr) .8fr;align-items:center;gap:35px;max-width:1450px;width:100%;margin:auto}
#pc-glb-wrapper .pc-components{display:flex;flex-direction:column;gap:14px;color:var(--muted);font-size:11px;padding-left:10px;margin:0}
#pc-glb-wrapper .pc-components span{background:none;border:0;border-radius:0;padding:0;font-family:inherit;font-size:11px}
#pc-glb-wrapper .pc-components .mono{font-size:8px;margin-bottom:14px}
#pc-glb-wrapper .pc-components>span:not(:first-child){border-top:1px solid var(--line);padding-top:9px}
@media(max-width:1100px){#pc-glb-wrapper{grid-template-columns:1fr 3.3fr;gap:25px}#pc-glb-wrapper .pc-components{display:none}}
@media(max-width:760px){#pc-glb-wrapper{display:flex;flex-direction:column;gap:16px}}