/* Cinematic layer, carried into the studio dialog. Scene palette is intentional. */
.klio-3d-shell { position: relative; --ignition: 0; --studio-fade: 0; }
.klio-ignition-glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--ignition); background: radial-gradient(ellipse at 46% 42%,#d9f1ff8a, #93caff18 27%,transparent 62%); mix-blend-mode: screen; filter: blur(18px); }
.klio-night-launch { position: absolute; z-index: 4; bottom: 29px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 11px; text-align: center; max-width: 65%; }
.klio-night-launch>span { font: 8px/1.6 var(--font-mono); letter-spacing: .14em; color: #b1c0c9; }
.klio-night-launch>button { display: flex; align-items: center; gap: 17px; white-space: nowrap; }
.klio-night-launch i { font-size: var(--text-body); font-style: normal; }
.klio-night-launch b { font-weight: 400; margin-left: 10px; font-size: 17px; }
.klio-3d-shell[data-cinema-active=true] .klio-3d-stage-head>span, .klio-3d-shell[data-cinema-active=true] .klio-3d-pins, .klio-3d-shell[data-cinema-active=true] .klio-3d-coordinate, .klio-3d-shell[data-cinema-active=true] .klio-3d-zoom, .klio-3d-shell[data-cinema-active=true] .klio-night-launch, .klio-3d-shell[data-cinema-active=true] .klio-3d-expand { visibility: hidden; }
.klio-3d-shell[data-cinema-active=true] .klio-3d-console { opacity: calc(.12 * (1 - var(--studio-fade))); }
.klio-night { --night-reveal: 0; --night-light: 0; --night-scale: 1.065; --scene-dip: 0; position: absolute; inset: 0; z-index: 12; isolation: isolate; overflow: hidden; color: #f3f1eb; }
.klio-night-media { position: absolute; inset: 0; pointer-events: none; opacity: var(--night-reveal); background: #02070b; transform: scale(var(--night-scale)); transform-origin: 50% 52%; }
.klio-night-shade { position: absolute; inset: 0; pointer-events: none; opacity: var(--night-reveal); background: linear-gradient(180deg,#02060bd6,transparent 42%,#02060b20 53%,#02060bea 83%,#02060b),linear-gradient(90deg,#02060b6b,transparent 55%); }
.klio-night-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; opacity: 1; }
.klio-night-media img[data-night-image=on] { opacity: var(--night-light); }
.klio-night-media::after { content: ""; position: absolute; inset: 0; background: #02070b; opacity: var(--scene-dip); }
.klio-night[data-renderer=stadium] .klio-night-media { opacity: 1; transform: none; }
.klio-night[data-renderer=stadium] .klio-night-media img { display: none; }
.klio-night-media canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.klio-night[data-renderer=stadium] .klio-night-shade { background: linear-gradient(180deg,#02060b80,transparent 28%,transparent 64%,#02060bcc),linear-gradient(90deg,#02060b38,transparent 43%); }
.klio-night-top { position: absolute; top: 30px; left: 32px; right: 32px; display: flex; align-items: center; gap: 25px; justify-content: space-between; }
.klio-night-top>span { font: 9px var(--font-mono); letter-spacing: .18em; color: #d4dfe7; margin-left: auto; }
.klio-night-clean-note { display: none; position: absolute; bottom: 22px; right: 5%; left: 5%; text-align: right; font: 9px/1.6 var(--font-mono); color: #bac8d1; pointer-events: none; }
.klio-night.is-clean-shot .klio-night-clean-note { display: block; }
.klio-night.is-clean-shot .klio-night-shade { opacity: .3; }
.klio-night-heading { position: absolute; left: 5%; top: 19%; opacity: var(--night-reveal); pointer-events: none; }
.klio-night-heading>p { font: 9px/1.6 var(--font-mono); letter-spacing: .2em; color: #d8c0a3; margin-bottom: 16px; }
.klio-night-heading h3 { font-size: clamp(34px,4.2vw,76px); line-height: 1.05; max-width: 620px; text-shadow: 0 2px 40px #000b; }
.klio-night[data-renderer=stadium] .klio-night-heading h3 { font-size: clamp(32px,3.6vw,52px); max-width: 390px; }
.klio-night-flight { pointer-events: auto; max-width: 225px; margin-top: 22px; color: #bdcbd5; }
.klio-night-flight[inert] { pointer-events: none; }
.klio-night-flight .range-heading { display: flex; gap: 20px; justify-content: space-between; font: 7px/1.8 var(--font-mono); letter-spacing: .09em; }
.klio-night-flight output { color: #e1c3a2; }
.klio-night-flight input { touch-action: pan-y; --range-accent: #e1c3a2; }
.klio-night-flight-labels { display: flex; justify-content: space-between; font-size: 8px; line-height: 1.8; color: #97adbd; }
.klio-night[data-camera=detail] .klio-night-heading h3 { opacity: 0; }
.klio-night-status { position: absolute; top: 97px; left: 32px; right: 32px; font: 10px/1.8 var(--font-mono); color: #d1dfe9; max-width: 550px; }
.klio-night-skip { display: none; position: absolute; top: 146px; left: 32px; }
.klio-night[data-renderer=stadium][data-phase=ignition] .klio-night-skip { display: block; }
.klio-night:is([data-phase=night],[data-phase=relight]) .klio-night-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.klio-night-bottom { position: absolute; left: 5%; right: 5%; bottom: 24px; opacity: var(--night-reveal); transform: translateY(calc((1 - var(--night-reveal)) * 20px)); }
.klio-night-bottom[inert] { pointer-events: none; }
.klio-night-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 19px; border-bottom: 1px solid #ffffff33; }
.klio-night-choices { display: flex; gap: 7px; }
.klio-night-choices button { display: flex; gap: 12px; }
.klio-night-choices button>span { font: 12px/1.5 var(--font-document); color: #d8e0e4; }
.klio-night-toolbar>[data-night-replay] { display: flex; align-items: center; gap: 10px; }
.klio-night-toolbar>[data-night-replay]>span { font-size: 11px; }
.klio-night-comparison { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 36px; align-items: center; margin-top: 18px; max-width: 690px; }
.klio-night-comparison .range-heading { display: flex; justify-content: space-between; font: 8px/1.6 var(--font-mono); letter-spacing: .1em; color: #a6b9c7; grid-column: 1; gap: 12px; }
.klio-night-comparison output { color: #e1c3a2; }
.klio-night-comparison input { display: block; grid-column: 1; touch-action: pan-y; --range-accent: #e1c3a2; }
.klio-night-range-labels { display: flex; justify-content: space-between; grid-column: 1; color: #a9b8c1; font-size: 9px; }
.klio-night-comparison button { grid-column: 2; grid-row: 1/4; min-width: 147px; }
.klio-night-disclaimer { font-size: 9px; line-height: 1.7; color: #9caebc; max-width: 680px; margin-top: 21px; }
.klio-night [aria-busy=true] { cursor: progress; }
.klio-3d-dialog .klio-night-top { top: 24px; }

@media(min-width:1600px) {
  .klio-night-heading { top: 20%; }
  .klio-night-bottom { bottom: 35px; }
  .klio-night-disclaimer { font-size: 10px; }
}

@media(max-width:950px) {
  .klio-3d-shell[data-cinema-active=true] .klio-3d-console { display: none; }
  .klio-night { bottom: auto; height: var(--night-height,650px); }
  .klio-3d-dialog .klio-night { height: 100%; }
  .klio-night-heading h3 { font-size: 54px; max-width: 470px; }
  .klio-night-heading { top: 23%; }
  .klio-night-comparison { max-width: none; }
}

@media(max-width:760px) {
  .klio-night-top>span { display: none; }
  .klio-night-top [data-night-clean] { margin-left: auto; }
  .klio-night-clean-note { font-size: 7px; bottom: 15px; }
  .klio-night[data-renderer=stadium] .klio-night-heading h3 { font-size: 29px; max-width: 270px; }
  .klio-night-flight { max-width: 180px; margin-top: 12px; }
  .klio-night-flight .range-heading { font-size: 6px; }
  .klio-night-flight-labels { font-size: 7px; }
  .klio-night-skip { left: 21px; top: 160px; }
  .klio-night-launch { bottom: 84px; max-width: 85%; width: calc(100% - 42px); gap: 8px; }
  .klio-night-launch>span { font-size: 7px; }
  .klio-night-top { top: 20px; left: 19px; right: 19px; gap: 12px; }
  .klio-night-heading { left: 21px; top: 99px; right: 21px; }
  .klio-night-heading>p { font-size: 7px; margin-bottom: 11px; }
  .klio-night-heading h3 { font-size: 37px; max-width: 300px; line-height: 1.1; }
  .klio-night-media img { object-position: 51% 50%; }
  .klio-night-shade { background: linear-gradient(#02060bd9,transparent 47%,#02060ba6 64%,#02060b 94%); }
  .klio-night-status { top: 98px; left: 21px; right: 21px; font-size: 9px; max-width: 260px; }
  .klio-night-bottom { left: 21px; right: 21px; bottom: 16px; }
  .klio-night-toolbar { padding-bottom: 12px; gap: 8px; }
  .klio-night-choices { gap: 5px; }
  .klio-night-choices button { gap: 7px; }
  .klio-night-choices button>span { font-size: 10px; }
  .klio-night-toolbar>[data-night-replay]>span { display: none; }
  .klio-night-comparison { gap: 0 15px; margin-top: 13px; grid-template-columns: minmax(0,1fr) 95px; }
  .klio-night-comparison .range-heading { font-size: 6px; letter-spacing: .04em; gap: 5px; }
  .klio-night-range-labels { font-size: 7px; }
  .klio-night-comparison button { min-width: 0; }
  .klio-night-disclaimer { font-size: 7px; line-height: 1.7; margin-top: 13px; }
  .klio-3d-dialog .klio-night-top { top: 17px; }
}

@media(max-height:550px) and (min-width:761px) {
  .klio-3d-dialog .klio-night-heading { top: 90px; }
  .klio-3d-dialog .klio-night-heading h3 { font-size: 38px; }
  .klio-3d-dialog .klio-night-bottom { bottom: 14px; }
  .klio-3d-dialog .klio-night-disclaimer { margin-top: 9px; }
  .klio-3d-dialog .klio-night-toolbar { padding-bottom: 9px; }
}

@media(max-height:550px) and (max-width:760px) {
  .klio-3d-dialog .klio-night-heading { top: 97px; right: 57%; left: 21px; }
  .klio-3d-dialog .klio-night-heading h3 { font-size: 28px; }
  .klio-3d-dialog .klio-night-heading>p { font-size: 6px; }
  .klio-3d-dialog .klio-night-bottom { left: 48%; right: 21px; bottom: 17px; }
  .klio-3d-dialog .klio-night-choices button { gap: 5px; }
  .klio-3d-dialog .klio-night-choices button>span { font-size: 9px; }
  .klio-3d-dialog .klio-night-status { top: 90px; max-width: 40%; }
}

@media(prefers-reduced-motion:reduce) {
  .klio-ignition-glow { display: none; }
  .klio-night-media, .klio-night-bottom { transform: none; }
}