:root{--navy:#07334a;--orange:#ff8519;--paper:#faf8f3;--muted:#566873;--line:#dbe1df}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--paper);color:var(--navy);font-family:Arial,Helvetica,sans-serif;line-height:1.6}header,main,footer{max-width:1200px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:27px 40px}.brand{font-size:23px;font-weight:800;line-height:1.05;text-decoration:none;letter-spacing:-.8px}.brand span{display:block;font-size:9px;letter-spacing:1.8px;margin-top:12px}.toplink{font-size:14px}a{color:inherit}.hero{background:var(--navy);color:white;padding:68px;display:grid;grid-template-columns:1.3fr .7fr;gap:70px;align-items:center;border-radius:8px}.hero img{width:100%;transform:rotate(3deg);box-shadow:0 20px 50px #001d2b;border:1px solid #ffffff30}.eyebrow{font-size:11px;letter-spacing:2.3px;font-weight:700}h1{font-size:clamp(60px,7vw,91px);letter-spacing:-5px;line-height:1.02;margin:25px 0}h1 em{color:var(--orange);font-style:normal}.intro{font-size:20px;max-width:460px;color:#e1e9ed}.button{display:inline-flex;gap:40px;align-items:center;background:var(--orange);color:#082e40;padding:15px 24px;border-radius:4px;font-weight:bold;text-decoration:none;border:none;font-size:16px;cursor:pointer}.small{font-size:12px;opacity:.8}h2{font-size:36px;line-height:1.16;letter-spacing:-1.3px;margin:12px 0 26px}.how{padding:65px 60px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.steps b{font-size:16px}.steps p{color:var(--muted);font-size:15px}.note{background:#fff0dd;border-left:3px solid var(--orange);padding:14px 18px;font-size:13px;margin-top:28px}#lessons{padding:0 30px 50px}.sectionhead{display:flex;align-items:center;justify-content:space-between}.sectionhead span{font-size:12px;white-space:nowrap}.workspace{display:grid;grid-template-columns:240px 1fr;gap:35px}aside button{display:block;background:none;border:0;border-left:2px solid var(--line);padding:13px 15px;text-align:left;width:100%;font-size:14px;color:var(--muted);cursor:pointer}aside button.active{border-color:var(--orange);background:#f1ede4;color:var(--navy);font-weight:bold}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px}article{background:white;border:1px solid var(--line);padding:35px;border-radius:7px}article h2{font-size:32px}article p{font-size:16px}.badge{font-size:11px;letter-spacing:1.5px;color:#87603c;font-weight:bold}.fix{padding:20px;background:#f4f6f4;border-left:3px solid var(--orange);margin:23px 0}.fix p{margin:6px 0 0}.subhead{margin:32px 0 12px;font-size:20px}.voice{display:flex;justify-content:space-between;align-items:center;gap:15px;border-bottom:1px solid var(--line);padding-bottom:15px}select{padding:9px;border:1px solid var(--line);background:white;border-radius:4px;font-size:14px;color:var(--navy);max-width:100%}.items{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}.sample{padding:16px 12px;background:#f8f9f6;border:1px solid var(--line);border-radius:4px}.sample span[lang]{display:block;font-size:20px;margin-bottom:10px}.sample.sentence{margin:10px 0}.sample.sentence span[lang]{font-size:19px}.play{background:white;border:1px solid #a7b7bd;color:var(--navy);padding:7px 10px;border-radius:4px;font-size:12px;cursor:pointer}.play:disabled{opacity:.55;cursor:default}.pending{display:block;color:#69777c;font-size:11px;margin-top:6px}.recorder{background:#edf3f5;padding:23px;margin-top:25px;border-radius:5px}.recorder p{font-size:14px}.controls{display:flex;gap:10px;flex-wrap:wrap}.secondary{background:white;border:1px solid #a7b7bd;border-radius:4px;padding:11px 16px;font-size:14px;color:var(--navy);cursor:pointer}.danger{background:#a62730;color:white}.recording{color:#a62730;font-weight:bold}.recordings{margin-top:15px}.take{margin-top:14px}.take label{display:block;font-size:12px}audio{width:100%;margin:5px 0}.cue{font-size:14px;padding:10px 0}.lessonfooter{display:flex;justify-content:space-between;gap:10px;margin-top:25px;flex-wrap:wrap}.finish{text-align:center;background:var(--navy);color:white;padding:65px 25px;border-radius:7px}.finish p{max-width:560px;margin:20px auto}.production{margin:35px 30px;font-size:14px;border:1px solid var(--line);padding:18px}summary{cursor:pointer;font-weight:bold}footer{padding:25px 35px;font-size:12px;display:flex;justify-content:space-between}.nav{display:none}@media(max-width:760px){header{padding:22px}.toplink{font-size:11px}.hero{margin:0 12px;padding:35px 25px;gap:25px;grid-template-columns:1fr}.hero img{max-width:190px;justify-self:center;display:none}h1{font-size:66px;letter-spacing:-3px}.intro{font-size:18px}.how{padding:35px 25px}.steps{grid-template-columns:1fr;gap:8px}.steps p{margin:5px 0 15px}h2{font-size:29px}.workspace{display:block}aside{display:none}#lessons{padding:0 12px 25px}.sectionhead{padding:0 10px;gap:15px}article{padding:24px 19px}article h2{font-size:29px}.nav{display:block;margin:0 0 15px}.nav select{width:100%}.items{gap:6px}.sample{padding:12px 7px}.sample span[lang]{font-size:16px}.voice{align-items:flex-start;flex-direction:column}.finish{margin:0 12px;padding:40px 22px}footer{gap:15px;flex-wrap:wrap}.sectionhead span{font-size:10px}.button{gap:18px}}
.hero h1{font-size:clamp(44px,5.2vw,66px);letter-spacing:-2.8px;line-height:1.06;max-width:600px}.brand span{letter-spacing:1.2px}@media(max-width:760px){.hero h1{font-size:48px;letter-spacing:-2px}.brand span{font-size:8px}}

.brand-logo{display:block;width:230px;height:auto}.brand span{text-align:center}@media(max-width:760px){.brand-logo{width:190px}}

.voice-buttons{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.voice-buttons .play{min-height:40px;font-size:14px;padding:7px 10px;white-space:nowrap}.voice-buttons .play:not(:first-child){min-width:44px}.voice-buttons .play:hover{background:#fff0dd;border-color:var(--orange)}@media(max-width:760px){.items{grid-template-columns:1fr}.sample{padding:16px}.sample span[lang]{font-size:20px}.voice-buttons{gap:8px}.voice-buttons .play{min-height:44px;padding:8px 14px}}

.finish{display:grid;grid-template-columns:minmax(230px,360px) minmax(0,1fr);gap:50px;align-items:center;text-align:left;padding:60px}.cta-photo{display:block;width:100%;aspect-ratio:1;height:auto;object-fit:cover;object-position:left center;border-radius:22px}.finish p{margin:20px 0}.finish h2{font-size:36px}@media(max-width:760px){.finish{grid-template-columns:1fr;gap:28px;padding:35px 25px;text-align:center}.cta-photo{width:min(100%,280px);justify-self:center;border-radius:18px}.finish p{margin:20px auto}.finish h2{font-size:29px}}
