:root{--ink:#24362e;--green:#237653;--soft:#e8f1e9;--muted:#738078;--line:#e0e6df}*{box-sizing:border-box}body{margin:0;background:#f6f7f2;color:var(--ink);font-family:Arial,'Malgun Gothic',sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible{outline:3px solid #83bfa1;outline-offset:3px}.shell{max-width:1160px;margin:auto;padding:0 32px}header{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{font-size:26px;font-weight:800;letter-spacing:-1px}.logo span{color:var(--green)}.tag{font-size:12px;color:var(--muted);margin-left:12px;letter-spacing:0;font-weight:400}.nav{display:flex;gap:8px}.nav button,.quiet{border:0;background:transparent;color:var(--muted);padding:12px 18px;border-radius:12px}.nav button.active{background:var(--soft);color:var(--green);font-weight:bold}main{padding:44px 0 80px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--green);font-weight:bold}h1{font-size:32px;letter-spacing:-1.4px;margin:12px 0}h2{font-size:22px;margin:0 0 12px}p{line-height:1.7}.sub{color:var(--muted);font-size:14px}.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:30px}.card{background:white;border:1px solid var(--line);border-radius:24px;padding:32px}.hero{background:var(--green);color:white;min-height:270px;padding:38px;border:0;position:relative;overflow:clip}.hero .sub{color:#d3e7d9}.hero h2{font-size:29px;line-height:1.5;position:relative;z-index:1}.hero:after{content:'Aa';position:absolute;right:12px;bottom:-38px;font-family:Georgia,serif;font-size:180px;opacity:.12}.primary{background:var(--green);color:white;border:0;padding:15px 24px;border-radius:12px;font-weight:bold}.hero .primary{background:#f3f6df;color:var(--ink);margin-top:16px;position:relative;z-index:1}.outline{background:white;border:1px solid var(--line);padding:14px 20px;border-radius:12px;color:var(--ink)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.stat{padding:24px;border:1px solid var(--line);border-radius:18px;background:white}.stat b{font-size:28px;display:block;margin:10px 0 0}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.aside-label{display:block;font-size:12px;color:var(--muted);margin:20px 0 8px}select{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:white;color:var(--ink)}.pill{font-size:11px;border-radius:20px;padding:6px 10px;background:var(--soft);color:var(--green)}.note{font-size:12px;color:var(--muted);line-height:1.7}.study{max-width:800px;margin:auto}.progress{height:5px;background:var(--line);border-radius:5px;overflow:hidden;margin:22px 0}.progress div{height:100%;background:var(--green);transition:width .2s}.quiz{padding:40px}.translation{font-size:21px;line-height:1.8;margin:32px 0 26px}.translation strong{color:var(--green);background:#eef5e8;padding:2px 4px}.sentence{font-size:27px;line-height:1.9;font-family:Georgia,serif;margin-bottom:26px}.blank{display:inline-block;min-width:100px;border-bottom:2px solid var(--green);color:var(--green);font-weight:bold;text-align:center;padding:0 6px}.blank.blurred{color:#87998d;font-weight:400}.answer{width:100%;border:1px solid #bbcfc0;background:#fafcf9;border-radius:12px;padding:17px;font-size:20px;outline:none}.answer:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--soft)}.actions{display:flex;justify-content:space-between;gap:12px;margin-top:20px}.feedback{margin-top:22px;padding:18px;border-radius:12px;background:var(--soft);line-height:1.7;font-size:14px}.feedback.wrong{background:#fff2e6;color:#80532c}.meaning{font-size:22px;margin-bottom:6px}.word-list{display:grid;gap:12px;margin-top:25px}.word{padding:22px;background:white;border:1px solid var(--line);border-radius:16px}.word b{font-size:20px}.word p{margin:10px 0 0;font-size:14px}.empty{text-align:center;padding:50px 24px}.storage-warning{background:#fff2e6;padding:12px;font-size:13px;border-radius:10px}footer{border-top:1px solid var(--line);padding:22px 0;color:var(--muted);font-size:12px}.mobile-only{display:none}@media(max-width:700px){.shell{padding:0 18px}header{height:78px}.tag{display:none}.nav button{padding:10px 12px;font-size:13px}main{padding-top:28px}h1{font-size:27px}.layout{grid-template-columns:1fr}.card{padding:24px}.hero{padding:28px}.stats{gap:8px}.stat{padding:15px 12px;font-size:12px}.stat b{font-size:23px}.quiz{padding:25px 21px}.translation{font-size:19px;margin-top:24px}.sentence{font-size:25px}.actions button{padding:14px 15px}.aside{order:2}.row{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.stat{text-align:center}.aside{text-align:center}.aside .row{justify-content:center}.aside #goal{text-align:center}main>.eyebrow,main>h1,main>.sub,main>.note{max-width:880px;margin-left:auto;margin-right:auto}.layout{max-width:880px;margin:30px auto 0}.hero{padding:34px 38px}.hero .pill{display:inline-block;margin-bottom:12px}.hero h2{font-size:28px;margin:0 0 12px}.hero>.sub{margin:0}.hero-controls{position:relative;z-index:1;display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:28px}.hero-controls #start{height:52px;min-width:160px;margin:0}.hero-controls #goal-form{display:flex;flex-direction:column;gap:8px;align-items:center;margin:0}.hero-controls label{font-size:12px;color:#d3e7d9}.goal-entry{height:52px;display:flex;align-items:center;border:1px solid #b7d5c2;border-radius:12px;overflow:hidden;background:#fafcf9;color:var(--ink)}.goal-entry input{width:72px;min-width:0;height:100%;padding:10px 8px 10px 15px;border:0;background:transparent;text-align:center;font-size:18px;outline:none}.goal-entry:focus-within{outline:3px solid #b7d5c2;outline-offset:2px}.goal-entry span{font-size:13px;padding:0 14px 0 2px;color:var(--muted)}.hero .goal-status{color:#d3e7d9;position:relative;z-index:1;margin:10px 0 0;min-height:20px}.hero:after{pointer-events:none}.stats .stat{padding:22px}.stats .stat b{font-size:26px}@media(max-width:700px){.hero{padding:28px 24px}.hero h2{font-size:26px}.hero-controls{gap:16px}.hero-controls #start{min-width:142px;padding:12px 16px}.goal-entry input{width:64px}.stats .stat{padding:18px 10px}}
.settings{max-width:880px;margin:auto}.settings-card{margin-top:30px}.settings fieldset{border:0;padding:0;margin:0 0 30px}.settings legend,.setting-row label{font-size:18px;font-weight:bold;margin-bottom:16px}.theme-options{display:flex;gap:12px}.theme-options label{flex:1;cursor:pointer;position:relative}.theme-options input{position:absolute;opacity:0}.theme-options span{display:block;padding:20px;border:1px solid var(--line);border-radius:14px;text-align:center;color:var(--muted)}.theme-options input:checked+span{border-color:var(--green);background:var(--soft);color:var(--green);font-weight:bold}.theme-options input:focus-visible+span{outline:3px solid #83bfa1;outline-offset:3px}.setting-row{display:flex;gap:20px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:28px}.setting-row label{display:block;margin:0}.setting-row .sub{margin:8px 0 0}.setting-row input{appearance:none;flex-shrink:0;width:48px;height:28px;background:#a2aaa4;border-radius:20px;position:relative;cursor:pointer}.setting-row input:before{content:'';position:absolute;width:20px;height:20px;top:4px;left:4px;background:white;border-radius:50%}.setting-row input:checked{background:var(--green)}.setting-row input:checked:before{left:24px}.setting-row input:focus-visible{outline:3px solid #83bfa1;outline-offset:3px}#settings-status{margin:24px 0 0}.letter-count{margin:-14px 0 20px}.sentence{overflow-wrap:anywhere}
html[data-theme="dark"]{color-scheme:dark;--ink:#e2ece5;--green:#83cea7;--soft:#233d30;--muted:#a4b7ab;--line:#34443a}html[data-theme="dark"] body{background:#141c18}html[data-theme="dark"] .card,html[data-theme="dark"] .stat,html[data-theme="dark"] .word,html[data-theme="dark"] .outline,html[data-theme="dark"] select{background:#1d2821}html[data-theme="dark"] .hero{background:#245e45;color:#f1f8f3}html[data-theme="dark"] .primary{color:#14251b}html[data-theme="dark"] .hero .primary{color:#24362e}html[data-theme="dark"] .answer,html[data-theme="dark"] .goal-entry{background:#17231c;border-color:#53735f;color:var(--ink)}html[data-theme="dark"] .translation strong{background:var(--soft)}html[data-theme="dark"] .feedback.wrong,html[data-theme="dark"] .storage-warning{background:#493322;color:#ffd0a8}html[data-theme="dark"] .blank.blurred{color:#b0c2b7}html[data-theme="dark"] a{color:#9bc9ff}html[data-theme="dark"] .setting-row input:checked{background:#39895e}
@media(max-width:700px){.nav{gap:2px}.nav button{padding:10px 8px}.theme-options span{padding:18px 8px;font-size:14px}.setting-row{gap:12px}.setting-row .sub{font-size:13px}}.study{max-width:820px}.quiz{padding:32px 40px 34px}.quiz-meta{display:flex;justify-content:center;margin-bottom:26px}.quiz .translation{text-align:center;margin:18px 0 30px;font-size:23px;word-break:keep-all}.quiz .sentence{text-align:center;line-height:2.1;font-size:30px;min-height:116px;display:block;padding:25px 0;margin:0 0 25px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.quiz #blank{border:0;min-width:0;display:inline;padding:0 5px;font-family:Arial,sans-serif;vertical-align:baseline}.letter-word{display:inline-flex;gap:5px;vertical-align:baseline;white-space:nowrap}.letter-slot{display:inline-flex;justify-content:center;align-items:center;min-width:23px;min-height:36px;border-bottom:2px solid var(--green);font-size:26px;color:var(--green)}.word-gap{display:inline-block;width:15px}.answer-ghost{color:#8b9d92}.open-blank{display:inline-block;min-width:145px;border-bottom:2px solid var(--green);text-align:center}.overflow-answer{color:#a36a49;font-size:24px}.quiz #answer-form>label{display:block;text-align:center;margin-bottom:10px}.quiz .answer{text-align:center;font-size:21px;padding:16px}.quiz .actions{margin-top:16px}.quiz .actions button{min-height:50px}.quiz .feedback{margin-top:20px}.quiz .meaning{font-size:21px;word-break:keep-all;overflow-wrap:anywhere}.study>.note{text-align:center}html[data-theme="dark"] .answer-ghost{color:#a1b8aa}@media(max-width:700px){.quiz{padding:25px 21px}.quiz .translation{font-size:21px;margin:12px 0 24px}.quiz .sentence{font-size:25px;padding:20px 0;line-height:2.2;min-height:120px}.letter-word{gap:3px}.letter-slot{min-width:17px;font-size:22px;min-height:30px}.quiz-meta{margin-bottom:20px}.quiz .answer{font-size:19px}}.result-title{font-size:14px;font-weight:bold;color:var(--green);margin-bottom:12px}.quiz.answered #answer-form>label,.quiz.answered #answer,.quiz.answered #hint{display:none}.quiz.answered .actions{justify-content:flex-end}.quiz.answered #submit{min-width:170px}.letter-word{max-width:100%;flex-wrap:wrap}.quiz .feedback{overflow-wrap:anywhere}.previous-attempt{text-align:center;color:var(--muted);font-size:13px;margin:-14px 0 22px}.reset-section{margin-top:26px}.reset-section b{font-size:18px}.danger.outline{color:#ad4034;border-color:#ddb8b2}.reset-dialog{width:min(480px,calc(100% - 36px));padding:30px;border:1px solid var(--line);border-radius:20px;background:white;color:var(--ink)}.reset-dialog::backdrop{background:rgba(0,0,0,.45)}.reset-dialog .primary.danger{background:#b64036;color:white}.reset-dialog h2{font-size:22px}.reset-dialog .actions{margin-top:25px}html[data-theme="dark"] .reset-dialog{background:#1d2821}html[data-theme="dark"] .danger.outline{color:#f4a89e;border-color:#955e55}@media(max-width:700px){.reset-section{align-items:flex-start;flex-direction:column}.reset-section .outline{align-self:flex-end}.reset-dialog{padding:24px}.reset-dialog .actions button{font-size:14px;padding:13px}}.ratio-section{margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px)}.ratio-section>div{min-width:0}.ratio-section select{width:100%;min-width:0;max-width:100%;padding:13px;border:1px solid var(--line);border-radius:12px;color:var(--ink);font:inherit;background:white}.ratio-section select:focus-visible{outline:3px solid #83bfa1;outline-offset:3px}html[data-theme="dark"] .ratio-section select{background:#1d2821}@media(max-width:700px){.ratio-section{grid-template-columns:minmax(0,1fr);align-items:stretch}.ratio-section select{width:100%}}.today-stats{grid-template-columns:minmax(0,1fr)}.sentence-word{display:inline;border:0;border-radius:5px;background:transparent;color:inherit;font:inherit;line-height:inherit;padding:0;cursor:pointer}.sentence-word:hover,.sentence-word:focus-visible{background:var(--soft);color:var(--green)}.word-detail{margin:-5px 0 24px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--soft);font-size:15px;overflow-wrap:anywhere}.word-detail strong{font-size:21px}.word-detail p{margin:8px 0 14px}.word-detail .quiet{padding:6px 10px}.word-detail .note{margin-left:12px}.word-detail .outline{padding:10px 16px}.pos-badge{display:inline-block;padding:2px 7px;border-radius:6px;background:var(--soft);color:var(--green);font-size:12px;font-weight:700;vertical-align:middle}.lexical-section{border-top:1px solid var(--line);padding-top:14px;margin-top:16px}.lexical-section h3{font-size:14px;margin:0 0 9px;color:var(--green)}.lexical-section ul{list-style:none;margin:0;padding:0}.lexical-section li{margin:7px 0;line-height:1.8;font-size:15px}.lexical-section li b{margin-right:5px}.lexical-separator{color:var(--muted)}.word-forms{display:flex;flex-wrap:wrap;gap:8px}.word-forms>span{border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:14px}.word-forms small{color:var(--muted);font-size:12px}.lexical-context{margin:0 0 8px;color:var(--muted);font-size:13px}.usage-tip{font-size:14px;margin:16px 0}@media(max-width:700px){.lexical-section li{font-size:14px}.word-forms>span{font-size:13px}} .result-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.result-heading .result-title{margin-bottom:0}.replay-sentence.outline{padding:8px 12px;font-size:13px;border-color:var(--green);color:var(--green);white-space:nowrap}.etymology-text{font-size:15px;line-height:1.8;margin:0 0 5px}.etymology-source{font-size:12px;color:var(--muted)}html[data-theme="dark"] .replay-sentence{background:transparent}@media(max-width:700px){.etymology-text{font-size:14px}} 
.literal-translation{font-size:15px;line-height:1.8;color:var(--muted);margin:-10px 0 24px;text-align:center;word-break:keep-all;overflow-wrap:anywhere}.literal-translation[hidden]{display:none}
/* Mobile study uses the visible area above the system keyboard. */
@media(max-width:700px){
 body[data-study="true"]{overflow:hidden}
 body[data-study="true"] header,body[data-study="true"] footer{display:none}
 body[data-study="true"] #app{position:fixed;top:var(--study-top,0px);left:0;width:100%;height:var(--study-height,100dvh);padding:8px 10px max(8px,env(safe-area-inset-bottom));background:#f6f7f2;overflow:hidden}
 html[data-theme="dark"] body[data-study="true"] #app{background:#141c18}
 body[data-study="true"] .study{height:100%;display:flex;flex-direction:column;gap:6px;min-height:0}
 body[data-study="true"] .study>.row{flex:none;min-height:28px;flex-wrap:nowrap}
 body[data-study="true"] .study>.row .quiet{padding:5px 7px;font-size:12px}
 body[data-study="true"] .study>.row .sub{font-size:12px;margin:0}
 body[data-study="true"] .study>.note{display:none}
 body[data-study="true"] .progress{flex:none;margin:0;height:3px}
 body[data-study="true"] .quiz{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 14px;border-radius:18px;overflow:hidden}
 body[data-study="true"] .question-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px 1px;display:flex;flex-direction:column;justify-content:safe center}
 body[data-study="true"] .quiz-meta{flex:none;margin:0 0 8px}
 body[data-study="true"] .quiz .translation{flex:none;font-size:18px;line-height:1.5;margin:8px 0 12px;text-align:left;overflow-wrap:anywhere}
 body[data-study="true"] .quiz .sentence{flex:none;font-size:22px;line-height:1.55;min-height:0;padding:12px 0;margin:0 0 10px;text-align:left}
 body[data-study="true"] .previous-attempt{margin:0 0 5px;font-size:11px}
 body[data-study="true"] .literal-translation{flex:none;text-align:left;font-size:13px;line-height:1.5;margin:0 0 8px}
 body[data-study="true"] .letter-count{flex:none;font-size:11px;margin:0 0 6px}
 body[data-study="true"] .quiz form{flex:none;order:3;padding-top:6px}
 body[data-study="true"] .quiz form>label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body[data-study="true"] .quiz .answer{font-size:18px;padding:9px 12px;min-height:42px;scroll-margin:0}
 body[data-study="true"] .quiz .actions{flex:none;order:4;gap:8px;margin-top:8px}
 body[data-study="true"] .quiz .actions button{min-height:42px;padding:9px 12px;font-size:14px}
 body[data-study="true"] .quiz .feedback{flex:none;order:2;padding:8px 10px;margin:6px 0 0;font-size:12px;line-height:1.45;max-height:84px;overflow:auto}
 body[data-study="true"] #diagnostic-status{flex:none;order:2;font-size:11px;margin:4px 0;line-height:1.4}
 body[data-study="true"] .quiz .letter-slot{font-size:20px;min-height:25px;min-width:15px}
 body[data-study="true"] .quiz.answered{overflow:auto}
 body[data-study="true"] .quiz.answered .question-content{flex:none;overflow:visible}
 body[data-study="true"] .quiz.answered .feedback{flex:none;max-height:none;overflow:visible;font-size:14px;padding:14px;margin-top:10px}
 body[data-study="true"] .quiz.answered .actions{position:sticky;bottom:0;padding-top:8px;background:white}
 html[data-theme="dark"] body[data-study="true"] .quiz.answered .actions{background:#1d2821}
 body[data-study="true"] .word-detail{order:2;max-height:120px;overflow:auto;padding:10px;margin:6px 0;font-size:13px}
 body[data-study="true"][data-compact-study="true"] .quiz{padding:8px 12px}
 body[data-study="true"][data-compact-study="true"] .quiz .translation{font-size:16px;margin:4px 0 8px}
 body[data-study="true"][data-compact-study="true"] .quiz .sentence{font-size:19px;padding:8px 0;margin-bottom:6px;line-height:1.45}
 body[data-study="true"][data-compact-study="true"] .quiz-meta{margin-bottom:4px}
}

