/* Scoped version of the approved optical scene. Host typography and other sections remain intact. */
.optics-module{--bg:#080d14;--navy:#0c1928;--panel:#101f31;--gold:#f8cb2e;--paper:#f7f4ed;--blue:#73b9e6;--muted:#b8c3ce;--line:#ffffff24;color-scheme:dark;font-family:Inter,system-ui,-apple-system,"Segoe UI","Microsoft JhengHei",sans-serif;background:var(--bg);color:var(--paper);font-size:16px}
.optics-module *{box-sizing:border-box}
.optics-module{margin:0}
.optics-module h1,.optics-module h2,.optics-module h3,.optics-module p{margin:0}
.optics-module a{color:inherit;text-decoration:none}
.optics-module a:hover{color:var(--gold)}
.optics-module button{font:inherit;color:inherit;cursor:pointer;border:0}
.optics-module button,.optics-module a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.optics-module button:disabled{opacity:.35;cursor:default}
.optics-module button:focus-visible,.optics-module a:focus-visible,.optics-module summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.optics-module [hidden]{display:none!important}
.optics-module img{display:block}
.optics-module .wrap{width:min(1600px,calc(100% - 72px));margin-inline:auto}
.optics-module .skip{position:absolute;top:-100px;left:12px;z-index:100;padding:14px;background:var(--gold);color:var(--bg)}
.optics-module .skip:focus{top:10px}
.optics-module .draft-strip{padding:7px 36px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:.75rem;color:var(--muted)}
.optics-module .draft-strip>span:first-child{color:var(--gold)}
.optics-module .site-header{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.optics-module .brand img{width:184px;height:auto}
.optics-module .header-actions{display:flex;align-items:center;gap:24px;font-size:.875rem}
.optics-module .quiet{background:transparent;border:1px solid var(--line);padding:10px 15px;border-radius:5px;min-height:44px;font-size:.85rem}
.optics-module .quiet:hover{border-color:#ffffff66;background:#ffffff08}
.optics-module .primary{background:var(--gold);color:var(--bg);padding:10px 19px;min-height:44px;border-radius:5px;font-size:.85rem;font-weight:600}
.optics-module .primary:hover{filter:brightness(1.08)}
.optics-module .intro{display:flex;align-items:end;justify-content:space-between;gap:25px;padding:30px 0 25px}
.optics-module .eyebrow{font-size:.75rem;line-height:1.6;letter-spacing:.13em;color:var(--gold);font-weight:650}
.optics-module h1{font-size:clamp(1.85rem,3vw,2.9rem);font-weight:520;line-height:1.35;letter-spacing:-.025em;margin-top:8px}
.optics-module .intro>p{font-size:.94rem;color:var(--muted);line-height:1.85}
.optics-module .experience{background:#060c15;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.optics-module .lens-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--navy);border-bottom:1px solid var(--line)}
.optics-module .lens-tabs button{min-width:0;display:flex;align-items:center;justify-content:center;gap:13px;padding:19px 10px;background:none;border-right:1px solid var(--line);border-bottom:2px solid transparent}
.optics-module .lens-tabs button:last-child{border-right:0}
.optics-module .lens-tabs span{font-size:.75rem;color:#9cabb9}
.optics-module .lens-tabs b{font-size:.98rem;font-weight:550}
.optics-module .lens-tabs small{font-size:.72rem;color:var(--muted)}
.optics-module .lens-tabs [aria-pressed=true]{color:var(--gold);border-bottom-color:var(--gold);background:#f8cb2e08}
.optics-module .lens-tabs [aria-pressed=true] span,.optics-module .lens-tabs [aria-pressed=true] small{color:var(--gold)}
.optics-module .integrated-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.optics-module .visual{min-width:0;align-self:center;padding:0 14px}
.optics-module .visual-top{padding:20px 8px 8px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:.75rem;color:var(--muted)}
.optics-module .visual-top #optics-design-label{color:var(--paper);letter-spacing:.04em}
.optics-module .viewport{aspect-ratio:1800/1060;position:relative;overflow:hidden;isolation:isolate;touch-action:pan-y;background:#050b14}
.optics-module .viewport:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.optics-module .viewport.zoomed{cursor:grab;touch-action:none}
.optics-module .viewport.dragging{cursor:grabbing}
.optics-module .scene{position:relative;width:100%;height:100%;transform-origin:center;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.optics-module .dragging .scene{transition:none}
.optics-module .eye-image{position:absolute;left:11.111111%;top:3.301887%;width:88.111111%;height:93.584906%;object-fit:contain;max-width:none;user-select:none;-webkit-user-drag:none}
.optics-module #optics-optics{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.optics-module #optics-optics text{font-family:inherit;fill:#d1d9e1;font-size:29px;paint-order:stroke;stroke:#07101be6;stroke-width:6px;stroke-linejoin:round;font-weight:500}
.optics-module .lens-outline{stroke:#91cbe8;stroke-width:2.3}
.optics-module .lens-edge{stroke:#bce7fc55;stroke-width:1.5}
.optics-module .clear-zone{stroke:var(--blue);stroke-width:2;fill:#73b9e61c}
.optics-module .lenslet{fill:#f8cb2e20;stroke:#f8cb2eaa;stroke-width:1.05}
.optics-module .pattern-muted .lenslet{fill:#73b9e60b;stroke:#73b9e647}
.optics-module .segment-highlight{fill:#f8cb2e70;stroke:#ffe492;stroke-width:1.5}
.optics-module .ray{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.optics-module .ray.blue-ray{stroke:var(--blue);opacity:.88}
.optics-module .ray.gold-ray{stroke:var(--gold);opacity:.82}
.optics-module .ray.tail{opacity:.32;stroke-width:1.7}
.optics-module .motion{stroke-width:4;stroke-dasharray:5 105;animation:flow 5s linear infinite;animation-play-state:paused}
.optics-module .motion.blue-ray{stroke:#d8f5ff;opacity:.95}
.optics-module .motion.gold-ray{stroke:#fff4b6;opacity:1}
.playing .optics-module .motion{animation-play-state:running}
@keyframes flow{to{stroke-dashoffset:-550}}
.optics-module .blue-dot,.optics-module .blue-halo{fill:var(--blue)}
.optics-module .gold-dot,.optics-module .gold-halo{fill:var(--gold)}
.optics-module .focus-halo{opacity:.55}
.optics-module .leader{stroke-width:1.8;fill:none}
.optics-module .lens-leader{stroke:#a9cde2}
.optics-module .blue-leader{stroke:var(--blue)}
.optics-module .gold-leader{stroke:var(--gold)}
.optics-module #optics-optics .blue-label{fill:#aee1ff}
.optics-module #optics-optics .gold-label{fill:#ffe27b}
.optics-module .region-outline{stroke:#f8cb2e77;stroke-width:1.6;stroke-dasharray:4 7;fill:url(#optics-signal-fill)}
.optics-module .defocus-surface{stroke:#f8cb2e7f;stroke-width:1.8;stroke-dasharray:5 8;fill:none}
.optics-module .hotspots{position:absolute;inset:0}
.optics-module .hotspot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(var(--pin-scale,1));width:35px;height:35px;border-radius:50%;border:1px solid #fff9;background:#07121ce8;box-shadow:0 3px 15px #0008;font-size:.75rem;font-weight:650}
.optics-module .hotspot.selected{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.optics-module .legend{display:flex;justify-content:center;flex-wrap:wrap;gap:13px 24px;padding:7px 12px 12px}
.optics-module .legend>span{display:flex;align-items:center;gap:8px}
.optics-module .legend i{width:24px;height:2px;display:block}
.optics-module .legend .blue{background:var(--blue)}
.optics-module .legend .gold{background:var(--gold)}
.optics-module .legend b{font-size:.8rem;font-weight:450}
.optics-module .viewer-controls{display:flex;align-items:center;justify-content:center;gap:9px;padding:4px 10px 12px}
.optics-module .quiet[aria-pressed=true]{color:var(--gold);border-color:#f8cb2e88}
.optics-module .zoom-control{display:flex;align-items:center;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.optics-module .zoom-control button{background:none;width:42px;height:44px;font-size:1.1rem}
.optics-module .zoom-control button:hover{background:#ffffff0b}
.optics-module .zoom-control output{font-size:.8rem;min-width:50px;text-align:center;font-variant-numeric:tabular-nums}
.optics-module .visual-note{font-size:.73rem;line-height:1.75;color:#9cabb9;max-width:800px;margin:0 auto;padding:0 14px 19px;text-align:center}
.optics-module .explanation{border-left:1px solid var(--line);padding:27px 24px;background:linear-gradient(145deg,#142334,#0c1928);display:flex;flex-direction:column}
.optics-module .explanation-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:21px}
.optics-module .explanation-heading>span{font-size:.68rem;color:#9cabb9}
.optics-module h2{font-size:1.5rem;font-weight:550;line-height:1.5;letter-spacing:-.02em;margin-bottom:12px}
.optics-module #optics-story-copy{font-size:.94rem;line-height:1.85;color:var(--muted)}
.optics-module .path-select{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:21px 0 23px;background:#050e19;padding:4px;border:1px solid var(--line);border-radius:6px}
.optics-module .path-select button{background:transparent;font-size:.74rem;min-height:42px;line-height:1.45;padding:7px 4px;border-radius:3px}
.optics-module .path-select [aria-pressed=true]{background:#ffffff14;color:var(--gold)}
.optics-module .explain-steps{margin:0;padding:0;list-style:none;display:grid;gap:19px}
.optics-module .explain-steps li{display:flex;gap:12px}
.optics-module .explain-steps li>span{font-size:.68rem;color:var(--gold);margin-top:4px;letter-spacing:.08em}
.optics-module .explain-steps h3{font-size:.86rem;font-weight:550;margin-bottom:5px}
.optics-module .explain-steps p{font-size:.85rem;line-height:1.8;color:var(--muted)}
.optics-module .source{font-size:.8rem;color:var(--gold);margin-top:25px;padding-bottom:5px;text-underline-offset:4px;text-decoration:underline}
.optics-module .version-note{font-size:.73rem;line-height:1.7;color:#9cabb9;margin-top:12px}
.optics-module .anatomy-detail{border-left:2px solid var(--blue);padding-left:13px;margin-top:20px}
.optics-module .anatomy-detail b{font-size:.88rem}
.optics-module .anatomy-detail p{font-size:.85rem;color:var(--muted);line-height:1.7;margin-top:7px}
.optics-module .scope{margin:24px 0 30px;padding:16px 0;border-block:1px solid var(--line);font-size:.8rem;color:#9cabb9;line-height:1.8}
.optics-module .scope summary{min-height:30px;cursor:pointer}
.optics-module .scope p{max-width:1050px;margin-top:15px}
.optics-module footer{display:flex;justify-content:space-between;gap:20px;color:#9cabb9;font-size:.75rem;padding-bottom:28px}
.optics-module .noscript{padding:20px;background:var(--gold);color:var(--bg)}
.optics-module #optics-image-error{position:absolute;inset:30% 20%;font-size:1rem;line-height:1.8;background:var(--bg);padding:15px}
body[data-path=blue] .optics-module #optics-gold-rays,body[data-path=blue] .optics-module #optics-defocus-region,body[data-path=blue] .optics-module #optics-defocus-focus,body[data-path=blue] .optics-module #optics-defocus-callout-group,body[data-path=blue] .optics-module #optics-active-segments{opacity:.08}
body[data-path=gold] .optics-module #optics-blue-rays,body[data-path=gold] .optics-module #optics-image-focus{opacity:.09}
@media(min-width:1500px){.optics-module .integrated-layout{grid-template-columns:minmax(0,1fr) 340px}
.optics-module .explanation{padding:34px 29px}
.optics-module h2{font-size:1.7rem}
}
@media(max-width:1100px){.optics-module .wrap{width:calc(100% - 44px)}
.optics-module .integrated-layout{grid-template-columns:minmax(0,1fr) 260px}
.optics-module .explanation{padding:24px 19px}
.optics-module .visual{padding-inline:5px}
.optics-module .viewer-controls{gap:6px;flex-wrap:wrap}
.optics-module .viewer-controls button{font-size:.78rem}
.optics-module .lens-tabs button{gap:8px}
.optics-module .lens-tabs small{font-size:.65rem}
.optics-module .explanation h2{font-size:1.32rem}
.optics-module .intro>p{font-size:.86rem}
.optics-module .intro h1{font-size:2.1rem}
}
@media(max-width:900px){.optics-module .integrated-layout{grid-template-columns:minmax(0,1fr)}
.optics-module .explanation{border-left:0;border-top:1px solid var(--line);display:block;padding:26px}
.optics-module .explanation-heading{margin-bottom:13px}
.optics-module .explain-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.optics-module .path-select{max-width:450px}
.optics-module .source{display:inline-block;margin-top:23px}
.optics-module .explanation h2{font-size:1.6rem}
.optics-module .intro{align-items:start}
.optics-module .intro>p{max-width:230px}
.optics-module .visual-top{padding-top:16px}
.optics-module .legend b{font-size:.85rem}
.optics-module .visual-note{max-width:650px}
.optics-module #optics-optics text{font-size:33px}
}
@media(max-width:560px){.optics-module .wrap{width:calc(100% - 24px)}
.optics-module .draft-strip{padding-inline:12px;font-size:.68rem}
.optics-module .site-header{height:73px}
.optics-module .brand img{width:146px}
.optics-module .header-actions>a{display:none}
.optics-module .intro{display:block;padding:22px 0 20px}
.optics-module .intro h1{font-size:1.8rem}
.optics-module .intro>p{max-width:none;font-size:.85rem;margin-top:12px}
.optics-module .intro>p br{display:none}
.optics-module .lens-tabs button{padding:13px 5px;flex-wrap:wrap;gap:3px 7px}
.optics-module .lens-tabs button span{display:none}
.optics-module .lens-tabs b{font-size:.83rem}
.optics-module .lens-tabs small{flex:0 0 100%;font-size:.65rem}
.optics-module .visual{padding-inline:0}
.optics-module .visual-top{font-size:.65rem;padding-inline:11px}
.optics-module .visual-top>span:last-child{display:none}
.optics-module .viewport{aspect-ratio:1.58}
.optics-module .scene{width:100%;height:calc(100% * 1.58 / (1800 / 1060));top:3.5%}
.optics-module #optics-optics text{font-size:52px;stroke-width:9px}
.optics-module .legend{gap:10px;padding-top:8px;padding-bottom:12px}
.optics-module .legend b{font-size:.7rem}
.optics-module .legend i{width:17px}
.optics-module .viewer-controls{gap:6px;padding-inline:8px}
.optics-module .viewer-controls .primary{padding-inline:12px}
.optics-module .viewer-controls .quiet{padding-inline:10px}
.optics-module .viewer-controls #optics-reset{display:none}
.optics-module .zoom-control button{width:34px}
.optics-module .zoom-control output{min-width:42px;font-size:.72rem}
.optics-module .visual-note{font-size:.67rem;padding-inline:14px;text-align:left}
.optics-module .explanation{padding:23px 20px}
.optics-module .explain-steps{grid-template-columns:1fr;gap:17px}
.optics-module .path-select{margin-block:18px 22px}
.optics-module .path-select button{font-size:.8rem}
.optics-module .explanation h2{font-size:1.5rem}
.optics-module .explanation #optics-story-copy{font-size:.94rem}
.optics-module .scope{font-size:.76rem;margin-top:20px}
.optics-module footer{display:block;font-size:.72rem}
.optics-module footer a{display:block;margin-top:12px}
.optics-module .hotspot{width:28px;height:28px;font-size:.65rem}
.optics-module .intro .eyebrow{font-size:.68rem}
}
@media(prefers-reduced-motion:reduce){.optics-module .scene{transition:none}
.optics-module .motion{animation:none}
.playing .optics-module .motion{animation:flow 7s linear infinite}
}
body[data-path=blue] .optics-module #optics-segment-callout{opacity:.08}
body[data-path=gold] .optics-module .blue-leader,body[data-path=gold] .optics-module #optics-retina-callout{opacity:.09}
@media(max-width:560px){.optics-module .scene{height:93.044444%}
}



.integrated-section{scroll-margin-top:28px}
.integrated-heading{padding:10px 0 24px}
.integrated-heading h2{margin:10px 0 12px;font-size:clamp(1.8rem,3vw,2.65rem)}
.integrated-heading>p:last-child{color:var(--muted);font-size:1rem}
.optics-module{border-radius:20px;isolation:isolate}
.optics-module .experience{box-shadow:none}
.optics-module .primary{margin:0}
.optics-module .legend{margin:0}
.optics-module .explanation h2{margin-top:0}
.optics-module #optics-labels{position:static;inset:auto;pointer-events:auto;overflow:visible}
.optics-module #optics-reset{margin:0}
.optics-module .explanation-heading>span{font-size:.75rem}
.optics-module #optics-story-copy{font-size:1rem}
.optics-module .explain-steps p{font-size:.875rem}
.optics-module .visual-note{font-size:.75rem}
.optics-module .version-note{font-size:.75rem}
@media(max-width:900px){.optics-module .explanation{display:block}}
@media(max-width:560px){.optics-module .visual-note{font-size:.75rem}.integrated-heading{padding-top:0}.integrated-heading>p:last-child{font-size:.9rem}.optics-module .legend b{font-size:.75rem}}

/* The production page keeps its existing shell, content width and spacing. */
.myopia-interactive-heading{max-width:820px;margin-bottom:32px}
.myopia-interactive-heading h2{color:#fff}
.myopia-interactive-heading .eyebrow{color:var(--site-gold)}
.myopia-interactive-heading .lead{color:#c5ced8}
.myopia-interactive-scope{margin:22px 0 0;color:#c5ced8;font-size:.875rem;line-height:1.65;max-width:960px}
.myopia-interactive-scope a{color:var(--site-gold);text-decoration:underline;text-underline-offset:4px}
.optics-module{border:1px solid rgba(255,255,255,.14);border-radius:var(--site-radius,22px);overflow:hidden}
.optics-module .explanation h2{font-family:Georgia,"Times New Roman",serif;color:#fff;letter-spacing:-.025em}
.optics-module .explain-steps h3{color:#fff;font-family:Inter,system-ui,sans-serif;letter-spacing:0}
.optics-module .eyebrow{color:var(--gold)}
.optics-module .experience{padding:0}
.optics-module .integrated-layout{grid-template-columns:minmax(0,1.65fr) minmax(270px,1fr)}
.optics-module .explanation{padding:26px}
.optics-module .visual-note{line-height:1.65}
.optics-module .lens-tabs small,.optics-module .visual-top,.optics-module .visual-note,.optics-module .version-note{font-size:.875rem}
.optics-module .explain-steps p{font-size:.9375rem}
.optics-module .viewer-controls button{min-height:44px}
.optics-module .viewer-controls #optics-reset{display:inline-flex;align-items:center;justify-content:center}
@media(max-width:1050px){.optics-module .integrated-layout{grid-template-columns:1fr}.optics-module .explanation{border-top:1px solid var(--line);border-left:0}}
@media(max-width:540px){.optics-module .explanation{padding:22px 18px}.optics-module .lens-tabs{gap:4px;padding:10px}.optics-module .lens-tabs button{padding:12px 7px}.optics-module .lens-tabs small{font-size:.75rem}.myopia-interactive-heading{margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:430px){body[data-optics-embedded] .unified-header .nav{gap:8px}body[data-optics-embedded] .unified-header .site-logo{flex:1 1 140px;min-width:0;max-width:160px}body[data-optics-embedded] .unified-header .site-logo img{width:100%;height:auto}body[data-optics-embedded] .unified-header .menu{flex:0 0 32px;min-width:32px;padding:0}}