:root {
  --ink: #153c3a;
  --ink-2: #315b56;
  --paper: #f7f4ec;
  --card: #fffdf8;
  --lime: #d7ee72;
  --lime-2: #eff8c7;
  --blue: #cde6ef;
  --blue-2: #e8f3f7;
  --peach: #f7d2b6;
  --red: #b33e32;
  --red-soft: #f9e2dd;
  --green: #0a725d;
  --line: #d5ded7;
  --muted: #59716d;
  --shadow: 0 18px 55px rgba(21, 60, 58, .09);
  --radius: 25px;
}
.header-account{display:flex;align-items:center;gap:18px}.account-button{border:1px solid #a8c4b7;color:var(--paper);background:transparent}.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.account-grid .lesson-section{margin-top:0}[data-account-form]{display:grid;gap:14px;max-width:540px;margin-top:20px}[data-account-form] label{display:grid;gap:6px}[data-account-form] input{width:100%;min-height:46px;padding:12px 17px;border:1px solid #afc4bb;border-radius:10px;background:white;color:var(--ink)}[data-account-form] .check-label{display:flex;align-items:flex-start;gap:10px;font-size:14px}[data-account-form] input[type=checkbox]{width:20px;min-height:20px;flex:none}.recovery-panel{border:2px solid var(--ink);background:var(--lime-2)}.recovery-code{display:block;overflow-wrap:anywhere;padding:16px;background:white;font-size:18px;letter-spacing:1px;border-radius:10px}#sync-status{font-size:14px}@media(max-width:760px){.account-grid{grid-template-columns:1fr}.header-account{gap:8px;flex-direction:column;align-items:flex-end}.header-account .header-progress{font-size:11px}.account-button{padding:8px 12px;font-size:13px}}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 0 0, rgba(215,238,114,.22), transparent 30rem), var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
button, input, select { font: inherit; }
button { color: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid #087dca; outline-offset: 3px; }
.shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; padding: 10px 14px; background: #fff; color: var(--ink); border-radius: 9px; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header { background: var(--ink); color: #fff; }
.header-row { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; border: 0; color: #fff; background: none; padding: 0; text-align: left; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--lime); color: var(--ink); font: 900 17px/1 Georgia, serif; transform: rotate(-3deg); }
.brand strong { display: block; font: 800 22px/1 Georgia, serif; letter-spacing: -.02em; }
.brand small { display: block; margin-top: 3px; color: #c6d6d1; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.header-progress { display: flex; align-items: center; gap: 12px; color: #d7e3df; font-size: 13px; }
.streak { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 99px; background: rgba(255,255,255,.09); }
.mini-progress { width: 95px; height: 6px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.16); }
.mini-progress span { display: block; width: 0; height: 100%; background: var(--lime); transition: width .3s ease; }

.main-nav { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(255,253,248,.92); backdrop-filter: blur(12px); }
.nav-scroll { display: flex; overflow-x: auto; scrollbar-width: none; }
.nav-scroll::-webkit-scrollbar { display: none; }
.nav-item { position: relative; flex: 1; min-width: 108px; padding: 15px 9px 13px; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 800; white-space: nowrap; }
.nav-item span { display: inline-grid; min-width: 22px; margin-right: 4px; font-size: 12px; }
.nav-item::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 3px; border-radius: 4px 4px 0 0; background: transparent; }
.nav-item:hover, .nav-item.active { color: var(--ink); }
.nav-item.active::after { background: var(--green); }

main { min-height: calc(100vh - 180px); padding-block: 38px 78px; }
.view { display: none; animation: reveal .28s ease both; }
.view.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; letter-spacing: -.025em; line-height: 1.08; }
h1 { margin-bottom: 16px; font-size: clamp(2.25rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.35rem); }
h3 { font-size: 1.25rem; }
.eyebrow, .kicker, .instruction-label, .task-label { color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 45px; padding: 11px 17px; border: 1px solid transparent; border-radius: 12px; font-weight: 850; transition: transform .18s, box-shadow .18s, background .18s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--green); color: #fff; box-shadow: 0 8px 18px rgba(10,114,93,.18); }
.button.quiet { border-color: #c8d6cf; background: #fffdf8; color: var(--ink); }
.button.dark { background: var(--ink); color: #fff; }

.hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 22px; }
.hero-card, .today-card, .quick-card, .sentence-card, .word-inspector, .exercise-card, .speak-card, .speech-tips, .progress-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.hero-card { min-height: 460px; padding: clamp(30px, 6vw, 67px); background: linear-gradient(135deg, rgba(255,253,248,.96), rgba(246,249,226,.95)); }
.hero-card h1 { margin: 18px 0; max-width: 680px; }
.hero-card h1 em { color: var(--green); font-weight: inherit; }
.hero-card > p { max-width: 620px; color: var(--muted); font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; color: var(--ink-2); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.today-card { position: relative; overflow: hidden; min-height: 460px; padding: 27px; background: var(--ink); color: #fff; }
.today-card::after { content: ""; position: absolute; right: -60px; bottom: -70px; width: 220px; height: 220px; border: 48px solid rgba(215,238,114,.08); border-radius: 50%; }
.today-top { display: flex; justify-content: space-between; color: #bcd0cb; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.today-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 30px 0 22px; border-radius: 23px; background: var(--lime); color: var(--ink); font-size: 34px; transform: rotate(-3deg); }
.today-card .kicker { color: var(--lime); }
.today-card h2 { margin-bottom: 13px; font-size: 1.9rem; }
.today-card p { color: #cfddda; }
.today-card p strong { color: #fff; }
.lesson-meter { height: 8px; margin-top: 25px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.14); }
.lesson-meter span { display: block; height: 100%; width: 0; background: var(--lime); }
.today-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 11px; color: #bcd0cb; font-size: 12px; }
.today-bottom button { display: grid; place-items: center; width: 41px; height: 41px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); font-size: 19px; }

.section-block { padding-block: 74px 58px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 42px; margin-bottom: 24px; }
.section-heading h2 { margin: 8px 0 0; }
.section-heading > p { max-width: 470px; margin-bottom: 4px; color: var(--muted); }
.path-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.path-card { min-height: 255px; padding: 20px; border: 1px solid rgba(21,60,58,.1); border-radius: 20px; text-align: left; transition: transform .18s, box-shadow .18s; }
.path-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.path-card.lime { background: var(--lime-2); }.path-card.blue { background: var(--blue-2); }.path-card.peach { background: #fbede2; }.path-card.locked { background: #e9ebe7; color: #68726f; }
.path-number { display: block; font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.path-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 23px 0; border: 1px solid rgba(21,60,58,.13); border-radius: 17px; background: rgba(255,255,255,.62); font: 800 18px Georgia, serif; }
.path-card strong { display: block; font: 700 24px Georgia, serif; }
.path-card small { display: block; min-height: 48px; margin-top: 6px; color: currentColor; opacity: .78; }
.path-state { display: block; margin-top: 18px; font-size: 10px; font-weight: 900; letter-spacing: .11em; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quick-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: 25px; box-shadow: none; }
.quick-card.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.quick-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--lime); color: var(--ink); font: 800 22px Georgia, serif; }
.quick-card small { font-size: 10px; font-weight: 900; letter-spacing: .14em; color: var(--green); }
.quick-card.dark small { color: var(--lime); }
.quick-card h3 { margin: 5px 0; }
.quick-card p { margin: 0; color: var(--muted); font-size: 13px; }
.quick-card.dark p { color: #c8d7d3; }
.quick-card > button { border: 0; background: transparent; font-size: 12px; font-weight: 900; color: currentColor; }

.page-intro { display: flex; align-items: center; justify-content: space-between; gap: 35px; margin-bottom: 29px; }
.page-intro.compact { align-items: end; }
.page-intro h1 { margin: 9px 0 11px; font-size: clamp(2.2rem, 4vw, 3.45rem); }
.page-intro p { max-width: 720px; margin: 0; color: var(--muted); }
.lesson-count, .basis-badge, .vocab-count, .practice-score { flex: 0 0 auto; padding: 15px 19px; border-left: 4px solid var(--lime); }
.lesson-count strong, .basis-badge span, .vocab-count strong, .practice-score strong { display: block; font: 700 25px Georgia, serif; }
.lesson-count span, .basis-badge small, .vocab-count span, .practice-score span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.learn-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: 18px; }
.sentence-card { padding: clamp(25px, 5vw, 47px); }
.sentence-scene { display: flex; align-items: center; gap: 10px; margin-bottom: 35px; color: var(--muted); font-size: 13px; }
.sentence-scene > span:first-child { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; background: var(--lime-2); }
.sentence-tokens { display: flex; flex-wrap: wrap; gap: 8px; min-height: 70px; margin: 10px 0 15px; }
.word-token { position: relative; border: 0; border-bottom: 2px dotted #86a099; background: transparent; padding: 2px 2px 5px; color: var(--ink); font: 700 clamp(1.75rem, 5vw, 3.25rem)/1.25 Georgia, serif; }
.word-token:hover, .word-token.active { border-bottom-style: solid; border-bottom-color: var(--green); color: var(--green); }
.sentence-translation { color: var(--muted); font-size: 17px; }
.pattern-strip { display: flex; align-items: center; gap: 16px; margin-top: 31px; padding: 14px 16px; border-radius: 13px; background: var(--blue-2); }
.pattern-strip span { font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.pattern-strip strong { font-size: 14px; }
.sentence-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.inline-feedback { margin-top: 14px; padding: 13px 15px; border-radius: 11px; font-size: 13px; }
.inline-feedback.info { background: #edf3f0; color: var(--muted); }.inline-feedback.good { background: var(--lime-2); }.inline-feedback.warn { background: #fff0cf; }.inline-feedback.bad { background: var(--red-soft); color: #7e2d26; }
.word-inspector { min-height: 470px; padding: 27px; box-shadow: none; background: #eef5f2; }
.inspector-empty { height: 100%; display: grid; place-content: center; text-align: center; color: var(--muted); }
.inspector-empty span { font-size: 34px; }.inspector-empty h2 { margin: 10px 0 4px; color: var(--ink); }.inspector-empty p { max-width: 260px; }
.word-head { display: flex; justify-content: space-between; gap: 15px; align-items: start; }
.word-head h2 { margin: 0; font-size: 2.15rem; }
.word-head button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #b9cec5; border-radius: 50%; background: #fff; }
.word-meaning { color: var(--green); font-weight: 800; }
.word-badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0; }
.badge { padding: 5px 9px; border-radius: 99px; background: #fff; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.word-note { padding: 13px 14px; border-left: 3px solid var(--green); border-radius: 0 10px 10px 0; background: rgba(255,255,255,.7); font-size: 13px; }
.forms-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 13px; }
.forms-table caption { margin-bottom: 7px; text-align: left; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.forms-table td { padding: 7px 4px; border-bottom: 1px solid #cbdad4; }
.forms-table td:last-child { text-align: right; font-weight: 800; }
.example-line { margin-top: 15px; font-family: Georgia, serif; font-size: 17px; }
.lesson-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin-top: 18px; }
.lesson-footer > :last-child { justify-self: end; }
.dot-progress { display: flex; gap: 7px; }.dot-progress span { width: 8px; height: 8px; border-radius: 50%; background: #c3ceca; }.dot-progress span.active { width: 27px; border-radius: 9px; background: var(--green); }

.grammar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.grammar-topic { min-height: 220px; padding: 23px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); text-align: left; }
.grammar-topic:hover { border-color: #8db5a9; box-shadow: var(--shadow); }
.grammar-topic.visited { background: #f6fae6; }
.topic-top { display: flex; justify-content: space-between; align-items: center; }.topic-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--blue-2); font: 700 17px Georgia, serif; }.topic-check { color: var(--green); font-weight: 900; }
.grammar-topic h2 { margin: 22px 0 8px; font-size: 1.55rem; }.grammar-topic p { margin-bottom: 16px; color: var(--muted); font-size: 13px; }.grammar-topic small { font-weight: 900; color: var(--green); }
.unlock-card { display: grid; grid-template-columns: 1fr .75fr; gap: 25px; margin-top: 20px; padding: 28px; border-radius: 21px; background: var(--ink); color: #fff; }
.unlock-card > div:first-child { display: flex; gap: 18px; }.unlock-card .eyebrow { color: var(--lime); }.unlock-card h2 { margin: 6px 0; }.unlock-card p { margin: 0; color: #c5d6d1; }.lock-icon { display: grid; place-items: center; flex: 0 0 55px; height: 55px; border-radius: 17px; background: rgba(255,255,255,.1); font-size: 22px; }
.unlock-conditions { display: grid; gap: 8px; }.unlock-condition { display: flex; justify-content: space-between; gap: 15px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.08); font-size: 12px; }.unlock-condition.done { color: var(--lime); }
.grammar-detail { padding: clamp(24px, 5vw, 48px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.detail-back { border: 0; background: transparent; padding: 0; font-weight: 850; color: var(--green); }.grammar-detail h1 { margin: 22px 0 10px; font-size: 3rem; }.grammar-lead { max-width: 780px; color: var(--muted); font-size: 18px; }
.pattern-card { margin: 27px 0; padding: 23px; border-radius: 18px; background: var(--ink); color: #fff; }.pattern-card small { color: var(--lime); font-weight: 900; letter-spacing: .12em; }.pattern-card strong { display: block; margin-top: 9px; font: 700 clamp(1.35rem, 3vw, 2rem) Georgia, serif; }
.grammar-examples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }.grammar-example { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fbfaf5; }.grammar-example .mini-tokens { display: flex; flex-wrap: wrap; gap: 5px; }.mini-token { border: 0; border-bottom: 1px dotted var(--green); background: transparent; padding: 0 1px 2px; font: 700 18px Georgia, serif; }.grammar-example p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }.memory-note { margin-top: 20px; padding: 17px; border-left: 4px solid var(--green); background: var(--lime-2); border-radius: 0 13px 13px 0; }

.mode-tabs { display: flex; gap: 7px; margin: 20px 0; padding: 6px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }.mode-tabs button { flex: 1; min-width: 115px; padding: 10px 13px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 850; }.mode-tabs button.active { background: var(--ink); color: #fff; }
.exercise-card { max-width: 850px; margin-inline: auto; padding: clamp(25px, 5vw, 45px); }.exercise-top { display: flex; justify-content: space-between; margin-bottom: 28px; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .12em; }.task-label { margin-bottom: 7px; }.exercise-card h2 { margin-bottom: 23px; }.german-prompt { padding: 20px 23px; border-radius: 16px; background: var(--blue-2); }.german-prompt small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .12em; }.german-prompt strong { font: 700 clamp(1.35rem, 3vw, 1.8rem) Georgia, serif; }
.exercise-context { min-height: 24px; margin: 12px 0 20px; color: var(--muted); font-size: 13px; }.exercise-card > label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 850; }.answer-wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; overflow: hidden; border: 2px solid #acc1ba; border-radius: 14px; background: #fff; }.answer-wrap:focus-within { border-color: var(--green); box-shadow: 0 0 0 4px rgba(10,114,93,.1); }.answer-wrap > span { display: grid; place-items: center; align-self: stretch; min-width: 52px; background: #eef4f1; color: var(--green); font-size: 11px; font-weight: 900; }.answer-wrap input { width: 100%; min-height: 56px; border: 0; outline: 0; padding: 14px 18px 14px 24px; color: var(--ink); background: transparent; font-size: 17px; }.answer-wrap button { width: 50px; height: 42px; margin-right: 7px; border: 0; border-radius: 11px; background: var(--lime-2); color: var(--ink); }.exercise-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 17px; }.hint-box, .answer-feedback { margin-top: 17px; padding: 15px 17px; border-radius: 13px; }.hint-box { background: #fff1d8; }.answer-feedback.good { background: var(--lime-2); }.answer-feedback.bad { background: var(--red-soft); }.answer-feedback strong { display: block; margin-bottom: 3px; }.exercise-next-row { display: flex; justify-content: center; margin-top: 17px; }

.vocab-tools { display: grid; grid-template-columns: 1fr 210px 190px; gap: 10px; }.search-box { display: flex; align-items: center; gap: 9px; padding: 0 16px; border: 1px solid #b8c9c2; border-radius: 13px; background: #fff; }.search-box input { width: 100%; min-height: 49px; border: 0; outline: 0; }.vocab-tools select { min-height: 49px; border: 1px solid #b8c9c2; border-radius: 13px; padding: 0 13px; background: #fff; color: var(--ink); }.alphabet { display: flex; flex-wrap: wrap; gap: 4px; margin: 18px 0; }.alphabet button { min-width: 32px; height: 32px; padding: 0 7px; border: 0; border-radius: 8px; background: transparent; font-size: 12px; font-weight: 850; }.alphabet button.active, .alphabet button:hover { background: var(--ink); color: #fff; }
.vocab-list { display: grid; gap: 10px; }.vocab-row { display: grid; grid-template-columns: 55px 1fr 180px 145px auto; align-items: center; gap: 17px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }.vocab-letter { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--lime-2); font: 700 19px Georgia, serif; }.vocab-main button { border: 0; border-bottom: 1px dotted var(--green); background: transparent; padding: 0; font: 700 21px Georgia, serif; }.vocab-main p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }.vocab-form { color: var(--muted); font-size: 12px; }.vocab-form strong { display: block; color: var(--ink); }.status-select { min-height: 39px; border: 1px solid #c4d2cc; border-radius: 10px; padding: 0 9px; background: #fff; font-size: 12px; }.vocab-actions { display: flex; gap: 6px; }.vocab-actions button { width: 37px; height: 37px; border: 1px solid #c4d2cc; border-radius: 10px; background: #fff; }.empty-state { padding: 50px; border: 1px dashed #aebdb7; border-radius: 18px; text-align: center; color: var(--muted); }

.speech-support { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 12px; }.speech-support span { width: 9px; height: 9px; border-radius: 50%; background: #d5a72a; }.speech-support.supported span { background: #31a771; }.speech-support.unsupported span { background: var(--red); }
.speak-layout { display: grid; grid-template-columns: 1.1fr .7fr; gap: 18px; }.speak-card, .speech-tips { padding: clamp(24px, 5vw, 42px); }.speech-step { display: flex; justify-content: space-between; color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .14em; }.speech-target { margin: 35px 0 7px; font: 700 clamp(2rem, 5vw, 3.3rem)/1.18 Georgia, serif; }.speech-translation { color: var(--muted); }.speech-controls { display: flex; gap: 8px; margin-top: 23px; }.record-button { display: flex; align-items: center; gap: 15px; width: 100%; margin-top: 25px; padding: 16px; border: 0; border-radius: 17px; background: var(--green); color: #fff; text-align: left; }.record-button.recording { background: var(--red); animation: pulse 1.1s infinite; }.record-button:disabled { opacity: .52; cursor: not-allowed; }.record-orb { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 23px; }.record-button strong, .record-button small { display: block; }.record-button small { color: rgba(255,255,255,.75); font-size: 11px; }.speech-result { margin-top: 17px; padding: 16px; border-radius: 14px; background: #eff4f1; }.speech-result p { margin: 0; color: var(--muted); font-size: 13px; }.speech-result .score { font: 700 25px Georgia, serif; color: var(--green); }.speech-result .heard { margin: 5px 0; color: var(--ink); font-weight: 800; }.speech-nav { display: flex; justify-content: space-between; margin-top: 18px; }.speech-nav button { border: 0; background: transparent; font-weight: 850; color: var(--green); }
@keyframes pulse { 50% { transform: scale(.99); box-shadow: 0 0 0 9px rgba(179,62,50,.12); } }
.speech-tips { box-shadow: none; background: var(--blue-2); }.speech-tips h2 { margin: 8px 0 22px; }.tip-row { display: grid; grid-template-columns: 35px 1fr; gap: 11px; margin-bottom: 17px; }.tip-row span { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 11px; background: #fff; font-weight: 900; }.tip-row strong, .tip-row p { display: block; margin: 0; }.tip-row p { color: var(--muted); font-size: 12px; }.privacy-note { margin-top: 26px; padding: 15px; border-radius: 13px; background: rgba(255,255,255,.65); font-size: 12px; }.privacy-note p { margin: 4px 0 0; color: var(--muted); }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }.stat-grid article { padding: 21px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }.stat-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; margin-bottom: 20px; }.stat-icon.lime { background: var(--lime-2); }.stat-icon.blue { background: var(--blue-2); }.stat-icon.peach { background: #fae8db; }.stat-icon.dark { background: var(--ink); color: #fff; }.stat-grid small { display: block; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .12em; }.stat-grid strong { display: block; margin-top: 3px; font: 700 34px Georgia, serif; }.stat-grid p { margin: 0; color: var(--muted); font-size: 11px; }
.progress-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin-top: 17px; }.progress-card { padding: 27px; box-shadow: none; }.progress-card h2 { margin: 7px 0 20px; }.progress-checklist, .topic-progress { display: grid; gap: 9px; }.check-row { display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 10px; padding: 10px; border-radius: 11px; background: #f0f4f1; }.check-row > span:first-child { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #dbe3df; }.check-row.done > span:first-child { background: var(--lime); }.check-row small { color: var(--muted); }.check-row b { font-size: 12px; }.topic-bar { display: grid; grid-template-columns: 120px 1fr 35px; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; }.topic-bar > span:nth-child(2) { height: 8px; overflow: hidden; border-radius: 8px; background: #e3e9e6; }.topic-bar i { display: block; height: 100%; background: var(--green); }

.word-dialog { width: min(620px, calc(100% - 30px)); max-height: min(780px, calc(100vh - 30px)); border: 0; border-radius: 23px; padding: 32px; color: var(--ink); background: var(--card); box-shadow: 0 35px 100px rgba(14,46,43,.25); }.word-dialog::backdrop { background: rgba(10,34,32,.5); backdrop-filter: blur(3px); }.dialog-close { position: absolute; top: 14px; right: 15px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #edf2ef; font-size: 23px; }.dialog-title { margin: 5px 0 0; font-size: 2.6rem; }.dialog-meaning { color: var(--green); font-weight: 800; }.dialog-example { padding: 14px; border-radius: 12px; background: var(--blue-2); }.dialog-example p { margin: 0; }.toast { position: fixed; left: 50%; bottom: 25px; z-index: 50; transform: translate(-50%, 20px); padding: 11px 17px; border-radius: 99px; background: var(--ink); color: #fff; opacity: 0; pointer-events: none; transition: .2s; box-shadow: var(--shadow); font-size: 13px; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

footer { border-top: 1px solid var(--line); padding: 22px 0; color: var(--muted); font-size: 12px; } footer .shell { display: flex; justify-content: space-between; gap: 15px; }

@media (max-width: 930px) {
  .hero-grid, .learn-layout, .speak-layout, .progress-layout { grid-template-columns: 1fr; }
  .path-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-grid { grid-template-columns: 1fr; }
  .grammar-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .vocab-row { grid-template-columns: 48px 1fr 130px auto; }.vocab-status-cell { display: none; }
}
@media (max-width: 680px) {
  .shell { width: min(100% - 24px, 1160px); }
  .header-progress .mini-progress, #header-level { display: none; }
  .nav-item { min-width: 89px; font-size: 11px; }.nav-item span { display: block; margin: 0 auto 2px; }
  main { padding-top: 25px; }
  .hero-card, .today-card { min-height: auto; }.hero-card { padding: 31px 24px; }.today-card { padding: 24px; }
  .hero-card h1 { font-size: 2.65rem; }.hero-card > p { font-size: 16px; }
  .section-block { padding-block: 52px 40px; }.section-heading, .page-intro { display: block; }.section-heading > p { margin-top: 13px; }
  .path-grid, .grammar-grid, .stat-grid { grid-template-columns: 1fr; }.path-card { min-height: 215px; }
  .quick-card { grid-template-columns: auto 1fr; }.quick-card > button { grid-column: 2; justify-self: start; padding: 0; }
  .lesson-count, .basis-badge, .vocab-count, .practice-score { margin-top: 17px; }
  .sentence-card, .word-inspector, .speak-card, .speech-tips { padding: 23px; }.word-inspector { min-height: 310px; }
  .lesson-footer { grid-template-columns: 1fr 1fr; }.dot-progress { grid-row: 2; grid-column: 1 / -1; justify-content: center; }
  .unlock-card { grid-template-columns: 1fr; padding: 22px; }.grammar-examples { grid-template-columns: 1fr; }
  .vocab-tools { grid-template-columns: 1fr; }.search-box { min-height: 49px; }.vocab-row { grid-template-columns: 42px 1fr auto; gap: 11px; }.vocab-form, .vocab-status-cell { display: none; }.vocab-actions { flex-direction: column; }
  .exercise-actions { flex-direction: column-reverse; }.exercise-actions .button { width: 100%; }.answer-wrap input { min-width: 0; padding-left: 17px; }
  .speech-support { margin-top: 17px; }.progress-layout { grid-template-columns: 1fr; }
  footer .shell { display: block; } footer .shell span { display: block; margin: 4px 0; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Course v2: retain the original palette and typography. */
[hidden]{display:none!important}
main:focus{outline:none}
.module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.module-card,.lesson-section{border:1px solid var(--line);border-radius:22px;padding:26px;background:var(--card);margin-bottom:18px}
.module-card h2{margin:18px 0 10px;font-size:1.65rem}.module-card>p{color:var(--muted)}
.module-card small{font-size:10px;font-weight:850;color:var(--muted)}
.lesson-link{display:flex;align-items:center;justify-content:space-between;gap:9px;text-align:left;width:100%;padding:13px 0;border:0;border-top:1px solid var(--line);background:transparent;font-size:13px;font-weight:750}
.lesson-link .badge{font-size:9px;flex:0 0 auto}.lesson-link:hover{color:var(--green)}
.lesson-section .eyebrow{margin-bottom:14px}.lesson-section .muted{margin:16px 0 0;font-size:12px}
.training-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.training-steps article{padding:18px;background:var(--blue-2);border-radius:15px}.training-steps p{color:var(--muted);font-size:13px}
.completion-callout{display:flex;justify-content:space-between;align-items:center;gap:28px;background:var(--lime-2)}.completion-callout p{max-width:700px}
.audio-buttons{display:inline-flex;flex-wrap:wrap;gap:8px;margin:10px 0}.audio-buttons .button{font-size:12px}.button.playing{background:var(--lime)!important;color:var(--ink)!important;border-color:var(--green)}
.audio-dock{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:20px;max-width:calc(100% - 24px);padding:9px 13px;border-radius:14px;background:var(--ink);color:white;box-shadow:var(--shadow);font-size:12px}.audio-dock button{border:1px solid #a7c0b7;background:transparent;color:white;padding:6px 10px;border-radius:8px;white-space:nowrap}
body[data-audio-state="playing"] .audio-dock,body[data-recording-state="recording"] .recording-controls{outline:3px solid var(--lime);outline-offset:3px}
.sentence-tokens{display:block;min-height:80px;font:700 clamp(1.8rem,5vw,3rem)/1.5 Georgia,serif}.sentence-tokens .mini-token{font:inherit;margin-inline:2px}.mini-token{cursor:pointer}
.recording-controls{display:flex;flex-wrap:wrap;gap:8px;border-radius:12px}.recording-controls .button{font-size:12px}.speak-card audio{width:100%;margin:18px 0}.speech-tips li{margin-bottom:14px}.speech-target .mini-token{font:inherit}.speech-target{font-size:2.2rem}
.privacy-note input[type="checkbox"],.answer-choice input{width:auto;margin-right:9px}.privacy-note label{display:block;margin:12px 0}
.answer-choice{display:flex;align-items:center;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}.answer-choice:has(input:checked){background:var(--blue-2);border-color:var(--green)}.answer-options{border:0;padding:0;margin:18px 0}.answer-options legend{padding:0}
.answer-feedback p{margin:8px 0}.word-diff{display:flex;flex-wrap:wrap;gap:7px}.word-diff span{padding:4px 8px;background:#fff;border-radius:7px;border:1px solid #a77c74}.diff-missing{border-style:dashed!important}
.task-audio{margin:15px 0}.task-audio>.text-button{display:block}.text-button{border:0;background:transparent;padding:4px;color:var(--green);text-decoration:underline;text-underline-offset:3px;text-align:left;cursor:pointer}
.stack-form{display:grid;gap:13px;max-width:560px;margin-top:20px}.stack-form label{display:grid;gap:5px}.stack-form input,.stack-form select,.stack-form textarea,#login-form input{width:100%;border:1px solid #afc4bb;border-radius:10px;background:white;color:var(--ink);padding:12px 17px;min-height:46px}
.forms-table th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line)}.forms-table td{min-width:100px}.word-dialog .audio-buttons{margin-top:0}.dialog-example{margin-top:20px;padding:15px}
.review-summary{display:flex;align-items:center;gap:20px;margin-bottom:25px;padding:22px;border-radius:20px;background:var(--lime-2)}.review-summary>strong{font:700 40px Georgia,serif}.review-summary .button{margin-left:auto}
.status-mastered,.status-practiced,.status-manual{background:var(--lime-2)}.status-review{background:#fff0ca}.status-learning{background:var(--blue-2)}
.vocab-form small{display:block;margin-top:7px}.vocab-status-cell{min-width:0}.status-select{max-width:145px}summary{font-weight:800;cursor:pointer}.lesson-section details{margin-top:20px}.check-row small{display:block}
footer button{border:0;background:transparent;color:var(--green);text-decoration:underline}.check-row .badge{font-size:9px}.toast{bottom:80px;max-width:calc(100% - 24px);border-radius:15px}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}.nav-item{min-width:112px}.nav-item.active{background:var(--lime-2)}
@media(max-width:760px){.module-grid,.training-steps{grid-template-columns:1fr}.module-card,.lesson-section{padding:21px}.completion-callout{display:block}.completion-callout>.button{margin-top:15px}.review-summary{flex-wrap:wrap}.review-summary .button{margin-left:0}.nav-item{min-width:100px}.vocab-row{grid-template-columns:1fr auto}.vocab-letter{display:none}.vocab-status-cell{display:block;grid-column:1}.vocab-actions{grid-column:2;grid-row:1/3;flex-direction:row}.vocab-main{min-width:0}.vocab-main button{overflow-wrap:anywhere}.audio-dock{width:max-content}.audio-dock span{max-width:230px}.hero-card h1{font-size:2.3rem}.check-row{grid-template-columns:22px 1fr}.check-row .badge{grid-column:2}.sentence-card{min-width:0}.sentence-tokens{overflow-wrap:anywhere}.grammar-detail{padding:24px}.speech-target{overflow-wrap:anywhere}.page-intro h1{font-size:2.25rem}.exercise-card{padding:22px}.pattern-card strong{overflow-wrap:anywhere}}