:root { --paper:#fff; --ink:#26231f; --warm:#e5a351; }
* { box-sizing:border-box; }
html, body { min-height:100%; background:var(--paper); }
body { margin:0; }
button { font:inherit; }
.lighting-study { min-height:100svh; display:grid; place-items:center; padding:clamp(24px, 5vw, 70px) 24px; }
.hero { display:flex; flex-direction:column; align-items:center; width:100%; }
.image-frame { width:min(100%, min(43vw, 455px)); height:min(67svh, 680px); position:relative; }
.image-stage { width:100%; height:100%; aspect-ratio:2 / 3; position:relative; overflow:hidden; background:#eeeae4; box-shadow:0 18px 50px rgba(38,31,22,.08); }
.room-image { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.room-after { opacity:0; }
.corner-guide { width:42px; height:42px; position:absolute; pointer-events:none; opacity:.75; }
.corner-top-left { top:-20px; left:-20px; border-top:1px dotted #aaa39a; border-left:1px dotted #aaa39a; }
.corner-top-right { top:-20px; right:-20px; border-top:1px dotted #aaa39a; border-right:1px dotted #aaa39a; }
.corner-bottom-left { bottom:-20px; left:-20px; border-bottom:1px dotted #aaa39a; border-left:1px dotted #aaa39a; }
.corner-bottom-right { right:-20px; bottom:-20px; border-right:1px dotted #aaa39a; border-bottom:1px dotted #aaa39a; }
.light-toggle { min-width:210px; margin-top:clamp(24px, 3.2vw, 42px); display:grid; grid-template-columns:33px 1fr 34px; align-items:center; gap:12px; padding:10px 11px 10px 13px; border:1px solid #d7d2c9; border-radius:16px; color:var(--ink); background:#fff; box-shadow:0 5px 18px rgba(45,36,26,.05); cursor:pointer; text-align:left; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.light-toggle:hover { border-color:#a9a096; box-shadow:0 10px 25px rgba(45,36,26,.11); transform:translateY(-2px); }
.light-toggle:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.toggle-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; color:#706960; background:#f4f1ec; transition:background .3s ease, color .3s ease; }
.toggle-icon svg { width:19px; height:19px; stroke-width:1.55; }
.toggle-copy { display:grid; gap:2px; }
.toggle-state { font:600 12px/1.15 ui-sans-serif, system-ui, sans-serif; letter-spacing:-.01em; }
.toggle-hint { color:#918a80; font:10px/1.15 ui-sans-serif, system-ui, sans-serif; }
.toggle-track { width:34px; height:20px; display:block; position:relative; border-radius:50px; background:#d6d0c7; transition:background .3s ease; }
.toggle-knob { position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.is-lit .light-toggle { border-color:#e6c38f; }
.is-lit .toggle-icon { color:#8d5b21; background:#f8e8ce; }
.is-lit .toggle-track { background:var(--warm); }
@media (max-width:700px) { .lighting-study { padding:36px 32px 42px; } .image-frame { width:min(100%, 360px); height:min(63svh, calc((100vw - 64px) * 1.5)); } .corner-guide { width:30px; height:30px; } .corner-top-left { top:-14px; left:-14px; } .corner-top-right { top:-14px; right:-14px; } .corner-bottom-left { bottom:-14px; left:-14px; } .corner-bottom-right { right:-14px; bottom:-14px; } .light-toggle { min-width:min(210px, 100%); } }
@media (max-width:390px) { .lighting-study { padding-inline:28px; } .image-frame { height:min(59svh, calc((100vw - 56px) * 1.5)); } }