/* The photograph is the stage. Controls use the site's ink/paper glass palette. */
.vision-showcase{--cinema-gold:#ffcf70;--cinema-ease:cubic-bezier(.22,1,.36,1);background:var(--night,#111e23)}
.vision-showcase [hidden]{display:none!important}
.vision-showcase .cinematic-viewport{position:absolute;inset:0 0 116px;overflow:hidden;touch-action:none;overscroll-behavior:contain;cursor:grab;isolation:isolate}
.vision-showcase .cinematic-viewport:active{cursor:grabbing}
.vision-showcase .cinematic-viewport:focus-visible{outline:2px solid var(--accent,#b9cabb);outline-offset:-4px}
.vision-showcase .cinematic-surface{position:absolute;left:50%;top:50%;transform-origin:center;pointer-events:none;overflow:visible;will-change:transform}
.vision-showcase .cinematic-visual{position:relative;width:100%;height:100%;transform-origin:center;transform-style:preserve-3d}
.vision-showcase .cinematic-visual>img{display:block;position:static;left:auto;top:auto;width:100%;height:100%;max-width:none;max-height:none;object-fit:fill;transform:none;pointer-events:none;user-select:none}
.vision-showcase .cinematic-relief,.vision-showcase .cinematic-lights{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cinematic-relief{z-index:1}.cinematic-lights{z-index:2;mix-blend-mode:screen}
.cinematic-toolbar button:focus-visible{outline:3px solid var(--cinema-gold);outline-offset:3px}
.cinematic-heading{position:absolute;left:26px;top:23px;z-index:3;color:var(--paper,#f5f6f3);pointer-events:none;text-shadow:0 2px 12px #0009}
.cinematic-heading span{font-size:12px;color:#d4dfd8}.cinematic-heading h2{margin:7px 0;font-size:23px;font-weight:500;letter-spacing:-.6px}
.vision-showcase .vision-ai-note{right:22px;top:24px;bottom:auto}

.vision-showcase .cinematic-toolbar{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);z-index:8;display:flex;flex-direction:row;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 28px);padding:6px;border:1px solid #f5f6f34a;border-radius:13px;background:#14252bdf;color:var(--paper,#f5f6f3);box-shadow:0 8px 32px #0004;backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);white-space:nowrap}
.cinematic-main-controls,.cinematic-zoom-controls{display:flex;align-items:center;gap:4px}
.vision-showcase .cinematic-toolbar button{min-width:44px;min-height:44px;height:auto;padding:9px 13px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--paper,#f5f6f3);font:500 13px/1.5 var(--sans,'Noto Sans KR',sans-serif);cursor:pointer;touch-action:manipulation;user-select:none;transition:background 150ms ease,color 150ms ease}

.vision-showcase .cinematic-toolbar button[id$='fit']{background:#ffffff0a;border-color:#ffffff24}
.vision-showcase .cinematic-toolbar button[id$='effects']{font-size:11px;color:#c4d4c8;border-right-color:#ffffff24;border-radius:8px 0 0 8px}
.vision-showcase .cinematic-toolbar button[id$='minus'],.vision-showcase .cinematic-toolbar button[id$='plus']{font-size:22px;padding:4px 8px}
.vision-showcase .cinematic-toolbar button:disabled{opacity:.4;cursor:default}
.vision-showcase .cinematic-toolbar output{font-size:12px;min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
.vision-showcase .cinematic-toolbar .zoom-slider input{width:72px;accent-color:var(--accent,#b9cabb)}
.vision-showcase .vision-note{font-size:11px;bottom:10px;color:#bdcbc4}
#render-gallery.vision-showcase #gallery-viewport{inset:100px 20px 145px}
#render-gallery.vision-showcase .cinematic-toolbar{bottom:76px}
#render-gallery.vision-showcase .gallery-feature-tools{top:29px;right:158px}
#render-gallery.vision-showcase .gallery-caption{bottom:14px;left:24px;right:24px;font-size:11px}
#render-gallery.vision-showcase .gallery-caption p{display:none}
#render-gallery.vision-showcase .gallery-caption span{font-family:var(--sans);font-size:12px}
#render-gallery.vision-showcase .gallery-caption small{font-size:10px}
#gallery-stage>.ai-image-note{display:none}
@media(hover:hover) and (pointer:fine){.vision-showcase .cinematic-toolbar button:not(:disabled):hover{background:#ffffff20}}
@media(max-width:760px){
 .vision-showcase .cinematic-viewport{bottom:151px}
 .cinematic-heading{top:17px;left:16px}.cinematic-heading h2{font-size:19px}.cinematic-heading span{font-size:10px}.vision-showcase .vision-ai-note{top:18px;right:14px;font-size:9px}
 .vision-showcase .cinematic-toolbar{bottom:34px;display:flex;flex-direction:column;width:calc(100% - 24px);max-width:480px;gap:3px;padding:5px}
 .cinematic-main-controls{display:grid;grid-template-columns:repeat(2,1fr);width:100%;gap:3px}.cinematic-zoom-controls{justify-content:center;width:100%;gap:3px}
 .vision-showcase .cinematic-toolbar button{padding:8px 6px;font-size:12px;min-width:44px}
 .vision-showcase .cinematic-toolbar .zoom-slider input{width:58px}

 #render-gallery.vision-showcase #gallery-viewport{inset:119px 0 174px}
 #render-gallery.vision-showcase .cinematic-toolbar{bottom:57px}
 #render-gallery.vision-showcase .gallery-feature-tools{top:72px;right:12px}
 #render-gallery.vision-showcase .vision-model-link{padding:6px 10px;font-size:11px}
 #render-gallery.vision-showcase .gallery-caption{bottom:10px;left:12px;right:12px}.gallery-caption>span{display:none}
 .vision-showcase .vision-note{font-size:9px;left:12px;right:12px}
}
@media(max-width:760px) and (max-height:620px){
 .cinematic-heading{display:none}.vision-showcase .cinematic-viewport{bottom:143px}

}
@media(max-height:500px) and (orientation:landscape){
 .vision-showcase .cinematic-viewport{inset:0 0 80px}.vision-showcase .cinematic-toolbar{flex-direction:row;width:max-content;max-width:calc(100% - 20px);gap:5px;bottom:26px}.cinematic-main-controls{display:flex;width:auto}.cinematic-zoom-controls{width:auto}.cinematic-heading{display:none}
 #render-gallery.vision-showcase #gallery-viewport{inset:72px 0 100px}#render-gallery.vision-showcase .gallery-feature-tools{top:18px;right:110px}#render-gallery.vision-showcase .cinematic-toolbar{bottom:40px}
 .vision-showcase .cinematic-toolbar .zoom-slider{display:none}
}
@media(prefers-reduced-motion:reduce){.vision-showcase .cinematic-surface{will-change:auto}.vision-showcase .cinematic-toolbar button{transition:none}}

/* Day / night share one image coordinate system, with pixel-aligned comparison. */
.dn-ready>img{filter:brightness(.88) contrast(1.08) saturate(.94)}
.dn-bloom,.dn-lights,.dn-day{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.dn-bloom,.dn-lights{z-index:1;mix-blend-mode:screen}
.dn-day{z-index:2;overflow:hidden}.dn-day canvas{display:block;width:100%;height:100%}
.dn-day-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;max-width:90%;padding:11px 16px;border:1px solid #ffffff52;border-radius:10px;background:#14252bec;color:#f5f6f3;font:12px/1.6 var(--sans,sans-serif);text-align:center;pointer-events:none}
.dn-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:4;background:#fff9;box-shadow:0 0 10px #101b2540;pointer-events:none}
.dn-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:56px;border:1px solid #fff9;border-radius:28px;background:#14252bd9;color:#f5f6f3;font:22px/1 sans-serif;box-shadow:0 3px 18px #0004;pointer-events:auto;touch-action:none;cursor:ew-resize;user-select:none}
.dn-side{position:absolute;top:14px;font:10px/1.4 var(--sans,sans-serif);letter-spacing:1.3px;background:#14252bbd;color:#f5f6f3;border:1px solid #ffffff36;padding:6px 9px;border-radius:20px;white-space:nowrap}
.dn-side-day{right:15px;transform-origin:top right}.dn-side-night{left:15px;transform-origin:top left}
.vision-showcase .cinematic-toolbar{display:grid;grid-template-columns:auto auto;gap:3px 12px}
.dn-controls{grid-column:1/-1;display:grid;gap:3px;border-bottom:1px solid #ffffff1c;padding-bottom:4px}
.dn-modes{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:4px}
.vision-showcase .dn-modes button[aria-pressed=true]{background:var(--accent,#b9cabb);color:var(--ink,#14252b);border-color:#e3ece077}
@media(hover:hover) and (pointer:fine){.vision-showcase .cinematic-toolbar .dn-modes button[aria-pressed=true]:hover{background:#d2ded3;color:var(--ink,#14252b)}}
.dn-range{display:flex;align-items:center;gap:12px;padding:0 10px;color:#cbd6d0;font:11px/1.4 var(--sans,sans-serif)}
.dn-range input{min-width:0;width:100%;height:44px;accent-color:var(--accent,#b9cabb);cursor:ew-resize;touch-action:pan-y}
.dn-range input:focus-visible{outline:2px solid var(--cinema-gold);outline-offset:0;border-radius:4px}
.dn-range span{flex:none}
.vision-showcase.is-cinematic .cinematic-viewport{bottom:167px}
.vision-showcase.is-cinematic[data-light-mode=compare] .cinematic-viewport{bottom:214px}
#render-gallery.vision-showcase.is-cinematic #gallery-viewport{bottom:196px}
#render-gallery.vision-showcase.is-cinematic[data-light-mode=compare] #gallery-viewport{bottom:243px}
@media(max-width:760px){
 .vision-showcase .cinematic-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:calc(100% - 20px);max-width:480px}
 .cinematic-main-controls{display:flex;gap:0;justify-content:space-evenly;width:auto}.cinematic-zoom-controls{width:auto;gap:0}
 .vision-showcase .cinematic-toolbar button{font-size:11px;padding:8px 5px}.vision-showcase .cinematic-toolbar button[id$='effects']{max-width:50px;white-space:normal;line-height:1.4}
 .vision-showcase .cinematic-toolbar .zoom-slider{display:none}
 .vision-showcase.is-cinematic .cinematic-viewport{bottom:151px}
 .vision-showcase.is-cinematic[data-light-mode=compare] .cinematic-viewport{bottom:198px}
 #render-gallery.vision-showcase.is-cinematic #gallery-viewport{bottom:174px}
 #render-gallery.vision-showcase.is-cinematic[data-light-mode=compare] #gallery-viewport{bottom:221px}
 .dn-side{font-size:8px;letter-spacing:.8px;padding:5px 7px;top:8px}
 .dn-handle{width:44px;height:48px}
}
@media(max-height:500px) and (orientation:landscape){
 .vision-showcase .cinematic-toolbar{grid-template-columns:auto auto auto;width:max-content;max-width:calc(100% - 16px)}
 .dn-controls{grid-column:auto;display:flex;border-bottom:0;padding-bottom:0}.dn-modes{display:flex}.dn-range{max-width:150px;padding:0;gap:4px}.dn-range span{display:none}
 .vision-showcase.is-cinematic .cinematic-viewport,.vision-showcase.is-cinematic[data-light-mode=compare] .cinematic-viewport{bottom:85px}
 #render-gallery.vision-showcase.is-cinematic #gallery-viewport,#render-gallery.vision-showcase.is-cinematic[data-light-mode=compare] #gallery-viewport{bottom:100px}
}

@media(min-width:1100px) and (min-height:501px){
 .vision-showcase .cinematic-toolbar{grid-template-columns:auto auto auto;gap:10px}
 .dn-controls{grid-column:auto;display:flex;align-items:center;border:0;padding:0}.dn-modes{display:flex}
 .dn-range{width:180px;padding:0 4px;gap:6px}
 .vision-showcase.is-cinematic .cinematic-viewport,.vision-showcase.is-cinematic[data-light-mode=compare] .cinematic-viewport{bottom:116px}
 #render-gallery.vision-showcase.is-cinematic #gallery-viewport,#render-gallery.vision-showcase.is-cinematic[data-light-mode=compare] #gallery-viewport{bottom:145px}
}
@media(max-width:1099px) and (max-height:500px) and (orientation:landscape){
 .vision-showcase .cinematic-toolbar{grid-template-columns:1fr 1fr;width:calc(100% - 20px);max-width:600px}
 .dn-controls{grid-column:1/-1;justify-content:center}.dn-range{width:150px}
 .vision-showcase.is-cinematic .cinematic-viewport,.vision-showcase.is-cinematic[data-light-mode=compare] .cinematic-viewport{bottom:132px}
 #render-gallery.vision-showcase.is-cinematic #gallery-viewport,#render-gallery.vision-showcase.is-cinematic[data-light-mode=compare] #gallery-viewport{bottom:147px}
}
@media(max-width:360px) and (min-height:501px){
 .vision-showcase .cinematic-toolbar{grid-template-columns:1fr}
 .cinematic-main-controls{display:grid;grid-template-columns:1fr 1fr}.cinematic-zoom-controls{justify-content:center}
 .vision-showcase.is-cinematic .cinematic-viewport{bottom:197px}
 .vision-showcase.is-cinematic[data-light-mode=compare] .cinematic-viewport{bottom:244px}
 #render-gallery.vision-showcase.is-cinematic #gallery-viewport{bottom:220px}
 #render-gallery.vision-showcase.is-cinematic[data-light-mode=compare] #gallery-viewport{bottom:267px}
}
@media(min-width:800px) and (max-width:1099px) and (max-height:500px){
 .vision-showcase .cinematic-toolbar{grid-template-columns:auto auto auto;width:max-content;max-width:calc(100% - 16px);gap:4px}
 .dn-controls{grid-column:auto}.dn-range{width:95px;max-width:95px}
 .vision-showcase .cinematic-toolbar button{font-size:11px;padding:7px 6px}
 .vision-showcase .cinematic-toolbar button[id$='effects']{max-width:50px;white-space:normal;line-height:1.4}
 .vision-showcase.is-cinematic .cinematic-viewport,.vision-showcase.is-cinematic[data-light-mode=compare] .cinematic-viewport{bottom:85px}
 #render-gallery.vision-showcase.is-cinematic #gallery-viewport,#render-gallery.vision-showcase.is-cinematic[data-light-mode=compare] #gallery-viewport{bottom:100px}
}