:root{color-scheme:light;--ink:#112d4e;--blue:#155fa8;--line:#d4e1ee}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f8fbff;color:var(--ink);font:16px/1.6 Inter,system-ui,sans-serif}
.wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}
a{color:var(--blue);text-underline-offset:.2em}
:focus-visible{outline:3px solid #287ad0;outline-offset:5px}
.top,footer{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:24px 0}
.top{border-bottom:1px solid var(--line)}
.top img{display:block;width:154px;height:auto}
.top>a:last-child{font-weight:650}
.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(24px,6vw,80px);padding:clamp(40px,7vw,94px) 0}
.eyebrow{font-size:.75rem;font-weight:750;letter-spacing:.13em;color:var(--blue)}
h1,h2,h3{line-height:1.03;letter-spacing:-.052em}
h1{font-size:clamp(3.1rem,7vw,6.4rem);margin:.2em 0}
h1 em{font-style:normal;color:#1976d2}
.intro{font-size:1.18rem;max-width:34ch;margin:1.5rem 0}
.cta{display:inline-flex;align-items:center;gap:16px;padding:13px 22px;border-radius:12px;background:#155fa8;color:white;text-decoration:none;font-weight:750}
.cta:hover{background:#112d4e}
.availability{font-size:.88rem;color:#42617e}
.stage{position:relative;isolation:isolate;display:grid;place-items:center;overflow:hidden;border:1px solid #cee2f9;border-radius:40% 40% 22px 22px;background:radial-gradient(circle at 50% 32%,#f8fcff,#d6eaff 75%);min-height:390px}
.stage img{position:relative;display:block;width:min(72%,320px);height:auto;animation:float 5s ease-in-out 3}
.orbit{position:absolute;width:82%;aspect-ratio:1;border:1px solid #92bee9;border-radius:50%;transform:rotate(-18deg) scaleY(.78)}
.spark{position:absolute;right:12%;top:24%;color:#155fa8;font-size:2.8rem;animation:twinkle 4s ease-in-out 3}
.caption{position:absolute;bottom:12px;left:18px;background:#f8fbff;border-radius:99px;padding:5px 12px;font-size:.8rem;font-weight:700}
.explore{border-top:1px solid var(--line);padding:48px 0}
.section-head h2{font-size:clamp(2.5rem,5vw,4.3rem);margin:0}
fieldset{border:0;margin:20px 0 14px;padding:0;min-width:0}
.choices,footer nav{display:flex;flex-wrap:wrap;gap:12px}
button{font:inherit;font-weight:700;cursor:pointer;border:1px solid #b5cee6;border-radius:10px;background:white;color:var(--ink);padding:8px 14px}
button[aria-pressed=true]{background:#112d4e;color:white;border-color:#112d4e}
.feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:16px;border:1px solid var(--line);border-radius:24px;background:#e9f3ff;padding:clamp(20px,4vw,50px)}
.feature h3{font-size:clamp(2rem,4vw,3.25rem);margin:0}
.feature p{max-width:34ch}
.feature img{width:100%;height:auto;max-height:350px;object-fit:contain}
.feature.changed img{animation:appear .35s ease-out}
footer{border-top:1px solid var(--line);font-size:.9rem}
.sr{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
@keyframes float{50%{transform:translateY(-10px)}}
@keyframes twinkle{50%{transform:scale(.76) rotate(15deg);opacity:.65}}
@keyframes appear{from{opacity:0;transform:translateY(8px)}}
@media(max-width:680px){.wrap{width:calc(100% - 36px)}.hero,.feature{grid-template-columns:1fr}.stage{min-height:265px}.stage img{width:min(58%,215px)}.top img{width:120px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.stage{background:radial-gradient(circle at 50% 30%,#fff 0,#dbeaff 64%,#bddeff 100%)}
.stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#4076a9 1px,transparent 1px);background-size:19px 19px;opacity:.18;mask-image:linear-gradient(120deg,#000,transparent)}
.orbit-note{position:absolute;top:12%;right:7%;background:#fff3c1;padding:6px 12px;border-radius:12px;box-shadow:0 4px 12px #112d4e19;font-size:.8rem;font-weight:700;transform:rotate(8deg)}
.reading-loop{padding:0 0 48px}
.reading-loop h2,.demo h2{font-size:clamp(2.2rem,5vw,4rem);margin:0 0 22px}
.reading-loop ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;counter-reset:step;padding:0;margin:0}
.reading-loop li{counter-increment:step;padding:23px;border-radius:18px;background:#e6f2ff}
.reading-loop li:nth-child(2){background:#e7f4ee}
.reading-loop li:nth-child(3){background:#fff2ce}
.reading-loop li::before{content:"0" counter(step);font-weight:750;color:#385879}
.reading-loop h3{font-size:1.5rem;margin:.65rem 0 .5rem}
.reading-loop p{margin:0}
.demo{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;align-items:center;background:#112d4e;color:#fff;border-radius:24px;padding:clamp(20px,4vw,48px);margin-bottom:40px}
.demo .eyebrow{color:#b6dbff}
.quiz-card{background:#f8fbff;color:var(--ink);border-radius:16px;padding:18px}
.quiz-card summary,.quiz-card legend{font-weight:750}
.quiz-card summary{cursor:pointer}
.answers{display:grid;gap:8px;margin-top:8px}
.answers button{text-align:left}
.answers button:hover{background:#e6f2ff}
.answers button[data-result=correct]{background:#ddf5e5;border-color:#277145}
.answers button[data-result=retry]{background:#fff2ce}
#quiz-feedback{min-height:3.2em;margin:8px 0 0}
@media(max-width:680px){.reading-loop ol,.demo{grid-template-columns:1fr}.orbit-note{right:4%;top:10%;font-size:.68rem}}