:root {
  font-family: 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  color: #25213d;
  background: #f9f8fd;
  font-synthesis: none;
  --ink: #25213d;
  --muted: #615c77;
  --purple: #6343c9;
  --purple-dark: #4f32ad;
  --line: #e9e5f3;
  --card-shadow: 0 2px 4px #34225a05, 0 8px 22px #34225a05;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #8158ee; outline-offset: 4px; }
:focus:not(:focus-visible) { outline: none; }
[tabindex='-1']:focus { outline: none; }
img, svg { display: block; }
h1, h2, h3, p { margin: 0; }
.skip-link { position: fixed; z-index: 4; top: 10px; left: 10px; transform: translateY(-150%); padding: 12px 18px; color: white; background: var(--purple-dark); border-radius: 10px; }
.skip-link:focus { transform: translateY(0); }

.shell { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; align-self: start; display: flex; flex-direction: column; gap: 35px; padding: 26px 17px 19px; background: white; border-right: 1px solid var(--line); overflow: auto; }
.brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; margin-left: 8px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 22px; line-height: 1.02; font-weight: 850; letter-spacing: -.045em; }
.brand small { font-size: 9px; line-height: 1.1; margin-top: 5px; font-weight: 850; letter-spacing: .18em; color: var(--purple); }
.desktop-nav { display: grid; gap: 5px; }
.nav-link { min-height: 45px; padding: 7px 12px; display: flex; align-items: center; gap: 12px; border-radius: 12px; font-size: 14px; font-weight: 680; color: var(--muted); transition: background .18s, color .18s; }
.nav-link > svg { margin: 0 5px; }
.nav-link:hover { color: var(--purple-dark); background: #f7f3ff; }
.nav-link.selected { color: var(--purple-dark); background: #eee8ff; font-weight: 800; }
.nav-caption { color: #706982; text-transform: uppercase; font-size: 10px; font-weight: 850; letter-spacing: .15em; margin: 22px 12px 7px; }
.nav-subject { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--tint); }
.sidebar-footer { margin-top: auto; display: flex; gap: 9px; align-items: flex-start; padding: 13px 8px 3px; border-top: 1px solid var(--line); font-size: 11px; }
.sidebar-footer strong, .sidebar-footer small { display: block; }
.sidebar-footer small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.demo-dot { width: 7px; height: 7px; background: #4d987a; border-radius: 50%; margin-top: 4px; }
.mobile-brand, .mobile-nav { display: none; }

.workspace { min-width: 0; }
.topbar { min-height: 72px; padding: 0 clamp(22px, 4.1vw, 60px); display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); background: #ffffffd9; }
.top-label { color: var(--muted); font-size: 13px; font-weight: 680; }
.top-stats { display: flex; align-items: center; gap: 9px; }
.effect-toggle { display: grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--purple-dark); }
.effect-toggle:hover, .effect-toggle[aria-pressed='false'] { background: #f5f1fc; }
.effect-toggle[aria-pressed='true'] .effect-off, .effect-toggle[aria-pressed='false'] .effect-on { display: none; }
.stat-pill { min-height: 34px; display: inline-flex; align-items: center; gap: 5px; background: #fff2e8; color: #924321; padding: 0 11px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.stat-pill svg { color: #da733b; }
.stat-pill.xp { color: var(--purple-dark); background: #eee8ff; }
.stat-pill.xp svg { color: #7651d7; }
.stat-pill strong { font-size: 13px; }
.main { max-width: 1330px; margin: 0 auto; padding: 29px clamp(22px, 4.1vw, 60px) 40px; }
.site-footer { text-align: center; padding: 0 18px 24px; font-size: 11px; color: var(--muted); }
.site-footer span { margin: 0 4px; }

.home-hero { position: relative; overflow: hidden; isolation: isolate; min-height: 268px; display: flex; align-items: center; border-radius: 26px; background: radial-gradient(ellipse at 87% 31%, #8963e8, transparent 54%), linear-gradient(121deg, #42269b 0%, #5834bc 48%, #7147d5 100%); color: white; box-shadow: 0 12px 23px #5427ae24; }
.hero-copy { position: relative; z-index: 1; width: 61%; padding: 28px 0 30px 35px; }
.hero-tag { display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; padding: 6px 9px; background: #f5ecff22; border: 1px solid #ffffff35; border-radius: 999px; color: #f8edff; font-size: 9px; line-height: 1.25; letter-spacing: .105em; font-weight: 850; }
.hero-tag svg { color: #ffdf8d; flex: none; }
.hero-copy h1 { font-size: clamp(36px, 4.7vw, 68px); font-weight: 870; line-height: .99; letter-spacing: -.065em; margin: 14px 0 12px; text-wrap: balance; }
.hero-copy > p:not(.hero-tag) { font-size: 15px; color: #f0e6ff; line-height: 1.5; max-width: 310px; }
.hero-mascot { position: absolute; right: 4%; top: 50%; width: min(38%, 335px); transform: translateY(-50%); }
.hero-mascot::before { content: ''; position: absolute; inset: 11%; border: 1px solid #ffffff35; border-radius: 50%; background: radial-gradient(circle, #c0a8ff7a 0%, #a18bf33b 55%, transparent 75%); }
.hero-mascot img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 10px 12px #2b134c60); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 45px; border: 0; border-radius: 12px; padding: 0 15px; font-size: 14px; line-height: 1.2; font-weight: 800; white-space: nowrap; transition: background .18s, box-shadow .18s, transform .18s; }
.button:hover:not(:disabled) { transform: translateY(-2px); }
.button:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.hero-button { margin-top: 18px; color: var(--purple-dark); background: #fff; box-shadow: 0 4px 0 #30127060; }
.hero-button:hover { background: #fff2d0; }
.hero-button:focus-visible { outline-color: #ffdf8d; }
.primary { color: #fff; background: var(--purple); box-shadow: 0 3px 0 #4b2a9f; }
.primary:hover:not(:disabled) { background: var(--purple-dark); }
.primary:disabled { color: #615c77; background: #eeeaf5; box-shadow: none; }

.home-grid, .progress-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(216px, .38fr); gap: 22px; align-items: start; margin-top: 32px; }
.section-heading { display: flex; gap: 12px; justify-content: space-between; align-items: end; margin-bottom: 13px; }
.eyebrow { color: #695690; font-size: 10px; font-weight: 850; letter-spacing: .145em; line-height: 1.35; }
.section-heading h2, .progress-subjects h2 { font-size: 26px; font-weight: 850; letter-spacing: -.048em; line-height: 1.1; }
.section-heading .eyebrow { margin-bottom: 5px; }
.section-note { color: var(--muted); font-size: 12px; font-weight: 650; padding-bottom: 2px; text-align: right; }
.subject-grid { display: grid; gap: 11px; }
.languages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.workshop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.workshops { margin-top: 24px; }
.lavender { --tint: #ebe2ff; --wash: #f5f0ff; --stroke: #e6dafc; --accent: #5c3bbc; }
.green { --tint: #d9f2e5; --wash: #edf9f2; --stroke: #d7eee1; --accent: #18684e; }
.blue { --tint: #e0ecff; --wash: #f0f6ff; --stroke: #e1eaf9; --accent: #315db6; }
.amber { --tint: #ffedc8; --wash: #fff8e7; --stroke: #f4e8cc; --accent: #845017; }
.pink { --tint: #f9e0f2; --wash: #fdf2fa; --stroke: #f2e3ee; --accent: #9b3675; }
.teal { --tint: #d8f1f0; --wash: #edf9f8; --stroke: #d5eae9; --accent: #176a73; }
.subject-card { min-width: 0; min-height: 152px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: white; border: 1px solid var(--stroke); box-shadow: var(--card-shadow); transition: border-color .18s, box-shadow .18s, transform .18s; }
.subject-card.featured { min-height: 164px; padding: 14px 15px; background: var(--wash); }
.subject-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 8px 17px #30245b13; }
.subject-top { display: flex; align-items: start; justify-content: space-between; gap: 7px; }
.subject-icon { width: 43px; height: 43px; background: var(--tint); display: grid; place-items: center; border-radius: 12px; flex: none; }
.featured .subject-icon { width: 51px; height: 51px; border-radius: 14px; }
.subject-tag { padding: 4px 6px; border: 1px solid var(--stroke); border-radius: 6px; color: var(--accent); font-size: 8px; font-weight: 850; letter-spacing: .1em; }
.subject-card h3 { font-size: clamp(15px, 1.55vw, 21px); font-weight: 850; letter-spacing: -.035em; line-height: 1.17; }
.subject-card p { color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 3px; }
.subject-bottom { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 6px; color: var(--accent); font-size: 10px; font-weight: 800; }
.card-arrow { width: 28px; height: 28px; border-radius: 8px; background: var(--tint); display: grid; place-items: center; flex: none; }

.goal-card { background: white; border: 1px solid var(--line); border-radius: 17px; padding: 17px; box-shadow: var(--card-shadow); }
.goal-head { display: flex; gap: 9px; align-items: center; }
.goal-icon, .metric-icon { width: 39px; height: 39px; display: grid; place-items: center; background: #eee7ff; color: var(--purple); border-radius: 11px; flex: none; }
.goal-head .eyebrow { font-size: 8px; margin-bottom: 3px; }
.goal-head h2 { font-size: 18px; line-height: 1.1; font-weight: 850; letter-spacing: -.035em; }
.goal-numbers { margin: 13px 0 6px; }
.goal-numbers strong { font-size: 28px; font-weight: 850; letter-spacing: -.045em; }
.goal-numbers span, .goal-card > p { font-size: 12px; color: var(--muted); }
.track { display: block; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; background: #eee9f6; }
.track > span { display: block; height: 100%; border-radius: inherit; background: var(--accent, #7453d5); }
.goal-card > p { margin: 8px 0 12px; line-height: 1.4; }
.text-link { width: fit-content; display: inline-flex; align-items: center; gap: 6px; color: var(--purple-dark); font-size: 13px; font-weight: 800; }
.text-link:hover { text-decoration: underline; }
.back-link { margin: 0 0 15px; }

.course-hero { display: flex; align-items: center; gap: 19px; background: var(--wash); border: 1px solid var(--stroke); border-radius: 23px; padding: clamp(20px, 4vw, 38px); }
.course-hero .subject-icon { width: 76px; height: 76px; border-radius: 20px; }
.course-hero .eyebrow { color: var(--accent); }
.course-hero h1, .progress-heading h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 870; letter-spacing: -.065em; line-height: 1.05; margin: 3px 0 6px; }
.course-hero p:last-child, .progress-heading > p:last-child { color: var(--muted); font-size: 15px; line-height: 1.5; }
.missions { margin-top: 29px; max-width: 830px; }
.mission-list { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.mission-card { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; border: 1px solid var(--line); border-radius: 17px; background: white; padding: 17px; box-shadow: var(--card-shadow); }
.mission-number { display: grid; place-items: center; width: 49px; height: 49px; border-radius: 13px; background: var(--tint); color: var(--accent); font-size: 19px; font-weight: 850; }
.mission-copy { min-width: 0; }
.mission-copy h4 { font-size: 19px; font-weight: 850; letter-spacing: -.03em; margin: 2px 0; }
.mission-copy p:not(.eyebrow) { font-size: 13px; color: var(--muted); line-height: 1.42; }
.mission-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin-top: 7px; font-size: 11px; color: var(--muted); font-weight: 690; }
.mission-meta span { display: flex; align-items: center; gap: 4px; }
.mission-meta .mission-state { border-radius: 6px; padding: 3px 6px; background: #f3f0f8; color: var(--muted); font-weight: 800; }
.mission-meta .mission-done { background: #e5f5eb; color: #216244; }
.mission-meta .mission-suggested { background: var(--tint); color: var(--accent); }
.mission-card.mission-next { border-color: var(--accent); }
.mission-secondary { background: var(--wash); color: var(--accent); border: 1px solid var(--stroke); }
.mission-secondary:hover { background: var(--tint); }
.grade-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; padding: 13px; background: #edf9f8; border: 1px solid #d5eae9; border-radius: 13px; }
.grade-picker > div { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.grade-picker label { color: var(--ink); font-size: 14px; font-weight: 800; }
.grade-picker select, .short-answer input { min-height: 42px; background: white; color: var(--ink); border: 1px solid #c8d6d8; border-radius: 8px; padding: 6px 10px; font: inherit; }
.grade-picker p { flex: 1 1 170px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.unit-map { max-width: 960px; }
.unit-map .grade-picker { background: var(--wash); border-color: var(--stroke); }
.map-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--stroke); border-radius: 16px; background: var(--wash); }
.map-next-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 12px; background: var(--tint); color: var(--accent); }
.map-next-copy h3 { font-size: 19px; line-height: 1.2; margin: 2px 0; }
.map-next-copy p:last-child { font-size: 13px; color: var(--muted); line-height: 1.4; }
.map-continue { white-space: normal; text-align: left; max-width: 100%; }
.map-continue svg { flex: none; }
.map-unit-list { display: grid; gap: 14px; }
.map-unit { padding: clamp(12px, 2.4vw, 20px); border: 1px solid var(--stroke); border-radius: 18px; background: var(--wash); }
.map-unit-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, .37fr); align-items: start; gap: 12px 18px; margin-bottom: 13px; }
.map-unit-header h3 { font-size: clamp(20px, 2.7vw, 28px); line-height: 1.15; letter-spacing: -.035em; margin: 3px 0 4px; }
.map-unit-header p:not(.eyebrow) { color: var(--muted); font-size: 14px; line-height: 1.45; }
.map-unit-header .map-level { margin-top: 5px; font-weight: 750; font-size: 12px; }
.map-unit-progress { display: grid; align-content: start; gap: 6px; font-size: 12px; color: var(--accent); }
.map-unit-complete { display: flex; align-items: center; gap: 4px; color: #216244; font-weight: 800; }
.unit-path .mission-card { position: relative; border-radius: 13px; }
.unit-path .mission-card:not(:last-child)::after { content: ''; position: absolute; width: 2px; height: 11px; bottom: -12px; left: 41px; background: var(--accent); opacity: .45; pointer-events: none; }
.map-other > .map-unit-list, .map-other > .mission-list { margin-top: 10px; }
.map-year-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.map-year-group { min-width: 0; padding: 14px; border: 1px solid var(--stroke); border-radius: 15px; background: var(--wash); }
.map-year-group h3 { margin-bottom: 9px; font-size: 18px; }
.map-year-options { display: grid; gap: 6px; }
.map-year-button { display: flex; justify-content: space-between; gap: 7px; align-items: center; min-width: 0; min-height: 46px; padding: 6px 9px; border: 1px solid var(--stroke); border-radius: 9px; text-align: left; background: white; }
.map-year-button:hover { border-color: var(--accent); }
.map-year-button small { display: block; color: var(--muted); line-height: 1.3; }
.map-year-count { flex: none; border-radius: 6px; padding: 3px 5px; background: var(--tint); color: var(--accent); font-size: 11px; font-weight: 800; }
.english-production { display: grid; gap: 8px; margin: 15px 0 0; }
.english-production h4 { margin: 0; }
.english-guided { border: 1px solid var(--line); border-radius: 13px; background: white; }
.english-guided > summary, .lesson-example > summary, .exam-review > summary, .english-model > summary { cursor: pointer; }
.english-guided > summary { padding: 12px 15px; }
.english-guided > summary .eyebrow { display: inline-block; margin-right: 8px; }
.english-guided-body { display: grid; gap: 8px; padding: 0 15px 14px; line-height: 1.5; }
.english-guided-body textarea { width: 100%; resize: vertical; border: 1px solid #c8d6d8; border-radius: 8px; padding: 9px; font: inherit; color: var(--ink); }
.english-word-count, .english-guided-body .section-note { color: var(--muted); font-size: 13px; }
.english-model p, .review-context { white-space: pre-line; }
.english-model p { padding-top: 6px; }
.english-checklist { display: grid; gap: 3px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; }
.english-checklist legend { padding: 0 4px; font-weight: 750; }
.english-checklist input { accent-color: var(--purple); }
.lesson-example { margin: 0 0 10px; padding: 9px 12px; border: 1px solid #e3dcf3; border-radius: 9px; background: #faf7ff; font-size: 14px; }
.lesson-example p { margin-top: 4px; }
.exam-review { max-width: 100%; width: 100%; text-align: left; margin: 0 auto 12px; }
.exam-review ol { display: grid; gap: 8px; padding-left: 23px; }
.exam-review li { padding: 8px; background: #faf7ff; border-radius: 8px; overflow-wrap: anywhere; }
.exam-review li > p { margin-top: 4px; line-height: 1.4; }
.course-references { margin-top: 16px; padding: 11px 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 11px; background: white; font-size: 13px; line-height: 1.5; }
.course-references summary { cursor: pointer; font-weight: 800; color: var(--ink); }
.course-references a { color: var(--purple-dark); text-decoration: underline; }
.progress-heading { margin-top: 6px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.metric { display: grid; align-content: start; justify-items: start; gap: 5px; background: white; border: 1px solid var(--line); padding: 12px; border-radius: 14px; box-shadow: var(--card-shadow); }
.metric-icon.peach { background: #fff0e4; color: #ad531e; }
.metric-icon.mint { background: #def5e8; color: #1e7150; }
.metric strong { font-size: 26px; font-weight: 860; letter-spacing: -.045em; }
.metric > span:last-child { font-size: 12px; color: var(--muted); }
.progress-subjects { margin-top: 25px; }
.progress-list { display: grid; gap: 7px; margin-top: 10px; }
.progress-row { display: grid; grid-template-columns: auto minmax(80px, 1fr) minmax(20px, 1.5fr) auto auto; gap: 9px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: white; font-size: 13px; }
.progress-row:hover { border-color: var(--accent); }
.progress-row .subject-icon { width: 34px; height: 34px; border-radius: 8px; }
.row-count, .progress-row > svg { color: var(--accent); }

.lesson-dialog { width: min(575px, calc(100% - 28px)); max-height: calc(100% - 28px); padding: 0; border: 0; border-radius: 22px; color: var(--ink); background: #fff; box-shadow: 0 22px 85px #27125150; overscroll-behavior: contain; }
.lesson-dialog::backdrop { background: #2116359c; backdrop-filter: blur(3px); }
body:has(.lesson-dialog[open]) { overflow: hidden; }
.lesson-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px 10px 20px; background: var(--wash); border-bottom: 1px solid var(--stroke); }
.lesson-label { display: flex; align-items: center; gap: 7px; color: var(--accent); font-weight: 800; font-size: 13px; }
.lesson-label svg { flex: none; }
.lesson-controls { display: flex; align-items: center; flex: none; gap: 6px; }
.lesson-controls .effect-toggle { width: 44px; height: 44px; }
.close-button { background: white; border: 1px solid var(--stroke); display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 11px; color: var(--accent); }
.close-button:hover { background: var(--tint); }
.lesson-inner { padding: 20px 24px 24px; }
.lesson-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 0 0 17px; }
.lesson-steps span { height: 6px; background: #efedf4; border-radius: 8px; }
.lesson-steps .done { background: #bda9ef; }
.lesson-steps .current { background: var(--purple); }
.lesson-inner h2, .result h2 { font-size: clamp(22px, 4.5vw, 31px); letter-spacing: -.038em; line-height: 1.13; margin: 5px 0 14px; }
.answer-list { display: grid; gap: 7px; }
.answer { display: flex; align-items: center; gap: 9px; padding: 8px 11px; text-align: left; min-height: 46px; border: 1px solid #e5dfef; border-radius: 11px; background: #fff; font-size: 14px; font-weight: 670; }
.answer > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; flex: none; background: #f4f0fa; color: var(--purple-dark); font-size: 11px; font-weight: 800; }
.answer:hover:not(:disabled), .answer[aria-pressed='true'] { background: #f3ecff; border-color: var(--purple); }
.answer.answer-correct { background: #e6f7eb; border-color: #5f9e75; color: #14502a; }
.answer.answer-wrong { background: #fff0e9; border-color: #c77757; color: #7a301a; }
.picture-answer { min-height: 55px; font-size: 16px; }
.picture-answer svg { color: var(--accent); flex: none; }
.code-example { overflow: auto; margin: 0 0 12px; padding: 12px; border-radius: 11px; background: #1e2b3b; color: #e8fbff; font: 13px/1.55 ui-monospace, Consolas, monospace; }
.code-example code { font: inherit; }
.short-answer { display: grid; gap: 5px; max-width: 260px; color: var(--ink); font-size: 14px; font-weight: 800; }
.short-answer input { min-width: 0; font-weight: 600; }
.question-context { margin-bottom: 12px; padding: 12px 14px; background: var(--wash); border: 1px solid var(--stroke); border-radius: 11px; color: var(--ink); font-size: 15px; line-height: 1.5; white-space: pre-line; }
.count-dots, .fraction-bar { display: flex; gap: 6px; margin: 0 0 14px; }
.count-dots { flex-wrap: wrap; }
.count-dots > span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #244c9e; background: #5b8ded; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fraction-bar { width: min(100%, 280px); gap: 3px; }
.fraction-bar span { flex: 1; height: 42px; border: 1px solid #9fb6dc; border-radius: 5px; background: #f5f8ff; }
.fraction-bar .filled { background: #3c6bc6; border-color: #315db6; }
.word-exercise { display: grid; gap: 8px; }
.word-instructions { color: var(--muted); font-size: 13px; line-height: 1.4; }
.word-bank { display: flex; flex-wrap: wrap; gap: 6px; }
.word-chip { min-height: 44px; padding: 6px 12px; background: var(--wash); border: 1px solid var(--stroke); border-radius: 8px; color: var(--accent); font-weight: 800; }
.word-chip[aria-pressed='true'] { background: var(--tint); border-color: var(--accent); }
.word-preview { padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; }
.word-preview strong { font-size: 12px; color: var(--muted); }
.word-sequence { min-height: 22px; margin-top: 2px; font-weight: 800; }
.program-exercise { display: grid; gap: 9px; }
.program-board { width: min(100%, 224px); display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: 4px; padding: 5px; border: 1px solid #c9e5e3; border-radius: 10px; background: #eef9f8; }
.program-cell { aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; background: #fff; border: 1px solid #e1eeed; }
.program-cell.goal { color: #8b540a; background: #ffedc4; border-color: #f4d89d; font-size: 26px; }
.program-cell.visited { background: #d8f1f0; }
.program-cell.blocked { background: repeating-linear-gradient(135deg, #6c848e, #6c848e 6px, #879da6 6px, #879da6 12px); }
.program-cell img { width: min(85%, 38px); height: auto; }
.program-controls, .program-toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.program-move, .program-toolbar button { padding: 5px 9px; min-height: 42px; border: 1px solid #bfdcda; border-radius: 8px; color: #17565d; background: #eff9f8; font-size: 13px; font-weight: 790; }
.program-move { display: inline-flex; align-items: center; gap: 5px; }
.program-move span { font-size: 18px; line-height: 1; }
.program-move:hover:not(:disabled), .program-toolbar button:hover:not(:disabled) { background: #d8f1f0; }
.program-move:disabled, .program-toolbar button:disabled { opacity: .58; }
.program-plan { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); font-size: 13px; }
.program-plan > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; }
.program-count, .program-steps { color: var(--muted); }
.program-steps { margin-top: 4px; }
.program-status { font-size: 13px; font-weight: 800; color: #17565d; }
.program-status:empty { display: none; }
.lesson-actions { display: flex; justify-content: end; margin-top: 14px; }
.feedback.good, .feedback.retry { display: flex; align-items: start; gap: 9px; margin-top: 12px; border-radius: 10px; padding: 9px 11px; color: #14502a; background: #e6f7eb; font-size: 13px; line-height: 1.4; }
.feedback.retry { color: #7a301a; background: #fff0e9; }
.feedback-mascot { position: relative; display: block; width: 43px; height: 42px; flex: none; }
.feedback-mascot > span { position: absolute; display: grid; place-items: center; right: 0; bottom: 0; width: 17px; height: 17px; border: 1px solid #fff; border-radius: 50%; background: #206a3d; color: white; }
.retry .feedback-mascot > span { background: #a24f30; }
.feedback p { margin-top: 2px; }
.audio-area { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 11px; margin-bottom: 11px; }
.audio-button { display: inline-flex; gap: 6px; align-items: center; min-height: 42px; padding: 0 11px; background: #f0e8ff; color: var(--purple-dark); border: 1px solid #e6d9fc; border-radius: 10px; font-weight: 820; font-size: 13px; }
.audio-button:hover { background: #e6d8ff; }
.audio-text { min-height: 42px; background: none; border: 0; padding: 0; font-size: 12px; font-weight: 700; color: var(--purple-dark); text-decoration: underline; }
.transcript, .audio-status { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.audio-status:empty { display: none; }
.result { text-align: center; padding: 27px 18px 31px; }
.result-scene { position: relative; isolation: isolate; display: grid; place-items: center; width: min(100%, 175px); height: 116px; margin: 0 auto 10px; }
.result-scene::before { position: absolute; content: ''; width: 100px; height: 100px; z-index: -1; border-radius: 50%; background: #eee8ff; box-shadow: 0 0 0 8px #f7f3ff; }
.result-scene.milestone::before { background: #fff0c4; box-shadow: 0 0 0 8px #fff7de; }
.result-art { width: 96px; height: 96px; }
.result-sparkles { position: absolute; inset: 0; pointer-events: none; }
.result-sparkles > span { position: absolute; color: #8a62dc; }
.result-sparkles > span:nth-child(1) { top: 9%; left: 10%; }
.result-sparkles > span:nth-child(2) { top: 37%; left: 0; color: #a85a21; scale: .65; }
.result-sparkles > span:nth-child(3) { bottom: 6%; left: 10%; color: #3d8271; scale: .7; }
.result-sparkles > span:nth-child(4) { top: 9%; right: 8%; color: #a85a21; }
.result-sparkles > span:nth-child(5) { top: 43%; right: 0; color: #3d8271; scale: .65; }
.result-sparkles > span:nth-child(6) { bottom: 6%; right: 10%; scale: .75; }
.result h2 { margin-bottom: 8px; }
.result > p:not(.eyebrow) { color: var(--muted); font-size: 14px; }
.result .result-milestone { display: inline-flex; align-items: center; gap: 5px; margin: 10px auto 1px; padding: 6px 10px; border-radius: 9px; background: #fff2d6; color: #775019; font-weight: 800; }
.result-milestone svg { flex: none; }
.result-stars, .result-stats { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.result-stars { color: #ccc6da; }
.result-stars .earned { color: #bc651a; }
.result-stats { flex-wrap: wrap; margin-bottom: 12px; }
.result-stats span { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: var(--purple-dark); }
.result-answers { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; }
.result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.button.review-secondary { background: #f6f2ff; color: var(--purple-dark); border: 1px solid #e9e0fa; }
.button.review-secondary:hover { background: #eee7ff; }
.result-answer-mark { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 38px; min-height: 29px; padding: 3px 6px; border-radius: 8px; background: #e6f7eb; color: #14502a; font-size: 12px; font-weight: 800; }
.is-incorrect .result-answer-mark { background: #fff0e9; color: #7a301a; }

.is-unanswered .result-answer-mark { background: #f2eff7; color: var(--muted); }
.lesson-dialog.assessment-dialog { width: min(1020px, calc(100% - 28px)); }
.assessment-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; margin-bottom: 10px; color: var(--accent); font-size: 13px; font-weight: 750; }
.assessment-meta span { display: inline-flex; align-items: center; gap: 5px; }
.assessment-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 11px; margin-bottom: 15px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--wash); }
.assessment-nav-group { min-width: 0; }
.assessment-nav-group p { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 4px; font-size: 12px; font-weight: 800; color: var(--accent); }
.assessment-nav-group p span { color: var(--muted); font-weight: 650; }
.assessment-nav-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.assessment-index { min-width: 34px; min-height: 36px; padding: 2px 5px; border: 1px solid var(--stroke); border-radius: 7px; background: white; color: var(--muted); font-size: 12px; font-weight: 800; }
.assessment-index.answered { background: var(--tint); color: var(--accent); }
.assessment-index[aria-current='step'] { border-color: var(--accent); background: var(--accent); color: white; }
.assessment-work.has-passage { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: start; gap: 14px; }
.assessment-passage { min-width: 0; border: 1px solid var(--stroke); border-radius: 12px; background: var(--wash); }
.assessment-passage summary { cursor: pointer; padding: 10px 12px; font-size: 15px; font-weight: 850; }
.assessment-text { max-height: min(48vh, 410px); overflow: auto; padding: 0 12px 12px; font-size: 14px; line-height: 1.6; }
.assessment-text p + p { margin-top: 9px; }
.assessment-gap { white-space: nowrap; font-weight: 800; }
.assessment-gap.current-gap { background: #ffebaa; padding: 1px 3px; border-radius: 4px; }
.assessment-instructions { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.assessment-question { min-width: 0; }
.assessment-question .short-answer { max-width: min(100%, 400px); }
.assessment-actions, .assessment-confirm { display: flex; flex-wrap: wrap; justify-content: end; align-items: center; gap: 8px; margin-top: 13px; }
.assessment-confirm { padding: 10px; border: 1px solid #f1dbab; border-radius: 10px; background: #fff7e5; }
.assessment-confirm p { margin-right: auto; color: #6e4819; font-size: 13px; font-weight: 750; }
.assessment-breakdown { margin: 10px 0 14px; padding: 11px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--wash); text-align: left; }
.assessment-breakdown h3 { font-size: 17px; }
.assessment-breakdown p { margin: 4px 0 7px; font-size: 12px; color: var(--muted); }
.assessment-breakdown table { width: 100%; border-collapse: collapse; font-size: 12px; }
.assessment-breakdown th, .assessment-breakdown td { padding: 7px 4px; border-bottom: 1px solid var(--stroke); vertical-align: top; }
.assessment-breakdown td, .assessment-breakdown thead th:not(:first-child) { text-align: center; }
.assessment-breakdown small { display: block; color: var(--accent); font-size: 10px; }

@media (prefers-reduced-motion: no-preference) {
  .feedback.good, .feedback.retry { animation: feedback-in .23s ease-out both; }
  .feedback.good .feedback-mascot { animation: vvbot-hop .48s ease-out; }
  .feedback.retry .feedback-mascot { animation: vvbot-tilt .44s ease-in-out; }
  .result-scene.celebrate .result-art { animation: vvbot-hop .62s ease-out; }
  .result-scene.milestone .result-art { animation: vvbot-hop .48s ease-out 2; }
  .result-scene.encourage .result-art { animation: vvbot-tilt .54s ease-in-out; }
  .result-sparkles > span, .result-stars .earned { animation: result-spark .56s ease-out both; }
  .result-sparkles > span:nth-child(even), .result-stars .earned:nth-child(2) { animation-delay: .09s; }
  .result-stars .earned:nth-child(3) { animation-delay: .18s; }
  .result-answers { animation: feedback-in .36s .12s ease-out both; }
}

@keyframes feedback-in {
  from { opacity: .35; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes vvbot-hop {
  0%, 100% { transform: translateY(0) rotate(0); }
  38% { transform: translateY(-9px) rotate(-7deg) scale(1.08); }
  72% { transform: translateY(1px) rotate(4deg); }
}
@keyframes vvbot-tilt {
  0%, 100% { transform: rotate(0); }
  40% { transform: rotate(-9deg) translateY(1px); }
  75% { transform: rotate(4deg); }
}
@keyframes result-spark {
  0% { opacity: 0; transform: translateY(6px) scale(.45); }
  55% { opacity: 1; transform: translateY(-2px) scale(1.18); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.chessboard { width: min(100%, 320px); aspect-ratio: 1; display: grid; grid-template: repeat(8, 1fr) / repeat(8, 1fr); overflow: hidden; border: 2px solid #946647; border-radius: 9px; }
.square { position: relative; display: grid; place-items: center; min-width: 0; padding: 0; border: 0; }
.light-square { background: #ffecd7; color: #623e29; }
.dark-square { background: #b7815a; color: #281610; }
.board-file, .board-rank { position: absolute; font-size: 8px; line-height: 1; font-weight: 850; }
.board-file { bottom: 2px; right: 3px; }
.board-rank { top: 2px; left: 2px; }
.chess-piece { font-family: 'DejaVu Sans', 'Segoe UI Symbol', sans-serif; font-size: clamp(21px, 6vw, 31px); line-height: 1; color: #2b1c34; }
.candidate-label { display: grid; place-items: center; width: 77%; height: 77%; border-radius: 7px; background: #fff8fb; border: 1px solid var(--purple); color: var(--purple-dark); font-size: 12px; font-weight: 850; }
.candidate:hover:not(:disabled) .candidate-label, .candidate[aria-pressed='true'] .candidate-label { color: #fff; background: var(--purple-dark); }
.candidate:focus-visible { outline-offset: -3px; z-index: 1; }
.candidate.answer-correct .candidate-label { color: #fff; background: #216244; border-color: #216244; }
.candidate.answer-wrong .candidate-label { color: #fff; background: #a13d2a; border-color: #a13d2a; }

@media (min-width: 1450px) {
  .shell { grid-template-columns: 249px minmax(0, 1fr); }
  .sidebar { padding-inline: 22px; }
}
@media (max-width: 1080px) {
  .shell { grid-template-columns: 188px minmax(0, 1fr); }
  .sidebar { padding-inline: 12px; }
  .main, .topbar { padding-inline: 23px; }
  .home-grid, .progress-grid { gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(172px, .36fr); }
  .goal-card { padding: 12px; }
  .hero-copy { padding-left: 26px; }
}
@media (max-width: 870px) {
  .home-grid, .progress-grid { grid-template-columns: 1fr; }
  .goal-card { max-width: 350px; }
}
@media (max-width: 700px) {
  .assessment-work.has-passage { grid-template-columns: 1fr; }
  .assessment-text { max-height: 31vh; }
  .shell { display: block; }
  .sidebar, .top-label { display: none; }
  .mobile-brand { display: inline-flex; margin-left: 0; gap: 8px; }
  .mobile-brand strong { font-size: 18px; }
  .mobile-brand small { margin-top: 3px; font-size: 7px; }
  .topbar { min-height: 59px; }
  .topbar, .main { padding-inline: 16px; }
  .main { padding-top: 16px; padding-bottom: 26px; }
  .site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .mobile-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; position: fixed; z-index: 2; bottom: 0; left: 0; right: 0; padding: 7px 15px calc(7px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: #fff; }
  .mobile-nav .nav-link { justify-content: center; min-height: 44px; padding-inline: 3px; gap: 4px; font-size: 12px; }
  .mobile-nav svg { width: 18px; height: 18px; }
  .hero-copy h1 { font-size: clamp(34px, 7.8vw, 54px); }
  .hero-copy { width: 70%; padding: 21px 0 24px 19px; }
  .home-hero { min-height: 222px; border-radius: 21px; }
  .hero-mascot { width: 35%; right: 3%; }
  .hero-copy > p:not(.hero-tag) { font-size: 13px; max-width: 230px; }
  .home-grid, .progress-grid { margin-top: 23px; }
  .section-heading h2, .progress-subjects h2 { font-size: 23px; }
  .subject-card h3 { font-size: 17px; }
  .map-next { grid-template-columns: auto minmax(0, 1fr); }
  .map-continue { grid-column: 2; justify-self: start; }
}
@media (max-width: 450px) {
  .home-hero { align-items: end; }
  .hero-copy { width: 100%; padding-right: 12px; }
  .hero-copy h1 { position: relative; text-wrap: initial; }
  .hero-copy > p:not(.hero-tag) { max-width: min(61%, 200px); }
  .hero-mascot { width: 36%; right: 1%; top: auto; bottom: 16px; transform: none; }
  .section-note { font-size: 10px; }
  .subject-grid { gap: 7px; }
  .subject-card { padding: 8px; }
  .subject-card.featured { padding: 10px; min-height: 158px; }
  .subject-card:not(.featured) h3 { font-size: clamp(12px, 3.7vw, 16px); }
  .subject-card p { font-size: 11px; }
  .subject-bottom { font-size: 9px; }
  .workshop-grid .card-arrow { width: 24px; height: 24px; }
  .workshop-grid .card-arrow svg { width: 15px; height: 15px; }
  .course-hero { gap: 11px; }
  .course-hero > div:last-child { min-width: 0; }
  .course-hero h1 { font-size: clamp(24px, 7.7vw, 34px); overflow-wrap: anywhere; }
  .course-hero .subject-icon { width: 55px; height: 55px; border-radius: 15px; }
  .course-hero .subject-icon svg { width: 43px; height: 43px; }
  .mission-card { grid-template-columns: auto 1fr; padding: 12px; gap: 9px; }
  .mission-number { align-self: start; width: 40px; height: 40px; }
  .mission-button { grid-column: 2; justify-self: start; }
  .map-unit-header, .map-year-groups { grid-template-columns: 1fr; }
  .map-unit-progress { max-width: 250px; }
  .map-next { padding: 12px; }
  .unit-path .mission-card:not(:last-child)::after { left: 31px; }
  .lesson-inner { padding: 15px 14px 18px; }
  .lesson-top { padding-inline: 12px; }
  .metric-grid { gap: 6px; }
  .metric { padding: 9px 7px; }
  .metric > span:last-child { font-size: 11px; }
}
@media (max-width: 345px) {
  .topbar { gap: 8px; }
  .top-stats { gap: 5px; }
  .stat-pill { padding-inline: 7px; }
  .pill-caption { display: none; }
  .workshop-grid { grid-template-columns: 1fr; }
  .workshop-grid .subject-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

.credits { margin-top: 6px; }
.credits summary { cursor: pointer; width: fit-content; margin: 0 auto; }
.credits p { margin: 6px auto 0; max-width: 40ch; line-height: 1.4; }
.credits a { color: var(--purple-dark); text-decoration: underline; }

/* Academia Vicenta V6 · Prácticas del Lenguaje */
.coral { --tint:#ffe7e4; --wash:#fff5f3; --stroke:#f6d9d6; --accent:#a13d49; }