:root{--color-ink: #102941;--color-muted: #526960;--color-mint: #20ae78;--color-mint-dark: #087955;--color-mint-soft: #eaf8e9;--color-cream: #fffcf4;--color-surface: #ffffff;--color-border: #e7eee2;--font-ui: "HSK Nunito", system-ui, sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.5rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--radius-sm: 16px;--radius-card: 24px;--radius-pill: 999px;--shadow-card: 0 3px 9px #294e3410, 0 1px 2px #294e3406}:root{--sidebar-width: 208px;--dashboard-gap: 20px;--content-max: 1200px}.learning-page{max-width:var(--content-max);margin:0 auto;min-height:100dvh;padding:24px 20px 115px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0 24px}.page-heading h1{font-size:28px;line-height:1.25;letter-spacing:-.6px}.page-heading p:not(.eyebrow-label){color:var(--color-muted);margin-top:10px;font-size:14px}.eyebrow-label{color:var(--color-mint-dark);font-size:10px;font-weight:800;letter-spacing:1.3px;margin-bottom:10px}.page-symbol{display:grid;place-items:center;border-radius:20px;background:#ddf3de;width:56px;height:56px;flex-shrink:0;color:var(--color-mint-dark)}.level-tabs{display:flex;gap:6px;padding:5px;border:1px solid var(--color-border);background:#fff;border-radius:999px;margin-bottom:24px;max-width:360px}.level-tabs button{flex:1;border:0;border-radius:999px;background:transparent;min-height:44px;font-weight:800}.level-tabs button[aria-pressed=true]{color:#fff;background:#138755}.lesson-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.lesson-tile{display:flex;align-items:center;gap:14px;padding:16px;background:#fffefa;border:1px solid var(--color-border);border-radius:22px;box-shadow:var(--shadow-card);text-align:left;min-width:0}.lesson-tile:hover{border-color:var(--color-mint);background:#f7fff3}.lesson-number{display:grid;place-items:center;width:52px;height:58px;flex-shrink:0;border-radius:16px;background:#fff0c8;color:#90651a;font-size:23px;font-weight:800}.lesson-tile:nth-child(3n+1) .lesson-number{background:#ddf4d9;color:#148450}.lesson-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}.lesson-copy strong{font-size:16px}.lesson-copy>span{font-size:13px;color:var(--color-muted)}.lesson-copy small{font-size:11px;color:#426653}.local-note{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.6;color:var(--color-muted);margin:24px 0;max-width:680px}.local-note .icon{width:20px;color:var(--color-mint-dark)}.resume-banner{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:20px;background:#e9f7e6;border:1px solid #cde7cb;border-radius:20px;margin:0 0 24px}.resume-banner>div{flex:1;min-width:180px}.resume-banner p{font-size:13px;margin-top:5px;color:var(--color-muted)}.secondary-button{border:1px solid #a4ccb2;background:#fffef8;border-radius:14px;min-height:44px;padding:10px 16px;color:#17604b;font-weight:800}.secondary-button:disabled{opacity:.65;cursor:not-allowed}.text-button{border:0;background:transparent;color:var(--color-mint-dark);padding:10px 0;min-height:44px;text-align:left;font-weight:700}.setup-panel{max-width:660px;padding:24px;background:#fffefa}.setup-count{display:flex;align-items:center;gap:16px;margin:4px 0 28px}.setup-count strong{display:block;font-size:32px;color:var(--color-mint-dark)}.setup-count span:not(.icon-disc){font-size:14px;color:var(--color-muted)}.supplementary-option{display:flex;align-items:center;gap:12px;padding:18px 14px;border-radius:16px;background:#f1f7ec;cursor:pointer}.supplementary-option input{width:22px;height:22px;flex-shrink:0;accent-color:#138755}.supplementary-option strong{font-size:15px}.supplementary-option small{display:block;margin-top:6px;color:var(--color-muted);font-size:12px}.setup-rules{padding-left:20px;color:var(--color-muted);font-size:14px;line-height:1.7;margin:24px 0}.setup-rules li{margin:8px 0}.empty-panel{padding:28px;background:#fff;max-width:640px}.empty-panel p{margin:16px 0;color:var(--color-muted)}.error-message{background:#fff0e8;border:1px solid #eec2a9;padding:16px;border-radius:14px;color:#8b3520;font-size:14px;line-height:1.6;margin-top:16px}.storage-alert{position:fixed;z-index:20;bottom:100px;left:50%;transform:translate(-50%);width:min(640px,calc(100% - 32px));background:#fff0e8;border:1px solid #e4b09d;border-radius:16px;padding:16px;box-shadow:var(--shadow-card);display:flex;flex-wrap:wrap;gap:12px}@media(min-width:768px){.learning-page{padding:32px 24px 115px}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.page-heading h1{font-size:32px}}@media(min-width:1024px){.learning-page{padding:32px 24px}.storage-alert{left:auto;right:24px;bottom:24px;transform:none}}@media(min-width:1280px){.learning-page{padding:32px}.lesson-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.focus-layout{min-height:100dvh;background:radial-gradient(ellipse at 12% 35%,#e3f7e7,transparent 55%),linear-gradient(#fffcf6,#edf8e7)}.focus-main{max-width:680px;margin:auto;padding:20px 20px 32px;min-height:100dvh}.study-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}.study-header>div{text-align:center}.study-header p{font-size:13px;color:var(--color-muted)}.study-header h1{font-size:19px}.study-header .text-button{font-size:13px}.study-header .icon-button{font-size:24px;background:#fffa;flex-shrink:0}.study-progress{display:flex;align-items:center;gap:20px;margin:0 0 24px}.study-progress progress{width:100%;height:12px;flex:1;min-width:0;appearance:none;border:0;border-radius:12px;overflow:hidden;background:#e3e9e1}.study-progress progress::-webkit-progress-bar{background:#e3e9e1;border-radius:12px}.study-progress progress::-webkit-progress-value{background:linear-gradient(90deg,#1eab73,#7cd49c);border-radius:12px}.study-progress progress::-moz-progress-bar{background:#22ab76;border-radius:12px}.study-progress>span{font-size:15px;color:#17604b;white-space:nowrap;font-weight:800}.study-progress small{font-size:11px;font-weight:600}.flashcard{width:100%;border:1px solid #e3ecdd;border-radius:30px;box-shadow:0 8px 28px #2b77411a;background:linear-gradient(160deg,#fff 60%,#f0fbe4);min-height:360px;min-height:clamp(330px,49dvh,480px);padding:36px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow-wrap:anywhere}.flashcard-front{color:var(--color-ink);position:relative}.front-meaning{font-size:clamp(26px,5vw,38px);line-height:1.4;font-weight:800}.flashcard-front:hover{border-color:#9ed9ad}.flashcard-back{gap:12px}.hanzi{font-family:Noto Sans CJK SC,Microsoft YaHei,PingFang SC,sans-serif;font-size:clamp(48px,12vw,80px);line-height:1.3;letter-spacing:.04em;font-weight:700}.pinyin{font-size:24px;line-height:1.5}.audio-placeholder{display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:#def2db;color:#66816b;margin-top:8px;cursor:not-allowed}.audio-placeholder .icon{width:27px;height:27px}.audio-hint{font-size:11px;color:var(--color-muted)}.answer-meaning{font-size:17px;padding:16px;border:1px solid #e2ebd8;background:#f8fcf1;border-radius:16px;width:100%;margin-top:6px}.flip-hint{text-align:center;color:#426653;font-size:13px;margin:24px 0}.rating-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}.rating-actions button{min-height:90px;border-radius:22px;border:1px solid transparent;font-size:19px;font-weight:800;padding:12px;display:flex;flex-direction:column;align-items:center;gap:4px}.rating-actions button span{font-size:26px;line-height:1.2}.rating-again{background:#ffcfb5;color:#89391e;border-color:#f5b899!important}.rating-good{background:#91dfa0;color:#075c32;border-color:#79cc8a!important}.rating-actions button:hover{filter:brightness(.97)}.rating-actions button:disabled{opacity:.6;cursor:not-allowed}.pause-panel{padding:32px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;background:#fffffff0;gap:16px}.pause-panel h2{font-size:24px}.pause-panel p{font-size:14px;color:var(--color-muted);line-height:1.7}.save-status{text-align:center;font-size:12px;line-height:1.6;color:var(--color-muted);margin:16px 0;min-height:20px}.focus-main .error-message{margin:0 0 20px}.error-message p{margin:10px 0}.result-page{max-width:720px;margin:auto;padding:32px 20px}.result-celebration{text-align:center;margin-bottom:24px}.celebration-icon{display:grid;place-items:center;width:100px;height:100px;margin:8px auto 24px;border-radius:36px;background:linear-gradient(135deg,#e2f6be,#bdecd3);color:#17814b;box-shadow:0 8px 24px #22885314}.celebration-icon .icon{width:52px;height:52px}.result-celebration h1{font-size:34px;letter-spacing:-.6px}.result-celebration>p:not(.eyebrow-label){color:var(--color-muted);margin:10px 0 16px}.result-stats{background:#fff;padding:20px}.result-stats dl{margin:0}.result-stats dl>div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid #edf0e8}.result-stats dl>div:last-child{border:0}.result-stats dt{font-size:14px}.result-stats dd{margin:0;font-size:18px;font-weight:800;text-align:right}.result-stats>p{font-size:12px;color:var(--color-muted);margin-top:14px}.next-review{display:flex;align-items:flex-start;gap:12px;background:#eaf5dc;border-radius:18px;padding:18px;margin:20px 0;font-size:13px;color:#426653;line-height:1.6}.result-actions{display:grid;gap:12px}.result-actions .secondary-button{min-height:50px}.session-details{margin-top:28px}.session-details>p{font-size:13px;color:var(--color-muted);margin:10px 0}.session-details ol{list-style:none;padding:0;display:grid;gap:12px}.session-details li{background:#fff;border:1px solid var(--color-border);border-radius:18px;padding:18px;overflow-wrap:anywhere}.detail-word{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}.detail-word strong{font-size:26px}.session-details li>p{font-size:13px;color:var(--color-muted);line-height:1.7;margin:8px 0 0}@media(min-width:768px){.focus-main{padding-top:32px}.result-page{padding:40px 24px}.result-actions,.session-details ol{grid-template-columns:1fr 1fr}}@media(max-height:600px){.flashcard{min-height:260px}.focus-main{padding-top:12px}.study-header{margin-bottom:12px}.flashcard-back{gap:8px;padding:24px}}.snapshot-note{background:#fff4d9;color:#71541d;border-radius:14px;padding:14px;font-size:13px;line-height:1.6;margin:0 0 20px}@font-face{font-family:HSK Nunito;src:url(/fonts/Nunito-variable.ttf) format("truetype");font-style:normal;font-weight:200 1000;font-display:swap}*{box-sizing:border-box}body{margin:0;background:#f3f8f4;color:var(--color-ink);font-family:var(--font-ui);line-height:1.45}button,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #126aab;outline-offset:4px}button{color:inherit}h1,h2,p{margin:0}.icon{width:24px;height:24px;flex-shrink:0}.preview-layout{min-height:100dvh}.desktop-intro{display:none}.app-shell{max-width:440px;margin:auto;background:var(--color-cream);min-height:100dvh;position:relative;box-shadow:0 16px 70px #254e3910}.home-page{position:relative;padding-bottom:100px;background:linear-gradient(180deg,#e6f8ee,#f7fcf0 57%,#fffcf6);min-height:100dvh}.hero{position:relative;height:310px;overflow:hidden;background:#def6eb}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(#e4f7ecbb,transparent 35%);pointer-events:none}.home-header{position:absolute;top:0;left:0;width:100%;z-index:3;padding:24px 24px 0;display:flex;justify-content:space-between;align-items:center}.home-header h1{font-size:30px;font-weight:800;letter-spacing:-1px}.icon-button{display:grid;place-items:center;border:0;background:#fffa;border-radius:50%;height:44px;width:44px}.speech-bubble{position:absolute;z-index:1;right:22px;top:101px;max-width:174px;padding:14px 16px;background:#fffff3;border-radius:22px;box-shadow:var(--shadow-card);font-size:15px;line-height:1.45}.speech-bubble:after{content:"";position:absolute;bottom:-10px;left:20px;border-top:17px solid #fffff3;border-right:15px solid transparent;transform:rotate(8deg)}.home-content{position:relative;z-index:2;padding:0 20px;margin-top:-32px}.card{border:1px solid #e8f1e2;border-radius:var(--radius-card);box-shadow:var(--shadow-card)}.review-card{padding:20px;background:linear-gradient(135deg,#fffffff5,#f1fff0f5)}.review-heading{display:flex;gap:12px;align-items:center;justify-content:center}.icon-disc{background:#d8f7d7;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;color:#008351}.icon-disc .icon{width:28px;height:28px}h2{font-size:16px;font-weight:800}.review-heading h2{color:#17604b;font-size:18px}.availability{font-size:25px;color:#08795c;font-weight:800;letter-spacing:-.5px;margin-top:3px}.muted{color:var(--color-muted);font-size:12px}.review-description{text-align:center;margin:10px 0 14px}.primary-button{display:flex;justify-content:center;align-items:center;gap:14px;width:100%;min-height:50px;border:1px solid #16a471;border-radius:var(--radius-pill);background:linear-gradient(115deg,#28b98c,#23ac71);color:#fff;font-size:18px;font-weight:800;box-shadow:inset 0 1px #ffffff35}.primary-button:hover{background:#087955}.button-hint{display:block;text-align:center;font-size:11px;color:#526960;margin-top:7px}.progress-card{margin-top:16px;padding:18px;background:#fffffff2}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:6px}.small-badge{font-size:10px;color:#526960;background:#f0f4ec;padding:4px 7px;border-radius:20px;white-space:nowrap}.progress-meta{display:flex;justify-content:space-between;color:#16705e;font-size:13px;margin:14px 0 9px;gap:10px}.progress-meta span:last-child{color:#526960;font-size:12px}.empty-progress{height:12px;background:#eaf0e5;border-radius:12px;margin-bottom:9px}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.quick-card{position:relative;text-align:left;min-height:132px;padding:17px 16px;border:1px solid #e8efdf;border-radius:22px;box-shadow:var(--shadow-card);overflow:hidden}.quick-card strong{display:block;font-size:15px;line-height:1.35}.quick-card>span:not(.quick-icon){display:block;font-size:11px;margin-top:12px;max-width:100px}.resume-card{background:linear-gradient(135deg,#f7fdff,#e7f8ef)}.lessons-card{background:linear-gradient(135deg,#fff,#fff5e3)}.quick-icon{position:absolute;right:12px;bottom:13px;display:grid;place-items:center;width:35px;height:35px}.play-icon{color:#07904a;background:#d1f2b7;border-radius:50%}.play-icon .icon{width:20px;height:20px;fill:#1aaf59}.book-icon{color:#e39926;transform:rotate(10deg)}.book-icon .icon{width:35px;height:35px;fill:#ffe6a1}.quick-card:hover{border-color:#7acb9d}.preview-note{display:flex;align-items:center;gap:10px;padding:16px 5px 8px;color:#426653;font-size:11px}.preview-note .icon{color:#4d9e53;width:20px}.preview-note strong{font-size:12px}.data-note{font-size:11px;color:#526960;padding:0 5px 8px}.data-note summary{cursor:pointer;padding:10px 0;min-height:44px;display:list-item}.data-note p{margin-bottom:8px}.data-note a{color:#087955}.bottom-nav{position:fixed;z-index:5;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:440px;display:grid;grid-template-columns:repeat(4,1fr);background:#fffffff5;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:10px 10px max(12px,env(safe-area-inset-bottom));border-radius:28px 28px 0 0;border-top:1px solid #edf1e7;box-shadow:0 -4px 18px #314f3910}.bottom-nav button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:49px;font-size:11px;padding:3px}.bottom-nav [aria-current=page]{color:#00894e;font-weight:800}.bottom-nav [aria-current=page] .icon{fill:#20ae78;stroke:#119e65}.notice{position:fixed;z-index:10;bottom:96px;left:50%;transform:translate(-50%);width:min(calc(100% - 32px),420px);display:flex;align-items:center;gap:12px;border-radius:16px;background:#163d35;color:#fff;padding:12px 14px;box-shadow:0 4px 24px #163d3530;font-size:14px}.notice button{background:transparent;border:0;color:#fff;font-size:28px;min-width:44px;min-height:44px}.data-inspection{max-width:800px;margin:auto;padding:24px}.data-inspection aside{padding:16px;background:#fff4cf;border-radius:12px}.data-inspection section{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0}.data-inspection select{padding:8px;margin-left:8px}.data-inspection ul{list-style:none;padding:0}.data-inspection li{background:#fff;border:1px solid #d9e8e1;border-radius:12px;margin:12px 0;padding:16px}.data-inspection li p{margin:4px 0}.data-inspection strong{font-size:1.5rem}.data-inspection input{width:18px;height:18px}@media(prefers-reduced-motion:no-preference){button{transition:background .18s,border-color .18s}.primary-button:active,.quick-card:active{transform:translateY(1px)}}.nav-brand{display:none}.primary-button:disabled{color:#526960;background:#e3ede5;border-color:#d3dfd5;box-shadow:none;cursor:not-allowed;transform:none;font-size:16px}@media(min-width:768px){.app-shell{max-width:none;box-shadow:none}.home-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--dashboard-gap);padding:24px 24px 110px;align-content:start}.home-page>*,.dashboard-lower>*{min-width:0}.home-header{position:static;grid-column:1 / -1;padding:0}.hero{grid-column:1 / -1;height:320px;border-radius:var(--radius-card)}.hero-art{object-fit:contain;background:#def6eb}.speech-bubble{right:8%}.home-content,.dashboard-lower{display:contents}.review-card{grid-column:1}.progress-card{grid-column:2;margin:0;padding:24px}.quick-actions{grid-column:1 / -1;margin:0;gap:var(--dashboard-gap)}.quick-card{min-height:156px;padding:24px}.quick-card strong{font-size:17px}.quick-card>span:not(.quick-icon){font-size:13px;max-width:none;padding-right:38px}.preview-note,.data-note{grid-column:1 / -1;padding:0}.bottom-nav{max-width:none;border-radius:24px 24px 0 0}.bottom-nav button{font-size:13px}.section-heading{flex-wrap:wrap}}@media(min-width:1024px){.app-shell{padding-left:var(--sidebar-width);background:#f4f9f2}.home-page{max-width:var(--content-max);margin-inline:auto;grid-template-columns:minmax(0,3fr) minmax(0,2fr);padding:28px 24px;background:transparent}.home-header{margin-bottom:4px}.hero{grid-column:1;height:auto;min-height:0;width:100%;aspect-ratio:2 / 1;align-self:center}.hero-art{object-fit:contain}.hero:after{display:none}.speech-bubble{top:20%;left:5%;right:auto;width:47%;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;font-size:clamp(17px,1.6vw,24px);line-height:1.5}.speech-bubble:after{display:none}.review-card{grid-column:2;display:flex;flex-direction:column;justify-content:center;padding:20px}.review-heading{gap:10px}.availability{font-size:clamp(22px,2vw,28px)}.review-description{margin-block:14px}.dashboard-lower{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--dashboard-gap)}.dashboard-lower .progress-card{grid-column:auto}.quick-actions{display:contents}.quick-card{min-height:180px;padding:20px 16px 58px}.quick-card>span:not(.quick-icon){padding:0}.progress-meta{margin-top:24px}.bottom-nav{position:fixed;inset:0 auto 0 0;transform:none;width:var(--sidebar-width);height:100dvh;max-width:none;display:flex;flex-direction:column;gap:8px;padding:28px 16px;border-radius:0;border:0;border-right:1px solid #e1eddf;box-shadow:none;background:#fbfef8;overflow-y:auto}.nav-brand{display:block;font-size:26px;font-weight:800;color:var(--color-mint-dark);padding:0 12px 30px}.nav-brand span{display:block;font-size:11px;font-weight:600;color:var(--color-muted);margin-top:6px}.bottom-nav button{flex-direction:row;gap:14px;padding:14px 16px;min-height:52px;border-radius:16px;font-size:15px;flex-shrink:0}.bottom-nav [aria-current=page]{background:#e1f5e5}.bottom-nav button:hover{background:#eef7e9}.notice{left:auto;right:24px;bottom:24px;transform:none}}@media(min-width:1280px){:root{--sidebar-width: 224px;--dashboard-gap: 24px}.home-page{padding:32px}}@media(max-width:1023px){html{scroll-padding-bottom:100px}.data-note a{scroll-margin-block:100px}}