/* One spatial assembly. Photos appear only in the separate reference panel. */
.assembly-showcase .studio-angles{display:none}
.assembly-showcase .assembly-halo{background:radial-gradient(ellipse at 32% 55%,#4aa5b126,transparent 58%),radial-gradient(ellipse at 72% 40%,#9c76e521,transparent 58%);opacity:.7}
.assembly-showcase[data-reveal=playing] .assembly-halo{animation:build-reveal-glow 6.4s ease-in-out both}
.assembly-showcase[data-rendering=paused] .assembly-halo{animation-play-state:paused}
@keyframes build-reveal-glow{0%,100%{opacity:.55;transform:scale(.96)}45%{opacity:1;transform:scale(1.06)}}
.assembly-reduced .assembly-halo,.motion-off .assembly-halo{animation:none!important}
@media(prefers-reduced-motion:reduce){.assembly-showcase .assembly-halo{animation:none!important}}
.assembly-viewer{--assembly-accent:#8edbfa;position:relative;width:100%;height:100%;isolation:isolate;overflow:hidden;contain:layout paint}
.assembly-halo{position:absolute;inset:8% 5% 7%;z-index:-1;background:radial-gradient(ellipse at 48% 52%,#41617622,transparent 66%);pointer-events:none}
.assembly-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab;outline:0}
.assembly-canvas:focus-visible{outline:1px solid #a0d7ef88;outline-offset:-6px;border-radius:4px}
.assembly-dragging .assembly-canvas{cursor:grabbing}
.assembly-viewer:before,.assembly-viewer:after{content:"";position:absolute;left:0;right:0;pointer-events:none;z-index:1}.assembly-viewer:before{top:0;height:42px;background:linear-gradient(#0d171fe8,transparent)}.assembly-viewer:after{bottom:0;height:32px;background:linear-gradient(transparent,#0d171fe8)}
.assembly-topline{position:absolute;top:6px;left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;gap:15px;pointer-events:none;z-index:2}
.assembly-mode{display:flex;align-items:center;gap:7px;color:#86a4b8;font:11px monospace;letter-spacing:1.2px}
.assembly-mode i,.assembly-status>i{display:block;width:3px;height:3px;background:var(--assembly-accent);border-radius:50%;box-shadow:0 0 9px #88cfff55}
.assembly-photo-toggle{pointer-events:auto;padding:6px 0 6px 9px;font-size:11px;color:#a1b7c7;min-height:30px}
.assembly-photo-toggle:hover,.assembly-replay:hover{color:#e2f5ff}
.assembly-status{position:absolute;bottom:7px;left:32px;right:32px;display:flex;align-items:center;gap:7px;pointer-events:none;color:#86a4b8;font-size:11px;line-height:1.4;min-height:24px;z-index:2}
.assembly-status-copy{flex:1}.assembly-replay{pointer-events:auto;padding:5px 0 5px 12px;font-size:11px;color:#a0bccf;white-space:nowrap}
.assembly-progress{height:1px;position:absolute;bottom:1px;left:32px;right:32px;opacity:0;transition:opacity .25s;background:#7296ad13;pointer-events:none}
.assembly-progress>span{height:100%;display:block;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#75bed455,#a4e4fc);box-shadow:0 0 7px #8acfff44}
.assembly-swapping .assembly-progress{opacity:1}.assembly-swapping .assembly-status>i{background:#b7ecfd;box-shadow:0 0 8px #b7ecfd88}
.assembly-reference{position:absolute;inset:24px 32px 27px;border:1px solid #6b879b4d;background:#101d27f9;backdrop-filter:blur(18px);z-index:4;padding:19px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:7px;box-shadow:0 18px 40px #0005}
.assembly-reference-label{font:11px monospace;letter-spacing:1.5px;color:#7798af;align-self:flex-start}.assembly-reference-image{min-height:0;flex:1;display:flex;justify-content:center;width:100%;padding:9px}.assembly-reference-image img{max-width:100%;height:100%;object-fit:contain;min-height:0}.assembly-reference-name{font-size:13px;font-weight:400;color:#cbdde9;text-align:center;margin-top:8px}.assembly-reference-note{font-size:11px;line-height:1.6;color:#8da5b6;text-align:center;margin-top:7px;max-width:390px}.assembly-reference-close{position:absolute;right:10px;top:7px;width:34px;height:34px;font-size:22px;color:#adc3d2}
.assembly-service{position:absolute;inset:35% 10% auto;text-align:center;background:#101d27ed;backdrop-filter:blur(15px);border:1px solid #759bb52b;padding:24px;border-radius:5px;box-shadow:0 14px 40px #0003;pointer-events:none}.assembly-service>span{color:#7c9fb8;font:11px monospace;letter-spacing:1px;text-transform:uppercase}.assembly-service>strong{font-size:23px;font-weight:400;display:block;margin:12px 0;color:#d1e7f4}.assembly-service>p{font-size:11px;line-height:1.7;color:#91afc3}
.assembly-viewer [hidden]{display:none!important}.assembly-compact .assembly-topline{top:33px}.assembly-compact .assembly-status{bottom:126px}.assembly-compact .assembly-progress{bottom:122px}.assembly-compact .assembly-canvas{height:calc(100% - 70px)}
@media(max-width:1150px){.assembly-topline,.assembly-status,.assembly-progress{left:23px;right:23px}}
@media(max-width:740px){.assembly-topline{left:18px;right:18px;top:0;align-items:flex-start}.assembly-mode{font-size:11px;letter-spacing:.8px;padding-top:6px}.assembly-photo-toggle{font-size:11px;min-height:26px;padding-top:4px}.assembly-status{left:18px;right:18px;bottom:0;font-size:11px;min-height:23px}.assembly-replay{font-size:11px;min-height:28px}.assembly-status>i{width:2px;height:2px}.assembly-progress{left:18px;right:18px;bottom:0}.assembly-reference{inset:6px 18px 3px;padding:9px 13px;gap:0;flex-direction:row;flex-wrap:wrap;align-content:center}.assembly-reference-label{position:absolute;top:8px;left:12px;font-size:11px}.assembly-reference-image{height:86%;width:38%;flex:0 0 38%;padding:8px}.assembly-reference-name{width:53%;text-align:left;font-size:11px;line-height:1.6;margin-top:0;padding-right:10px}.assembly-reference-note{display:none}.assembly-reference-close{font-size:19px;width:28px;height:28px;right:2px;top:0}.assembly-service{inset:25% 12% auto;padding:13px}.assembly-service>strong{font-size:16px;margin:7px 0}.assembly-service>span{font-size:11px}.assembly-service>p{font-size:11px}.assembly-compact .assembly-topline{top:24px}.assembly-compact .assembly-status{bottom:90px}.assembly-compact .assembly-progress{bottom:87px}.assembly-compact .assembly-mode{font-size:11px}.assembly-compact .assembly-status{font-size:11px}}
@media(prefers-reduced-motion:reduce){.assembly-progress{transition:none}}
/* A single, inspectable studio for the case, assembly and individual hardware. */
.studio-controls{position:absolute;top:26px;left:25px;right:25px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:3;pointer-events:none}
.studio-modes,.studio-tools{display:flex;align-items:center;gap:2px;pointer-events:auto;background:#101d26e8;border:1px solid #6d8b9d40;border-radius:7px;padding:3px}
.studio-controls button{min-height:32px;min-width:32px;padding:6px 13px;color:#8da9ba;font-size:11px;border-radius:4px}
.studio-controls button[aria-pressed=true]{background:#274254;color:#d9f3ff}
.studio-controls button:hover{color:#fff;background:#263b4b}.studio-controls button:disabled{opacity:.3;cursor:default}
.studio-tools button{padding-inline:8px;font-size:17px}
.studio-angles{position:absolute;left:25px;right:25px;bottom:30px;display:flex;justify-content:space-between;align-items:center;gap:7px;z-index:3}
.studio-angles>div{display:flex;gap:4px}.studio-angles button{font-size:11px;color:#91aabd;min-height:30px;padding:6px 8px;border-bottom:1px solid transparent}
.studio-angles button[aria-pressed=true]{color:#c3eeff;border-color:#91d5f0}
.studio-details{position:absolute;z-index:4;left:25px;right:25px;bottom:66px;border:1px solid #58778975;border-radius:8px;padding:20px;background:#10202bf5;max-height:calc(100% - 140px);overflow:auto;box-shadow:0 15px 45px #0005}
.studio-details strong{font-size:16px;font-weight:450;color:#e1f1f8}.studio-details p{font-size:11px;color:#a8bfcd;line-height:1.7;margin:10px 0}.studio-details small{display:block;color:#6d92ab;font-size:11px;margin-top:15px}
.studio-caption{position:absolute;bottom:37px;left:25px;right:25px;text-align:center;pointer-events:none}.studio-caption strong{font-size:12px;font-weight:400;color:#c1deeb;display:block}.studio-caption span{display:block;font-size:11px;line-height:1.5;color:#7f9eaf;margin-top:6px}
.studio-dialog{position:fixed;inset:20px;width:calc(100vw - 40px);height:calc(100dvh - 40px);max-width:1500px;max-height:none;padding:0;border:1px solid #5a7c9066;border-radius:14px;background:radial-gradient(ellipse at 50% 40%,#1c3342,#0b131a 72%);color:#d4eaf4;overflow:hidden}
.studio-dialog::backdrop{background:#03080dea}.studio-close{position:absolute;right:24px;top:16px;z-index:5;min-height:38px;padding:10px 15px;border:1px solid #738b9c44;border-radius:6px;font-size:12px}.studio-expanded-mount{position:absolute;inset:65px 10px 15px}.studio-dialog .assembly-viewer{height:100%;width:100%}.studio-dialog .assembly-canvas{width:100%;height:100%}.studio-dialog .assembly-topline{top:0}.studio-dialog .assembly-status{bottom:0}.studio-dialog .assembly-progress{bottom:0}.studio-dialog .studio-controls{top:32px}.studio-dialog .studio-details{right:25px;left:auto;width:320px}.studio-dialog .studio-caption{bottom:40px}
.assembly-viewer[data-studio-mode=case] .assembly-replay,.assembly-viewer[data-studio-mode=part] .assembly-replay{display:none}
@media(min-width:741px){.scroll-builder .machine-wrap{inset:90px 0 208px}.scroll-builder .component-callout{bottom:92px;min-height:85px}.scroll-builder .visual-toolbar{bottom:38px}.scroll-builder .visual-instructions{bottom:12px}.scroll-builder .viewer-stats{margin-top:10px}.scroll-builder .viewer-stats strong{font-size:20px}}
@media(max-width:740px){.studio-controls{left:14px;right:14px;top:15px;gap:6px}.studio-modes,.studio-tools{padding:2px;border-radius:4px}.studio-controls button{min-height:27px;min-width:27px;padding:4px 8px;font-size:11px}.studio-tools button{padding:4px 5px;font-size:14px}.studio-angles{left:14px;right:14px;bottom:20px}.studio-angles button{font-size:11px;padding:4px 6px;min-height:24px}.studio-details{left:14px;right:14px;bottom:48px;max-height:calc(100% - 96px);padding:12px}.studio-details strong{font-size:12px}.studio-details p{font-size:11px;margin:6px 0}.studio-details small{font-size:11px}.studio-caption{bottom:25px;left:14px;right:14px}.studio-caption strong{font-size:11px}.studio-caption span{font-size:11px}.studio-dialog{inset:6px;width:calc(100vw - 12px);height:calc(100dvh - 12px);border-radius:10px}.studio-dialog .studio-controls{top:26px}.studio-dialog .studio-controls button{min-height:36px;font-size:11px}.studio-dialog .studio-tools button{font-size:17px}.studio-dialog .studio-angles button{min-height:36px;font-size:11px}.studio-dialog .studio-details{left:14px;right:14px;width:auto;max-height:55%;bottom:70px;padding:18px}.studio-dialog .studio-details strong{font-size:16px}.studio-dialog .studio-details p{font-size:12px}.studio-dialog .studio-caption strong{font-size:14px}.studio-dialog .studio-caption span{font-size:11px}.studio-dialog .studio-angles{bottom:30px}.studio-close{top:12px;right:14px}.studio-expanded-mount{inset:65px 0 15px}}
@media(max-width:740px){.studio-controls button{min-height:36px;min-width:36px;font-size:11px}.studio-tools button{font-size:16px}.studio-angles{gap:3px}.studio-angles>div{gap:0}.studio-angles button{min-height:32px;min-width:31px;font-size:11px;padding-inline:4px}.studio-angles>button{white-space:nowrap}.studio-dialog .studio-angles button{min-height:40px;min-width:36px;font-size:11px;padding-inline:5px}}

.studio-reveal{position:absolute;left:25px;bottom:36px;z-index:3;min-height:34px;padding:7px 11px;border:1px solid #6d8b9d40;border-radius:5px;color:#95aebd;background:#101d26e8;font-size:11px}.studio-reveal[aria-pressed=true]{border-color:#74b7ce66;color:#c6ecfb;background:#1b3442e8}.studio-reveal:before{content:"◈";margin-right:6px;color:#83bed2}.studio-reveal:hover{border-color:#9bd7ea}.studio-reveal:focus-visible{outline:2px solid #b4eaff;outline-offset:3px}@media(max-width:740px){.studio-reveal{left:14px;bottom:26px;font-size:11px;min-height:32px;padding:5px 8px}.studio-dialog .studio-reveal{bottom:36px;font-size:11px;min-height:40px}}
/* Give the finished PC a clear silhouette on a compact screen; expand for tools. */
@media(max-width:740px){.assembly-showcase .studio-controls{justify-content:flex-end}.assembly-showcase .studio-modes,.assembly-showcase [data-studio-zoom]{display:none}.studio-dialog .assembly-showcase .studio-controls{justify-content:space-between}.studio-dialog .assembly-showcase .studio-modes{display:flex}.studio-dialog .assembly-showcase [data-studio-zoom]{display:block}}

/* The exploded study is a clear component overview, not a live installation. */
.assembly-exploded .studio-reveal{display:none}
