@import "https://fonts.googleapis.com/css2?family=Mali:wght@400;500;600;700&family=Nunito:wght@600;700;800;900&display=swap";:root{color:#123e75;--blue:#155aa4;--navy:#123e75;--mint:#daf2e8;--cream:#fffcf2;--orange:#ff9f2d;--line:#b6d6ef;--shadow:0 15px 35px #175a9422;background:#e4f1ff;font-family:Mali,Nunito,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:3px;outline:3px solid #ffad3a}.site{background:linear-gradient(#dff0ff,#edf7ff);min-height:100vh}header{z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff0;border-bottom:1px solid #c5dff2;justify-content:space-between;align-items:center;height:72px;padding:0 max(5vw,22px);display:flex;position:sticky;top:0}.brand{color:#155aa4;letter-spacing:-1px;background:0 0;border:0;font:900 27px Nunito}.brand span{color:#123e75}.menu{color:var(--navy);background:#e7f4ff;border:0;border-radius:11px;padding:9px;display:none}nav{gap:3px;display:flex}nav button{color:#32668d;background:0 0;border:0;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700}nav button:hover,nav .active{color:#124e95;background:#dff1ff}.home-hero{background-position:50%;background-size:cover;min-height:min(760px,100vh - 72px);position:relative}.home-copy{max-width:690px;padding:clamp(130px,16vw,230px) 8vw}.kicker{color:#197d82;letter-spacing:1.3px;margin:0 0 9px;font:700 12px Nunito}.home-copy h1{color:#123e75;text-shadow:0 3px #fff;margin:0;font:900 clamp(62px,8vw,120px)/.86 Nunito}.home-copy h1 span{color:#155aa4}.home-copy>p:not(.kicker){color:#245b7f;margin:26px 0;font-size:clamp(15px,1.8vw,20px);line-height:1.8}.primary{background:var(--orange);color:#693400;border:0;border-radius:16px;align-items:center;gap:9px;padding:14px 20px;font-weight:800;transition:all .2s;display:inline-flex;box-shadow:0 7px #e4871d}.primary:hover{transform:translateY(-2px)}.small{border-radius:11px;padding:10px 15px;box-shadow:0 4px #e4871d}.primary:disabled{opacity:.5;cursor:not-allowed}.path{background:var(--cream);grid-template-columns:.75fr 1.25fr;gap:55px;padding:80px max(5vw,22px);display:grid}.path h2{color:var(--navy);margin:0;font:800 clamp(31px,4vw,52px)/1.1 Nunito}.path>div>p:not(.kicker){color:#5d8098;line-height:1.75}.lesson-grid{grid-template-columns:repeat(2,1fr);gap:13px;display:grid}.lesson{text-align:left;min-height:105px;color:var(--navy);background:#fff;border:1px solid #c8dff0;border-radius:19px;align-items:center;gap:13px;padding:15px;transition:all .2s;display:flex;box-shadow:0 8px 20px #1b639111}.lesson:hover{border-color:#6caee6;transform:translateY(-3px)}.lesson-no{color:#17776e;background:#e2f4ec;border-radius:50%;place-items:center;min-width:36px;height:36px;font:700 17px Nunito;display:grid}.lesson div{flex:1}.lesson b{font-size:16px;display:block}.lesson small{color:#67859a;margin-top:4px;font-size:11px;display:block}.lesson svg{color:#5da8c9;width:18px}.lesson-page{background:var(--cream);padding-bottom:75px}.lesson-hero{background-position:50%;background-size:cover;align-items:center;min-height:390px;padding:60px 8vw;display:flex}.lesson-hero div{max-width:590px}.lesson-hero h1{color:#123e75;text-shadow:0 2px #fff;margin:0;font:900 clamp(42px,6vw,70px)/1.08 Nunito}.lesson-hero p:last-child{color:#257b7d;font-size:18px;font-weight:700}.lesson-tabs{background:#fff;border-bottom:1px solid #dbeaf4;justify-content:center;gap:2px;padding:15px;display:flex;overflow:auto}.lesson-tabs span{white-space:nowrap;color:#6a899a;border-radius:999px;padding:9px 13px;font-size:12px}.lesson-tabs .current{color:#187d72;background:#daf3eb;font-weight:700}.lesson-content{gap:26px;width:min(1000px,92vw);margin:42px auto;display:grid}.simulator,.poe,.formula,.learn-card{box-shadow:var(--shadow);background:#fff;border:1px solid #c7deef;border-radius:25px;padding:clamp(18px,3vw,32px)}.sim-header{justify-content:space-between;align-items:start;display:flex}.sim-header h2,.poe h2,.formula h2,.learn-card h2{color:var(--navy);margin:0;font:800 clamp(24px,3.5vw,38px)/1.2 Nunito}.quiet{color:#36709d;background:#f5fbff;border:1px solid #b8d8ef;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:700}.diagram-wrap{background:linear-gradient(#f9fdff,#ecf8ff);border-radius:18px;margin:20px 0;overflow:hidden}.optics-diagram{touch-action:none;width:100%;height:auto}.axis{stroke:#4d7495;stroke-width:2px}.mirror,.device{stroke:#1b669e;stroke-width:7px;stroke-linecap:round}.lens{fill:#bde7fb77;stroke:#4295cd;stroke-width:3px}.focus{fill:#ff9f2d}.optics-diagram text{fill:#174e80;font:600 14px Mali}.object,.image{stroke:#f28420;fill:#f28420;stroke-width:3px}.image.real{stroke:#2d86bf;fill:#2d86bf}.image.virtual{stroke:#2c9a83;fill:#2c9a83;stroke-dasharray:5 4}.rays{stroke:#e28337;stroke-width:1.6px;opacity:.7}.screen{stroke:#849dae;stroke-width:4px}.screen.active{stroke:#1ca56f;stroke-width:6px}.result-card{color:#166b62;background:#eaf7f3;border-radius:13px;gap:5px;padding:14px;display:grid}.result-card b{font:700 16px Nunito}.result-card span{font-size:12px}.result-card em{color:#147a57;font-size:12px;font-style:normal;font-weight:700}.controls{grid-template-columns:repeat(4,1fr) auto;gap:12px;margin-top:19px;display:grid}.controls label{color:#38677e;gap:6px;font-size:12px;font-weight:700;display:grid}.controls select{color:#285b84;background:#fff;border:1px solid #bcd9ea;border-radius:9px;padding:7px;font-size:12px}.controls input{accent-color:#f19327;width:100%}.toggle{color:#447493;background:#fff;border:1px solid #bcd9ea;border-radius:9px;align-self:end;padding:8px;font-size:12px;font-weight:700}.toggle.on{color:#167c70;background:#e0f3ec;border-color:#a6dccc}.poe>div{flex-wrap:wrap;gap:9px;margin:18px 0;display:flex}.choice{color:#38677e;background:#f8fcff;border:1px solid #c8deec;border-radius:10px;padding:10px;font-size:13px}.choice.chosen{color:#16776d;background:#e2f5ed;border-color:#79cab4}.feedback{color:#216a62;background:#ecf8f3;border-radius:12px;align-items:start;gap:8px;padding:12px;font-size:13px;line-height:1.7;display:flex}.feedback svg{min-width:18px}.formula-grid{grid-template-columns:1fr 1fr .8fr;gap:14px;margin:19px 0;display:grid}.formula-grid label{color:#356b8e;background:#f5fbff;border-radius:13px;padding:13px;font-size:13px;font-weight:700}.formula-grid input{accent-color:#f19327;width:100%;margin-top:12px}.answer{color:#166e65;background:#e8f6ee;border-radius:13px;align-content:center;padding:13px;display:grid}.answer b{font:800 21px Nunito}.answer span{font-size:12px}.formula ol{color:#3d708e;background:#f8fcff;border-radius:12px;padding:14px 30px;font-family:Nunito;line-height:2}.learn-card{background:#fffdf5}.learn-card p{color:#597889;font-size:14px;line-height:1.85}.learn-card b{color:#166d86}@media (width<=800px){.path{grid-template-columns:1fr;gap:28px;padding:60px 22px}.controls{grid-template-columns:1fr 1fr}.controls .toggle{align-self:auto}.lesson-hero{background-position:42%;min-height:300px}.formula-grid{grid-template-columns:1fr 1fr}.answer{grid-column:1/-1}}@media (width<=620px){header{height:64px}.menu{display:block}nav{background:#fffffff7;border-bottom:1px solid #c6def0;flex-wrap:wrap;padding:12px 20px;display:none;position:absolute;top:64px;left:0;right:0;box-shadow:0 12px 22px #1c58841c}nav.open{display:flex}nav button{font-size:12px}.home-hero{background-position:47%;min-height:560px}.home-copy{padding:315px 22px 35px}.home-copy h1{font-size:61px}.home-copy>p:not(.kicker){margin:13px 0;font-size:13px;line-height:1.65}.lesson-grid{grid-template-columns:1fr}.lesson-hero{background-position:50%;min-height:240px;padding:100px 22px 24px}.lesson-hero h1{font-size:39px}.lesson-hero p:last-child{font-size:14px}.lesson-tabs{justify-content:start}.lesson-content{margin:23px auto}.simulator,.poe,.formula,.learn-card{border-radius:18px;padding:18px}.sim-header h2{font-size:25px}.optics-diagram{min-width:620px}.diagram-wrap{overflow-x:auto}.controls,.formula-grid{grid-template-columns:1fr}.answer{grid-column:auto}.lesson-tabs span{padding:8px 10px;font-size:11px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.lesson-hero div{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#fffdf5d9;border-radius:22px;max-width:540px;margin-left:42%;padding:22px 28px}@media (width<=800px){.lesson-hero div{margin-left:28%}}@media (width<=620px){.lesson-hero div{background:#fffdf5df;margin-left:0;padding:12px 16px}.lesson-content,.simulator{min-width:0}.diagram-wrap{width:100%;max-width:100%;overflow-x:auto}.optics-diagram{display:block}}
