.light-scene {
  position:absolute; inset:0; overflow:hidden; isolation:isolate; container-type:size;
  background: radial-gradient(ellipse at 73% 52%,#27211b 0,#141310 43%,#0b0c0b 76%);
  color:#f4eee2; font-family:Arial,Helvetica,sans-serif;
}
.light-scene::after {
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(0deg,#080a09 0,transparent 28%,transparent 80%,#0c0c0b 100%);
}
.light-scene canvas {position:absolute;display:block;right:-1%;top:17%;width:72%;height:68%;pointer-events:none;}
.light-scene .light-title {
  position:absolute;left:6.4%;top:max(80px,16%);margin:0;
  display:flex;gap:.8em;align-items:center;
  font:400 clamp(17px,1.52cqw,24px)/1.2 Arial,Helvetica,sans-serif;
  color:#edddc3;letter-spacing:.012em;
}
.light-scene .light-title::before {content:"";width:1.8em;height:1px;background:#ee9e56}
.light-copy {position:absolute;inset:38% auto auto 6.4%;width:30%;max-width:560px;}
.light-copy h3 {font:500 clamp(56px,6.4cqw,120px)/.94 Arial,Helvetica,sans-serif;margin:0 0 .25em;letter-spacing:-.07em;color:#f8f0df}
.light-copy .light-role {font:500 clamp(16px,1.7cqw,29px)/1.12 Georgia,'Times New Roman',serif;color:#efb873;letter-spacing:-.025em;margin:.55em 0 .6em}
.light-copy .light-explain {font:400 clamp(14px,1.13cqw,20px)/1.48 Arial,Helvetica,sans-serif;color:#c2baad;margin:0;max-width:29ch;text-wrap:pretty}
.light-copy .light-example {
  max-width:34ch; margin:.8em 0 0; padding-left:.8em; border-left:2px solid #d69b58;
  color:#efdfbe; font:400 clamp(14px,1.12cqw,19px)/1.39 Arial,Helvetica,sans-serif; text-wrap:pretty;
}
.light-scene .light-rail {position:absolute;display:flex;gap:5px;left:6.4%;bottom:max(73px,14%);width:clamp(100px,9.4%,172px)}
.light-rail i {width:33.3%;height:2px;background:#4a4034;position:relative;}
.light-rail i::after{content:"";position:absolute;inset:0;background:#ffc27d;transform:scaleX(var(--lit,0));transform-origin:left}
@container (max-aspect-ratio: 1/1) {
  .light-scene{background:radial-gradient(ellipse at 58% 54%,#2b251d,#151410 46%,#0c0d0c 80%);}
  .light-scene .light-title {left:7%;top:max(67px,13%);font-size:clamp(18px,3.15cqw,24px);}
  .light-copy {inset:auto 7% max(87px,15.7%) 7%;width:auto;max-width:none;}
  .light-copy h3 {font-size:clamp(46px,12.5cqw,100px);line-height:.9;margin-bottom:.10em;}
  .light-copy .light-role {margin:.45em 0 .4em;font-size:clamp(17px,4.3cqw,32px);}
  .light-copy .light-explain {font-size:clamp(13px,3.4cqw,22px);line-height:1.35;max-width:32ch;}
  .light-copy:has(.light-example:not([hidden])) {bottom:max(75px,12%);}
  .light-copy .light-example {font-size:clamp(14px,3.45cqw,21px);line-height:1.32;max-width:38ch;margin-top:.62em}
  .light-scene canvas {left:-3%;right:auto;top:21%;width:106%;height:41.5%;}
  .light-scene .light-rail {left:7%;bottom:max(61px,8.9%);width:22%}
}
@container (max-height:590px) and (min-aspect-ratio:1/1) {
  .light-scene .light-title{top:62px}
  .light-copy{top:32%}.light-copy h3{font-size:min(8cqw,14cqh)}.light-copy .light-role{font-size:clamp(14px,4cqh,22px)}
  .light-copy .light-explain{font-size:clamp(12px,3.3cqh,17px)}
  .light-scene .light-rail{display:none}
}
@container (max-aspect-ratio:1/1) and (max-width:340px),
           (max-aspect-ratio:1/1) and (min-width:600px) {
  .light-copy:has(.light-example:not([hidden])) h3 {font-size:clamp(38px,9cqw,68px)}
  .light-copy:has(.light-example:not([hidden])) .light-explain {max-width:none;font-size:clamp(13px,2.85cqw,18px)}
  .light-copy .light-example {max-width:none;font-size:clamp(13px,3.25cqw,18px)}
}