:root{font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif;color:#293d40;background:#f1f0ed;font-synthesis:none;--ink:#30344b;--indigo:#5158b8;--paper:#fffcf8;--muted:#8d8d98;--border:#e7e4df;--orange:#d17f5d}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button,input,select,a{touch-action:manipulation}button{transition:background .15s,transform .15s,border-color .15s}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #b0b2e0;outline-offset:3px}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin-top:0}h1{font-size:30px;line-height:1.45;letter-spacing:-.7px;font-weight:700;margin-bottom:10px}h2{font-size:19px;line-height:1.5;font-weight:650}h3{font-size:16px;line-height:1.6}p{font-size:13px;color:#293d40;line-height:1.9}small{font-size:11px}.icon{height:22px;width:22px;flex-shrink:0;vertical-align:middle;stroke-width:1.8}.app-frame{width:100%;max-width:500px;min-height:100dvh;margin:auto;background:var(--paper);border-left:1px solid var(--border);border-right:1px solid var(--border);padding-bottom:100px}.topbar{height:77px;padding:0 26px;display:flex;justify-content:space-between;align-items:center;background:#fffcf8f5;backdrop-filter:blur(12px);position:sticky;top:0;z-index:30;border-bottom:1px solid #edeae4}.wordmark{border:0;background:none;display:flex;align-items:center;gap:9px;padding:0;font-size:20px;font-weight:750;letter-spacing:-.7px}.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:36px;border-radius:9px;color:var(--indigo);background:#eeedf8;font-size:24px;font-weight:650;letter-spacing:0;font-family:serif}.brand-light{color:#657479;font-weight:450}.header-actions{display:flex;align-items:center;gap:18px}.streak-pill{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:#293d40}.streak-pill .icon{width:17px;height:19px;fill:#f3dfc6;stroke:#c57e57}.streak-pill small{font-size:11px;font-weight:400;color:#657479}.profile-top{border:1px solid #e4e0db;background:#f1ece4;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#293d40}.profile-top .icon{width:17px;height:17px}main{padding:21px 25px 0}.desktop-note{position:fixed;left:calc(50% + 295px);top:90px;width:220px;color:#657479}.desktop-note b{font-size:18px;font-weight:500}.desktop-note p{font-size:11px;color:#657479;margin-top:12px}.desktop-note>span{font-size:11px;letter-spacing:4px;color:#657479}.mobile-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(500px,100%);z-index:40;background:#fffcf8f7;backdrop-filter:blur(12px);padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--border);display:flex;justify-content:space-around}.nav-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:52px;padding:7px 9px;background:transparent;border:0;color:#657479;font-size:11px;border-radius:10px}.nav-item .icon{height:22px;width:22px;stroke-width:1.7}.nav-item.active{color:var(--indigo);background:#efedf7;font-weight:650}.nav-item.active .icon{stroke-width:2}.nav-item i{position:absolute;top:0;right:3px;min-width:15px;padding:2px;border-radius:10px;background:#d28b67;color:white;font-size:11px;font-style:normal}.course-strip{display:flex;gap:7px;align-items:center;font-size:11px;color:#657479;border:1px solid var(--border);border-radius:9px;padding:11px 12px;background:#fffdf9}.course-dot{width:6px;height:6px;background:var(--course);border-radius:50%}.course-strip b{color:#293d40;font-size:11px;font-weight:650}.course-strip b>span{color:#657479;margin:0 3px}.course-strip>span:not(.course-dot){margin-left:3px}.course-strip button{border:0;background:none;margin-left:auto;padding:0;color:#657479;font-size:11px;display:flex;gap:4px;align-items:center}.course-strip button .icon{width:12px;height:12px}.home-heading{position:relative;margin:29px 0 26px;padding-right:75px}.eyebrow{font-size:11px;color:#657479;letter-spacing:1.5px;font-weight:600;margin-bottom:11px}.home-heading h1{font-size:31px;line-height:1.45;letter-spacing:0;font-weight:650;margin:0 0 11px}.home-heading p{font-size:11px;margin:0;color:#657479;line-height:1.85}.heading-glyph{position:absolute;right:8px;top:19px;color:#657479;font-size:70px;font-weight:400;font-family:serif;transform:rotate(8deg);line-height:1}.daily-meter{margin:0 1px 25px}.daily-meter>span{display:flex;gap:7px;align-items:center;font-size:11px;color:#657479}.daily-meter .icon{height:13px;width:13px}.daily-meter b{margin-left:auto;color:#293d40;font-size:12px;font-weight:600}.daily-meter small{font-size:11px;color:#657479;font-weight:400}.daily-meter>div{height:4px;background:#eae6e0;margin-top:11px;border-radius:3px;overflow:hidden}.daily-meter i{display:block;background:#9e9cc9;height:100%;border-radius:3px}.next-lesson{background:#f0eff9;border:1px solid #e3e0f0;border-radius:16px;padding:18px 20px 12px}.next-top{display:flex;align-items:center;justify-content:space-between;color:#657479;font-size:11px}.pill{background:#e5e2f3;color:#293d40;padding:5px 8px;border-radius:5px;font-size:11px}.next-body{display:flex;gap:15px;align-items:center;margin:18px 0 20px}.lesson-stamp{width:57px;height:65px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #dcd5e9;border-radius:12px;background:#faf8ff;color:#657479;font-size:31px;line-height:1;font-family:serif;flex-shrink:0}.lesson-stamp span{font-family:"Segoe UI",sans-serif;font-size:11px;letter-spacing:1px;margin-top:7px;color:#657479}.next-body h2{font-size:17px;margin:0 0 8px;line-height:1.5;color:#293d40;font-weight:650}.next-body p{font-size:11px;color:#657479;margin:0}.btn{border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:46px;padding:12px 19px;border-radius:10px;font-size:12px;font-weight:650;line-height:1.5}.btn.primary{background:#5158b8;color:white;border-bottom:3px solid #42489e;box-shadow:0 3px 8px #5158b813}.btn.primary:hover:not(:disabled){background:#6167c4}.btn.primary:active:not(:disabled){border-bottom-width:1px;transform:translateY(2px)}.btn.primary:disabled{background:#e6e3e8;color:#657479;border-color:#ded9e1;box-shadow:none;opacity:1}.btn.secondary{border:1px solid #ddd8e4;background:#fffcf8;color:#293d40}.btn .icon{height:16px;width:16px}.full{width:100%}.text-button{background:none;border:0;color:#293d40;font-size:11px;padding:9px 4px;display:inline-flex;align-items:center;gap:7px}.text-button .icon{width:14px;height:14px}.guide-button{display:flex;margin:7px auto 0;color:#657479;font-size:11px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:28px 0 15px}.section-title h2{font-size:15px;font-weight:650;margin:0}.section-title>span{font-size:11px;color:#657479}.step-list{display:flex;flex-direction:column;gap:10px}.step-card{display:flex;width:100%;text-align:left;gap:13px;align-items:center;border:1px solid #e9e4df;background:#fffdfa;border-radius:12px;padding:15px 13px;min-height:74px;position:relative}.step-card.current{border-color:#c9c4e6;background:#fbfaff}.step-card.passed{background:#f1f5ef;border-color:#e0e8db}.step-number{height:33px;width:33px;border-radius:9px;background:#f1ede8;color:#657479;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}.current .step-number{background:#e8e5f6;color:#657479}.passed .step-number{background:#e6eedf;color:#293d40}.step-number .icon{height:17px;width:17px}.step-card b{display:block;font-size:12px;font-weight:600;color:#293d40}.step-card small{display:block;font-size:11px;color:#657479;margin-top:6px;line-height:1.6}.step-end{display:flex;align-items:center;gap:7px;color:#657479;font-size:11px;margin-left:auto;white-space:nowrap}.step-end .icon,.step-card>.icon{width:13px;height:13px}.step-card>.icon{margin-left:auto;color:#657479}.review-nudge{display:flex;align-items:center;gap:14px;margin:22px 0;width:100%;padding:17px;text-align:left;background:#f8f1e8;border:1px solid #efe3d5;border-radius:12px}.review-symbol{color:#657479;font-size:32px;line-height:1}.review-nudge b{font-size:12px;font-weight:600;color:#293d40}.review-nudge p{font-size:11px;color:#657479;margin:6px 0 0;line-height:1.7}.review-nudge>.icon{margin-left:auto;width:14px;height:14px;color:#657479}.course-progress{padding:18px 2px}.course-progress>div:first-child{display:flex;justify-content:space-between;font-size:11px;color:#657479}.course-progress b{font-weight:500}.course-progress .track{height:4px;background:#ece7e0;border-radius:5px;margin-top:12px;overflow:hidden}.track i{display:block;height:100%;background:#a4a3c6}.course-progress button{border:0;background:none;font-size:11px;color:#657479;padding:13px 0 0;display:flex;align-items:center;gap:7px}.course-progress .icon{height:12px;width:12px}.signin-note{border-top:1px solid var(--border);padding:22px 0 10px;display:flex;justify-content:space-between;align-items:center;gap:10px}.signin-note button{border:0;background:none;color:var(--indigo);font-size:11px}.signin-note span{font-size:11px;color:#657479}.chooser-heading{margin:17px 0 27px}.chooser-heading h1{font-size:32px;line-height:1.5;font-weight:650;margin-bottom:15px}.chooser-heading p{font-size:12px;color:#657479;line-height:1.9}.course-choices{display:flex;flex-direction:column;gap:14px;margin:0 0 26px}.course-choice{display:flex;align-items:center;gap:16px;position:relative;text-align:left;border:1px solid var(--border);border-radius:15px;padding:22px 18px;background:#fffdfa;min-height:147px}.course-choice.selected{border:2px solid #9391c7;padding:21px 17px;background:#f5f3fc}.choice-symbol{font-size:38px;width:55px;flex-shrink:0;text-align:center;color:var(--course);font-family:serif;opacity:.75;line-height:1}.choice-symbol small{display:block;font-size:11px;letter-spacing:2px;margin-top:12px;font-family:"Segoe UI",sans-serif;opacity:.5}.course-choice>div>small{font-size:11px;line-height:1.7;color:#657479;display:block;padding-right:10px}.course-choice h2{font-size:24px;margin:7px 0;color:#293d40;line-height:1.3;font-weight:600}.course-choice h2 span{font-size:17px;color:#657479;padding:0 12px;font-weight:400}.course-choice p{font-size:11px;margin:0 0 9px;color:#657479}.choice-count{font-size:11px;color:#657479}.radio-mark{position:absolute;top:15px;right:14px;width:15px;height:15px;border:1px solid #ddd6e1;border-radius:50%}.selected .radio-mark{background:#9391c7;border-color:#9391c7;color:white}.radio-mark .icon{height:11px;width:11px;margin:1px}.placement-link{display:flex;align-items:center;justify-content:center;gap:8px;background:none;border:0;color:#657479;font-size:11px;margin:21px auto 0;padding:7px 0}.placement-link .icon{width:13px;height:13px}.fine-print{font-size:11px;line-height:1.9;text-align:center;color:#657479;margin:20px 0}.page-heading{margin:9px 0 23px}.page-heading h1{font-size:27px;font-weight:650}.page-heading p{font-size:12px;color:#657479}.course-tabs,.library-tabs{display:flex;background:#eeebe7;padding:4px;gap:4px;border-radius:10px;margin-bottom:21px}.course-tabs button,.library-tabs button{flex:1;border:0;background:transparent;color:#657479;font-size:11px;padding:11px 4px;border-radius:7px}.course-tabs .selected,.library-tabs .selected{color:#293d40;background:#fffcf8;box-shadow:0 1px 4px #57465f0a;font-weight:600}.skill-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 25px}.skill-chips span{border:1px solid #e8e0eb;background:#f7f3f9;border-radius:5px;padding:6px 8px;font-size:11px;color:#657479}.syllabus{display:flex;flex-direction:column;gap:13px}.unit-group{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fffdfa}.unit-group summary{display:flex;align-items:center;gap:12px;padding:17px 14px;cursor:pointer;list-style:none}.unit-group summary::-webkit-details-marker{display:none}.unit-no{width:35px;height:35px;background:#f0edf7;border-radius:9px;color:#657479;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}.unit-group summary b{font-size:12px;font-weight:600;line-height:1.7;display:block}.unit-group summary small{font-size:11px;color:#657479;display:block;margin-top:4px}.unit-group summary>span:last-child{font-size:17px;margin-left:auto;color:#657479}.unit-group[open] summary>span:last-child{transform:rotate(45deg)}.unit-group[open] summary{border-bottom:1px solid #eee7ef}.syllabus-lesson{border:0;background:transparent;display:flex;align-items:center;gap:12px;padding:17px 15px;text-align:left;width:100%;border-bottom:1px solid #f1eaf1}.syllabus-lesson:last-child{border:0}.syllabus-lesson>span{width:24px;flex-shrink:0;color:#657479;font-size:11px}.syllabus-lesson>span .icon{width:15px;height:15px;color:#657479}.syllabus-lesson b{font-size:11px;font-weight:500;line-height:1.6;display:block}.syllabus-lesson small{font-size:11px;color:#657479;display:block;margin-top:4px}.syllabus-lesson em{font-style:normal;margin-left:auto;font-size:11px;color:#657479}.syllabus-lesson>.icon{width:12px;height:12px;color:#657479}.assessment-card{display:flex;align-items:center;gap:12px;width:100%;padding:18px;background:#f7f1e6;border:1px solid #ebdfc9;border-radius:12px;text-align:left;margin-top:23px;color:#657479}.assessment-card>.icon{height:25px;width:25px}.assessment-card b{font-size:12px;font-weight:600;display:block}.assessment-card small{font-size:11px;color:#657479;display:block;margin-top:6px}.assessment-card>.icon:last-child{width:14px;height:14px;margin-left:auto}.note-card{padding:22px;background:#f2eff6;border:1px solid #e5deeb;border-radius:14px;margin-bottom:20px}.note-label{font-size:11px;color:#657479}.note-card h2{font-size:23px;font-weight:500;line-height:1.8;color:#293d40;margin:14px 0 10px;overflow-wrap:anywhere}.note-card>p{font-size:12px;color:#657479;margin-bottom:15px}.audio-pill{display:inline-flex;gap:6px;align-items:center;padding:8px 11px;border:1px solid #dcd6e8;border-radius:7px;background:#fbf9ff;color:#657479;font-size:11px}.audio-pill .icon{width:15px;height:15px}.explanation{font-size:12px;line-height:1.9;color:#657479;border-top:1px solid #e3d9ec;padding-top:16px;margin-top:18px}.native-tip{background:#f8f1e7;border:1px solid #eee0ce;border-radius:10px;padding:16px 18px;margin-top:20px;text-align:left}.native-tip b{font-size:11px;font-weight:600;color:#657479}.native-tip p{font-size:11px;color:#657479;margin:8px 0 0;line-height:1.9}.word-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:20px}.word-card{position:relative;min-width:0;padding:22px 15px 16px;background:#fffdfa;border:1px solid #e7dfe9;border-radius:11px;text-align:left}.word-card b{font-size:25px;line-height:1.5;color:#293d40;display:block;font-weight:500;overflow-wrap:anywhere}.word-card>span:not(.word-sound){display:block;font-size:11px;color:#657479;margin:7px 0 8px}.word-card small{font-size:11px;color:#657479;line-height:1.6;display:block}.word-sound{position:absolute;right:9px;top:9px;color:#657479}.word-sound .icon{width:14px;height:14px}.word-card[aria-busy=true]{background:#efedf8}.review-hero{padding:25px;background:#f0eff8;border:1px solid #e2deef;border-radius:15px}.review-hero>span{font-size:11px;color:#657479}.review-hero>strong{display:block;font-size:55px;font-weight:500;color:#293d40;line-height:1.3;margin:8px 0}.review-hero>strong small{font-size:13px;color:#657479;font-weight:400;margin-left:10px}.review-hero>p{font-size:11px;color:#657479;margin-bottom:20px}.review-options{margin:21px 0;border:1px solid var(--border);border-radius:12px;overflow:hidden}.review-options button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:#fffdfa;padding:19px 15px;text-align:left}.review-options button+button{border-top:1px solid var(--border)}.review-options b{font-size:12px;font-weight:500}.review-options>button>.icon{color:#657479;width:19px;height:19px}.review-options span{margin-left:auto;color:#657479;font-size:11px}.review-options>button>.icon:last-child{width:13px;height:13px}.review-list{display:flex;flex-direction:column;gap:13px}.review-item{border:1px solid var(--border);padding:19px;border-radius:12px;background:#fffdfa}.review-item>span{font-size:11px;background:#f1edf6;padding:4px 6px;border-radius:4px;color:#657479}.review-item h3{margin:14px 0 7px;font-size:16px;overflow-wrap:anywhere}.review-item p{font-size:11px;color:#657479}.empty-state{padding:40px 20px;text-align:center;font-size:12px;line-height:2;color:#657479}.search-box{display:flex;align-items:center;gap:12px;border:1px solid #e4dce8;background:#f7f3f8;border-radius:9px;padding:13px 14px;margin-bottom:20px}.search-box .icon{height:16px;width:16px;color:#657479}.search-box input{width:100%;min-width:0;border:0;background:transparent;font-size:12px;outline:none;color:#657479}.search-box input::placeholder{color:#657479;font-size:11px}.search-count{font-size:11px;color:#657479;margin:10px 0 16px}.handbook-grid{display:flex;flex-direction:column;gap:12px}.handbook-card{border:1px solid var(--border);background:#fffdfa;padding:20px;text-align:left;border-radius:12px}.handbook-card>small{font-size:11px;color:#657479}.handbook-card h3{font-size:19px;font-weight:500;margin:12px 0 8px;color:#293d40}.handbook-card p{font-size:11px;line-height:1.9;margin:0;color:#657479}.kana-guide>p{font-size:11px;color:#657479}.kana-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:20px 0}.kana-grid button{border:1px solid var(--border);border-radius:9px;padding:13px 5px;background:#fffdfa;text-align:center}.kana-grid b{font-size:24px;font-weight:500;color:#293d40;display:block;line-height:1.4}.kana-grid b small{display:block;font-size:12px;font-weight:400;color:#657479}.kana-grid>button>span{font-size:11px;color:#657479;display:block;margin-top:6px}.profile-card{display:flex;align-items:center;gap:13px;padding:20px 0 25px;border-bottom:1px solid var(--border)}.avatar{display:flex;align-items:center;justify-content:center;width:47px;height:47px;background:#f0e8e0;color:#657479;border:1px solid #e6d9ce;border-radius:14px;font-size:20px;flex-shrink:0}.profile-card>div{flex:1;min-width:0}.profile-card h2{font-size:17px;margin:0 0 5px}.profile-card p{font-size:11px;color:#657479;overflow-wrap:anywhere;line-height:1.8;margin:0}.profile-card .text-button{font-size:11px;white-space:nowrap}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:26px 0;text-align:center}.stat-grid>div+div{border-left:1px solid #e9e0eb}.stat-grid b{display:block;font-size:24px;font-weight:500;color:#293d40;line-height:1.4}.stat-grid span{font-size:11px;color:#657479;display:block;margin-top:7px}.settings-card{border:1px solid var(--border);border-radius:12px;padding:20px;margin:17px 0;background:#fffdfa}.settings-card h2{font-size:15px;font-weight:650;margin-bottom:15px}.settings-card>p{font-size:11px;color:#657479;line-height:1.9;margin:12px 0}.setting-link,.setting-row{display:flex;align-items:center;gap:10px;padding:17px 0;border:0;border-bottom:1px solid #f0e8f1;width:100%;background:transparent;text-align:left;color:#657479;font-size:11px}.setting-link:last-of-type,.setting-row:last-of-type{border:0}.setting-link b{font-size:11px;font-weight:500;color:#657479;margin-left:auto}.setting-link .icon{height:12px;width:12px;color:#657479}.setting-row small{display:block;font-size:11px;color:#657479;margin-top:5px}.setting-row select{margin-left:auto;border:1px solid #e5d8ed;border-radius:5px;padding:6px;background:white;font-size:11px;color:#657479}.setting-row input{accent-color:var(--indigo);width:17px;height:17px;margin-left:auto}.voice-tag{display:inline-block;color:#657479;background:#fbf2e4;border-radius:6px;padding:6px 9px;font-size:11px}.voice-tag.ready{background:#e8f2e3;color:#657479}.notice{padding:14px 20px;background:#faf0dd;font-size:11px;line-height:1.8;color:#657479}.modal-backdrop{position:fixed;inset:0;z-index:100;background:#33304066;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto}.auth-modal{position:relative;width:420px;max-width:100%;background:var(--paper);border-radius:20px;padding:32px 27px;max-height:95dvh;overflow:auto;box-shadow:0 25px 70px #30243826}.close-btn{position:absolute;right:15px;top:15px;border:0;background:transparent;color:#657479;padding:5px}.auth-modal .brand-mark{width:44px;height:47px;font-size:30px;margin-bottom:23px}.auth-modal h2{font-size:25px;font-weight:600;margin-bottom:8px}.auth-modal>p{font-size:12px;color:#657479}.auth-modal label{display:block;font-size:11px;color:#657479;margin-top:18px}.auth-modal input{width:100%;display:block;border:1px solid #e2d7e7;border-radius:9px;background:#fffefa;padding:13px 14px;margin-top:8px;color:#293d40;font-size:13px}.auth-modal input::placeholder{font-size:11px;color:#657479}.auth-modal .full{margin-top:22px}.auth-switch{text-align:center;margin:23px 0 10px!important;font-size:11px!important}.auth-switch button{border:0;background:none;color:#657479;font-size:12px}.auth-modal .fine-print{font-size:11px;margin:16px 0 0}#auth-error{font-size:11px;line-height:1.8;color:#657479;margin-top:12px}#turnstile-container{margin-top:20px;min-height:65px}#challenge-note{font-size:11px;margin:8px 0 0;color:#657479}#toast{position:fixed;left:50%;bottom:100px;transform:translate(-50%,10px);z-index:150;max-width:min(440px,calc(100% - 32px));width:max-content;background:#4b4559;color:#f9f4ff;padding:14px 18px;font-size:11px;line-height:1.8;border-radius:10px;box-shadow:0 8px 25px #31263720;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}#toast.show{opacity:1;transform:translate(-50%,0)}.lesson-page{min-height:100dvh;background:var(--paper);padding-bottom:190px}.lesson-header{max-width:680px;margin:auto;display:flex;align-items:center;gap:16px;padding:28px 25px 14px;color:#657479;font-size:11px}.round-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:#657479;flex-shrink:0}.round-btn .icon{width:22px;height:22px}.lesson-progress{flex:1;border-radius:5px;height:7px;background:#eae3ed;overflow:hidden}.lesson-progress i{display:block;background:#9991c4;height:100%;border-radius:5px;transition:width .2s}.lesson-timer{display:flex;align-items:center;gap:5px;font-size:11px;white-space:nowrap;color:#657479}.lesson-timer b{font-weight:400}.lesson-timer .icon{height:12px;width:12px}.lesson-label{text-align:center;font-size:11px;color:#657479;margin:9px auto 0;letter-spacing:1px}.exercise,.lesson-intro{max-width:590px;margin:auto;padding:28px 25px 0}.lesson-intro h1{font-size:27px}.lesson-intro>p{font-size:12px;color:#657479;margin-bottom:24px}.lesson-intro .word-grid{margin-top:24px}.exercise h1{font-size:25px;line-height:1.6;font-weight:600;margin-bottom:24px;color:#293d40}.prompt-card{border:1px solid #e3d7ec;background:#f6f1fb;border-radius:15px;padding:25px 20px;margin:20px 0;text-align:center}.prompt-card h2{font-size:35px;font-weight:500;line-height:1.7;margin:0;color:#657479;overflow-wrap:anywhere}.prompt-card p{font-size:13px;color:#657479;margin:10px 0 0}.prompt-card.hidden-prompt{display:none}.word-audio-controls{display:flex;justify-content:center;gap:9px;margin-top:16px}.voice-status{font-size:11px;color:#657479;text-align:center;margin:13px 0 22px;line-height:1.8}.answer-options{display:flex;flex-direction:column;gap:12px;margin:25px 0}.answer-option{display:flex;align-items:center;gap:13px;padding:16px 17px;border:1px solid #e6dae9;border-bottom:3px solid #e6dae9;border-radius:11px;background:#fffdfa;text-align:left;font-size:15px;line-height:1.8;color:#657479;min-height:61px}.answer-option>span{display:flex;align-items:center;justify-content:center;min-width:23px;height:23px;border:1px solid #e8dcee;border-radius:5px;color:#657479;font-size:11px}.answer-option.selected{background:#eeebfb;border-color:#b7a9d5;color:#657479}.answer-option.correct{background:#eff6e9;border-color:#c3d5ae;color:#657479;opacity:1}.answer-option.incorrect{background:#fcf0e9;border-color:#e3c4b7;color:#657479;opacity:1}.exercise-footer{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:23px max(calc((100vw - 650px)/2),25px) calc(25px + env(safe-area-inset-bottom));z-index:20;background:#fffcf8f8;backdrop-filter:blur(8px);border-top:1px solid #e7dceb;min-height:108px}.exercise-footer>span,.muted{font-size:11px;color:#657479}.exercise-footer .btn{min-width:150px;flex-shrink:0}.exercise-footer:has(.success){background:#f1f6ec}.exercise-footer:has(.error){background:#fcf2ec}.feedback strong{display:flex;align-items:center;gap:7px;color:#293d40;font-size:15px;font-weight:600}.feedback strong .icon{width:20px;height:20px}.feedback p{font-size:11px;line-height:1.8;color:#657479;margin:7px 0 0}.feedback.error strong{color:#657479}.feedback.error p{color:#657479}.listen-button{width:115px;height:111px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;margin:35px auto 25px;border:1px solid #dbcfed;border-bottom:4px solid #d0c2e3;border-radius:27px;background:#ebe4f8;color:#657479}.listen-button .icon{width:35px;height:35px;stroke-width:1.7}.listen-button span{font-size:11px}.audio-controls{display:flex;justify-content:center;gap:23px}.audio-controls button{background:none;border:0;font-size:11px;color:#657479;padding:5px}.audio-controls .icon{width:12px;height:12px}#transcript{border:1px solid #e5d7ed;border-radius:10px;padding:16px;background:#faf6ff;font-size:15px;line-height:1.9;color:#657479}#transcript small{display:block;font-size:11px;margin-top:9px;color:#657479}.reading-passage{padding:20px 21px;background:#f7f1fa;border:1px solid #e7d9ee;border-radius:13px;font-size:16px;line-height:2.1;color:#657479;margin:20px 0}.order-answer{display:flex;flex-wrap:wrap;gap:8px;min-height:77px;padding:16px;border:1px dashed #cebbdf;background:#faf5ff;border-radius:11px;margin:25px 0 18px}.order-answer>span{font-size:11px;color:#657479;align-self:center}.token-bank{display:flex;flex-wrap:wrap;gap:10px}.token-bank button,.order-answer button{border:1px solid #dfcfe9;border-bottom:3px solid #dfcfe9;border-radius:7px;background:#fffdfa;padding:10px 12px;font-size:15px;color:#657479;line-height:1.7}.token-bank button:disabled{opacity:.2}.matching-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0}.matching-grid>div{display:flex;flex-direction:column;gap:13px}.matching-grid button{display:flex;justify-content:space-between;align-items:center;gap:5px;min-height:71px;padding:13px;border:1px solid #e3d1ed;border-radius:10px;background:#fffdfa;font-size:16px;color:#657479}.matching-grid small .icon{width:13px;height:13px;color:#657479}.matching-grid .selected{background:#ede5f9;border-color:#c8b3df}.matching-grid .matched{background:#eef4e8;border-color:#cbd8b9;color:#657479;pointer-events:none;opacity:.65}.matching-grid .incorrect{background:#fae9e3;border-color:#dfb7a7;color:#657479}.writing-label{font-size:11px;color:#657479;display:block}.writing-label input{display:block;width:100%;border:1px solid #e1cfe9;border-radius:10px;background:#fffdfa;color:#657479;font-size:23px;padding:16px;text-align:center;margin-top:10px}.writing-label input::placeholder{font-size:12px;color:#657479}.canvas-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;color:#657479;margin:23px 0 12px}.canvas-heading small{display:block;font-size:11px;color:#657479;margin-top:5px}.canvas-heading button{background:none;border:0;color:#657479;font-size:11px}#writing-canvas{width:100%;height:190px;border:1px dashed #d9c2e5;border-radius:11px;background-color:#fffcfa;background-image:linear-gradient(#ede1f3 1px,transparent 1px),linear-gradient(90deg,#ede1f3 1px,transparent 1px);background-size:60px 60px;touch-action:none;display:block}.speaking-translation{font-size:12px;color:#657479;text-align:center;line-height:1.9}.speaking-panel{padding:22px 15px;border:1px solid #e3d1ee;border-radius:13px;text-align:center;background:#fffdfa}.speaking-panel .btn{margin:5px 3px;font-size:11px;padding:11px 14px;gap:8px}.speaking-panel p{font-size:11px;margin:18px 0 0;color:#657479}.speaking-panel audio{width:100%;margin-top:17px}.self-check{display:flex;align-items:center;justify-content:center;gap:8px;color:#657479;font-size:11px;line-height:1.9;margin-top:20px}.self-check input{accent-color:#9e8ec9;width:18px;height:18px;flex-shrink:0}#recognition-result{font-size:12px;color:#657479;line-height:1.8;margin-top:15px}.completion-page{max-width:510px;min-height:100dvh;background:var(--paper);margin:auto;padding:50px 28px;text-align:center}.completion-stamp{display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #dcd0e8;width:135px;height:143px;margin:15px auto 34px;border-radius:26px;background:#f1eaf8;color:#657479;font-family:serif;font-size:65px;line-height:1;transform:rotate(-5deg)}.completion-stamp span{font-family:"Segoe UI",sans-serif;letter-spacing:2px;font-size:11px;margin-top:17px;color:#657479}.completion-page h1{font-size:25px;font-weight:600;color:#657479;line-height:1.6}.completion-page>p{font-size:12px;color:#657479}.result-stats{display:flex;gap:10px;border:1px solid #e2d1ee;border-radius:12px;padding:23px 10px;margin:29px 0;background:#fffdfa}.result-stats>div{flex:1}.result-stats>div+div{border-left:1px solid #eaddf2}.result-stats b{display:block;font-size:26px;font-weight:500;color:#657479;line-height:1.5}.result-stats span{display:block;font-size:11px;color:#657479;margin-top:6px}.completion-tip{font-size:11px!important;line-height:1.9;padding:17px;border-radius:10px;background:#f5edf9;color:#657479!important}#save-status{font-size:11px;color:#657479;margin:24px 0}.completion-page .btn+.btn{margin-top:14px}.hidden-prompt{display:none}[hidden]{display:none!important}
@media(min-width:761px){.app-frame{box-shadow:0 0 50px #54434d04}.lesson-page{padding-bottom:170px}.lesson-header{padding-top:35px}.exercise,.lesson-intro{padding-top:35px}.completion-page{margin-top:25px;min-height:auto;border:1px solid var(--border);border-radius:20px;margin-bottom:25px}}
@media(max-width:1120px){.desktop-note{display:none}}
@media(max-width:500px){:root{background:var(--paper)}.app-frame{border:0}.topbar{height:69px;padding:0 22px}.wordmark{font-size:19px}.brand-mark{width:31px;height:34px;font-size:23px}.header-actions{gap:15px}main{padding:20px 22px 0}.home-heading{margin-top:26px;margin-bottom:24px}.home-heading h1{font-size:30px}.heading-glyph{right:5px;font-size:66px}.next-lesson{padding:17px 17px 11px}.next-body{gap:13px}.next-body h2{font-size:16px}.next-body p{font-size:11px}.lesson-stamp{width:53px;height:61px}.step-card{gap:11px;padding:14px 12px}.step-card b{font-size:11px}.step-card small{font-size:11px}.step-end{font-size:11px;gap:4px}.step-number{width:31px;height:31px}.mobile-nav{padding:9px 10px calc(9px + env(safe-area-inset-bottom))}.nav-item{min-width:50px;font-size:11px}.chooser-heading h1{font-size:30px}.course-choice{padding:20px 14px;gap:12px;min-height:142px}.course-choice.selected{padding:19px 13px}.choice-symbol{width:47px;font-size:34px}.course-choice h2{font-size:23px}.course-choice>div>small{font-size:11px}.course-choice p{font-size:11px}.choice-count{font-size:11px}.course-strip>span:not(.course-dot){font-size:11px}.unit-group summary{gap:10px}.unit-group summary b{font-size:11px}.word-card{padding:23px 13px 15px}.word-card b{font-size:23px}.word-card small{font-size:11px}.word-grid{gap:10px}.lesson-page{padding-bottom:190px}.lesson-header{padding:24px 19px 13px;gap:12px;font-size:11px}.lesson-timer{font-size:11px}.lesson-label{font-size:11px}.exercise,.lesson-intro{padding:26px 22px 0}.exercise h1{font-size:23px;line-height:1.6}.prompt-card{padding:22px 17px}.prompt-card h2{font-size:31px}.answer-option{font-size:14px;min-height:62px;padding:14px 15px}.exercise-footer{flex-direction:column;align-items:stretch;gap:13px;padding:17px 22px calc(22px + env(safe-area-inset-bottom))}.exercise-footer .btn{width:100%;min-height:46px}.exercise-footer>span,.muted{font-size:11px;display:block;text-align:center}.feedback strong{font-size:14px}.feedback p{font-size:11px;line-height:1.8}.reading-passage{padding:18px;font-size:15px;line-height:2.1}.completion-page{padding:38px 23px}.completion-page h1{font-size:24px}.result-stats b{font-size:24px}.auth-modal{padding:28px 23px}.settings-card{padding:18px}.stat-grid b{font-size:23px}.stat-grid span{font-size:11px}.kana-grid{gap:6px}.kana-grid b{font-size:22px}.matching-grid{gap:12px}.matching-grid button{font-size:14px;min-height:69px;padding:11px}.token-bank button,.order-answer button{font-size:14px;padding:9px 10px}}
@media(max-width:360px){main{padding-left:17px;padding-right:17px}.topbar{padding:0 17px}.course-strip>span:not(.course-dot){display:none}.home-heading h1{font-size:28px}.choice-symbol{width:40px;font-size:29px}.course-choice h2{font-size:21px}.course-choice h2 span{padding:0 9px}.course-choice p{font-size:11px}.choice-count{font-size:11px}.profile-card{flex-wrap:wrap}.stat-grid b{font-size:21px}.matching-grid{gap:9px}.matching-grid button{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* The path keeps the existing lesson flows, with clearer type and touch targets. */
.app-frame:has(.course-choices) .mobile-nav{display:none}
.app-frame:has(.course-choices) .course-choices+.btn{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(440px,calc(100% - 40px));z-index:45;box-shadow:0 0 0 12px #fffefa}
:root{--ink:#293d40;--indigo:#147d88;--paper:#fffefa;--muted:#657479;--border:#e2e7e3;--orange:#e87831;background:#f0f3f1;color:var(--ink);font-family:"Segoe UI","Microsoft YaHei",sans-serif}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline-color:#178c9c}
h1,h2,h3{color:var(--ink);letter-spacing:0}p{font-size:14px;color:var(--muted)}
.app-frame{max-width:480px;padding-bottom:100px;border-color:#e1e7e3;background:var(--paper)}
.app-frame>main{padding:16px 20px 0}.topbar{height:65px;padding:0 20px;background:#fffefa;border-color:var(--border);backdrop-filter:none}
.wordmark{font-size:18px;letter-spacing:-.5px}.brand-mark{background:#fff0d9;color:#bc5722;border:1px solid #f5d5a4;border-radius:11px;font-family:inherit;font-size:25px;font-weight:800;width:33px;height:35px;transform:rotate(-5deg)}.brand-light{color:#657479;font-weight:600}.header-actions{gap:14px}.profile-top{display:none}
.streak-pill,.xp-pill{display:flex;align-items:center;gap:4px;font-size:15px;font-weight:750;white-space:nowrap}.streak-pill{color:#a94a21}.streak-pill .icon{width:21px;height:24px;fill:#ffb86b;stroke:#b7602d}.streak-pill small,.xp-pill small{font-size:10px;color:#657479}.xp-pill{color:#a37813}.xp-pill .icon{height:21px;width:21px;fill:#ffdf69;stroke:#c58a21}
.mobile-nav{width:min(480px,100%);padding:8px 9px calc(8px + env(safe-area-inset-bottom));background:#fffefa;border-top:2px solid #e5e9e3;backdrop-filter:none}
.nav-item{font-size:11px;gap:5px;min-width:52px;padding:8px 10px;border-radius:13px;color:#718185;font-weight:650}.nav-item .icon{width:25px;height:25px;stroke-width:2}.nav-item.active{background:#e7f3f1;color:#08727e;box-shadow:inset 0 0 0 1px #c2e3df}.nav-item.active .icon{fill:#d4eae5;stroke-width:2}.nav-item i{background:#df6d32;color:white}
.journey-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.route-switch{display:flex;align-items:center;gap:8px;border:0;background:none;padding:3px 0;font-size:14px}.route-level{display:grid;place-items:center;background:#e4f2ed;border:1px solid #c5e3d8;color:#276d65;border-radius:8px;width:32px;height:29px;font-size:12px;font-weight:800}.chevron{font-size:20px;color:#70817f;line-height:1}.route-catalog{display:flex;align-items:center;gap:6px;border:0;background:none;color:#627773;padding:8px 0;font-size:12px}.route-catalog .icon{width:17px;height:17px}
.unit-banner{background:#e9813a;border:1px solid #d8732d;border-bottom:4px solid #c86628;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px;color:white;min-height:112px}.unit-banner>div{min-width:0}.unit-banner span{font-size:12px;font-weight:650;color:#fff7e9}.unit-banner h1{font-size:25px;line-height:1.4;color:white;margin:7px 0 5px;font-weight:800;overflow-wrap:anywhere;letter-spacing:1px}.unit-banner p{font-size:12px;color:#fff9f0;margin:0;line-height:1.6}.unit-banner>button{width:43px;height:47px;border:2px solid #ffb577;border-bottom:4px solid #b75d25;background:#dc742f;border-radius:12px;flex-shrink:0;color:#fffaf0;display:grid;place-items:center}.unit-banner .icon{height:23px;width:23px}
.daily-quest{display:flex;align-items:center;gap:11px;margin:18px 0 22px;padding:0 2px}.quest-icon{display:grid;place-items:center;width:37px;height:39px;background:#fff1cf;border-radius:11px;color:#ad761c}.quest-icon .icon{width:23px;height:23px}.daily-quest>div{flex:1}.daily-quest>div>div:first-child{display:flex;justify-content:space-between;font-size:12px;gap:10px;align-items:center}.daily-quest b{font-size:13px}.daily-quest span:not(.quest-icon){color:#697b7b;font-size:11px}.quest-track{height:9px;background:#eceee5;border-radius:8px;margin-top:9px;overflow:hidden}.quest-track i{display:block;height:100%;background:#eeb840;border-radius:8px;min-width:0}.daily-quest>button{background:none;border:0;color:#798782;padding:10px 0 10px 5px}.daily-quest>button .icon{height:18px;width:18px}
.path-heading{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:17px}.path-heading h2{font-size:14px;font-weight:750;margin:0}.path-heading>span{font-size:11px;color:#73827e}
.learning-path{position:relative;margin:2px auto 10px;width:100%;max-width:360px;height:560px}.path-line{position:absolute;inset:7px 0 0;width:100%;height:540px;pointer-events:none}.path-line path{stroke:#e5e9e0;stroke-width:9;stroke-linecap:round;stroke-dasharray:2 17;fill:none}
.path-stop{position:absolute;width:100%;height:88px;left:0;--x:50%}.stop-0{top:33px;--x:50%}.stop-1{top:139px;--x:29%}.stop-2{top:245px;--x:71%}.stop-3{top:351px;--x:29%}.stop-4{top:457px;--x:50%}.node-wrap{position:absolute;left:var(--x);transform:translateX(-50%);width:76px;height:79px;z-index:2}.path-node{width:76px;height:69px;border-radius:50%;border:3px solid #dce1da;border-bottom:3px solid #dce1da;background:#eef0ea;box-shadow:0 7px 0 #d6ddd3;display:grid;place-items:center;color:#9da99e;opacity:1;transition:transform .12s,box-shadow .12s}.path-node:disabled{opacity:1}.path-node .icon{width:29px;height:29px;stroke-width:2.8}.current .path-node{background:#ec9146;border-color:#ffb86d;box-shadow:0 7px 0 #c96b2c,0 0 0 7px #fff4dc;color:white}.current .path-node:active{transform:translateY(5px);box-shadow:0 2px 0 #c96b2c,0 0 0 7px #fff4dc}.completed .path-node{background:#36988e;border-color:#65b9a9;box-shadow:0 7px 0 #26786f;color:white}.completed .path-node:active{transform:translateY(5px);box-shadow:0 2px 0 #26786f}.start-bubble{position:absolute;bottom:89px;left:50%;transform:translateX(-50%);padding:7px 11px;background:white;border:2px solid #e6be80;box-shadow:0 2px 0 #f6e3c2;color:#9a6023;font-size:12px;font-weight:750;white-space:nowrap;border-radius:10px}.start-bubble:after{content:"";position:absolute;bottom:-6px;left:calc(50% - 5px);width:8px;height:8px;background:white;border-bottom:2px solid #e6be80;border-right:2px solid #e6be80;transform:rotate(45deg)}
.node-caption{position:absolute;left:calc(var(--x) + 52px);top:14px;display:flex;flex-direction:column;gap:4px;white-space:nowrap}.node-caption b{font-size:15px;font-weight:750}.node-caption span{font-size:11px;color:#7b8883}.node-caption small{font-size:10px;color:#78867e}.upcoming .node-caption b{color:#77847e}.stop-2 .node-caption,.stop-4 .node-caption{left:auto;right:calc(100% - var(--x) + 52px);text-align:right}.current .node-caption b{color:#9d531c}.completed .node-caption b{color:#247769}.node-star{position:absolute;right:-3px;top:-1px;color:#d49a25;background:#fff9df;border:2px solid #ebc46e;border-radius:50%;width:24px;height:24px;text-align:center;line-height:20px;font-size:13px}.path-companion{position:absolute;right:0;top:105px;width:119px;pointer-events:none;transform:rotate(3deg)}.sparrow{width:100%;height:auto;display:block}.path-companion>span{font-size:10px;display:block;text-align:center;color:#8a7656;margin-top:-1px;font-weight:650}
.lesson-ticket{display:flex;align-items:center;gap:12px;padding:17px 14px;border:2px solid #e9dcb9;border-radius:14px;background:#fff9e8;position:relative}.ticket-icon{color:#b38826;display:grid;place-items:center;background:#ffedb1;border-radius:12px;width:41px;height:45px;flex-shrink:0}.ticket-icon .icon{fill:#ffdf6c;width:25px;height:25px}.lesson-ticket b{font-size:13px;color:#795c25;line-height:1.5}.lesson-ticket p{font-size:11px;margin:5px 0 0;color:#89794d}.ticket-stamp{margin-left:auto;flex-shrink:0;display:grid;place-items:center;width:37px;height:41px;border:2px dashed #ddca91;color:#b39a59;border-radius:8px;transform:rotate(8deg);font-size:22px}
.review-nudge{background:#edf6f2;border:1px solid #d7e8df;padding:17px 14px;gap:12px;border-radius:15px;margin:18px 0}.review-symbol{display:grid;place-items:center;width:39px;height:40px;background:#d8ece1;border-radius:11px;color:#397e68;flex-shrink:0}.review-symbol .icon{width:25px;height:25px}.review-nudge b{font-size:14px;color:#356e60}.review-nudge p{font-size:11px;color:#617d71;line-height:1.7;margin-top:4px}.review-nudge>.icon{color:#47816c;height:18px;width:18px}.next-unit-peek{border:0;border-top:1px solid var(--border);background:none;display:grid;grid-template-columns:1fr auto;text-align:left;width:100%;gap:8px;padding:21px 1px;color:#62766d}.next-unit-peek>span{grid-column:1;font-size:11px}.next-unit-peek b{font-size:14px;grid-column:1}.next-unit-peek .icon{grid-column:2;grid-row:1/3;width:19px;height:19px;align-self:center}.signin-note{padding-top:18px}.signin-note button{font-size:13px;font-weight:650}.signin-note span{font-size:11px}
.btn{font-size:15px;min-height:50px;border-radius:13px;font-weight:750}.btn.primary{background:#198692;border:2px solid #198692;border-bottom:5px solid #08616c;color:white;box-shadow:none}.btn.primary:hover:not(:disabled){background:#2296a1}.btn.primary:active:not(:disabled){border-bottom-width:2px;transform:translateY(3px)}.btn.secondary{border:2px solid #dfe6e0;border-bottom-width:4px;color:#33777a;background:white}.btn .icon{width:20px;height:20px}.btn.primary:disabled{background:#e5e9e3;color:#7c8a80;border-color:#d4dcd3}
.chooser-heading{margin-top:12px}.chooser-heading h1{font-size:27px;line-height:1.4}.chooser-heading p,.page-heading p{font-size:14px;color:#657479}.eyebrow{font-size:12px;letter-spacing:.5px;color:#71817a}.course-choice{background:white;border:2px solid #e3e8df;border-bottom-width:5px;padding:20px 16px;gap:14px}.course-choice.selected{background:#edf7f3;border:2px solid #55aa93;border-bottom-width:5px;padding:20px 16px}.course-choice>div>small{font-size:12px;color:#657479}.course-choice h2{font-size:26px;color:#293d40}.course-choice p{font-size:12px;color:#657479}.choice-count{font-size:11px;color:#75847a}.choice-symbol{opacity:1;font-family:inherit;font-weight:750;color:#438d79}.choice-symbol small{display:none}.radio-mark{width:19px;height:19px;top:12px;right:12px;border:2px solid #ccd8ce}.selected .radio-mark{background:#3a9b81;border-color:#3a9b81}.radio-mark .icon{height:13px;width:13px;margin:1px}.placement-link{color:#237b88;font-size:13px;line-height:1.7;text-align:left}.fine-print{font-size:12px;color:#708078;line-height:1.8}.page-heading h1{font-size:27px}.course-tabs,.library-tabs{background:#ecf0e9;border-radius:13px;padding:5px}.course-tabs button,.library-tabs button{font-size:13px;color:#64766c;min-height:43px}.course-tabs .selected,.library-tabs .selected{color:#236c62;background:white;border-radius:9px}.skill-chips span{color:#587367;background:#eff5ef;border-color:#dce6da;font-size:11px}
.unit-group{border:2px solid #e3e8df;background:white}.unit-group summary{padding:17px 14px;gap:12px}.unit-group summary b{font-size:14px}.unit-group summary small,.syllabus-lesson small{font-size:12px;color:#6d7d72}.unit-no{background:#e7f2e9;color:#418764;font-weight:750}.syllabus-lesson b{font-size:14px}.syllabus-lesson>span{background:#f2f4ee;color:#6a7c6c}.syllabus-lesson em{color:#64776b;font-size:12px}.assessment-card{background:#fff4d9;border:2px solid #eddbaf;color:#977121;border-radius:15px}.assessment-card b{font-size:15px}.assessment-card small{font-size:12px;color:#887341}
.section-title h2{font-size:17px}.section-title>span{font-size:11px}.step-card{border:2px solid #e3e8df;background:white;border-bottom-width:4px}.step-card b{font-size:14px;color:#324b45}.step-card small{font-size:12px;color:#6d7c72}.step-number{color:#528675;background:#e9f2ea;font-weight:750}.step-end{font-size:12px}.note-card{background:#fff9ea;border-color:#eadfbe}.note-card h2{color:#354a43}.note-label{color:#947732}.explanation{font-size:14px;color:#54685b;line-height:1.9}.native-tip{background:#fff2d6;border-color:#f1ddae;border-radius:12px}.native-tip b{font-size:13px;color:#92691e}.native-tip p{font-size:13px;color:#846f46}.word-card{background:white;border:2px solid #e2e8df;border-bottom:4px solid #d9e1d7;border-radius:14px;padding:26px 15px 16px}.word-card b{font-size:27px;font-weight:650;color:#304a40}.word-card>span:not(.word-sound){font-size:13px;color:#498270}.word-card small{font-size:12px;color:#6c7b6f}.word-sound{color:#46917c}.word-sound .icon{width:18px;height:18px}.word-card[aria-busy=true]{background:#edf7f0}.audio-pill{background:#e9f5f2;border:1px solid #c5e0d8;color:#277a70;font-size:12px;min-height:36px;padding:7px 10px;border-radius:9px}.audio-pill .icon{width:18px;height:18px}
.review-hero{background:#eaf5ef;border:2px solid #d6e8dc}.review-hero>span{color:#59816d;font-size:13px}.review-hero>strong{color:#287b63;font-size:58px;font-weight:750}.review-hero>strong small{color:#5b806e}.review-hero>p{color:#5b7666;font-size:13px}.review-options{border:2px solid #e0e8dc}.review-options button{background:white;min-height:70px}.review-options b{font-size:14px}.review-options span{font-size:14px}.review-item{background:white;border:2px solid #e3e8df}.review-item p{font-size:13px;color:#64796b}.empty-state{color:#718375;font-size:13px}.review-item>span{background:#edf5ec;color:#567b62}
.search-box{background:#f2f6ef;border:2px solid #dce7d7;padding:13px}.search-box input{font-size:14px;color:#304b38}.search-box input::placeholder{font-size:12px;color:#7a8a77}.search-count{font-size:12px;color:#697d66}.handbook-card{background:white;border:2px solid #e0e8db}.handbook-card h3{color:#365e45;font-size:20px}.handbook-card p{color:#657c65;font-size:13px}.kana-grid button{background:white;border:2px solid #e0e8da;border-bottom-width:4px}.kana-grid b{color:#345e42;font-size:26px;font-weight:700}.kana-grid b small{color:#66906c;font-size:14px}.kana-grid>button>span{font-size:12px;color:#647d61}.kana-guide>p{color:#647b62;font-size:13px}
.settings-card{background:white;border:2px solid #e0e7de;border-radius:15px}.settings-card h2{font-size:17px}.settings-card>p{font-size:13px;color:#697b6c}.setting-link,.setting-row{font-size:14px;color:#425f49;border-bottom-color:#e8ede4}.setting-link b{font-size:13px;color:#427b5b}.setting-row small{font-size:11px;color:#7b8b76}.setting-row select{font-size:13px;color:#456c4b;border-color:#d6e2d1}.profile-card h2{font-size:20px}.profile-card p{font-size:12px;color:#6a7e6b}.profile-card .text-button{font-size:13px;color:#2c7b63}.avatar{background:#fff0cc;color:#ad7533;border-color:#edcd93}.stat-grid b{font-size:27px;font-weight:750;color:#3e7f5b}.stat-grid span{font-size:11px;color:#6b8269}.voice-tag{font-size:12px;color:#8c682c}.voice-tag.ready{color:#2d7858;background:#e9f6e7}
.auth-modal{background:#fffefa;border-radius:20px}.auth-modal label{font-size:14px;color:#566d5c}.auth-modal input{font-size:16px;color:#2e4836;border:2px solid #dce6d7;background:white;min-height:49px}.auth-modal input::placeholder{font-size:13px;color:#82917b}.auth-modal>p{font-size:13px;color:#697b65}.auth-modal .fine-print{font-size:11px;color:#788570}.auth-switch button{color:#137e89;font-size:14px}.auth-switch{font-size:13px!important}#auth-error{font-size:13px;color:#b34c36}#challenge-note{font-size:12px;color:#6d7b68}.close-btn{color:#72836c;min-width:36px;min-height:36px}#toast{font-size:13px;background:#334f48;color:white;max-width:min(440px,calc(100% - 32px))}
.lesson-page{background:var(--paper)}.lesson-header{color:#6d8072;font-size:12px}.lesson-progress{height:13px;background:#e8eddf;border-radius:10px}.lesson-progress i{background:#4da781;border-top:3px solid #7fc6a2;border-radius:10px}.lesson-label{font-size:12px;letter-spacing:0;color:#748471}.lesson-timer{font-size:12px;color:#76886e}.lesson-timer b{font-weight:600}.round-btn{color:#829378}.exercise h1{font-size:24px;font-weight:750;color:#2f4536}.lesson-intro>p{font-size:14px;color:#697c66}.prompt-card{background:#f0f7ec;border:2px solid #d9e7d1;border-radius:17px}.prompt-card h2{font-size:36px;color:#324e37;font-weight:650}.prompt-card p{font-size:15px;color:#5a815b}.voice-status{font-size:12px;color:#708369}.answer-option{font-size:16px;padding:16px;border:2px solid #dce5d6;border-bottom-width:5px;border-radius:14px;color:#3b503d;background:white;min-height:65px}.answer-option>span{color:#829378;border-color:#d8e2cf;font-size:11px;border-radius:7px}.answer-option.selected{background:#e8f5f4;border-color:#56aab0;color:#226a72}.answer-option.correct{background:#eaf6e3;border-color:#7db368;color:#35752f}.answer-option.incorrect{background:#fff0e8;border-color:#d99a7b;color:#aa533a}.exercise-footer{background:#fffefa;border-top:2px solid #e4eadd;backdrop-filter:none}.exercise-footer>span,.muted{font-size:12px;color:#78896f}.exercise-footer:has(.success){background:#edf7e5}.exercise-footer:has(.error){background:#fff0e5}.feedback strong{color:#3b7b31;font-size:17px}.feedback p{color:#5e7a4e;font-size:13px}.feedback.error strong{color:#a85130}.feedback.error p{color:#8d6449}.listen-button{background:#29939a;border:3px solid #55b4b5;border-bottom:7px solid #176e75;color:white;border-radius:25px}.listen-button span{font-size:13px;color:white}.audio-controls button{font-size:13px;color:#277a7f;min-height:40px}#transcript{color:#49734f;background:#eef6e8;border-color:#d6e3cc}#transcript small{color:#708568;font-size:12px}.reading-passage{font-size:17px;color:#3a533b;background:#f5f8ee;border:2px solid #e0e8d6;border-radius:15px;line-height:2}.order-answer{background:#f6f9ef;border:2px dashed #bbcea8}.order-answer>span{font-size:13px;color:#7d8e6d}.token-bank button,.order-answer button{color:#405e3d;background:white;border:2px solid #dae5ce;border-bottom-width:4px;border-radius:10px;font-size:16px}.matching-grid button{background:white;border:2px solid #dbe6cf;border-bottom-width:4px;color:#405e3b;font-size:16px}.matching-grid .selected{background:#edf7ec;border-color:#88b87a}.matching-grid .matched{background:#e9f4e0;border-color:#a7c28e;color:#557c3e;opacity:1}.matching-grid .incorrect{background:#fff1e5;border-color:#d99f7e;color:#a86740}.writing-label{font-size:14px;color:#526d46}.writing-label input{color:#355b31;border:2px solid #d3e2c4;background:white;font-size:25px}.writing-label input::placeholder{font-size:14px;color:#889c74}.canvas-heading{font-size:13px;color:#657e54}.canvas-heading small{font-size:11px;color:#7f926d}.canvas-heading button{font-size:13px;color:#497a41}#writing-canvas{border-color:#c9dcb7;background-color:#fffefa;background-image:linear-gradient(#e9efdf 1px,transparent 1px),linear-gradient(90deg,#e9efdf 1px,transparent 1px)}.speaking-panel{border:2px solid #d9e5ca;background:white}.speaking-panel .btn{font-size:13px;min-height:45px}.speaking-panel p{color:#7d8e6b;font-size:12px}.self-check{font-size:13px;color:#617a49}.self-check input{accent-color:#6d9f51}.speaking-translation{color:#6c8056;font-size:14px}#recognition-result{color:#5a7c3f;font-size:14px}
.completion-page{background:var(--paper)}.completion-stamp{background:#fff0c3;border:3px solid #e8bc58;color:#c38b29;border-radius:50%;width:132px;height:132px;font-family:inherit;font-size:63px;font-weight:800;box-shadow:0 7px 0 #eddb9d}.completion-stamp span{color:#a37b2f;font-size:9px;letter-spacing:1px}.completion-page h1{color:#374e38;font-size:28px;font-weight:800}.completion-page>p{font-size:14px;color:#6d805e}.result-stats{border:2px solid #e0e8d5;background:white;border-radius:15px}.result-stats b{font-size:28px;font-weight:750;color:#4b8150}.result-stats span{font-size:12px;color:#7c8f6c}.completion-tip{background:#f0f6e6;color:#6a8052!important;font-size:13px!important}#save-status{font-size:12px;color:#788e5e}
@media(max-width:360px){.app-frame>main{padding:14px 15px 0}.topbar{padding:0 15px}.header-actions{gap:10px}.wordmark{font-size:16px}.brand-mark{width:29px;height:31px;font-size:23px}.streak-pill,.xp-pill{font-size:13px}.xp-pill small{display:none}.unit-banner{padding:16px 13px}.unit-banner h1{font-size:23px}.route-switch{font-size:13px}.route-catalog{font-size:11px}.node-caption{left:calc(var(--x) + 45px)}.stop-2 .node-caption,.stop-4 .node-caption{right:calc(100% - var(--x) + 45px)}.node-caption b{font-size:14px}.node-caption span{font-size:10px}.node-wrap{width:69px}.path-node{width:69px;height:64px}.path-companion{width:103px;right:0}.course-choice{padding:18px 12px;gap:11px}.course-choice.selected{padding:18px 12px}.choice-symbol{width:35px;font-size:30px}.course-choice h2{font-size:24px}.course-choice>div>small{font-size:11px}.course-choice p{font-size:11px}.choice-count{font-size:10px}.lesson-ticket{padding:15px 11px;gap:10px}.lesson-ticket b{font-size:12px}.ticket-stamp{width:29px;height:35px}.ticket-icon{width:33px}.nav-item{padding:8px 7px;min-width:48px}.exercise,.lesson-intro{padding-left:18px;padding-right:18px}.matching-grid button{font-size:14px}}