:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#173052;background:#fff;--navy:#01017c;--muted:#4d667b;--line:#cfdfeb}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #01017c;outline-offset:4px}[hidden]{display:none!important}.light-room{max-width:1120px;margin:auto;padding:28px 24px}header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:27px}header>div{min-width:0}header>a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:48px;flex:none}header img{object-fit:contain;display:block}.eyebrow{font-size:10px;line-height:1.5;letter-spacing:.1em;font-weight:700;color:#315e7d;margin:0}header .eyebrow{color:var(--navy);display:flex;align-items:center;gap:9px}header .eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:#22a9f8;box-shadow:0 0 0 4px #e4f5ff}h1{font-size:clamp(35px,4.2vw,49px);line-height:1.06;letter-spacing:-.045em;font-weight:650;color:var(--navy);margin:13px 0 16px}header>div>p:last-child{font-size:14px;line-height:1.65;color:var(--muted);margin:0}.mode-picker{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:25px}.mode-picker button{min-width:0;min-height:47px;padding:10px 19px;border:1px solid #c4dbe9;border-radius:25px;background:#fff;color:#315775;font-size:12px}.mode-picker button[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}.composition{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:31px;align-items:start}.composition>*{min-width:0}.visual{border:1px solid #cddfec;border-radius:23px;background:linear-gradient(140deg,#f9fdff,#eaf5fc 65%,#fff);box-shadow:0 18px 44px #0b3b6c0b;padding-bottom:21px}.stage{position:relative}.stage>svg{display:block;width:100%;height:auto}.stage-stamp{position:absolute;bottom:7px;left:18px;font-size:7px;letter-spacing:.07em;color:#456c87}.clean-view,.face-front,.face-back,.face-callouts,.face-controls,.bead-drop{display:none}.stage[data-mode=light] .reflected-ray{filter:drop-shadow(0 0 5px #4666ba55)}.stage[data-mode=light][data-active=true] .transmitted-ray{filter:drop-shadow(0 0 5px #1689bd66)}.stage[data-mode=light][data-active=true] .reflected-ray{filter:none}.stage[data-mode=faces] .face-callouts,.stage[data-mode=faces] .face-controls{display:block}.stage[data-mode=faces][data-face=front] .face-front,.stage[data-mode=faces][data-face=back] .face-back{display:block}.stage[data-mode=faces] .reflected-ray,.stage[data-mode=faces] .transmitted-ray,.stage[data-mode=faces] .incident-ray,.stage[data-mode=faces] .source,.stage[data-mode=faces] .eye{opacity:.25}.face-controls button{position:absolute;bottom:9.5%;transform:translateX(-50%);min-height:44px;min-width:73px;border:1px solid #82b2cf;border-radius:24px;background:#fff;color:#235777;padding:9px 14px;font-size:11px}.face-controls button:first-child{left:29.4%}.face-controls button:last-child{left:68%}.face-controls button[aria-pressed=true]{background:#01017c;border-color:#01017c;color:#fff}.stage[data-mode=clean] .optics-view{display:none}.stage[data-mode=clean] .clean-view{display:block}.stage[data-mode=clean][data-active=true] .spread-drop{display:none}.stage[data-mode=clean][data-active=true] .bead-drop{display:block}.legend{display:flex;align-items:center;justify-content:center;gap:28px;padding:15px 15px 0;color:#315775;font-size:11px;line-height:1.5}.legend>span{display:flex;align-items:center;gap:8px}.legend i{width:23px;height:3px;display:block;background:#4666ba}.legend i.transmitted{background:#1689bd}.action{display:block;min-height:44px;padding:10px 20px;border:0;border-radius:25px;background:var(--navy);color:#fff;font-size:11px;margin:20px auto 0;max-width:calc(100% - 30px)}.scene-note{font-size:10px;line-height:1.7;color:#45637a;max-width:48ch;margin:16px auto 0;text-align:center;padding:0 19px;min-height:34px}.readout{padding-top:15px}.readout h2{font-size:30px;line-height:1.15;letter-spacing:-.035em;font-weight:650;color:var(--navy);margin:11px 0 17px}.readout>p:not(.eyebrow){font-size:12px;line-height:1.8;color:#3e586d;margin:0}.readout .mode-note{border-left:2px solid #299bd2;padding-left:14px;margin-top:22px!important}.product-note{background:#f0f8fd;border:1px solid #cfe2ee;border-radius:15px;padding:18px;margin-top:28px}.product-note .eyebrow{font-size:8px;color:#315e7d}.product-note h3{font-size:20px;font-weight:650;letter-spacing:-.025em;line-height:1.25;color:var(--navy);margin:10px 0}.product-note>p:last-child{font-size:11px;color:#3e586d;line-height:1.75;margin:0}.static-guide{font-size:12px;line-height:1.8;color:#3e586d;margin-top:25px}.static-guide>summary{display:flex;align-items:center;min-height:48px;cursor:pointer;color:var(--navy);font-weight:650}.static-guide strong{color:#173c60}.scope{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.4fr);gap:26px;border-top:1px solid var(--line);padding-top:23px;margin-top:27px}.scope>*{min-width:0}.scope>strong{color:var(--navy);font-size:22px;line-height:1.2;font-weight:650;letter-spacing:-.03em}.scope>p{font-size:12px;line-height:1.75;color:var(--muted);margin:0}footer{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:10px;color:var(--muted);margin-top:13px}footer>span{font-size:8px;letter-spacing:.06em}footer>a{display:flex;align-items:center;min-height:44px;color:var(--navy);text-underline-offset:3px}.no-js .enhanced,.no-js .readout,.no-js .legend,.no-js .scene-note{display:none!important}.no-js .composition{grid-template-columns:minmax(0,1fr)}.no-js .static-guide>summary{display:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:760px){.light-room{padding:22px 13px}header{gap:14px;margin-bottom:22px}header .eyebrow{font-size:8px}header img{width:44px;height:auto}h1{font-size:34px}header>div>p:last-child{font-size:12px}.mode-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:20px}.mode-picker button{padding:9px 6px;font-size:10px;min-height:46px}.composition{grid-template-columns:minmax(0,1fr);gap:25px}.visual{border-radius:20px;padding-bottom:18px}.stage-stamp{left:13px;font-size:6px;bottom:4px}.legend{gap:22px;font-size:10px;padding-top:14px}.legend i{width:18px}.action{font-size:10px;padding:10px 15px;margin-top:17px}.scene-note{font-size:10px;line-height:1.7;margin-top:15px;padding:0 15px;min-height:0}.face-controls button{font-size:10px;min-width:64px;padding:8px 10px}.readout{padding:0 3px}.readout h2{font-size:29px;max-width:22ch}.readout>p:not(.eyebrow){font-size:12px}.readout .mode-note{margin-top:18px!important}.product-note{padding:16px;margin-top:23px}.product-note h3{font-size:22px}.product-note>p:last-child{font-size:12px}.scope{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:23px;padding-top:21px}.scope>strong{font-size:23px}.scope>p{font-size:11px}footer{display:block}footer>span{display:block}footer>a{margin-top:4px}.static-guide{font-size:12px}}
@media(max-width:340px){h1{font-size:30px}.readout h2{font-size:27px}.mode-picker button{font-size:9px}.face-controls button{min-width:62px;font-size:9px}.stage-stamp{font-size:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Legibilidade no frame estreito e controles junto da cena. */
.mode-picker button,.action,.face-controls button{font-size:13px}
.stage-stamp{position:static;display:block;font-size:12px;line-height:1.5;padding:0 16px 8px;letter-spacing:.03em}
.stage text{font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.stage[data-mode=faces] .face-controls{display:flex;justify-content:center;gap:24px;padding:0 16px 9px}
.stage[data-mode=faces] .face-callouts{display:none}
.face-controls button{position:static;transform:none;min-width:90px;font-size:13px}
.legend{font-size:13px}.scene-note{font-size:13px}.readout>p:not(.eyebrow),.product-note>p:last-child,.static-guide{font-size:14px;line-height:1.75}.product-note .eyebrow{font-size:10px}.scope>p{font-size:14px}.readout .eyebrow{font-size:11px}
@media(max-width:760px){.mode-picker button{font-size:12px}.action{font-size:12px}.face-controls button{font-size:13px}.legend{font-size:12px;gap:18px}.scene-note{font-size:13px}.stage-stamp{font-size:12px}.readout>p:not(.eyebrow),.product-note>p:last-child,.static-guide{font-size:14px}.scope>p{font-size:14px}header>div>p:last-child{font-size:14px}}
.legend>span{border:1px solid transparent;border-radius:20px;padding:6px 9px}.legend[data-active=reflection]>span:first-child,.legend[data-active=transmission]>span:last-child{border-color:#91bfd9;background:#e0f2fd;color:#173c60;font-weight:650}
@media(max-width:340px){h1{font-size:28px}}