/* Compact, responsive motion with a reduced-motion alternative. */
:root{--motion-fast:140ms;--motion-enter:180ms}
button,a,input,select{transition:background-color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast),opacity var(--motion-fast)}
button:active{transform:scale(.97)}
.main{animation:page-in var(--motion-enter) ease-out both}
.panel,.practice,.story-tile,.grammar-card,.achievement{animation:surface-in var(--motion-enter) ease-out both}
.flashcard{animation:card-in var(--motion-enter) ease-out both;perspective:1000px}
.card-face{animation:face-in var(--motion-enter) ease-out both;transform-origin:center}
.bar i{transition:width 220ms ease-out}
.feedback{animation:surface-in var(--motion-enter) ease-out both}
.quiz-options .correct{animation:answer-pop 180ms ease-out}
.quiz-options .wrong{animation:answer-shake 160ms ease-out}
.achievement.earned .medal{animation:answer-pop 220ms ease-out}
dialog[open]{animation:surface-in 160ms ease-out}
.btn.flip-control{min-height:58px;width:100%;font-size:17px;background:#eaf1df;color:var(--green);border:1px solid #d8e3c6}
.btn.known-control{min-height:56px;width:100%;font-size:16px;border:1px solid #a9bf89;background:#eff5e5;color:var(--green)}
.known-controls{display:grid;gap:10px}.known-controls .text-btn{min-height:44px;padding:10px 18px}
.study-top .back{min-height:44px;padding:8px 12px}.simple-card>.icon-btn{height:48px;width:48px}
.card-controls .btn{min-height:54px;font-size:15px}.simple-card{padding:24px;min-height:330px}.card-face{min-height:135px}
.grammar-search{width:100%;margin:0 0 20px}.coverage-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.coverage-summary>div{background:#fff;border:1px solid var(--line);padding:17px;border-radius:14px}.coverage-summary b{font-size:22px;display:block;margin-top:8px}.grammar-section{margin-top:26px}.grammar-section h2{margin-bottom:16px}.grammar-section .grammar-grid{margin-bottom:24px}.lesson-path{font-size:12px;line-height:1.7;color:var(--muted)}.rule-table{width:100%;border-collapse:collapse;font-size:14px;margin:18px 0}.rule-table td,.rule-table th{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line)}.lesson-tip{padding:16px 20px;background:#f7eddc;border-radius:12px;font-size:14px;line-height:1.7}.grammar-check{margin-bottom:22px}.grammar-check h3{line-height:1.6}.lesson-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}
@keyframes page-in{from{transform:translateY(5px)}to{transform:none}}
@keyframes surface-in{from{transform:translateY(5px)}to{transform:none}}
@keyframes card-in{from{transform:translateY(4px)}to{transform:none}}
@keyframes face-in{from{opacity:.8;transform:rotateY(-10deg) scale(.99)}to{opacity:1;transform:none}}
@keyframes answer-pop{50%{transform:scale(1.025)}}
@keyframes answer-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media(max-width:640px){
 body{font-size:16px}.topbar{padding:0 18px}.main{padding:22px 16px calc(110px + env(safe-area-inset-bottom))}
 .intro p{font-size:14px;line-height:1.6}.intro h1{font-size:27px}.eyebrow{font-size:10px;letter-spacing:1.6px}
 .practice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.practice{padding:20px 16px;min-height:180px}.practice h3{font-size:16px}.practice p{font-size:13px;line-height:1.55}.practice .icon-box{height:44px;width:44px;margin-bottom:17px}.practice .arrow{font-size:19px}
 .btn{min-height:52px;font-size:15px;padding:13px 18px}.text-btn{min-height:44px;padding:10px 3px;font-size:13px}.icon-btn{width:46px;height:46px;flex:0 0 46px}
 .study-wrap{width:100%}.study-top{gap:8px;margin-bottom:12px}.study-top .badge{font-size:11px;max-width:58%}.study-top small{font-size:12px}.study-top .back{padding:8px;font-size:14px}
 .simple-card{min-height:315px;padding:20px;border-radius:22px;gap:8px}.card-face{min-height:140px;padding:8px}.card-face h2{font-size:33px;line-height:1.35}.card-face .hint{font-size:14px;line-height:1.6}.btn.flip-control{min-height:60px;font-size:18px;border-radius:13px}
 .card-controls{gap:12px;margin:14px 0}.card-controls .btn{min-height:56px;font-size:16px;border-radius:13px}.btn.known-control{min-height:58px;font-size:17px;border-radius:13px}.known-controls{gap:4px}
 .simple-card+.card-controls+.panel p{font-size:15px}.notice{font-size:14px;line-height:1.75}.quiz-options{gap:12px}.quiz-options button{min-height:56px;font-size:16px;padding:16px;line-height:1.55}.feedback{font-size:15px}.feedback small{font-size:13px}
 .word-row{gap:7px;padding:14px 10px;flex-wrap:wrap}.word-row .word-main{flex:1 1 120px}.word-row strong{font-size:17px}.word-row small{font-size:13px;line-height:1.5}.word-row .badge{font-size:10px}.filters{gap:10px}.filters>.search{width:100%}.filters .segments{width:100%}.segments button{min-height:44px;font-size:13px;padding:10px 14px}.filters>select{min-height:48px;font-size:15px;max-width:100%}
 .bottom-nav{padding-top:12px}.bottom-nav button{font-size:10px;min-width:56px;min-height:48px;padding:4px 7px;gap:7px}.bottom-nav button svg{height:24px;width:24px}
 .dashboard .story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.dashboard .story-tile:last-child{display:none}.dashboard .story-cover{height:135px;font-size:49px}.dashboard .story-meta{padding:14px}.dashboard .story-meta h3{font-size:14px}.dashboard .story-meta p{font-size:12px}.dashboard .story-meta .tag{font-size:10px}
 .story-meta h3{font-size:15px}.story-meta p{font-size:12px}.grammar-card{padding:22px}.grammar-card h3{font-size:18px}.grammar-card p{font-size:14px}.grammar-card small{font-size:11px}.grammar-card .badge{font-size:11px}.rule{font-size:18px}.rule-example{font-size:17px;padding:18px}.rule-table{font-size:13px}.rule-table td,.rule-table th{padding:11px 7px}.coverage-summary{gap:8px}.coverage-summary>div{padding:13px 10px;font-size:12px}.coverage-summary b{font-size:21px}
 .achievement h3{font-size:15px}.achievement p{font-size:13px}.reading-text button{min-height:32px}.lesson-nav{grid-template-columns:1fr}.setting-row select{font-size:15px}.section-head{gap:15px}.section-head h2{font-size:20px}.stat .stat-top{line-height:1.5}.stat small{line-height:1.6;display:block;font-size:10px}input,select{font-size:16px}dialog{padding:23px}dialog .close{height:44px;width:44px}
}
@media(max-width:360px){.main{padding-inline:12px}.practice{padding:18px 13px}.card-face h2{font-size:28px}.hero{padding:23px}.hero-copy{width:90%}.topbar .avatar{width:32px;height:32px}.intro h1{font-size:25px}.word-row .word-main{flex-basis:100px}.word-row>.icon-btn{width:44px;height:44px;flex-basis:44px}.story-grid{gap:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Quiz explanations remain full-size on every viewport, including tablets. */
.quiz-feedback{text-align:left;padding:24px;border:1px solid #d8e3c6;border-radius:16px;color:#244535}
.quiz-feedback .feedback-title{display:block;font-size:22px;line-height:1.45;color:#214b3b}
.quiz-feedback .feedback-meaning{font-size:20px;line-height:1.6;margin:13px 0 18px}
.quiz-feedback .feedback-example{font-size:23px;font-weight:600;line-height:1.65;color:#203d33;margin:0 0 10px}
.quiz-feedback .feedback-translation{font-size:18px;line-height:1.65;color:#49624f;margin:0 0 15px}
.quiz-feedback .feedback-progress{font-size:16px;line-height:1.6;color:#49624f;margin:18px 0 0}
.quiz-feedback .feedback-audio{min-height:48px;font-size:15px;background:#ffffff70;border-color:#c6d5b4}
.skip-listening{min-height:52px;line-height:1.5}
.chapter-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:24px}
.chapter-heading select{max-width:70%;font-size:15px;min-height:48px}
.chapter-title{font-size:25px;line-height:1.4;margin-bottom:22px}
.chapter-navigation{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
.reading-tools{margin:22px 0 30px}.reading-text{margin:28px 0;line-height:2}
.story-length-note{display:block;font-size:12px;line-height:1.5;color:#637659;margin-top:10px}
.reading-filters{margin:0 0 12px;max-width:100%;overflow-x:auto}
.story-translation{padding:22px;background:#edf2e6;border-radius:14px;margin:28px 0}
.story-translation p.translation{font-size:17px;line-height:1.85;padding:0;border:0;background:none;margin:14px 0;color:#435746}
.reading-question{padding:20px 0;border-bottom:1px solid var(--line)}.reading-question:last-child{border-bottom:0}.reading-question h3{line-height:1.65}
.reading-answer-feedback .notice{font-size:17px;line-height:1.7;color:#244535}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.simple-card:has(.real-flip){background:transparent;border:0;box-shadow:none;padding:0;gap:12px;min-height:0;animation:none}
.flip-scene{perspective:1200px;width:100%;isolation:isolate}
.card-face.real-flip{display:block;width:100%;padding:0;background:transparent;min-height:230px;animation:none;transform:none!important;transition:none}
.flip-surface{display:grid;min-height:230px;position:relative;transform-style:preserve-3d;transition:transform 320ms cubic-bezier(.2,.7,.25,1);will-change:transform}
.real-flip.flipped .flip-surface{transform:rotateY(180deg)}
.flip-side{grid-area:1/1;min-width:0;min-height:230px;padding:24px 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:23px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 8px 24px #203d3307;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow-wrap:anywhere}
.flip-front{transform:rotateY(0deg)}.flip-back{transform:rotateY(180deg);background:#edf3e2;border-color:#d4e1be}
.flip-word{font:800 36px/1.35 Manrope,system-ui,sans-serif;letter-spacing:-.7px}
.real-flip .hint{font-size:14px;line-height:1.65}.real-flip .eyebrow{margin:0}
.daily-plan{background:#edf3e2;border-color:#d4e1be;margin:24px 0 30px}.daily-plan h2{margin:14px 0;font-size:26px;line-height:1.4}.daily-plan-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}.daily-plan-steps>div{background:#ffffffb0;border-radius:14px;padding:18px}.daily-plan-steps b{display:block;font-size:30px;line-height:1.3;color:#214b3b}.daily-plan-steps span{display:block;font-size:13px;line-height:1.5;margin-top:8px}.daily-plan>.notice{margin-bottom:0}
.word-family{font-size:15px;font-weight:600;line-height:1.7;color:#41613e;overflow-wrap:anywhere}.flip-back .word-family{font-size:14px;font-weight:500}.word-context{background:#edf3e2;border:1px solid #d4e1be;border-radius:14px;padding:18px;margin-bottom:22px;text-align:left}.word-context p{font-size:21px;line-height:1.6;margin:14px 0 10px}.word-context small{display:block;font-size:15px;line-height:1.7;color:#536d41}
.cloze-sentence{font-size:26px;line-height:1.8;margin:18px 0 8px;overflow-wrap:anywhere}.cloze-blank{display:inline-block;margin:0 3px;color:#69834f;letter-spacing:3px}.cloze-hint{font-size:16px;line-height:1.7;color:#607153;margin:0 0 12px}.german-keys{display:flex;gap:10px;margin:0 0 18px}.german-keys button{min-width:46px;min-height:46px;background:#edf3e2;border:1px solid #d4e1be;border-radius:10px;font-size:19px;color:#214b3b}.gap-answer{font-size:18px;line-height:1.6}
@media(max-width:640px){.daily-plan{padding:20px 16px}.daily-plan h2{font-size:23px}.daily-plan-steps{gap:8px;margin:20px 0}.daily-plan-steps>div{padding:13px 9px}.daily-plan-steps b{font-size:26px}.daily-plan-steps span{font-size:12px}.daily-plan .eyebrow{line-height:1.8}.cloze-sentence{font-size:23px;line-height:1.7}.quiz-session:has(.quiz-feedback) .cloze-sentence,.quiz-session:has(.quiz-feedback) .cloze-hint{display:none}.word-context p{font-size:20px}.word-family{font-size:15px}}
@media(max-width:640px){.flip-word{font-size:32px}.flip-side{padding:24px 20px;min-height:225px}.flip-surface,.card-face.real-flip{min-height:225px}}
@media(max-width:360px){.flip-word{font-size:28px}}
@media(prefers-reduced-motion:reduce){.flip-surface{transition:none!important}}

.top-home{font:800 20px Manrope,system-ui,sans-serif;letter-spacing:-.7px;min-height:44px;padding:6px 0;text-align:left}
.desktop-crumb{color:var(--muted);margin-left:16px}.streak{min-height:44px}.streak:hover{background:#edf3e2}
.word-row.word-mastered{background:#e7f0db;border-color:#d1e1bd}.word-row.word-mastered .word-main small{color:#536d41}.word-row.word-mastered .icon-btn{background:#d7e8bf}.word-row.word-mastered .badge{background:#d1e3b5;color:#36572a}
.panel:has(.word-row){overflow:hidden}.quiz-next-bar{margin-top:16px}.feedback-choice:empty{display:none}.feedback-choice{font-size:16px;line-height:1.6;color:#765041;margin:0 0 12px}
dialog.calendar-dialog{max-width:540px;padding:24px;max-height:92dvh;overflow:auto}.calendar-title{position:sticky;top:0;z-index:2;background:var(--bg);padding:8px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}.calendar-title h2{font-size:23px}.calendar-title .eyebrow{font-size:10px}.calendar-title .icon-btn{flex-shrink:0}
.calendar-overview,.calendar-day-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}.calendar-overview b,.calendar-day-counts b{font:800 24px Manrope;display:block}.calendar-overview span,.calendar-day-counts span{display:block;font-size:12px;line-height:1.5;color:#607153;margin-top:7px}
.calendar-title{top:-24px}.calendar-month-nav{display:flex;align-items:center;gap:10px}.calendar-month-nav input{min-width:0;width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff;color:var(--ink);min-height:44px;font:inherit}.calendar-month-nav label{flex:1;min-width:0}.calendar-month-nav button{flex-shrink:0}.calendar-month-title{font-size:17px;margin:20px 0 16px}
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.calendar-weekdays{font-size:12px;color:#6c7d60;text-align:center;margin-bottom:9px}.calendar-date{border-radius:10px;min-height:52px;background:#fff;border:1px solid #e6eadf;padding:6px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:14px}.calendar-date small{font-size:10px;min-height:13px;color:inherit;line-height:1.2}.calendar-date.study-day{background:#dcebbf;border-color:#c5d8a7;color:#294a27}.calendar-date.is-today{box-shadow:inset 0 0 0 1px #69834f}.calendar-date.is-selected{background:var(--green);border-color:var(--green);color:#fff}.calendar-date:disabled{opacity:.35;cursor:default}.calendar-legend{font-size:12px;color:#6c7d60;margin:16px 0 20px}.calendar-day-detail{padding:20px;border-radius:14px;background:#edf2e4;border:1px solid #dde5ce}.calendar-day-detail h3{font-size:16px;line-height:1.6}.calendar-day-detail p{font-size:13px;color:#536745;margin:8px 0}.calendar-day-counts{margin:17px 0 0}.calendar-note{font-size:12px;line-height:1.7;color:#748168;margin:20px 0 0}
@media(max-width:640px){
 :root{--mobile-nav-height:calc(73px + env(safe-area-inset-bottom,0px))}
 .bottom-nav{height:var(--mobile-nav-height);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;padding:10px 4px calc(10px + env(safe-area-inset-bottom,0px))}
 .bottom-nav button{min-width:0;width:100%;min-height:52px;padding:4px 1px;font-size:10px}.bottom-nav button span{max-width:100%}
 .top-home{font-size:19px}.desktop-crumb{display:none}.topbar .breadcrumb{min-width:0}.topbar .streak{font-size:11px;padding:9px 12px}
 .main:has(.quiz-next-bar){animation:none;transform:none;padding-bottom:calc(var(--mobile-nav-height) + 115px)}
 .quiz-session .answered-options{display:none}.quiz-session:has(.quiz-feedback) .flashcard{min-height:0;padding:20px 16px;gap:14px}.quiz-session:has(.quiz-feedback) .flashcard>.eyebrow,.quiz-session:has(.quiz-feedback) .flashcard>h2,.quiz-session:has(.quiz-feedback) .flashcard>.btn,.quiz-session:has(.quiz-feedback) #type-form{display:none}
 .quiz-session:has(.quiz-feedback) .quiz-feedback{margin:0;padding:20px 16px}.quiz-session .quiz-feedback{width:100%;text-align:left}
 .quiz-next-bar{position:fixed;z-index:19;bottom:calc(var(--mobile-nav-height) + 8px);left:12px;right:12px;margin:0;padding:10px;border-radius:16px;background:#fffffffa;border:1px solid #dce5d0;box-shadow:0 -5px 24px #203d3312;backdrop-filter:blur(12px)}
 .quiz-next-bar .btn{height:56px;min-height:56px;font-size:17px}.quiz-session .study-top{margin-bottom:8px}.quiz-session>.bar{margin-bottom:14px!important}
 dialog.calendar-dialog{width:calc(100% - 20px);padding:18px;max-height:90dvh}.calendar-title{top:-18px}.calendar-title h2{font-size:20px}.calendar-overview{gap:8px;margin:20px 0}.calendar-overview b,.calendar-day-counts b{font-size:22px}.calendar-overview span,.calendar-day-counts span{font-size:11px}.calendar-month-nav{gap:6px}.calendar-month-nav .icon-btn{height:44px;width:38px;flex-basis:38px}.calendar-month-nav .text-btn{font-size:12px}.calendar-month-nav input{font-size:14px;padding:9px 6px}.calendar-grid,.calendar-weekdays{gap:4px}.calendar-date{min-height:48px;border-radius:8px}.calendar-day-detail{padding:16px}.calendar-note{font-size:12px}
}
@media(max-width:640px){.quiz-feedback{padding:20px}.quiz-feedback .feedback-title{font-size:21px}.quiz-feedback .feedback-example{font-size:22px}.quiz-feedback .feedback-meaning{font-size:19px}.quiz-feedback .feedback-translation{font-size:17px}.quiz-feedback .feedback-progress{font-size:16px}.chapter-heading{flex-wrap:wrap}.chapter-heading select{max-width:100%;width:100%;font-size:16px}.chapter-navigation{grid-template-columns:1fr}.chapter-title{font-size:24px}.reading-tools .btn{flex:1 1 130px}.story-translation{padding:18px}.reading-text{font-size:20px;line-height:1.95}.reading-question h3{font-size:18px}}