@import url("./font.css");
body{min-width:0}
/* Calm navigation, flat surfaces, and clear action hierarchy across Hanja. */

:root{--paper:#faf7ef;--white:#fffdf7;--ink:#302f2a;--muted:#6d685e;--green:#237653;--leaf:#eaf4ef;--line:#e9ecef;--shadow:none;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Noto Sans KR","Malgun Gothic",sans-serif}

.app-shell{max-width:1160px}.app-header{gap:24px;height:88px}.brand{font-size:20px;letter-spacing:-.6px}.brand-mark{width:36px;height:38px;font-size:24px;border-radius:12px;transform:none}.account-shortcut{background:#f4f5f6;border:0}.nav-item{border-radius:999px}.nav-item[aria-current=page]{background:#edf5f0}.app-footer{color:#66727c}.app-footer #sync-state:before{background:var(--green)}

.primary,.secondary{border-radius:999px;box-shadow:none;min-height:52px;padding:14px 24px;transition:background .16s,transform .12s}.primary{background:var(--green)}.primary:hover:enabled{background:#1a6244}.primary:active:enabled,.secondary:active:enabled{transform:scale(.98);box-shadow:none}.secondary{border:0;background:#f0f3f1}.primary:disabled{background:#e3ebe6;color:#718279;opacity:1}

button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #2d8765;outline-offset:4px}.text-button{color:var(--muted)}

.grade-layout{display:grid;grid-template-columns:minmax(250px,.85fr) minmax(0,1.15fr);gap:90px;padding:48px 0 20px;align-items:start}.grade-intro{position:sticky;top:44px;display:flex;flex-direction:column;align-items:flex-start}.grade-eyebrow{font-size:14px;font-weight:650;color:var(--muted);margin-bottom:20px}.grade-intro h1{font-size:46px;line-height:1.25;letter-spacing:-2px;font-weight:800}.grade-routine{font-size:17px;color:var(--muted);margin-top:20px}.grade-buddy{width:206px;height:206px;object-fit:contain;margin:28px 0 24px}.grade-quick-start{gap:24px;align-self:flex-start;font-size:16px;text-decoration:none}.grade-selection{min-width:0}.grade-list-label{display:flex;justify-content:space-between;padding:0 64px 12px 18px;color:var(--muted);font-size:13px}.grade-list{display:flex;flex-direction:column}.grade-card{display:flex;flex-direction:row;align-items:center;gap:20px;min-height:84px;padding:16px 18px;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent;color:var(--ink);text-decoration:none;transition:background .15s,transform .12s}.grade-card:last-child{border-bottom:0}.grade-card:hover{background:#f5f8f6;border-color:var(--line);border-radius:14px}.grade-card:active{background:#eaf4ef;transform:scale(.99)}.grade-number{font-size:25px;font-weight:750;letter-spacing:-.8px;white-space:nowrap}.grade-detail{display:flex;flex-direction:column;gap:5px;margin-left:auto;text-align:right}.grade-detail strong{font-size:17px;letter-spacing:-.4px;font-weight:650}.grade-detail small{font-size:12px;color:var(--muted)}.grade-action{display:grid;place-items:center;width:26px;flex-shrink:0;padding:0;margin:0;color:#7b868e}.grade-action svg{width:19px;height:19px}.grade-card:hover .grade-action{color:var(--green)}.grade-source{margin:22px 18px 0;font-size:12px;color:var(--muted)}.grade-source a{display:inline-flex;align-items:center;gap:10px;min-height:44px}.grade-source svg{width:14px;height:14px}

.today-strip{border:0;background:#f7f8f8;box-shadow:none;border-radius:24px}.stat+.stat{border-color:#e3e8e5}.stat-icon{background:transparent}.character-tile{border:0;background:#f3f6f3;border-radius:20px}.character-tile.current{border:1px solid #86b59e;box-shadow:none}.character-tile.complete{background:#e7f2ec}.hero{box-shadow:none}.hero-content h1{color:#263b30}.course-bar{color:var(--muted);font-size:13px}.course-bar a{text-decoration:none;color:var(--green)}

.grade-stage-grid{display:flex;flex-direction:column;gap:0}.grade-stage{display:grid;grid-template-columns:116px minmax(0,1fr);align-items:center;gap:9px 24px;padding:24px 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}.grade-stage strong{font-size:20px;grid-row:1/3;align-items:center;gap:8px;white-space:nowrap}.grade-stage strong svg{flex-shrink:0;width:18px;height:18px}.grade-stage .hanja{font-size:25px;letter-spacing:4px}.grade-stage small{font-size:13px}.grade-stage:disabled{opacity:1;color:#78828b}.grade-stage:disabled small{color:#78828b}.grade-stage.done{background:#f4f9f6}.grade-stage:enabled:hover{background:#f0f6f2;border-radius:16px}.stage-range select{border:0;border-radius:999px;background:#f2f5f3;color:var(--ink)}

.study-board{border:0;background:#f7f9f7;box-shadow:none}.lesson-character{background:#fff;border:0}.answer{border:2px solid transparent;border-radius:999px;background:#fff;box-shadow:none;min-height:70px}.answer:hover:enabled{border-color:#a6c9b5;background:#fff}.answer-index{background:#f0f3f1;color:#62746a}.answer.wrong{border-color:#ba745d;background:#fff3ed}.answer.correct{border-color:#64a180;background:#eaf5ee}.answer:active:enabled{transform:scale(.98)}.quiz-character{color:#263b30}.write-counter{border:0;background:#eaf2ec;border-radius:22px}.writing-modes{border-radius:999px;background:#e8eeea}.writing-modes button{border-radius:999px}.writing-modes button.selected{box-shadow:none}.writing-tools button{border:0;border-radius:999px;background:#e9efeb}.writing-canvas{border:1px solid #becfc3;background:#fffef9}.settings-card{box-shadow:none;border:0;background:#f7f9f7}.result-content{box-shadow:none}

@media(max-width:1000px){.grade-layout{gap:44px;padding-top:34px}.grade-intro h1{font-size:39px}.grade-card{padding:16px 12px;gap:14px}.grade-list-label{padding-left:12px;padding-right:52px}.grade-buddy{width:180px;height:180px}.grade-detail small{font-size:11px}}

@media(max-width:620px){.app-header{height:74px}.brand{font-size:19px}.grade-layout{display:block;padding:24px 0 0}.grade-intro{position:relative;top:auto;padding-right:110px;margin-bottom:38px}.grade-eyebrow{font-size:12px;margin-bottom:12px}.grade-intro h1{font-size:32px;letter-spacing:-1.3px}.grade-routine{font-size:14px;margin-top:12px}.grade-buddy{position:absolute;right:-8px;top:22px;width:120px;height:150px;margin:0}.grade-quick-start{font-size:14px;min-height:46px;padding:11px 18px;gap:16px;margin-top:24px;white-space:nowrap}.grade-list-label{padding:0 48px 8px 4px;font-size:12px}.grade-card{min-height:80px;padding:15px 4px;gap:17px}.grade-number{font-size:24px}.grade-detail strong{font-size:16px}.grade-detail small{font-size:12px}.grade-source{margin-left:4px}.grade-stage{grid-template-columns:96px minmax(0,1fr);padding:21px 0;gap:7px 14px}.grade-stage strong{font-size:17px}.grade-stage .hanja{font-size:23px;letter-spacing:2px}.grade-stage small{font-size:12px}.answer{min-height:66px}.writing-tools button{min-height:44px}.study-board{padding:22px 16px}nav{box-shadow:0 4px 25px #243b2b0e;background:#fffffff2}.nav-item{border-radius:20px}}

@media(prefers-reduced-motion:reduce){.grade-card,.primary,.secondary{transition:none}.grade-card:active,.primary:active:enabled,.secondary:active:enabled,.answer:active:enabled{transform:none}}

@media(prefers-contrast:more){:root{--muted:#35434d;--line:#a7b3ac}.grade-card{border-bottom-color:#7d8e83}.grade-stage:disabled,.grade-stage:disabled small{color:#53635a}}

@media(prefers-reduced-transparency:reduce){nav{background:#fff;backdrop-filter:none}}

.answer.wrong:hover:enabled{border-color:#ba745d;background:#fff3ed}.answer.correct:hover:enabled{border-color:#64a180;background:#eaf5ee}

.daily-hero .daily-count{padding:4px 12px;border-radius:14px;background:#fffdf5}

@media(max-width:620px){.app-header .brand{font-size:17px;gap:7px}}



/* One course in focus; the index changes selection without changing learning records. */

.native-app .app-header{position:sticky;top:0;z-index:35;background:var(--paper);gap:16px}.app-exit{display:inline-flex;justify-content:center;align-items:center;min-width:48px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-size:14px;white-space:nowrap}.app-exit:hover{background:#edf3ef}.native-app .app-header .account-shortcut{margin-left:0}.native-app .app-header #navigation:empty{margin-left:auto}.native-app .course-focus{top:104px}@media(max-width:620px){.native-app .app-header{gap:10px}.native-app .app-header .brand{margin-right:auto}.native-app .course-focus{top:auto}}

.course-library{max-width:1020px;margin:24px auto 0}.library-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.library-label{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 8px}.library-heading h1{font-size:32px;letter-spacing:-1.2px;margin:0}.cheonjamun-link,.course-allocation,.course-change{display:inline-flex;align-items:center;gap:9px;min-height:44px;text-decoration:none;font-size:14px;color:var(--muted);background:none;border:0;padding:0}.cheonjamun-link svg,.course-allocation svg,.course-change svg{width:18px;height:18px}.course-workspace{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start}.course-index{display:flex;flex-direction:column;border-top:1px solid var(--line)}.course-option{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 14px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;text-align:left;color:var(--ink);transition:background .12s}.course-option:hover{background:#f4f7f5}.course-option[aria-pressed=true]{background:#e9f3ed;box-shadow:inset 3px 0 var(--green)}.course-option:active{background:#dcece3}.course-option-grade{font-size:23px;font-weight:700;letter-spacing:-.6px}.course-option-grade small{font-size:17px;margin-left:3px}.course-option-count{font-size:14px;margin-left:auto;color:var(--muted)}.course-option-mark{display:grid;place-items:center;width:24px;height:24px;color:#7a8580}.course-option-mark svg{width:17px;height:17px}.course-option[aria-pressed=true] .course-option-mark{border-radius:50%;color:#fff;background:var(--green)}.course-focus{position:sticky;top:32px;min-width:0;background:#f6f8f4;padding:32px 36px 36px;border-radius:8px}.course-focus-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.course-focus-top .library-label{margin:0}.course-title{display:flex;align-items:baseline;gap:10px;margin:30px 0}.course-title strong{font-size:112px;line-height:1;font-weight:650;letter-spacing:-7px}.course-title>span{font-size:40px;font-weight:600}.course-facts{display:flex;gap:44px;margin:0}.course-facts dt{font-size:13px;color:var(--muted);margin-bottom:8px}.course-facts dd{margin:0;font-size:27px;font-weight:650;letter-spacing:-.8px}.course-facts dd small{font-size:14px;font-weight:500;margin-left:5px}.course-includes{min-height:20px;font-size:12px;color:var(--muted);margin:16px 0 26px}.course-enter{display:flex;align-items:center;justify-content:space-between;text-decoration:none;gap:24px;width:100%;max-width:340px;min-height:56px}.course-enter svg{width:21px;height:21px}.course-unselected{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:340px;gap:22px;color:var(--muted)}.course-unselected .hanja{font-size:110px;color:#bccabf;font-family:serif}.course-unselected p{margin:0;font-size:16px}.course-workspace.returning{display:block;max-width:740px}.returning .course-focus{padding:36px 44px}.course-allocation{font-size:12px;margin-top:20px}.app-shell[data-view=grades] .app-footer{margin-top:32px}

@media(max-width:900px){.course-workspace{grid-template-columns:220px minmax(0,1fr);gap:32px}.course-focus{padding:28px}.course-facts{gap:26px}.course-title strong{font-size:96px}}

@media(max-width:620px){.course-library{margin-top:16px}.library-heading{margin-bottom:20px}.library-heading h1{font-size:27px}.library-label{font-size:12px}.cheonjamun-link{font-size:13px}.course-workspace{display:flex;flex-direction:column;gap:14px}.course-index{width:100%}.course-option{min-height:48px;padding:8px 12px}.course-option-grade{font-size:21px}.course-option-grade small{font-size:15px}.course-focus{width:100%;position:sticky;bottom:12px;top:auto;padding:18px 20px;background:#f0f5ef}.choosing .course-focus{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 22px}.choosing .course-focus-top{display:none}.choosing .course-title{grid-column:1;grid-row:1/3;margin:0;align-self:center;gap:5px}.choosing .course-title strong{font-size:54px;letter-spacing:-3px}.choosing .course-title>span{font-size:23px}.choosing .course-facts{gap:20px;grid-column:2}.choosing .course-facts dt{font-size:11px;margin:0 0 4px}.choosing .course-facts dd{font-size:18px}.choosing .course-facts dd small{font-size:11px}.choosing .course-includes{grid-column:2;font-size:11px;margin:0;min-height:0}.choosing .course-enter{grid-column:1/-1;max-width:none;min-height:48px;margin-top:5px;font-size:15px}.course-unselected{grid-column:1/-1;min-height:44px;flex-direction:row;gap:14px}.course-unselected .hanja{font-size:35px}.course-unselected p{font-size:14px}.returning .course-focus{padding:26px}.returning .course-title{margin:32px 0}.returning .course-title strong{font-size:96px}.course-workspace.returning{display:block}.course-change{font-size:13px}.course-allocation{margin-top:12px}.app-shell[data-view=grades] .app-footer{padding-bottom:28px}}

@media(prefers-contrast:more){.course-option[aria-pressed=true]{outline:2px solid var(--green);outline-offset:-2px}.course-focus{border:1px solid #8d9e93}}



/* Warm hanji paper and real course glyphs provide the visual character. */

.app-shell[data-view=grades]{--paper:#faf7ef;--ink:#302f2a;--muted:#756f61;--line:#e2ddcf;background-color:var(--paper)}

body{background:#faf7ef;background-image:linear-gradient(#faf7ef80,#faf7ef80),url('./assets/hanji-ivory.webp');background-size:auto,627px 627px}
.app-shell[data-view=grades]{background-color:transparent}

.course-focus{background-color:#f0ebdf;background-image:linear-gradient(#eee7d8b3,#eee7d8b3),url('./assets/hanji-ivory.webp');background-size:auto,627px 627px;border-radius:5px;box-shadow:0 1px 0 #fff9 inset,0 8px 24px #5e4c2810}
.course-option[aria-pressed=true]{background-color:#e3ebdf}.course-option:hover{background-color:#eeeede}

.course-face{display:flex;align-items:center;justify-content:space-between;gap:24px}.course-title{flex-shrink:0}.course-specimen{display:flex;flex-direction:column;align-items:center;justify-content:center;width:170px;min-height:184px;margin:12px 0;color:#494539}.course-specimen svg{display:block;width:148px;height:148px;background:linear-gradient(90deg,transparent 49.7%,#d2cbb64d 50%,transparent 50.3%),linear-gradient(transparent 49.7%,#d2cbb64d 50%,transparent 50.3%);border:1px solid #d3cab655}.course-specimen>span{font-size:13px;margin-top:10px}.ink-stroke{fill:#3d3b30;animation:hanja-ink .38s both;animation-delay:var(--stroke-delay)}

.ink-stroke.ink-centerline{fill:none;stroke:#3d3b30;stroke-width:25;stroke-linecap:round;stroke-linejoin:round}

@keyframes hanja-ink{from{opacity:0}to{opacity:1}}

.course-samples{display:flex;gap:0;border-top:1px solid #d7cfbd;border-bottom:1px solid #d7cfbd;margin:0 0 26px;padding:17px 0}.course-samples:empty{display:none}.course-samples>span{display:flex;flex:1;flex-direction:column;align-items:center;gap:7px;min-width:0}.course-samples>span+span{border-left:1px solid #d7cfbd}.course-samples b{font-family:"Noto Serif CJK KR","Batang",serif;font-size:34px;font-weight:500}.course-samples small{font-size:12px;color:var(--muted);text-align:center}.course-includes{margin-bottom:18px}

@media(max-width:900px){.course-face{gap:10px}.course-specimen{width:140px;min-height:150px}.course-specimen svg{width:126px;height:126px}.course-title strong{font-size:88px}}

@media(max-width:620px){.choosing .course-focus{position:static;display:block;padding:18px 22px}.choosing .course-face{margin-bottom:14px}.choosing .course-title{margin:0}.choosing .course-title strong{font-size:64px}.course-specimen,.choosing .course-specimen{width:116px;min-height:124px;margin:0}.course-specimen svg{width:100px;height:100px}.course-specimen>span{font-size:11px;margin-top:5px}.choosing .course-facts{gap:28px}.choosing .course-includes{margin-top:10px}.course-samples{margin:16px 0;padding:12px 0}.course-samples b{font-size:29px}.course-samples small{font-size:11px}.choosing .course-enter{margin-top:14px}.returning .course-title strong{font-size:80px}.returning .course-focus{padding:24px}.course-unselected .hanja{color:#a79e86}}

@media(prefers-reduced-motion:reduce){.ink-stroke{animation:none;opacity:1}}

#after-writing[hidden]{display:none!important}


/* Keep the same paper around every course screen; the drawing surface stays clear. */
.study-board,.settings-card{background:#f3f0e7}
.lesson-character{background:#fffdf7}
.lesson-character .hanja,.quiz-character{animation:hanja-reveal .28s ease-out both}
@keyframes hanja-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.lesson-character .hanja,.quiz-character{animation:none;transform:none}}

/* Keep grade and character-count labels intact when text grows. */
.course-option{position:relative;flex-wrap:wrap;padding-right:50px;row-gap:2px}
.course-option-grade,.course-option-count{flex-shrink:0;white-space:nowrap}
.course-option-mark{position:absolute;right:14px;top:50%;transform:translateY(-50%);flex-shrink:0}

/* Grade selection keeps navigation above the list and its action within reach. */
@media(max-width:620px){
 .app-shell[data-view=grades] .app-header{height:auto;min-height:74px;flex-wrap:wrap;gap:0 16px;padding-top:12px;padding-bottom:8px}
 .app-shell[data-view=grades] #navigation{position:static;inset:auto;transform:none;width:auto;max-width:100%;margin-left:auto;padding:0;gap:2px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
 .app-shell[data-view=grades] #navigation .nav-item{flex-direction:row;gap:6px;min-width:0;min-height:44px;padding:8px 10px;border-radius:22px}
 .app-shell[data-view=grades] #navigation .nav-item svg{width:19px;height:19px}
 .app-shell[data-view=grades] .course-library{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
 .app-shell[data-view=grades] .course-enter{position:fixed;z-index:40;inset:auto 18px calc(16px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;min-height:52px;margin:0;padding:14px 22px;box-shadow:0 0 0 8px var(--paper),0 8px 24px #302f2a1a;white-space:normal;line-height:1.4}
 .app-shell[data-view=grades] .course-enter svg{flex-shrink:0}
 .app-shell[data-view=grades] .app-footer{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:360px){
 .app-shell[data-view=grades] #navigation .nav-item{padding:8px;gap:4px;font-size:12px}
 .app-shell[data-view=grades] .app-header{column-gap:8px}
}

/* Grade-owned record inventory stays inside settings and leaves navigation available. */
.privacy-records{margin-top:24px;border-top:1px solid var(--line);padding-top:12px}
.privacy-records summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-weight:650;line-height:1.5;border-radius:8px}
.privacy-records summary::-webkit-details-marker{display:none}
.privacy-records summary::after{content:'+';font-size:22px;flex-shrink:0}
.privacy-records[open] summary::after{content:'−'}
.privacy-records summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.privacy-records-body{padding:14px 0 0;overflow-wrap:anywhere}
.privacy-records-body h3{font-size:18px;line-height:1.5;margin:0 0 6px}
.privacy-records-body p{font-size:14px;line-height:1.6;margin:0 0 14px}
.privacy-records-identity{color:var(--muted)}
.privacy-records-body dl{margin:0}
.privacy-records-body dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.6}
.privacy-records-body dt{min-width:0}
.privacy-records-body dd{margin:0;flex-shrink:0;font-weight:650;font-variant-numeric:tabular-nums}
.privacy-records-body .secondary{min-height:48px}

/* Let the header grow with larger text instead of splitting menu labels. */
.app-header .nav-item span{white-space:nowrap}
.app-header .nav-item svg,.app-header .brand-mark,.app-header .account-shortcut{flex-shrink:0}
@media(min-width:621px){
 .app-shell:not([data-view=study]) .app-header{height:auto;min-height:88px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px;row-gap:8px}
 .app-header #navigation{flex:1 1 max-content;min-width:0;flex-wrap:wrap;justify-content:flex-end}
 .app-header #navigation .nav-item{flex:0 0 auto;min-height:44px}
}
@media(min-width:621px) and (max-width:1000px){
 .app-shell:not([data-view=study]) .app-header #navigation{order:1;flex-basis:100%;justify-content:center;margin-left:0}
 .app-shell:not([data-view=study]) .app-header .account-shortcut{margin-left:auto}
}

/* Keep the native time value readable when Android enlarges text. */
.settings-row:has(>input[type=time]){flex-wrap:wrap;row-gap:10px}
.settings-row:has(>input[type=time])>span{white-space:nowrap}
.settings-row input[type=time]{flex:0 0 auto;width:min(100%,220px);max-width:100%;margin-inline-start:auto}
.learning-source-label{margin:12px 0;font-size:14px;line-height:1.6}
.learning-source-note{margin:8px 0 16px;font-size:14px;line-height:1.65}
.learning-source-note summary{min-height:44px;padding:10px 0;cursor:pointer}
.app-shell[data-view=study] .study-head .exam-exit{width:auto;min-width:72px;padding:0 10px;font-size:14px;white-space:nowrap}
.app-shell[data-view=study] .character-question .quiz-character{font-family:inherit;font-size:clamp(24px,5vw,44px);line-height:1.25;overflow-wrap:anywhere}
.character-question .answer span:last-child{font-family:var(--font-hanja,serif);font-size:28px}
.app-shell:is([data-view=entry],[data-view=result]){height:100dvh;padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column}
.app-shell:is([data-view=entry],[data-view=result]) :is(.app-header,.app-footer,.course-bar){display:none}
.app-shell:is([data-view=entry],[data-view=result]) #app{min-height:0;flex:1;display:flex;align-items:stretch}
.app-shell[data-view=entry] .empty-state{padding:12px;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.app-shell[data-view=entry] .empty-state .icon{width:28px;height:28px;margin:0}
.app-shell[data-view=entry] .empty-state :is(h1,p){margin:0}
.app-shell[data-view=entry] .empty-state h1{font-size:24px}
.app-shell[data-view=entry] .empty-state :is(button,a){min-height:44px;padding:10px 20px}
.app-shell[data-view=result] .session-result{min-height:0;width:100%;padding:16px;display:grid;place-items:center}
.app-shell[data-view=result] .result-content{width:min(100%,480px);padding:16px;margin:0}
.app-shell[data-view=result] .result-content h1{font-size:28px;margin:8px 0}
.app-shell[data-view=result] .result-counts{margin:12px 0;gap:32px}
.app-shell[data-view=result] .result-counts strong{font-size:30px}
.app-shell[data-view=result] .result-actions{margin:0;gap:12px}
.app-shell[data-view=result] .result-actions :is(button,a){min-height:44px;padding:10px 20px}
@media(max-height:260px){.app-shell:is([data-view=entry],[data-view=result]){height:auto;min-height:100dvh}}
.assessment-mistakes{margin:12px 0;min-height:0}
.assessment-mistakes h2{font-size:16px;margin:0 0 6px}
.assessment-mistake-list{display:flex;flex-wrap:wrap;gap:6px 14px;max-height:120px;overflow:auto;text-align:left}
.assessment-mistake-list>span{font-size:14px;color:var(--ink)}
.assessment-mistake-list b{font-size:22px;font-weight:500}
.app-shell[data-view=result] .result-content:has(.assessment-mistakes){max-height:100%;display:flex;flex-direction:column;min-height:0}
.app-shell[data-view=result] .result-actions{flex-wrap:wrap;flex-shrink:0}
.writing-complete-notice{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:20;max-width:calc(100vw - 24px);padding:8px 16px;background:#245b43;color:#fff;border-radius:12px;font-size:15px;pointer-events:none;box-shadow:0 2px 10px #0002}
.app-shell[data-view=study] .session-clock{font-size:12px;color:#465947;white-space:normal;text-align:right;max-width:118px;line-height:1.4}
.app-shell[data-view=study] .study-head-text small{color:#465947}
.recall-form{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;width:min(100%,420px);margin:auto}
.recall-form input{min-width:0;width:100%;min-height:44px;border:2px solid #718973;border-radius:10px;padding:8px 12px;font:inherit;font-size:20px;background:#fffdf7;color:#233c2c}
.recall-form button{min-height:44px;padding:8px 16px}
.recall-form #recall-submit{grid-column:1/3}
.recall-form #recall-unknown{grid-column:1/3;background:transparent;border:1px solid #718973;border-radius:10px;color:#334d39}
.assessment-areas{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:6px 0;font-size:13px;color:#334d39}
.memory-summary{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:12px 0;padding:14px;background:#f4f1df;border-radius:14px}
.memory-summary span{font-size:13px;color:#465947}
.memory-summary button{min-height:44px}
.memory-result{margin:6px 0;font-size:14px}
.lesson-details:has(#known-character){min-height:0}
#known-character{min-height:44px;padding:8px 14px;margin-top:8px}
@media(max-height:480px){.recall-form{grid-template-columns:auto minmax(70px,1fr) auto}.recall-form #recall-submit{grid-column:auto}.recall-form #recall-unknown{grid-column:2/4}.recall-form{gap:4px}.recall-question .quiz-character{font-size:52px}.assessment-areas{gap:2px 8px;margin:2px 0;font-size:12px}#known-character{margin-top:4px}}
@media(max-height:420px){
 .app-shell[data-view=result] .session-result{padding:4px}
 .app-shell[data-view=result] .result-content{padding:4px;gap:2px}
 .app-shell[data-view=result] .result-content h1{font-size:24px;margin:2px 0}
 .app-shell[data-view=result] .result-counts{margin:4px 0}
 .assessment-mistakes{margin:4px 0}
 .assessment-mistake-list{max-height:58px}
}
/* Practice uses a bounded question pane; long explanations scroll after answering. */
.practice-entry{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.practice-entry a{flex:1;text-align:center;text-decoration:none;padding:12px}
.practice-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.practice-menu section,.word-card,.practice-result{padding:20px;background:#fffdf6;border:1px solid #e4d8bd;border-radius:18px}.practice-menu h2{font-size:20px;margin:0}.practice-menu p,.practice-note{font-size:13px;line-height:1.55}.practice-menu .primary{width:100%}.exam-source{margin:14px 0;font-size:13px;line-height:1.6}.word-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0}.word-list button{display:flex;flex-direction:column;gap:4px;border:1px solid #dfd4be;border-radius:12px;background:#fffdf6;padding:14px}.word-list strong{font-size:25px}.word-card{max-width:650px;margin:auto;text-align:center}.word-card h1{font-size:clamp(34px,8vw,64px);margin:10px 0}.word-card blockquote{margin:14px 0;padding:14px;background:#f5eddc;border-radius:10px;line-height:1.6}.word-card .primary,.word-card .secondary{margin:5px}.word-parts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;font-size:14px}.practice-question{height:calc(100dvh - 230px);min-height:340px;max-height:800px;display:flex;flex-direction:column;gap:10px;padding:16px;background:#fffdf6;border:1px solid #e4d8bd;border-radius:18px;max-width:860px;margin:auto}.practice-question header{display:flex;align-items:center;gap:12px;justify-content:space-between;font-size:13px}.practice-question h1{font-size:20px;margin:0}.practice-stimulus{font-size:clamp(35px,8vh,70px);text-align:center;line-height:1.3;padding:8px}.practice-stimulus.passage{font-family:inherit;font-size:clamp(18px,3vh,24px);line-height:1.6;text-align:left}.practice-writing .practice-stimulus{font-size:24px}.practice-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.practice-choices button{min-height:42px;padding:8px;border:1px solid #d9ceb5;border-radius:10px;background:#fff;line-height:1.4;font-size:16px}.practice-choices button:last-child:nth-child(odd){grid-column:1/-1}.practice-choices button.selected{background:#e2efd5;border:2px solid #547942}.practice-question form{display:flex;align-items:center;gap:8px}.practice-question input{min-width:0;width:100%;padding:10px;border:1px solid #b7ae97;border-radius:8px;font-size:18px}.practice-question form .primary{white-space:nowrap;margin:0}.practice-question footer{display:flex;gap:8px;margin-top:auto;flex:none}.practice-question footer button{flex:1;min-width:0;padding:10px 8px;font-size:14px}.practice-question [hidden]{display:none!important}#practice-feedback{min-height:22px;overflow:auto;white-space:pre-line;font-size:14px;line-height:1.5;max-height:110px}.practice-pad-space{min-height:80px;flex:1;display:grid;place-items:center;container-type:size}.practice-pad-space canvas{width:min(100cqw,100cqh);height:auto;aspect-ratio:1;max-height:100%;margin:0}.practice-areas{display:flex;gap:10px;flex-wrap:wrap}.practice-areas span{padding:10px;border-radius:8px;background:#f0eadc}.practice-mistakes{max-height:40vh;overflow:auto;font-size:14px}.practice-result>button{margin:5px}.practice-note{color:#665e4e}
@media(max-width:620px){.practice-menu{gap:8px}.practice-menu section{padding:12px}.practice-menu h2{font-size:17px}.practice-menu .primary{font-size:14px;padding:10px}.practice-question{height:calc(100dvh - 206px);min-height:330px;padding:10px;gap:7px}.practice-question h1{font-size:17px}.practice-question header{font-size:12px;gap:5px}.practice-stimulus{padding:4px}.practice-choices button{font-size:14px;min-height:38px;padding:6px}.practice-question footer button{font-size:12px}#practice-feedback{max-height:90px;font-size:13px}.practice-question form .primary{font-size:13px;padding:10px}}
@media(min-width:621px) and (max-height:520px){.practice-question{height:calc(100dvh - 108px);min-height:185px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto minmax(0,1fr) auto;gap:5px 12px;padding:8px}.practice-question header{grid-column:1/-1}.practice-question h1{grid-column:1;font-size:15px}.practice-stimulus{grid-column:1;grid-row:3;font-size:35px}.practice-stimulus.passage{font-size:16px}.practice-choices{grid-column:2;grid-row:2/4;gap:4px}.practice-choices button{font-size:12px;padding:3px;min-height:27px}.practice-question footer{grid-column:2;grid-row:4}.practice-question form{grid-column:2;grid-row:3}.practice-question #practice-feedback{grid-column:1;grid-row:4;font-size:12px;max-height:40px}.practice-writing .practice-pad-space{grid-column:2;grid-row:2/4}.practice-question footer button{padding:6px;font-size:12px}}
/* The question itself owns the screen, matching the regular study screen. */
.app-shell[data-view=practice-test]{height:100dvh;padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column}
.app-shell[data-view=practice-test] .app-header,.app-shell[data-view=practice-test] #navigation,.app-shell[data-view=practice-test] .app-footer,.app-shell[data-view=practice-test] .course-bar{display:none}
.app-shell[data-view=practice-test] #app{flex:1;min-height:0;display:flex;flex-direction:column}
.app-shell[data-view=practice-test] .practice-question{height:100%;width:100%;flex:1;min-height:0;max-height:none}
.lesson-words{font-size:13px;line-height:1.5}.writing-tools button[hidden],.writing-modes[hidden]{display:none!important}
.practice-question h1{letter-spacing:-.3px;line-height:1.45;font-weight:750}
@media(max-width:620px){.practice-question .practice-stimulus.passage{font-size:16px;line-height:1.5}.practice-question .practice-choices{gap:6px}}
.writing-modes[hidden], .writing-tools button[hidden] { display: none !important; }