@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@600&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{font-family:'Noto Sans Thai','Noto Sans JP',system-ui,sans-serif;color:#202b49;background:#f4f6fc;font-synthesis:none;--blue:#213bc6;--ink:#202b49;--muted:#69728a;--line:#e4e8f2;--lime:#d7f576}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #6883ff;outline-offset:4px}button{touch-action:manipulation}a{color:var(--blue)}.top{height:96px;display:flex;align-items:center;justify-content:space-between;max-width:1440px;margin:auto;padding:0 48px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;color:var(--ink);font-size:27px;font-weight:700;letter-spacing:-1px;line-height:1.3}.brandmark{display:grid;place-items:center;width:48px;height:48px;background:var(--blue);color:white;font-size:33px;border-radius:15px;font-weight:500}.brand-sub{display:block;font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted);margin-top:3px}.language{font-size:14px;font-weight:500;display:flex;gap:16px;align-items:center}.language span{color:#929bb1}.workspace{max-width:1440px;margin:auto;display:grid;grid-template-columns:220px minmax(0,1fr);padding:0 48px;gap:44px}.sidebar{padding-top:40px;min-height:calc(100vh - 96px);display:flex;flex-direction:column;border-right:1px solid var(--line);padding-right:24px}.sidebar nav{display:grid;gap:10px}.nav-item{border:0;background:transparent;display:flex;gap:12px;align-items:center;padding:15px 16px;border-radius:12px;color:#626d86;font-size:15px;font-weight:500;text-align:left}.nav-item.active{background:#e6eaff;color:var(--blue);font-weight:600}.side-note{margin-top:75px;padding-left:15px}.tiny,.eyebrow{font-family:system-ui,sans-serif;font-size:12px;letter-spacing:1.8px;font-weight:650;color:var(--muted)}.side-note .tiny{font-size:10px;letter-spacing:1px}.side-note h3{font-size:29px;font-weight:500;line-height:1.5;letter-spacing:-.6px;margin:16px 0}.side-note p{font-size:14px;line-height:1.8;color:var(--muted)}.mini-path{display:flex;gap:15px;margin-top:25px;font-size:14px;color:var(--blue)}.local-note{font-size:12px;color:var(--muted);line-height:1.8;margin:55px 0 30px;padding-left:15px}.local-note span{color:#626d86}main{padding:40px 0 70px;min-width:0}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:16px}.eyebrow{color:var(--blue);font-size:11px;letter-spacing:2px;margin:0 0 9px}h1{font-size:32px;letter-spacing:-1px;line-height:1.5;margin:0;font-weight:600}.session-badge{display:flex;gap:8px;align-items:center;font-size:13px;color:#4d5b28;background:#edf6d7;padding:9px 13px;border-radius:24px}.session-badge svg{width:17px}.practice-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:24px;align-items:start}.play-panel{background:white;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 8px 35px #263b8010;min-width:0}.session-top{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line)}.text-button{display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;padding:4px 0;color:var(--blue);font-size:14px;min-height:36px;text-decoration:none}.text-button svg{width:17px;height:17px}.mode-label select{max-width:160px;border:1px solid var(--line);background:#f8f9fc;border-radius:8px;padding:7px 8px;color:#5b657d;font-size:13px}.round-track{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin:20px 0 9px}progress{appearance:none;width:100%;height:5px;border:0;background:#eef0f6;border-radius:10px;overflow:hidden;display:block}progress::-webkit-progress-bar{background:#eef0f6}progress::-webkit-progress-value{background:var(--blue);border-radius:10px}progress::-moz-progress-bar{background:var(--blue)}.prompt{text-align:center;padding:29px 0 24px}.question-tags{display:flex;justify-content:center;align-items:center;gap:9px;font-size:12px;flex-wrap:wrap;color:var(--muted)}.level-tag{font-size:12px;color:var(--blue);padding:4px 9px;border-radius:6px;background:#eef1ff;white-space:nowrap}.prompt-label{color:var(--muted);font-size:14px;margin:28px 0 10px}.prompt h2{font-size:clamp(26px,2.7vw,38px);font-weight:600;margin:0;line-height:1.7;overflow-wrap:anywhere}.prompt-rule{height:3px;width:28px;margin:22px auto 0;background:var(--lime);border-radius:4px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer{display:flex;align-items:center;justify-content:center;position:relative;padding:30px 12px 23px;min-height:109px;border:1.5px solid var(--line);border-radius:13px;background:#fff;font-size:24px;transition:background .15s,border-color .15s,transform .15s;min-width:0}.answer>span[lang]{overflow-wrap:anywhere}.answer-key{position:absolute;top:7px;left:9px;color:#6e7890;font-family:system-ui;font-size:11px;background:#f2f4f9;width:20px;height:20px;border-radius:6px;display:grid;place-items:center}.answer-key svg{width:15px;height:15px}@media (hover:hover) and (pointer:fine){.answer:not(:disabled):hover{border-color:#a6b2f0;background:#f8f9ff;transform:translateY(-2px)}}.answer.correct{background:#f1fadf;border-color:#96bd47;color:#3c631d}.answer.correct .answer-key{background:#cfe5a1;color:#3c631d}.answer.wrong{background:#fff1f0;border-color:#d68c85;color:#a23e36}.answer:disabled:not(.correct):not(.wrong){color:#7c8494;background:#fafbfc}.answer.wrong .answer-key{color:#a23e36;background:#f2cfcb}ruby{ruby-align:center}rt{font-size:.46em;color:inherit;line-height:1.5;font-weight:400}span[lang]{font-family:'Klee One','UD Digi Kyokasho NP-R','YuKyokasho','Yu Kyokasho',serif;line-height:1.9}.question-bottom{margin-top:21px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--muted)}.question-bottom .text-button{color:#63708a}.info-card{border:1px solid var(--line);border-radius:18px;padding:23px;background:#f9faff}.score-number{font-family:system-ui;font-size:42px;font-weight:600;letter-spacing:-2px;line-height:1.4;margin-top:8px}.score-number span{font-size:22px;color:#9aa3b5;font-weight:400;letter-spacing:-1px}.info-card>p{font-size:13px;color:var(--muted);margin:2px 0}.stat-divider{height:1px;background:var(--line);margin:22px 0}.level-row{display:flex;align-items:center;gap:11px;font-size:13px;color:#647089;margin-top:19px}.level-row small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:2px}.level-dot{flex-shrink:0;width:27px;height:27px;display:grid;place-items:center;background:#e9edf6;border-radius:50%;font-family:system-ui;font-size:12px}.level-row.current{color:var(--blue);font-weight:600}.level-row.current .level-dot{background:var(--blue);color:white}.info-card .small{font-size:12px;line-height:1.8;margin-top:22px}.source-note{padding:20px 8px;font-size:13px;color:var(--muted)}.source-note b{color:#4d5871;font-weight:500}.source-note p{line-height:1.8;margin:7px 0}.source-note .text-button{font-size:12px}.feedback{border-radius:13px;margin-top:20px;padding:19px;background:#f1fadf;color:#355520}.feedback.error{background:#fff4f1;color:#984c37}.feedback-title{display:flex;gap:8px;align-items:center;font-size:16px}.feedback-answer{font-size:28px;margin-top:16px}.feedback p{font-size:14px;margin:4px 0 16px}.primary{display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:11px;padding:14px 21px;background:var(--blue);color:white;font-weight:500;font-size:16px;min-height:50px;transition:background .15s}.primary:hover{background:#172ca5}.primary:disabled{background:#d8deed;color:#667189}.feedback .primary{width:100%}.input-label{font-size:14px;display:block;margin:0 0 9px}#typed{font-family:'Klee One','UD Digi Kyokasho NP-R','YuKyokasho','Yu Kyokasho',serif;width:100%;min-height:62px;border:1.5px solid #c6cee8;border-radius:10px;padding:14px;font-size:23px;color:var(--ink);background:#fcfdff}.input-hint{font-size:12px;color:var(--muted);margin:10px 0 18px}.submit{width:100%}.intro{color:var(--muted);margin:-12px 0 24px;line-height:1.8;font-size:16px}.notice{padding:15px 19px;background:#e9eefb;border-left:3px solid #6174bb;border-radius:0 10px 10px 0;font-size:14px;line-height:1.8;color:#4d5f89;margin-bottom:24px}.notice span{display:block;font-size:13px;margin-top:4px}.volume-tabs{display:grid;grid-template-columns:repeat(4,1fr);background:#e9edf7;padding:5px;border-radius:12px;gap:5px}.volume-tabs button{background:none;border:0;border-radius:9px;padding:13px;color:#65718b;font-weight:600}.volume-tabs button.active{background:white;color:var(--blue);box-shadow:0 2px 6px #20307012}.volume-tabs small{display:block;font-size:12px;font-weight:400;margin-top:3px}.chapter-toolbar{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted);gap:12px;margin:21px 0}.chapter-toolbar>div{display:flex;gap:20px}.chapter-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.chapter-card{position:relative;display:flex;align-items:center;gap:13px;padding:19px 16px;background:white;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;min-height:112px}.chapter-card.selected{border-color:#8fa2ec;background:#f9faff}.chapter-card input{appearance:auto;accent-color:var(--blue);width:19px;height:19px;flex-shrink:0}.chapter-card strong{font-weight:600;font-size:16px;display:block}.chapter-card span:not(.chapter-number):not(.counter-mark){display:block;font-size:13px;color:var(--muted);margin-top:3px}.chapter-card small{font-size:11px;color:#7c87a0;display:block;margin-top:7px}.chapter-number,.counter-mark{position:absolute;right:14px;top:15px;font-family:system-ui;font-size:21px;letter-spacing:-1px;color:#dce2f2;pointer-events:none}.chapter-card.extra{background:#eff2fa}.chapter-card.extra.selected{background:#eef2ff}.chapter-card.extra strong{font-size:15px}.selection-footer{position:sticky;bottom:16px;margin-top:24px;background:#fff;box-shadow:0 4px 30px #20307019;border:1px solid var(--line);border-radius:15px;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:14px;z-index:2}.selection-footer b{font-size:22px;color:var(--blue)}.progress-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.progress-stats>div{padding:24px;background:white;border:1px solid var(--line);border-radius:15px}.progress-stats strong{font-family:system-ui;display:block;font-size:35px;color:var(--blue);letter-spacing:-1px}.progress-stats span{font-size:13px;color:var(--muted);display:block;margin-top:5px}.memory-bars{background:white;border:1px solid var(--line);border-radius:15px;margin:20px 0 32px;padding:22px}.memory-bars>div{display:grid;grid-template-columns:170px 1fr 30px;gap:20px;align-items:center;padding:9px 0;font-size:14px}.memory-bars progress{height:9px}.memory-bars b{text-align:right;font-family:system-ui;font-weight:500}.section-title{font-size:20px;font-weight:500;margin:0 0 18px}.word-list{border:1px solid var(--line);border-radius:15px;background:white;padding:0 20px}.word-list>div{display:flex;justify-content:space-between;align-items:center;padding:19px 0;border-bottom:1px solid var(--line);gap:16px}.word-list>div:last-child{border-bottom:0}.word-title>span[lang]{display:block;font-size:22px}.word-title>span:last-child{font-size:14px;color:var(--muted);display:block;margin-top:3px}.word-result{text-align:right;flex-shrink:0}.word-result small{display:block;font-size:11px;color:var(--muted);margin-top:9px}.small{font-size:13px;line-height:1.8;color:var(--muted)}.local-explainer{margin:24px 0}.sources{background:#eaf0fb;border-radius:12px;padding:20px;font-size:14px;line-height:1.9;color:#53627f}.sources summary{cursor:pointer;color:var(--blue);font-weight:500}.sources a{display:block;margin:10px 0}.summary{text-align:center;padding:35px 0 24px}.complete-icon{display:grid;place-items:center;background:var(--lime);color:#385315;width:65px;height:65px;border-radius:50%;margin:0 auto 25px}.complete-icon svg{width:32px;height:32px}.summary h2{font-size:25px;font-weight:500}.final-score{font-family:system-ui;font-size:76px;font-weight:650;letter-spacing:-4px;color:var(--blue)}.final-score span{font-size:32px;color:#9ba7c6;font-weight:400;letter-spacing:-1px}.summary>p:not(.eyebrow){color:var(--muted);font-size:14px}.summary .primary{width:100%;margin-top:24px}.review-list{margin-top:10px;border-top:1px solid var(--line)}.review-list h3{font-weight:500;font-size:17px}.review-list>div{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px}.review-list>div>span:first-child{font-size:21px}.review-list>div>span:last-child{color:var(--muted);text-align:right}.empty{text-align:center;padding:55px 15px}.empty h2,.empty h3{font-weight:500}.empty p{color:var(--muted);font-size:15px}.empty .primary{margin:25px auto 0}.mobile-nav{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1450px){.top,.workspace{max-width:1500px}.practice-layout{grid-template-columns:minmax(0,640px) minmax(220px,1fr)}}
@media(max-width:1150px){.top{padding:0 28px}.workspace{padding:0 28px;grid-template-columns:180px minmax(0,1fr);gap:26px}.sidebar{padding-right:18px}.practice-layout{grid-template-columns:1fr}.practice-info{display:grid;grid-template-columns:1fr 1fr;gap:20px}.info-card{padding:20px}.info-card .level-row,.info-card .stat-divider,.info-card>.tiny:nth-of-type(2),.info-card .small{display:none}.side-note{padding-left:8px}.nav-item{padding:13px 9px;font-size:14px}.session-badge{font-size:12px}.page-heading h1{font-size:29px}}
@media(max-width:720px){.top{height:77px;padding:0 20px;background:#fff}.brand{font-size:24px}.brandmark{width:40px;height:40px;border-radius:12px;font-size:28px}.brand-sub{font-size:11px}.language{font-size:12px;gap:9px}.workspace{display:block;padding:0 18px}.sidebar{display:none}main{padding:26px 0 115px}.page-heading{margin-bottom:22px;gap:8px}.page-heading h1{font-size:27px}.eyebrow{font-size:10px;letter-spacing:1.7px}.session-badge{font-size:11px;padding:7px 9px;gap:4px}.session-badge svg{width:15px}.practice-layout{gap:19px}.play-panel{border-radius:18px;padding:20px 17px}.session-top{padding-bottom:16px;gap:7px}.session-top .text-button{font-size:12px;gap:5px}.mode-label select{font-size:12px;max-width:139px;padding:7px 5px;min-height:36px}.round-track{margin-top:17px}.prompt{padding:24px 0 21px}.prompt-label{font-size:13px;margin-top:25px}.prompt h2{font-size:29px;line-height:1.65}.question-tags{font-size:11px;gap:6px}.level-tag{font-size:11px;padding:4px 7px}.answers{gap:10px}.answer{font-size:23px;min-height:106px;padding:28px 8px 19px}.question-bottom{font-size:11px;margin-top:15px}.question-bottom .text-button{font-size:13px}.practice-info{display:block}.info-card{display:none}.source-note{padding:0 5px;font-size:12px}.source-note p{margin:4px 0}.source-note .text-button{font-size:12px}.mobile-nav{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#fff;border-top:1px solid var(--line);padding:9px 12px calc(9px + env(safe-area-inset-bottom));z-index:5;box-shadow:0 -3px 20px #20307008}.mobile-nav .nav-item{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:7px 3px;font-size:11px;border-radius:9px}.mobile-nav .nav-item.active{background:#edf0ff}.mobile-nav svg{width:21px;height:21px}.notice{font-size:13px;padding:13px 15px;margin-bottom:19px}.notice span{font-size:12px}.intro{font-size:14px;margin-bottom:20px}.chapter-grid{grid-template-columns:1fr;gap:10px}.chapter-card{min-height:98px;padding:15px}.chapter-card strong{font-size:16px}.chapter-card.extra strong{font-size:15px}.chapter-card span:not(.chapter-number):not(.counter-mark){font-size:13px}.chapter-card small{font-size:12px}.chapter-toolbar{font-size:12px;margin:15px 0;gap:8px}.chapter-toolbar>div{gap:12px}.chapter-toolbar .text-button{font-size:12px}.volume-tabs button{padding:11px 4px;font-size:14px}.volume-tabs small{font-size:11px}.selection-footer{bottom:calc(85px + env(safe-area-inset-bottom));padding:12px 14px;font-size:12px}.selection-footer .primary{font-size:14px;padding:12px 15px}.selection-footer b{font-size:20px}.progress-stats{gap:8px}.progress-stats>div{padding:16px 11px;border-radius:12px}.progress-stats strong{font-size:28px}.progress-stats span{font-size:11px}.memory-bars{padding:15px;margin:17px 0 25px}.memory-bars>div{grid-template-columns:127px 1fr 20px;gap:8px;font-size:12px}.word-list{padding:0 15px}.word-title>span[lang]{font-size:21px}.word-title>span:last-child{font-size:13px}.word-result small{font-size:10px}.sources{padding:16px;font-size:13px}.feedback{padding:16px}.feedback-answer{font-size:27px}.feedback-title{font-size:15px}.feedback p{font-size:13px}.summary h2{font-size:23px}.summary{padding:25px 0 20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:360px){.workspace{padding:0 12px}.top{padding:0 14px}.session-badge{display:none}.play-panel{padding:17px 13px}.answer{font-size:21px}.chapter-toolbar{flex-wrap:wrap}.language{font-size:11px}}

/* Keep frequently used controls readable at mobile widths. */
.session-top .text-button,.mode-label select,.question-bottom .text-button,.chapter-toolbar .text-button,.source-note .text-button,.mobile-nav .nav-item{font-size:14px}.session-top{flex-wrap:wrap}.mobile-nav .nav-item{font-size:13px}

/* Focused mobile practice: one task at a time. */
.practice-settings{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px;font-size:14px}
.practice-settings select{max-width:none;min-height:44px;padding:9px 12px;font-size:14px}
.vocabulary-details summary{cursor:pointer}.vocabulary-details p{margin:10px 0 0}
@media(max-width:720px){
 body{background:white}.top{height:58px;padding:0 20px}.brand{font-size:21px;gap:9px}.brandmark{width:32px;height:32px;font-size:23px;border-radius:10px}.brand-sub,.language{display:none}
 .workspace{padding:0 22px}main{padding-top:22px}.view-practice{padding-top:10px}
 .view-practice>.page-heading,.view-practice .practice-info,.view-practice .session-top{display:none}
 .view-practice .play-panel{border:0;box-shadow:none;border-radius:0;padding:0;background:transparent}
 .view-practice .round-track{font-size:14px;margin:8px 0 10px}
 .view-practice .round-track>span:last-child{display:none}
 .view-practice .prompt{padding:27px 0 28px;min-height:162px;display:flex;flex-direction:column;justify-content:center}
 .view-practice .question-tags{font-size:14px;color:var(--muted);margin-bottom:10px}
 .view-practice .question-tags .level-tag,.view-practice .prompt-label,.view-practice .prompt-rule{display:none}
 .view-practice .prompt h2{font-size:30px;line-height:1.6;margin:0}
 .view-practice .answers{gap:12px}.view-practice .answer{min-height:104px;padding:25px 10px 20px;font-size:25px;border-radius:14px}
 .view-practice .answer-key{display:none}
 .view-practice .question-bottom{justify-content:center;margin-top:17px}
 .view-practice .question-bottom>span{display:none}.view-practice .question-bottom button{min-height:44px;font-size:15px}
 .view-practice .input-label{display:none}.view-practice .input-hint{font-size:14px;line-height:1.7}
 .view-practice.has-answer .answers,.view-practice.has-answer #answer-form{display:none}
 .view-practice.has-answer .prompt{min-height:140px;padding:23px 0}
 .view-practice .feedback{margin-top:0;padding:23px 20px;text-align:center;border-radius:16px}
 .view-practice .feedback-title{justify-content:center;font-size:16px;font-weight:500}
 .view-practice .feedback-answer{font-size:34px;margin:21px 0}.view-practice .feedback>p{display:none}
 .view-practice .feedback .primary{min-height:52px;font-size:16px}
 .mobile-nav{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom));box-shadow:none}.mobile-nav .nav-item{font-size:13px;gap:3px;padding:6px 3px}
 .page-heading{margin-bottom:20px}.page-heading .eyebrow,.intro{display:none}.page-heading h1{font-size:26px}
 .chapter-card{min-height:78px;padding:14px}.chapter-card small,.chapter-number,.counter-mark{display:none}
 .chapter-card strong{font-size:16px}.chapter-card span:not(.chapter-number):not(.counter-mark){font-size:14px}
 .chapter-toolbar{flex-wrap:wrap}.vocabulary-details{font-size:14px;margin-bottom:18px;padding:11px 13px}.vocabulary-details p{font-size:14px}
 .selection-footer{bottom:calc(77px + env(safe-area-inset-bottom));margin-top:18px}
}
@media(max-width:380px){.workspace{padding:0 18px}.view-practice .prompt h2{font-size:27px}.view-practice .answer{font-size:23px;min-height:98px}}
@media(max-width:720px) and (max-height:700px){.view-practice .prompt{min-height:135px;padding:19px 0}.view-practice .answer{min-height:92px}.view-practice .question-bottom{margin-top:10px}}
/* Minna Kotoba Taigo identity and state-driven motion. */
.brand-logo{display:block;object-fit:contain;width:48px;height:48px;flex:none}
.brand-wordmark{display:flex;flex-direction:column;gap:3px;font-family:system-ui,sans-serif;line-height:1.05;letter-spacing:-.6px;font-size:22px;font-weight:750}
.brand-taigo{font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:650;color:var(--blue)}
.chapter-recommendation{display:flex;gap:15px;margin:8px 0 24px;padding:22px;background:#eef4dd;border:1px solid #dae9b2;border-radius:16px}
.recommendation-icon{flex:none;display:grid;place-items:center;width:36px;height:36px;background:var(--lime);border-radius:50%;color:#48631b}
.chapter-recommendation h3{font-size:22px;font-weight:600;margin:0;line-height:1.5}
.chapter-recommendation p:not(.eyebrow){font-size:14px;line-height:1.8;color:#586b39;margin:12px 0 18px}
.chapter-recommendation .primary{width:100%;font-size:15px}
.chapter-recommendation .text-button{display:flex;justify-content:center;width:100%;margin-top:10px;font-size:14px;min-height:44px}
#question-title:focus{outline:none}
@keyframes content-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes question-arrive{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@keyframes option-arrive{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes feedback-arrive{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mark-pop{0%{transform:scale(.75);opacity:0}65%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes check-draw{from{stroke-dashoffset:34}to{stroke-dashoffset:0}}
@keyframes progress-fill{from{transform:scaleX(var(--fill-start,1))}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:no-preference){
 .view-enter{animation:content-arrive 240ms cubic-bezier(.2,.8,.2,1) both}
 .question-enter .prompt{animation:question-arrive 240ms ease-out both}
 .question-enter .answer{animation:option-arrive 260ms cubic-bezier(.2,.8,.2,1) backwards}
 .question-enter .answer:nth-child(2){animation-delay:30ms}.question-enter .answer:nth-child(3){animation-delay:60ms}.question-enter .answer:nth-child(4){animation-delay:90ms}
 .question-enter #answer-form{animation:content-arrive 220ms ease-out both}
 .answer-enter .feedback{animation:feedback-arrive 230ms cubic-bezier(.2,.8,.2,1) both}
 .answer-enter .success .feedback-title svg{animation:mark-pop 340ms ease-out both}
 .answer-enter .success .feedback-title svg path{stroke-dasharray:34;animation:check-draw 300ms 80ms ease-out both}
 .answer-enter progress::-webkit-progress-value{transform-origin:left;animation:progress-fill 350ms ease-out both}
 .answer-enter progress::-moz-progress-bar{transform-origin:left;animation:progress-fill 350ms ease-out both}
 .run-complete .summary{animation:content-arrive 300ms ease-out both}
 .run-complete .complete-icon{animation:mark-pop 450ms 80ms ease-out both}
 .run-complete .chapter-recommendation{animation:content-arrive 320ms 160ms ease-out both}
 .answer:not(:disabled):active,.primary:not(:disabled):active{transform:scale(.97)}
 .primary,.nav-item,.chapter-card{transition:background-color 150ms,border-color 150ms,transform 120ms}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:720px){
 .brand-logo{width:38px;height:38px}.brand-wordmark{font-size:18px;letter-spacing:-.5px;gap:3px}.brand-taigo{font-size:10px;letter-spacing:2.6px}
 .chapter-recommendation{padding:19px 16px;gap:10px}.chapter-recommendation h3{font-size:20px}.recommendation-icon{width:29px;height:29px}
}

/* Handwritten Japanese letterforms, including readings and learner input. */
span[lang="ja"],#typed{font-family:'Klee One','UD Digi Kyokasho NP-R','YuKyokasho','Yu Kyokasho',serif;font-weight:600;font-synthesis:none}
span[lang="ja"] rt{font-family:inherit;font-weight:600;font-size:.5em;letter-spacing:.02em}

/* The blue/lime book icon anchors the ink wordmark to the study theme. */
.top{background:#fff;gap:16px}
.brand{flex-shrink:0;letter-spacing:normal;gap:10px}
.brand-book{display:block;width:38px;height:auto;flex:none}
.jumshimasu-wordmark{display:block;width:140px;height:auto;mix-blend-mode:multiply}
.top .language{white-space:nowrap}
@media(max-width:720px){
 .top{height:60px;gap:12px}
 .brand{gap:8px;min-height:44px}
 .brand-book{width:30px}
 .jumshimasu-wordmark{width:108px}
 .top .language{font-size:12px;gap:6px}
}
@media(max-width:359px){.top{padding-inline:14px}.jumshimasu-wordmark{width:100px}.brand-book{width:28px}.brand{gap:8px}}

/* Three modes with compact top navigation. */
.workspace{display:block;max-width:940px;padding:0 28px}
main{padding:24px 0 40px}
.top{height:76px;max-width:none;padding-inline:max(24px,calc((100vw - 1160px)/2));gap:12px}
.top-actions{display:flex;align-items:center;gap:8px}
.top-action{display:flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:10px 12px;border:0;border-radius:12px;background:transparent;font-size:14px}
.top-action.active{color:var(--blue);background:#e6eaff}
.back-practice{margin-bottom:18px}
.practice-layout{display:block;max-width:660px;margin:auto}
.run-heading{display:flex;align-items:center;justify-content:space-between;max-width:660px;margin:0 auto 14px;font-size:16px}
#timer{font-variant-numeric:tabular-nums;font-size:14px;color:var(--muted)}
.mode-home{max-width:660px;margin:16px auto}.mode-home h1{font-size:28px}
.mode-cards{display:grid;gap:12px;margin:22px 0}
.mode-card{border:1.5px solid var(--line);border-radius:16px;background:#fff;text-align:left;padding:20px;display:grid;gap:7px}
.mode-card.selected{border-color:var(--blue);background:#f0f3ff;box-shadow:inset 4px 0 var(--blue)}
.mode-card strong{font-size:20px;color:var(--ink)}.mode-card span{font-size:16px;line-height:1.7}.mode-card small{font-size:14px;color:var(--muted)}
.start-run{width:100%}
.settings-panel{display:grid;gap:16px;margin:24px 0 32px}
.settings-panel fieldset{border:1px solid var(--line);border-radius:14px;padding:14px 18px;background:#fff;min-width:0}
.settings-panel legend{font-size:18px;font-weight:600;padding:0 6px}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;font-size:16px}
.setting-row select,.setting-row input{font:inherit;border:1px solid #c6cee8;border-radius:8px;padding:10px;background:#fff;max-width:65%;min-height:44px}
.setting-row input{width:90px}.settings-panel .small{margin:0;font-size:14px}
.selection-footer{bottom:calc(12px + env(safe-area-inset-bottom))}
.summary .text-button{margin:14px auto 0}.review-list p{font-size:14px;margin:8px 0;color:var(--muted)}.review-list small{font-size:14px}
@media(hover:hover){.top-action:hover{background:#eef1ff}.mode-card:hover{border-color:#8fa2ec}}
@media(max-width:720px){
 .top{height:64px;padding-inline:16px}.top-actions{gap:4px}.top-action{padding:10px}.top-action span{display:none}
 .workspace{padding:0 20px}main{padding:20px 0 calc(28px + env(safe-area-inset-bottom))}
 .view-practice{padding-top:18px}.run-heading{margin-bottom:12px}
 .mode-home{margin:0}.mode-home h1{font-size:24px}.mode-cards{margin-top:18px}
 .mode-card{padding:16px}.mode-card strong{font-size:18px}.mode-card span{font-size:15px}
 .selection-footer{bottom:calc(10px + env(safe-area-inset-bottom))}
 .setting-row{font-size:15px;gap:10px}.settings-panel fieldset{padding:12px}
 .view-practice .round-track>span:last-child{display:inline}
}

.written-setting{cursor:pointer}.written-setting small{display:block;font-size:14px;color:var(--muted);font-weight:400}.setting-row input[type="checkbox"]{width:24px;height:24px;min-height:24px;flex:0 0 24px;accent-color:var(--blue,#213bc6);margin:10px 0}