:root{--navy-950:#071426;--navy-900:#0b1f38;--navy-800:#12345a;--navy-700:#1b3a63;--blue:#3d7fca;--blue-soft:#84b7ec;--orange:#ff6b35;--green:#4fb887;--paper:#fffdf8;--cream:#f7f1e7;--ink:#10233c;--muted:#637285;--line:rgba(27,58,99,.16)}*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Calibri,"Segoe UI",Aptos,system-ui,sans-serif}button,a{font:inherit}button{cursor:pointer}.experience{--scene-color:var(--blue);min-height:100vh;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 8%,rgba(61,127,202,.08),transparent 30rem),var(--cream)}.theme-melange{--scene-color:var(--orange)}.theme-naturel{--scene-color:var(--green)}.ambient{position:absolute;inset:0 0 auto;height:48rem;overflow:hidden;pointer-events:none}.orb{position:absolute;border-radius:50%;opacity:.36;animation:drift 16s ease-in-out infinite alternate}.orb-one{width:24rem;height:24rem;top:4rem;right:-7rem;border:1px solid rgba(27,58,99,.14)}.orb-two{width:16rem;height:16rem;top:10rem;right:7rem;border:1px dashed rgba(255,107,53,.28);animation-delay:-5s}.orb-three{width:6rem;height:6rem;top:29rem;left:8%;background:rgba(79,184,135,.12);animation-delay:-9s}@keyframes drift{to{transform:translate3d(1rem,1.5rem,0) rotate(10deg)}}.topbar,.hero,.module-shell,.final-message,.sources-panel,footer{position:relative;z-index:1;width:min(1180px,calc(100% - 40px));margin-inline:auto}.topbar{min-height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:12px;color:var(--navy-700);text-decoration:none}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(27,58,99,.3);background:linear-gradient(145deg,rgba(61,127,202,.18),rgba(255,107,53,.14));font-family:"Trebuchet MS",Calibri,sans-serif;font-size:25px;font-style:italic}.brand span:last-child{display:grid}.brand strong{font-size:14px;letter-spacing:.04em}.brand small{margin-top:2px;color:var(--muted);font-size:11px;letter-spacing:.13em;text-transform:uppercase}.topbar-actions{display:flex;gap:8px}.sound-toggle,.source-toggle,.listen-button{min-height:40px;border:1px solid var(--line);border-radius:999px;color:var(--navy-700);background:rgba(27,58,99,.03);padding:0 15px}.sound-toggle span{color:var(--orange);font-weight:800}.hero{min-height:465px;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,410px);align-items:center;padding:54px 0 74px}.eyebrow{margin:0 0 18px;color:var(--orange);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}.hero h1,.final-message h2,.lesson-top h2{font-family:"Trebuchet MS",Calibri,Arial,sans-serif;font-weight:500;letter-spacing:-.015em}.hero h1{max-width:750px;margin:0;font-size:clamp(52px,7vw,92px);line-height:.95}.hero h1 span,.final-message h2 span{color:var(--orange);font-style:italic}.hero-intro{max-width:590px;margin:27px 0 0;color:var(--muted);font-size:18px;line-height:1.65}.start-button,.nav-button{margin-top:28px;border:0;border-radius:999px;background:var(--scene-color);color:white;padding:14px 20px;font-weight:800;box-shadow:0 12px 25px rgba(0,0,0,.18);transition:transform .18s ease,filter .18s ease}.start-button:hover,.nav-button:hover{transform:translateY(-2px);filter:brightness(1.08)}.code-sculpture{position:relative;height:330px;display:grid;place-content:center;text-align:center}.code-halo{position:absolute;inset:15px;border-radius:50%;border:1px solid rgba(27,58,99,.14);background:radial-gradient(circle,rgba(61,127,202,.14),transparent 66%),repeating-radial-gradient(circle,transparent 0 31px,rgba(27,58,99,.035) 32px 33px)}.big-code{position:relative;font-family:"Trebuchet MS",Calibri,sans-serif;font-size:clamp(62px,8vw,105px);letter-spacing:-.02em}.big-code span{color:var(--blue-soft)}.big-code i{color:var(--orange);font-style:normal}.code-sculpture p{position:relative;margin:10px 0;color:var(--muted);font-size:14px;line-height:1.45}.module-shell{display:grid;grid-template-columns:205px minmax(0,1fr);gap:26px;padding-bottom:90px}.stepper{align-self:start;display:grid;gap:7px;padding:14px;border-radius:22px;background:rgba(27,58,99,.05);border:1px solid var(--line)}.stepper button{display:flex;align-items:center;gap:11px;border:0;border-radius:13px;background:transparent;color:var(--muted);padding:11px;text-align:left}.stepper button b{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:rgba(27,58,99,.06);font-size:11px}.stepper button.active{background:rgba(27,58,99,.08);color:var(--ink)}.stepper button.active b{background:var(--scene-color)}.lesson-card{color:var(--ink);background:var(--paper);border-radius:26px;padding:clamp(24px,5vw,52px);box-shadow:0 22px 45px rgba(0,0,0,.18)}.lesson-top{display:flex;justify-content:space-between;gap:20px;align-items:start}.lesson-top .eyebrow{color:var(--scene-color)}.lesson-top h2{margin:0;font-size:clamp(34px,4vw,53px);line-height:.96}.listen-button{color:var(--ink);border-color:var(--line);background:#fff;white-space:nowrap}.lesson-text{max-width:800px;margin:25px 0 30px;color:#40526a;font-size:17px;line-height:1.7}.interactive-zone{min-height:260px;border-radius:20px;background:#eff3f5;border:1px solid var(--line);padding:clamp(18px,4vw,36px)}.lesson-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:27px;color:var(--muted);font-size:13px}.nav-button{margin:0}.nav-button.subtle{color:var(--ink);background:#e9edf1;box-shadow:none}.nav-button:disabled{opacity:.38;cursor:not-allowed;transform:none}.code-board{display:grid;gap:24px}.code-line{display:flex;justify-content:center;align-items:center;gap:5px;flex-wrap:wrap;font-family:"Trebuchet MS",Calibri,sans-serif;font-size:clamp(43px,8vw,82px);letter-spacing:-.015em}.token{position:relative;display:inline-grid;place-items:center;min-width:.75em;border-bottom:4px solid var(--scene-color);padding:0 .06em;color:var(--ink);transition:transform .2s ease,background .2s ease}.token:hover,.token.focus{transform:translateY(-5px);background:#fff}.token small{position:absolute;top:calc(100% + 9px);width:max-content;color:var(--scene-color);font-family:"Segoe UI",sans-serif;font-size:11px;font-weight:800;letter-spacing:.04em}.decode-detail{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:23px}.decode-detail div{padding:15px;border-radius:14px;background:#fff;border-left:4px solid var(--scene-color)}.decode-detail strong,.family-card strong{display:block}.decode-detail span{display:block;margin-top:5px;font-size:13px;color:var(--muted);line-height:1.4}.formula-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.formula-piece{padding:16px;border-radius:15px;background:#fff;text-align:center;box-shadow:0 2px 10px rgba(16,35,60,.05)}.formula-piece b{display:block;font-family:"Trebuchet MS",Calibri,sans-serif;font-size:29px;color:var(--scene-color)}.formula-piece span{font-size:13px;color:var(--muted)}.note{margin:22px 0 0;padding:15px 17px;border-left:4px solid var(--orange);background:#fff5ef;color:#68402c;line-height:1.5}.comparison-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.family-card{position:relative;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}.family-card::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--card-color,var(--blue))}.family-card b{display:block;margin-bottom:6px;color:var(--card-color,var(--blue));font-size:25px}.family-card p{margin:9px 0;color:var(--muted);font-size:13px;line-height:1.45}.family-card em{font-style:normal;font-size:12px;font-weight:800;color:#345}.quiz{display:grid;gap:18px}.quiz-top{display:flex;justify-content:space-between;align-items:center}.score-pill{padding:7px 12px;border-radius:999px;background:#fff;color:var(--muted);font-size:13px;font-weight:700}.question{padding:20px;border-radius:16px;background:#fff}.question p{margin:0 0 15px;font-size:18px;font-weight:700}.answers{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.answer{border:1px solid #d7e0e8;border-radius:12px;background:#fff;color:var(--ink);padding:13px;text-align:left;font-weight:700}.answer:hover{border-color:var(--scene-color)}.answer.correct{border-color:#299668;background:#e9f8ef;color:#166342}.answer.wrong{border-color:#d24d3d;background:#fff0ee;color:#932c21}.feedback{min-height:27px;margin:0;color:#40526a;font-weight:700}.quiz-result{padding:23px;border-radius:16px;background:#fff;text-align:center}.quiz-result h3{margin:0;font-family:"Trebuchet MS",Calibri,sans-serif;font-size:29px}.quiz-result p{color:var(--muted);line-height:1.5}.final-message{padding:65px 0 54px;color:var(--ink);text-align:center}.final-message>p{margin:0 0 16px;color:var(--orange);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}.final-message h2{max-width:850px;margin:0 auto;font-size:clamp(36px,5vw,64px);line-height:1}.final-pillars{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:33px;font-weight:800}.final-pillars span{border-radius:999px;background:#e0eaf3;padding:10px 15px}.final-pillars i{font-style:normal;color:var(--orange)}.final-pillars strong{border-radius:999px;background:var(--navy-900);color:white;padding:10px 15px}.sources-panel{margin-bottom:40px;padding:27px;border-radius:20px;background:#e4ebef;color:var(--ink)}.sources-panel h2{margin:0;font-family:"Trebuchet MS",Calibri,sans-serif}.sources-panel ul{margin:20px 0 0;padding-left:20px;line-height:1.7}footer{display:flex;justify-content:space-between;align-items:center;padding:27px 0;color:var(--muted);font-size:12px}footer button{border:0;background:none;color:var(--blue);font-weight:800}@media(max-width:760px){.topbar{min-height:74px}.sound-toggle b{display:none}.hero{grid-template-columns:1fr;padding:45px 0 35px}.code-sculpture{height:210px}.module-shell{grid-template-columns:1fr;gap:14px}.stepper{grid-template-columns:repeat(4,1fr);padding:7px}.stepper button{justify-content:center;padding:9px}.stepper button span{display:none}.lesson-top{display:block}.listen-button{margin-top:18px}.decode-detail,.formula-grid,.comparison-grid{grid-template-columns:1fr}.answers{grid-template-columns:1fr}.lesson-footer #step-status{display:none}.final-pillars{gap:7px}.topbar,.hero,.module-shell,.final-message,.sources-panel,footer{width:min(100% - 24px,1180px)}}@media print{*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}