:root{--deep:#004f43;--teal:#007f70;--lime:#b3fa73;--violet:#7710c8;--paper:#f6faf9;--muted:#58716b}
html{scroll-behavior:smooth}body.lesson-page{background:var(--paper);color:#123a34}body.lesson-page *{box-sizing:border-box}
.lesson-page .brand{color:var(--deep);text-decoration:none}.lesson-page .eyebrow{color:var(--teal);letter-spacing:.17em;font-size:12px;font-weight:800}
.lesson-nav{height:86px;max-width:1360px;margin:auto;padding:0 4%;display:flex;align-items:center;gap:32px}.lesson-nav nav{display:flex;gap:30px;margin:auto}.lesson-nav nav a,.lesson-nav-cta{color:var(--deep);font-size:14px;font-weight:650;text-decoration:none}.lesson-nav nav a:hover,.lesson-nav-cta:hover{text-decoration:underline}.lesson-nav-cta{padding:11px 18px;border:1px solid #b8d6cc;border-radius:100px;white-space:nowrap}
.lesson-hero{min-height:680px;max-width:1360px;margin:auto;padding:70px 4% 95px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.lesson-hero-copy{position:relative;z-index:2}.lesson-hero h1{font-size:clamp(58px,7vw,112px);line-height:.98;letter-spacing:-.075em;color:#063c34;margin:22px 0 32px}.lesson-hero h1 em,.section-heading h2 em,.game-heading h2 em,.lesson-continue h2 em,.lesson-faq h2 em{font-style:normal;color:var(--teal)}.lesson-lead{font-size:clamp(19px,2vw,25px);line-height:1.5;max-width:570px;color:#425f58}.lesson-lead strong{color:var(--deep)}.lesson-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.lesson-button{display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:17px 23px;border-radius:100px;font-weight:750;text-decoration:none;transition:transform .2s,box-shadow .2s}.lesson-button:hover{transform:translateY(-3px)}.lesson-button.primary{background:var(--deep);color:white;box-shadow:0 12px 28px #004f4320}.lesson-button.quiet{color:var(--deep);background:#e5f2eb}.lesson-fine{margin-top:23px;color:#6c817b;font-size:13px}
.lesson-hero-art{height:480px;position:relative;perspective:900px;display:grid;place-items:center;isolation:isolate}.orb{position:absolute;border:1px solid #58ba9450;border-radius:50%;width:82%;height:40%;transform:rotate(-17deg);z-index:-1}.orb-two{width:100%;height:55%;border-color:#a12bee35;transform:rotate(22deg)}.grammar-card{position:absolute;width:min(80%,440px);min-height:225px;border-radius:30px;padding:32px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 30px 55px #004f431d;backface-visibility:hidden}.grammar-card span{letter-spacing:.17em;font-size:13px;font-weight:800}.grammar-card strong{font-size:clamp(32px,3.3vw,52px);letter-spacing:-.04em}.grammar-card small{font-size:16px;font-weight:700}.grammar-card.card-back{background:#dcf7e9;color:#24685e;transform:translate(-58px,-80px) rotate(-13deg) rotateY(-12deg)}.grammar-card.card-front{background:linear-gradient(145deg,#00574b,#003f37);color:white;transform:translate(35px,45px) rotate(7deg) rotateY(-9deg);animation:hero-card-in .8s cubic-bezier(.2,.8,.2,1) both}.grammar-card i{font-style:normal;color:var(--lime)}.grammar-card.card-front small{color:var(--lime)}.lesson-spark{position:absolute;color:var(--violet);font-size:58px}.spark-one{top:30px;right:20px}.spark-two{bottom:20px;left:30px;color:#46c591}
.lesson-rule,.game-section,.lesson-continue,.lesson-faq{max-width:1360px;margin:auto;padding:90px 4%}.lesson-rule,.lesson-faq{border-top:1px solid #d7e7de}.section-heading h2,.game-heading h2,.lesson-continue h2,.lesson-faq h2{font-size:clamp(42px,5vw,72px);line-height:1.05;letter-spacing:-.06em;color:var(--deep);margin:14px 0 18px}.section-heading>p:last-child,.game-heading>p:last-child{color:var(--muted);font-size:19px;max-width:650px;line-height:1.55}.rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:45px}.rule-grid article{background:white;border:1px solid #d6e8df;border-radius:26px;padding:30px;box-shadow:0 12px 25px #004f4309}.rule-number{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#e5f9df;color:var(--deep);font-weight:800}.rule-grid h3{font-size:26px;letter-spacing:-.04em;margin:24px 0 12px;color:var(--deep)}.rule-grid p{line-height:1.65;color:#425e57;margin:0}.contrast{margin-top:18px;background:#efe7fa;border-radius:25px;padding:26px 30px}.contrast>span{font-size:12px;font-weight:800;letter-spacing:.14em;color:#6620a4}.contrast p{margin:12px 0;font-size:20px}.contrast mark{background:#d9f9ab;color:var(--deep);padding:0 4px;border-radius:4px}.contrast small{display:block;color:#5f5570;line-height:1.5;margin-top:16px}
.game-section{padding-top:105px;padding-bottom:105px;background:radial-gradient(circle at 12% 30%,#d7f9e1,transparent 37%),radial-gradient(circle at 88% 75%,#eee1ff,transparent 34%)}.game-heading{text-align:center;max-width:850px;margin:auto}.game-heading>p:last-child{margin:0 auto 38px}.game-shell{max-width:700px;margin:auto;padding:18px;background:white;border:1px solid #cce3d6;border-radius:30px;box-shadow:0 34px 70px #004f431b}.game-top{display:flex;justify-content:space-between;gap:12px;padding:8px 12px 16px;color:var(--deep);font-size:12px;font-weight:800;letter-spacing:.1em}.progress-track{height:10px;background:#e6eee8;border-radius:20px;overflow:hidden}.progress-track>span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--teal),var(--lime));border-radius:20px;transition:width .4s}.game-card{min-height:380px;padding:34px 20px 22px}.game-count{color:#758a80;font-size:13px;font-weight:800;letter-spacing:.08em}.game-card h3{font-size:clamp(26px,4vw,38px);line-height:1.2;letter-spacing:-.04em;color:var(--deep);margin:18px 0 10px}.game-prompt{font-size:17px;color:#5f766d;margin:0 0 22px}.answers{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.answer{font:inherit;text-align:left;background:#f7fbf8;border:2px solid #dbe9df;border-radius:17px;padding:17px 18px;font-size:20px;font-weight:750;color:var(--deep);cursor:pointer;transition:transform .15s,border-color .15s,background .15s}.answer:hover:not(:disabled),.answer:focus-visible{transform:translateY(-2px);border-color:var(--teal);outline:none}.answer:disabled{cursor:default}.answer.correct{background:#e4f9d9;border-color:#51bb72}.answer.wrong{background:#fff0ef;border-color:#ef918b}.feedback{margin-top:18px;border-radius:17px;padding:17px 19px;line-height:1.5}.feedback.good{background:#e6f8df;color:#0a5946}.feedback.retry{background:#fff1e9;color:#674834}.feedback strong{display:block;margin-bottom:4px}.game-next,.game-retry,.share-button{font:inherit;cursor:pointer;border:0;border-radius:100px;padding:13px 20px;background:var(--deep);color:white;font-weight:800;margin-top:16px}.game-retry{background:#7040a2}.game-note{text-align:center;font-size:13px;color:#667b72;margin-top:17px}.result-card{padding:36px 22px;text-align:center}.result-card[hidden]{display:none}.result-medal{font-size:70px;line-height:1}.result-card h3{font-size:clamp(31px,5vw,48px);letter-spacing:-.05em;color:var(--deep);margin:15px 0}.result-card p{color:#526c62;line-height:1.55}.result-number{font-size:26px;font-weight:850;color:var(--violet)}.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.result-actions button{margin-top:12px}.result-actions .secondary{background:#e9f3ec;color:var(--deep)}.share-status{font-size:13px;min-height:24px}
.lesson-continue{display:grid;grid-template-columns:1.2fr .8fr;gap:45px;align-items:center}.lesson-continue p:not(.eyebrow){max-width:650px;color:#526b62;line-height:1.65;font-size:18px}.lesson-continue .lesson-button{margin-top:14px}.continue-sentence{padding:35px;border-radius:24px;background:linear-gradient(140deg,#41206e,#7611bd);color:white;transform:rotate(3deg);box-shadow:15px 18px 0 #d9f9b4}.continue-sentence span{font-size:12px;letter-spacing:.15em;font-weight:800;color:#d8bef3}.continue-sentence p{color:white!important;font-size:30px!important;font-weight:750;line-height:1.25!important}.continue-sentence s{opacity:.55}.continue-sentence strong{color:var(--lime)}.continue-sentence small{color:#e4d4f1}
.lesson-faq{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px}.lesson-faq details{border-bottom:1px solid #c9dfd3;padding:23px 0}.lesson-faq summary{cursor:pointer;color:var(--deep);font-weight:750;font-size:20px}.lesson-faq details p{line-height:1.6;color:#557168}.lesson-footer{max-width:1360px;margin:auto;padding:40px 4%;display:flex;align-items:center;gap:30px;border-top:1px solid #cddfd5;color:#5b776c}.lesson-footer span{margin:auto}.lesson-footer a:last-child{color:var(--deep)}
.lesson-teaser{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;border-top:1px solid var(--line)}.lesson-teaser h2{font-size:clamp(38px,5vw,68px);letter-spacing:-.06em;color:var(--ink)}.lesson-teaser h2 em{font-style:normal;color:#007f70}.lesson-teaser p:not(.eyebrow){color:#637b70;font-size:19px;line-height:1.5;max-width:560px}.lesson-teaser .button{margin-top:15px}.lesson-teaser-card{background:linear-gradient(130deg,#004f43,#007f70);border-radius:25px;padding:30px;color:white;box-shadow:15px 17px 0 #d4f7b9;transform:rotate(3deg);display:grid;gap:23px}.lesson-teaser-card span{letter-spacing:.15em;font-size:12px;font-weight:800;color:#b3fa73}.lesson-teaser-card strong{font-size:clamp(24px,3vw,39px)}.lesson-teaser-card mark{background:#b3fa73;color:#004f43;border-radius:4px}.lesson-teaser-card small{color:#d4f6df}
@keyframes hero-card-in{from{opacity:0;transform:translate(35px,95px) rotate(16deg) rotateY(-20deg)}to{opacity:1;transform:translate(35px,45px) rotate(7deg) rotateY(-9deg)}}
@media(max-width:780px){.lesson-nav{height:70px;padding:0 5%}.lesson-nav nav{display:none}.lesson-nav-cta{margin-left:auto;font-size:12px;padding:9px 11px}.lesson-hero{grid-template-columns:1fr;min-height:0;padding:45px 5% 55px;gap:0}.lesson-hero-art{height:315px;margin-top:16px}.grammar-card{min-height:170px;padding:24px;width:75%}.grammar-card.card-back{transform:translate(-35px,-43px) rotate(-13deg)}.grammar-card.card-front{transform:translate(20px,34px) rotate(7deg)}.grammar-card strong{font-size:34px}.lesson-rule,.game-section,.lesson-continue,.lesson-faq{padding:70px 5%}.rule-grid{grid-template-columns:1fr}.lesson-continue,.lesson-faq,.lesson-teaser{grid-template-columns:1fr}.continue-sentence{margin:15px 12px}.lesson-footer{padding:30px 5%;flex-wrap:wrap}.lesson-footer span{margin:0}.lesson-teaser-card{max-width:450px}.game-card{padding:25px 8px 18px;min-height:340px}}
@media(max-width:480px){.lesson-hero h1{font-size:58px}.lesson-hero-art{height:290px}.grammar-card{width:80%;min-height:150px}.grammar-card strong{font-size:30px}.grammar-card.card-front{animation:none;transform:translate(20px,34px) rotate(7deg)}.answers{grid-template-columns:1fr}.answer{font-size:19px;padding:13px 17px}.game-card h3{font-size:27px}.game-shell{padding:12px}.game-top{font-size:11px}.lesson-continue .continue-sentence p{font-size:25px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.grammar-card.card-front{animation:none}.lesson-button,.answer,.progress-track>span{transition:none}}
.lesson-hero h1 em{display:inline;margin-left:.12em}
.lesson-hero h1 .hero-last{display:block}

/* Shared typography for all grammar lessons. */
.lesson-fine,.game-note{color:#4b6258;font-size:14px}
.game-count{color:#465f54;font-size:14px}
.game-prompt{color:#465f54}
.lesson-footer{color:#465f54}
.lesson-footer span,.lesson-footer a{font-size:14px}
.game-top{font-size:13px}
@media(max-width:760px){.lesson-hero-copy,.lesson-hero-art{min-width:0}.lesson-hero h1{overflow-wrap:anywhere}.lesson-hero h1 .hero-last{overflow-wrap:anywhere}}
@media(max-width:570px){.lesson-hero-art{overflow-x:clip}.lesson-faq{grid-template-columns:minmax(0,1fr)}.lesson-faq>*{min-width:0}.lesson-faq h2{overflow-wrap:anywhere}}