/* 3.1.9 light lab (inc/light.php, static/lab.js): the home page's "Işığı aç" scene, the product page's light simulation, light
   distribution and 3D model, and the projects' lights off / on slider. Dark "showroom" panels on the light pages; their buttons
   and chips follow the site's one button design (design.css, .lab-btn and .lab-chip are in its list), their links the link
   design for dark parts (.lab-dark). Loaded only on pages that use them. */
.lab-dark{--lab-line:rgba(255,255,255,.09);--lab-text:#ECE7DE;--lab-muted:#A3AAA5;--lab-warm:#FFC37A;color:var(--lab-text)}
html.ia body .lab-dark a.text-link{color:var(--lab-text)}

/* Shared controls: a caption with its value, a slider with a warm thumb, tick labels, chips. */
html.ia body .lab-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px;font-size:12px;font-weight:600;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--lab-muted)}
html.ia body .lab-label output{font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--lab-text);font-variant-numeric:tabular-nums}
html.ia body .lab-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:30px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;touch-action:pan-y}
html.ia body .lab-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--lab-track,linear-gradient(90deg,#362F28,#FFC37A))}
html.ia body .lab-range::-moz-range-track{height:6px;border-radius:999px;background:var(--lab-track,linear-gradient(90deg,#362F28,#FFC37A))}
html.ia body .lab-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8px;border:1px solid #DCD8CD;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 4px rgba(255,195,122,.18),0 0 18px rgba(255,186,100,.55)}
html.ia body .lab-range::-moz-range-thumb{width:22px;height:22px;border:1px solid #DCD8CD;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 4px rgba(255,195,122,.18),0 0 18px rgba(255,186,100,.55)}
html.ia body .lab-range:focus{outline:none}
html.ia body .lab-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(255,195,122,.6),0 0 24px rgba(255,186,100,.8)}
html.ia body .lab-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px rgba(255,195,122,.6),0 0 24px rgba(255,186,100,.8)}
html.ia body .lab-range:disabled{cursor:default;opacity:.7}
html.ia body .lab-ticks{display:flex;justify-content:space-between;gap:6px;margin-top:2px;font-size:11px;line-height:1.3;color:var(--lab-muted);font-variant-numeric:tabular-nums}
html.ia body .lab-chips{display:flex;flex-wrap:wrap;gap:8px}
html.ia body .lab-select{width:100%;height:44px;padding:0 40px 0 14px;border:1px solid rgba(255,255,255,.18);border-radius:12px;color:var(--lab-text);font:inherit;font-size:14px;font-weight:600;cursor:pointer;-webkit-appearance:none;appearance:none;
 background:#252C29 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ECE7DE' stroke-width='1.5'/%3E%3C/svg%3E") right 14px center/12px no-repeat}
html.ia body .lab-select:focus-visible{outline:2px solid var(--lab-warm);outline-offset:2px}
html.ia body .lab-select option{background:#252C29;color:#ECE7DE}

/* 1. "Işığı aç" (home page): a dark band, the copy and dimmer beside the photo stage. */
html.ia body main .lab-scene{position:relative;margin-top:clamp(72px,9vw,120px);padding:clamp(64px,8vw,120px) 0;background:#171C1A;overflow:hidden;isolation:isolate}
html.ia body main .lab-scene::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 70% at 70% 48%,rgba(255,186,110,calc(var(--lab-level,0)*.15)),transparent 72%);pointer-events:none}
/* The inner box is also a .page-shell, whose generic top and bottom padding (100px, 65px on phones) doubled the band's own
   padding until 3.3.1. */
html.ia body .lab-scene-inner{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);align-items:center;margin-left:auto;margin-right:auto;padding-top:0;padding-bottom:0}
html.ia body .lab-scene-copy small{display:block;margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--lab-warm)}
html.ia body .lab-scene-copy h2{margin:0 0 18px;font-size:clamp(32px,3.6vw,52px);line-height:1.06;letter-spacing:-.02em;color:#F5F1EA}
html.ia body .lab-scene-copy p{max-width:44ch;margin:0 0 30px;font-size:16px;line-height:1.6;color:#B9BEBA}
html.ia body .lab-dimmer{max-width:380px;margin:0 0 30px}
html.ia body .lab-range-dimmer{--lab-track:linear-gradient(90deg,#FFC37A 0,#FFC37A var(--lab-fill,0%),#343029 var(--lab-fill,0%),#343029 100%)}
html.ia body .lab-scene-stage{position:relative;margin:0;aspect-ratio:3/2;border-radius:20px;overflow:hidden;background:#151717;box-shadow:0 34px 80px -34px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06),0 0 calc(var(--lab-level,0)*90px) rgba(255,180,100,calc(var(--lab-level,0)*.18))}
html.ia body .lab-scene-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0}
html.ia body .lab-scene-off.is-dimmed{filter:brightness(.26) saturate(.55) contrast(1.04)}
html.ia body .lab-scene-glow{display:none}
html.ia body .lab-scene.is-live .lab-scene-on{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(transparent,transparent);mask-image:linear-gradient(transparent,transparent)}
html.ia body .lab-scene.is-live .lab-scene-glow{display:block;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(transparent,transparent);mask-image:linear-gradient(transparent,transparent);filter:blur(14px) brightness(1.55) saturate(1.2);mix-blend-mode:screen;opacity:.6}
html.ia body .lab-scene-stage figcaption{position:absolute;left:16px;bottom:14px;z-index:2;padding:6px 12px;border-radius:999px;background:rgba(23,27,25,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:12px;font-weight:600;color:#E9E4DB}
@media(max-width:900px){html.ia body .lab-scene-inner{grid-template-columns:minmax(0,1fr)}html.ia body .lab-scene-stage{order:-1;border-radius:16px}html.ia body .lab-scene-copy p{margin-bottom:24px}}

/* 2. Light simulation (product page): the room on the left, the controls and the values on the right. */
html.ia body .lab-sim{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);border-radius:20px;overflow:hidden;background:#1B1F1D;box-shadow:0 26px 60px -34px rgba(10,12,11,.6)}
html.ia body .lab-sim-stage{display:flex;align-items:center;padding:clamp(10px,2vw,24px);background:radial-gradient(120% 100% at 50% 0%,#262B28,#181B1A 70%)}
html.ia body .lab-room{display:block;width:100%;height:auto;overflow:visible}
.lab-room-shell .is-ceiling{fill:#141816}.lab-room-shell .is-wall{fill:#111513}.lab-room-shell .is-back{fill:#171B19}.lab-room-shell .is-floor{fill:#0F1211}
.lab-room-shell :is(polygon,rect.is-back){stroke:rgba(255,255,255,.07);stroke-width:1}
.lab-room-shell .is-lines line{stroke:rgba(255,255,255,.04);stroke-width:1}
.lab-art>rect:first-child{fill:#1C211F;stroke:rgba(255,255,255,.1)}.lab-art .is-a{fill:#6B4334}.lab-art .is-b{fill:#2F4C49}.lab-art .is-c{fill:#7D6B39}
.lab-ambient{fill:var(--lab-light,#FFBE7E);opacity:0;mix-blend-mode:screen;pointer-events:none}
.lab-wash{mix-blend-mode:screen}
.lab-cone{mix-blend-mode:screen;filter:blur(2.5px)}
.lab-pool{mix-blend-mode:screen}
.lab-plane{display:none;fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.24);stroke-width:1;stroke-dasharray:4 4}
.lab-lum-glow{fill:var(--lab-light,#FFBE7E);opacity:.22;filter:blur(7px)}
.lab-lum-body{fill:#2A302D;stroke:rgba(255,255,255,.18)}
.lab-lum-face{fill:var(--lab-light,#FFBE7E)}
.lab-person{fill:#262C29}
.lab-dim line{stroke:rgba(236,231,222,.45);stroke-width:1}
.lab-dim text,.lab-lux text{fill:#ECE7DE;font-size:13px;font-weight:600;font-family:inherit;font-variant-numeric:tabular-nums}
.lab-lux rect{fill:rgba(12,14,13,.74);stroke:rgba(255,255,255,.14)}
@media(max-width:700px){.lab-dim text,.lab-lux text{font-size:23px}}
.lab-sim:not(.is-live) :is(.lab-cone,.lab-dim,.lab-lux,.lab-person),.lab-sim.is-colour-only :is(.lab-cone,.lab-dim,.lab-lux,.lab-person,.lab-plane){display:none}
html.ia body .lab-sim-panel{display:flex;flex-direction:column;gap:24px;padding:clamp(22px,2.6vw,36px);border-left:1px solid var(--lab-line)}
html.ia body .lab-sim .lab-note{margin:10px 0 0;font-size:13px;line-height:1.45;color:#CBD0CC}
html.ia body .lab-readout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;margin:0;padding:20px 0 0;border-top:1px solid var(--lab-line)}
html.ia body .lab-readout>div{margin:0}
html.ia body .lab-readout .is-main{grid-column:1/-1}
html.ia body .lab-readout dt{margin:0 0 4px;font-size:12px;line-height:1.3;color:var(--lab-muted)}
html.ia body .lab-readout dd{margin:0;font-size:20px;font-weight:600;line-height:1.2;color:#F5F1EA;font-variant-numeric:tabular-nums}
html.ia body .lab-readout .is-main dd{font-size:clamp(34px,3.4vw,44px);line-height:1;color:var(--lab-light,#FFC37A);text-shadow:0 0 26px color-mix(in srgb,var(--lab-light,#FFC37A) 50%,transparent)}
html.ia body .lab-fineprint{margin:0;font-size:12px;line-height:1.5;color:var(--lab-muted)}
@media(max-width:900px){html.ia body .lab-sim{grid-template-columns:minmax(0,1fr)}html.ia body .lab-sim-panel{border-left:0;border-top:1px solid var(--lab-line)}}

/* 3. Light distribution as a datasheet (3.2.0): white panel and hairlines like the technical tables. The polar curve has
   C0–C180 warm and solid, C90–C270 dark and dashed, and the half-intensity angle; beside it the cone diagram and the flux by
   zone with the measurement details. Downloads are buttons of the site's one design (.lab-btn is in design.css's list). */
html.ia body .lab-sheet{display:grid;gap:22px;padding:clamp(20px,2.6vw,32px);border:1px solid var(--ia-line,#E4E2DA);border-radius:24px;background:var(--ia-surface,#FFFFFF);color:var(--ia-ink,#15171A)}
html.ia body .lab-sheet-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 28px}
html.ia body .lab-sheet-pick{display:block;min-width:0;max-width:420px;margin:0}
html.ia body .lab-sheet-label{display:block;margin:0 0 9px;font:600 11px/1.3 Inter,'Segoe UI',Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ia-muted,#4E545A)}
html.ia body .lab-sheet-file{margin:0;font:600 15px/1.4 var(--ia-display,Inter,sans-serif);color:var(--ia-ink,#15171A)}
html.ia body .lab-sheet .lab-select{width:100%;height:42px;padding:0 40px 0 16px;border:1px solid #DCD8CD;border-radius:999px;color:#15171A;background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%2315171A' stroke-width='1.5'/%3E%3C/svg%3E") right 16px center/12px 12px no-repeat;font-size:13px}
html.ia body .lab-sheet .lab-select option{background:#FFFFFF;color:#15171A}
html.ia body .lab-sheet-files{min-width:0}
html.ia body .lab-sheet-dl{display:flex;flex-wrap:wrap;gap:8px}
html.ia body .lab-sheet-dl .lab-btn{display:inline-flex;flex:none;align-items:center;gap:10px;white-space:nowrap;text-decoration:none}
html.ia body .lab-sheet-item[hidden]{display:none}
html.ia body .lab-sheet-item{display:grid;gap:22px}
html.ia body .lab-sheet-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));margin:0;border-block:1px solid var(--ia-line,#E4E2DA)}
html.ia body .lab-sheet-kpi>div{display:flex;flex-direction:column;justify-content:space-between;margin:0;padding:14px 18px;border-left:1px solid var(--ia-line,#E4E2DA)}
html.ia body .lab-sheet-kpi>div:first-child{border-left:0;padding-left:0}
html.ia body .lab-sheet-kpi dt{margin:0;font-size:12px;line-height:1.3;color:var(--ia-muted,#4E545A)}
html.ia body .lab-sheet-kpi dd{margin:6px 0 0;font:600 22px/1.15 var(--ia-display,Inter,sans-serif);letter-spacing:-.01em;color:var(--ia-ink,#15171A);font-variant-numeric:tabular-nums;white-space:nowrap}
html.ia body .lab-sheet-kpi dd small{margin-left:4px;font:500 12px/1 Inter,'Segoe UI',Arial,sans-serif;letter-spacing:0;color:var(--ia-muted,#4E545A)}
html.ia body .lab-sheet-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,.84fr);gap:16px;align-items:stretch}
html.ia body .lab-sheet-card{display:grid;gap:12px;align-content:start;min-width:0;margin:0;padding:18px 20px;border:1px solid var(--ia-line,#E4E2DA);border-radius:18px;background:#FCFBF8}
html.ia body .lab-sheet-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0}
html.ia body .lab-sheet-card h3{margin:0;font:600 15px/1.3 var(--ia-display,Inter,sans-serif);letter-spacing:0;color:var(--ia-ink,#15171A)}
html.ia body .lab-sheet-card-head span{font-size:12px;color:var(--ia-muted,#4E545A);white-space:nowrap}
html.ia body .lab-sheet .lab-polar{display:block;width:100%;max-width:360px;height:auto;margin:0 auto}
html.ia body .lab-sheet .lab-polar-grid :is(path,circle,line){fill:none;stroke:#E4E2DA;stroke-width:1}
html.ia body .lab-sheet .lab-polar-grid line.is-minor{stroke:#EFEDE7}
html.ia body .lab-sheet .lab-polar-labels text{fill:#4E545A;font-size:11px;font-family:inherit;font-variant-numeric:tabular-nums}
html.ia body .lab-sheet .lab-polar-labels .is-value{fill:#7A7F84;font-size:10px;paint-order:stroke;stroke:#FCFBF8;stroke-width:3px}
html.ia body .lab-sheet .lab-polar-curve{stroke-linejoin:round}
html.ia body .lab-sheet .lab-polar-curve.is-c0{fill:rgba(226,168,90,.22);stroke:#C9781C;stroke-width:2.2}
html.ia body .lab-sheet .lab-polar-curve.is-c90{fill:none;stroke:#15171A;stroke-width:1.4;stroke-dasharray:5 4}
html.ia body .lab-sheet .lab-polar-half :is(line,path){fill:none;stroke:#A65D0F;stroke-width:1;stroke-dasharray:2 3}
html.ia body .lab-sheet .lab-polar-half text{fill:#A65D0F;font-size:12px;font-weight:600;font-family:inherit}
html.ia body .lab-sheet-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;font-size:12px;line-height:1.4;color:var(--ia-muted,#4E545A)}
html.ia body .lab-sheet-legend span::before{content:"";display:inline-block;width:22px;margin-right:7px;border-top:2.2px solid #C9781C;vertical-align:middle}
html.ia body .lab-sheet-legend .is-c90::before{border-top:1.4px dashed #202327}
html.ia body .lab-sheet-legend .is-half::before{border-top:1px dashed #A65D0F}
html.ia body .lab-cone-chart{display:block;width:100%;height:auto}
html.ia body .lab-cone-beam{fill:rgba(226,168,90,.26);stroke:#C9781C;stroke-width:1}
html.ia body .lab-cone-lum{fill:#15171A}
html.ia body .lab-cone-level{stroke:#E4E2DA;stroke-dasharray:3 3}
html.ia body .lab-cone-dia{stroke:#A65D0F;stroke-width:2}
html.ia body .lab-cone-chart text{font-family:inherit;font-size:12px;fill:#4E545A;font-variant-numeric:tabular-nums}
html.ia body .lab-cone-chart .lab-cone-e{font-size:13px;font-weight:600;fill:#15171A}
html.ia body .lab-sheet-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--ia-muted,#4E545A)}
html.ia body .lab-sheet-ratio b{color:var(--ia-ink,#15171A);font-weight:600;white-space:nowrap}
html.ia body .lab-zones{display:grid;gap:9px}
html.ia body .lab-zone{display:grid;grid-template-columns:62px minmax(0,1fr) 54px;gap:10px;align-items:center;font-size:12.5px;color:var(--ia-ink,#15171A);font-variant-numeric:tabular-nums}
html.ia body .lab-zone i{display:block;height:10px;border-radius:5px;background:linear-gradient(90deg,#E2A85A var(--share),#EFEDE6 var(--share))}
html.ia body .lab-zone b{font-weight:600;text-align:right}
html.ia body .lab-sheet-split{display:flex;justify-content:space-between;gap:10px;margin:0;padding-top:10px;border-top:1px solid var(--ia-line,#E4E2DA);font-size:12.5px;color:var(--ia-muted,#4E545A)}
html.ia body .lab-sheet-split b{color:var(--ia-ink,#15171A);font-weight:600}
html.ia body .lab-sheet-prov{display:grid;gap:8px;margin-top:4px;padding:14px;border:1px dashed var(--ia-line-strong,#D6D3C9);border-radius:14px;background:#FFFFFF}
html.ia body .lab-sheet-prov .lab-sheet-label{margin:0}
html.ia body .lab-sheet-prov dl{display:grid;gap:6px;margin:0}
html.ia body .lab-sheet-prov dl>div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;margin:0;font-size:12.5px;line-height:1.45}
html.ia body .lab-sheet-prov dt{margin:0;color:var(--ia-muted,#4E545A)}
html.ia body .lab-sheet-prov dd{margin:0;color:var(--ia-ink,#15171A);font-weight:600;overflow-wrap:anywhere}
html.ia body .lab-sheet-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin:0;font-size:12.5px;line-height:1.5;color:var(--ia-muted,#4E545A)}
@media(max-width:1100px){html.ia body .lab-sheet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}html.ia body .lab-sheet-grid>:last-child{grid-column:1/-1}}
@media(max-width:700px){html.ia body .lab-sheet-head{flex-direction:column;align-items:stretch}html.ia body .lab-sheet-pick{max-width:none}html.ia body .lab-sheet-grid{grid-template-columns:minmax(0,1fr)}html.ia body .lab-sheet-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.ia body .lab-sheet-kpi>div{padding:12px 14px 12px 0;border-left:0;border-top:1px solid var(--ia-line,#E4E2DA)}html.ia body .lab-sheet-kpi>div:nth-child(-n+2){border-top:0}
  html.ia body .lab-sheet-kpi>div:nth-child(even){padding-left:14px;border-left:1px solid var(--ia-line,#E4E2DA)}html.ia body .lab-sheet-kpi dd{font-size:19px}
  html.ia body .lab-cone-chart text{font-size:14px}html.ia body .lab-cone-chart .lab-cone-e{font-size:15px}}

/* 3b. Products marked on a project cover (3.2.0): a light dot with the product's name. lab.js places them on the cropped
   picture (object-fit), so they stay hidden until placed; names are shown from 900px, below that on hover or focus. */
html.ia body .lab-marked{position:relative}
html.ia body .lab-marked>.lab-compare,html.ia body .lab-marked>.gallery-link{display:block}
html.ia body .lab-marker{position:absolute;left:0;top:0;z-index:5;display:flex;align-items:center;gap:9px;visibility:hidden;transform:translate(-9px,-50%);color:#F5F4EF;text-decoration:none}
html.ia body .lab-marker.is-placed{visibility:visible}
html.ia body .lab-marker.is-left{flex-direction:row-reverse;transform:translate(calc(-100% + 9px),-50%)}
html.ia body .lab-marker-dot{flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 5px rgba(255,255,255,.28),0 0 18px rgba(255,214,150,.9)}
html.ia body .lab-marker-label{max-width:min(260px,40vw);overflow:hidden;padding:7px 12px;border:1px solid rgba(245,244,239,.22);border-radius:999px;background:rgba(27,31,29,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:600 12.5px/1.2 Inter,'Segoe UI',Arial,sans-serif;white-space:nowrap;text-overflow:ellipsis}
html.ia body .lab-marker:is(:hover,:focus-visible) .lab-marker-dot{background:#FFF4E0;box-shadow:0 0 0 5px rgba(226,168,90,.45),0 0 26px rgba(255,186,100,1)}
html.ia body .lab-marker:is(:hover,:focus-visible) .lab-marker-label{border-color:#E2A85A;background:#FFF4E0;color:#15171A}
html.ia body .lab-marker:focus-visible{outline:none}
@media(max-width:899px){html.ia body .lab-marker:not(:hover,:focus-visible) .lab-marker-label{display:none}}

/* 4. 3D model: the button sits in the corner of the dark stage; the viewer covers the picture while it is open. */
html.ia body [data-lab-model]{position:relative}
html.ia body .lab-model-actions{position:absolute;right:16px;bottom:16px;z-index:4}
html.ia body .lab-model-viewer{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;border-radius:inherit;background:radial-gradient(80% 90% at 50% 40%,#2B322F,#181B1A 75%);--poster-color:transparent}
html.ia body .lab-model-status{position:absolute;left:0;right:0;top:50%;z-index:4;margin:0;transform:translateY(-50%);text-align:center;font-size:14px;font-weight:600;color:#ECE7DE;pointer-events:none}
html.ia body .lab-model-viewer .lab-ar{position:absolute;left:16px;bottom:16px}
html.ia body [data-lab-model].is-3d{min-height:min(70vw,420px)}
@media(max-width:700px){html.ia body [data-lab-model].is-3d{min-height:340px}html.ia body .lab-model-actions{right:12px;bottom:12px}}

/* 5. Lights off / on (project page): the lights-off photo covers the left part up to the handle; the range input lies on top. */
html.ia body .lab-compare{position:relative;height:clamp(300px,42vw,600px);overflow:hidden;border-radius:10px;background:#171C1A;user-select:none;-webkit-user-select:none}
html.ia body .lab-compare img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0}
html.ia body .lab-compare-off{clip-path:inset(0 calc(100% - var(--split,50%)) 0 0)}
html.ia body .lab-compare-handle{position:absolute;top:0;bottom:0;left:var(--split,50%);z-index:2;width:2px;margin-left:-1px;background:#FFFFFF;box-shadow:0 0 18px rgba(255,195,122,.85);pointer-events:none}
html.ia body .lab-compare-handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid #DCD8CD;border-radius:50%;box-sizing:border-box;
 background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M6 2 2 6l4 4M14 2l4 4-4 4' fill='none' stroke='%2315171A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px 12px no-repeat;
 box-shadow:0 0 0 4px rgba(255,195,122,.22),0 0 24px rgba(255,186,100,.55)}
html.ia body .lab-compare:has(.lab-compare-range:focus-visible) .lab-compare-handle::after{box-shadow:0 0 0 5px rgba(255,195,122,.7),0 0 28px rgba(255,186,100,.85)}
html.ia body .lab-compare-range{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none}
html.ia body .lab-compare-tag{position:absolute;top:14px;z-index:2;padding:6px 12px;border-radius:999px;background:rgba(23,27,25,.64);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:12px;font-weight:600;letter-spacing:.03em;color:#F2EEE6;pointer-events:none}
html.ia body .lab-compare-tag.is-off{left:14px}
html.ia body .lab-compare-tag.is-on{right:14px}
html.ia body .lab-compare:not(.is-live) :is(.lab-compare-handle,.lab-compare-range){display:none}