:root{
  --ink:#172033;--muted:#69758c;--line:#e4e9f2;--bg:#f6f8fc;--card:#fff;
  --primary:#356ae6;--primary-dark:#2554c7;--primary-soft:#edf3ff;--teal:#20a58e;
  --orange:#f59e45;--danger:#dc5d63;--shadow:0 10px 32px rgba(25,42,78,.08)
}
*{box-sizing:border-box}html{background:var(--bg)}
body{margin:0;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","SF Pro Text","Segoe UI",sans-serif;color:var(--ink);line-height:1.45}
button{font:inherit;color:inherit}button:focus-visible{outline:3px solid rgba(53,106,230,.24);outline-offset:2px}
.sidebar{position:fixed;inset:0 auto 0 0;width:216px;padding:28px 18px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:20}
.brand{display:flex;align-items:center;gap:11px;margin:0 6px 34px}.brand-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#477cf0,#2f61d5);color:#fff;font-weight:850;font-size:21px;box-shadow:0 8px 18px rgba(53,106,230,.22)}.brand b,.brand small{display:block}.brand b{font-size:16px}.brand small{margin-top:2px;color:var(--muted);font-size:11px}
.sidebar nav{display:flex;flex-direction:column;gap:7px}.nav{position:relative;border:0;background:transparent;border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;color:#5c687e;font-weight:650}.nav:hover{background:#f4f7fc;color:var(--ink)}.nav.active{background:var(--primary-soft);color:var(--primary)}.nav em{position:absolute;right:12px;top:50%;transform:translateY(-50%);min-width:21px;height:21px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:#e6ebf5;color:#667189;font-size:11px;font-style:normal}.nav.active em{background:#d5e2ff;color:#2857c4}
.main{margin-left:216px;min-height:100vh;padding:28px}.view{display:none;max-width:1280px;margin:0 auto}.view.active{display:block}.card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.clean-home{min-height:300px;padding:42px 48px;display:flex;align-items:center;justify-content:space-between;gap:40px;background:linear-gradient(128deg,#fff 0 55%,#eef4ff 100%);overflow:hidden;position:relative}.clean-home:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-90px;top:-150px;background:rgba(53,106,230,.07)}.hero-copy{max-width:660px;position:relative;z-index:1}.hero-tag{display:inline-block;color:var(--primary);background:var(--primary-soft);border-radius:999px;padding:7px 11px;font-size:11px;font-weight:800;letter-spacing:.08em}.hero h1{font-size:38px;line-height:1.15;margin:20px 0 12px;letter-spacing:-.03em}.hero p{max-width:600px;color:var(--muted);font-size:16px;margin:0}.hero-actions{display:flex;gap:10px;margin-top:28px}.hero-summary{width:220px;min-width:220px;padding:28px;border:1px solid #dbe5fb;border-radius:20px;background:rgba(255,255,255,.72);text-align:center;position:relative;z-index:1}.hero-summary>span,.hero-summary>small{display:block;color:var(--muted)}.hero-summary>b{display:block;font-size:48px;line-height:1.05;color:var(--primary);margin:7px 0}.summary-books{display:flex;gap:6px;justify-content:center;margin-top:18px}.summary-books i{font-style:normal;font-size:11px;padding:5px 8px;border-radius:999px;background:#edf3ff;color:#3967cf}
button.primary,button.secondary{border-radius:12px;padding:11px 20px;cursor:pointer;font-weight:750}.primary{border:1px solid var(--primary);background:var(--primary);color:#fff;box-shadow:0 7px 16px rgba(53,106,230,.18)}.primary:hover{background:var(--primary-dark)}.secondary{border:1px solid var(--line);background:#fff}.secondary:hover{background:#f7f9fc}.secondary span{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:999px;margin-left:4px;background:#edf1f8;color:#5f6b82;font-size:11px}
.section-title{display:flex;align-items:center;justify-content:space-between;font-size:18px;font-weight:780;margin:24px 0 12px}.link{border:0;background:transparent;color:var(--primary);cursor:pointer}.books-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.book{position:relative;padding:21px;border-radius:17px;border:1px solid var(--line);background:#fff;box-shadow:0 4px 14px rgba(25,42,78,.04)}.book:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0;background:var(--primary)}.book.green:before{background:var(--teal)}.book.orange:before{background:var(--orange)}.book h3{margin:0 0 3px;font-size:19px}.book p,.book small{color:var(--muted)}.book .bar{height:6px;background:#eef1f6;border-radius:99px;margin-top:15px;overflow:hidden}.book .bar i{display:block;height:100%;border-radius:99px;background:var(--primary)}.books-grid.large .book{min-height:155px;cursor:pointer}.books-grid.large .book:hover{border-color:#bfcdf0;transform:translateY(-1px)}
.page-head{display:flex;justify-content:space-between;align-items:center;margin:4px 0 20px}.page-head h1{font-size:28px;margin:0 0 4px;letter-spacing:-.02em}.page-head p{margin:0;color:var(--muted)}.unit-panel{padding:22px;margin-top:20px}.unit-panel h2{margin-top:0}.unit-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.unit-btn{border:1px solid var(--line);background:#fff;border-radius:13px;padding:14px;text-align:left;cursor:pointer}.unit-btn:hover{border-color:#b4c7f4;background:#f8faff}.unit-btn span,.unit-btn small{color:var(--muted)}
.topbar{height:54px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:14px}.topbar>span{text-align:right;color:var(--muted);font-size:13px}.back{width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:11px;cursor:pointer}.learn-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:14px}.word-card,.related-card{padding:24px}.word-hero{display:flex;align-items:center;gap:22px;min-height:150px}.emoji{width:124px;height:124px;min-width:124px;border-radius:22px;background:#f1f5ff;display:grid;place-items:center;font-size:68px}.word-copy{min-width:0}.word-hero h1{font-size:42px;margin:0;overflow-wrap:anywhere}.word-hero p{margin:7px 0}.word-copy #ipa{color:var(--primary)}.word-copy #meaning{color:#4d5870}.word-mask-wrap{position:relative;display:inline-block;min-width:150px}.word-mask{display:none;position:absolute;inset:-6px -10px;border-radius:12px;background:#e9edf5;color:#788397;align-items:center;justify-content:center;font-size:14px;font-weight:750;letter-spacing:.08em;z-index:3}.action-row{display:flex;gap:8px;margin:18px 0;flex-wrap:wrap}.soft,.vocab-toggle{border:1px solid #dce4f1;background:#f8faff;color:#3f5f9f;padding:9px 13px;border-radius:11px;cursor:pointer;font-size:13px}.soft:hover,.vocab-toggle:hover{background:#eef3fc}.vocab-toggle{margin-left:auto;background:#fff8ea;border-color:#f0d49b;color:#98651e}.vocab-toggle.active{background:#fff0cc;border-color:#e6bc65;color:#80510e}.cover-btn.active,.dictation-cover-btn.running{background:#e9effd;border-color:#aac0f2;color:#2856b9}.audio-status{display:none}.analysis-box{padding:16px;background:#f7f9fc;border:1px solid var(--line);border-radius:15px}.analysis-box h3{margin:0 0 12px;font-size:15px}.break{font-size:17px;font-weight:750}.piece{display:inline-block;background:#fff;border:1px solid #dce4f2;border-radius:9px;padding:6px 10px;margin:2px}.rule-badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}.rule-badges span{background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:13px}
.related-card>h3{font-size:20px;margin:0 0 4px}.muted{color:var(--muted)}.related-card>p.muted{font-size:13px;margin:0 0 14px}.natural-phonics{padding:15px;border-radius:15px;background:#eff8f6;border:1px solid #cfe9e3;margin-bottom:14px}.phonics-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.phonics-head b{font-size:14px}.phonics-head span{font-size:11px;color:#288772;background:#ddf2ed;border-radius:999px;padding:4px 8px}.phonics-rows{display:flex;gap:7px;flex-wrap:wrap}.phonics-chip{display:flex;align-items:center;gap:7px;border:1px solid #cfe4df;background:#fff;border-radius:10px;padding:8px 10px}.phonics-chip strong{font-size:16px;color:#146b5a}.phonics-chip i{font-style:normal;color:#81908d}.phonics-chip small{color:#4f6661}.phonics-note{font-size:12px;color:#5c716d;margin:10px 0 0}
#memoryHelp{display:flex;flex-direction:column;gap:11px}.memory-method{display:flex;align-items:center;gap:8px}.memory-method span{font-size:11px;color:var(--muted)}.memory-method b{font-size:11px;padding:4px 8px;border-radius:999px;background:var(--primary-soft);color:#4668b5}.memory-parts{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.memory-piece{border:1px solid #dce4f2;background:#fff;border-radius:11px;padding:8px 11px;color:#26334c;display:flex;gap:5px;align-items:center}.memory-piece small{display:block;color:var(--muted);font-weight:400;margin-left:3px}.plus{font-weight:800;color:#98a1b2}.memory-tip{background:#fff9ed;border:1px solid #f0dfb7;padding:11px 13px;border-radius:12px;line-height:1.6;margin:0;font-size:13px}.memory-replay{align-self:stretch;border-radius:11px!important;padding:10px!important}.syllable-help,.sound-borrow,.rhyme-family{padding:12px;border:1px solid var(--line);border-radius:12px;background:#f8faff}.syllable-row,.borrow-words{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.syllable-row button,.borrow-words button,.rhyme-family button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 9px}.example{margin-top:16px;padding:15px;background:#f8faff;border:1px solid var(--line);border-radius:14px;position:relative;overflow:hidden}.example-head{display:flex;justify-content:space-between;align-items:center}.example p{margin:6px 0}.example p:last-child{color:var(--muted)}.speaker{border:0;background:#eaf0fd;width:32px;height:32px;border-radius:50%;cursor:pointer}
.spell-card{grid-column:1/-1;padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.letters{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}.letter{width:43px;height:50px;border:1px solid #dce3ee;border-radius:9px;background:#fff;display:grid;place-items:center;font-size:20px;font-weight:750;box-shadow:0 2px 7px rgba(30,48,83,.06)}.handwrite{border-left:1px solid var(--line);padding-left:20px;position:relative;overflow:hidden;min-width:0}.hw-head{display:flex;justify-content:space-between}.hw-head span{color:var(--muted);font-size:12px}canvas{touch-action:none}.handwrite canvas,.paper{display:block;width:100%!important;height:150px!important;border:1px solid #dce3ee;border-radius:13px;margin-top:12px;background:repeating-linear-gradient(to bottom,#fff 0,#fff 36px,#e5eaf2 37px,#fff 38px);cursor:crosshair}#pad,#dictPad{width:100%;height:100%}.pad-actions,.dict-actions,.bottom-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:10px;position:relative;z-index:5}.pad-actions button,.dict-actions button,.bottom-actions button{border:1px solid var(--line);background:#fff;border-radius:11px;padding:9px 17px;cursor:pointer}.bottom-actions{justify-content:space-between}.bottom-actions button{min-width:120px}.bottom-actions button:disabled{opacity:.45;cursor:not-allowed}
.wordbook-total{padding:8px 13px;border-radius:999px;background:var(--primary-soft);color:#52678e;font-size:13px}.wordbook-total b{color:var(--primary)}.wordbook-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.wordbook-item{display:grid;grid-template-columns:1fr auto;gap:12px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 4px 15px rgba(25,42,78,.04)}.wordbook-word{border:0;background:transparent;text-align:left;cursor:pointer;padding:0}.wordbook-word b{display:block;font-size:22px;color:#243559}.wordbook-word span{display:block;color:var(--muted);margin-top:3px}.wordbook-word small{display:block;color:#8a94a7;margin-top:8px}.remove-word{align-self:center;border:1px solid #f0d8da;background:#fff7f7;color:#a64a50;border-radius:10px;padding:8px 11px;cursor:pointer}.empty-wordbook{grid-column:1/-1;padding:60px 20px;text-align:center;border:1px dashed #cfd8e7;border-radius:18px;background:#fff}.empty-wordbook span{display:block;font-size:38px}.empty-wordbook h3{margin:12px 0 5px}.empty-wordbook p{color:var(--muted);margin:0 0 18px}
.word-card.is-covered .word-mask,#learn.full-cover .word-mask{display:flex}.word-card.is-covered #wordText,#learn.full-cover #wordText,#learn.full-cover #ipa{visibility:hidden!important}.dictation-mode #ipa,.dictation-mode .spelling-clue{filter:blur(10px);opacity:.2;pointer-events:none;user-select:none}.dictation-mode .word-mask{display:flex}.dictation-mode #wordText{visibility:hidden}
#learn.full-cover #analysisBox,#learn.full-cover #spellingTiles,#learn.full-cover #memoryHelp,#learn.full-cover #naturalPhonics,#learn.full-cover .related-card>h3,#learn.full-cover .related-card>p.muted,#learn.full-cover .example-content{position:relative;filter:blur(11px);opacity:.11;pointer-events:none;user-select:none}
#learn.full-cover #analysisBox::after,#learn.full-cover #spellingTiles::after,#learn.full-cover #memoryHelp::after,#learn.full-cover #naturalPhonics::after,#learn.full-cover .example::after{content:'已遮盖 · 先回忆再查看';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;filter:none!important;opacity:1!important;background:#eef1f6;border:1px dashed #cbd3df;border-radius:13px;color:#788397;font-weight:750;font-size:13px;z-index:20}.example::after{display:none!important}#learn.full-cover .example::after{display:flex!important}#learn.full-cover .example-head{position:relative;z-index:21}#learn.full-cover #speakExample{visibility:hidden}
.relation-demo,.quiz,.table-card,.sound-card,.dictation,.parent-grid .card{padding:22px}.relation-demo,.quiz{margin-bottom:14px}.relation-chain{display:flex;justify-content:center;align-items:center;gap:20px}.relation-chain span{min-width:140px;text-align:center;padding:18px;border-radius:14px;background:#f5f7fb;font-weight:750}.relation-chain .current{background:var(--primary-soft);border:1px solid #b9caf1}.sentence{font-size:24px}.quiz-buttons{display:flex;gap:12px}.quiz-buttons button{min-width:120px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px}.table-card{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px;border-bottom:1px solid var(--line)}th{color:var(--muted);font-size:12px}.sound-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.sound-card .sound{font-size:28px;font-weight:800}.sound-card .examples{display:flex;gap:7px;flex-wrap:wrap}.sound-card .examples button{border:0;background:#f1f4f9;border-radius:9px;padding:7px 9px}.dictation{max-width:700px;margin:38px auto;text-align:center}.big-sound{margin:auto;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft);font-size:28px;cursor:pointer}.paper{height:270px!important}.dict-actions{justify-content:center}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metric{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px;box-shadow:var(--shadow)}.metric small{display:block;color:var(--muted)}.metric b{font-size:27px;margin-right:4px}.metric span{color:var(--muted)}.parent-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:14px}.radar-shape{height:240px;position:relative;display:grid;place-items:center}.radar-shape i{width:150px;height:150px;background:linear-gradient(145deg,rgba(53,106,230,.2),rgba(32,165,142,.25));clip-path:polygon(50% 0,95% 35%,80% 90%,20% 90%,5% 35%)}.radar-shape span{position:absolute;font-size:12px}.radar-shape span:nth-child(1){top:0}.radar-shape span:nth-child(2){right:5%;top:30%}.radar-shape span:nth-child(3){right:12%;bottom:8%}.radar-shape span:nth-child(4){left:12%;bottom:8%}.radar-shape span:nth-child(5){left:4%;top:30%}.top5 li{padding:11px;border-bottom:1px solid var(--line)}.top5 em{float:right;color:var(--danger);font-style:normal}
@media(max-width:980px){.sidebar{width:78px;padding:20px 10px}.brand{margin:0 auto 30px}.brand>div:last-child,.nav span{display:none}.nav{text-align:center;font-size:18px}.nav em{right:3px;top:5px;transform:none}.main{margin-left:78px;padding:18px}.learn-grid{grid-template-columns:1fr}.spell-card{grid-column:auto}.books-grid,.sound-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.sidebar{inset:auto 0 0;width:100%;height:66px;padding:7px;border-right:0;border-top:1px solid var(--line)}.brand{display:none}.sidebar nav{flex-direction:row;justify-content:space-around}.nav{padding:10px 16px}.nav span{display:inline;font-size:13px}.nav em{right:4px;top:2px}.main{margin:0 0 66px;padding:12px}.clean-home{padding:25px;display:block}.hero h1{font-size:29px}.hero-summary{width:100%;margin-top:25px;padding:20px}.hero-actions{flex-wrap:wrap}.books-grid,.unit-list,.wordbook-list,.metrics,.parent-grid,.sound-grid,.spell-card{grid-template-columns:1fr}.word-card,.related-card{padding:17px}.word-hero{gap:14px}.emoji{width:84px;height:84px;min-width:84px;font-size:46px}.word-hero h1{font-size:32px}.action-row{align-items:stretch}.vocab-toggle{margin-left:0}.handwrite{border-left:0;border-top:1px solid var(--line);padding:17px 0 0}.topbar{grid-template-columns:52px 1fr auto}.topbar b{text-align:left}.page-head{align-items:flex-start}.relation-chain{gap:7px}.relation-chain span{min-width:85px;padding:10px;font-size:13px}}
:root{--browse-nav-left:216px;--browse-nav-bottom:0px}
#learn{padding-bottom:110px}
#learn .bottom-actions{position:fixed;left:var(--browse-nav-left);right:0;bottom:var(--browse-nav-bottom);z-index:40;margin:0;padding:12px 24px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -4px 20px #1720330a;align-items:center}
#learn .bottom-actions button{min-height:48px;touch-action:manipulation}
#learn .bottom-actions .primary{background:var(--primary);color:white}
#browseProgress{color:var(--muted);font-variant-numeric:tabular-nums}
.related-memory{display:flex;gap:8px;flex-wrap:wrap}.related-memory button{border:1px solid var(--line);background:#f8faff;border-radius:12px;padding:10px 14px;text-align:left;cursor:pointer}.related-memory b,.related-memory small{display:block}.related-memory small{color:var(--muted);margin-top:3px}
@media(max-width:980px){:root{--browse-nav-left:78px}}
@media(max-width:680px){:root{--browse-nav-left:0px;--browse-nav-bottom:66px}#learn .bottom-actions{padding:10px 12px}#learn .bottom-actions button{min-width:106px}#learn{padding-bottom:90px}}