:root{font-family:Segoe UI,Microsoft YaHei,sans-serif;color:#183149;background:#f6fafc}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 8% 0,#e7f4ff,transparent 30rem),#f7fafc}a{color:inherit}button,select{font:inherit}.skip-link{position:fixed;top:-100px;left:1rem;z-index:99;background:#fff;padding:.8rem}.skip-link:focus{top:1rem}.site-header{min-height:74px;padding:.65rem clamp(1rem,5vw,5rem);display:flex;align-items:center;justify-content:space-between;background:#fffffff2;border-bottom:1px solid #dce9f1;position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.brand{display:flex;gap:.65rem;align-items:center;font-weight:900;text-decoration:none}.brand span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#1479d1;color:#fff;font-size:.72rem}.site-header nav{display:flex;gap:.25rem}.site-header nav a{text-decoration:none;padding:.7rem 1rem;border-radius:99px;font-weight:700;color:#526878;white-space:nowrap}.site-header nav a:hover,.site-header nav a:focus-visible,.site-header nav a[aria-current]{color:#0b67b3;background:#eaf5ff}#main-content{outline:0;min-height:calc(100vh - 160px)}footer{text-align:center;padding:2rem;color:#6b7e8e}.home-hero,.page-intro{text-align:center;padding:clamp(3rem,8vw,6rem) 1rem 2rem}.home-hero h1,.page-intro h1,.coming-soon h1{font-size:clamp(2rem,5vw,4.2rem);margin:.25rem auto 1rem;letter-spacing:-.05em}.home-hero>p:last-child,.page-intro>p:last-child{max-width:650px;margin:auto;color:#617585;line-height:1.8}.eyebrow{font-size:.76rem!important;font-weight:900;letter-spacing:.2em;color:#128061}.carousel{max-width:1160px;margin:auto;padding:0 1rem;position:relative}.slides{border-radius:32px;overflow:hidden;box-shadow:0 24px 60px #365d7a25}.slide{min-height:390px;padding:clamp(2rem,6vw,5rem);color:#fff}.slide>div{max-width:570px}.slide.blue{background:linear-gradient(125deg,#0d67b8,#22a4e1)}.slide.green{background:linear-gradient(125deg,#087b63,#31b97c)}.slide.orange{background:linear-gradient(125deg,#db681a,#f6a12c)}.slide-icon{font-size:3rem}.slide h2{font-size:clamp(2.2rem,6vw,4.5rem);margin:.3rem 0}.slide p{line-height:1.7}.button{min-height:46px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:14px;padding:.75rem 1.15rem;text-decoration:none;font-weight:850;cursor:pointer;transition:.18s}.button:hover:not(:disabled){transform:translateY(-2px)}.button:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #ffb52e;outline-offset:3px}.button.light{background:#fff;color:#1265a6;margin-top:1rem}.button.primary{background:#0c73c6;color:#fff}.button.accent{background:#f08a24;color:#fff}.button.secondary{background:#eaf3f8;color:#294c65}.button.danger{background:#d63645;color:#fff}.button.ghost{background:#fff;border:1px solid #cadbe6}.button.completed{background:#15966d;color:#fff}.button:disabled{opacity:.45;cursor:not-allowed}.carousel-arrow{position:absolute;top:45%;width:48px;height:48px;border-radius:50%;border:0;background:#fff;font-size:2rem;box-shadow:0 8px 24px #23445c33}.carousel-arrow.prev{left:-.5rem}.carousel-arrow.next{right:-.5rem}.dots{display:flex;justify-content:center;gap:.5rem;padding:1rem}.dots button{width:9px;height:9px;padding:0;border:0;border-radius:9px;background:#b5c9d6}.dots button[aria-current]{width:28px;background:#1378c8}.progress-card{max-width:1160px;margin:2rem auto;padding:2rem;display:grid;grid-template-columns:1fr auto auto;gap:2rem;align-items:center;background:#fff;border:1px solid #dceaf1;border-radius:24px}.progress-card strong{color:#0e78c6;font-size:1.4em}.progress-ring{width:100px;height:100px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#1fa77b var(--progress),#e4edf2 0);position:relative}.progress-ring:before{content:"";position:absolute;inset:10px;background:#fff;border-radius:50%}.progress-ring span{z-index:1;font-weight:900}.module-grid,.mode-grid{max-width:1160px;margin:2rem auto 4rem;padding:0 1rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.module-card{min-height:190px;padding:1.5rem;display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;border-radius:24px;background:#fff;text-decoration:none;border:1px solid #dfeaf0}.module-card:hover{transform:translateY(-4px);box-shadow:0 16px 35px #325f7e1c}.module-card>span{font-size:2.4rem}.module-card p,.module-card small{color:#698091}.mode-grid{grid-template-columns:1fr 1fr}.mode-card{padding:2rem;border-radius:28px;background:#fff;border:1px solid #dbe9f0}.mode-card>span{font-size:3rem}.mode-card h2{font-size:2rem}.mode-card p{color:#607686;line-height:1.7}.inline-selects{display:flex;gap:1rem;margin:1.5rem 0}.inline-selects label{display:grid;gap:.4rem;font-weight:700;flex:1}.inline-selects select{min-height:46px;padding:0 .8rem;border:1px solid #bed2df;border-radius:12px;background:#fff}.reader-heading{max-width:1400px;margin:auto;padding:2rem;display:flex;justify-content:space-between;align-items:end}.back-link{color:#0b70bd;font-weight:800;text-decoration:none}.legacy-frame{display:block;width:calc(100% - 2rem);max-width:1440px;height:1200px;margin:0 auto 2rem;border:0;border-radius:24px;background:#eef5f8}.follow-top,.follow-progress,.word-stage,.record-card,.follow-nav,.reset-row{max-width:1050px;margin-left:auto;margin-right:auto}.follow-top{padding:2.5rem 1rem 1rem;display:flex;justify-content:space-between}.follow-context{display:flex;gap:1rem;color:#5f7586}.follow-progress{height:9px;background:#dfeaf0;border-radius:9px;overflow:hidden}.follow-progress span{display:block;height:100%;background:#1da67a}.word-stage{margin-top:1.5rem;padding:clamp(1.5rem,5vw,3.5rem);display:grid;grid-template-columns:260px 1fr;gap:3rem;align-items:center;background:#fff;border:1px solid #dceaf1;border-radius:30px;box-shadow:0 20px 50px #375e7815}.word-art{height:260px;border-radius:26px;background:linear-gradient(145deg,#e5f5ff,#d9f5e9);display:grid;place-items:center}.word-art span{font:700 9rem Georgia;color:#1178c5}.pos-pill{display:inline-block;padding:.4rem .8rem;background:#e6f6ef;color:#087858;border-radius:99px;font-weight:800}.word-content h1{font-size:clamp(3.5rem,9vw,6.5rem);line-height:.95;margin:1rem 0;color:#123d5d;overflow-wrap:anywhere}.big-phonetic{font-size:1.3rem;color:#1276bd}.big-meaning{font-size:1.1rem;line-height:1.7;color:#526c7f}.speech-actions,.record-actions,.follow-nav{display:flex;flex-wrap:wrap;gap:.75rem}.record-card{margin-top:1.25rem;padding:2rem;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2rem;border-radius:26px;background:#fff7ed;border:1px solid #f5d6ad}.record-button{min-width:110px;min-height:90px;border:0;border-radius:18px;background:#f18423;color:#fff;font-size:1.6rem;font-weight:900}.record-button span{display:block;font-size:.85rem}.record-button.recording{background:#d62f44;animation:pulse 1s infinite}.follow-nav{justify-content:space-between;padding:1.5rem 1rem}.reset-row{padding:0 1rem 3rem;display:flex;justify-content:space-between;color:#647c8d}.text-button{border:0;background:transparent;color:#b6333f;text-decoration:underline}.coming-soon,.error-page,.loading{text-align:center;max-width:700px;margin:auto;padding:10vh 1rem}.coming-art{font-size:7rem}.loading span{display:inline-block;width:45px;height:45px;border:5px solid #d8e8f0;border-top-color:#1479c8;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{transform:scale(1.04);box-shadow:0 0 0 10px #d62f4420}}@media(max-width:800px){.site-header{align-items:flex-start}.brand b{display:none}.site-header nav{overflow-x:auto;max-width:calc(100vw - 65px)}.site-header nav a{padding:.65rem .75rem;font-size:.88rem}.progress-card{margin:1rem;grid-template-columns:1fr auto}.progress-card>.button{grid-column:1/-1}.module-grid,.mode-grid{grid-template-columns:1fr}.word-stage{margin:1rem;grid-template-columns:1fr;gap:1.5rem}.word-art{height:180px}.word-art span{font-size:7rem}.record-card{margin:1rem;grid-template-columns:1fr}.follow-progress{margin:0 1rem}.follow-context{flex-direction:column;gap:.25rem;text-align:right}.follow-nav{justify-content:center}.follow-nav .button{flex:1}.reset-row{flex-direction:column;gap:1rem}.legacy-frame{height:1450px}.carousel-arrow.prev{left:1.2rem}.carousel-arrow.next{right:1.2rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}