/* Interactive inspection of the unchanged, supplied product photograph. */
.construction-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(24px,3vw,44px)}
.construction-visual{top:120px;overflow:visible;padding:10px;background:var(--panel);border-radius:5px;box-shadow:0 22px 65px color-mix(in srgb,var(--bg) 65%,transparent)}
.construction-stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1000/667;background:var(--bg);border:1px solid var(--line);border-radius:2px}
.construction-photo{width:100%;height:100%;aspect-ratio:1000/667;background:var(--bg)}
.construction-photo img{object-fit:cover;transform-origin:0 0}
.construction-photo .watermark{z-index:1;right:18px;bottom:12px;font-size:.8125rem}
.construction-shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,color-mix(in srgb,var(--bg) 55%,transparent));z-index:1}
.construction-stage::after{content:"";position:absolute;inset:12px;border:1px solid color-mix(in srgb,var(--ink) 13%,transparent);pointer-events:none;z-index:1}
.callout-lines{z-index:2;stroke-width:1.5;filter:drop-shadow(0 1px 3px var(--bg))}
.callout-lines g{opacity:.65;transition:opacity .22s}
.callout-lines circle{fill:var(--bg)}
.construction-grid.has-inspection .callout-lines g{opacity:.14}
.construction-grid.has-inspection .callout-lines g.is-active{opacity:1}
.construction-grid.is-zoomed .callout-lines g:not(.is-active){opacity:0}
.inspection-focus{stroke:var(--green);stroke-width:2;opacity:0;transition:opacity .22s}
.has-inspection .inspection-focus{opacity:1}
.callout{z-index:3;width:44px;height:44px;padding:0;font-size:.9375rem;line-height:1;font-weight:500;border-color:var(--green);color:var(--ink);background:var(--bg);box-shadow:0 0 0 5px color-mix(in srgb,var(--bg) 40%,transparent);transition:color .2s,background .2s,box-shadow .2s}
.callout:disabled{opacity:1;cursor:default}
.callout.is-active{background:var(--green);color:var(--bg);box-shadow:0 0 0 6px color-mix(in srgb,var(--green) 18%,transparent),0 0 24px color-mix(in srgb,var(--green) 20%,transparent)}
.callout:focus-visible{outline-color:var(--ink);outline-offset:6px}
.inspection-reset{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:3;background:var(--bg);color:var(--ink);border-color:var(--green)}
.is-zoomed .construction-photo{cursor:zoom-out}
.layers{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line)}
.layers li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;margin:0;padding:24px 48px 24px 16px;border-bottom:1px solid var(--line);border-left:2px solid transparent;transition:background .22s,border-color .22s}
.layers li.is-active{background:linear-gradient(90deg,color-mix(in srgb,var(--green-deep) 20%,var(--bg)),var(--bg));border-left-color:var(--green)}
.layer-number{display:grid;place-items:center;align-self:start;width:44px;height:44px;font-size:1rem;border:1px solid var(--line);border-radius:50%;color:var(--ink-muted);transition:background .22s,color .22s,border-color .22s}
.is-active>.layer-number{background:var(--green);border-color:var(--green);color:var(--bg)}
.layers h3{font-size:1.125rem;line-height:1.45;margin-bottom:9px;overflow-wrap:anywhere}
.layers p{font-size:1rem;line-height:1.65}
.layer-select{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;border-radius:0;padding:0;background:transparent;text-align:left;color:var(--ink-muted)}
.layer-select .icon{position:absolute;right:15px;top:27px;width:20px;height:20px;transition:color .22s}
.layer-select[aria-pressed=true] .icon{color:var(--green)}
.layer-select:focus-visible{outline-offset:2px;outline-color:var(--green)}
.layer-select:disabled{display:none}
@media(max-width:1180px){.construction-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.construction-visual{top:108px;padding:7px}.layers li{gap:12px;padding:20px 40px 20px 10px}.layer-select .icon{right:10px;top:23px}}
@media(max-width:800px){.construction-grid{grid-template-columns:minmax(0,1fr);gap:22px}.construction-visual{position:sticky;top:96px;z-index:5;width:min(100%,62svh);justify-self:center;padding:6px}.layers{grid-template-columns:minmax(0,1fr)}.layers li{padding:22px 44px 22px 14px;gap:16px}.layers h3{font-size:1.125rem}.layer-select .icon{top:25px;right:14px}}
@media(max-width:600px){.construction-visual{top:88px}.construction-photo .watermark{font-size:.75rem;bottom:8px;right:10px}.construction-stage::after{inset:8px}.layers li{grid-template-columns:36px minmax(0,1fr);gap:12px;padding:20px 34px 20px 8px}.layer-number{width:36px;height:36px;font-size:.9375rem}.layers h3{font-size:1.0625rem}.layer-select .icon{width:18px;height:18px;right:8px;top:24px}.inspection-reset{top:8px}}
@media(max-height:600px){.construction-visual{position:relative;top:auto}}
@media(max-width:800px) and (min-height:601px){.layer-select{scroll-margin-top:calc(110px + min(41.5svh,66.7vw))}}
@media(prefers-reduced-motion:reduce){.construction-grid *{transition:none!important}}

/* The real 3D viewer enhances, and can always switch back to, the original photograph. */
.construction-visual{scroll-margin-top:104px;container-type:inline-size}
.construction-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 8px 10px;gap:16px;font-family:var(--font-mono);font-size:.875rem;color:var(--ink-muted)}
.viewer-switch{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.viewer-switch button{min-height:44px;min-width:58px;border:0;padding:8px 16px;background:transparent;border-radius:2px;font-size:.875rem;color:var(--ink-muted)}
.viewer-switch button[aria-pressed=true]{background:var(--line);color:var(--ink)}
.has-3d:not(.is-photo) .construction-stage{display:none}
.model-surface{position:relative;width:100%;aspect-ratio:1.15;min-height:330px;overflow:hidden;border:1px solid var(--line);border-radius:3px;cursor:grab;touch-action:pan-y;isolation:isolate;background:radial-gradient(ellipse at 50% 38%,var(--line),var(--panel) 55%,var(--bg));}
.model-surface.is-dragging{cursor:grabbing}
.model-surface canvas{display:block;width:100%;height:100%;position:absolute;inset:0;outline:0}
.model-surface:focus-visible{outline-offset:3px}
.model-help{margin:9px 8px 0;text-align:center;font-size:.75rem;line-height:1.5;color:var(--ink-muted)}
.model-marker{position:absolute;width:32px;height:32px;padding:0;transform:translate(-50%,-50%);display:grid;place-items:center;border:1px solid var(--green);border-radius:50%;font-family:var(--font-mono);font-size:.75rem;background:var(--bg);color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--bg) 38%,transparent);z-index:2;transition:background .2s,color .2s}
.model-marker::before{content:"";position:absolute;inset:-7px;border-radius:50%}
.model-marker.is-active{background:var(--green);color:var(--bg)}
.model-parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px 4px 0}
.model-part-button{display:grid;justify-items:center;align-content:center;gap:3px;min-width:0;min-height:58px;padding:6px 2px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink-muted);transition:background .2s,border-color .2s,color .2s}
.model-part-number{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-family:var(--font-mono);font-size:.75rem;line-height:1;color:var(--green)}
.model-part-label{font-size:.75rem;line-height:1.25}
.model-part-button.is-active{border-color:var(--green);color:var(--bg);background:var(--green)}
.model-part-button.is-active .model-part-number{background:var(--bg);color:var(--ink)}
.model-focus-label{position:absolute;top:12px;left:12px;z-index:4;display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:4px 10px 4px 4px;border:1px solid var(--green);border-radius:4px;background:var(--bg);color:var(--ink);font-size:.8125rem;line-height:1.25;pointer-events:none}
.model-focus-number{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:3px;background:var(--green);color:var(--bg);font-family:var(--font-mono);font-size:.75rem}
.model-focus-guide{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;filter:drop-shadow(0 1px 2px var(--bg))}
.model-focus-guide path{stroke:var(--green);stroke-width:1.5;fill:none}
.model-focus-guide circle{stroke:var(--ink);stroke-width:1.5;fill:var(--green)}
.model-controls{padding:14px 8px 0}
.model-actions{display:grid;grid-template-columns:minmax(140px,1.1fr) minmax(80px,1fr) 44px;gap:14px;align-items:center}
.model-toggle{font-size:.875rem;min-height:46px;padding:10px 14px;line-height:1.4}
#model-explode{--model-progress:0%;appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:44px;padding:0;margin:0;border:0;background:transparent;accent-color:var(--green);cursor:ew-resize}
#model-explode::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(to right,var(--green) var(--model-progress),var(--line) var(--model-progress))}
#model-explode::-moz-range-track{height:5px;border-radius:3px;background:var(--line)}
#model-explode::-moz-range-progress{height:5px;border-radius:3px;background:var(--green)}
#model-explode::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-7.5px;border:2px solid var(--ink);border-radius:50%;background:var(--green)}
#model-explode::-moz-range-thumb{box-sizing:border-box;width:20px;height:20px;border:2px solid var(--ink);border-radius:50%;background:var(--green)}
.model-angles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.model-angles button{font-size:.875rem;min-height:44px;padding:7px 10px;background:var(--bg);border:1px solid var(--line);border-radius:3px;color:var(--ink-muted)}
.model-angles button[aria-pressed=true],.model-angles button:hover{border-color:var(--green);color:var(--ink)}
.model-caption,.model-status{font-size:.875rem;line-height:1.5;color:var(--ink-muted);padding:12px 8px 4px}
.model-status:empty{display:none}
@media(min-width:801px){.has-3d .construction-visual{top:106px}.model-surface{min-height:300px}.has-3d .layers li{padding-block:23px}}
/* Adapt to the card's width, including narrow desktop columns. */
@container(max-width:520px){.model-marker{display:none}.model-parts{display:grid}.model-actions{grid-template-columns:minmax(0,1fr) 44px;gap:6px 12px}.model-toggle{grid-column:1/-1;min-height:48px}.model-controls{padding:12px 4px 0}.model-angles{margin-top:6px}.model-caption{font-size:.8125rem}}
@media(max-width:800px){.has-3d .construction-visual{position:relative;top:auto;width:100%}.model-surface{aspect-ratio:auto;height:clamp(220px,34svh,310px);min-height:0}.model-controls{padding:12px 4px 0}.construction-toolbar{padding:0 4px 8px}.viewer-switch button{min-width:52px;padding-inline:12px}.model-marker{display:none}.model-parts{display:grid}.model-actions{grid-template-columns:minmax(0,1fr) 44px;gap:6px 12px}.model-toggle{grid-column:1/-1;min-height:48px;padding:10px 14px}.model-angles{margin-top:6px}.model-angles button{padding-inline:4px;font-size:.8125rem}.model-caption{padding:10px 4px 2px;font-size:.8125rem}.has-3d .layer-select{scroll-margin-top:100px}}
@media(hover:none) and (pointer:coarse){.model-keyboard-help{display:none}}
@media(hover:hover){.model-part-button:not(.is-active):hover{border-color:var(--green);color:var(--ink)}}