/* Preserve every image slot, including the existing cropped ComfyUI frame. */
.page-jd [data-image-preview]{position:relative;display:block;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:zoom-in}
.page-jd [data-image-preview]:disabled{cursor:default;opacity:1}
.page-jd [data-image-preview]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.page-jd .jd-preview-wide{flex:none;max-width:none}
.page-jd .jd-preview-figure{display:flex;align-items:flex-start;max-width:100%;flex:none}
.page-jd .jd-image-preview img{display:block}
.page-jd .jd-preview-hsl{height:504px;min-width:725px;flex-shrink:1}
.page-jd .jd-preview-figure img{max-width:100%}
.page-jd .jd-motion-rule{position:absolute;display:block;pointer-events:none;background:var(--gold);transform-origin:left center}
.page-jd .jd-motion-rule--top{left:0;top:0;width:100%;height:1px}
.page-jd .jd-motion-rule--left{left:-1px;top:0;width:1px;height:100%;transform-origin:center top}
.page-jd .jd-pains,.page-jd .jd-pains>div,.page-jd .jd-step{position:relative}
.page-jd.jd-motion-ready .jd-pains{border-top-color:transparent}
.page-jd.jd-motion-ready .jd-pains>div+div{border-left-color:transparent}
.page-jd .jd-pains>.jd-motion-rule--top{top:-2px;height:2px}
.page-jd.jd-motion-ready .jd-step{box-shadow:none}
.page-jd .jd-pain-card .short,.page-jd .jd-pain-card .gold-line,.page-jd .jd-judge .line,.page-jd .foot-rule{transform-origin:left center}
/* Only the output viewport moves. Product, arrows, image size and 16px gap stay fixed. */
.page-jd .jd-production-showcase.is-result-loop,.page-jd .jd-layout-showcase.is-result-loop,.page-jd .jd-template-showcase.is-result-loop,.page-jd .jd-color-showcase.is-result-loop,.page-jd .jd-safety-showcase.is-result-loop{overflow:hidden}
.page-jd .jd-result-viewport{flex:1;min-width:0;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none}
.page-jd .jd-result-viewport.is-dragging{cursor:grabbing}
.page-jd .jd-result-viewport:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.page-jd .jd-result-viewport .jd-production-examples,.page-jd .jd-result-viewport .jd-layout-examples,.page-jd .jd-result-viewport .jd-color-examples,.page-jd .jd-result-viewport .jd-safety-examples{width:max-content;will-change:transform}

/* Exact 1:2 windows into the original 4260×1068 diagram; full source stays in its preview. */
.page-jd .jd-template-showcase{gap:0;align-items:center}
.page-jd .jd-template-input{flex:none;width:400px;height:534px;overflow:hidden}
.page-jd .jd-template-arrows,.page-jd .jd-template-panel{flex:none;height:534px;background-image:url("assets/crop-529-4073.webp");background-size:2130px 534px;background-repeat:no-repeat}
.page-jd .jd-template-arrows{width:82px;background-position:-400px 0}
.page-jd .jd-template-panel{width:400px;background-position:var(--template-x) 0}

.page-jd .jd-color-showcase{gap:0}
.page-jd .jd-color-examples{display:flex;gap:16px;flex:none}

/* Six exact windows into the original 3761×601 source at its existing 1880px display width. */
.page-jd .jd-safety-showcase{position:relative;gap:0}
.page-jd .jd-safety-examples{display:flex;flex:none;gap:calc(1880px * 32 / 3761)}
.page-jd .jd-safety-panel{flex:none;width:calc(1880px * 600 / 3761);height:calc(1880px * 601 / 3761);background-image:url("assets/crop-557-286.webp");background-repeat:no-repeat;background-size:1880px auto;background-position:calc(-1880px * 632 / 3761 * var(--safety-index)) 0}
.page-jd .jd-safety-showcase>.jd-safety-preview{position:absolute;right:8px;bottom:8px;width:32px;height:32px;z-index:1}
.page-jd .jd-safety-preview>img{display:none}