@charset "UTF-8";
/* Romanian tricolour palette. Themes share layout and semantic colour roles. */
:root {
  color-scheme: light;
  --flag-blue: #002b7f; --flag-yellow: #fcd116; --flag-red: #ce1126;
  --bg: #f4f6fb; --paper: #ffffff; --ink: #17253f; --muted: #52627a;
  --primary: #064a9f; --primary-hover: #003b84; --on-primary: #ffffff;
  --link: #064a9f; --sidebar: #eaf0f9; --line: #ccd6e5;
  --soft: #e9eff9; --soft-strong: #dce8fa; --soft-ink: #163f78;
  --warm: #fff3cd; --warm-ink: #66501e; --warm-border: #d7bd75;
  --red-soft: #fff0f1; --red-ink: #a62739; --red-border: #d496a0;
  --success-bg:#e7f3eb; --success-ink:#236345; --success-border:#3e7858;
  --hero-bg: #003b8f; --hero-ink: #ffffff; --hero-muted: #e0ebff;
  --hero-shadow: #00245a; --hero-glow: #00245a33;
  --nav-active-bg: #002b7f; --nav-active-ink: #ffffff;
  --bar: #8eb0e6; --focus: #a96900; --gold-ink: #7a5700;
  --overlay: #10213ea6; --shadow-color: #132b4d14;
  --green: var(--primary); --green-dark: var(--primary-hover); --mint: var(--soft);
  --peach: var(--warm); --yellow: var(--warm); --error: var(--red-ink);
  --radius: 20px; --shadow: 0 12px 32px var(--shadow-color);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101827; --paper: #19253a; --ink: #f0f4fc; --muted: #b7c4d8;
  --primary: #3268c5; --primary-hover: #386dcc; --on-primary: #ffffff;
  --link: #9bc4ff; --sidebar: #131e31; --line: #3b4b65;
  --soft: #24344f; --soft-strong: #304971; --soft-ink: #c5dcff;
  --warm: #3a3222; --warm-ink: #f8db85; --warm-border: #77623b;
  --red-soft: #3c2734; --red-ink: #ffb6bf; --red-border: #925768;
  --success-bg:#243a2f; --success-ink:#a1d4b6; --success-border:#85b99b;
  --hero-bg: #092e6a; --hero-ink: #ffffff; --hero-muted: #e0ebff;
  --hero-shadow: #071c40; --hero-glow: #040c1d66;
  --nav-active-bg: #224b92; --nav-active-ink: #ffffff;
  --bar: #6b91d0; --focus: #fcd116; --gold-ink: #f8db85;
  --overlay: #030914c9; --shadow-color: #00000033;
}

/* Colour palette is independent of light/dark mode. The Romanian flag is unchanged. */
:root[data-palette="gold"] {
  --bg:#faf8f1; --paper:#fffdf7; --ink:#2c291f; --muted:#696252;
  --primary:#f2c94c; --primary-hover:#e5bb39; --on-primary:#30250b; --primary-border:#967216;
  --link:#805d0a; --sidebar:#f5efdd; --line:#d6c9aa;
  --soft:#f9efcb; --soft-strong:#f3e2ab; --soft-ink:#5d4710;
  --hero-bg:#efd177; --hero-ink:#30250b; --hero-muted:#5d491c;
  --hero-shadow:#b58b25; --hero-glow:#b58b2533;
  --nav-active-bg:#f2c94c; --nav-active-ink:#30250b;
  --bar:#997218; --progress-fill:#997218; --focus:#806000; --gold-ink:#805d0a;
  --overlay:#30250ba6; --shadow-color:#30250b14; --danger:var(--red-ink);
  --success-bg:#e7f3eb; --success-ink:#236345; --success-border:#3e7858;
}
:root[data-palette="gold"][data-theme="dark"] {
  --bg:#1d1b16; --paper:#28251e; --ink:#f6efdf; --muted:#c7bcaa;
  --primary:#e4be58; --primary-hover:#edcc77; --on-primary:#2c230d; --primary-border:#e4be58;
  --link:#efd179; --sidebar:#211e18; --line:#5c5035;
  --soft:#3b3321; --soft-strong:#514225; --soft-ink:#f4dda0;
  --hero-bg:#3b311a; --hero-ink:#f5e3b5; --hero-muted:#d6c49c;
  --hero-shadow:#17130b; --hero-glow:#00000033;
  --nav-active-bg:#d7b04e; --nav-active-ink:#2c230d;
  --bar:#ddb84f; --progress-fill:#ddb84f; --focus:#f4d36d; --gold-ink:#efd179;
  --overlay:#100e0ac9; --shadow-color:#00000033;
  --success-bg:#243a2f; --success-ink:#a1d4b6; --success-border:#85b99b;
}


/* Quiet colour families share semantic roles and remain independent of theme mode. */
:root[data-palette="sage"] {
  --bg:#f3f6f2; --paper:#fcfdfb; --ink:#23352a; --muted:#53665a;
  --primary:#37644c; --primary-hover:#2d543e; --on-primary:#ffffff; --primary-border:#37644c;
  --link:#345f48; --sidebar:#e8efe7; --line:#c9d6ca;
  --soft:#e4eee4; --soft-strong:#d4e4d6; --soft-ink:#34543e;
  --hero-bg:#d9e7d9; --hero-ink:#243e2c; --hero-muted:#425d49;
  --hero-shadow:#a9c0ac; --hero-glow:#59775d24;
  --nav-active-bg:#37644c; --nav-active-ink:#ffffff;
  --bar:#4f765c; --progress-fill:#4f765c; --focus:#37644c; --gold-ink:#64552d;
  --overlay:#1f3427a6; --shadow-color:#233b2a14;
}
:root[data-palette="sage"][data-theme="dark"] {
  --bg:#17221c; --paper:#202d25; --ink:#e9f1e9; --muted:#b5c7b8;
  --primary:#9bb8a5; --primary-hover:#adc6b5; --on-primary:#15291e; --primary-border:#9bb8a5;
  --link:#b2d2b9; --sidebar:#1a271f; --line:#455a4b;
  --soft:#2c3c31; --soft-strong:#3a5141; --soft-ink:#c8dfcb;
  --hero-bg:#2c4233; --hero-ink:#e4f0e4; --hero-muted:#bbd1bf;
  --hero-shadow:#13231a; --hero-glow:#00000033;
  --nav-active-bg:#9bb8a5; --nav-active-ink:#15291e;
  --bar:#9bb8a5; --progress-fill:#9bb8a5; --focus:#c0d8c4; --gold-ink:#dfcca1;
  --overlay:#0d1710c9; --shadow-color:#00000033;
}
:root[data-palette="lavender"] {
  --bg:#f6f3f8; --paper:#fefcfe; --ink:#322b3f; --muted:#655c73;
  --primary:#675482; --primary-hover:#58456f; --on-primary:#ffffff; --primary-border:#675482;
  --link:#654c81; --sidebar:#eee8f3; --line:#d7cbdf;
  --soft:#eee6f4; --soft-strong:#e0d3e9; --soft-ink:#58416e;
  --hero-bg:#e6dbed; --hero-ink:#3c2a4c; --hero-muted:#5c496c;
  --hero-shadow:#c3afcf; --hero-glow:#76598c24;
  --nav-active-bg:#675482; --nav-active-ink:#ffffff;
  --bar:#7a6393; --progress-fill:#7a6393; --focus:#675482; --gold-ink:#72522f;
  --overlay:#30213fa6; --shadow-color:#30213f14;
}
:root[data-palette="lavender"][data-theme="dark"] {
  --bg:#211c29; --paper:#2c2535; --ink:#f0eaf6; --muted:#c5b9d0;
  --primary:#b8a8ce; --primary-hover:#c9badd; --on-primary:#281f36; --primary-border:#b8a8ce;
  --link:#d2bfe8; --sidebar:#251f2e; --line:#594b68;
  --soft:#3d3249; --soft-strong:#51415f; --soft-ink:#e0d0ee;
  --hero-bg:#3f324c; --hero-ink:#efe4f9; --hero-muted:#d2bfdc;
  --hero-shadow:#1b1226; --hero-glow:#00000033;
  --nav-active-bg:#b8a8ce; --nav-active-ink:#281f36;
  --bar:#b8a8ce; --progress-fill:#b8a8ce; --focus:#d6c5e9; --gold-ink:#e1c69e;
  --overlay:#150e1ec9; --shadow-color:#00000033;
}
:root[data-palette="terracotta"] {
  --bg:#f9f4ef; --paper:#fffdf9; --ink:#3f2d25; --muted:#715e52;
  --primary:#955a43; --primary-hover:#804a35; --on-primary:#ffffff; --primary-border:#955a43;
  --link:#8c503a; --sidebar:#f3e9df; --line:#dfcbbb;
  --soft:#f3e5d9; --soft-strong:#ead5c3; --soft-ink:#774a36;
  --hero-bg:#edd7c7; --hero-ink:#4d3024; --hero-muted:#70503e;
  --hero-shadow:#c7a389; --hero-glow:#8b5d4224;
  --nav-active-bg:#955a43; --nav-active-ink:#ffffff;
  --bar:#9a6348; --progress-fill:#9a6348; --focus:#955a43; --gold-ink:#77552b;
  --overlay:#3d281fa6; --shadow-color:#462c1c14;
}
:root[data-palette="terracotta"][data-theme="dark"] {
  --bg:#291f1b; --paper:#342923; --ink:#f7eee5; --muted:#d0bdb0;
  --primary:#d4a58c; --primary-hover:#e2b69f; --on-primary:#37231b; --primary-border:#d4a58c;
  --link:#e9bba0; --sidebar:#2d221d; --line:#685044;
  --soft:#48352b; --soft-strong:#614536; --soft-ink:#f0d4c0;
  --hero-bg:#50392b; --hero-ink:#fae8d9; --hero-muted:#dec3ae;
  --hero-shadow:#23160e; --hero-glow:#00000033;
  --nav-active-bg:#d4a58c; --nav-active-ink:#37231b;
  --bar:#d4a58c; --progress-fill:#d4a58c; --focus:#e9c3aa; --gold-ink:#e7c397;
  --overlay:#1b100bc9; --shadow-color:#00000033;
}
:root:is([data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"]) {
  --danger:var(--red-ink); --success-bg:#e7f3eb; --success-ink:#236345; --success-border:#3e7858;
}
:root:is([data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"])[data-theme="dark"] {
  --success-bg:#243a2f; --success-ink:#a1d4b6; --success-border:#85b99b;
}

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}a{color:inherit;text-decoration:none}button{color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.2;font-weight:650}h1{font-size:2.5rem;letter-spacing:-1.6px}h2{font-size:1.5rem;letter-spacing:-.6px}h3{font-size:1.1875rem;letter-spacing:-.3px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:4px}#main:focus{outline:none}.icon{width:22px;height:22px;flex-shrink:0;vertical-align:middle}.icon-button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;flex-shrink:0}@media (hover: hover) and (pointer: fine){.icon-button:hover{background:var(--soft)}}.quiet{background:none;border:none;padding:0;display:inline-flex;align-items:center;gap:8px}.skip-link{position:fixed;z-index:100;top:-70px;left:20px;background:var(--green);color:white;padding:12px 20px;border-radius:12px}.skip-link:focus{top:10px}.loading{display:grid;place-items:center;gap:16px;min-height:100dvh}.loading h1{font-size:2rem}.loading p{color:var(--muted)}
.sidebar{position:fixed;inset:0 auto 0 0;width:246px;padding:34px 26px 24px;background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;font-size:1.5625rem;font-weight:680;letter-spacing:-1px;white-space:nowrap}.brand small{display:block;font-size:0.75rem;letter-spacing:1.3px;color:var(--muted);font-weight:650;margin-top:3px}.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:14px;background:var(--green);color:var(--on-primary);font-family:Georgia,serif;font-size:2.25rem;font-weight:600;letter-spacing:-5px;padding-right:7px;line-height:1;flex-shrink:0}.side-nav{margin-top:60px;display:grid;gap:9px}.nav-item{display:flex;gap:13px;align-items:center;padding:13px 17px;color:var(--muted);border-radius:12px;font-size:1.0625rem;font-weight:550;position:relative}@media (hover: hover) and (pointer: fine){.nav-item:not(.active):hover{color:var(--link);text-decoration:underline;text-underline-offset:4px}}.nav-item.active{background:var(--nav-active-bg);color:var(--nav-active-ink)}.nav-dot{width:5px;height:5px;border-radius:50%;background:var(--flag-yellow);margin-left:auto}.sidebar-bottom{margin-top:auto}.course-mini{padding:22px 0;border-bottom:1px solid var(--line)}.eyebrow{font-size:0.75rem;font-weight:650;letter-spacing:1.6px;color:var(--muted);text-transform:uppercase}.course-mini .eyebrow{font-size:0.75rem;letter-spacing:1.3px}.course-mini strong{display:block;font-size:0.875rem;margin-top:12px}.track{height:5px;background:var(--soft);border-radius:20px;overflow:hidden;margin:13px 0 8px}.track i{display:block;height:100%;background:var(--primary);border-radius:20px}.course-mini small{font-size:0.75rem;color:var(--muted)}.about-link{font-size:0.875rem;color:var(--muted);margin-top:20px;min-height:44px}.about-link .icon{width:17px;height:17px}.workspace{margin-left:246px;min-height:100dvh}.topbar{height:92px;display:flex;justify-content:space-between;align-items:center;padding:0 42px;max-width:1400px;margin:auto}.top-caption{font-size:0.875rem;color:var(--muted);letter-spacing:.1px}.top-actions{display:flex;gap:16px;align-items:center}.streak-chip{display:flex;align-items:center;gap:7px;font-size:0.875rem}.streak-chip .icon{width:18px;height:18px;stroke:var(--red-ink)}.streak-chip span{color:var(--muted)}.top-actions>.icon-button{border:1px solid var(--line);width:38px;height:38px}.top-actions>.icon-button .icon{width:19px;height:19px}.mobile-brand{display:none}main{padding:20px 42px 0;max-width:1400px;margin:auto}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:30px}.page-heading .eyebrow{margin-bottom:13px}.page-heading h1 span{font-weight:450}.subtitle{font-size:1rem;margin-top:13px;color:var(--muted)}.level-pill{display:flex;align-items:center;white-space:nowrap;background:var(--soft);border:1px solid var(--line);padding:9px 13px;border-radius:30px;color:var(--soft-ink);font-size:0.75rem;gap:6px}.level-pill .icon{width:15px;height:15px}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.95fr) minmax(260px,1fr);gap:26px 25px}.hero{background:var(--hero-bg);border-radius:24px;position:relative;overflow:hidden;padding:32px 34px;display:flex;min-height:324px;color:var(--hero-ink)}.hero-copy{position:relative;z-index:2;width:66%}.hero-tag{color:var(--flag-yellow);font-size:0.75rem;letter-spacing:1.8px;font-weight:650}.hero h2{font-size:2.1875rem;letter-spacing:-1px;font-weight:540;line-height:1.17;margin:18px 0 15px;white-space:pre-line}.hero p{font-size:0.875rem;line-height:1.7;color:var(--hero-muted);max-width:310px}.button{min-height:46px;border-radius:11px;padding:11px 18px;font-size:0.9375rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid transparent;line-height:1.4;transition:background .15s,transform .15s;touch-action:manipulation}.button .icon{width:18px;height:18px}@media (hover: hover) and (pointer: fine){.button:hover:not(:disabled){transform:translateY(-1px)}}.button.primary{background:var(--green);color:var(--on-primary)}@media (hover: hover) and (pointer: fine){.button.primary:hover{background:var(--primary-hover)}}.button.cream{background:var(--flag-yellow);color:var(--flag-blue)}@media (hover: hover) and (pointer: fine){.button.cream:hover{background:var(--warm)}}.button.outline{background:transparent;border-color:var(--line)}@media (hover: hover) and (pointer: fine){.button.outline:hover:not(:disabled){background:var(--soft)}}.button.subtle{background:var(--soft);color:var(--soft-ink)}.button.large{min-height:50px;padding:13px 26px}.button.full{display:flex;width:100%;margin-top:24px}.hero .button{margin-top:24px;font-size:0.875rem;min-height:44px}.hero-meta{display:flex;align-items:center;gap:7px;font-size:0.75rem;color:var(--hero-muted);margin-top:15px}.hero-meta .icon{width:13px;height:13px}.hero-meta span{margin:0 2px}.hero-art{position:absolute;right:8px;top:40px;width:235px;height:270px}.letter-card{position:absolute;right:28px;top:27px;width:149px;height:188px;border-radius:12px;background:var(--flag-yellow);transform:rotate(12deg);box-shadow:11px 13px 0 var(--hero-shadow);color:var(--flag-blue);display:flex;flex-direction:column;align-items:center}.letter-card small{font-size:0.75rem;letter-spacing:3px;margin-top:19px}.letter-card b{font-family:Georgia,serif;font-size:8.25rem;font-weight:400;line-height:1.04;margin-top:-5px}.letter-card span{font-family:Georgia,serif;font-style:italic;font-size:0.75rem;letter-spacing:.8px}.hello-bubble{position:absolute;left:0;top:156px;background:var(--flag-red);border-radius:18px 18px 18px 3px;color:var(--on-primary);font-size:1.25rem;padding:8px 20px;transform:rotate(-9deg);font-family:Georgia,serif;box-shadow:0 5px 10px var(--hero-glow)}.art-spark{position:absolute;right:10px;top:0;color:var(--flag-yellow);font-size:2.4375rem;line-height:1}.art-leaf{width:57px;height:30px;background:var(--flag-red);position:absolute;bottom:12px;right:23px;border-radius:100% 0 100% 0;transform:rotate(-20deg)}.art-dot{position:absolute;top:21px;left:29px;width:8px;height:8px;background:var(--flag-yellow);border-radius:50%}.daily-card{border:1px solid var(--line);border-radius:24px;background:var(--paper);text-align:center;padding:24px 22px;box-shadow:var(--shadow)}.section-mini-title{display:flex;justify-content:space-between;align-items:center;text-align:left;font-size:0.875rem;font-weight:600}.section-mini-title .icon{width:18px;height:18px;color:var(--gold-ink)}.goal-progress{margin:23px auto 18px;display:flex;flex-direction:column;align-items:center;gap:7px}.goal-caption{font-size:0.875rem;line-height:1.5;color:var(--muted);white-space:nowrap}.goal-ring{margin:0;width:128px;height:128px;border-radius:50%;background:conic-gradient(var(--primary) var(--progress),var(--soft) 0);display:grid;place-items:center}.goal-ring>div{height:110px;width:110px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;flex-direction:column}.goal-ring b{font-size:2.125rem;letter-spacing:-1px;line-height:1.3;font-weight:600}.goal-ring b span{font-size:1.1875rem;color:var(--muted);font-weight:400;letter-spacing:-.5px}.daily-card h3{font-size:1rem}.daily-card p{font-size:0.75rem;color:var(--muted);margin:8px auto 10px;max-width:220px}.text-button{background:none;border:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:var(--link);min-height:44px;padding:6px 0;font-size:0.875rem;font-weight:550}@media (hover: hover) and (pointer: fine){.text-button:hover{text-decoration:underline}}.text-button .icon{width:16px;height:16px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:8px}.section-heading h2{font-size:1.4375rem}.section-heading>a{font-size:0.75rem;color:var(--link);display:flex;gap:8px;align-items:center;white-space:nowrap}.section-heading>a .icon{width:15px;height:15px}.section-heading>span{font-size:0.75rem;color:var(--muted)}.section-subtitle{font-size:0.875rem;color:var(--muted);margin-bottom:20px}.learning-section{padding-top:9px}.route-list{display:grid;gap:10px}.lesson-row{display:flex;align-items:center;gap:15px;border:1px solid var(--line);background:var(--paper);border-radius:13px;padding:17px 18px;min-height:79px;transition:background .15s}@media (hover: hover) and (pointer: fine){.lesson-row:hover{background:var(--soft)}}.lesson-number{width:40px;height:40px;border-radius:12px;background:var(--soft);color:var(--soft-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.0625rem;font-weight:600}.lesson-number.complete{background:var(--soft);color:var(--soft-ink)}.lesson-number.complete .icon{width:21px;height:21px}.lesson-row-copy{flex:1;min-width:0}.lesson-row-copy strong{display:block;font-size:0.9375rem;font-weight:600}.lesson-row-copy small{display:block;font-size:0.75rem;color:var(--muted);margin-top:3px}.lesson-row-meta{display:flex;align-items:center;gap:15px;font-size:0.75rem;white-space:nowrap;color:var(--muted)}.lesson-row-meta .icon{width:17px;height:17px;color:var(--muted)}.side-stack{display:flex;flex-direction:column;gap:18px}.review-callout{border-radius:20px;background:var(--warm);padding:24px}.tile-icon{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.tile-icon .icon{width:22px;height:22px}.tile-icon.peach{background:var(--warm);color:var(--warm-ink)}.tile-icon.light{background:var(--soft);color:var(--soft-ink)}.review-callout h3{margin-top:15px;font-size:1.1875rem}.review-callout p{margin-top:9px;font-size:0.875rem;color:var(--warm-ink);max-width:240px}.review-callout .button{margin-top:19px;width:100%;border-color:var(--warm-border);font-size:0.875rem;justify-content:space-between}.phrase-note{padding:18px 20px;border:1px dashed var(--line);border-radius:16px;flex:1}.phrase-note .eyebrow{font-size:0.75rem;letter-spacing:1.4px}.phrase-line{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}.phrase-line strong{font-size:1.375rem;letter-spacing:-.5px;font-family:Georgia,serif;font-weight:500}.phrase-line .icon-button{height:36px;width:36px;color:var(--link)}.phrase-line .icon{height:19px;width:19px}.phrase-note p{font-size:0.75rem;color:var(--muted)}.install-strip{display:flex;gap:16px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:20px 23px;margin-top:28px;background:var(--soft)}.install-strip>div{flex:1}.install-strip h3{font-size:1rem}.install-strip p{font-size:0.75rem;color:var(--muted);margin-top:5px}.install-strip .button{font-size:0.75rem;min-height:40px}.app-footer{display:flex;justify-content:space-between;align-items:center;padding:32px 42px 24px;max-width:1400px;margin:auto;font-size:0.75rem;color:var(--muted);gap:12px}.offline-status{font-size:0.75rem;min-height:36px}.offline-status .icon{width:13px;height:13px}.bottom-nav{display:none}
.course-banner{display:flex;align-items:center;gap:18px;padding:26px;background:var(--soft);border-radius:20px;margin-bottom:27px}.course-banner h2{font-size:1.375rem}.course-banner p{font-size:0.875rem;color:var(--muted);margin-top:8px;max-width:520px}.course-label{font-size:0.75rem;letter-spacing:1.2px;white-space:nowrap;margin-left:auto;color:var(--muted)}.lesson-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.lesson-tile{padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:var(--shadow);transition:transform .2s,border-color .2s;display:flex;flex-direction:column}@media (hover: hover) and (pointer: fine){.lesson-tile:hover{transform:translateY(-3px);border-color:var(--link)}}.lesson-tile-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.lesson-count{font-size:0.75rem;letter-spacing:1px;color:var(--muted)}.shade-0{background:var(--soft);color:var(--soft-ink)}.shade-1{background:var(--warm);color:var(--warm-ink)}.shade-2{background:var(--soft);color:var(--soft-ink)}.shade-3{background:var(--warm);color:var(--warm-ink)}.lesson-tile h2{font-size:1.25rem;line-height:1.35;margin-bottom:10px}.lesson-tile p{font-size:0.875rem;color:var(--muted);margin-bottom:24px;flex:1}.lesson-tile-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:17px;gap:8px}.lesson-tile-foot>span{font-size:0.75rem;color:var(--muted);display:flex;align-items:center;gap:5px}.lesson-tile-foot .icon{height:17px;width:17px}.done-label{font-size:0.75rem;display:flex;align-items:center;gap:5px;color:var(--link)}.course-honesty{display:flex;align-items:center;gap:13px;font-size:0.875rem;color:var(--muted);padding:27px 4px}.course-honesty>p strong{font-weight:600;color:var(--ink)}.course-honesty .icon{color:var(--link)}
.word-toolbar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}.search-field{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--paper);padding:0 15px;border-radius:12px;max-width:400px;flex:1;min-width:220px}.search-field .icon{width:18px;height:18px;color:var(--muted)}.search-field input{width:100%;border:0;background:transparent;outline:none;padding:13px 0;font-size:1.125rem;color:var(--ink)}.search-field:focus-within{box-shadow:0 0 0 2px var(--link)}.filter-tabs{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px}.filter-tabs button{padding:10px 14px;font-size:0.75rem;border:0;background:transparent;border-radius:8px;min-height:40px;color:var(--muted)}.filter-tabs button.selected{background:var(--soft);color:var(--soft-ink)}.results-count{font-size:0.75rem;color:var(--muted);margin-bottom:16px}.word-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.word-tile{border:1px solid var(--line);border-radius:18px;padding:17px 21px;background:var(--paper)}.word-tile-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.word-topic{font-size:0.75rem;color:var(--muted)}.star-button{width:36px;height:36px;color:var(--muted)}.star-button .icon{width:17px;height:17px}.star-button.saved{color:var(--gold-ink)}.star-button.saved .icon{fill:var(--flag-yellow)}.word-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}.word-title h2{font-size:1.4375rem;letter-spacing:-.5px}.word-title .audio{width:36px;height:36px;background:var(--soft);color:var(--soft-ink)}.word-title .audio .icon{width:18px;height:18px}.word-translation{font-size:0.9375rem;color:var(--muted);margin-top:5px}.word-example{border-top:1px solid var(--line);margin-top:20px;padding-top:14px;font-size:0.875rem;line-height:1.6}.word-example small{display:block;font-size:0.75rem;color:var(--muted);margin-top:5px}.word-foot{margin-top:13px;min-height:39px;display:flex;align-items:center}.word-foot>span{font-size:0.75rem;color:var(--link)}.word-foot .text-button{font-size:0.75rem;min-height:38px}.empty-state{text-align:center;margin:55px auto 65px;max-width:440px;padding:20px}.empty-state>.icon{width:48px;height:48px;color:var(--link);margin-bottom:20px}.empty-state h1{font-size:1.9375rem}.empty-state p{color:var(--muted);font-size:1rem;margin:14px 0 24px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:26px}.stat-card{border:1px solid var(--line);background:var(--paper);border-radius:18px;padding:23px;display:grid;grid-template-columns:1fr auto;align-items:start}.stat-card>.icon{grid-column:2;grid-row:1;color:var(--link);width:24px;height:24px}.stat-card b{font-size:2.375rem;letter-spacing:-1px;grid-column:1;grid-row:1}.stat-card b small{font-size:1.25rem;color:var(--muted);font-weight:450}.stat-card>span{grid-column:1/3;font-size:0.875rem;margin-top:8px;color:var(--muted)}.progress-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:24px}.panel{border:1px solid var(--line);border-radius:20px;background:var(--paper);padding:26px}.panel .section-heading h2{font-size:1.25rem}.week-chart{height:220px;display:flex;gap:20px;padding:22px 8px 0}.week-day{display:flex;flex-direction:column;flex:1;align-items:center;gap:10px}.week-day>span{font-size:0.75rem;color:var(--muted)}.bar-space{display:flex;align-items:flex-end;width:100%;height:140px}.bar-space i{display:block;min-height:5px;width:100%;border-radius:7px 7px 2px 2px;background:var(--bar)}.week-day.today .bar-space i{background:var(--primary)}.bar-space i.zero{background:var(--soft)}.week-day small{font-size:0.75rem;color:var(--muted)}.week-day.today small{font-weight:600;color:var(--link)}.chart-caption{font-size:0.75rem;color:var(--muted);margin-top:16px}.mistake-panel .tile-icon{margin-bottom:18px}.mistake-panel h2{font-size:1.4375rem}.mistake-panel p{font-size:0.875rem;color:var(--muted);margin-top:14px}.mistake-panel .button{margin-top:23px;font-size:0.875rem}.progress-lessons{margin-top:34px}.progress-lessons>.lesson-row{margin-top:10px}.storage-note{display:flex;gap:10px;color:var(--muted);font-size:0.75rem;margin:24px 0 0;max-width:690px}.storage-note .icon{height:17px;width:17px}
.lesson-container{max-width:800px;margin:0 auto}.back-link{display:inline-flex;align-items:center;gap:10px;font-size:0.875rem;color:var(--link);min-height:44px}.back-link .icon{height:18px;width:18px}.lesson-intro-heading{margin:25px 0 28px}.lesson-intro-heading h1{margin:12px 0;font-size:2.375rem}.lesson-intro-heading>p{font-size:1rem;color:var(--muted)}.grammar-card{padding:30px 34px;border:1px solid var(--line);border-radius:22px;background:var(--paper)}.grammar-label{display:flex;align-items:center;gap:10px;font-size:0.75rem;letter-spacing:1.4px;color:var(--link);margin-bottom:17px}.grammar-label .icon{width:18px;height:18px}.grammar-card h2{font-size:1.5625rem;margin-bottom:17px}.grammar-card>p{font-size:1rem;line-height:1.8;color:var(--ink);margin-top:12px}.example-list{margin:23px 0 0;padding:4px 19px;background:var(--soft);border-radius:13px}.example-list>div{display:grid;grid-template-columns:1fr 1fr 38px;gap:12px;align-items:center;padding:9px 0;font-size:0.9375rem;border-bottom:1px solid var(--line)}.example-list>div:last-child{border:0}.example-list>div>span:nth-child(2){color:var(--muted);font-size:0.875rem}.example-list .icon-button{height:38px;width:38px;color:var(--link)}.example-list .icon-button .icon{height:19px;width:19px}.tip{display:flex;align-items:flex-start;gap:11px;padding:16px 18px;background:var(--warm);border-radius:12px;margin-top:22px;color:var(--warm-ink)}.tip .icon{width:19px;height:19px;margin-top:2px}.tip p{font-size:0.875rem;line-height:1.7}.lesson-vocab{margin:30px 0}.lesson-vocab .section-heading h2{font-size:1.375rem}.mini-vocab-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.mini-vocab-grid>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 17px;border:1px solid var(--line);background:var(--paper);border-radius:12px}.mini-vocab-grid b{display:block;font-size:1.0625rem;font-weight:600}.mini-vocab-grid small{display:block;font-size:0.75rem;color:var(--muted);margin-top:3px}.mini-vocab-grid .icon-button{width:36px;height:36px;color:var(--link)}.mini-vocab-grid .icon{width:18px;height:18px}.lesson-start{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:24px 0}.lesson-start p{font-size:0.875rem;color:var(--muted)}
.quiz-container,.flashcard-page{max-width:650px;margin:0 auto;min-height:70dvh}.quiz-top{display:flex;align-items:center;gap:22px;margin-bottom:44px}.quiz-top>.icon-button{color:var(--muted)}.quiz-track{height:8px;border-radius:20px;background:var(--soft);flex:1;overflow:hidden}.quiz-track i{display:block;height:100%;border-radius:20px;background:var(--primary);transition:width .3s}.quiz-top>span{font-size:0.875rem;color:var(--muted);white-space:nowrap}.quiz-eyebrow{color:var(--link);font-size:0.75rem;letter-spacing:1.3px;font-weight:600;margin-bottom:18px}.quiz-container h1{font-size:1.8125rem;letter-spacing:-.7px;line-height:1.4;margin-bottom:30px}.answer-options{display:grid;gap:13px}.answer-option{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:15px 19px;border:1px solid var(--line);border-radius:13px;background:var(--paper);min-height:66px;font-size:1.125rem}@media (hover: hover) and (pointer: fine){.answer-option:hover:not(:disabled){background:var(--soft)}}.option-letter{width:28px;height:28px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.75rem;flex-shrink:0;color:var(--muted)}.answer-option.selected{border-color:var(--link);background:var(--soft-strong);box-shadow:0 0 0 1px var(--link)}.answer-option.selected .option-letter{border-color:var(--link);background:var(--soft);color:var(--soft-ink)}.answer-option.correct{border-color:var(--link);background:var(--soft-strong);box-shadow:0 0 0 1px var(--link)}.answer-option.incorrect{border-color:var(--red-border);background:var(--red-soft);box-shadow:0 0 0 1px var(--red-border)}.answer-option:disabled{opacity:1}.answer-option>.icon{margin-left:auto;color:var(--link);width:18px;height:18px}.answer-label{display:block;font-size:0.875rem;color:var(--muted);margin-bottom:9px}.answer-input{display:block;width:100%;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:19px 20px;font-size:1.1875rem;color:var(--ink);min-height:64px}.answer-input.correct{background:var(--soft-strong);border-color:var(--link)}.answer-input.incorrect{background:var(--red-soft);border-color:var(--red-border)}.answer-input:disabled{opacity:1;-webkit-text-fill-color:var(--ink)}.diacritics{display:flex;align-items:center;gap:7px;margin-top:12px;flex-wrap:wrap}.diacritics button{width:42px;height:42px;border:1px solid var(--line);border-radius:8px;background:var(--soft);font-size:1.1875rem}.diacritics small{margin-left:4px;font-size:0.75rem;color:var(--muted)}.quiz-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:28px 0 0;padding-top:22px;border-top:1px solid var(--line)}.quiz-bottom>span{font-size:0.75rem;color:var(--muted)}.quiz-bottom .button{min-width:136px}.answer-feedback{border-radius:14px;padding:18px 20px;margin-top:23px}.answer-feedback.good{background:var(--soft);color:var(--soft-ink)}.answer-feedback.try{background:var(--red-soft);color:var(--red-ink)}.answer-feedback strong{display:flex;align-items:center;gap:10px;font-size:1.0625rem}.answer-feedback p{font-size:0.9375rem;line-height:1.7;margin-top:9px}.answer-feedback .icon{width:19px;height:19px}.listening-box{padding:25px;border:1px solid var(--line);background:var(--soft);border-radius:18px;margin-bottom:24px;text-align:center;display:flex;align-items:center;flex-direction:column}.listen-button{display:flex;align-items:center;gap:12px;min-height:54px;padding:12px 24px;background:var(--green);color:var(--on-primary);border:0;border-radius:12px;font-weight:600;font-size:1rem}.listening-box>small{font-size:0.75rem;color:var(--muted);max-width:400px;margin-top:7px}.transcript{font-size:1.4375rem;color:var(--ink);padding:12px 0 6px;line-height:1.5}.completion{max-width:580px;text-align:center;margin:35px auto 60px;padding:20px 10px}.completion-symbol{width:92px;height:92px;background:var(--soft);color:var(--soft-ink);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-bottom:28px}.completion-symbol .icon{width:45px;height:45px;stroke-width:1.5}.completion .eyebrow{font-size:0.75rem;margin-bottom:18px}.completion h1{font-size:2.5rem}.completion>p:not(.eyebrow){color:var(--muted);margin:18px auto 26px;font-size:1rem;max-width:440px}.completion-stats{display:flex;gap:35px;justify-content:center;margin:30px 0}.completion-stats>div{display:flex;flex-direction:column}.completion-stats b{font-size:2.3125rem;letter-spacing:-1px}.completion-stats b small{font-size:1.3125rem;color:var(--muted);font-weight:400}.completion-stats span{font-size:0.75rem;color:var(--muted)}.completion-buttons{display:flex;justify-content:center;gap:12px;margin-bottom:14px}.completion>.text-button{display:flex;margin:14px auto 0}.flashcard-page>.eyebrow{text-align:center;margin-bottom:24px;font-size:0.75rem}.flashcard{min-height:340px;position:relative;border:1px solid var(--line);border-radius:24px;background:var(--paper);box-shadow:0 8px 0 var(--shadow-color);text-align:center;padding:30px;display:flex;align-items:center;flex-direction:column;justify-content:center}.flashcard>.word-topic{position:absolute;top:22px;left:25px}.flash-sound{position:absolute;top:14px;right:17px;color:var(--link)}.flashcard h1{font-size:2.9375rem;letter-spacing:-1px;margin-top:25px;line-height:1.25}.flash-hint{font-size:0.9375rem;color:var(--muted);margin:22px auto 28px}.flash-translation{font-size:1.5625rem;color:var(--link);margin-top:15px}.flash-example{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);width:100%;font-size:1.125rem}.flash-example small{display:block;font-size:0.875rem;color:var(--muted);margin-top:7px}.flash-footnote{font-size:0.75rem;color:var(--muted);text-align:center;margin:25px auto;max-width:380px}.review-prompt{font-size:0.875rem;color:var(--muted);text-align:center;margin:30px 0 14px}.rating-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.rating{border-radius:12px;padding:15px 10px;border:1px solid var(--line);min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.rating strong{font-weight:600;font-size:1rem}.rating small{font-size:0.75rem;opacity:.75}.rating.again{background:var(--red-soft);color:var(--red-ink);border-color:var(--red-border)}.rating.good{background:var(--soft);color:var(--soft-ink);border-color:var(--line)}.rating.easy{background:var(--warm);color:var(--warm-ink);border-color:var(--warm-border)}@media (hover: hover) and (pointer: fine){.rating:hover{filter:brightness(.97)}}
.modal-open{overflow:hidden}.modal-backdrop{position:fixed;inset:0;z-index:60;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(5px)}.modal{background:var(--paper);border:1px solid var(--line);border-radius:24px;width:560px;max-width:100%;max-height:calc(100dvh - 48px);overflow:auto;padding:26px 30px 30px;box-shadow:0 25px 100px var(--shadow-color)}.modal-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.modal-heading h2{font-size:1.5625rem}.modal-heading .icon-button{margin-right:-10px}.modal>p{font-size:0.9375rem;color:var(--muted);line-height:1.8;margin:12px 0}.modal>h3{font-size:1.125rem;margin-top:25px}.settings-section{border-bottom:1px solid var(--line);padding:20px 0}.settings-section:first-of-type{padding-top:4px}.settings-section:last-child{border:none;padding-bottom:0}.settings-section h3{font-size:1.0625rem}.settings-section>p{font-size:0.875rem;color:var(--muted);margin:9px 0 15px;line-height:1.65}.choice-group{display:flex;gap:9px;margin-top:15px}.choice-group label{flex:1;position:relative}.choice-group input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;margin:0}.choice-group span{display:block;text-align:center;font-size:0.875rem;border:1px solid var(--line);padding:12px 8px;border-radius:10px;min-height:44px;background:var(--soft)}.choice-group input:checked+span{border-color:var(--link);background:var(--soft-strong);color:var(--soft-ink)}.choice-group input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}.backup-buttons{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}.backup-buttons .button{font-size:0.75rem;flex:1;white-space:nowrap}.import-label{position:relative;overflow:hidden;cursor:pointer}.import-label input{position:absolute;width:100%;height:100%;inset:0;opacity:0;cursor:pointer}.import-label:focus-within{outline:3px solid var(--focus);outline-offset:3px}.settings-row{border:0;background:none;width:100%;display:flex;align-items:center;gap:13px;font-size:0.875rem;min-height:48px;padding:10px 0;color:var(--link)}.settings-row .icon{width:18px;height:18px}.settings-row .icon:last-child{margin-left:auto}.install-preview{display:flex;align-items:center;gap:15px;border-radius:15px;background:var(--soft);padding:18px}.install-preview .brand-mark{width:57px;height:57px;font-size:2.75rem;border-radius:16px}.install-preview small{display:block;font-size:0.75rem;color:var(--muted);margin-top:4px}.install-steps{list-style:none;padding:0;margin:25px 0;display:grid;gap:24px}.install-steps li{display:flex;gap:14px}.install-steps li>span{height:27px;width:27px;border-radius:50%;background:var(--soft);color:var(--soft-ink);font-size:0.875rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}.install-steps strong{font-size:0.9375rem;font-weight:600}.install-steps p{font-size:0.875rem;color:var(--muted);line-height:1.7;margin-top:6px}.about-brand{text-align:center;margin:20px auto 25px}.about-brand .brand-mark{width:62px;height:62px;font-size:3rem;margin-bottom:13px}.about-brand h3{font-size:1.5625rem}.about-brand p{font-size:0.75rem;color:var(--muted);margin-top:6px}.sources{font-size:0.875rem;color:var(--link);padding-left:18px;line-height:1.8}.sources li{margin:6px 0}.sources a{text-decoration:underline;text-underline-offset:3px}.offline-detail{text-align:center;padding:20px}.offline-detail>.icon{width:40px;height:40px;color:var(--link);margin-bottom:15px}.offline-detail h3{font-size:1.25rem}.toast{position:fixed;bottom:24px;left:calc(50% + 120px);transform:translate(-50%,20px);background:var(--nav-active-bg);color:var(--on-primary);padding:15px 22px;border-radius:13px;font-size:0.9375rem;max-width:min(550px,calc(100vw - 40px));box-shadow:0 8px 35px var(--shadow-color);z-index:100;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}.warning{background:var(--warm);color:var(--warm-ink);border:1px solid var(--warm-border);border-radius:12px;padding:14px 18px;margin-bottom:22px;font-size:0.875rem}
@media(min-width:1450px){.hero-art{right:24px;transform:scale(1.06)}.hero-copy{width:64%}.hero{min-height:340px;padding:37px 38px}.hero h2{font-size:2.5rem}.hero p{max-width:340px;font-size:0.9375rem}}
@media(max-width:1200px){.sidebar{width:216px;padding:28px 20px}.workspace{margin-left:216px}.brand{font-size:1.375rem;gap:9px}.brand-mark{width:40px;height:40px;font-size:2rem}.brand small{font-size:0.75rem;letter-spacing:1px}main{padding:20px 28px 0}.topbar{padding:0 28px;height:86px}.app-footer{padding-left:28px;padding-right:28px}.dashboard-grid{grid-template-columns:minmax(0,1.7fr) minmax(235px,1fr);gap:22px}.hero{padding:28px;min-height:325px}.hero h2{font-size:1.875rem}.hero-art{right:-35px;top:80px;transform:scale(.86)}.hero-copy{width:75%}.hero p{max-width:260px}.hero .button{position:relative;z-index:5}.hero-art .hello-bubble{left:28px;top:160px}.daily-card{padding:23px 19px}.goal-progress{margin-top:25px}.lesson-grid,.word-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-heading h1{font-size:2.1875rem}.page-heading .level-pill{font-size:0.75rem}.hero-meta{font-size:0.75rem}.course-label{display:none}.week-chart{gap:12px}.toast{left:calc(50% + 108px)}}
@media(max-width:1000px){.hero-art{opacity:.55;right:-65px;top:96px;transform:scale(.75)}.hero-copy{width:85%}.hero h2{font-size:1.8125rem}.hero p{max-width:230px}.page-heading{align-items:flex-start}.page-heading>.level-pill{margin-top:8px}.hero-meta{position:relative;z-index:5}.progress-grid{grid-template-columns:1fr}.mistake-panel{display:grid;grid-template-columns:45px 1fr;gap:0 18px}.mistake-panel .tile-icon{grid-row:1/3}.mistake-panel p{grid-column:2;margin-top:10px}.mistake-panel .button{grid-column:2;justify-self:start;margin-top:16px}.lesson-row-meta{gap:7px}.top-caption{font-size:0.75rem}.section-heading h2{font-size:1.3125rem}.install-strip>div p{max-width:320px}}
@media(max-width:880px){.sidebar{display:none}.workspace{margin-left:0;padding-bottom:calc(74px + env(safe-area-inset-bottom))}.mobile-brand{display:flex;align-items:center;gap:10px;font-size:1.4375rem;letter-spacing:-.8px}.mobile-brand .brand-mark{width:35px;height:35px;font-size:1.8125rem;border-radius:10px}.top-caption{display:none}.topbar{height:80px;padding:0 25px;padding-top:env(safe-area-inset-top);box-sizing:content-box}.top-actions{gap:10px}.top-actions .streak-chip span{display:none}.top-actions>.icon-button{width:38px;height:38px}.bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;padding:8px 15px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper);backdrop-filter:blur(16px);z-index:30}.bottom-nav .nav-item{display:flex;flex-direction:column;gap:5px;border-radius:12px;padding:5px 0;color:var(--muted);font-size:0.75rem;font-weight:500;min-height:50px}.bottom-nav .nav-item.active{background:var(--soft-strong);color:var(--soft-ink)}.bottom-nav .icon{height:22px;width:22px}.bottom-nav .nav-dot{display:none}main{padding:21px 25px 0}.app-footer{padding:23px 25px 13px}.page-heading h1{font-size:2.25rem}.page-heading .level-pill{font-size:0.75rem}.dashboard-grid{grid-template-columns:minmax(0,1.8fr) minmax(230px,1fr)}.hero h2{font-size:2rem}.hero-art{opacity:1;right:-45px;transform:scale(.78);top:91px}.hero-copy{width:82%}.hero p{max-width:260px}.toast{left:50%;bottom:calc(86px + env(safe-area-inset-bottom))}.quiz-container,.flashcard-page{min-height:65dvh}}
@media(max-width:650px){body{font-size:1rem}.topbar{height:69px;padding-left:20px;padding-right:20px}.mobile-brand{font-size:1.375rem}.top-actions{gap:8px}.streak-chip{font-size:0.875rem}main{padding:22px 20px 0}.page-heading{display:block;margin-bottom:24px}.page-heading h1{font-size:1.9375rem;letter-spacing:-1px}.page-heading h1 span{font-weight:450}.page-heading .eyebrow{font-size:0.75rem;letter-spacing:1.1px;margin-bottom:11px}.subtitle{font-size:0.875rem;line-height:1.7;margin-top:11px;max-width:315px}.page-heading>.level-pill{display:none}.page-heading>.button{margin-top:18px;min-height:42px;font-size:0.875rem}.dashboard-grid{display:flex;flex-direction:column;gap:22px}.hero{padding:27px 25px;min-height:314px;border-radius:20px}.hero-copy{width:83%}.hero-tag{font-size:0.75rem;letter-spacing:1.5px}.hero h2{font-size:1.9375rem;margin-top:17px;max-width:290px}.hero p{font-size:0.75rem;max-width:230px}.hero .button{font-size:0.75rem;padding:11px 14px;margin-top:22px}.hero-meta{font-size:0.75rem;margin-top:14px}.hero-art{top:105px;right:-69px;opacity:.65;transform:scale(.73)}.hero-art .hello-bubble{display:none}.art-leaf{display:none}.letter-card{box-shadow:7px 10px 0 var(--hero-shadow)}.daily-card{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0 18px;text-align:left;padding:21px;border-radius:18px;position:relative}.section-mini-title{grid-column:2;font-size:0.875rem;align-self:end}.section-mini-title .icon{width:17px;height:17px}.goal-progress{grid-column:1;grid-row:1/5;margin:0;align-self:center}.goal-ring{width:77px;height:77px}.goal-ring>div{width:65px;height:65px}.goal-ring b{font-size:1.5625rem;letter-spacing:-.7px}.goal-ring b span{font-size:0.875rem}.daily-card h3{font-size:0.75rem;font-weight:500;color:var(--muted);margin:6px 0 0}.daily-card p{display:none}.daily-card .text-button{grid-column:2;justify-self:start;font-size:0.75rem;min-height:32px;padding-bottom:0;padding-top:7px}.learning-section{padding-top:6px}.section-heading h2{font-size:1.4375rem}.section-heading>a{font-size:0.75rem}.section-subtitle{font-size:0.75rem;margin-bottom:17px}.lesson-row{padding:14px 13px;gap:12px;min-height:78px}.lesson-number{height:36px;width:36px;border-radius:10px;font-size:0.9375rem}.lesson-row-copy strong{font-size:0.875rem}.lesson-row-copy small{font-size:0.75rem;line-height:1.5;max-width:180px}.lesson-row-meta{font-size:0.75rem;gap:5px}.lesson-row-meta .icon{width:14px;height:14px}.side-stack{display:grid;grid-template-columns:1fr;gap:18px}.review-callout{display:grid;grid-template-columns:39px 1fr;gap:0 14px;padding:22px;border-radius:18px}.review-callout>.tile-icon{grid-row:1/3;width:39px;height:39px}.review-callout h3{font-size:1.1875rem;margin:0}.review-callout p{font-size:0.75rem;grid-column:2;margin-top:9px;max-width:none}.review-callout .button{grid-column:1/3;margin-top:18px;font-size:0.875rem}.phrase-note{padding:18px 21px}.phrase-note .eyebrow{font-size:0.75rem}.phrase-line strong{font-size:1.5625rem}.phrase-note p{font-size:0.875rem}.install-strip{padding:20px;gap:14px;display:grid;grid-template-columns:35px 1fr;margin-top:23px}.install-strip>.tile-icon{width:35px;height:35px}.install-strip h3{font-size:0.9375rem}.install-strip p{font-size:0.75rem;margin-top:7px;line-height:1.6}.install-strip>.button{grid-column:2;justify-self:start;min-height:38px;padding:9px 13px}.app-footer{padding:19px 20px 14px;flex-direction:column-reverse;align-items:flex-start;gap:0}.app-footer>span{font-size:0.75rem}.offline-status{font-size:0.75rem;min-height:38px}.course-banner{padding:21px;gap:13px;align-items:flex-start;margin-bottom:22px;border-radius:17px}.course-banner .tile-icon{width:34px;height:34px;border-radius:9px}.course-banner .tile-icon .icon{width:19px;height:19px}.course-banner h2{font-size:1.125rem}.course-banner p{font-size:0.75rem;margin-top:8px;line-height:1.7}.lesson-grid{grid-template-columns:1fr 1fr;gap:12px}.lesson-tile{padding:18px 15px;border-radius:16px}.lesson-tile .tile-icon{width:36px;height:36px;border-radius:10px}.lesson-tile .tile-icon .icon{width:20px;height:20px}.lesson-tile-top{margin-bottom:19px}.lesson-count{font-size:0.75rem;letter-spacing:.5px}.lesson-tile h2{font-size:1.125rem;letter-spacing:-.3px;line-height:1.35}.lesson-tile p{font-size:0.75rem;line-height:1.65;margin-bottom:16px}.lesson-tile-foot{padding-top:13px;gap:3px}.lesson-tile-foot>span{font-size:0.75rem;gap:3px}.lesson-tile-foot>span .icon{display:none}.lesson-tile-foot>.icon{height:14px;width:14px}.done-label{font-size:0.75rem;gap:3px}.done-label .icon{height:14px;width:14px}.course-honesty{font-size:0.75rem;padding:25px 0;align-items:flex-start;line-height:1.8}.course-honesty .icon{height:18px;width:18px;margin-top:3px}.word-toolbar{display:block}.search-field{max-width:none}.search-field input{padding:13px 0}.filter-tabs{display:flex;margin-top:14px;width:100%}.filter-tabs button{flex:1;padding:8px 6px;font-size:0.75rem;white-space:nowrap}.results-count{font-size:0.75rem}.word-grid{grid-template-columns:1fr;gap:13px}.word-tile{padding:16px 21px}.word-tile-top .word-topic{font-size:0.75rem}.word-title{margin-top:3px}.word-title h2{font-size:1.5rem}.word-example{margin-top:16px;font-size:0.9375rem}.word-example small{font-size:0.75rem}.word-foot{margin-top:5px}.word-foot .text-button{font-size:0.75rem}.stats-grid{gap:9px;margin-bottom:20px}.stat-card{padding:15px 12px;border-radius:14px;display:flex;flex-direction:column;align-items:flex-start}.stat-card>.icon{width:19px;height:19px;margin-bottom:8px}.stat-card b{font-size:1.8125rem;line-height:1.3}.stat-card b small{font-size:0.9375rem}.stat-card>span{font-size:0.75rem;line-height:1.5;margin-top:5px}.panel{padding:22px 19px}.panel .section-heading{align-items:flex-start;gap:7px}.panel .section-heading h2{font-size:1.1875rem}.panel .section-heading .muted{font-size:0.75rem;max-width:65px;text-align:right}.week-chart{gap:12px;padding:20px 2px 0;height:200px}.bar-space{height:125px}.chart-caption{font-size:0.75rem;line-height:1.7;margin-top:10px}.progress-grid{gap:18px}.mistake-panel{gap:0 13px}.mistake-panel h2{font-size:1.25rem}.mistake-panel p{font-size:0.75rem}.mistake-panel .button{font-size:0.75rem;grid-column:1/3;width:100%;margin-top:19px}.progress-lessons{margin-top:28px}.storage-note{font-size:0.75rem;line-height:1.8}.lesson-intro-heading{margin:18px 0 23px}.lesson-intro-heading h1{font-size:1.875rem}.lesson-intro-heading .eyebrow{font-size:0.75rem}.lesson-intro-heading>p{font-size:0.875rem}.grammar-card{padding:23px 20px;border-radius:18px}.grammar-card h2{font-size:1.5rem}.grammar-card>p{font-size:0.9375rem;line-height:1.8}.grammar-label{font-size:0.75rem;letter-spacing:1px;margin-bottom:16px}.example-list{padding:3px 13px}.example-list>div{grid-template-columns:1fr 32px;gap:3px 7px;padding:10px 0;font-size:0.9375rem}.example-list>div>span:nth-child(2){grid-row:2;grid-column:1;font-size:0.75rem}.example-list .icon-button{grid-column:2;grid-row:1/3;height:32px;width:32px}.tip{padding:14px 13px;gap:9px}.tip p{font-size:0.75rem;line-height:1.8}.lesson-vocab .section-heading h2{font-size:1.3125rem}.lesson-vocab .section-heading>span{font-size:0.75rem}.mini-vocab-grid{grid-template-columns:1fr;gap:8px}.mini-vocab-grid>div{padding:12px 16px}.mini-vocab-grid b{font-size:1.0625rem}.mini-vocab-grid small{font-size:0.875rem}.lesson-start{display:block;padding:20px 0}.lesson-start p{font-size:0.875rem;margin-bottom:15px}.lesson-start .button{width:100%;min-height:50px}.quiz-top{gap:13px;margin-bottom:30px}.quiz-top>span{font-size:0.75rem}.quiz-container h1{font-size:1.625rem;line-height:1.4;margin-bottom:24px;letter-spacing:-.7px}.quiz-eyebrow{font-size:0.75rem;letter-spacing:1.1px;margin-bottom:16px}.answer-option{min-height:64px;padding:15px;gap:12px;font-size:1.0625rem}.option-letter{height:26px;width:26px;font-size:0.75rem}.quiz-bottom{flex-direction:column-reverse;align-items:stretch;margin-top:24px;gap:12px;padding-top:20px}.quiz-bottom>span{text-align:center;font-size:0.75rem}.quiz-bottom .button{min-height:49px;font-size:1rem}.answer-feedback{padding:17px 16px}.answer-feedback strong{font-size:1rem}.answer-feedback p{font-size:0.875rem;line-height:1.8}.answer-input{font-size:1.1875rem;padding:18px 16px}.diacritics small{display:block;width:100%;font-size:0.75rem;margin:4px 0 0}.listening-box{padding:23px 16px}.listen-button{font-size:0.9375rem;padding:12px 20px}.listening-box>small{font-size:0.75rem;line-height:1.7}.transcript{font-size:1.375rem}.completion{margin-top:10px;padding:20px 0}.completion h1{font-size:2.125rem}.completion .eyebrow{font-size:0.75rem}.completion>p:not(.eyebrow){font-size:0.9375rem;line-height:1.8;margin:17px auto 22px}.completion-buttons{flex-direction:column;gap:11px}.completion-stats{gap:28px;margin:27px 0}.completion-stats span{font-size:0.75rem}.flashcard{min-height:330px;padding:30px 20px;border-radius:20px}.flashcard h1{font-size:2.375rem}.flash-translation{font-size:1.5rem}.flash-example{font-size:1rem}.flash-hint{font-size:0.875rem}.rating-buttons{gap:9px}.rating{padding:13px 7px}.rating strong{font-size:0.9375rem}.rating small{font-size:0.75rem}.modal-backdrop{padding:14px;align-items:center}.modal{border-radius:21px;max-height:calc(100dvh - 28px);padding:21px 22px 25px}.modal-heading{margin-bottom:15px}.modal-heading h2{font-size:1.4375rem;letter-spacing:-.7px}.settings-section h3{font-size:1.0625rem}.settings-section>p{font-size:0.875rem}.choice-group{gap:6px}.choice-group span{font-size:0.75rem;padding:12px 5px}.backup-buttons{gap:8px}.backup-buttons .button{font-size:0.75rem;padding:11px 12px}.install-steps{gap:22px}.install-steps strong{font-size:0.875rem}.install-steps p{font-size:0.75rem}.install-preview small{font-size:0.75rem}.toast{font-size:0.875rem;line-height:1.65;padding:13px 18px;width:max-content;max-width:calc(100vw - 30px)}}
@media(max-width:360px){main{padding-left:16px;padding-right:16px}.topbar{padding-left:16px;padding-right:16px}.hero{padding:24px 20px}.hero h2{font-size:1.75rem}.hero-copy{width:90%}.hero-art{right:-86px;opacity:.45}.lesson-row-copy small{font-size:0.75rem}.lesson-tile{padding:16px 12px}.lesson-tile h2{font-size:1.0625rem}.lesson-tile p{font-size:0.75rem}.lesson-grid{gap:10px}.rating strong{font-size:0.875rem}.flashcard h1{font-size:2.125rem}.modal{padding:20px 18px}.modal-heading h2{font-size:1.3125rem}.backup-buttons{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* Readability, tricolour details and compact-screen adjustments. */
html { background: var(--bg); accent-color: var(--primary); }
body { font-size: 1.0625rem; line-height: 1.65; }
body, .sidebar, .modal, .bottom-nav { transition: background-color .2s, color .2s; }
.brand-mark { padding: 0; letter-spacing: -2px; overflow: hidden; background: linear-gradient(90deg,var(--flag-blue) 0 33.333%,var(--flag-yellow) 33.333% 66.666%,var(--flag-red) 66.666%); }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.brand small { font-size: 0.6875rem; line-height: 1.4; letter-spacing: .65px; white-space: normal; max-width: 145px; }
.hero { background: var(--hero-bg); color: var(--hero-ink); }
.hero::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg,var(--flag-blue) 0 33.333%,var(--flag-yellow) 33.333% 66.666%,var(--flag-red) 66.666%); }
.hero-tag { color: var(--flag-yellow); }
.hero p, .hero-meta { color: var(--hero-muted); }
.hero p { font-size: 0.9375rem; line-height: 1.75; }
.hero .button { font-size: 0.9375rem; }
.hero-meta { font-size: 0.75rem; flex-wrap: wrap; }
.letter-card { background: var(--flag-yellow); color: var(--flag-blue); }
.hello-bubble { background: var(--flag-red); color: white; }
.letter-card span { font-size: 0.75rem; }
.letter-card small { font-size: 0.75rem; letter-spacing: 2px; }
.daily-card h3 { color: var(--ink); }
.daily-card p, .daily-card .text-button { font-size: 0.875rem; }

.goal-ring b span { color: var(--muted); }
.subtitle, .section-subtitle, .review-callout p, .phrase-note p, .course-banner p { font-size: 0.9375rem; }
.button { font-size: 0.9375rem; }
.button.outline { color: var(--link); border-color: var(--line); }@media (hover: hover) and (pointer: fine){
.button.outline:hover:not(:disabled), .icon-button:hover { background: var(--soft); }}
.review-callout .button { color: var(--warm-ink); border-color: var(--warm-border); }@media (hover: hover) and (pointer: fine){
.review-callout .button:hover:not(:disabled) { background: var(--paper); color: var(--link); }}
.lesson-row-copy strong { font-size: 1.0625rem; }
.lesson-row-copy small { font-size: 0.875rem; }
.lesson-row-meta { font-size: 0.8125rem; }
.lesson-tile h2 { font-size: 1.375rem; }
.lesson-tile p { font-size: 0.9375rem; }
.lesson-tile-foot>span, .done-label { font-size: 0.8125rem; }
.lesson-count { font-size: 0.75rem; }
.word-translation { font-size: 1rem; }
.word-example { font-size: 0.9375rem; }
.word-example small, .word-foot>span, .word-foot .text-button { font-size: 0.875rem; }
.word-topic { font-size: 0.8125rem; }
.grammar-card>p { font-size: 1.0625rem; line-height: 1.8; }
.example-list>div { font-size: 1.0625rem; }
.example-list>div>span:nth-child(2), .tip p { font-size: 0.9375rem; }
.mini-vocab-grid b { font-size: 1.125rem; }
.mini-vocab-grid small { font-size: 0.9375rem; }
.quiz-container h1 { font-size: 1.9375rem; }
.answer-option { font-size: 1.125rem; line-height: 1.6; }
.answer-feedback strong { font-size: 1.125rem; }
.answer-feedback p { font-size: 1rem; line-height: 1.7; }
.answer-input { font-size: 1.25rem; }
.answer-option.selected, .answer-option.correct { color: var(--soft-ink); }
.answer-option.incorrect { color: var(--red-ink); }
.answer-option.incorrect .option-letter { color: var(--red-ink); border-color: var(--red-border); }
.answer-label, .quiz-bottom>span, .listening-box>small { font-size: 0.875rem; }
.diacritics button { min-width: 44px; min-height: 44px; font-size: 1.3125rem; }
.diacritics small { color: var(--muted); font-size: 0.8125rem; }
.listen-button { font-size: 1rem; }
.transcript { color: var(--ink); font-size: 1.5rem; }
.flashcard { box-shadow: 0 8px 0 var(--soft); }
.flash-hint, .flash-example { font-size: 1rem; }
.flash-example small { font-size: 0.875rem; }
.flash-footnote, .review-prompt { font-size: 0.875rem; }
.rating strong { font-size: 1.0625rem; }
.rating small { font-size: 0.8125rem; opacity: 1; }
.rating.again { background: var(--red-soft); color: var(--red-ink); border-color: var(--red-border); }
.rating.good { background: var(--soft); color: var(--soft-ink); border-color: var(--line); }
.rating.easy { background: var(--warm); color: var(--warm-ink); border-color: var(--warm-border); }
.completion>p:not(.eyebrow) { font-size: 1rem; }
.completion-stats span { font-size: 0.875rem; }
.modal>p, .settings-section>p { font-size: 0.9375rem; line-height: 1.75; }
.settings-section h3 { font-size: 1.125rem; }
.choice-group label { min-width: 0; }
.choice-group span { display: flex; align-items: center; justify-content: center; min-height: 48px; height: 100%; font-size: 0.875rem; line-height: 1.4; }
.choice-group input:checked+span { background: var(--soft-strong); color: var(--soft-ink); border-color: var(--link); }
.settings-row, .backup-buttons .button { font-size: 0.875rem; }
.settings-row { color: var(--link); }
.install-preview small, .install-steps p, .about-brand p, .sources { font-size: 0.875rem; }
.install-steps strong { font-size: 1rem; }
.install-strip p, .install-strip .button { font-size: 0.875rem; }
.install-strip h3 { font-size: 1.0625rem; }
.app-footer, .offline-status { font-size: 0.75rem; color: var(--muted); }
.search-field input::placeholder, .answer-input::placeholder { color: var(--muted); opacity: 1; }
.course-honesty, .chart-caption, .storage-note, .stat-card>span { font-size: 0.875rem; }
.top-actions>.icon-button, .word-title .audio, .star-button, .phrase-line .icon-button, .example-list .icon-button, .mini-vocab-grid .icon-button { width: 44px; height: 44px; }
.word-title, .lesson-tile-foot, .backup-buttons, .section-heading { flex-wrap: wrap; }
.word-title h2, .lesson-row-copy, .lesson-tile, .panel { min-width: 0; overflow-wrap: break-word; }
.example-list>div { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 44px; }
.example-list>div>span { min-width: 0; overflow-wrap: break-word; }
.stat-card>span, .week-day>span, .week-day small { color: var(--muted); }
.stat-card b small { color: var(--muted); }
.bottom-nav { background: var(--paper); border-color: var(--line); }
.bottom-nav .nav-item { color: var(--muted); font-size: 0.75rem; }
.bottom-nav .nav-item.active { background: var(--soft-strong); color: var(--soft-ink); }
.toast { background: var(--nav-active-bg); color: white; font-size: 0.9375rem; }
.warning { background: var(--warm); color: var(--warm-ink); border-color: var(--warm-border); font-size: 0.875rem; }
@media (max-width: 1200px) {
  .brand small { font-size: 0.625rem; max-width: 130px; }
  .hero-copy { width: 85%; }
  .hero-art { right: -65px; opacity: .7; }
}
@media (max-width: 880px) {
  .hero-copy { width: 83%; }
  .hero-art { right: -65px; }
  .bottom-nav .nav-item { min-height: 54px; }
  .workspace { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
}
@media (max-width: 650px) {
  body { font-size: 1rem; line-height: 1.7; }
  .mobile-brand { font-size: 1.4375rem; }
  .page-heading h1 { font-size: 2.0625rem; }
  .subtitle, .section-subtitle { font-size: 0.9375rem; max-width: none; }
  .page-heading .eyebrow, .hero-tag { font-size: 0.75rem; letter-spacing: .8px; }
  .hero { padding: 27px 24px; }
  .hero-copy { width: 100%; }
  .hero h2 { font-size: 2rem; max-width: none; }
  .hero p { max-width: none; font-size: 0.9375rem; padding-right: 28px; }
  .hero-art { display: none; }
  .hero .button { font-size: 0.9375rem; min-height: 48px; padding: 12px 17px; }
  .hero-meta { font-size: 0.75rem; line-height: 1.6; }
  .daily-card { grid-template-columns: max-content minmax(0,1fr); padding: 21px 18px; gap: 0 17px; }
  .goal-ring { width: 94px; height: 94px; }
  .goal-ring>div { width: 80px; height: 80px; }
  .goal-ring b { font-size: 1.8125rem; }
  .goal-ring b span { font-size: 1rem; }

  .section-mini-title { font-size: 0.9375rem; flex-wrap: wrap; gap: 5px; }
  .daily-card h3 { font-size: 0.8125rem; line-height: 1.5; }
  .daily-card .text-button { font-size: 0.8125rem; line-height: 1.5; min-height: 44px; }
  .section-heading { gap: 10px; align-items: center; }
  .section-heading>a, .section-heading>span { font-size: 0.8125rem; }
  .lesson-row { flex-wrap: wrap; gap: 8px 12px; padding: 16px 14px; }
  .lesson-row-copy { flex-basis: calc(100% - 48px); }
  .lesson-row-copy strong { font-size: 1.0625rem; }
  .lesson-row-copy small { font-size: 0.875rem; max-width: none; }
  .lesson-row-meta { margin-left: 48px; width: calc(100% - 48px); justify-content: space-between; font-size: 0.8125rem; }
  .lesson-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .lesson-tile { padding: 22px; }
  .lesson-tile-top { margin-bottom: 16px; }
  .lesson-tile h2 { font-size: 1.375rem; }
  .lesson-tile p { font-size: 0.9375rem; margin-bottom: 18px; }
  .lesson-tile-foot>span, .done-label { font-size: 0.8125rem; }
  .lesson-tile-foot>span .icon { display: inline-block; }
  .lesson-count { font-size: 0.75rem; }
  .review-callout h3 { font-size: 1.3125rem; }
  .review-callout p { font-size: 0.9375rem; }
  .review-callout .button { font-size: 0.9375rem; }
  .phrase-note .eyebrow { font-size: 0.75rem; letter-spacing: .8px; }
  .phrase-note p { font-size: 0.9375rem; }
  .install-strip { grid-template-columns: 35px minmax(0,1fr); }
  .install-strip>div { min-width: 0; }
  .install-strip h3 { font-size: 1.0625rem; }
  .install-strip p, .install-strip .button { font-size: 0.875rem; }
  .app-footer>span { font-size: 0.75rem; }
  .offline-status { font-size: 0.75rem; }
  .course-banner h2 { font-size: 1.3125rem; }
  .course-banner p, .course-honesty { font-size: 0.875rem; }
  .word-toolbar { margin-bottom: 20px; }
  .filter-tabs button { font-size: 0.8125rem; min-height: 44px; padding: 10px 6px; }
  .results-count { font-size: 0.8125rem; }
  .word-title h2 { font-size: 1.625rem; }
  .word-title { flex-wrap: nowrap; }
  .word-topic, .word-tile-top .word-topic { font-size: 0.8125rem; }
  .word-translation, .word-example { font-size: 1rem; }
  .word-example small, .word-foot>span, .word-foot .text-button { font-size: 0.875rem; }
  .word-foot { margin-top: 10px; }
  .stats-grid { gap: 10px; }
  .stat-card { padding: 16px 12px; }
  .stat-card>span { font-size: 0.75rem; }
  .stat-card b { font-size: 2rem; }
  .stat-card b small { font-size: 1rem; }
  .panel .section-heading h2 { font-size: 1.3125rem; }
  .panel .section-heading .muted { font-size: 0.75rem; max-width: none; }
  .chart-caption, .storage-note { font-size: 0.8125rem; }
  .mistake-panel h2 { font-size: 1.375rem; }
  .mistake-panel p, .mistake-panel .button { font-size: 0.9375rem; }
  .lesson-intro-heading .eyebrow, .grammar-label { font-size: 0.75rem; }
  .lesson-intro-heading>p { font-size: 0.9375rem; }
  .grammar-card { padding: 24px 20px; }
  .grammar-card h2 { font-size: 1.625rem; }
  .grammar-card>p { font-size: 1.0625rem; }
  .example-list>div { grid-template-columns: minmax(0,1fr) 44px; font-size: 1.0625rem; }
  .example-list>div>span:nth-child(2) { font-size: 0.9375rem; }
  .example-list .icon-button { width: 44px; height: 44px; }
  .tip p { font-size: 0.9375rem; }
  .lesson-vocab .section-heading h2 { font-size: 1.4375rem; }
  .lesson-vocab .section-heading>span { font-size: 0.8125rem; }
  .mini-vocab-grid b { font-size: 1.125rem; }
  .mini-vocab-grid small { font-size: 0.9375rem; }
  .lesson-start p { font-size: 0.9375rem; }
  .quiz-container h1 { font-size: 1.8125rem; }
  .quiz-eyebrow { font-size: 0.75rem; }
  .answer-option { font-size: 1.125rem; min-height: 68px; padding: 16px; }
  .option-letter { width: 30px; height: 30px; font-size: 0.8125rem; }
  .answer-feedback strong { font-size: 1.125rem; }
  .answer-feedback p { font-size: 1rem; }
  .answer-input { font-size: 1.25rem; }
  .quiz-bottom .button { font-size: 1.0625rem; }
  .quiz-bottom>span, .listening-box>small { font-size: 0.875rem; }
  .diacritics small { font-size: 0.8125rem; }
  .listen-button { font-size: 1rem; }
  .transcript { font-size: 1.5rem; }
  .completion .eyebrow, .flashcard-page>.eyebrow { font-size: 0.75rem; }
  .completion>p:not(.eyebrow), .flash-hint { font-size: 1rem; }
  .completion-stats span { font-size: 0.875rem; }
  .flashcard { min-height: 355px; }
  .flash-example { font-size: 1rem; }
  .flash-example small { font-size: 0.875rem; }
  .rating strong { font-size: 1rem; }
  .rating small { font-size: 0.75rem; }
  .rating { padding: 14px 7px; min-height: 80px; }
  .modal-heading h2 { font-size: 1.5625rem; }
  .settings-section h3 { font-size: 1.125rem; }
  .modal>p, .settings-section>p { font-size: 0.9375rem; }
  .choice-group span { font-size: 0.875rem; }
  .backup-buttons .button { font-size: 0.875rem; white-space: normal; }
  .install-steps strong { font-size: 1rem; }
  .install-steps p, .install-preview small { font-size: 0.875rem; }
  .toast { font-size: 0.9375rem; }
}
@media (max-width: 360px) {
  .hero { padding: 24px 20px; }
  .hero h2 { font-size: 1.875rem; }
  .hero p { padding-right: 0; }
  .daily-card { grid-template-columns: max-content minmax(0,1fr); gap: 0 12px; padding: 19px 15px; }
  .goal-ring { width: 86px; height: 86px; }
  .goal-ring>div { width: 74px; height: 74px; }
  .section-mini-title { font-size: 0.875rem; }
  .lesson-row-copy strong { font-size: 1.0625rem; }
  .lesson-row-copy small { font-size: 0.875rem; }
  .filter-tabs button { font-size: 0.75rem; padding-inline: 3px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { display: grid; grid-template-columns: 1fr auto; }
  .stat-card>span { grid-column: 1; }
  .stat-card>.icon { grid-column: 2; }
  .rating strong { font-size: 0.9375rem; }
  .modal-heading h2 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  body, .sidebar, .modal, .bottom-nav { transition: none; }
}

/* Make progress marks equally distinct in both themes. */
.goal-ring { background: conic-gradient(var(--link) var(--progress),var(--soft) 0); }
.track i, .quiz-track i, .week-day.today .bar-space i { background: var(--link); }
.audio-playing { color: var(--link); box-shadow: 0 0 0 3px var(--soft-strong); }


/* The hidden attribute must also win against authored flex/grid button styles. */
[hidden] { display: none !important; }

/* Navigation state belongs to the route, never a retained touch hover or focus. */
:root { --bottom-nav-offset: 0px; }
.nav-letters { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; font-size: 1.25rem; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.nav-item {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav-item:not(.active), .bottom-nav .nav-item:not(.active) {
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
.nav-item:focus:not(:focus-visible) { outline: none; }
.nav-item:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .nav-item:not(.active):hover, .bottom-nav .nav-item:not(.active):hover {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/* A compact, complete alphabet with independent letter and example playback. */
.alphabet-page { max-width: 840px; margin: 0 auto; }
.alphabet-header { margin-bottom: 20px; }
.alphabet-header h1 { font-size: 2.25rem; line-height: 1.2; letter-spacing: -1px; }
.alphabet-header .eyebrow { margin-bottom: 8px; }
.alphabet-header>p { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; margin-top: 8px; }
.alphabet-grid { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 10px; }
.alphabet-letter {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 32px 34px;
  align-items: baseline;
  align-content: center;
  justify-content: center;
  column-gap: 4px;
  row-gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 90px;
  padding: 9px 5px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.alphabet-letter strong.upper { font-size: 1.875rem; font-weight: 650; line-height: 1; }
.alphabet-letter small.lower { font-size: 1.3125rem; line-height: 1; color: var(--muted); }
.alphabet-name {
  grid-column: 1 / -1;
  align-self: center;
  min-width: 0;
  max-width: 100%;
  font-size: 0.875rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--muted);
  white-space: normal;
}
.alphabet-letter.selected, .alphabet-letter.selectedletter, .alphabet-letter[aria-pressed="true"] {
  border-color: var(--link);
  background: var(--soft-strong);
  box-shadow: 0 0 0 1px var(--link);
}
.alphabet-letter[aria-pressed="true"] .alphabet-name,
.alphabet-letter[aria-pressed="true"] small.lower { color: var(--soft-ink); }
.alphabet-detail {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
}
.alphabet-detail-heading, .alphabet-detail>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.alphabet-detail h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font-size: 1.75rem; line-height: 1.25; }
.alphabet-detail h2 small { font-size: 1rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.alphabet-detail p { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); }
.alphabet-detail .alphabet-sound { margin: 0; color: var(--ink); }
.alphabet-sound span { font-weight: 700; color: var(--link); }
.alphabet-detail .button { justify-self: start; min-height: 48px; font-size: 1rem; }
.alphabet-example { text-align: left; justify-content: flex-start; flex-wrap: wrap; line-height: 1.5; }
.alphabet-note { margin: 14px 0 8px; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) {
  .alphabet-letter:hover { border-color: var(--link); }
}

/* Selection and listening are separate controls, with a full-size audio target. */
.choice-help { margin: 0 0 16px; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
.question-audio { justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin: -12px 0 18px; min-height: 44px; font-size: 0.9375rem; line-height: 1.5; text-align: left; }
.answer-option-row { display: flex; gap: 10px; align-items: center; }
.answer-option-row .answer-option { flex: 1; min-width: 0; gap: 12px; }
.answer-option>span:not(.option-letter) { min-width: 0; overflow-wrap: anywhere; }
.unknown-answer { display: flex; width: 100%; min-height: 48px; margin-top: 14px; font-size: 1rem; }
.unknown-answer.selected, .unknown-answer.selected:disabled {
  border-color: var(--red-border);
  background: var(--red-soft);
  color: var(--red-ink);
  opacity: 1;
}
.option-audio.icon-button {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--link);
}
.option-audio.icon-button.audio-playing { background: var(--soft-strong); box-shadow: 0 0 0 2px var(--link); }
@media (hover: hover) and (pointer: fine) {
  .option-audio.icon-button:hover { background: var(--soft-strong); }
}

/* Keep the next action above the phone navigation and home indicator. */
.quiz-bottom {
  position: sticky;
  bottom: var(--bottom-nav-offset);
  z-index: 25;
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 -8px 24px var(--shadow-color);
}
.quiz-bottom>span { min-width: 0; font-size: 0.875rem; line-height: 1.5; }
.quiz-bottom .button { flex-shrink: 0; min-height: 50px; }
.quiz-container .answer-option, .quiz-container .answer-input, .quiz-container .answer-feedback {
  scroll-margin-bottom: calc(var(--bottom-nav-offset) + 145px);
}

/* Backup status and the two-step reset share the existing theme tokens. */
.sync-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.sync-status .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--link); }
.sync-status small { display: block; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; margin-top: 3px; }
.sync-indicator { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
.sync-indicator::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.sync-indicator[data-state="synced"], .sync-indicator.is-synced { color: var(--link); }
.sync-status[data-state="error"], .sync-indicator[data-state="error"], .sync-indicator.is-error { color: var(--red-ink); }
.danger-zone { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--red-border); }
.danger-zone h3 { color: var(--red-ink); font-size: 1.125rem; }
.danger-zone p { margin: 8px 0 15px; color: var(--muted); font-size: 0.875rem; line-height: 1.65; }
.button.danger { min-height: 48px; border-color: var(--red-border); background: var(--red-soft); color: var(--red-ink); }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.modal-actions .button { flex: 1; min-height: 48px; }
@media (hover: hover) and (pointer: fine) {
  .button.danger:hover:not(:disabled) { background: var(--red-soft); box-shadow: 0 0 0 1px var(--red-ink); }
}

@media (max-width: 880px) {
  :root { --bottom-nav-offset: calc(72px + env(safe-area-inset-bottom,0px)); }
  .bottom-nav {
    grid-template-columns: repeat(5,minmax(0,1fr));
    min-height: var(--bottom-nav-offset);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  }
  .bottom-nav .nav-item { min-width: 0; min-height: 55px; padding: 4px 1px; gap: 4px; font-size: 0.75rem; line-height: 1.25; white-space: nowrap; }
  .workspace { padding-bottom: calc(var(--bottom-nav-offset) + 12px); }
  .toast { bottom: calc(var(--bottom-nav-offset) + 14px); }
}
@media (max-width: 650px) {
  .alphabet-header { margin-bottom: 14px; }
  .alphabet-header h1 { font-size: 1.875rem; letter-spacing: -.7px; }
  .alphabet-header .eyebrow { margin-bottom: 5px; font-size: 0.75rem; }
  .alphabet-header>p { font-size: 0.875rem; line-height: 1.45; margin-top: 6px; }
  .alphabet-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; }
  .alphabet-letter { grid-template-rows: 24px 28px; height: 68px; min-height: 68px; padding: 5px 3px; border-radius: 10px; column-gap: 2px; row-gap: 4px; }
  .alphabet-letter strong.upper { font-size: 1.4375rem; }
  .alphabet-letter small.lower { font-size: 0.9375rem; }
  .alphabet-name { font-size: 0.75rem; line-height: 1.15; }
  .alphabet-detail { margin-top: 14px; padding: 16px; gap: 10px; border-radius: 15px; }
  .alphabet-detail h2 { font-size: 1.625rem; }
  .alphabet-detail h2 small { font-size: 0.9375rem; }
  .alphabet-detail p { font-size: 0.875rem; }
  .alphabet-detail .button { font-size: 0.9375rem; }
  .alphabet-note { font-size: 0.75rem; line-height: 1.5; margin-top: 12px; }
  .answer-option-row { gap: 8px; }
  .answer-option-row .answer-option { gap: 10px; padding: 13px 12px; }
  .quiz-bottom { flex-direction: column-reverse; align-items: stretch; padding: 12px; gap: 8px; }
  .quiz-bottom>span { text-align: center; font-size: 0.8125rem; }
  .quiz-bottom .button { width: 100%; font-size: 1.0625rem; }
  .sync-status { padding: 12px; }
}
@media (max-width: 360px) {
  .bottom-nav { padding-left: 5px; padding-right: 5px; }
  .bottom-nav .nav-item { font-size: 0.75rem; letter-spacing: -.2px; }
  .alphabet-grid { gap: 5px; }
  .alphabet-letter { padding-left: 2px; padding-right: 2px; }
  .alphabet-letter strong.upper { font-size: 1.375rem; }
  .alphabet-letter small.lower { font-size: 0.875rem; }
  .alphabet-name { letter-spacing: -.25px; }
}
@media (max-width: 650px) and (max-height: 740px) {
  .alphabet-workspace main { padding-top: 16px; }
  .alphabet-header { margin-bottom: 12px; }
  .alphabet-letter { height: 60px; min-height: 60px; padding-top: 2px; padding-bottom: 2px; row-gap: 2px; }
}

.writer-gate { max-width: 520px; margin: 12vh auto; padding: 24px; }
.writer-gate .brand-mark { margin-bottom: 24px; }
.writer-gate h1 { margin-bottom: 16px; }
.writer-gate p { font-size: 1.125rem; line-height: 1.6; color: var(--ink); }

/* Completion and the best exercise score are separate, readable facts. */
.lesson-complete-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  color: var(--link);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}
.lesson-complete-label .icon { width: 17px; height: 17px; }
.lesson-best-score { color: var(--ink); font-size: 1rem; font-weight: 650; line-height: 1.5; }
.lesson-row {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  align-items: start;
  gap: 14px;
}
.lesson-row-result { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 10px; }
.lesson-row-result .lesson-complete-label { font-size: 0.8125rem; }
.lesson-row-result .lesson-best-score { font-size: 0.875rem; }
.lesson-row-meta { align-self: center; width: auto; margin-left: 0; justify-content: flex-end; gap: 8px; }
.lesson-score-guide {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  text-align: left;
}
.lesson-score-guide>.icon { width: 20px; height: 20px; margin-top: 3px; color: var(--link); }
.lesson-score-guide p { min-width: 0; }
.lesson-score-guide strong { color: var(--ink); font-weight: 650; }
.lesson-retry { min-width: 0; max-width: 100%; min-height: 48px; white-space: normal; text-align: center; }
.lesson-resume-label { display: block; margin: 10px 0; color: var(--link); font-size: 0.9375rem; font-weight: 700; line-height: 1.5; }
.lesson-resume-button { white-space: normal; text-align: center; }
.quiz-session-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin: -18px 0 20px; }
.quiz-session-actions .text-button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 0.875rem; }
.quiz-session-actions .icon { width: 18px; height: 18px; }
.restart-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.lesson-tile { padding: 0; }
.lesson-tile-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
  border-radius: inherit;
}
.lesson-tile-link:focus-visible { outline-offset: -4px; }
.lesson-tile-result {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 18px 24px 22px;
  border-top: 1px solid var(--line);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  background: var(--soft);
}
.lesson-tile-result .lesson-best-score { flex: none; margin: 0; color: var(--muted); font-size: 0.875rem; font-weight: 400; }
.lesson-tile-result .lesson-best-score strong { display: block; margin-top: 3px; color: var(--ink); font-size: 1.25rem; font-weight: 700; line-height: 1.4; }
.lesson-tile-result .lesson-retry { width: 100%; background: var(--paper); }
.lesson-result-summary {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin-bottom: 26px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
}
.lesson-result-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.lesson-result-heading .lesson-best-score { font-size: 1.3125rem; font-weight: 700; line-height: 1.4; }
.lesson-result-summary>p { color: var(--muted); font-size: 1rem; line-height: 1.7; }
.lesson-result-summary>.lesson-retry { justify-self: start; }
.lesson-score-note { display: block; color: var(--muted); font-size: 0.875rem; line-height: 1.65; }
.lesson-result-summary>.lesson-score-note { padding-top: 14px; border-top: 1px solid var(--line); }
.completion-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 26px 0; text-align: left; }
.completion-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.completion-result:only-child { grid-column: 1 / -1; }
.completion-result>span { color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
.completion-result>strong { color: var(--ink); font-size: 1.625rem; font-weight: 700; letter-spacing: -.5px; line-height: 1.35; }
.completion-result>small { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
.completion-result.best-result { background: var(--soft); border-color: var(--bar); }
.completion-result.best-result>span { color: var(--soft-ink); font-weight: 650; }
.completion-results~.completion-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.completion-results~.completion-buttons>.button { min-width: 0; min-height: 50px; padding-inline: 16px; white-space: normal; }
.completion-results~.completion-buttons>.text-button { grid-column: 1 / -1; }
.completion-mistakes { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.completion-mistakes .lesson-score-note { max-width: 440px; margin: 4px auto 0; }
.lesson-score-guide, .lesson-result-summary, .lesson-row-result, .completion-result { overflow-wrap: break-word; }
@media (hover: hover) and (pointer: fine) {
  .lesson-tile:hover { transform: none; }
  .lesson-tile-link:hover h2 { color: var(--link); }
  .lesson-tile-result .lesson-retry:hover { background: var(--soft-strong); }
}

/* Every vocabulary example has its own generous audio target. */
.word-tile { display: flex; flex-direction: column; }
.word-examples { margin-top: 22px; min-width: 0; }
.word-examples h3 { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; line-height: 1.5; font-weight: 600; color: var(--muted); }
.word-examples h3>span { min-width: 22px; padding: 0 6px; border-radius: 7px; background: var(--soft); color: var(--soft-ink); text-align: center; font-size: 0.75rem; }
.word-examples-list { list-style: none; padding: 0; margin: 8px 0 0; }
.word-examples-list>li { display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: start; gap: 12px; padding: 13px 0; }
.word-examples-list>li+li { border-top: 1px solid var(--line); }
.word-example-copy { min-width: 0; }
.word-example-copy p { margin: 0; overflow-wrap: break-word; color: var(--ink); font-size: 1.0625rem; font-weight: 500; line-height: 1.6; }
.word-example-copy .word-example-translation { margin-top: 4px; color: var(--muted); font-size: 0.9375rem; font-weight: 400; line-height: 1.55; }
.word-example-audio { width: 44px; height: 44px; color: var(--link); border: 1px solid var(--line); background: var(--paper); }
.word-example-audio .icon { width: 20px; height: 20px; }
.word-tile .word-foot { margin-top: auto; padding-top: 12px; }

/* Words stay in their original sentence and open a separate listening card. */
.lookup-sentence { white-space: pre-line; overflow-wrap: break-word; }
.word-example-copy p, .example-list>div>span, .lookup-context p { white-space: pre-line; }
.lookup-word {
  display: inline;
  border: 0;
  border-radius: 4px;
  padding: 2px 1px;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  white-space: normal;
  overflow-wrap: break-word;
  text-decoration: underline dotted;
  text-decoration-color: var(--muted);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  touch-action: manipulation;
}
.lookup-word:focus-visible { outline-offset: 2px; background: var(--soft); }
.lookup-word:active { background: var(--soft-strong); }
.lookup-hint { margin: 6px 0 0; color: var(--muted); font-size: 0.875rem; line-height: 1.55; }
.flashcard .word-examples { width: 100%; text-align: left; padding-top: 18px; border-top: 1px solid var(--line); }
.flashcard .word-examples-list>li:last-child { padding-bottom: 0; }
.lookup-card { min-width: 0; overflow-wrap: break-word; }
.lookup-navigation { position: sticky; top: 0; z-index: 1; margin-bottom: 16px; padding: 2px 0 8px; background: var(--paper); border-bottom: 1px solid var(--line); }
.lookup-back { display: flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 6px 0; text-align: left; font-size: 1rem; line-height: 1.5; }
.lookup-back>span { min-width: 0; overflow-wrap: anywhere; }
.lookup-form { margin: 0; color: var(--link); font-size: 2.125rem; line-height: 1.3; font-weight: 700; }
.lookup-translation { margin: 10px 0 0; color: var(--ink); font-size: 1.3125rem; line-height: 1.5; }
.lookup-pronunciation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 22px; }
.lookup-pronunciation>div { min-width: 0; }
.lookup-label { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
.lookup-ipa { margin: 4px 0 0; color: var(--ink); font-size: 1.25rem; line-height: 1.5; }
.lookup-audio { flex-shrink: 0; min-height: 46px; font-size: 1rem; }
.lookup-audio .icon { width: 21px; height: 21px; }
.lookup-note { margin: 20px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--soft); color: var(--ink); font-size: 1rem; line-height: 1.65; }
.lookup-context { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.lookup-context h4 { margin: 0; color: var(--muted); font-size: 0.875rem; font-weight: 500; }
.lookup-context p { margin: 7px 0 0; color: var(--ink); font-size: 1.125rem; line-height: 1.65; }
.lookup-examples { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.lookup-examples h4 { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.5; font-weight: 600; }
.lookup-examples .word-examples-list { margin-top: 4px; }
.lookup-examples .word-examples-list>li { padding-block: 11px; }
.lookup-examples .word-examples-list>li:last-child { padding-bottom: 0; }
.lookup-examples .word-example-copy p[lang="ro"] { font-size: 1.125rem; }
.lookup-examples .word-example-translation { font-size: 1rem; }
.correct-answer-audio { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 12px; align-items: center; margin: 14px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.correct-answer-audio>div { min-width: 0; }
.correct-answer-label { display: block; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
.answer-feedback .correct-answer-audio p { margin: 4px 0 0; color: var(--ink); font-size: 1.1875rem; line-height: 1.6; font-weight: 600; white-space: pre-line; overflow-wrap: break-word; }
.answer-feedback .correct-answer-audio .correct-answer-translation { margin-top: 2px; color: var(--ink); font-size: 1rem; line-height: 1.6; font-weight: 400; }
.modal { overscroll-behavior: contain; }
.streak-chip { min-height: 44px; border: 0; border-radius: 10px; padding: 4px 7px; background: transparent; color: var(--ink); touch-action: manipulation; }
.streak-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.streak-summary .icon { width: 30px; height: 30px; color: var(--red-ink); }
.streak-summary strong { font-size: 1.5rem; line-height: 1.4; }
.modal>p.streak-today { padding: 13px 15px; border-radius: 10px; background: var(--soft); color: var(--ink); font-weight: 500; }
.alphabet-source { margin: 12px 0 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.65; }
.alphabet-source summary { min-height: 44px; padding-block: 10px; color: var(--link); cursor: pointer; font-weight: 500; }
.alphabet-source summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 5px; }
.alphabet-source p { margin: 2px 0 8px; }
.alphabet-source a { display: inline-block; min-height: 44px; padding-block: 9px; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .lookup-word:hover, .streak-chip:hover { background: var(--soft); }
}
@media (max-width: 380px) {
  .streak-chip { gap: 5px; padding-inline: 4px; }
  .lookup-form { font-size: 1.875rem; }
  .lookup-translation { font-size: 1.25rem; }
}

/* Romanian teaching terms stay inline and contrast in both existing themes. */
.ro-term, .answer-feedback .ro-term {
  display: inline;
  color: var(--link);
  font: inherit;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: break-word;
}
.answer-option.incorrect .ro-term { color: inherit; }
.teaching-text { color: var(--ink); font-size: 1.125rem; line-height: 1.75; }
.teaching-text>p { margin: 16px 0 0; }
.teaching-text>p:first-child { margin-top: 0; }
.teaching-list { list-style: disc outside; padding-left: 1.35em; margin: 12px 0 20px; }
.teaching-list>li { padding-left: .15em; overflow-wrap: break-word; }
.teaching-list>li+li { margin-top: 9px; }
.teaching-list>li::marker { color: var(--link); }
.word-usage { min-width: 0; margin-top: 20px; }
.word-usage h3 { color: var(--muted); font-size: 0.875rem; line-height: 1.5; font-weight: 600; }
.word-usage p { margin-top: 7px; color: var(--ink); font-size: 1.0625rem; line-height: 1.7; overflow-wrap: break-word; }
.flashcard .word-usage { width: 100%; text-align: left; padding-top: 18px; border-top: 1px solid var(--line); }
.grammar-card .tip p { font-size: 1rem; line-height: 1.75; }

.alphabet-examples { min-width: 0; margin-top: 3px; }
.alphabet-examples h3 { font-size: 0.875rem; font-weight: 600; line-height: 1.5; color: var(--muted); }
.alphabet-examples-list { margin-top: 5px; }
.alphabet-examples-list>li:last-child { padding-bottom: 0; }
.alphabet-examples-list .word-example-copy>p[lang="ro"] { font-size: 1.1875rem; }
.letter-in-example { color: var(--link); font-weight: 750; }
@media (max-width: 650px) {
  .word-examples { margin-top: 19px; }
  .word-examples-list>li { gap: 10px; padding-block: 12px; }
}

/* Explain automatic storage and the optional exported file without truncation. */
.storage-locations { display: grid; gap: 0; margin: 14px 0; font-size: 0.9375rem; line-height: 1.65; }
.storage-locations>div { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 12px; padding: 12px 0; }
.storage-locations>div+div { border-top: 1px solid var(--line); }
.storage-locations dt { color: var(--ink); font-weight: 650; }
.storage-locations dd { min-width: 0; margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.settings-section .storage-location-note { margin: 14px 0 0; padding-left: 13px; border-left: 3px solid var(--line); font-size: 0.875rem; line-height: 1.7; overflow-wrap: break-word; }
.storage-location-note strong { color: var(--ink); font-weight: 600; }
.backup-filename {
  display: inline-block;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--soft);
  color: var(--ink);
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size: 0.8125rem;
  line-height: 1.65;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

@media (max-width: 650px) {
  .lesson-row { grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; }
  .lesson-row-meta { width: auto; margin-left: 0; }
  .lesson-row-result { gap: 5px; margin-top: 9px; }
  .lesson-score-guide { gap: 10px; padding: 15px; font-size: 0.875rem; }
  .lesson-tile { padding: 0; }
  .lesson-tile-link { padding: 22px; }
  .lesson-tile-result { padding: 17px 22px 22px; }
  .lesson-result-summary { padding: 20px; border-radius: 16px; }
  .lesson-result-heading .lesson-best-score { font-size: 1.25rem; }
  .lesson-result-summary>p { font-size: 0.9375rem; }
  .lesson-result-summary>.lesson-retry { justify-self: stretch; width: 100%; }
  .completion-results { grid-template-columns: minmax(0,1fr); gap: 10px; margin: 22px 0; }
  .completion-result { padding: 16px 18px; }
  .completion-results~.completion-buttons { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .storage-locations>div { grid-template-columns: minmax(0,1fr); gap: 4px; }
}

/* A reading reference stays navigable as new pronunciation topics are added. */
.reading-start-summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 0 0 25px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 17px; background: var(--soft); }
.reading-start-summary>p { min-width: 0; margin: 0; font-size: 1rem; line-height: 1.65; }
.reading-start-summary>.button { flex-shrink: 0; }
.reading-guide { min-width: 0; margin-top: 38px; }
.reading-guide-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.reading-guide-heading h2 { margin-top: 8px; font-size: 1.75rem; line-height: 1.25; }
.reading-guide-heading .eyebrow { font-size: 0.75rem; }
.reading-guide-heading>.text-button { flex-shrink: 0; }
.reading-guide-hint { margin: 16px 0 20px; color: var(--muted); font-size: 1.0625rem; line-height: 1.75; }
.reading-contents, .reading-section { border: 1px solid var(--line); border-radius: 18px; background: var(--paper); scroll-margin-top: 85px; }
.reading-contents { margin-bottom: 21px; background: var(--soft); }
.reading-contents>summary, .reading-section>summary { display: flex; align-items: center; gap: 15px; min-height: 66px; padding: 18px 22px; color: var(--ink); cursor: pointer; list-style: none; }
.reading-contents>summary::-webkit-details-marker, .reading-section>summary::-webkit-details-marker { display: none; }
.reading-contents>summary { font-size: 1.125rem; font-weight: 650; }
.reading-contents>summary>span { margin-left: auto; font-size: 0.875rem; color: var(--muted); font-weight: 500; }
.reading-contents>summary>.icon, .reading-section>summary>.icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--link); transition: transform .15s ease; }
.reading-contents[open]>summary>.icon, .reading-section[open]>summary>.icon { transform: rotate(90deg); }
.reading-contents nav { padding: 0 18px 18px; }
.reading-contents ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); list-style: none; gap: 5px 12px; margin: 0; padding: 0; }
.reading-contents li { min-width: 0; }
.reading-contents button { width: 100%; display: grid; grid-template-columns: 24px minmax(0,1fr) 18px; align-items: center; gap: 10px; text-align: left; min-height: 48px; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--link); line-height: 1.5; }
.reading-contents button>span { font-size: 0.8125rem; color: var(--muted); }
.reading-contents button>strong { font-size: 0.9375rem; font-weight: 600; overflow-wrap: break-word; }
.reading-contents button>.icon { width: 17px; height: 17px; }
.reading-sections { display: grid; gap: 13px; }
.reading-section-number { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; background: var(--soft); color: var(--link); font-size: 0.875rem; font-weight: 650; }
.reading-section-title { flex: 1; min-width: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.4; overflow-wrap: break-word; }
.reading-section-title small { display: block; margin-top: 5px; color: var(--muted); font-size: 0.875rem; line-height: 1.55; font-weight: 400; }
.reading-section[open]>summary { border-bottom: 1px solid var(--line); }
.reading-section-body { padding: 22px; }
.reading-section-body .teaching-text { font-size: 1.125rem; }
.reading-examples { margin-top: 23px; }
.reading-examples h3 { font-size: 1.0625rem; line-height: 1.5; }
.reading-examples>.lookup-hint { margin-top: 5px; font-size: 0.875rem; }
.reading-examples ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; list-style: none; margin: 15px 0 0; padding: 0; }
.reading-examples li { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 12px; padding: 15px; min-width: 0; background: var(--soft); border-radius: 12px; align-items: start; }
.reading-example-copy { min-width: 0; }
.reading-example-copy p { margin: 0; overflow-wrap: break-word; white-space: pre-line; }
.reading-example-copy .reading-example-ro { font-size: 1.3125rem; font-weight: 600; line-height: 1.6; color: var(--ink); }
.reading-example-copy .reading-example-ipa { margin-top: 3px; font-size: 1rem; line-height: 1.55; color: var(--muted); }
.reading-example-copy .reading-example-translation { margin-top: 7px; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.reading-example-copy .reading-example-note { margin-top: 8px; font-size: 0.9375rem; line-height: 1.65; color: var(--muted); }
.reading-example-audio { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--link); background: var(--paper); }
.reading-practice-hint { display: flex; align-items: flex-start; gap: 11px; margin-top: 21px; padding: 15px; border-left: 3px solid var(--flag-yellow); background: var(--warm); border-radius: 0 10px 10px 0; color: var(--warm-ink); }
.reading-practice-hint>.icon { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.reading-practice-hint p { margin: 0; font-size: 1rem; line-height: 1.7; }
.reading-practice-hint .ro-term { color: inherit; }
.reading-back-to-contents { margin-top: 13px; font-size: 0.875rem; }
.reading-sources { margin-top: 23px; padding: 17px 0; border-block: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.7; }
.reading-sources summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.reading-sources p { margin-top: 12px; color: var(--muted); }
.reading-sources .sources { margin-bottom: 0; }

/* Voice choice stays inside the gear settings; sample buttons are independent
   of the native radio labels so listening never changes a saved preference. */
.voice-choices { border: 0; min-width: 0; margin: 18px 0 0; padding: 0; }
.voice-choices legend { padding: 0 0 11px; font-size: 1rem; font-weight: 650; color: var(--ink); }
.voice-option { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; padding: 12px 10px 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); }
.voice-option.selected { border-color: var(--link); background: var(--soft-strong); box-shadow: inset 0 0 0 1px var(--link); }
.voice-choice { display: flex; align-items: flex-start; flex: 1; min-width: 0; gap: 11px; cursor: pointer; }
.voice-choice input { flex: 0 0 19px; width: 19px; height: 19px; margin: 3px 0 0; accent-color: var(--link); cursor: pointer; }
.voice-choice input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.voice-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.voice-name { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; font-size: 1.125rem; line-height: 1.45; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.voice-recommended { display: inline-block; padding: 2px 6px; border-radius: 5px; font-size: 0.6875rem; line-height: 1.5; font-weight: 600; color: var(--soft-ink); background: var(--paper); }
.voice-description { font-size: 0.9375rem; line-height: 1.55; color: var(--ink); }
.voice-coverage { font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
.voice-preview.icon-button { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); color: var(--link); }
.voice-preview.icon-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.voice-preview.icon-button.audio-playing { background: var(--soft-strong); box-shadow: 0 0 0 2px var(--link); }
.settings-section .voice-selection-status { margin: 12px 0 5px; color: var(--ink); font-size: 0.875rem; font-weight: 600; }
.settings-section .voice-preview-status { margin: 0 0 17px; font-size: 0.8125rem; line-height: 1.6; }
.settings-section .voice-fallback-note { padding: 13px 15px; border-radius: 11px; background: var(--soft); font-size: 0.875rem; line-height: 1.7; }
.voice-fallback-note strong { display: block; margin-top: 7px; color: var(--ink); font-weight: 600; }
.voice-speed-title { margin-top: 22px; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.settings-section .voice-offline-note { margin-top: 22px; margin-bottom: 8px; }
.voice-credits { margin-top: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.voice-credits summary { display: list-item; cursor: pointer; color: var(--ink); font-size: 0.9375rem; font-weight: 600; line-height: 1.65; }
.voice-credits summary>span { margin-left: 8px; font-size: 0.8125rem; font-weight: 400; color: var(--muted); white-space: nowrap; }
.voice-credits>p { margin: 12px 0; color: var(--muted); font-size: 0.875rem; line-height: 1.7; }
.voice-credits .sources { margin: 12px 0 0; overflow-wrap: anywhere; }
@media(max-width:380px) {
 .voice-option { gap: 6px; padding: 11px 8px 11px 10px; }
 .voice-choice { gap: 8px; }
 .voice-name { font-size: 1.0625rem; }
 .voice-description { font-size: 0.9375rem; }
}
@media (hover: hover) and (pointer: fine) {
  .reading-contents button:hover { background: var(--paper); }
  .reading-section>summary:hover { color: var(--link); }
}
@media (max-width: 650px) {
  .reading-start-summary { display: grid; gap: 15px; padding: 18px; }
  .reading-start-summary>p { font-size: 1rem; }
  .reading-start-summary>.button { width: 100%; }
  .reading-guide-heading { align-items: flex-start; gap: 10px; }
  .reading-guide-heading h2 { font-size: 1.5625rem; }
  .reading-guide-heading>.text-button { font-size: 0.875rem; padding-top: 18px; }
  .reading-guide-hint { font-size: 1rem; }
  .reading-contents>summary, .reading-section>summary { gap: 11px; padding: 16px; }
  .reading-contents nav { padding: 0 9px 13px; }
  .reading-contents ol, .reading-examples ul { grid-template-columns: minmax(0,1fr); }
  .reading-section-number { width: 31px; height: 31px; border-radius: 9px; }
  .reading-section-title { font-size: 1.1875rem; }
  .reading-section-title small { font-size: 0.875rem; }
  .reading-section-body { padding: 19px 16px; }
  .reading-section-body .teaching-text { font-size: 1.0625rem; }
  .reading-examples li { padding: 13px; gap: 9px; }
  .reading-example-copy .reading-example-ro { font-size: 1.25rem; }
  .reading-practice-hint { padding: 13px; }
  .reading-practice-hint p { font-size: 0.9375rem; }
}

/* Gold actions need dark text and an edge against the warm background. */
:root:is([data-palette="gold"],[data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"]) .button.primary { border-color:var(--primary-border); }
:root:is([data-palette="gold"],[data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"]) .listen-button { border:1px solid var(--primary-border); }
:root:is([data-palette="gold"],[data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"]) .skip-link { color:var(--on-primary); }
:root:is([data-palette="gold"],[data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"]) .toast { color:var(--nav-active-ink); }
:root:is([data-palette="gold"],[data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"]) .track i, :root:is([data-palette="gold"],[data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"]) .quiz-track i { background:var(--progress-fill); }
:root:is([data-palette="gold"],[data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"]) .goal-ring { background:conic-gradient(var(--progress-fill) var(--progress),var(--soft) 0); }
:root:is([data-palette="gold"],[data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"]) .answer-feedback.good,
:root:is([data-palette="gold"],[data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"]) .answer-option.correct,
:root:is([data-palette="gold"],[data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"]) .answer-input.correct,
:root:is([data-palette="gold"],[data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"]) .rating.good { background:var(--success-bg); color:var(--success-ink); border-color:var(--success-border); }
:root:is([data-palette="gold"],[data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"]) .answer-option.correct { box-shadow:0 0 0 1px var(--success-border); }
:root:is([data-palette="gold"],[data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"]) .answer-option.correct>.icon { color:var(--success-ink); }
:root:is([data-palette="gold"],[data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"]) .login-message.login-error { background:var(--red-soft); color:var(--red-ink); border-color:var(--red-border); }

/* Correct answers use one semantic colour in every light and dark palette. */
:root .answer-feedback.good,
:root .answer-option.correct,
:root .answer-input.correct,
:root .rating.good { background:var(--success-bg);color:var(--success-ink);border-color:var(--success-border); }
:root .answer-feedback.good { border:1px solid var(--success-border); }
:root .answer-option.correct { box-shadow:0 0 0 1px var(--success-border); }
:root .answer-option.correct>.icon,
:root .answer-option.correct .option-letter { color:var(--success-ink);border-color:var(--success-border); }
:root .answer-input.correct:disabled { -webkit-text-fill-color:var(--success-ink); }
.lookup-phrase-parts { margin:0 0 14px;color:var(--muted);font-size:.9375rem; }
.lookup-phrase-parts .lookup-word { color:var(--link); }

:root:is([data-palette="sage"],[data-palette="lavender"],[data-palette="terracotta"]) .hello-bubble { color:#ffffff; }

/* Independent undo notices keep rapid removals reversible without hiding content. */
#removal-notices{position:fixed;z-index:1100;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92vw,440px);display:grid;gap:8px;pointer-events:none}
.removal-notice{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 24px #0002;overflow-wrap:anywhere}
.removal-notice .text-button{flex-shrink:0;min-height:44px}

/* Optional lesson design. The classic layout remains the default. */
:root[data-design="refined"] .refined-quiz{max-width:680px;min-height:0;padding-bottom:30px}
:root[data-design="refined"] body:has(.refined-quiz) .study-context{display:none}
:root[data-design="refined"] .refined-quiz-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;margin-bottom:22px}
:root[data-design="refined"] .refined-quiz-head>.icon-button{width:44px;height:44px}
:root[data-design="refined"] .refined-quiz-context{min-width:0;text-align:center;display:grid;gap:2px;line-height:1.3}
:root[data-design="refined"] .refined-quiz-context strong{font-size:.9rem;overflow-wrap:anywhere}
:root[data-design="refined"] .refined-quiz-context small{font-size:.75rem;color:var(--muted)}
:root[data-design="refined"] .refined-nav-pair{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px}
:root[data-design="refined"] .refined-nav-pair button{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;min-height:48px;padding:9px 10px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:13px;text-align:left;font-size:.82rem;white-space:nowrap}
:root[data-design="refined"] .refined-nav-pair button strong{font-size:inherit;white-space:nowrap}
:root[data-design="refined"] .refined-nav-pair button .icon{width:16px;height:16px;flex:none;color:var(--muted)}
:root[data-design="refined"] .refined-meter{height:5px;margin:16px 0 21px;background:var(--soft);border-radius:10px;overflow:hidden}
:root[data-design="refined"] .refined-meter i{display:block;height:100%;background:var(--primary);border-radius:inherit}
:root[data-design="refined"] .refined-stage-context{display:grid;gap:13px;margin-bottom:27px}
:root[data-design="refined"] .refined-stage-context>strong{font-size:1rem;line-height:1.4}
:root[data-design="refined"] .refined-stage-context>div{display:flex;gap:10px;flex-wrap:wrap}
:root[data-design="refined"] .refined-stage-context .text-button{min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--link);font-size:.875rem;text-decoration:none}
:root[data-design="refined"] .refined-stage-context .icon{width:17px;height:17px}
:root[data-design="refined"] .refined-question{margin-bottom:23px}
:root[data-design="refined"] .refined-question .quiz-eyebrow{margin-bottom:11px}
:root[data-design="refined"] .refined-question h1{font-size:clamp(1.55rem,4.4vw,1.9rem);line-height:1.34;margin-bottom:14px}
:root[data-design="refined"] .refined-quiz .answer-options{gap:10px}
:root[data-design="refined"] .refined-quiz .answer-option{min-height:60px;border-radius:13px}
:root[data-design="refined"] .refined-quiz .answer-option.correct{background:var(--success-bg);color:var(--success-ink);border-color:var(--success-border)}
:root[data-design="refined"] .refined-quiz .answer-option.incorrect{background:var(--red-soft);color:var(--red-ink);border-color:var(--red-border)}
:root[data-design="refined"] .refined-quiz .lesson-support{margin:15px 0 20px}
:root[data-design="refined"] .refined-quiz .lesson-support:has(.teaching-support){padding:16px;background:#fff7d6;color:#493b16;border:1px solid #ead99a;border-radius:15px}
:root[data-design="refined"][data-theme="dark"] .refined-quiz .lesson-support:has(.teaching-support){background:#383321;color:#f5e8b8;border-color:#78683c}
:root[data-design="refined"] .refined-quiz .lesson-support:has(.teaching-support) .service-note{color:inherit}
:root[data-design="refined"] .refined-quiz .lesson-support .assisted-badge{display:none}
:root[data-design="refined"] .refined-quiz .answer-feedback{margin-top:23px;padding:20px;border:1px solid;border-radius:16px}
:root[data-design="refined"] .refined-quiz .answer-feedback.good{border-color:var(--success-border)}
:root[data-design="refined"] .refined-quiz .answer-feedback.try{border-color:var(--red-border)}
:root[data-design="refined"] .refined-explanation{border-top:1px solid currentColor;margin-top:16px;padding-top:12px;opacity:.98}
:root[data-design="refined"] .refined-explanation p{font-size:1rem;line-height:1.65}
:root[data-design="refined"] .refined-quiz .checked-answer-line{margin-bottom:14px}
:root[data-design="refined"] .refined-actions{display:grid;gap:10px;margin-top:23px}
:root[data-design="refined"] .refined-actions .button{width:100%;min-height:52px;justify-content:center}
:root[data-design="refined"] .refined-actions .refined-secondary{background:transparent}
:root[data-design="refined"] .refined-contents-modal{height:min(100dvh,850px);width:min(100%,680px);max-height:100dvh;display:flex;flex-direction:column}
:root[data-design="refined"] .refined-contents-modal .modal-heading{flex:none}
:root[data-design="refined"] .refined-content-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;background:var(--soft);border-radius:12px;margin-bottom:15px}
:root[data-design="refined"] .refined-content-tabs button{min-height:44px;border:0;border-radius:9px;background:none;color:var(--muted)}
:root[data-design="refined"] .refined-content-tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink);font-weight:700;box-shadow:0 1px 5px var(--shadow-color)}
:root[data-design="refined"] .refined-contents-list{overflow:auto;min-height:0;flex:1;scrollbar-gutter:stable}
:root[data-design="refined"] .refined-content-row{display:grid;grid-template-columns:38px minmax(0,1fr) 18px;gap:12px;align-items:center;width:100%;min-height:70px;border:0;border-bottom:1px solid var(--line);padding:13px 8px;background:transparent;color:var(--ink);text-align:left}
:root[data-design="refined"] .refined-content-row.is-current{background:var(--soft);border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:13px 8px;box-shadow:inset 3px 0 0 var(--link)}
:root[data-design="refined"] .refined-row-number{font-weight:700;color:var(--link)}
:root[data-design="refined"] .refined-content-row strong{display:block;font-size:.94rem;line-height:1.35;overflow-wrap:anywhere}
:root[data-design="refined"] .refined-content-row small{display:block;font-size:.78rem;color:var(--muted);margin-top:5px}
:root[data-design="refined"] .refined-content-row .icon{width:16px;height:16px;color:var(--muted)}
:root[data-design="refined"] .refined-task-group h3{font-size:.9rem;color:var(--muted);margin:20px 4px 6px}
:root[data-design="refined"] .refined-past-task h3{font-size:1.18rem;line-height:1.45}
:root[data-design="refined"] .lesson-stage-theory .lesson-intro-heading{margin-top:25px}
:root[data-design="refined"] .lesson-stage-theory .grammar-card{box-shadow:none}
:root[data-design="refined"] .lesson-stage-theory .lesson-start .button{width:100%;justify-content:center}
:root[data-design="refined"] .design-choices{max-width:400px}
@media(max-width:520px){:root[data-design="refined"] .refined-nav-pair button{font-size:.78rem;padding:8px}:root[data-design="refined"] .refined-contents-modal{border-radius:0;height:100dvh;max-height:100dvh;width:100vw}}
:root[data-design="refined"] .refined-examples>div{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:4px 8px;align-items:start}
:root[data-design="refined"] .refined-examples .refined-example-number{grid-column:1;grid-row:1/3;color:var(--muted);font-size:.9rem}
:root[data-design="refined"] .refined-examples>div>span:first-of-type{grid-column:2;grid-row:1;color:var(--ink);font-size:var(--study-text-size);font-weight:400;line-height:1.5}
:root[data-design="refined"] .refined-examples>div>span:nth-of-type(2){grid-column:2;grid-row:2;font-size:.9375rem;color:var(--muted)}
:root[data-design="refined"] .refined-examples>div>.audio-actions{grid-column:3;grid-row:1/3}
:root[data-design="refined"] .lookup-card .lookup-translation{font-size:1.22rem;line-height:1.5}
:root[data-design="refined"] .lookup-card .word-examples-list{counter-reset:refined-word-example}
:root[data-design="refined"] .lookup-card .word-examples-list>li{counter-increment:refined-word-example;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:start}
:root[data-design="refined"] .lookup-card .word-examples-list>li::before{content:counter(refined-word-example) ".";grid-column:1;color:var(--muted);font-size:.9rem;padding-top:2px}
:root[data-design="refined"] .lookup-card .word-examples-list>li>.word-example-copy{grid-column:2;min-width:0}
:root[data-design="refined"] .lookup-card .word-examples-list>li>.audio-actions{grid-column:3;grid-row:1}
:root[data-design="refined"] .lookup-card .word-study-actions>.button{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.3}
:root[data-design="refined"] .audio-menu .audio-action-phrase{font-size:1.65rem;line-height:1.35}
:root[data-design="refined"] .audio-menu .audio-action-translation{font-size:1.2rem;color:var(--ink);line-height:1.5}
:root[data-design="refined"] .audio-menu .audio-action-sheet{gap:12px}
:root[data-design="refined"] .audio-menu .audio-voice-picker{padding:12px 0;border-bottom:1px solid var(--line)}
:root[data-design="refined"] .audio-menu .audio-voice-frame::before{background:var(--soft);border:0;opacity:.6}
:root[data-design="refined"] .audio-menu .audio-voice-wheel{-webkit-mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 12px),transparent)}
:root[data-design="refined"] .audio-menu .audio-voice-help{display:none}
:root[data-design="refined"] .audio-menu .audio-menu-progress{display:block;width:100%;height:4px;margin:12px 0 3px;appearance:none;border:0;border-radius:4px;background:var(--soft);accent-color:var(--link)}
:root[data-design="refined"] .audio-menu .audio-menu-progress::-webkit-progress-bar{background:var(--soft);border-radius:4px}
:root[data-design="refined"] .audio-menu .audio-menu-progress::-webkit-progress-value{background:var(--link);border-radius:4px}
:root[data-design="refined"] .audio-menu .audio-menu-time{display:block;color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
:root[data-design="refined"] .audio-menu .audio-menu-timing{display:flex;align-items:center;justify-content:space-between;gap:10px}
:root[data-design="refined"] .audio-menu .audio-menu-timing button{min-height:44px;padding:5px 0;border:0;background:transparent;color:var(--link);font:inherit;font-size:.88rem}
:root[data-design="refined"] .audio-menu .audio-menu-follow{display:flex;align-items:center;gap:10px;min-height:44px;width:100%;margin-top:8px;border:0;background:transparent;color:var(--ink);text-align:left;font:inherit}
:root[data-design="refined"] .audio-menu .audio-menu-follow span{display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--line);border-radius:5px;color:var(--link)}
:root[data-design="refined"] .audio-menu .audio-menu-follow[aria-pressed="true"] span{border-color:var(--link);background:var(--soft)}
.audio-menu-progress,.audio-menu-timing,.audio-menu-follow{display:none}
:root[data-design="refined"] .audio-menu .audio-action-choice{min-height:60px;align-items:center;background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 3px}
:root[data-design="refined"] .audio-menu .audio-action-choice>.icon{margin-top:0}
:root[data-design="refined"] .audio-menu .audio-action-choice small{font-size:.875rem}
.audio-local-speed{display:none}
:root[data-design="refined"] .audio-menu .audio-local-speed{display:grid;gap:9px;margin-top:8px}
:root[data-design="refined"] .audio-menu .audio-local-speed>span{font-size:.88rem;font-weight:650;color:var(--muted)}
:root[data-design="refined"] .audio-menu .audio-local-speed>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
:root[data-design="refined"] .audio-menu .audio-local-speed button{min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font:inherit}
:root[data-design="refined"] .audio-menu .audio-local-speed button[aria-pressed="true"]{background:var(--soft);color:var(--link);border-color:var(--link);font-weight:700}
:root[data-design="refined"] .refined-theory{max-width:680px;margin:0 auto;padding-bottom:32px}
:root[data-design="refined"] .refined-theory-top{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:center;margin-bottom:22px}
:root[data-design="refined"] .refined-theory-top>.icon-button{width:44px;height:44px}
:root[data-design="refined"] .refined-theory-top>strong{text-align:center;font-size:.9rem;overflow-wrap:anywhere}
:root[data-design="refined"] .refined-theory-stage{color:var(--muted);font-size:.85rem;margin:0 0 8px}
:root[data-design="refined"] .refined-theory-heading{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:10px;align-items:start;margin-bottom:18px}
:root[data-design="refined"] .refined-theory-heading h1{font-size:clamp(1.65rem,5vw,2.2rem);line-height:1.3;margin:0;overflow-wrap:anywhere}
:root[data-design="refined"] .refined-theory-bookmark{width:44px;height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:11px;margin:0;background:var(--paper)}
:root[data-design="refined"] .refined-theory-bookmark[aria-pressed="true"]{background:var(--soft);color:var(--link)}
.theory-bookmark[aria-pressed="true"] .icon{fill:var(--flag-yellow);stroke:var(--ink)}
:root[data-design="refined"] .refined-theory .grammar-card{padding:22px;border:1px solid var(--line);border-radius:18px}
:root[data-design="refined"] .refined-theory .lesson-start{padding-top:20px}