:root{--paper:#f8f5ec;--cream:#f1ede2;--white:#fffefb;--ink:#233a3b;--muted:#697b78;--jade:#295b52;--dark:#183e39;--orange:#dc8d50;--line:#e5e4d8;--shadow:0 16px 40px rgba(36,65,56,.06);--radius:20px;scroll-behavior:smooth}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #e6a06f;outline-offset:3px}[hidden]{display:none!important}.wrap{width:min(1180px,calc(100% - 56px));margin:auto}.site-shell{overflow:clip}.site-header{background:rgba(248,245,236,.94);position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(45,76,69,.09);backdrop-filter:blur(16px)}.header-inner{height:90px;display:flex;align-items:center;gap:30px}.brand{border:0;background:none;display:flex;align-items:center;text-align:left;gap:12px;color:var(--dark);padding:0}.brand-mark{width:46px;height:46px;display:grid;place-items:center;background:var(--dark);border-radius:15px;color:#fff8e9;font-family:'Noto Serif SC',serif;font-size:26px;line-height:1}.brand-copy{display:flex;flex-direction:column;line-height:1.25}.brand-copy strong{font-size:24px;letter-spacing:-1.2px;font-weight:800}.brand-dot,.footer-brand span{color:var(--orange)}.brand-copy small{font-size:9px;letter-spacing:2px;font-weight:700;margin-top:3px;color:#77908a}.desktop-nav{display:flex;align-items:center;gap:6px;margin:auto}.nav-link{border:0;background:transparent;padding:10px 14px;color:#6e7b79;border-radius:999px;font-weight:600;font-size:12px}.nav-link:hover,.nav-link.active{color:var(--jade);background:#e5ece3}.header-right{display:flex;align-items:center}.edition-pill{border:1px solid #d7dfd2;background:#eaf0e7;border-radius:999px;padding:8px 13px;color:#456b5e;font-size:11px;font-weight:700;white-space:nowrap}.edition-dot{display:inline-block;height:7px;width:7px;border-radius:50%;background:#75a685;margin-right:6px}
.hero{min-height:470px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:24px;padding:70px 0 50px}.eyebrow,.section-kicker{display:inline-block;color:#a57847;font-size:10px;font-weight:800;letter-spacing:2.2px}.eyebrow{display:flex;align-items:center;gap:12px}.eyebrow-line{width:27px;height:1px;background:#bda079}.hero h1{font-size:clamp(39px,4.6vw,68px);letter-spacing:-3.3px;line-height:1.23;margin:20px 0 22px;font-weight:800;color:#24453e}.hero h1 em{font-style:normal;color:#cb8651}.hero p{max-width:545px;color:#687e76;font-size:14px;line-height:2.05;margin:0 0 29px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{border-radius:12px;padding:13px 22px;font-size:12px;font-weight:700;border:1px solid transparent;display:inline-flex;justify-content:center;align-items:center;gap:14px;min-height:46px;text-decoration:none;transition:transform .2s,background .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:#2f6055;color:#fff;box-shadow:0 5px 14px rgba(36,80,70,.12)}.btn-primary:hover{background:#224a42}.btn-outline{background:#fffdf8;color:#396354;border-color:#dce1d6}.btn-outline:hover{background:#eef5eb}.btn-small{padding:9px 14px;min-height:37px}.hero-stats{display:flex;align-items:center;gap:25px;margin-top:43px}.hero-stats div:not(.stat-separator){display:flex;flex-direction:column;gap:0}.hero-stats strong{font-size:24px;letter-spacing:-1px;color:#284d43;line-height:1.25}.hero-stats span{font-size:10px;color:#85918a}.stat-separator{height:32px;width:1px;background:#d5d9cc}
.hero-art{min-height:390px;display:grid;place-items:center;position:relative;isolation:isolate}.hero-art:before{content:'';position:absolute;width:355px;height:355px;background:#e2eade;border-radius:50%;z-index:-2}.art-orbit{position:absolute;border:1px dashed #b1c8b6;border-radius:50%;z-index:-1}.art-orbit-one{width:390px;height:390px;transform:rotate(18deg)}.art-orbit-two{width:320px;height:320px;transform:rotate(-28deg)}.art-main{width:228px;height:267px;background:#fffefa;border-radius:24px;border:1px solid #e4e9df;box-shadow:0 20px 50px #5c79642e;transform:rotate(-7deg);display:flex;justify-content:center;align-items:center;flex-direction:column;gap:12px}.art-main>span{font-family:'Noto Serif SC',serif;font-size:144px;line-height:1.1;color:#28594c}.art-main small{font-weight:800;letter-spacing:3px;color:#a5ad9f;font-size:10px}.art-small{position:absolute;width:98px;height:105px;background:#fffefa;box-shadow:0 12px 30px #61776725;border:1px solid #edf0e6;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#5a7c6e;font-family:'Noto Serif SC',serif;font-size:54px;line-height:1.05}.art-small span{font:600 11px 'Be Vietnam Pro',sans-serif;color:#b2a58b}.art-small-one{top:17px;left:15%;transform:rotate(10deg)}.art-small-two{right:11%;bottom:44px;transform:rotate(12deg)}.art-tag{position:absolute;right:1%;top:60px;background:#e0ab77;color:#fffdf5;border-radius:9px;padding:8px 13px;font-size:11px;font-weight:700;transform:rotate(9deg);box-shadow:0 8px 18px #ae9a7a26}.art-tag span{margin-left:6px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:18px 0 23px}.section-heading h2{font-size:26px;line-height:1.3;letter-spacing:-1px;color:#244940;margin:7px 0 0}.section-heading>p{color:#89938c;font-size:12px;margin:0 0 6px}.learning-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.learning-card{position:relative;border:1px solid #e3e6dc;background:#fffefa;text-align:left;border-radius:19px;padding:26px 24px 30px;min-height:230px;display:flex;flex-direction:column;align-items:start;box-shadow:var(--shadow);transition:transform .2s,border-color .2s,box-shadow .2s}.learning-card:hover{transform:translateY(-5px);border-color:#a6c2b7;box-shadow:0 22px 45px #43694f15}.learning-icon{display:grid;place-items:center;width:49px;height:49px;border-radius:15px;font-size:27px;font-family:'Noto Serif SC',serif}.icon-orange{color:#c88858;background:#fbecd9}.icon-green{color:#4b836e;background:#e7f0e9}.icon-blue{color:#5e8197;background:#e9f0f7}.card-tag{position:absolute;top:33px;right:24px;color:#acb1a6;letter-spacing:1.2px;font-size:9px;font-weight:800}.learning-card strong{font-size:17px;margin-top:20px;color:#2b4944}.learning-card>span:nth-last-child(2){color:#85918b;font-size:12px;line-height:1.8;margin-top:7px;max-width:290px}.card-arrow{position:absolute;right:25px;bottom:21px;color:#639184;font-size:19px}.modules-heading{margin-top:64px}.module-list{border:1px solid #e1e5db;background:#fffefa;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:80px}.module-row{width:100%;display:flex;align-items:center;gap:25px;border:0;border-bottom:1px solid #eef0e9;background:none;text-align:left;padding:22px 28px}.module-row:last-child{border-bottom:0}.module-row:not(.disabled):hover{background:#f4f8f0}.module-number{font-size:12px;color:#b7c0b5;font-weight:700}.module-copy{display:flex;flex-direction:column;gap:2px;flex:1}.module-copy strong{color:#315348;font-size:14px}.module-copy small{color:#9aa69e;font-size:11px}.module-available,.module-soon{font-size:10px;font-weight:700;border-radius:99px;padding:5px 13px}.module-available{background:#e3f1e9;color:#46836c}.module-soon{background:#f3f2ed;color:#a5aaa3}.module-next{font-size:20px;color:#528777}.module-row.disabled{opacity:.72}
.study-view{padding-top:34px;padding-bottom:80px;min-height:62vh}.study-header{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:0 0 28px}.study-header h1{margin:7px 0 4px;font-size:31px;letter-spacing:-1px;color:#22483e}.study-header p{margin:0;color:#8b978e;font-size:12px}.text-back{display:block;background:none;border:0;padding:0;margin:0 0 24px;color:#819488;font-size:11px;font-weight:600}.text-back:hover{color:#315c4c}.study-counter{background:#e8eee5;color:#517b69;padding:7px 12px;border-radius:999px;font-size:11px;font-weight:700;margin-bottom:6px;white-space:nowrap}.mode-tabs{display:flex;gap:6px;background:#eaece3;border-radius:14px;padding:6px;margin-bottom:22px;width:max-content;max-width:100%}.mode-tab{background:transparent;border:0;padding:11px 18px;border-radius:10px;font-size:12px;color:#78887d;font-weight:700;white-space:nowrap}.mode-tab span{font-size:18px;margin-right:5px}.mode-tab.active{background:#fffefb;color:#285b4d;box-shadow:0 3px 10px #36594a17}
.filter-toolbar{background:#fffefb;border:1px solid #e5e7db;border-radius:18px;padding:20px 22px;margin-bottom:22px}.level-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#5d7669;font-size:12px;font-weight:700}.inline-link{border:0;background:none;padding:2px 0;color:#478575;text-decoration:underline;font-size:11px}.level-chips{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0 18px}.level-chip{border:1px solid #dee7dc;background:#f8faf5;color:#779083;padding:8px 13px;border-radius:10px;min-width:70px;font-size:11px;font-weight:700;transition:background .15s}.level-chip.active{color:#fff;background:#35675b;border-color:#35675b}.level-chip:focus-visible{outline-offset:2px}.search-row{display:flex;gap:10px;align-items:stretch}.search-field{height:46px;border:1px solid #e2e7dd;background:#fafbf8;border-radius:10px;display:flex;align-items:center;gap:10px;padding:0 13px;flex:1;min-width:0}.search-field:focus-within{border-color:#6eaa97}.search-field>span{font-size:23px;color:#879d8b;line-height:1}.search-field input{width:100%;min-width:0;border:0;outline:0;background:none;color:#2e4d45;font-size:12px}.search-field input::placeholder{color:#a9b3a9}.search-field kbd{font-size:10px;color:#9aaa9c;border:1px solid #e0e6dc;border-radius:4px;padding:0 6px}.mini-control{border:1px solid #e2e7dd;background:#fafbf8;border-radius:10px;display:flex;align-items:center;gap:7px;padding:0 13px;color:#59776c;font-size:11px;font-weight:700;white-space:nowrap}.mini-control:hover,.mini-control.active{border-color:#9cbdb1;background:#eaf5ec}.mini-control>span:first-child{font-size:19px;line-height:1}.filter-details{margin:-1px 0 23px;padding:18px 21px;border:1px solid #dce5dc;background:#ecf2ea;border-radius:16px;display:flex;gap:20px;align-items:end;justify-content:space-between}.filter-details>div{display:flex;flex-direction:column;gap:2px}.filter-details strong{font-size:13px;color:#3f6d5f}.filter-details>div>span{font-size:11px;color:#7d9287}.filter-details label{font-size:11px;font-weight:700;color:#607c6e;display:flex;flex-direction:column;gap:5px}.filter-details select{border:1px solid #d3dfd6;padding:10px 12px;background:white;color:#4e6c5d;border-radius:9px;font-size:11px;max-width:240px}.loading-state{text-align:center;padding:100px 20px;color:#7e9589}
.flash-panel{max-width:770px;margin:0 auto}.flash-meta{display:flex;justify-content:space-between;gap:12px;color:#8ca094;font-size:11px;margin:5px 0 12px}.flash-card{position:relative;height:390px;perspective:1400px;cursor:pointer;user-select:none;touch-action:pan-y}.flash-inner{position:absolute;width:100%;height:100%;transform-style:preserve-3d;transition:transform .56s cubic-bezier(.2,.65,.2,1)}.flash-card.is-flipped .flash-inner{transform:rotateY(180deg)}.flash-face{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #e1e7dd;box-shadow:0 20px 44px #496e5116;overflow:auto;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:34px 40px;background:#fffefa}.flash-face:before{content:'';position:absolute;left:15px;right:15px;top:15px;bottom:15px;border:1px solid #edf1e8;border-radius:15px;pointer-events:none}.flash-back{transform:rotateY(180deg);background:#eff5ed}.flash-front .flash-label,.flash-back .flash-label{font-size:10px;font-weight:800;letter-spacing:2px;color:#91a597;text-transform:uppercase}.flash-word{font:600 clamp(58px,8vw,94px) 'Noto Serif SC',serif;color:#285a4b;line-height:1.5;max-width:100%;overflow-wrap:anywhere;text-align:center;margin:9px 0 2px}.flash-pinyin{font-size:17px;color:#c28652;font-weight:600;text-align:center}.flash-instruction{font-size:11px;color:#a7b4a8;margin-top:28px}.speak-btn{border:0;background:#e9f1e9;color:#437766;width:36px;height:36px;display:inline-grid;place-items:center;border-radius:50%;vertical-align:middle;margin-left:9px;font-size:20px;line-height:1;transition:transform .15s,background .15s;flex:none}.speak-btn:hover{transform:scale(1.08);background:#d4e9db}.speak-btn:active{transform:scale(.98)}.flash-front .speak-btn{margin:0 0 0 8px}.flash-meaning{font-size:25px;color:#305d4e;font-weight:700;text-align:center;margin:15px 0 4px}.flash-hanviet{color:#a47f5b;font-size:12px;margin-bottom:15px;text-align:center}.flash-example{border-top:1px solid #d5e2d7;padding-top:18px;max-width:580px;width:100%;text-align:center;display:flex;flex-direction:column;gap:4px}.flash-example-cn{font:600 18px 'Noto Serif SC',serif;color:#345f50;line-height:1.7}.flash-example-pinyin{font-size:12px;color:#a07c56}.flash-example-vi{font-size:12px;color:#657d6f;margin-top:5px}.flash-back .flash-label{color:#81a08b}.flash-save{position:absolute;top:28px;right:30px;z-index:2;background:#fff6;border:1px solid #dde7db;color:#648a74;width:40px;height:40px;border-radius:50%;font-size:22px}.flash-save.is-saved{color:#cd7b54;background:#fff6ef}.flash-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:25px}.flash-nav{border:1px solid #dce5d8;background:#fffdf8;color:#4b7866;border-radius:12px;padding:12px 24px;font-weight:700;font-size:12px;min-width:115px}.flash-nav:hover{background:#eaf1e7}.flip-btn{min-width:155px}.flash-hint{text-align:center;color:#a2aca2;font-size:10px;margin-top:15px}
.browse-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:27px 0 15px}.browse-heading strong{font-size:15px;color:#31594c}.browse-heading>span{color:#9ba99b;font-size:11px}.inline-audio{font-size:17px;color:#759783}.word-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.word-card{background:#fffefa;border:1px solid #e2e7dc;border-radius:17px;padding:22px 23px;box-shadow:0 8px 21px #5573600b;min-width:0}.word-card-top{display:flex;align-items:flex-start;gap:14px;justify-content:space-between}.word-hsk{display:inline-block;border-radius:5px;background:#edf3e9;color:#64907b;padding:3px 7px;font-size:9px;font-weight:800;letter-spacing:.4px}.word-id{font-size:10px;color:#b2bdb0;margin-left:7px}.favorite-btn{border:0;background:none;color:#aec0b3;font-size:24px;line-height:1;padding:2px 6px}.favorite-btn.saved{color:#df986e}.word-main{display:flex;align-items:center;gap:7px;margin:7px 0 3px}.word-main h3{font:600 36px 'Noto Serif SC',serif;color:#2e5f4e;margin:0;line-height:1.4;overflow-wrap:anywhere}.word-pinyin{color:#bd8354;font-weight:600;font-size:12px;margin-bottom:5px}.word-meaning{color:#3d584e;font-size:12px;font-weight:700}.word-sino{color:#a0a99c;font-size:10px;margin-top:3px}.example-box{border-top:1px solid #f0f0ea;margin-top:15px;padding-top:13px}.example-header{font-size:9px;letter-spacing:1.2px;font-weight:800;color:#a8b4a9}.example-chinese{font:500 16px 'Noto Serif SC',serif;line-height:1.75;color:#425f53;margin-top:7px}.example-pinyin{font-size:10px;color:#bd9771;margin-top:4px}.example-vi{font-size:11px;color:#87978d;line-height:1.7;margin-top:5px}.word-note{margin-top:9px;font-size:10px;color:#9a927e}.load-more{display:flex;margin:26px auto 0;min-width:180px}.empty-state{text-align:center;background:#fffefa;border:1px solid #e4e8df;border-radius:18px;padding:65px 20px;color:#87948b}.empty-state>div{font:600 42px 'Noto Serif SC',serif;color:#d1ded2}.empty-state h3{color:#376250;font-size:18px;margin:8px 0}.empty-state p{font-size:12px}
.site-footer{background:#23483f;color:#eaf0e7}.footer-inner{padding:36px 0 24px}.footer-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff22;padding-bottom:20px}.footer-brand{font-weight:800;letter-spacing:-1.3px;font-size:23px}.footer-top>span:last-child{font-size:11px;color:#b2c9be}.footer-donation{display:flex;align-items:center;gap:23px;padding:30px 0}.coffee-icon{width:55px;height:55px;border-radius:16px;display:grid;place-items:center;font-size:25px;background:#ffffff17;flex:none}.donation-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.donation-copy p{margin:0 0 9px;color:#e4ece4;font-size:12px;max-width:620px}.donation-copy strong{font-size:12px;letter-spacing:.7px}.donation-copy span,.donation-copy a{font-size:12px;color:#cfdfd4}.donation-copy a{text-decoration:underline;text-underline-offset:2px}.copy-bank{margin-left:auto;background:#ffffff16;border:1px solid #ffffff48;color:#f4f8f4;border-radius:10px;padding:9px 13px;white-space:nowrap;font-size:11px;font-weight:700}.copy-bank:hover{background:#ffffff2b}.footer-bottom{display:flex;justify-content:space-between;color:#b0c4b7;font-size:10px;border-top:1px solid #ffffff1d;padding-top:15px}.mobile-nav{display:none}
.modal-backdrop{position:fixed;inset:0;z-index:100;background:#142e28aa;backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px}.donation-modal{width:min(430px,100%);background:#fffefa;border-radius:23px;box-shadow:0 27px 70px #122a2455;text-align:center;padding:35px 33px 29px;position:relative}.modal-close{position:absolute;right:15px;top:13px;background:none;border:0;font-size:27px;line-height:1;color:#9ba99b;width:38px;height:38px}.modal-coffee{background:#fff1dc;width:67px;height:67px;border-radius:20px;margin:0 auto 16px;display:grid;place-items:center;font-size:32px}.donation-modal h2{font-size:23px;color:#2a5549;line-height:1.4;letter-spacing:-.7px;margin:9px 0 12px}.donation-modal p{color:#798a7e;font-size:12px;line-height:1.9}.modal-bank{display:flex;flex-direction:column;background:#eef4eb;padding:14px;border-radius:12px;margin:18px 0 19px;color:#366756;font-size:13px;gap:3px}.modal-bank strong{letter-spacing:.7px}.donation-modal .btn{width:100%}.modal-later{border:0;background:none;color:#9aaa9e;font-size:11px;margin-top:13px;padding:9px}.toast{position:fixed;bottom:27px;left:50%;transform:translateX(-50%);z-index:120;border-radius:10px;background:#284f43;color:white;padding:12px 20px;box-shadow:0 10px 25px #183c3540;font-size:12px;text-align:center;min-width:160px}
@media(max-width:950px){.desktop-nav{gap:0}.nav-link{padding:10px 9px}.header-inner{gap:14px}.hero{grid-template-columns:1.15fr .85fr}.hero-art{transform:scale(.78)}.hero-stats{gap:15px}.learning-card{padding:21px}.art-tag{right:-10%}}
@media(max-width:720px){.wrap{width:min(100% - 32px,560px)}.site-header .header-inner{height:69px}.brand-mark{width:40px;height:40px;border-radius:13px}.brand-copy strong{font-size:21px}.brand-copy small{font-size:8px}.desktop-nav{display:none}.header-right{margin-left:auto}.edition-pill{font-size:10px}.hero{grid-template-columns:1fr;min-height:0;padding:36px 0 25px;gap:0}.hero h1{font-size:43px;line-height:1.28;letter-spacing:-2px;margin:14px 0}.hero p{font-size:12px;line-height:1.9}.eyebrow{font-size:9px}.hero-actions .btn{flex:1;padding:13px 11px;white-space:nowrap;font-size:11px}.hero-stats{margin-top:30px;gap:19px}.hero-stats strong{font-size:21px}.hero-art{height:230px;min-height:230px;transform:scale(.6);margin:-14px 0 -36px}.section-heading{margin:23px 0 15px;align-items:start;flex-direction:column;gap:2px}.section-heading h2{font-size:22px}.section-heading>p{font-size:11px}.learning-cards{grid-template-columns:1fr;gap:10px}.learning-card{min-height:135px;padding:17px 19px 17px 85px}.learning-icon{position:absolute;left:17px;top:22px;width:50px;height:50px}.card-tag{top:20px;right:19px;font-size:8px}.learning-card strong{font-size:15px;margin-top:19px}.learning-card>span:nth-last-child(2){font-size:11px;padding-right:13px;margin-top:3px}.card-arrow{right:18px;bottom:14px;font-size:16px}.modules-heading{margin-top:38px}.module-row{gap:13px;padding:17px 15px}.module-copy strong{font-size:12px}.module-copy small{font-size:10px}.module-number{font-size:10px}.module-soon,.module-available{font-size:9px;padding:4px 7px;white-space:nowrap}.module-list{margin-bottom:45px}.study-view{padding-top:23px;padding-bottom:50px}.study-header{margin-bottom:18px;align-items:end}.study-header h1{font-size:25px}.study-header p{font-size:11px}.text-back{margin-bottom:15px}.study-counter{font-size:10px;padding:5px 8px}.mode-tabs{width:100%;justify-content:space-between;padding:5px;gap:0}.mode-tab{flex:1;padding:10px 5px;font-size:10px}.mode-tab span{font-size:14px;margin-right:2px}.filter-toolbar{padding:15px;margin-bottom:17px;border-radius:15px}.level-chips{gap:7px;margin:10px 0 15px}.level-chip{flex:1;min-width:calc(33.333% - 7px);padding:9px 7px;font-size:10px}.search-row{flex-wrap:wrap;gap:8px}.search-field{flex:1 0 100%}.search-field kbd{display:none}.mini-control{height:38px;flex:1;justify-content:center}.filter-details{flex-direction:column;align-items:stretch;gap:13px;padding:15px}.filter-details select{max-width:none;width:100%}.flash-meta{font-size:9px}.flash-meta span:last-child{max-width:55%;text-align:right}.flash-card{height:390px}.flash-face{padding:27px 23px}.flash-word{font-size:clamp(49px,14vw,76px)}.flash-pinyin{font-size:14px}.flash-meaning{font-size:21px;margin-top:12px}.flash-example{padding-top:11px}.flash-example-cn{font-size:16px}.flash-example-pinyin,.flash-example-vi{font-size:11px}.flash-save{top:23px;right:23px}.flash-controls{gap:8px;margin-top:16px}.flash-nav{min-width:0;padding:11px 14px;flex:1}.flip-btn{min-width:0;flex:1.25;padding:12px 9px}.flash-hint{font-size:9px}.word-grid{grid-template-columns:1fr;gap:10px}.word-card{padding:17px}.word-main h3{font-size:34px}.browse-heading{align-items:start}.browse-heading>span{font-size:9px;text-align:right}.footer-inner{padding:26px 0 calc(90px + env(safe-area-inset-bottom))}.footer-top{flex-direction:column;align-items:start;gap:4px}.footer-donation{align-items:flex-start;gap:12px;flex-wrap:wrap}.coffee-icon{height:38px;width:38px;border-radius:11px;font-size:21px}.donation-copy{flex:1;min-width:calc(100% - 54px)}.donation-copy p{font-size:11px}.copy-bank{margin-left:50px}.footer-bottom{gap:15px;align-items:start;flex-direction:column}.mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;z-index:60;bottom:0;left:0;right:0;background:#fffefa;box-shadow:0 -8px 30px #284b3e18;border-top:1px solid #e4e9df;padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom));gap:1px}.mobile-nav button{border:0;background:transparent;color:#829288;display:flex;align-items:center;flex-direction:column;gap:0;min-height:47px;font-size:9px;font-weight:700;border-radius:9px}.mobile-nav button span{font-size:22px;line-height:1.4}.mobile-nav button.active{background:#edf3eb;color:#326456}.donation-modal{padding:30px 25px 24px}.toast{bottom:calc(78px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(max-width:720px){.mode-tabs{display:none}body[data-current-view="flash"] .filter-toolbar{display:none}body[data-current-view="flash"] .study-header{margin-bottom:16px}}

/* HSK edition switching and local study progress */
.edition-toggle{display:flex;gap:3px;background:#e7ebe1;border:1px solid #d6e0d5;border-radius:999px;padding:4px;white-space:nowrap}
.edition-toggle button{border:0;border-radius:999px;background:transparent;color:#7b9184;padding:7px 11px;font-size:11px;font-weight:800;transition:background .15s}
.edition-toggle button.active{background:#2d5e52;color:#fff;box-shadow:0 2px 8px #315b5026}
.edition-short{display:none}
.level-hint{margin:-5px 0 15px;color:#8b968c;font-size:11px;line-height:1.6}
.level-chip:disabled{cursor:default}
.btn-continue{border:1px solid #ddae86;background:#fff1df;color:#966b43;box-shadow:none}
.btn-continue:hover{background:#ffe6cb}
.flash-status{display:flex;justify-content:center;margin-top:15px}
.status-field{display:inline-flex;align-items:center;gap:9px;color:#718b7a;font-size:11px;font-weight:700}
.status-field select{appearance:none;-webkit-appearance:none;background:#eaf3ec;color:#2d6754;border:1px solid #cee1d0;border-radius:10px;padding:9px 28px 9px 12px;font-size:11px;font-weight:700;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%234d806e' stroke-width='2'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat}
.word-status{display:flex;justify-content:flex-end;border-top:1px dashed #edf0e8;margin-top:15px;padding-top:13px}
.flash-definition,.word-definition,.word-english{font-size:11px;color:#879486;margin-top:5px}
.flash-definition{color:#7a9586;text-align:center;max-width:100%;margin-bottom:9px}
.word-official{font-size:10px;color:#8f9e8d;margin:3px 0 7px;text-align:left}
.flash-front .word-official{text-align:center;font-size:11px}
.filter-details{flex-wrap:wrap}
.filter-details label{min-width:130px}
@media(max-width:720px){
  .header-inner{gap:9px!important}
  .edition-toggle{padding:3px;gap:1px}
  .edition-toggle button{font-size:9px;padding:7px 8px}
  .hero-actions .btn-continue{flex:1 1 100%}
  .flash-status{margin-top:11px}
  .status-field select{min-height:39px}
  .filter-details label{min-width:0}
  .flash-definition{font-size:10px}
}
@media(max-width:480px){
  .edition-full{display:none}
  .edition-short{display:inline}
  .edition-toggle button{padding:7px 10px;font-size:10px}
}

/* Compact dictionary layout: visually distinct from the study/filter cards. */
.word-grid.is-dictionary{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.dictionary-entry{align-self:start;min-width:0;background:#fffefa;border:1px solid #e4e8de;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px #37614e08}
.dictionary-summary{position:relative;display:grid;grid-template-columns:minmax(102px,.9fr) minmax(0,1.1fr);align-items:center;gap:12px;min-height:79px;padding:20px 15px 5px}
.dictionary-chinese,.dictionary-meaning{min-width:0}
.dictionary-word-line{display:flex;align-items:center;gap:3px;min-width:0}
.dictionary-word-line strong{font:600 30px/1.3 'Noto Serif SC',serif;color:#2c5d50;overflow-wrap:anywhere;min-width:0}
.dictionary-word-line .speak-btn{height:29px;width:29px;font-size:17px;margin-left:4px}
.dictionary-pinyin{display:block;color:#b48358;font-size:11px;line-height:1.4;margin-top:0}
.dictionary-meaning{color:#405e52;font-size:12px;font-weight:600;line-height:1.55;overflow-wrap:anywhere}
.dictionary-level{position:absolute;top:5px;right:15px;color:#9bae9e;font-size:9px;font-weight:700;letter-spacing:.2px}
.dictionary-details>summary{list-style:none;display:flex;gap:6px;align-items:center;justify-content:flex-end;padding:3px 15px 9px;color:#769785;font-size:10px;cursor:pointer;font-weight:700}
.dictionary-details>summary::-webkit-details-marker{display:none}
.dictionary-details>summary:hover{color:#2e6b59}
.dictionary-details>summary:focus-visible{outline:2px solid #e6a06f;outline-offset:-2px}
.dictionary-chevron{display:inline-block;font-size:16px;line-height:1;transition:transform .2s}
.dictionary-details[open] .dictionary-chevron{transform:rotate(180deg)}
.dictionary-example{border-top:1px solid #e9eee5;background:#f5f8f2;padding:12px 15px 15px}
.dictionary-example-cn{font:500 16px/1.8 'Noto Serif SC',serif;color:#366254}
.dictionary-example-cn .speak-btn{width:29px;height:29px;font-size:16px}
.dictionary-example-pinyin{color:#ac825d;font-size:11px;margin-top:3px}
.dictionary-example-vi{color:#567165;font-size:11px;line-height:1.6;margin-top:4px}
.dictionary-extra-info,.dictionary-example .word-official{font-size:10px;color:#86998b;margin-top:7px}
.footer-bottom a{color:#d7ebdc;text-underline-offset:3px;text-decoration-color:#86afa0}
.footer-bottom a:hover{color:white}
@media(max-width:720px){
  .word-grid.is-dictionary{grid-template-columns:1fr;gap:7px}
  .dictionary-summary{grid-template-columns:minmax(100px,.9fr) minmax(0,1.1fr);gap:10px;min-height:77px;padding:18px 13px 4px}
  .dictionary-word-line strong{font-size:29px}
  .dictionary-level{right:12px}
  .dictionary-meaning{font-size:11px}
  .dictionary-details>summary{padding:1px 13px 7px}
  .dictionary-example{padding:12px 13px}
}

/* Grammar: a lesson library rather than vocabulary-style flashcards. */
body[data-current-view="grammar"] .edition-toggle{display:none}
.grammar-view{padding-top:42px;padding-bottom:78px;min-height:68vh}
.grammar-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}
.grammar-heading h1{color:#244940;font-size:clamp(27px,3vw,36px);letter-spacing:-1.4px;line-height:1.35;margin:8px 0}
.grammar-heading p{font-size:12px;color:#83928a;margin:0;line-height:1.85}
.grammar-toolbar{background:#fffefa;border:1px solid #e3e8de;border-radius:20px;padding:21px 23px;margin-bottom:23px;box-shadow:0 8px 28px #4364510a}
.grammar-toolbar-label{display:block;font-size:11px;font-weight:800;color:#526d60;margin-bottom:9px}
.grammar-levels{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.grammar-level{border:1px solid #e1e8dc;border-radius:12px;background:#f6f7f0;min-height:60px;padding:9px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:#5c7d69}
.grammar-level strong{font-size:12px;white-space:nowrap}
.grammar-level small{font-size:9px;font-weight:600;color:#9bad9f}
.grammar-level.active{background:#2d6153;border-color:#2d6153;color:white;box-shadow:0 4px 13px #224f4226}
.grammar-level.active small{color:#d6eadc}
.grammar-search-row{display:flex;align-items:center;gap:11px;margin-top:16px}
.grammar-search-field{display:flex;align-items:center;gap:10px;background:#f8faf5;border:1px solid #dde7dc;border-radius:12px;padding:0 14px;height:46px;flex:1;min-width:0;color:#8aa296;font-size:20px}
.grammar-search-field:focus-within{border-color:#8cb9a3;box-shadow:0 0 0 3px #7aaa9130}
.grammar-search-field input{border:0;outline:0;background:transparent;width:100%;min-width:0;font-size:12px;color:#35594d}
.grammar-search-field input:focus-visible{outline:0}
.grammar-resume{border:1px solid #e4c5a7;background:#fff1e0;color:#8f6a49;border-radius:11px;min-height:46px;padding:9px 14px;font-weight:700;font-size:11px;white-space:nowrap}
.grammar-topic-label{margin-top:17px}
.grammar-topics{display:flex;align-items:center;gap:7px;overflow-x:auto;padding:1px 0 9px;scrollbar-width:thin;scrollbar-color:#cadacb transparent}
.grammar-topic{flex:none;display:inline-flex;align-items:center;gap:8px;background:#f4f7f1;border:1px solid #e2e9df;color:#698476;border-radius:999px;padding:6px 11px;font-size:10px;font-weight:700}
.grammar-topic span{color:#a3b4a7;font-size:9px}
.grammar-topic.active{background:#e5f0e7;color:#2e6b53;border-color:#a8cab4}
.grammar-topic.active span{color:#52836b}
.grammar-status-filter{display:flex;gap:5px;overflow-x:auto;margin-top:9px;padding-top:12px;border-top:1px solid #eef0e8;scrollbar-width:none}
.grammar-status-filter button{flex:none;background:none;border:0;padding:8px 12px;border-radius:9px;color:#899a8c;font-size:11px;font-weight:700;white-space:nowrap}
.grammar-status-filter button.active{background:#edf3ec;color:#2e6653}
.grammar-content{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:19px;align-items:start}
.grammar-sidebar{position:sticky;top:106px;background:#fffefa;border:1px solid #e4e9df;border-radius:17px;overflow:hidden;box-shadow:0 7px 24px #405a4c08}
.grammar-list-heading{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:15px 17px 13px;border-bottom:1px solid #edf0e9;color:#3a6253}
.grammar-list-heading strong{font-size:12px}
.grammar-list-heading span{font-size:10px;color:#9caf9e}
.grammar-lesson-list{max-height:calc(100vh - 185px);min-height:300px;overflow:auto;overscroll-behavior:contain;padding:5px 7px 11px;scrollbar-width:thin;scrollbar-color:#d2dfd3 transparent}
.grammar-list-topic{font-size:10px;font-weight:800;letter-spacing:.7px;color:#9b8b68;padding:13px 11px 6px;background:#fffefa;position:sticky;top:0;z-index:1}
.grammar-lesson-link{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;color:#526e5e;border:1px solid transparent;border-radius:10px;padding:10px 10px;min-height:43px}
.grammar-lesson-link:hover{background:#f3f7f1}
.grammar-lesson-link.active{background:#edf3ec;border-color:#d7e8d9;color:#245744}
.grammar-lesson-number{color:#afbdac;font-size:10px;font-weight:700;align-self:center;min-width:22px}
.grammar-lesson-name{font-size:11px;font-weight:650;line-height:1.55;flex:1;min-width:0}
.grammar-lesson-state{font-size:14px;color:#bfccbd;flex:none}
.grammar-lesson-state.learning{color:#d19b61}
.grammar-lesson-state.learned{color:#408a65}
.grammar-lesson{background:#fffefa;border:1px solid #e3e8dd;border-radius:19px;padding:27px 30px 23px;box-shadow:0 9px 30px #40624d0b;min-width:0;scroll-margin-top:95px}
.grammar-detail-meta{font-size:10px;font-weight:800;letter-spacing:1.1px;color:#a28762;text-transform:uppercase}
.grammar-detail-meta span{color:#c8d0c6;margin:0 4px}
.grammar-lesson h2{font-size:clamp(22px,2.5vw,29px);line-height:1.45;color:#275446;letter-spacing:-.8px;margin:8px 0 17px}
.grammar-detail-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;border-bottom:1px solid #ebeee7;padding-bottom:19px;margin-bottom:21px}
.grammar-status-select{display:flex;align-items:center;gap:8px;color:#84998b;font-size:10px;font-weight:700}
.grammar-status-select select{background:#edf4ec;border:1px solid #dce7d8;border-radius:10px;color:#3c6c55;padding:8px;font-size:11px;font-weight:700}
.grammar-favorite,.grammar-toggle-sino{border:1px solid #e2e8dd;background:#fffefa;color:#748d7a;border-radius:10px;padding:9px 12px;font-size:11px;font-weight:700}
.grammar-favorite.saved{color:#bb754f;background:#fff1e8;border-color:#e9d1bf}
.grammar-toggle-sino.active{color:#366e5a;background:#ebf3eb}
.grammar-teaching-item+.grammar-teaching-item{border-top:1px solid #e8ece4;margin-top:27px;padding-top:24px}
.grammar-item-index{display:block;color:#a1afa2;font-size:9px;font-weight:800;letter-spacing:1.2px}
.grammar-focus-line{display:flex;align-items:center;gap:8px;min-width:0;margin:6px 0 13px}
.grammar-focus-line strong{font:600 clamp(25px,3vw,35px)/1.5 'Noto Serif SC',serif;overflow-wrap:anywhere;color:#2b6554;min-width:0}
.grammar-focus-line .speak-btn{width:32px;height:32px;font-size:17px;margin-left:3px}
.grammar-pattern{background:#f3f7ee;border-left:3px solid #94bba4;border-radius:0 9px 9px 0;padding:10px 13px;margin:0 0 11px;overflow-wrap:anywhere}
.grammar-pattern>span,.grammar-explanation>span{display:block;font-size:9px;font-weight:800;color:#8faa97;text-transform:uppercase;letter-spacing:.5px}
.grammar-pattern p{margin:4px 0 0;color:#365f4d;font:600 16px/1.8 'Noto Serif SC','Be Vietnam Pro',sans-serif}
.grammar-explanation{margin:13px 0 21px}
.grammar-explanation p{font-size:13px;line-height:1.95;color:#4d695c;margin:4px 0 0}
.grammar-examples-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #edf0e9;padding:15px 0 6px}
.grammar-examples-heading>strong{color:#9eae9d;font-size:9px;font-weight:800;letter-spacing:1px}
.grammar-passage-play{font-size:10px;color:#6d9278;font-weight:700;display:flex;align-items:center;gap:4px}
.grammar-passage-play .speak-btn{width:28px;height:28px;font-size:16px;margin:0}
.grammar-examples{display:flex;flex-direction:column;gap:7px}
.grammar-example{background:#f9faf6;border:1px solid #eef0e8;border-radius:11px;padding:12px 14px}
.grammar-example.is-passage{background:#fbf8f0;border-color:#f0eadc}
.grammar-example-top{display:flex;justify-content:space-between;color:#a3b3a4;font-size:9px;font-weight:800;margin-bottom:4px}
.grammar-example-cn{font:500 18px/1.8 'Noto Serif SC',serif;color:#376251;overflow-wrap:anywhere}
.grammar-example-cn .speak-btn{width:29px;height:29px;font-size:16px;margin-left:6px}
.grammar-example-pinyin{font-size:11px;color:#ab825e;margin-top:4px;line-height:1.6}
.grammar-example-vi{font-size:12px;color:#667d6e;line-height:1.8;margin-top:5px}
.grammar-example-sino{font-size:10px;color:#ad9d86;margin-top:5px}
.grammar-detail-pagination{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #e7ece3;padding-top:18px;margin-top:26px}
.grammar-detail-pagination button{border:1px solid #dce9db;background:#eff5ec;color:#396950;border-radius:10px;padding:9px 13px;font-size:11px;font-weight:800}
.grammar-detail-pagination button:disabled{opacity:.35}
.grammar-detail-pagination span{font-size:10px;color:#95a796;text-align:center}
@media(min-width:721px) and (max-width:860px){.desktop-nav{display:none}}
@media(max-width:720px){
  .grammar-view{padding-top:22px;padding-bottom:58px}
  .grammar-heading{align-items:start;gap:8px;margin-bottom:18px}
  .grammar-heading h1{font-size:25px}
  .grammar-heading p{font-size:11px;line-height:1.8}
  .grammar-heading .study-counter{font-size:9px;white-space:nowrap;padding:6px}
  .grammar-toolbar{padding:14px;border-radius:14px;margin-bottom:14px}
  .grammar-levels{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .grammar-level{min-height:54px;padding:7px 3px}
  .grammar-level strong{font-size:11px}
  .grammar-level small{font-size:9px}
  .grammar-search-row{flex-direction:column;align-items:stretch;gap:7px}
  .grammar-search-field{flex:none;height:44px}
  .grammar-resume{min-height:40px}
  .grammar-status-filter button{padding:8px 10px;font-size:10px}
  .grammar-topic{font-size:10px;padding:6px 10px}
  .grammar-content{display:flex;flex-direction:column;gap:14px}
  .grammar-sidebar{position:static;width:100%;border-radius:14px}
  .grammar-lesson-list{min-height:0;max-height:245px}
  .grammar-list-heading{padding:11px 13px}
  .grammar-lesson-link{min-height:43px}
  .grammar-lesson{width:100%;border-radius:15px;padding:20px 17px 22px}
  .grammar-lesson h2{font-size:23px}
  .grammar-detail-meta{font-size:9px;letter-spacing:.5px}
  .grammar-detail-actions{gap:7px}
  .grammar-status-select{flex:1 1 100%}
  .grammar-example{padding:11px 12px}
  .grammar-example-cn{font-size:17px}
  .grammar-pattern p{font-size:15px}
  .grammar-explanation p{font-size:12px}
  .grammar-detail-pagination button{padding:10px 8px;font-size:10px}
  .mobile-nav{grid-template-columns:repeat(5,minmax(0,1fr))}
  .mobile-nav button{font-size:8px}
  .mobile-nav button span{font-size:20px}
}