:root{--blue:#2c50e8;--navy:#142449;--ink:#172442;--muted:#737e93;--line:#e4e8f0;--bg:#f6f8fc;--pale:#edf1ff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft Yahei",sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #829eff;outline-offset:4px}button{transition:background .15s,transform .15s}button:hover:not(:disabled){filter:brightness(.96)}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}.sidebar{position:fixed;inset:0 auto 0 0;width:244px;background:var(--navy);padding:34px 20px;display:flex;flex-direction:column;color:white}.brand{display:flex;gap:12px;align-items:center;color:white;text-decoration:none;font-size:19px;font-weight:650;padding:0 9px}.brand-icon{width:43px;height:47px;border-radius:12px;background:var(--blue);text-align:center;line-height:47px;font-size:31px;font-family:serif}.brand small{display:block;color:#95a9d0;letter-spacing:3px;font-size:10px;margin-top:2px}.nav-label{font-size:12px;color:#8d9cba;letter-spacing:2px;margin:56px 18px 16px}.nav-item{display:flex;align-items:center;text-align:left;width:100%;border:0;background:none;color:#bcc8e0;padding:16px 14px;border-radius:11px;gap:14px;margin:5px 0}.nav-item.active{background:#2b3d66;color:white;box-shadow:inset 3px 0 #7993ff}.nav-item small{display:block;font-size:12px;color:#96a6c5;margin-top:3px}.nav-icon{font-size:23px;width:27px;text-align:center}.nav-no{margin-left:auto;color:#8a9bbd;font-size:11px}.side-bottom{margin-top:auto;padding:30px 17px 0}.mini-kana{font-family:serif;font-size:25px;letter-spacing:3px;color:#c7d4f0}.side-bottom p{font-size:13px;color:#99aacb;margin:9px 0 26px}.version{font-size:11px;color:#7186ad}main{margin-left:244px;padding:0 48px 35px;max-width:1660px}header{display:flex;align-items:center;justify-content:space-between;height:90px;border-bottom:1px solid var(--line);font-size:13px}.breadcrumb{color:var(--muted)}.breadcrumb span:first-child{padding:0 13px;color:#b5bfce}#crumb{color:var(--ink)}.level-badge{background:#e9eefc;border-radius:30px;padding:6px 13px;color:#546894;font-size:12px}.level-badge i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-right:6px}.page-heading{display:flex;justify-content:space-between;align-items:center;padding:32px 0 27px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--blue)}h1{font-size:30px;letter-spacing:-.8px;margin:8px 0}p{margin:0}.page-heading p{font-size:14px;color:var(--muted)}.heading-mark{font-family:serif;font-size:60px;color:#dce3f4;line-height:1;letter-spacing:-5px;transform:rotate(-8deg);padding-right:14px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:26px}.settings{display:flex;gap:20px;margin-bottom:19px}.settings>div{flex:1;min-width:0}.settings label{display:block;font-size:12px;color:#6b7690;margin-bottom:7px}select{width:100%;border:1px solid var(--line);border-radius:8px;background:white;color:#354563;padding:11px 32px 11px 13px;font-size:14px;height:47px}.practice-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:25px 32px 28px;box-shadow:0 7px 28px #20356c05}.card-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}.exercise-tag{color:var(--blue);background:var(--pale);border-radius:5px;padding:4px 9px}.progress-track{height:3px;background:#eff2f8;margin-top:17px;border-radius:3px}.progress-track div{height:100%;background:var(--blue);width:0;transition:width .25s}#questionArea{text-align:center;padding:28px 0 20px}.prompt-label{color:#6e7890;font-size:14px}.big-question{font-family:Georgia,"Hiragino Mincho ProN","Songti SC",serif;font-size:96px;font-weight:400;line-height:1.35;padding:13px 0 5px;color:#192a53}.big-question.word{font-family:inherit;font-size:46px;padding:24px 0 14px}.big-question.sentence{font-family:inherit;font-size:26px;line-height:1.8;padding:26px 0 10px}.audio-button{border:1px solid var(--line);border-radius:24px;background:white;font-size:14px;padding:5px 13px;color:#667696}.audio-button span{margin-left:4px}.audio-status{font-size:13px;color:var(--muted);text-align:center}.input-label{display:block;font-size:13px;color:#55617a;margin-bottom:9px}input,textarea{border:1px solid #dbe1ec;background:#fafbfe;border-radius:8px;width:100%;padding:13px 16px;color:var(--ink);outline:none;transition:box-shadow .2s}input{height:54px;font-size:20px}input::placeholder,textarea::placeholder{font-size:14px;color:#a0a9ba}input:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #2c50e813;background:#fff}textarea{min-height:105px;resize:vertical;font-size:18px}.answer-toolbar{display:flex;align-items:center;justify-content:space-between;margin:11px 0 21px;font-size:11px;color:#98a1b2}.text-button{background:none;border:0;color:#647aa5;font-size:13px;padding:4px 0}.card-actions{display:flex;gap:12px;border-top:1px solid #edf0f6;padding-top:23px}.primary,.secondary{padding:12px 19px;border-radius:8px;font-size:14px}.primary{background:var(--blue);color:white;border:1px solid var(--blue);margin-left:auto;min-width:155px;display:flex;align-items:center;justify-content:space-between;gap:27px}.primary span{font-size:18px;line-height:1}.secondary{background:white;border:1px solid var(--line);color:#62708a}.session-strip{display:flex;align-items:center;padding:22px 10px;gap:32px}.session-strip>div{display:flex;align-items:baseline;gap:8px}.session-strip>div>span:last-child{font-size:12px;color:var(--muted)}.stat-number{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}.session-strip button{margin-left:auto}.footnote{font-size:12px;color:#97a0b2;text-align:center}.study-column{padding-top:73px}.tip-card{border-radius:14px;background:#eaf0ff;padding:24px;color:#394d7c}.tip-card .eyebrow{color:#7186b7;font-size:10px}.tip-card h2{font-size:18px;margin:12px 0 10px}.tip-card p{font-size:14px;line-height:1.9;color:#637399}.note-example{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #d8e1f7;margin-top:24px;padding-top:21px;font-size:29px;color:#3d5cd6}.note-example .equals{font-size:16px;color:#9eacd0}.reference{padding:28px 3px 22px;border-bottom:1px solid var(--line)}.reference-title{display:flex;align-items:center;justify-content:space-between}.reference h2{font-size:15px;margin:0}.reference p{color:var(--muted);font-size:13px;margin-top:8px}.small-note{display:flex;gap:10px;padding:21px 3px;font-size:13px;color:#8c97ac;line-height:1.9}.small-note>span{color:#8b9bc1}#feedback:not(:empty){background:#f0f4ff;border:1px solid #dce5ff;border-radius:8px;padding:14px 16px;margin-bottom:18px;font-size:14px}#feedback.good{background:#edf8f3;border-color:#cdeadc;color:#246b4c}#feedback.review{background:#fff5ec;border-color:#f1dfcc;color:#8b602f}#feedback strong{display:block;margin-bottom:5px}#feedback p{line-height:1.8}#feedback button{margin-top:11px;margin-right:10px;border:1px solid #d5def0;background:white;border-radius:6px;padding:5px 10px;color:var(--ink);font-size:13px}.kana-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:17px}.kana-cell{font-size:15px;text-align:center;padding:5px 0;background:white;border-radius:5px}.kana-cell small{display:block;font-size:10px;color:#8894ae}.blank-field{display:inline-block;width:115px;margin:0 5px 8px;border:none;border-bottom:2px solid #7992ee;border-radius:3px;font-size:21px;text-align:center;background:#f0f4ff;padding:7px;height:45px}.cloze-text{font-size:24px;line-height:2.5;padding:22px 0}.summary{text-align:center;padding:32px 0}.summary .score{font-size:65px;color:var(--blue);font-weight:700}.summary h2{margin:10px 0;font-size:24px}.summary p{color:var(--muted);font-size:14px}
@media(min-width:1450px){main{padding-left:65px;padding-right:65px}.workspace{grid-template-columns:minmax(0,1fr) 290px}.practice-card{padding-left:44px;padding-right:44px}}@media(max-width:1150px){.sidebar{width:210px;padding-left:12px;padding-right:12px}main{margin-left:210px;padding:0 28px 30px}.workspace{grid-template-columns:minmax(0,1fr) 225px;gap:20px}.practice-card{padding:23px}.session-strip{gap:17px}.session-strip>div{gap:5px}.brand{font-size:17px}}@media(max-width:980px){.study-column{padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:22px}.workspace{grid-template-columns:1fr}.small-note{grid-column:1/-1;padding:0}.heading-mark{font-size:50px}.tip-card{padding:20px}.note-example{margin-top:14px;padding-top:12px}.sidebar{width:190px}.nav-item{gap:9px}main{margin-left:190px}.nav-no{display:none}}@media(max-width:680px){.sidebar{position:static;width:auto;padding:16px 18px;background:var(--navy)}.brand{font-size:16px;padding:0}.brand-icon{width:33px;height:36px;line-height:36px;font-size:25px}.brand small{font-size:8px}.nav-label,.side-bottom{display:none}.sidebar nav{display:flex;margin-top:17px;gap:6px}.nav-item{display:block;padding:9px 4px;margin:0;text-align:center;font-size:12px;flex:1;border-radius:7px;white-space:nowrap}.nav-item small,.nav-icon{display:none}.nav-item.active{box-shadow:none;background:#334b85}main{margin:0;padding:0 18px 30px}header{height:61px;font-size:12px}.level-badge{font-size:10px;padding:5px 9px}.page-heading{padding:24px 0}h1{font-size:25px;letter-spacing:-1px}.page-heading p{font-size:12px;max-width:260px}.heading-mark{font-size:39px;padding:0}.settings{gap:10px}.settings select{font-size:12px;padding-left:9px}.practice-card{padding:20px}.card-top{font-size:11px}.big-question{font-size:82px}.big-question.word{font-size:38px}.big-question.sentence{font-size:23px}.prompt-label{font-size:13px}#questionArea{padding-top:23px}.session-strip{gap:18px;flex-wrap:wrap;padding:20px 2px}.stat-number{font-size:20px}.session-strip>div>span:last-child{font-size:11px}.session-strip button{font-size:12px}.study-column{grid-template-columns:1fr;gap:8px}.tip-card{margin-top:14px}.note-example{justify-content:flex-start;gap:20px}.reference{padding-top:15px}.small-note{padding-top:12px}.cloze-text{font-size:21px}.blank-field{width:100px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}} 

/* Readable labels at narrow and wide layouts. */
.settings label,.text-button,.input-label,.reference p,.small-note{font-size:14px}.prompt-label,.tip-card p,.page-heading p{font-size:16px}.eyebrow,.brand small,.nav-no,.tip-card .eyebrow,.version,.kana-cell small{font-size:12px}.answer-toolbar{font-size:12px}@media(max-width:680px){.settings select{font-size:14px;padding-right:22px}.nav-item{font-size:14px}.prompt-label,.page-heading p{font-size:14px}.session-strip{gap:14px}.session-strip>div>span:last-child{font-size:12px}.level-badge{font-size:12px}.card-top{font-size:12px}}

.side-bottom .mini-kana{display:block;font-size:18px;letter-spacing:1px;line-height:1.9}
#mistakesButton{font-size:14px;padding:8px 12px;white-space:nowrap}
#mistakesDialog{box-sizing:border-box;width:min(680px,calc(100% - 24px));max-height:85dvh;border:1px solid #d9e1f1;border-radius:16px;padding:24px;color:#243557;background:#fff;box-shadow:0 20px 70px #14213d33}
#mistakesDialog::backdrop{background:#15213c80}
.mistakes-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.mistakes-heading h2{margin:0;font-size:24px}
#mistakesIntro{font-size:16px;line-height:1.7;color:#61708b;margin:16px 0}
#mistakesList{list-style:none;padding:0;margin:0}#mistakesList li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-top:1px solid #e6ebf5}
#mistakesList li div{min-width:0;overflow-wrap:anywhere}#mistakesList strong{font-size:18px;line-height:1.6}#mistakesList p{font-size:14px;color:#61708b;margin:6px 0 0;line-height:1.6}#mistakesList button{flex-shrink:0;font-size:14px;padding:9px 14px}
.mistakes-actions{margin-top:20px;display:flex;justify-content:flex-end}#moreMistakes{margin-top:16px}#mistakeSyncStatus:empty{display:none}.romaji{font-size:16px!important;overflow-wrap:anywhere}
@media(max-width:680px){header{flex-wrap:wrap;gap:12px}.header-actions{flex-wrap:wrap}#mistakesDialog{padding:18px}#mistakesList li{gap:10px}.mistakes-actions .primary{width:100%}}

.header-actions{display:flex;align-items:center;gap:12px}.auth-button{display:inline-flex;align-items:center;gap:7px;border:1px solid #d9e1f1;background:#fff;color:#405275;border-radius:20px;padding:7px 12px;font-size:12px}.auth-button:hover{border-color:#9bb0ea}.auth-dot{width:7px;height:7px;border-radius:50%;background:#aab5c8}.auth-dot.on{background:#37a878}.auth-dot.busy{background:#e4a33c}.auth-button.signed-in{color:#2b4bb6}.source-note{font-size:12px!important;color:#8793aa!important}.source-note a{color:#4766c8}.auth-notice{display:flex;align-items:center;justify-content:center;gap:12px;background:#fff7e7;border:1px solid #f2dfb7;color:#866523;border-radius:9px;padding:10px 14px;margin-top:15px;font-size:13px}.auth-notice button{border:1px solid #d7bf83;background:#fff;border-radius:6px;color:#725516;padding:4px 10px;font-size:12px}
@media(max-width:680px){.header-actions{gap:6px}.auth-button{padding:6px 9px;font-size:11px}.level-badge{display:none}.auth-notice{font-size:12px;flex-wrap:wrap}}