:root {
  color-scheme: light;
  --paper: #f7f8f5;
  --white: #fff;
  --ink: #182432;
  --ink-soft: #536071;
  --blue: #294b9b;
  --blue-dark: #1c3473;
  --blue-wash: #eaf0fb;
  --lime: #d8edc3;
  --line: #e1e5e6;
  --shadow: 0 18px 50px rgba(21, 38, 64, .08);
  --radius: 18px;
  font-family: 'DM Sans', Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}


/* The same four-word session is available in the browser and the iPhone app. */
body:not(.native-app) .native-vocab,
body:not(.native-app) .native-complete { max-width: 650px; margin: 0 auto; padding: 20px 0 32px; }
body:not(.native-app) .native-turn-meta { color: var(--muted, #64746a); font-size: 13px; font-weight: 700; letter-spacing: .07em; }
body:not(.native-app) .native-word-line { display: flex; align-items: center; gap: 18px; margin: 26px 0; }
body:not(.native-app) .native-word { flex: 1; margin: 0; font-size: clamp(38px, 7vw, 58px); line-height: 1.08; letter-spacing: -.04em; }
body:not(.native-app) .native-audio-icon { flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid #D5E7DC; border-radius: 50%; background: #E4F0E7; color: #12665E; }
body:not(.native-app) .native-word-detail { padding: 20px; border: 1px solid #E6E7DD; border-radius: 18px; background: #FFFEFA; }
body:not(.native-app) .native-translation span { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
body:not(.native-app) .native-translation strong { font-size: 28px; }
body:not(.native-app) .native-word-detail .word-origin { margin-top: 16px; padding: 16px 0 0; border: 0; border-top: 1px solid #ECEDE4; background: transparent; }
body:not(.native-app) .native-main-action { display: flex; justify-content: space-between; width: 100%; min-height: 56px; margin-top: 24px; }
body:not(.native-app) .native-vocab-prompt { margin: 24px 0; font-size: clamp(26px, 5vw, 34px); }
body:not(.native-app) .native-recall-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; margin: 10px 0; padding: 12px 16px; border: 1px solid #DDE5DA; border-radius: 13px; background: #fff; color: #20342F; font: inherit; font-weight: 650; text-align: left; cursor: pointer; }
body:not(.native-app) .native-answer-feedback { min-height: 26px; margin-top: 18px; color: #8b452f; }
body:not(.native-app) .native-complete-mark { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: #D8ECDD; color: #146B52; font-size: 34px; }
body:not(.native-app) .native-complete-secondary { display: block; margin-top: 18px; border: 0; background: transparent; color: #12665E; font: inherit; }
body:not(.native-app)[data-theme="dark"] .native-word-detail,
body:not(.native-app)[data-theme="dark"] .native-recall-choice { background: #1B2928; border-color: #374C44; color: #F3F1E9; }

/* Evening palette: deep green-black surfaces, warm text, and a quiet mint accent. */
html:has(body[data-theme="dark"]) { background: #101A1A; color-scheme: dark; }
body[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101A1A;
  --white: #1B2929;
  --ink: #F3F1E9;
  --ink-soft: #B9C7BE;
  --blue: #91D9BE;
  --blue-dark: #B2E7D2;
  --blue-wash: #244039;
  --line: #344744;
  --shadow: 0 16px 38px rgba(0, 0, 0, .23);
  background: #101A1A;
  color: #F3F1E9;
}
body[data-theme="dark"]::before { background: #101A1A; }
body[data-theme="dark"] .site-header,
body[data-theme="dark"] .native-tab-bar { background: #142120; border-color: #2B403B; }
body[data-theme="dark"] .brand,
body[data-theme="dark"] .native-home-intro h1,
body[data-theme="dark"] .learn-heading h1,
body[data-theme="dark"] .native-path h1,
body[data-theme="dark"] .native-profile h1 { color: #F3F1E9; }
body[data-theme="dark"] .brand-mark { background: #287263; }
body[data-theme="dark"] .header-level,
body[data-theme="dark"] .header-settings { background: #213532; border-color: #38514A; color: #A8E1CA; }
body[data-theme="dark"] .header-level:hover,
body[data-theme="dark"] .header-settings:hover { background: #2A453E; }
body[data-theme="dark"] .header-account { background: #A8E1CA; color: #102F29; }
body[data-theme="dark"] .header-account:hover { background: #C0EBD7; }
body[data-theme="dark"] .native-tab { color: #A9BDB2; }
body[data-theme="dark"] .native-tab[aria-current="page"] { color: #A8E1CA; }
body[data-theme="dark"] .button-primary,
body[data-theme="dark"] .native-main-action,
body[data-theme="dark"] .practice-turn .button-primary,
body[data-theme="dark"] .practice-actions .button-primary { background: #267B69; border-color: #328B78; color: #FFFFFF; box-shadow: 0 9px 20px rgba(0, 0, 0, .24); }
body[data-theme="dark"] .button-outline,
body[data-theme="dark"] .button-quiet { background: #223633; border: 1px solid #3C584F; color: #DBEEE2; }
body[data-theme="dark"] .focus-card,
body[data-theme="dark"] .lesson-frame,
body[data-theme="dark"] .studio-frame,
body[data-theme="dark"] .level-card,
body[data-theme="dark"] .progress-card,
body[data-theme="dark"] .vocab-card,
body[data-theme="dark"] .grammar-card,
body[data-theme="dark"] .sentence-row,
body[data-theme="dark"] .choice,
body[data-theme="dark"] .token,
body[data-theme="dark"] .exam-tab,
body[data-theme="dark"] .checklist,
body[data-theme="dark"] .follow-up,
body[data-theme="dark"] .record-panel { background: #1B2929; border-color: #354A44; color: #F3F1E9; }
body[data-theme="dark"] .focus-progress,
body[data-theme="dark"] .lesson-footer,
body[data-theme="dark"] .studio-sidebar,
body[data-theme="dark"] .sidebar-level,
body[data-theme="dark"] .sidebar-note,
body[data-theme="dark"] .lesson-menu .track-button,
body[data-theme="dark"] .answer-bank { background: #203130; border-color: #354A44; color: #DFE9E0; }
body[data-theme="dark"] .level-card.active,
body[data-theme="dark"] .lesson-menu .track-button.active,
body[data-theme="dark"] .exam-tab.active,
body[data-theme="dark"] .token.selected,
body[data-theme="dark"] .vocab-card.flipped { background: #24453C; border-color: #679F89; color: #DFF3E6; }
body[data-theme="dark"] .level-desc,
body[data-theme="dark"] .track-button,
body[data-theme="dark"] .workspace-head p,
body[data-theme="dark"] .help-copy,
body[data-theme="dark"] .hint-line,
body[data-theme="dark"] .vocab-example,
body[data-theme="dark"] .word-origin p,
body[data-theme="dark"] .grammar-card p,
body[data-theme="dark"] .sentence-row small,
body[data-theme="dark"] .checklist label,
body[data-theme="dark"] .about-copy p,
body[data-theme="dark"] .about-details { color: #B6C5BA; }
body[data-theme="dark"] .feature-rule { background: #344744; }
body[data-theme="dark"] .example-box,
body[data-theme="dark"] .practice-box,
body[data-theme="dark"] .passage-card,
body[data-theme="dark"] .listening-panel,
body[data-theme="dark"] .transcript,
body[data-theme="dark"] .writing-prompt,
body[data-theme="dark"] .speaking-timer { background: #213532; border-color: #3C584F; color: #E8F0E7; }
body[data-theme="dark"] .example-box span,
body[data-theme="dark"] .writing-prompt p,
body[data-theme="dark"] .writing-prompt small,
body[data-theme="dark"] .listening-panel p,
body[data-theme="dark"] .record-panel p { color: #B9C9BD; }
body[data-theme="dark"] .writing-area,
body[data-theme="dark"] .settings-dialog select { background: #172624; border-color: #415A50; color: #F3F1E9; }
body[data-theme="dark"] .audio-small { background: #223A34; border-color: #436356; color: #A8E1CA; }
body[data-theme="dark"] .feedback.good,
body[data-theme="dark"] .complete-banner { background: #214537; border-color: #47795D; color: #D4F0D9; }
body[data-theme="dark"] .feedback.retry { background: #4B3426; color: #FFD7AB; }
body[data-theme="dark"] .feedback.info { background: #213B3A; color: #CDEBE0; }
body[data-theme="dark"] .settings-dialog,
body[data-theme="dark"] .level-dialog,
body[data-theme="dark"] .library-dialog { background: #172523; border-color: #3D554D; color: #F3F1E9; }
body[data-theme="dark"] .library-word-card { border-color: #3D554D; background: #1B2928; }
body[data-theme="dark"] .library-search { border-color: #415A50; background: #1B2928; color: #F3F1E9; }
body[data-theme="dark"] .settings-section,
body[data-theme="dark"] .settings-more,
body[data-theme="dark"] .settings-actions { border-color: #344744; }
body[data-theme="dark"] .settings-toggle,
body[data-theme="dark"] .settings-levels span { background: #21332F; border-color: #40584F; color: #E9F0E7; }
body[data-theme="dark"] .settings-levels input:checked + span { background: #265246; border-color: #7CC5A7; color: #DCF6E5; }
body[data-theme="dark"] .settings-toggle small,
body[data-theme="dark"] .settings-section p,
body[data-theme="dark"] .settings-more p,
body[data-theme="dark"] .dialog-head p { color: #AEBFB3; }
body[data-theme="dark"] .dialog-close { background: #2C4139; color: #E8F1E8; }
body[data-theme="dark"] .path-section,
body[data-theme="dark"] .about-section { background: #142220; border-color: #344744; }
body[data-theme="dark"] .site-footer { background: #0C1514; }
body[data-theme="dark"] .progress-bar,
body[data-theme="dark"] .level-progress-track { background: #344A42; }

/* iPhone surfaces retain their own depth and spacing in dark mode. */
body.native-app[data-theme="dark"] { --paper: #101A1A; --ink: #F3F1E9; --ink-soft: #B6C5BA; --blue: #91D9BE; --blue-dark: #B2E7D2; --blue-wash: #244039; --line: #344744; }
body.native-app[data-theme="dark"]::before { background: #142120; }
body.native-app[data-theme="dark"] .lesson-frame { background: transparent; border: 0; box-shadow: none; }
body.native-app[data-theme="dark"] .native-next-card { background: linear-gradient(145deg, #1E302D, #192725); border-color: #3A5148; box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }
body.native-app[data-theme="dark"] .native-next-card h2,
body.native-app[data-theme="dark"] .native-word,
body.native-app[data-theme="dark"] .native-vocab-prompt,
body.native-app[data-theme="dark"] .native-translation strong,
body.native-app[data-theme="dark"] .native-mastery-label strong,
body.native-app[data-theme="dark"] .native-practice-summary strong { color: #F3F1E9; }
body.native-app[data-theme="dark"] .native-next-card p,
body.native-app[data-theme="dark"] .native-step-outcome,
body.native-app[data-theme="dark"] .native-turn-meta,
body.native-app[data-theme="dark"] .native-vocab-focus .native-turn-meta,
body.native-app[data-theme="dark"] .native-mastery-label span,
body.native-app[data-theme="dark"] .native-mastery-note,
body.native-app[data-theme="dark"] .native-practice-summary,
body.native-app[data-theme="dark"] .native-path-summary,
body.native-app[data-theme="dark"] .native-path-copy small { color: #B6C6BA; }
body.native-app[data-theme="dark"] .native-next-kicker { color: #E7B27A; }
body.native-app[data-theme="dark"] .native-journey-panel { background: linear-gradient(135deg, #1B4038, #213B35); border-color: #3A6253; }
body.native-app[data-theme="dark"] .native-journey-copy,
body.native-app[data-theme="dark"] .native-journey-copy strong { color: #F3F1E9; }
body.native-app[data-theme="dark"] .native-journey-copy > span,
body.native-app[data-theme="dark"] .native-journey-link,
body.native-app[data-theme="dark"] .native-path-summary strong,
body.native-app[data-theme="dark"] .native-path-end { color: #91D9BE; }
body.native-app[data-theme="dark"] .native-journey-copy p { color: #C1D5C6; }
body.native-app[data-theme="dark"] .native-journey-steps li { background: #36594B; }
body.native-app[data-theme="dark"] .native-journey-steps li.next { background: #A6E4C8; }
body.native-app[data-theme="dark"] .native-path-row,
body.native-app[data-theme="dark"] .native-profile-progress,
body.native-app[data-theme="dark"] .native-setting-row,
body.native-app[data-theme="dark"] .native-setting-link,
body.native-app[data-theme="dark"] .native-recall-choice,
body.native-app[data-theme="dark"] .native-word-detail { background: #1B2928; border-color: #374C44; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); color: #F3F1E9; }
body.native-app[data-theme="dark"] .native-path-row.is-next { background: linear-gradient(130deg, #203D35, #1B2928); border-color: #629980; }
body.native-app[data-theme="dark"] .native-path-row.is-next .native-path-copy small,
body.native-app[data-theme="dark"] .native-learn-position { color: #A8DEC7; }
body.native-app[data-theme="dark"] .native-path-icon { background: #2A453B; color: #A8E1CA; box-shadow: none; }
body.native-app[data-theme="dark"] .native-path-row:nth-child(4n + 2) .native-path-icon { background: #4A382F; color: #EDC09B; }
body.native-app[data-theme="dark"] .native-path-row:nth-child(4n + 3) .native-path-icon { background: #3F3549; color: #D9C2E8; }
body.native-app[data-theme="dark"] .native-path-row:nth-child(4n + 4) .native-path-icon { background: #4A432C; color: #E7D493; }
body.native-app[data-theme="dark"] .native-path-copy strong,
body.native-app[data-theme="dark"] .native-setting-row strong { color: #F3F1E9; }
body.native-app[data-theme="dark"] .native-setting-link { color: #E5EEE5; }
body.native-app[data-theme="dark"] .native-setting-row input { accent-color: #91D9BE; }
body.native-app[data-theme="dark"] .native-level-meter { background: #33473F; }
body.native-app[data-theme="dark"] .native-practice-summary { border-color: #344942; }
body.native-app[data-theme="dark"] .native-level-meter i { background: #91D9BE; }
body.native-app[data-theme="dark"] .native-example { border-color: #344942; }
body.native-app[data-theme="dark"] .native-example p { color: #D9E6DA; }
body[data-theme="dark"] .word-origin { background: #1B2928; border-color: #374C44; }
body[data-theme="dark"] .word-origin-label,
body[data-theme="dark"] .word-origin a { color: #A8DEC7; }
body[data-theme="dark"] .word-origin-part { background: #263B35; border-color: #3A564B; }
body[data-theme="dark"] .word-origin-part strong { color: #F3F1E9; }
body[data-theme="dark"] .word-origin-part span { color: #B6C6BA; }
body.native-app[data-theme="dark"] .word-origin { background: transparent; border-color: #344942; }
body.native-app[data-theme="dark"] .native-translation span,
body.native-app[data-theme="dark"] .native-example span { color: #B3C2B5; }
body.native-app[data-theme="dark"] .native-audio-icon,
body.native-app[data-theme="dark"] .native-hear { background: #29473D; border-color: #426455; color: #B7E9CC; box-shadow: none; }
body.native-app[data-theme="dark"] .native-recall-choice:has(input:checked) { background: #265144; border-color: #91D9BE; }
body.native-app[data-theme="dark"] .native-recall-choice input { accent-color: #91D9BE; }
body.native-app[data-theme="dark"] .native-example-box,
body.native-app[data-theme="dark"] .native-milestone { background: #244136; border-color: #426953; color: #E3F0E2; }
body.native-app[data-theme="dark"] .native-complete-mark { background: #285344; color: #B5E9C6; box-shadow: none; }
body.native-app[data-theme="dark"] .native-complete p { color: #BAC9BC; }
body.native-app[data-theme="dark"] .native-main-action:disabled { background: #35443D; border-color: #35443D; color: #A8B5A9; box-shadow: none; }
body.native-app[data-theme="dark"] .native-about-practice,
body.native-app[data-theme="dark"] .native-profile-note { color: #AEBFB2; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid #89a7ef; outline-offset: 3px; }
.skip-link { position: absolute; top: -60px; left: 12px; z-index: 100; padding: 10px 15px; background: var(--ink); color: #fff; border-radius: 6px; }
.skip-link:focus { top: 12px; }
.shell { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .brand, .button { font-family: Manrope, Arial, sans-serif; }
h1, h2 { letter-spacing: -.055em; }
h1 em, h2 em { font-style: normal; color: var(--blue); }

.site-header { background: rgba(247, 248, 245, .96); border-bottom: 1px solid #e8ebea; }
.header-inner { height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 20px; font-weight: 800; letter-spacing: -.065em; white-space: nowrap; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; position: relative; background: var(--blue); color: #fff; border-radius: 10px; }
.brand-mark span { font-size: 25px; line-height: 1; transform: translateY(-3px); }
.brand-mark i { position: absolute; width: 6px; height: 6px; border-radius: 50%; right: 6px; bottom: 7px; background: var(--lime); }
.brand-range { color: var(--blue); }
.brand-to { color: #7490c9; font-size: .74em; margin-inline: 1px; }
.header-nav { display: flex; align-items: center; gap: 33px; color: #4f5b67; font-size: 13px; font-weight: 700; }
.header-nav a { text-decoration: none; transition: color .2s; }
.header-nav a:hover { color: var(--blue); }
.button { border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border-radius: 9px; padding: 14px 20px; min-height: 47px; font-size: 13px; font-weight: 800; line-height: 1.2; text-decoration: none; transition: transform .2s, background .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 18px; font-weight: 500; line-height: 0; }
.button-dark { background: var(--ink); color: #fff; }
.button-dark:hover { background: #34445a; }
.button-primary { background: var(--blue); color: #fff; box-shadow: 0 12px 24px rgba(41, 75, 155, .18); }
.button-primary:hover { background: var(--blue-dark); }
.button-outline { background: #fff; border: 1px solid #cbd5e9; color: var(--blue); }
.button-outline:hover { background: var(--blue-wash); }
.button-quiet { background: #f2f5f9; color: var(--ink); }
.button-quiet:hover { background: #e7edf8; }
.button:disabled { opacity: .48; cursor: not-allowed; transform: none; }

.hero { min-height: 580px; display: grid; grid-template-columns: 1fr .94fr; align-items: center; gap: 36px; padding-block: 58px 66px; }
.hero-copy { position: relative; z-index: 1; padding: 14px 0 0; }
.eyebrow, .section-index, .section-topline, .visual-card-kicker, .pill, .sidebar-header, .lesson-kicker, .progress-meta { font-family: Manrope, Arial, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); margin-bottom: 20px; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px #e6edfc; }
.hero h1 { font-size: clamp(48px, 5.25vw, 74px); line-height: 1.115; margin: 0 0 24px; font-weight: 800; }
.hero-copy > p { font-size: 16px; line-height: 1.75; color: var(--ink-soft); max-width: 480px; margin-bottom: 28px; }
.hero-actions { display: flex; align-items: center; gap: 26px; }
.text-link { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; font-size: 13px; font-weight: 800; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.text-link:hover { color: var(--blue); }
.hero-proof { display: flex; gap: 9px; align-items: center; margin-top: 35px; color: #6c7782; font-size: 11px; }
.proof-icon { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #e0f0d9; color: #287d4b; font-weight: 800; }
.hero-visual { min-height: 440px; height: 440px; background: #dce8f2; border-radius: 29px; position: relative; overflow: hidden; isolation: isolate; }
.visual-grid { position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(#c3d3de 1px, transparent 1px), linear-gradient(90deg, #c3d3de 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(120deg, transparent, #000 60%); }
.visual-orbit { position: absolute; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; }
.orbit-one { width: 370px; height: 370px; top: 43px; left: 13%; }
.orbit-two { width: 600px; height: 600px; top: -78px; left: -9%; }
.visual-card { position: absolute; z-index: 2; width: 315px; left: 50%; top: 51%; transform: translate(-50%, -50%) rotate(-6deg); padding: 25px 26px 22px; border-radius: 17px; background: #fff; box-shadow: 0 22px 60px rgba(31, 67, 107, .17); }
.visual-card-kicker { color: #8895a1; font-size: 9px; }
.visual-card-levels { display: flex; align-items: center; gap: 10px; margin: 27px 0 23px; font-family: Manrope, Arial, sans-serif; font-size: 23px; font-weight: 800; color: #a7b2bf; }
.visual-card-levels .active { color: var(--blue); }
.visual-card-levels b { display: block; flex: 1; height: 2px; background: #d6dfe9; }
.visual-card-line { height: 7px; border-radius: 9px; background: linear-gradient(90deg, var(--blue) 22%, #edf1f5 22%); }
.visual-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; font-size: 12px; font-weight: 700; }
.visual-arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lime); color: var(--blue); font-size: 17px; }
.visual-sticker { position: absolute; z-index: 3; display: flex; gap: 6px; align-items: center; background: #fff; box-shadow: 0 10px 28px rgba(32, 58, 90, .1); font-size: 11px; font-weight: 800; }
.sticker-top { right: 30px; top: 72px; padding: 10px 15px; border-radius: 24px; transform: rotate(8deg); }
.sticker-top:first-letter { color: #f5bc56; }
.sticker-bottom { bottom: 49px; left: 22px; border-radius: 9px; padding: 12px 15px; transform: rotate(5deg); }
.sticker-bottom span:last-child { color: var(--blue); font-size: 16px; }
.visual-word { position: absolute; font-family: Manrope, Arial, sans-serif; font-weight: 800; color: rgba(41, 75, 155, .16); }
.visual-word-one { font-size: 60px; top: 28px; left: 21px; transform: rotate(-15deg); }
.visual-word-two { font-size: 37px; bottom: 22px; right: 20px; transform: rotate(-13deg); }

.path-section { background: #fff; padding: 72px 0 83px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-topline { display: flex; align-items: center; justify-content: space-between; color: var(--blue); border-top: 1px solid #d8dfe1; padding-top: 15px; }
.topline-end { color: #9aa5ad; letter-spacing: 0; font-size: 11px; }
.section-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin: 28px 0 33px; }
.section-heading-row h2, .studio-heading-row h2, .about-section h2 { font-size: clamp(34px, 4vw, 49px); line-height: 1.2; font-weight: 800; margin-bottom: 10px; }
.section-heading-row p, .studio-heading-row p { color: var(--ink-soft); font-size: 14px; line-height: 1.65; margin-bottom: 0; max-width: 530px; }
.level-key { color: #7b8790; font-size: 11px; display: flex; gap: 8px; align-items: center; white-space: nowrap; padding-bottom: 5px; }
.key-dot { width: 9px; height: 9px; background: var(--blue); border-radius: 50%; }
.level-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.level-card { text-align: left; display: flex; flex-direction: column; min-height: 245px; border: 1px solid #e5e9ec; border-radius: 15px; background: #fbfcfc; padding: 21px 21px 20px; transition: transform .2s, border-color .2s, box-shadow .2s, background .2s; }
.level-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.level-card.active { background: #f4f7ff; border-color: #8da7e3; box-shadow: 0 13px 30px rgba(36, 74, 155, .08); }
.level-card-top { display: flex; justify-content: space-between; align-items: start; width: 100%; }
.level-number { color: #9aa6b3; font-family: Manrope, Arial, sans-serif; font-size: 10px; letter-spacing: .1em; font-weight: 800; }
.level-arrow { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #e9edf2; color: var(--blue); font-size: 17px; }
.level-card.active .level-arrow { background: var(--blue); color: #fff; }
.level-code { font-family: Manrope, Arial, sans-serif; font-size: 43px; font-weight: 800; letter-spacing: -.08em; margin: 28px 0 6px; line-height: 1; color: var(--ink); }
.level-card.active .level-code { color: var(--blue); }
.level-title { font-family: Manrope, Arial, sans-serif; font-size: 15px; font-weight: 800; margin-bottom: 7px; }
.level-desc { color: #667484; font-size: 11px; line-height: 1.5; flex: 1; }
.level-progress { width: 100%; margin-top: 14px; display: flex; align-items: center; gap: 9px; color: #728195; font-size: 10px; font-weight: 800; }
.level-progress-track { display: block; height: 5px; flex: 1; background: #e4e9ef; border-radius: 4px; overflow: hidden; }
.level-progress-track i { display: block; height: 100%; background: var(--blue); border-radius: inherit; }

.studio-section { padding-block: 75px 86px; }
.studio-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin: 27px 0 30px; }
.pill { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); }
.pill-soft { background: #e8eef9; border-radius: 30px; padding: 8px 11px; margin-bottom: 12px; }
.pill-pulse { width: 6px; height: 6px; background: var(--blue); border-radius: 50%; }
.progress-card { width: 245px; flex: 0 0 auto; padding: 18px 19px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.progress-meta { display: flex; justify-content: space-between; gap: 12px; color: #75838f; letter-spacing: .08em; }
.progress-meta strong { color: var(--blue); letter-spacing: 0; font-size: 12px; }
.progress-bar { height: 7px; background: #e7ecf4; border-radius: 10px; margin: 14px 0 9px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; background: var(--blue); border-radius: inherit; width: 0%; transition: width .35s; }
.progress-caption { color: #92a0a9; font-size: 10px; }
.studio-frame { display: grid; grid-template-columns: 260px 1fr; min-height: 610px; border: 1px solid #dfe5e8; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.studio-sidebar { display: flex; flex-direction: column; background: #f6f8fb; border-right: 1px solid #e5e9ef; padding: 23px 14px; }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; color: #8794a4; padding: 0 10px 20px; }
.sidebar-spark { font-size: 18px; color: var(--blue); }
.sidebar-level { margin: 0 6px 22px; padding: 17px; background: #fff; border: 1px solid #e2e8ef; border-radius: 10px; display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 5px; }
.sidebar-level span:first-child { font-size: 10px; color: #8995a2; font-weight: 800; }
.sidebar-level strong { grid-column: 2; grid-row: 1 / 3; font-family: Manrope, Arial, sans-serif; color: var(--blue); font-size: 28px; letter-spacing: -.06em; }
.sidebar-level span:last-child { font-size: 11px; color: var(--ink-soft); }
.track-list { display: grid; gap: 5px; }
.track-button { width: 100%; border: 0; background: transparent; text-align: left; border-radius: 9px; display: flex; align-items: center; gap: 12px; padding: 13px 11px; color: #687585; }
.track-button:hover { background: #edf2f9; }
.track-button.active { background: #e6edfb; color: var(--blue); }
.track-numeral { font-family: Manrope, Arial, sans-serif; font-size: 10px; font-weight: 800; color: #9aa8b5; }
.track-button.active .track-numeral { color: var(--blue); }
.track-button strong { display: block; font-family: Manrope, Arial, sans-serif; font-size: 12px; font-weight: 800; }
.track-button small { display: block; font-size: 10px; margin-top: 3px; opacity: .75; }
.track-check { margin-left: auto; color: #218153; font-weight: 800; }
.sidebar-note { margin: auto 6px 0; padding: 18px 16px; border-radius: 10px; background: #eaf0fb; }
.sidebar-note p { font-size: 11px; line-height: 1.5; font-weight: 700; margin: 8px 0 0; color: #405879; }
.note-icon { color: var(--blue); }
.studio-content { min-width: 0; padding: 32px 39px 36px; }
.workspace-head { display: flex; justify-content: space-between; align-items: start; gap: 15px; margin-bottom: 22px; }
.lesson-kicker { display: block; color: var(--blue); margin-bottom: 8px; }
.workspace-head h3 { font-size: 29px; font-weight: 800; letter-spacing: -.045em; margin-bottom: 7px; }
.workspace-head p { color: #697789; font-size: 12px; line-height: 1.5; margin: 0; max-width: 520px; }
.workspace-badge { font-size: 10px; font-weight: 800; border-radius: 30px; background: #edf4e6; color: #55763b; padding: 8px 11px; white-space: nowrap; }
.workspace-badge.pending { background: #f0f3f8; color: #718194; }
.feature-rule { height: 1px; background: #e7ecef; margin-bottom: 23px; }
.section-subhead { font-family: Manrope, Arial, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #6c7a8a; margin: 27px 0 13px; text-transform: uppercase; }
.help-copy { color: #667585; font-size: 12px; line-height: 1.6; }
.hint-line { display: block; line-height: 1.5; color: #718095; font-size: 11px; margin: 15px 0 0; }
.hint-line b { color: var(--blue); }
.vocab-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vocab-card { border: 1px solid #e3e8ec; border-radius: 11px; background: #fff; min-height: 116px; padding: 14px 14px 12px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; transition: background .2s, border .2s, transform .2s; }
.vocab-card:hover { transform: translateY(-2px); border-color: #b9c9e9; }
.vocab-card.flipped { background: #eef3fd; border-color: #abc0e8; }
.vocab-card .card-top { display: flex; justify-content: space-between; color: #9eacb9; font-size: 10px; }
.vocab-card .card-word { font-family: Manrope, Arial, sans-serif; font-size: 16px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.vocab-card .card-note { color: #84909d; font-size: 10px; }
.vocab-card.flipped .card-note { color: #546e9c; }
.vocab-example { border-left: 3px solid #a8bce5; padding-left: 13px; margin-top: 18px; color: #536477; font-size: 12px; line-height: 1.55; }
.vocab-example strong { color: var(--ink); }
.word-origin { margin-top: 20px; padding: 18px 20px; border: 1px solid #DDE7E0; border-radius: 16px; background: #F8FBF7; }
.word-origin-label { display: block; margin-bottom: 12px; color: #12665E; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.word-origin-parts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.word-origin-part { display: grid; gap: 2px; padding: 9px 11px; border: 1px solid #DFEAE0; border-radius: 10px; background: #FFFFFF; }
.word-origin-part strong { color: #20342F; font-size: 15px; line-height: 1.15; }
.word-origin-part span { color: #607568; font-size: 11px; line-height: 1.25; }
.word-origin p { margin: 13px 0 0; color: #43584C; font-size: 14px; line-height: 1.5; }
.word-origin a { display: inline-block; margin-top: 9px; color: #12665E; font-size: 12px; font-weight: 700; text-decoration: none; }
.word-origin a:hover { text-decoration: underline; }
.audio-small { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #dbe3ef; border-radius: 8px; background: #fff; color: var(--blue); font-size: 13px; }
.audio-small:hover { background: var(--blue-wash); }
.audio-small:disabled { opacity: .45; cursor: not-allowed; }
.grammar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.grammar-card { padding: 22px; border: 1px solid #e4e9ec; border-radius: 12px; background: #fcfdfd; }
.grammar-card small { display: block; color: var(--blue); font-family: Manrope, Arial, sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.grammar-card h4 { font-family: Manrope, Arial, sans-serif; font-size: 17px; letter-spacing: -.03em; margin: 12px 0 9px; }
.grammar-card p { color: #5d6b7b; font-size: 12px; line-height: 1.65; min-height: 60px; }
.example-box { background: #eef3fb; border-radius: 8px; padding: 12px; font-size: 12px; color: #243f7d; font-weight: 800; }
.example-box span { display: block; color: #70829f; font-weight: 500; margin-top: 5px; }
.practice-box { border: 1px solid #dce5ef; border-radius: 12px; padding: 19px 21px; background: #f7faff; }
.practice-box h4 { font-family: Manrope, Arial, sans-serif; font-size: 15px; margin: 0 0 13px; }
.choice-list { display: grid; gap: 8px; }
.choice { display: flex; align-items: center; gap: 10px; border: 1px solid #e0e6ed; border-radius: 8px; padding: 10px 12px; background: #fff; font-size: 12px; cursor: pointer; }
.choice:hover { border-color: #aebfe3; }
.choice input { accent-color: var(--blue); }
.practice-actions { display: flex; align-items: center; gap: 10px; margin-top: 15px; flex-wrap: wrap; }
.feedback { margin-top: 14px; border-radius: 8px; padding: 12px 14px; font-size: 12px; line-height: 1.5; }
.feedback.good { background: #e8f4e4; color: #27603d; }
.feedback.retry { background: #fff1df; color: #81522d; }
.feedback.info { background: #ecf2fb; color: #34568c; }
.sentence-list { display: grid; gap: 10px; }
.sentence-row { display: flex; align-items: center; gap: 14px; padding: 13px 15px; border: 1px solid #e5e9ee; border-radius: 9px; background: #fff; }
.sentence-row .sentence-number { color: #a5b1bc; font-size: 10px; font-weight: 800; }
.sentence-row .sentence-main { flex: 1; min-width: 0; }
.sentence-row strong { display: block; font-family: Manrope, Arial, sans-serif; font-size: 13px; }
.sentence-row small { display: block; color: #7a8897; font-size: 11px; margin-top: 4px; }
.token-bank, .answer-bank { display: flex; gap: 8px; flex-wrap: wrap; min-height: 45px; align-items: center; }
.token { border: 1px solid #bac9e5; border-radius: 7px; background: #fff; padding: 7px 10px; color: #244582; font-size: 12px; font-weight: 700; }
.token:hover { background: #e9f0fd; }
.token.selected { background: #e3ebfb; border-color: #7899d8; }
.token:disabled { opacity: .4; }
.answer-bank { border: 1px dashed #b9c9de; border-radius: 8px; padding: 7px; background: #fff; margin: 11px 0; }
.answer-bank .placeholder { color: #a0acb7; font-size: 11px; padding-left: 6px; }
.exam-tabs { display: flex; gap: 9px; flex-wrap: wrap; margin: -3px 0 22px; }
.exam-tab { border: 1px solid #dce3ec; background: #fff; border-radius: 9px; padding: 10px 14px; font-family: Manrope, Arial, sans-serif; font-size: 11px; font-weight: 800; color: #66778d; display: inline-flex; gap: 9px; align-items: center; }
.exam-tab.active { color: var(--blue); background: #eaf0fb; border-color: #a8bde4; }
.exam-tab span { width: 19px; height: 19px; border-radius: 5px; display: grid; place-items: center; background: #eef2f6; font-size: 10px; }
.exam-tab.active span { background: #cfddf6; }
.exam-tab i { font-style: normal; color: #288152; }
.passage-card { padding: 24px; border-radius: 12px; background: #f4f7fb; border-left: 4px solid #a9bce3; color: #344358; font-size: 13px; line-height: 1.8; }
.passage-card .passage-label { display: block; color: #8493a7; font-family: Manrope, Arial, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .08em; margin-bottom: 9px; }
.passage-card p { margin: 0; }
.question-group { margin: 18px 0 0; padding: 0; border: 0; }
.question-group legend { font-family: Manrope, Arial, sans-serif; font-size: 13px; font-weight: 800; padding: 0 0 9px; }
.question-group .choice-list { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.question-group .choice { min-height: 44px; }
.audio-player { width: 100%; margin: 16px 0 6px; }
.listening-panel { padding: 22px; border: 1px solid #dce7ef; background: #f2f7fb; border-radius: 12px; }
.listening-panel h4 { font-family: Manrope, Arial, sans-serif; margin: 0 0 5px; }
.listening-panel p { color: #748294; font-size: 11px; margin: 0; }
.listening-panel .button { margin: 15px 0 10px; }
.transcript { margin-top: 17px; border-left: 3px solid #aec0e1; padding: 10px 13px; background: #f8fafc; font-size: 12px; line-height: 1.7; }
.transcript strong { display: block; margin-bottom: 4px; }
.writing-prompt { padding: 19px 21px; border-radius: 11px; background: #eef3fb; }
.writing-prompt strong { display: block; font-family: Manrope, Arial, sans-serif; font-size: 13px; margin-bottom: 8px; }
.writing-prompt p { color: #475873; font-size: 13px; line-height: 1.65; margin: 0; }
.writing-prompt small { display: block; color: #7b8aa0; margin-top: 10px; font-size: 11px; }
.writing-area { width: 100%; min-height: 190px; resize: vertical; border: 1px solid #d5dee6; border-radius: 10px; background: #fff; padding: 15px; margin-top: 15px; color: var(--ink); font-size: 13px; line-height: 1.7; }
.writing-area:focus { border-color: #7fa0da; outline: 2px solid #dee9fc; }
.writing-meta { display: flex; justify-content: space-between; color: #8c99a6; font-size: 11px; margin: 4px 0 13px; }
.checklist { display: grid; gap: 8px; padding: 15px 16px; border: 1px solid #e4e9ed; border-radius: 10px; }
.checklist strong { font-family: Manrope, Arial, sans-serif; font-size: 12px; margin-bottom: 3px; }
.checklist label { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; color: #56677b; }
.checklist input { accent-color: var(--blue); margin-top: 2px; }
.speaking-timer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 20px; margin-top: 16px; background: #f7faff; border: 1px solid #e2e9f2; border-radius: 10px; }
.speaking-timer strong { font-family: Manrope, Arial, sans-serif; font-size: 27px; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.speaking-timer small { display: block; color: #8290a0; font-size: 10px; margin-top: 2px; }
.speaking-timer .timer-actions { display: flex; gap: 7px; }
.follow-up { margin-top: 13px; padding: 15px 17px; border: 1px solid #e2e9f2; border-radius: 10px; }
.follow-up p { margin: 12px 0 5px; color: var(--blue); font-size: 14px; font-weight: 700; line-height: 1.5; }
.follow-up small { display: block; margin-top: 9px; color: #8290a0; font-size: 11px; line-height: 1.5; }
.record-panel { border: 1px solid #e3e8ed; border-radius: 10px; padding: 15px 16px; margin: 12px 0; }
.record-disclosure { margin: 14px 0; }
.record-disclosure summary { width: fit-content; cursor: pointer; color: var(--blue); font-size: 12px; font-weight: 800; }
.record-panel p { color: #738294; font-size: 11px; line-height: 1.5; margin-bottom: 12px; }
.record-indicator { display: inline-block; width: 8px; height: 8px; background: #c94e4e; border-radius: 50%; margin-right: 5px; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.record-playback { display: block; width: 100%; margin-top: 13px; }
.muted-small { color: #8996a3; font-size: 10px; }
.complete-banner { background: #e8f4e9; border: 1px solid #cfe5d0; border-radius: 9px; padding: 13px 15px; font-size: 12px; color: #315b3e; line-height: 1.5; margin: 15px 0; }

.about-section { background: #e9eff5; padding-block: 64px; }
.about-inner { display: grid; grid-template-columns: 94px 1fr 1.05fr; gap: 34px; align-items: center; }
.about-symbol { width: 85px; height: 85px; border-radius: 22px; display: grid; place-items: center; background: var(--blue); color: #fff; font-family: Manrope, Arial, sans-serif; font-size: 57px; font-weight: 800; letter-spacing: -.08em; position: relative; line-height: 1; padding-bottom: 17px; }
.about-symbol span { position: absolute; right: 11px; bottom: 6px; color: var(--lime); font-size: 45px; }
.about-section h2 { margin: 12px 0 0; font-size: 35px; }
.about-copy { padding-left: 30px; border-left: 1px solid #cddbe7; }
.about-copy p { color: #5a6c7b; font-size: 12px; line-height: 1.7; margin: 0 0 10px; }
.about-copy p:last-child { margin-bottom: 0; }
.about-copy a { color: var(--blue); font-weight: 700; }
.site-footer { background: var(--ink); color: #cad3de; }
.footer-inner { min-height: 85px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 11px; }
.footer-brand { color: #fff; font-family: Manrope, Arial, sans-serif; font-size: 16px; font-weight: 800; letter-spacing: -.06em; }
.footer-brand > span { color: #a9c1fa; }
.footer-brand > span span { font-size: .7em; color: #8da9e7; }
.footer-inner a { text-decoration: none; color: #fff; font-weight: 700; }
.toast { position: fixed; z-index: 50; right: 24px; bottom: 24px; max-width: 330px; padding: 13px 17px; border-radius: 9px; background: var(--ink); color: #fff; box-shadow: 0 13px 35px rgba(15, 31, 55, .22); font-size: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 970px) {
  .header-nav { display: none; }
  .hero { grid-template-columns: 1fr .9fr; gap: 20px; }
  .hero h1 { font-size: 53px; }
  .hero-visual { height: 395px; min-height: 395px; }
  .visual-card { width: 275px; }
  .visual-card-levels { font-size: 19px; }
  .level-grid { gap: 10px; }
  .level-card { padding: 17px; }
  .studio-frame { grid-template-columns: 225px 1fr; }
  .studio-content { padding: 28px 25px; }
  .vocab-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .shell { width: min(100% - 32px, 560px); }
  .header-inner { height: 70px; }
  .brand { font-size: 18px; }
  .header-action { display: none; }
  .hero { grid-template-columns: 1fr; gap: 25px; padding-block: 48px 47px; }
  .hero h1 { font-size: clamp(43px, 10vw, 62px); }
  .hero-visual { height: 330px; min-height: 330px; }
  .visual-card { top: 52%; }
  .visual-word-one { font-size: 48px; }
  .visual-word-two { font-size: 27px; }
  .sticker-top { top: 36px; right: 14px; }
  .sticker-bottom { bottom: 30px; }
  .path-section, .studio-section { padding-block: 53px 60px; }
  .section-heading-row, .studio-heading-row { align-items: start; flex-direction: column; }
  .level-grid { grid-template-columns: repeat(2, 1fr); }
  .level-card { min-height: 225px; }
  .level-code { margin-top: 18px; }
  .progress-card { width: 100%; }
  .studio-frame { grid-template-columns: 1fr; }
  .studio-sidebar { border-right: 0; border-bottom: 1px solid #e5e9ef; padding: 16px; }
  .sidebar-header, .sidebar-note { display: none; }
  .sidebar-level { margin: 0 0 13px; padding: 12px 14px; }
  .track-list { display: flex; overflow-x: auto; gap: 7px; padding-bottom: 2px; }
  .track-button { width: auto; flex: 0 0 auto; border: 1px solid #dfe5ec; background: #fff; padding: 9px 12px; }
  .track-button small, .track-numeral, .track-check { display: none; }
  .studio-content { padding: 24px 17px 27px; }
  .about-inner { grid-template-columns: 65px 1fr; gap: 15px; }
  .about-symbol { width: 60px; height: 60px; font-size: 39px; border-radius: 15px; padding-bottom: 12px; }
  .about-symbol span { right: 6px; bottom: 4px; font-size: 29px; }
  .about-section h2 { font-size: 30px; }
  .about-copy { grid-column: 1 / -1; margin-top: 8px; padding: 0; border: 0; }
}
@media (max-width: 520px) {
  .track-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .track-button { width: 100%; min-width: 0; justify-content: center; text-align: center; }
  .hero-actions { align-items: start; flex-direction: column; gap: 18px; }
  .hero-proof { margin-top: 22px; }
  .section-heading-row h2, .studio-heading-row h2 { font-size: 34px; }
  .level-grid { gap: 8px; }
  .level-card { min-height: 213px; padding: 14px; }
  .level-code { font-size: 36px; }
  .level-title { font-size: 13px; }
  .vocab-grid, .grammar-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .grammar-grid { grid-template-columns: 1fr; }
  .question-group .choice-list { grid-template-columns: 1fr; }
  .exam-tab { padding: 8px 10px; }
  .workspace-head { flex-direction: column; }
  .footer-inner { flex-wrap: wrap; padding-block: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Focused journey: keep the current action visible, disclose the path on request. */
[hidden] { display: none !important; }
.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; }
.native-home-intro, .native-tab-bar { display: none; }
.native-today-content, .native-path, .native-profile { display: none; }
.site-header { position: relative; z-index: 5; }
.native-app .site-header { padding-top: env(safe-area-inset-top); }
.native-app::before { content: ''; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top); background: var(--paper); z-index: 100; pointer-events: none; }
.native-app .site-footer { padding-bottom: env(safe-area-inset-bottom); }
.header-level { display: inline-flex; align-items: center; gap: 10px; min-width: 76px; min-height: 44px; justify-content: center; border: 1px solid #d9e1e8; border-radius: 9px; background: #fff; padding: 9px 13px; color: var(--blue); font-family: Manrope, Arial, sans-serif; font-size: 13px; font-weight: 800; }
.header-level:hover, .header-level:focus-visible { background: #edf2fc; }
.header-level span[aria-hidden] { color: #8394ac; font-size: 17px; }
.home-view { min-height: min(640px, calc(100vh - 86px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 520px); align-content: center; column-gap: clamp(36px, 7vw, 100px); padding-block: 62px; }
.home-intro { align-self: center; }
.home-intro h1 { font-size: clamp(48px, 5vw, 68px); line-height: 1.1; margin: 0; font-weight: 800; }
.home-illustration { position: absolute; right: 18px; bottom: 56px; width: 156px; height: auto; pointer-events: none; filter: none; }
body[data-view="home"] .site-footer { display: none; }
.focus-card { position: relative; align-self: center; background: #fff; border: 1px solid #dfe6eb; border-radius: 22px; box-shadow: 0 22px 55px rgba(23, 46, 73, .08); overflow: hidden; }
.focus-topline { display: flex; justify-content: space-between; align-items: center; padding: 30px 32px 0; }
.focus-label, .focus-step { font-family: Manrope, Arial, sans-serif; color: #7b8a98; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.focus-level { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--blue-wash); color: var(--blue); font-family: Manrope, Arial, sans-serif; font-weight: 800; }
.focus-main { padding: 12px 32px 28px; }
.focus-step { color: var(--blue); font-size: 13px; letter-spacing: .02em; }
.focus-main h2 { max-width: calc(100% - 145px); font-size: clamp(34px, 3.2vw, 44px); line-height: 1.16; letter-spacing: -.055em; margin: 7px 0 8px; }
.focus-main p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; margin-bottom: 28px; }
.focus-action { min-width: 176px; }
.focus-progress { padding: 0 32px 30px; }
.web-path-link, .web-path-back { border: 0; padding: 0; background: none; color: #12665E; font: inherit; font-weight: 700; cursor: pointer; }
.web-path-link { display: block; margin-top: 15px; font-size: 13px; }
.web-path-link[hidden] { display: none; }
.web-path-back { margin-bottom: 22px; }
body.native-app .web-path-back { display: none; }
body:not(.native-app)[data-level="A1"][data-view="path"] .native-path { display: block; padding-top: 36px; padding-bottom: 56px; }
body:not(.native-app)[data-level="A1"] .native-path h1 { font-size: clamp(32px, 5vw, 44px); }
body:not(.native-app)[data-level="A1"] .native-path-summary { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0; color: #53685B; font-size: 14px; }
body:not(.native-app)[data-level="A1"] .native-path-list { display: grid; gap: 10px; max-width: 680px; }
body:not(.native-app)[data-level="A1"] .native-path-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 13px 16px; border: 1px solid #ECE6D8; border-radius: 17px; background: #FFFEFA; color: #20342F; text-align: left; }
body:not(.native-app)[data-level="A1"] button.native-path-row { cursor: pointer; }
body:not(.native-app)[data-level="A1"] .native-path-row.is-next { border-color: #A9D2B8; background: #F0F8EF; }
body:not(.native-app)[data-level="A1"] .native-path-row.is-locked { opacity: .55; }
body:not(.native-app)[data-level="A1"] .native-path-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 12px; background: #E4F0E7; color: #12665E; }
body:not(.native-app)[data-level="A1"] .native-path-copy { display: grid; gap: 3px; flex: 1; min-width: 0; }
body:not(.native-app)[data-level="A1"] .native-path-copy strong { font-size: 16px; }
body:not(.native-app)[data-level="A1"] .native-path-copy small { color: #53685B; font-size: 12px; }
body:not(.native-app)[data-level="A1"] .native-path-end { color: #12665E; font-size: 22px; }
body:not(.native-app)[data-level="A1"] .native-path-archive summary { padding: 10px 4px; color: #12665E; font-size: 14px; font-weight: 700; cursor: pointer; }
body:not(.native-app)[data-level="A1"] .native-path-ahead { margin: 6px 4px; color: #587064; font-size: 13px; }
body:not(.native-app)[data-level="A1"][data-theme="dark"] .native-path-row { background: #1B2928; border-color: #374C44; color: #F3F1E9; }
body:not(.native-app)[data-level="A1"][data-theme="dark"] .native-path-row.is-next { background: #203D35; border-color: #629980; }
body:not(.native-app)[data-level="A1"][data-theme="dark"] .native-path-copy small { color: #B6C6BA; }
.focus-progress > div:first-child { display: flex; justify-content: space-between; gap: 20px; color: #788695; font-size: 11px; }
.focus-progress strong { color: var(--blue); }
.focus-progress .progress-bar { margin: 0; }
body:not(.native-app)[data-theme="dark"] .focus-progress { background: transparent; border: 0; }
.home-aside { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 15px; margin-top: 18px; color: #697785; font-size: 12px; }
.learn-view { max-width: 930px; padding-block: 38px 84px; min-height: calc(100vh - 86px); }
.learn-navigation { display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #7c8994; font-size: 12px; }
.back-button { border: 0; background: none; min-height: 44px; padding: 10px 0; color: var(--blue); font-size: 13px; font-weight: 800; }
.back-button:hover { text-decoration: underline; }
.learn-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin: 28px 0 26px; }
.learn-heading .eyebrow { margin-bottom: 10px; }
.learn-heading h1 { font-size: clamp(36px, 4vw, 51px); line-height: 1.15; margin: 0; font-weight: 800; }
.learn-progress { width: 190px; flex: 0 0 auto; text-align: right; font-size: 11px; color: #788695; }
.learn-progress strong { display: block; margin-top: 5px; color: var(--blue); font-size: 12px; }
.learn-progress .progress-bar { margin: 10px 0 0; }
.lesson-frame { background: #fff; border: 1px solid #dfe6e9; border-radius: 18px; box-shadow: 0 18px 48px rgba(25, 43, 63, .055); overflow: hidden; }
.lesson-menu { border-bottom: 1px solid #e8ecef; padding: 0 32px; }
.lesson-menu summary { width: fit-content; list-style: none; cursor: pointer; padding: 17px 0; color: #607083; font-size: 12px; font-weight: 800; }
.lesson-menu summary::-webkit-details-marker { display: none; }
.lesson-menu summary span { margin-left: 6px; color: #96a4b0; }
.lesson-menu details[open] summary span { display: inline-block; transform: rotate(180deg); }
.lesson-menu .track-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 0 0 19px; overflow: visible; }
.lesson-menu .track-button { width: 100%; min-width: 0; flex: initial; padding: 11px 13px; background: #f8fafb; border: 1px solid #e3e9ed; text-align: left; justify-content: start; }
.lesson-menu .track-button.active { background: #eaf0fb; border-color: #b8c9e9; }
.lesson-menu .track-button small, .lesson-menu .track-numeral, .lesson-menu .track-check { display: block; }
.lesson-menu .track-button small { line-height: 1.4; }
.lesson-menu .track-button .track-check { margin-left: auto; }
.lesson-frame .studio-content { padding: 38px 44px 44px; }
.lesson-frame .workspace-head { margin-bottom: 19px; }
.lesson-frame .workspace-head h3 { font-size: 32px; }
.lesson-frame .workspace-head p { font-size: 13px; line-height: 1.6; }
.lesson-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 44px; border-top: 1px solid #e8ecef; background: #fafbfc; }
.lesson-footer > span { color: #768594; font-size: 11px; }
.practice-counter { margin-bottom: 13px; color: var(--blue); font-family: Manrope, Arial, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.vocab-card-focus { width: 100%; min-height: 232px; padding: 27px 30px; border-radius: 16px; background: #f7faff; border-color: #cfdbed; }
.vocab-card-focus .card-top { font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.vocab-card-focus .card-word { font-size: clamp(30px, 4vw, 45px); line-height: 1.25; }
.vocab-card-focus .card-note { font-size: 12px; }
.vocab-example { margin-top: 23px; font-size: 13px; }
.practice-turn { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
.practice-turn .button:only-child { margin-left: auto; }
.grammar-card-focus { max-width: none; padding: 28px; background: #f8fafc; }
.grammar-card-focus h4 { font-size: 22px; margin: 16px 0 11px; }
.grammar-card-focus p { min-height: 0; font-size: 14px; line-height: 1.7; }
.grammar-card-focus .example-box { font-size: 13px; padding: 15px; }
.sentence-row-focus { min-height: 168px; padding: 27px; background: #f8fafc; }
.sentence-row-focus strong { font-size: clamp(18px, 2.8vw, 25px); line-height: 1.45; }
.sentence-row-focus small { font-size: 13px; margin-top: 10px; }
.sentence-row-focus .audio-small { flex: 0 0 auto; }
.about-details { border-top: 1px solid #dce4e7; margin-block: 0 55px; padding-top: 16px; color: #5f6d7b; font-size: 12px; }
.about-details summary { width: fit-content; cursor: pointer; color: #697889; font-weight: 800; }
.about-details > div { max-width: 740px; padding: 18px 0 4px; line-height: 1.7; }
.about-details p { margin: 0 0 10px; }
.about-details a { color: var(--blue); font-weight: 800; }
.level-dialog { width: min(760px, calc(100% - 28px)); max-height: min(760px, calc(100vh - 28px)); border: 1px solid #d8e1e8; border-radius: 20px; padding: 28px; box-shadow: 0 24px 80px rgba(18, 38, 64, .22); background: #fff; color: var(--ink); }
.level-dialog::backdrop { background: rgba(20, 32, 46, .48); }
.library-dialog { width: min(560px, calc(100% - 28px)); max-height: min(820px, calc(100vh - 28px)); overflow: auto; border: 1px solid #d8e1e8; border-radius: 20px; padding: 25px; box-shadow: 0 24px 80px rgba(18, 38, 64, .22); background: #fff; color: var(--ink); }
.library-dialog::backdrop { background: rgba(20, 32, 46, .48); }
.library-search-label { display: block; margin: 20px 0 8px; font-size: 13px; font-weight: 700; }
.library-search { display: block; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #CBD9CC; border-radius: 12px; background: #FFFEFA; color: #20342F; font: inherit; font-size: 16px; }
.library-word-card { margin-top: 16px; padding: 20px; border: 1px solid #DDE7E0; border-radius: 18px; background: #F8FBF7; }
.library-position { display: flex; justify-content: space-between; gap: 12px; color: #607568; font-size: 12px; font-weight: 700; }
.library-word-card .native-word-line { display: flex; align-items: center; gap: 14px; margin: 24px 0; }
.library-word-card .native-word { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: clamp(30px, 7vw, 42px); }
.library-word-card .native-translation span { display: block; margin-bottom: 6px; color: #607568; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.library-word-card .native-translation strong { font-size: 24px; }
.library-controls { display: flex; gap: 12px; margin-top: 16px; }
.library-controls .button { flex: 1; justify-content: center; }
.library-empty { padding: 28px 0; color: #607568; }
.dialog-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 20px; }
.dialog-head h2 { font-size: 30px; margin: 0 0 6px; }
.dialog-head p { color: #71808d; font-size: 13px; margin: 0; }
.dialog-close { border: 0; background: #eff3f7; border-radius: 9px; width: 44px; height: 44px; flex: 0 0 auto; color: #546578; }
.level-dialog .level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.level-dialog .level-card { min-height: 185px; padding: 18px; }
.level-dialog .level-code { font-size: 32px; margin: 13px 0 5px; }
.level-dialog .level-desc { font-size: 11px; }
.level-dialog .level-progress { margin-top: 10px; }
.header-controls { display: flex; align-items: center; gap: 9px; }
.header-settings { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid #d9e1e8; border-radius: 50%; padding: 0; background: #fff; color: var(--blue); }
.header-settings:hover { background: #edf2fc; }
.header-settings svg { width: 22px; height: 22px; }
.header-account { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 0; border-radius: 999px; padding: 0 18px; background: var(--blue); color: #fff; font: 800 13px Manrope, Arial, sans-serif; white-space: nowrap; cursor: pointer; }
.header-account:hover { background: var(--blue-dark); }
.settings-dialog { width: min(560px, calc(100% - 28px)); max-height: min(820px, calc(100vh - 28px)); overflow: auto; border: 1px solid #d8e1e8; border-radius: 20px; padding: 28px; box-shadow: 0 24px 80px rgba(18, 38, 64, .22); background: #fff; color: var(--ink); }
.settings-dialog::backdrop { background: rgba(20, 32, 46, .48); }
.settings-dialog .dialog-head { margin-bottom: 25px; }
.settings-dialog .dialog-head h2 { font-size: clamp(26px, 5vw, 32px); margin: 7px 0 6px; }
.settings-section { padding: 17px 0 20px; border-top: 1px solid #e6eaf0; }
.settings-fieldset { margin: 0; border-inline: 0; border-bottom: 0; padding-inline: 0; min-width: 0; }
.settings-section legend, .settings-label { display: block; color: var(--ink); font-family: Manrope, Arial, sans-serif; font-size: 13px; font-weight: 800; }
.settings-section p, .settings-more p { margin: 5px 0 13px; color: #71808d; font-size: 11px; line-height: 1.5; }
.settings-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.settings-levels label { position: relative; cursor: pointer; }
.settings-levels input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.settings-levels span { display: grid; place-items: center; min-height: 47px; border: 1px solid #dce3ec; border-radius: 9px; background: #f9fafc; color: #586b7e; font-family: Manrope, Arial, sans-serif; font-size: 14px; font-weight: 800; }
.settings-levels input:checked + span { background: #eaf0fb; border-color: #7899d8; color: var(--blue); }
.settings-levels input:focus-visible + span { outline: 3px solid #89a7ef; outline-offset: 2px; }
.settings-dialog select { width: 100%; min-height: 47px; margin-top: 10px; border: 1px solid #d5dee8; border-radius: 9px; padding: 10px 13px; background: #fff; color: var(--ink); font-size: 13px; }
.settings-section select + p { margin: 9px 0 0; }
.settings-more { border-top: 1px solid #e6eaf0; padding-top: 16px; }
.settings-more summary { display: flex; min-height: 44px; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; color: var(--blue); font-family: Manrope, Arial, sans-serif; font-size: 12px; font-weight: 800; }
.settings-more summary::-webkit-details-marker { display: none; }
.settings-more summary span { color: #91a1b6; }
.settings-more[open] summary span { transform: rotate(180deg); }
.settings-more > div { padding: 17px 0 3px; }
.settings-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border: 1px solid #e1e7ee; border-radius: 9px; margin-bottom: 18px; cursor: pointer; }
.settings-toggle input { margin-top: 3px; accent-color: var(--blue); }
.settings-toggle strong, .settings-toggle small { display: block; }
.settings-toggle strong { font-size: 12px; }
.settings-toggle small { margin-top: 3px; color: #798799; font-size: 11px; }
.settings-sound .settings-toggle { margin-bottom: 0; }
.settings-sound p { margin: 9px 0 0; }
.settings-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 20px; margin-top: 20px; border-top: 1px solid #e6eaf0; }
.settings-privacy { margin: 13px 0 0; text-align: right; color: #8996a3; font-size: 10px; }
.account-dialog { width: min(440px, calc(100% - 28px)); max-height: min(720px, calc(100dvh - 28px)); overflow: auto; border: 1px solid #d8e1e8; border-radius: 20px; padding: 25px; background: #fff; color: var(--ink); box-shadow: 0 24px 80px rgba(18, 38, 64, .22); }
.account-dialog::backdrop { background: rgba(20, 32, 46, .48); }
.account-dialog.is-badge-wall { border-color: #d9b970; background: #fbf8f4; }
.account-dialog.is-badge-wall::backdrop { background: rgba(13, 19, 32, .76); }
.account-milestone-intro[hidden], .account-wall-message[hidden], #accountRetry[hidden], #closeAccountDialog[hidden] { display: none; }
.account-milestone-intro { margin: 0 0 15px; text-align: center; }
.account-milestone-stars { display: flex; justify-content: center; gap: 10px; }
.account-milestone-stars span { display: grid; place-items: center; width: 43px; height: 43px; border: 2px solid #d6a754; border-radius: 50%; background: #ffe7aa; color: #684817; font-size: 21px; box-shadow: 0 4px 0 #b58339; }
.account-milestone-intro p { margin: 14px 0 0; color: #89642d; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.account-dialog.is-badge-wall .dialog-head { justify-content: center; text-align: center; }
.account-dialog.is-badge-wall .dialog-head h2 { font-size: clamp(27px, 7vw, 34px); line-height: 1.1; }
.account-wall-message { margin: 12px 0 17px; color: #455367; font-size: 15px; line-height: 1.45; text-align: center; }
body[data-theme="dark"] .account-dialog.is-badge-wall { border-color: #927342; background: #232b3e; }
body[data-theme="dark"] .account-wall-message { color: #d1d6e1; }
body[data-theme="dark"] .account-milestone-intro p { color: #f2c778; }
.account-status { color: #52675f; font-size: 13px; line-height: 1.5; }
.account-signed-actions { display: grid; gap: 12px; margin-top: 20px; }
.account-signed-actions .button-primary { width: 100%; }
.account-signed-actions .button-outline { justify-self: start; }
.account-form { display: grid; gap: 9px; margin-top: 18px; }
.account-form[hidden], .account-conflict[hidden], #accountSignedIn[hidden], #accountAuthChoices[hidden] { display: none; }
.account-social { display: grid; gap: 10px; margin-top: 20px; }
.account-provider { min-height: 50px; display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.account-provider:disabled { opacity: .58; cursor: not-allowed; }
.account-social-note { margin: 9px 0 0; color: #66766f; text-align: center; font-size: 12px; }
.account-provider-google { color: #24332e; background: #fff; border: 1px solid #b8c7be; }
.account-provider-apple { color: #fff; background: #171b1a; border: 1px solid #171b1a; }
.account-provider-apple svg { width: 21px; height: 21px; fill: currentColor; }
.account-google-mark { font-size: 23px; font-weight: 800; line-height: 1; color: #4285f4; }
.account-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 2px; color: #66766f; font-size: 12px; }
.account-divider::before, .account-divider::after { content: ''; flex: 1; height: 1px; background: #d8e2db; }
.account-email-option { margin-top: 16px; }
.account-email-option summary { width: fit-content; margin: 0 auto; padding: 8px 12px; color: var(--blue); font-size: 13px; font-weight: 800; cursor: pointer; }
.account-email-option[open] summary { margin-left: 0; }
.account-form label { font-size: 13px; font-weight: 800; }
.account-form input { width: 100%; min-height: 46px; margin-bottom: 8px; border: 1px solid #cbd9cc; border-radius: 10px; padding: 10px 12px; background: #fff; color: #20342f; font: inherit; }
@media (max-width: 600px) { .account-form input { font-size: 16px; } }
.account-form .button, .account-conflict .button { min-height: 46px; }
.account-link { justify-self: start; border: 0; padding: 10px 0; background: transparent; color: var(--blue); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.account-conflict { margin-top: 20px; padding: 17px; border: 1px solid #e1e7ee; border-radius: 13px; }
.account-conflict h3 { margin: 0 0 8px; font-size: 18px; }
.account-conflict p { color: #52675f; font-size: 13px; line-height: 1.5; }
.account-conflict-actions { display: grid; gap: 9px; }
body[data-theme="dark"] .account-dialog { background: #172523; border-color: #3D554D; color: #F3F1E9; }
body[data-theme="dark"] .account-form input { background: #20332e; border-color: #415A50; color: #F3F1E9; }
body[data-theme="dark"] .account-provider-google { background: #f7f8f6; color: #24332e; }
body[data-theme="dark"] .account-provider-apple { border-color: #dce7e0; }
body[data-theme="dark"] .account-status, body[data-theme="dark"] .account-conflict p { color: #AEBFB3; }
body[data-theme="dark"] .account-conflict { border-color: #415A50; }
.backup-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0 5px; }
.backup-actions .button { min-height: 44px; }
.draft-backup { min-height: 44px; border: 0; padding: 8px 0; background: transparent; color: var(--blue); font-weight: 800; text-decoration: underline; }
.review-start { margin-top: 14px; }
body[data-text-size="large"] .home-intro > p { font-size: 19px; }
body[data-text-size="large"] .focus-main p, body[data-text-size="large"] .lesson-frame .workspace-head p { font-size: 16px; }
body[data-text-size="large"] .vocab-example, body[data-text-size="large"] .grammar-card-focus p, body[data-text-size="large"] .practice-box h4, body[data-text-size="large"] .question-group legend { font-size: 16px; }
body[data-text-size="large"] .grammar-card-focus .example-box, body[data-text-size="large"] .passage-card, body[data-text-size="large"] .writing-prompt p, body[data-text-size="large"] .sentence-row-focus small, body[data-text-size="large"] .transcript, body[data-text-size="large"] .follow-up p { font-size: 16px; }
body[data-text-size="large"] .choice, body[data-text-size="large"] .checklist label, body[data-text-size="large"] .token, body[data-text-size="large"] .writing-area { font-size: 15px; }
body[data-text-size="large"] .listening-panel p, body[data-text-size="large"] .writing-prompt small { font-size: 13px; }
@media (max-width: 760px) {
  .home-view { grid-template-columns: 1fr; min-height: 0; padding-block: 40px 36px; gap: 18px; }
  .home-intro { display: flex; align-items: center; gap: 16px; }
  .home-intro h1 { font-size: clamp(40px, 8vw, 54px); }
  .home-illustration { width: 145px; }
  .focus-card { width: 100%; max-width: 520px; }
  .learn-view { padding-block: 26px 60px; }
  .lesson-frame .studio-content { padding: 28px 25px 33px; }
  .lesson-footer { padding: 18px 25px; }
}
@media (max-width: 520px) {
  .settings-dialog { padding: 20px; }
  .settings-actions { flex-direction: column-reverse; }
  .settings-actions .button { width: 100%; }
  .settings-privacy { text-align: center; }
  .home-view { padding-block: 28px 32px; gap: 16px; }
  .home-intro h1 { font-size: 40px; }
  .home-illustration { width: 118px; right: 15px; bottom: 52px; }
  .focus-main h2 { max-width: calc(100% - 106px); }
  .focus-main { padding: 9px 24px 24px; }
  .focus-topline { padding: 24px 24px 0; }
  .focus-progress { padding: 0 24px 25px; }
  .learn-heading { align-items: start; flex-direction: column; gap: 15px; margin: 23px 0 20px; }
  .learn-heading h1 { font-size: 36px; }
  .learn-progress { width: 100%; text-align: left; }
  .learn-navigation { font-size: 11px; }
  .lesson-menu { padding-inline: 20px; }
  .lesson-menu .track-list { grid-template-columns: 1fr; }
  .lesson-frame .studio-content { padding: 24px 20px 28px; }
  .lesson-frame .workspace-head h3 { font-size: 27px; }
  .lesson-footer { padding: 18px 20px; align-items: start; flex-direction: column; }
  .lesson-footer .button { width: 100%; }
  .vocab-card-focus { min-height: 205px; padding: 22px; }
  .vocab-card-focus .card-word { font-size: 33px; }
  .practice-turn { flex-wrap: wrap; }
  .practice-turn .button { flex: 1 1 140px; }
  .sentence-row-focus { padding: 18px; gap: 8px; flex-wrap: wrap; }
  .sentence-row-focus .sentence-main { flex: 1 1 100%; }
  .speaking-timer { flex-wrap: wrap; }
  .level-dialog { padding: 19px; }
  .level-dialog .level-grid { grid-template-columns: 1fr; }
  .level-dialog .level-card { min-height: 150px; }
  .level-dialog .level-code { margin-top: 4px; }
  .audio-small, .token, .exam-tab { min-width: 44px; min-height: 44px; }
  .choice, .checklist label { min-height: 44px; font-size: 14px; }
  .passage-card, .transcript { font-size: 16px; }
  .listening-panel p, .writing-prompt small, .record-panel p { font-size: 14px; }
  .writing-area, .settings-dialog select { font-size: 16px; }
  .record-disclosure summary, .about-details summary { display: flex; align-items: center; min-height: 44px; }
}
@media (max-width: 580px) {
  .brand-name { display: none; }
  .header-inner { gap: 10px; }
}

/* The installed iPhone app uses a compact app layout; the hosted site keeps its web layout. */
.native-about-practice, .native-journey, .native-path-summary, .native-learn-position { display: none; }
@media (max-width: 760px) {
  body.native-app { background: #f5f6fa; padding-bottom: calc(72px + env(safe-area-inset-bottom)); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; }
  .native-app h1, .native-app h2, .native-app h3, .native-app .button, .native-app .brand { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; letter-spacing: -.025em; }
  .native-app .shell { width: calc(100% - 40px); }
  .native-app .site-header { position: sticky; top: 0; z-index: 20; background: rgba(250, 250, 252, .96); border-bottom: 1px solid #e7e9ef; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .native-app::before { background: #fafafc; }
  .native-app .header-inner { height: 56px; }
  .native-app .brand { gap: 8px; font-size: 19px; letter-spacing: -.035em; }
  .native-app .brand-mark { width: 28px; height: 28px; border-radius: 8px; }
  .native-app .brand-mark span { font-size: 20px; transform: translateY(-2px); }
  .native-app .brand-mark i { width: 5px; height: 5px; right: 4px; bottom: 5px; }
  .native-app .brand-range { display: none; }
  .native-app .header-level { min-width: 64px; min-height: 38px; padding: 6px 10px; border: 0; border-radius: 10px; background: #e9eef9; font-family: inherit; font-size: 15px; }
  .native-app .header-settings { display: none; }
  .native-app .header-account { min-height: 38px; padding-inline: 14px; font: 700 13px -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; }
  .native-app .home-view { display: block; min-height: 0; padding-block: 26px 30px; }
  .native-app .home-intro { display: none; }
  .native-app .native-home-intro { display: block; margin-bottom: 23px; }
  .native-app .native-home-intro span { color: var(--blue); font-size: 11px; font-weight: 750; letter-spacing: .08em; }
  .native-app .native-home-intro h1 { margin: 7px 0 3px; font-size: 34px; line-height: 1.15; font-weight: 750; }
  .native-app .native-home-intro p { margin: 0; color: #697589; font-size: 15px; line-height: 1.45; }
  .native-app .focus-card { width: 100%; max-width: none; border: 1px solid #e4e7ee; border-radius: 20px; box-shadow: 0 5px 20px rgba(31, 48, 80, .045); }
  .native-app .focus-topline { padding: 20px 21px 0; }
  .native-app .focus-label, .native-app .focus-step { font-family: inherit; font-size: 11px; letter-spacing: .045em; }
  .native-app .focus-level { width: 34px; height: 34px; border-radius: 9px; font-family: inherit; font-size: 14px; }
  .native-app .focus-main { padding: 13px 21px 22px; }
  .native-app .focus-main h2 { margin: 8px 0 5px; font-size: 29px; line-height: 1.2; }
  .native-app .focus-main p { margin-bottom: 20px; font-size: 15px; line-height: 1.45; }
  .native-app .focus-action { width: 100%; min-height: 52px; justify-content: space-between; padding-inline: 18px; border-radius: 12px; font-size: 16px; box-shadow: none; }
  .native-app .focus-progress { padding: 15px 21px 18px; background: #fbfcfe; }
  .native-app .focus-progress > div:first-child { font-size: 12px; }
  .native-app .home-aside { margin-top: 18px; font-size: 12px; line-height: 1.5; }
  .native-app .home-aside > span:first-child { display: none; }
  .native-app .about-details { margin-bottom: 25px; padding-top: 0; border: 0; font-size: 12px; }
  .native-app .about-details summary { color: #657384; font-weight: 600; }
  .native-app[data-view="learn"] .about-details, .native-app .site-footer { display: none; }
  .native-app .learn-view { min-height: 0; padding-block: 21px 28px; }
  .native-app .learn-navigation { display: none; }
  .native-app .learn-heading { margin: 0 0 14px; gap: 4px; }
  .native-app .learn-heading .eyebrow { display: none; }
  .native-app .learn-heading h1 { font-size: 30px; line-height: 1.18; }
  .native-app .learn-progress { font-size: 12px; }
  .native-app .learn-progress strong, .native-app .learn-progress .progress-bar { display: none; }
  .native-app .lesson-frame { overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .native-app .lesson-menu { margin-bottom: 12px; padding-inline: 18px; background: #fff; border: 1px solid #e4e7ee; border-radius: 14px; }
  .native-app .lesson-menu summary { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0; color: #34435a; font-size: 14px; }
  .native-app .lesson-menu .track-list { padding-bottom: 16px; }
  .native-app .lesson-menu .track-button { min-height: 54px; border-radius: 10px; }
  .native-app .lesson-frame .studio-content { padding: 20px 19px 25px; background: #fff; border: 1px solid #e4e7ee; border-radius: 18px; }
  .native-app .lesson-frame .workspace-head h3 { font-size: 22px; }
  .native-app .lesson-frame .workspace-head p { font-size: 14px; }
  .native-app .workspace-badge { display: none; }
  .native-app .feature-rule { margin-bottom: 16px; }
  .native-app[data-task="vocabulary"] .studio-content .workspace-head, .native-app[data-task="vocabulary"] .studio-content .feature-rule { display: none; }
  .native-app[data-task="vocabulary"] .studio-content .lesson-kicker { margin-bottom: 15px; }
  .native-app .lesson-footer { padding: 16px 0 0; border: 0; background: transparent; }
  .native-app .lesson-footer > span { display: none; }
  .native-app .lesson-footer .button { width: 100%; min-height: 50px; border-radius: 12px; font-size: 15px; }
  .native-app .button-primary { box-shadow: none; }
  .native-app .button:hover { transform: none; }
  .native-app .native-tab-bar { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: repeat(3, 1fr); padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); background: rgba(250, 250, 252, .97); border-top: 1px solid #e3e6ec; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  .native-app .native-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 53px; padding: 2px; color: #7a8495; background: none; border: 0; font-size: 10px; font-weight: 600; }
  .native-app .native-tab svg { width: 24px; height: 24px; }
  .native-app .native-tab[aria-current="page"] { color: var(--blue); }
  .native-app .level-dialog, .native-app .settings-dialog, .native-app .library-dialog, .native-app .account-dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: calc(100dvh - env(safe-area-inset-top) - 20px); margin: 0; padding: 23px 20px calc(24px + env(safe-area-inset-bottom)); border: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -20px 60px rgba(16, 27, 48, .18); }
  .native-app .level-dialog .level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .native-app .level-dialog .level-card { min-height: 145px; }
  .native-app .settings-dialog .dialog-head h2, .native-app .level-dialog .dialog-head h2 { font-size: 27px; }
  .native-app .settings-section p, .native-app .settings-more p { font-size: 13px; }
  .native-app .settings-toggle strong { font-size: 14px; }
  .native-app .settings-toggle small { font-size: 12px; }
  .native-app .settings-dialog select { font-size: 16px; }

  body.native-app { --paper: #F8F5EC; --ink: #20342F; --ink-soft: #627268; --blue: #12665E; --blue-dark: #0D504A; --blue-wash: #E4F0E7; --lime: #F0AD7D; --line: #E5E8DD; background: var(--paper); }
  .native-app::before { background: #FFFCF6; }
  .native-app .site-header { background: rgba(255, 252, 246, .97); border-bottom-color: #EAE8DE; }
  .native-app .header-level { background: #E4F0E7; }
  .native-app .header-level span[aria-hidden] { color: #6B8979; }
  .native-app .native-tab-bar { background: rgba(255, 252, 246, .97); border-top-color: #E7E5D9; }
  .native-app .native-tab { color: #53685B; }
  .native-app .native-home-intro p { color: #617468; }
  .native-app .button-primary { background: #12665E; color: #fff; }
  .native-app .button-primary:hover { background: #0D504A; }
  .native-app .button-outline { border-color: #B8D7C5; }
  .native-app .button-quiet { background: #EDF2E9; }
  .native-app .level-card.active { background: #E8F2E9; border-color: #86B9A0; box-shadow: none; }
  .native-app .level-card { background: #FFFCF6; border-color: #E5E8DD; }
  .native-app .level-arrow, .native-app .dialog-close { background: #E7F0E8; }
  .native-app .settings-dialog, .native-app .level-dialog { background: #FFFCF6; color: #20342F; }
  .native-app .settings-more, .native-app .settings-section, .native-app .settings-actions { border-color: #E5E8DD; }
  .native-app .settings-more summary { color: #12665E; }
  .native-app .toast { background: #20342F; }
  .native-app .brand-name { font-size: 18px; }
  .native-app .home-view { padding-top: 22px; }
  .native-app .native-home-intro { margin-bottom: 26px; }
  .native-app .native-home-intro span { display: none; }
  .native-app .native-home-intro h1 { margin: 7px 0 4px; font-size: 34px; }
  .native-app .native-home-intro p { font-size: 16px; }
  .native-app .native-today-content { display: block; }
  .native-app .focus-card, .native-app .home-aside, .native-app .about-details { display: none; }
  .native-app .native-turn-meta { color: #53685B; font-size: 13px; font-weight: 650; }
  .native-app .native-vocab { padding-bottom: 26px; }
  .native-app .native-word { margin: 20px 0 13px; color: #20342F; font-size: clamp(42px, 12vw, 62px); font-weight: 740; line-height: 1.08; letter-spacing: -.055em; overflow-wrap: anywhere; }
  .native-app .native-hear { display: inline-flex; align-items: center; min-height: 42px; padding: 0 15px; border: 0; border-radius: 24px; background: #DFF0E7; color: #12665E; font-size: 14px; font-weight: 700; }
  .native-app .native-hear:disabled { opacity: .45; }
  .native-app .native-sentence { margin: 40px 0 7px; color: #394E43; font-size: 23px; font-weight: 550; line-height: 1.35; }
  .native-app .native-hear-small { min-height: 34px; padding: 0; background: transparent; font-size: 13px; }
  .native-app .native-meaning { display: grid; align-content: center; min-height: 95px; margin-top: 30px; padding: 18px 20px; border-radius: 17px; background: #FCE8D9; }
  .native-app .native-meaning button { display: flex; justify-content: space-between; width: 100%; border: 0; background: transparent; color: #12665E; font-size: 17px; font-weight: 730; text-align: left; }
  .native-app .native-meaning span { color: #745D50; font-size: 12px; }
  .native-app .native-meaning strong { display: block; margin-top: 4px; color: #26483F; font-size: 25px; }
  .native-app .native-main-action { width: 100%; min-height: 56px; justify-content: space-between; margin-top: 24px; padding-inline: 20px; border-radius: 14px; font-size: 16px; }
  .native-app .native-main-action:disabled { background: #D9DED5; color: #79887E; }
  .native-app .native-mini-progress { display: flex; justify-content: center; gap: 7px; margin-top: 27px; }
  .native-app .native-mini-progress i { width: 36px; height: 5px; border-radius: 5px; background: #DFE7DD; }
  .native-app .native-mini-progress i.current { background: #E59465; }
  .native-app .native-mini-progress i.done { background: #12665E; }
  .native-app .native-vocab-prompt { margin: 22px 0 28px; font-size: 30px; line-height: 1.2; }
  .native-app .native-recall-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 62px; margin: 10px 0; padding: 12px 16px; border: 1px solid #DFE7DD; border-radius: 13px; background: #fff; color: #20342F; font-size: 18px; font-weight: 600; text-align: left; cursor: pointer; }
  .native-app .native-answer-feedback { min-height: 27px; margin-top: 17px; color: #8b452f; font-size: 15px; line-height: 1.45; }
  .native-app .native-complete { padding-top: 34px; }
  .native-app .native-complete-mark { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 22px; background: #D8ECDD; color: #146B52; font-size: 36px; font-weight: 800; }
  .native-app .native-complete h2 { margin: 25px 0 10px; font-size: 34px; }
  .native-app .native-complete p { color: #53685B; font-size: 17px; line-height: 1.55; }
  .native-app .native-complete-secondary { display: block; min-height: 48px; margin: 17px auto; border: 0; background: transparent; color: #12665E; font-size: 15px; font-weight: 700; }
  .native-app .native-today-prompt { padding-top: 8px; }
  .native-app .native-today-phrase { margin: 12px 0 18px; color: #20342F; font-size: 31px; font-weight: 680; line-height: 1.3; }
  .native-app .native-today-next { margin-top: 45px; }
  .native-app .native-today-prompt h2 { margin: 16px 0 8px; font-size: 38px; }
  .native-app .native-today-prompt p { color: #627268; font-size: 17px; line-height: 1.5; }
  .native-app .native-path, .native-app .native-profile { display: block; min-height: calc(100dvh - 180px); padding-block: 28px 35px; }
  .native-app .native-path h1, .native-app .native-profile h1 { margin-bottom: 4px; font-size: 34px; }
  .native-app .native-page-subtitle { margin-bottom: 25px; color: #53685B; font-size: 16px; }
  .native-app .native-path-list { overflow: hidden; border-radius: 17px; background: #fff; }
  .native-app .native-path-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 77px; padding: 12px 15px; border: 0; border-bottom: 1px solid #EAE8DE; background: #fff; color: #20342F; text-align: left; }
  .native-app .native-path-row:last-child { border-bottom: 0; }
  .native-app .native-path-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 12px; background: #E4F0E7; color: #12665E; font-size: 18px; font-weight: 750; }
  .native-app .native-path-row:nth-child(4n + 2) .native-path-icon { background: #FCE8D9; color: #A65030; }
  .native-app .native-path-row:nth-child(4n + 3) .native-path-icon { background: #EEE8F7; color: #705697; }
  .native-app .native-path-row:nth-child(4n + 4) .native-path-icon { background: #FCF0CE; color: #886620; }
  .native-app .native-path-copy { display: grid; gap: 3px; flex: 1; min-width: 0; }
  .native-app .native-path-copy strong { font-size: 16px; }
  .native-app .native-path-copy small { color: #53685B; font-size: 12px; line-height: 1.3; }
  .native-app .native-path-end { color: #12665E; font-size: 24px; }
  .native-app .native-profile-progress { padding: 20px; border-radius: 17px; background: #fff; }
  .native-app .native-profile-progress h2 { margin-bottom: 19px; font-size: 21px; }
  .native-app .native-progress-count { margin: 0 0 11px; color: #53685B; font-size: 16px; }
  .native-app .native-progress-count strong { color: #12665E; font-size: 28px; }
  .native-app .native-word-count { margin: 12px 0 0; color: #53685B; font-size: 13px; }
  .native-app .native-other-levels { margin-top: 19px; padding-top: 16px; border-top: 1px solid #EAE8DE; }
  .native-app .native-other-levels summary { display: flex; justify-content: space-between; color: #12665E; font-size: 14px; font-weight: 700; list-style: none; }
  .native-app .native-other-levels summary::-webkit-details-marker { display: none; }
  .native-app .native-level-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 18px; font-size: 14px; }
  .native-app .native-level-row span { color: #53685B; }
  .native-app .native-level-meter { grid-column: 1 / -1; height: 7px; border-radius: 5px; background: #E4E9DE; }
  .native-app .native-level-meter i { display: block; height: 100%; border-radius: inherit; background: #12665E; }
  .native-app .native-setting-row, .native-app .native-setting-link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 70px; margin-top: 16px; padding: 15px 19px; border: 0; border-radius: 15px; background: #fff; color: #263A32; text-align: left; }
  .native-app .native-setting-row span { display: grid; gap: 3px; }
  .native-app .native-setting-row strong, .native-app .native-setting-link { font-size: 16px; font-weight: 650; }
  .native-app .native-setting-row small { color: #53685B; font-size: 12px; }
  .native-app .native-setting-row input { width: 24px; height: 24px; accent-color: #12665E; }
  .native-app .native-setting-link span { color: #12665E; font-size: 26px; }
  .native-app .native-profile-note { margin: 24px 4px; color: #53685B; font-size: 12px; line-height: 1.5; }
  .native-app .learn-navigation { display: block; margin-bottom: 13px; }
  .native-app .learn-navigation #currentLevelLabel, .native-app .lesson-menu, .native-app .lesson-footer { display: none; }
  .native-app .learn-heading { margin-bottom: 15px; }
  .native-app .learn-progress { display: none; }
  .native-app .lesson-frame .studio-content { padding: 0; border: 0; border-radius: 0; background: transparent; }
  .native-app[data-task="vocabulary"] .learn-heading { display: none; }
  .native-app .workspace-head p, .native-app .help-copy, .native-app .hint-line { color: #53685B; }
  .native-app .feature-rule { background: #E5E8DD; }
  .native-app .grammar-card p, .native-app .listening-panel p, .native-app .sentence-row small, .native-app .writing-prompt small, .native-app .checklist label { color: #53685B; }
  .native-app .grammar-card-focus, .native-app .sentence-row-focus, .native-app .practice-box, .native-app .listening-panel, .native-app .speaking-timer, .native-app .passage-card { background: #FFFCF6; border-color: #E5E8DD; color: #20342F; }
  .native-app .example-box, .native-app .writing-prompt, .native-app .transcript { background: #E7F2EA; color: #26483F; }
  .native-app .example-box span, .native-app .writing-prompt p, .native-app .writing-prompt small { color: #607569; }
  .native-app .choice, .native-app .token, .native-app .exam-tab, .native-app .vocab-card, .native-app .follow-up { border-color: #DDE5DA; background: #FFFEFA; color: #20342F; }
  .native-app .vocab-card.flipped, .native-app .token.selected, .native-app .exam-tab.active { background: #E7F2EA; border-color: #96C5A9; color: #12665E; }
  .native-app .writing-area, .native-app .settings-dialog select { border-color: #CBD9CC; background: #FFFEFA; }
  .native-app .writing-area:focus { border-color: #12665E; outline-color: #CFE9D8; }
  .native-app .audio-small { border-color: #BFDAC9; background: #FFFEFA; }
  .native-app .feedback.info { background: #E7F2EA; color: #26483F; }
  .native-app .settings-dialog .settings-fieldset, .native-app .settings-dialog .settings-section:has(#focusSelect), .native-app .settings-dialog .settings-sound { display: none; }
  .native-app .native-about-practice { display: block; }

  /* Short labels and quiet spacing put the lesson ahead of its interface. */
  .native-app .native-home-intro { margin-bottom: 14px; }
  .native-app .native-home-intro p, .native-app .native-page-subtitle,
  .native-app .settings-dialog .dialog-head .lesson-kicker,
  .native-app .settings-dialog .dialog-head p,
  .native-app .settings-privacy { display: none; }
  .native-app .native-path h1, .native-app .native-profile h1 { margin-bottom: 20px; }
  .native-app .native-path-row { min-height: 68px; }
  .native-app .native-path-copy { gap: 0; }
  .native-app .native-path-icon svg { width: 22px; height: 22px; }
  .native-app .native-path-list { border: 1px solid #EEE9DA; }
  .native-app .native-profile-progress { padding: 22px; }
  .native-app .native-profile-progress h2 { margin: 0 0 18px; font-size: 21px; }
  .native-app .native-mastery-list { display: grid; gap: 18px; }
  .native-app .native-mastery-row { padding: 0; }
  .native-app .native-mastery-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 15px; }
  .native-app .native-mastery-label strong { color: #20342F; font-size: 17px; }
  .native-app .native-mastery-label span { color: #53685B; font-variant-numeric: tabular-nums; }
  .native-app .native-mastery-row.is-current .native-mastery-label strong { color: #12665E; }
  .native-app .native-mastery-note { margin: 19px 0 0; color: #627268; font-size: 12px; line-height: 1.4; }
  .native-app .native-practice-summary { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #EAE8DE; color: #53685B; font-size: 14px; }
  .native-app .native-practice-summary strong { color: #20342F; font-variant-numeric: tabular-nums; }
  .native-app .native-progress-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; color: #53685B; font-size: 15px; font-weight: 650; }
  .native-app .native-progress-top strong { color: #12665E; font-size: 35px; line-height: 1; }
  .native-app .native-progress-top small { color: #53685B; font-size: 17px; }
  .native-app .native-setting-row small { display: none; }
  .native-app .native-setting-row { min-height: 62px; }
  .native-app .native-setting-link { min-height: 62px; }
  .native-app .native-today-next { margin-top: 35px; }
  .native-app .native-today-prompt h2 { margin-bottom: 0; }
  .native-app .native-turn-meta { font-variant-numeric: tabular-nums; }
  .native-app .native-sentence { margin-top: 34px; }
  .native-app .native-meaning { margin-top: 28px; }
  .native-app .native-meaning.is-open { min-height: 95px; }
  .native-app .native-meaning strong { margin-top: 0; }
  .native-app .studio-content > .lesson-kicker,
  .native-app .workspace-head .lesson-kicker,
  .native-app .workspace-head p,
  .native-app .workspace-head .workspace-badge,
  .native-app .studio-content > .feature-rule { display: none; }
  .native-app[data-task="grammar"] .studio-content > .workspace-head,
  .native-app[data-task="sentences"] .studio-content > .workspace-head { display: none; }
  .native-app .workspace-head { margin-bottom: 17px; }
  .native-app .workspace-head h3 { margin: 0; font-size: 22px; }
  .native-app .lesson-frame .studio-content > .practice-counter { margin-bottom: 14px; }
  .native-app .listening-panel > p:first-of-type,
  .native-app .listening-panel h4,
  .native-app .speaking-timer small,
  .native-app .follow-up > small { display: none; }
  .native-app .writing-prompt strong { font-size: 12px; }
  .native-app .settings-dialog .settings-actions .button-quiet { display: none; }
  .native-app .settings-dialog .settings-actions .button-primary { width: 100%; }

  /* A restrained raised surface treatment adds touch feedback and depth. */
  .native-app::before { background: radial-gradient(circle at 88% 18%, #F0E9DA 0, transparent 36%), #FFFCF6; }
  .native-app .site-header { box-shadow: 0 5px 20px rgba(34, 57, 43, .035); }
  .native-app .header-level,
  .native-app .native-path-icon,
  .native-app .native-hear,
  .native-app .native-complete-mark { box-shadow: inset 0 1px 1px rgba(255,255,255,.85), 0 3px 7px rgba(47,79,59,.08); }
  .native-app .native-hear-small { min-height: 38px; padding-inline: 11px; background: #F1F5EC; }
  .native-app .native-path-list,
  .native-app .native-profile-progress,
  .native-app .native-setting-row,
  .native-app .native-setting-link,
  .native-app .native-recall-choice { box-shadow: 0 8px 24px rgba(44,65,48,.07), inset 0 1px 0 rgba(255,255,255,.9); }
  .native-app .native-meaning { background: linear-gradient(145deg, #FFECDD, #F7D9C2); border: 1px solid #F3D2B7; box-shadow: 0 12px 24px rgba(124,75,36,.1), inset 0 1px 0 rgba(255,255,255,.8); }
  .native-app[data-task="vocabulary"] .native-learn-position { display: none; }
  .native-app .native-vocab-focus { padding-top: 12px; }
  .native-app .native-vocab-focus .native-turn-meta { color: #627268; font-size: 12px; font-weight: 750; letter-spacing: .08em; }
  .native-app .native-word-line { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
  .native-app .native-word-line .native-word { flex: 1; min-width: 0; margin: 0; font-size: clamp(37px, 10vw, 55px); }
  .native-app .native-audio-icon { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid #D5E7DC; border-radius: 50%; background: #E4F0E7; color: #12665E; font-size: 17px; }
  .native-app .native-audio-icon:disabled { opacity: .45; }
  .native-app .native-word-detail { margin-top: 26px; padding: 20px; border: 1px solid #E6E7DD; border-radius: 18px; background: #FFFEFA; }
  .native-app .word-origin { margin-top: 16px; padding: 16px 0 0; border: 0; border-top: 1px solid #ECEDE4; border-radius: 0; background: transparent; }
  .native-app .word-origin-label { margin-bottom: 9px; }
  .native-app .word-origin p { margin-top: 10px; }
  .native-app .native-translation span, .native-app .native-example span { display: block; margin-bottom: 8px; color: #738073; font-size: 11px; font-weight: 760; letter-spacing: .08em; }
  .native-app .native-translation strong { color: #20342F; font-size: 26px; line-height: 1.2; }
  .native-app .native-example { display: flex; align-items: center; gap: 12px; margin-top: 23px; padding-top: 20px; border-top: 1px solid #ECEDE4; }
  .native-app .native-example > div { flex: 1; min-width: 0; }
  .native-app .native-example p { margin: 0; color: #394E43; font-size: 18px; line-height: 1.38; }
  .native-app .native-example-audio { flex-basis: 42px; width: 42px; height: 42px; background: #F1F5EC; }
  .native-app .native-vocab-action { margin-top: 20px; }
  .native-app .native-main-action,
  .native-app .practice-turn .button-primary,
  .native-app .practice-actions .button-primary { background: linear-gradient(180deg, #1B786C 0%, #125E56 100%); border: 1px solid #105A53; box-shadow: 0 9px 18px rgba(18,102,94,.2), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .15s ease, box-shadow .15s ease; }
  .native-app .native-main-action:disabled { background: #D9DED5; border-color: #D9DED5; box-shadow: none; }
  .native-app .native-main-action:not(:disabled):active,
  .native-app .practice-turn .button-primary:active,
  .native-app .practice-actions .button-primary:active,
  .native-app .native-path-row:active,
  .native-app .native-recall-choice:active { transform: translateY(2px); box-shadow: 0 3px 9px rgba(18,102,94,.12); }
  .native-app .native-tab-bar { box-shadow: 0 -7px 25px rgba(38,61,45,.06); }
  .native-app h1[tabindex="-1"]:focus { outline: none; }
  .native-app .native-journey { display: block; margin: 8px 0 18px; }
  .native-app .native-journey-panel { position: relative; isolation: isolate; min-height: 216px; overflow: hidden; border-radius: 25px; background: linear-gradient(135deg, #145E55 0%, #1D7C6E 100%); box-shadow: 0 16px 28px rgba(19,92,81,.19), inset 0 1px 0 rgba(255,255,255,.2); }
  .native-app .native-journey-panel::before { content: ''; position: absolute; z-index: -1; width: 240px; height: 240px; right: -55px; top: -66px; border-radius: 50%; background: radial-gradient(circle, rgba(210,242,195,.22), transparent 70%); }
  .native-app .native-journey-copy { position: relative; z-index: 2; display: grid; justify-items: start; padding: 22px 22px 38px; max-width: 60%; color: #fff; }
  .native-app .native-journey-copy > span { color: #C8E7D9; font-size: 11px; font-weight: 780; letter-spacing: .12em; }
  .native-app .native-journey-copy strong { margin-top: 15px; font-size: 43px; font-weight: 760; line-height: 1; letter-spacing: -.06em; white-space: nowrap; }
  .native-app .native-journey-copy strong small { font-size: 22px; font-weight: 550; letter-spacing: -.03em; }
  .native-app .native-journey-copy p { max-width: 150px; margin: 8px 0 0; color: #DBECDD; font-size: 14px; font-weight: 650; line-height: 1.25; }
  .native-app .native-illustration { position: absolute; z-index: 1; top: 0; right: -4px; width: 190px; height: 190px; object-fit: contain; filter: none; }
  .native-app .native-journey-steps { position: absolute; z-index: 3; left: 22px; right: 22px; bottom: 21px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin: 0; padding: 0; list-style: none; }
  .native-app .native-journey-steps li { height: 6px; border-radius: 8px; background: rgba(255,255,255,.28); }
  .native-app .native-journey-steps li.done { background: #F7BE8D; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
  .native-app .native-journey-steps li.next { background: #fff; }
  .native-app .native-journey-steps li.started { background: #A6D4C3; }
  .native-app .native-next-card { padding: 23px; border: 1px solid #EEE7D9; border-radius: 23px; background: #FFFEFA; box-shadow: 0 10px 26px rgba(44,65,48,.075), inset 0 1px 0 #fff; }
  .native-app .native-next-kicker { color: #9F5C38; font-size: 11px; font-weight: 790; letter-spacing: .1em; }
  .native-app .native-next-card h2 { margin: 11px 0 4px; color: #20342F; font-size: 31px; line-height: 1.1; }
  .native-app .native-next-card p { margin: 0; min-height: 40px; color: #53685B; font-size: 15px; line-height: 1.4; }
  .native-app .native-next-card .native-main-action { margin-top: 16px; }
  .native-app .native-journey-link { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 53px; margin-top: 7px; padding: 0 7px; border: 0; background: transparent; color: #12665E; font-size: 15px; font-weight: 730; text-align: left; }
  .native-app .native-path-summary { display: flex; justify-content: space-between; margin: -5px 0 17px; color: #53685B; font-size: 14px; }
  .native-app .native-path-summary strong { color: #12665E; }
  .native-app .native-path-list { display: grid; gap: 10px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .native-app .native-path-row { min-height: 76px; padding: 13px 16px; border: 1px solid #ECE6D8; border-radius: 18px; background: #FFFEFA; box-shadow: 0 6px 18px rgba(44,65,48,.06), inset 0 1px 0 #fff; }
  .native-app .native-path-row:last-child { border-bottom: 1px solid #ECE6D8; }
  .native-app .native-path-row.is-next { border-color: #A9D2B8; background: linear-gradient(130deg, #F0F8EF, #FFFEFA); box-shadow: 0 9px 20px rgba(30,111,80,.1); }
  .native-app .native-path-row.is-done .native-path-icon { background: #12665E; color: white; }
  .native-app .native-path-copy { gap: 3px; }
  .native-app .native-path-copy small { display: block; color: #6A7B6D; font-size: 12px; font-weight: 590; }
  .native-app .native-path-row.is-next .native-path-copy small { color: #12665E; font-weight: 750; }
  .native-app .native-path-end { font-size: 22px; }
  .native-app .native-milestone { display: flex; align-items: center; gap: 11px; margin-top: 24px; padding: 12px; border: 1px solid #B7D7BB; border-radius: 17px; background: #EAF5E9; }
  .native-app .native-milestone img { width: 58px; height: 58px; object-fit: contain; }
  .native-app .native-milestone > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
  .native-app .native-milestone strong { color: #214D3D; font-size: 15px; }
  .native-app .native-milestone span { color: #53685B; font-size: 12px; }
  .native-app .native-milestone button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #12665E; color: #fff; font-size: 20px; }
  .native-app[data-task="vocabulary"] .learn-heading { display: block; }
  .native-app[data-task="vocabulary"] .learn-heading h1 { font-size: 27px; }
  .native-app .native-learn-position { display: block; margin-bottom: 8px; color: #627E6C; font-size: 11px; font-weight: 760; letter-spacing: .08em; }
  .native-app .native-next-card { position: relative; overflow: hidden; padding: 23px; background: linear-gradient(145deg, #FFFEFA, #F9F3E8); }
  .native-app .native-next-card .native-illustration { top: 1px; right: 4px; width: 155px; height: 155px; filter: none; }
  .native-app .native-next-card h2 { position: relative; margin-top: 112px; font-size: 34px; }
  .native-app .native-next-card p { min-height: 0; }
  .native-app .native-step-outcome { display: block; margin-top: 11px; color: #626E62; font-size: 13px; line-height: 1.4; }
  .native-app .native-next-card .native-main-action { margin-top: 20px; }
  .native-app .native-journey { margin: 14px 0 18px; }
  .native-app .native-journey-panel { min-height: 0; padding: 18px 20px 7px; border: 1px solid #D9E8D8; border-radius: 20px; background: #EDF5EC; box-shadow: 0 8px 22px rgba(44,65,48,.05); }
  .native-app .native-journey-panel::before { display: none; }
  .native-app .native-journey-copy { display: block; max-width: none; padding: 0; color: #20342F; }
  .native-app .native-journey-copy > span { color: #12665E; }
  .native-app .native-journey-copy strong { display: block; margin-top: 7px; font-size: 21px; line-height: 1.2; letter-spacing: -.025em; }
  .native-app .native-journey-copy p { max-width: none; margin-top: 4px; color: #587064; font-size: 13px; font-weight: 600; }
  .native-app .native-journey-steps { position: static; margin-top: 15px; }
  .native-app .native-journey-steps li { height: 6px; background: #CFDED0; }
  .native-app .native-journey-steps li.done { background: #E8A374; box-shadow: none; }
  .native-app .native-journey-steps li.next { background: #12665E; }
  .native-app .native-journey-steps li.started { background: #7EBAA2; }
  .native-app .native-journey-link { min-height: 43px; margin-top: 5px; padding: 0; font-size: 14px; }
  @media (max-width: 380px) {
    .native-app .native-next-card .native-illustration { width: 132px; height: 132px; }
    .native-app .native-next-card h2 { margin-top: 94px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .native-app .native-main-action, .native-app .practice-turn .button-primary, .native-app .practice-actions .button-primary { transition: none; }
  }
}

/* Recall feedback stays on the answer until the learner moves on. */
body .native-recall-choice { transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
body .native-recall-choice:disabled { cursor: default; opacity: 1; }
body .native-recall-choice.is-correct,
body.native-app[data-theme="dark"] .native-recall-choice.is-correct,
body:not(.native-app)[data-theme="dark"] .native-recall-choice.is-correct { border-color: #145F3A; background: #197546; color: #fff; box-shadow: 0 10px 22px rgba(20, 95, 58, .18); }
body .native-recall-choice.is-incorrect,
body.native-app[data-theme="dark"] .native-recall-choice.is-incorrect,
body:not(.native-app)[data-theme="dark"] .native-recall-choice.is-incorrect { border-color: #A9413B; background: #B74942; color: #fff; box-shadow: 0 10px 22px rgba(169, 65, 59, .16); }
body .native-choice-mark { display: grid; place-items: center; flex: 0 0 29px; width: 29px; height: 29px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 18px; line-height: 1; }
body .native-answer-feedback:empty { min-height: 0; margin-top: 0; }
body .native-answer-feedback.is-correct { color: #197546; }
body[data-theme="dark"] .native-answer-feedback.is-correct { color: #A6E2BA; }
body .native-answer-feedback.is-incorrect { color: #9A3C36; }
body[data-theme="dark"] .native-answer-feedback.is-incorrect { color: #F1ADA5; }
body .native-answer-feedback:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  body .native-recall-choice { transition: none; }
}

/* Guided levels show one current round and its next badge. */
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .lesson-menu,
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .lesson-footer,
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .settings-section:has(#focusSelect) { display: none; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-route-card { max-width: 620px; margin-inline: auto; padding: 10px 0 24px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-route-kicker { display: flex; align-items: center; gap: 9px; color: #12665e; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-badge-marker { display: inline-flex; align-items: center; gap: 5px; letter-spacing: .04em; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-badge-marker svg { width: 24px; height: 24px; flex: none; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-round-progress { display: flex; gap: 6px; width: 100%; margin: 19px 0 7px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-round-progress span { flex: 1; height: 14px; border-radius: 99px; background: #dbe7dc; box-shadow: inset 0 1px 2px rgba(21, 64, 49, .06); }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-round-progress .is-lit { background: linear-gradient(135deg, #14866f, #65b891); box-shadow: 0 2px 9px rgba(25, 133, 101, .22); }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-round-progress .is-next { background: #f0c36b; box-shadow: 0 0 0 4px rgba(240, 195, 107, .24); animation: a1-progress-pulse 1.9s ease-in-out infinite; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) #learn:has(.a1-celebration) .learn-heading { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) #learn:has(.a1-celebration) .studio-content { padding-top: 16px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-round-progress span { background: #31483c; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-round-progress .is-lit { background: #56bd92; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-round-progress .is-next { background: #f0c36b; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-celebration { max-width: 620px; margin: 0 auto; padding: 8px 20px 24px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-shatter-stage { position: relative; width: min(100%, 300px); height: 230px; display: grid; place-items: center; overflow: hidden; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-shatter-glow { position: absolute; width: 205px; height: 205px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 190, 114, .36), rgba(244, 190, 114, 0) 70%); animation: a1-glow 1.3s ease-out both; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-burst { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-burst-ring { position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; margin: -35px; border: 8px solid #f3c66e; border-radius: 50%; animation: a1-burst-ring .95s .55s ease-out both; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-burst-spark { position: absolute; top: 50%; left: 50%; width: 9px; height: 20px; margin: -10px -4.5px; border-radius: 5px; background: #e7b251; animation: a1-spark-fly 1.05s calc(.58s + var(--spark-delay)) ease-out both; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-burst-spark:nth-child(3n) { background: #2fa17e; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-burst-spark:nth-child(4n) { width: 11px; height: 11px; border-radius: 50%; background: #f28d70; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-shatter-art { position: absolute; width: 215px; height: 235px; overflow: visible; filter: drop-shadow(0 12px 20px rgba(15, 75, 61, .18)); }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-shatter-frame { fill: none; stroke: #17685d; stroke-width: 5; animation: a1-frame-open .8s 1.05s ease-in both; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-shard { fill: #a8d1b5; stroke: #f4f6ec; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: a1-shard-break 1.05s calc(.35s + var(--shard-delay)) cubic-bezier(.18,.72,.28,1) both; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-shard:nth-of-type(3n) { fill: #d7b878; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-shard:nth-of-type(4n) { fill: #6aa996; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-shatter-reveal { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 130px; height: 130px; border-radius: 50%; background: #12665e; color: #fffefa; box-shadow: 0 15px 38px rgba(12, 90, 69, .23); animation: a1-reveal 1s .7s cubic-bezier(.16,1,.3,1) both; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-shatter-reveal strong { font-size: 66px; line-height: 1; letter-spacing: -.07em; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-shatter-reveal span { margin-top: 3px; font-size: 11px; font-weight: 850; letter-spacing: .2em; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-celebration-eyebrow { margin-top: 2px; color: #12665e; font-size: 12px; font-weight: 850; letter-spacing: .18em; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-celebration h2 { margin: 8px 0 0; color: #20342f; font-size: clamp(32px, 7vw, 48px); line-height: 1.08; letter-spacing: -.055em; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-celebration p { margin: 10px 0 17px; color: #52695d; font-size: 17px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-celebration-cta { display: flex; align-items: center; justify-content: center; gap: 14px; min-width: min(100%, 300px); min-height: 60px; padding: 10px 22px; border: 0; border-radius: 20px; background: #12665e; color: #fff; box-shadow: 0 15px 28px rgba(12, 90, 69, .18); font: inherit; font-size: 18px; font-weight: 820; cursor: pointer; animation: a1-cta-enter .7s 1.1s both; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-celebration-cta:hover { background: #0c514b; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-celebration-cta:focus-visible { outline: 3px solid #c29042; outline-offset: 4px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-cta-hand { width: 25px; height: 30px; transform: rotate(-18deg); animation: a1-cta-tap 2.4s 1.8s ease-in-out infinite; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-celebration-cta span:last-child { margin-left: 4px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-door-win-stage { position: relative; width: min(100%, 300px); height: 220px; display: grid; place-items: center; overflow: hidden; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-door-win-glow { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 198, 96, .7), rgba(255, 198, 96, 0) 70%); animation: a1-glow 1.4s .4s ease-out both; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-earned-badge { position: absolute; z-index: 2; width: 194px; height: 203px; overflow: visible; stroke: #bd8738; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 10px 14px rgba(67, 57, 24, .14)); animation: a1-badge-arrive .9s .35s cubic-bezier(.16,1,.3,1) both; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-door-win-core { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 105px; height: 105px; border-radius: 50%; background: #fff8e6; color: #173e35; box-shadow: inset 0 0 0 2px #dfb267, 0 0 42px rgba(247, 184, 74, .3); animation: a1-reveal .8s .65s both; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-door-win-core strong { font-size: 58px; line-height: 1; letter-spacing: -.06em; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-door-win-core span { margin-top: 3px; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-door-path { display: flex; width: min(100%, 360px); gap: 5px; margin: 0 0 16px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-door-path span { flex: 1; height: 13px; border-radius: 99px; background: #d9e6dc; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-door-path .is-open { background: #14866f; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-door-path .is-new { background: #efb953; box-shadow: 0 0 0 5px rgba(239,185,83,.23), 0 0 18px rgba(239,185,83,.7); animation: a1-progress-pulse 1.8s .8s ease-in-out infinite; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-door-path .is-next { background: #aacdbb; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-door-path span { background: #31483c; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-door-path .is-open { background: #56bd92; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-door-path .is-new { background: #efb953; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-celebration h2 { color: #f3f1e9; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-celebration p { color: #bdcfc0; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-celebration-eyebrow { color: #a9dcc9; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-shatter-reveal, body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-celebration-cta { background: #23745f; }
@keyframes a1-shard-break { 0%, 22% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; transform: translate(var(--shard-x), var(--shard-y)) rotate(var(--shard-angle)); } }
@keyframes a1-frame-open { to { opacity: 0; transform: scale(1.08); } }
@keyframes a1-reveal { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes a1-glow { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1.4); } }
@keyframes a1-cta-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes a1-cta-tap { 0%, 70%, 100% { transform: rotate(-18deg) translateY(0); } 78%, 85% { transform: rotate(-18deg) translateY(-5px); } }
@keyframes a1-progress-pulse { 50% { box-shadow: 0 0 0 7px rgba(240, 195, 107, .08); transform: scale(1.05); } }
@keyframes a1-burst-ring { from { opacity: .85; transform: scale(.2); } to { opacity: 0; transform: scale(4.1); } }
@keyframes a1-spark-fly { 0% { opacity: 0; transform: rotate(var(--ray)) translateY(-30px) scale(.35); } 22% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--ray)) translateY(calc(-1 * var(--reach))) scale(.65); } }
@keyframes a1-badge-arrive { from { opacity: 0; transform: translateY(26px) scale(.72) rotate(-14deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-kicker-divider { opacity: .55; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-route-card .native-word { margin: 30px 0 24px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-flashcard { position: relative; height: min(48vh, 350px); min-height: 270px; margin: 26px 0 22px; perspective: 1200px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-route-card:has(.a1-word-info) .a1-flashcard { height: min(32vh, 250px); min-height: 230px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-flashcard-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-flashcard.is-flipped .a1-flashcard-inner { transform: rotateY(180deg); }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-flashcard-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; padding: 68px 24px; border: 1px solid #d8e5d9; border-radius: 28px; background: linear-gradient(145deg, #fffefa, #eef5eb); box-shadow: 0 18px 40px rgba(29, 63, 45, .1); color: #20342f; text-align: left; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-flashcard-face { align-items: center; text-align: center; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-flashcard-back { border-color: #e8d3bf; background: linear-gradient(145deg, #fff7ed, #f8e2cc); transform: rotateY(180deg); }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-flashcard-label { margin-bottom: 14px; color: #12665e; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-flashcard-flag { display: block; width: 38px; height: 28px; margin-bottom: 14px; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 6px rgba(25, 47, 45, .16); }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-flashcard-flag svg { display: block; width: 100%; height: 100%; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-flashcard-face strong { max-width: 100%; font-size: clamp(38px, 10vw, 64px); line-height: 1.05; letter-spacing: -.055em; overflow-wrap: normal; word-break: normal; text-wrap: balance; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-flashcard-face strong.a1-single-word { white-space: nowrap; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-flashcard-face strong.a1-break-long-word { white-space: normal; overflow-wrap: anywhere; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-flashcard-back strong { font-size: clamp(28px, 7vw, 44px); }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-flashcard-prompt { position: absolute; bottom: 8px; left: 50%; display: grid; place-items: center; width: 66px; height: 74px; transform: translateX(-50%); pointer-events: none; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-tap-hand-icon { display: block; width: 66px; height: 74px; overflow: visible; color: #20342f; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-tap-hand-shape { fill: none; stroke: currentColor; animation: a1-index-tap 2.3s ease-in-out infinite; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-tap-touch { stroke: currentColor; transform-origin: 35px 4px; animation: a1-hand-touch 2.3s ease-out infinite; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-tap-hand-icon { color: #f3f1e9; }
@keyframes a1-index-tap { 0%, 27%, 60%, 100% { transform: translateY(0); } 43%, 49% { transform: translateY(-4px); } }
@keyframes a1-hand-touch { 0%, 38%, 100% { opacity: 0; transform: scale(.5); } 48% { opacity: .75; transform: scale(1); } 67% { opacity: 0; transform: scale(1.8); } }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-card-nav { position: absolute; z-index: 2; bottom: 18px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #c7d9cf; border-radius: 50%; background: rgba(255, 254, 250, .94); color: #12665e; box-shadow: 0 3px 10px rgba(25, 71, 48, .08); cursor: pointer; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-card-nav svg { width: 20px; height: 20px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-card-prev { left: 12px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-card-next { right: 12px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-card-nav:disabled { opacity: .3; cursor: default; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-card-nav:focus-visible { outline: 3px solid #12665e; outline-offset: 3px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-card-nav { border-color: #4b6a57; background: #263d32; color: #e3eee4; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-info-button,
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-card-audio { position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #c7d9cf; border-radius: 50%; background: #fffefa; color: #12665e; font-size: 21px; font-weight: 800; box-shadow: 0 3px 10px rgba(25, 71, 48, .08); }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-info-button { top: 18px; right: 18px; font-family: Georgia, serif; font-style: italic; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-card-audio { top: 18px; left: 18px; font-size: 18px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-info-button[aria-expanded="true"] { background: #12665e; color: #fff; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-word-info { margin: 0 0 20px; padding: 18px 20px; border: 1px solid #d9e3d7; border-radius: 20px; background: #f6f8ef; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-word-info strong { display: block; color: #12665e; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-word-info p { margin: 5px 0 13px; color: #29443a; font-size: 15px; line-height: 1.5; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-word-info p:last-child { margin-bottom: 0; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-card-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-card-choices button { min-height: 64px; padding: 10px 16px; border-radius: 17px; font-size: 16px; font-weight: 780; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-study-again { border: 1px solid #b7c9bd; background: #f8f9f4; color: #29443a; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-review-option { display: block; min-height: 44px; margin: 12px auto 0; padding: 8px 16px; border: 0; border-radius: 12px; background: transparent; color: #12665e; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-review-option:focus-visible { outline: 3px solid #12665e; outline-offset: 2px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-review-option { color: #a9dcc9; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-know-word { border: 1px solid #12665e; background: #12665e; color: #fff; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-card-help { margin: 0; color: #607568; font-size: 14px; line-height: 1.45; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-library-origin summary { width: fit-content; min-height: 44px; display: flex; align-items: center; color: #12665e; font-size: 14px; font-weight: 750; cursor: pointer; list-style: none; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-library-origin summary::-webkit-details-marker { display: none; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-library-origin strong { display: block; margin-top: 12px; color: #12665e; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-word-meaning { display: grid; gap: 5px; margin: 26px 0 8px; padding: 21px; border: 1px solid #ead8c8; border-radius: 18px; background: #fcebdd; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-word-meaning span { color: #6b7567; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-word-meaning strong { color: #20342f; font-size: 27px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-word-meaning small { margin-top: 6px; color: #52695d; font-size: 13px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-builder-prompt { margin: 26px 0 20px; color: #20342f; font-size: clamp(24px, 6vw, 34px); line-height: 1.2; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-grammar-note { display: grid; gap: 5px; margin-bottom: 18px; color: #52695d; font-size: 13px; line-height: 1.4; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-grammar-note strong { color: #12665e; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-answer-bank { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 92px; padding: 14px; border: 2px dashed #b6cbbd; border-radius: 18px; background: #f2f7f1; color: #52695d; transition: border-color .15s, background .15s; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-answer-bank.is-drop-target { border-color: #b8832d; background: #fff6df; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-drop-marker { position: absolute; z-index: 3; width: 5px; border-radius: 99px; background: #de9e3d; box-shadow: 0 0 0 4px rgba(222,158,61,.18); pointer-events: none; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-answer-bank.is-correct { border-style: solid; border-color: #197546; background: #197546; color: #fff; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-answer-bank.is-incorrect { border-style: solid; border-color: #b74942; background: #b74942; color: #fff; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-token-bank { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-token { min-height: 46px; padding: 9px 13px; border: 1px solid #cfdcd0; border-radius: 11px; background: #fffefa; color: #20342f; font-size: 16px; font-weight: 650; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-token:active { cursor: grabbing; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-token.is-dragging { opacity: .35; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-token-ghost { position: fixed; z-index: 9999; display: grid; place-items: center; min-height: 46px; padding: 9px 13px; border: 2px solid #d19c48; border-radius: 11px; background: #fff9e9; color: #20342f; box-shadow: 0 14px 30px rgba(30,55,45,.22); font-size: 16px; font-weight: 750; pointer-events: none; transform: translate(-50%,-50%) rotate(-4deg); }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-token:disabled { opacity: .35; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-token:disabled { cursor: default; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-answer-bank.is-correct .a1-token,
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-answer-bank.is-incorrect .a1-token { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.14); color: #fff; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-answer-bank.is-correct .a1-token:disabled { opacity: 1; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-result { display: flex; align-items: center; gap: 10px; margin-top: 20px; color: #197546; font-size: 16px; font-weight: 750; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-result span { flex: 1; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-builder-feedback { min-height: 22px; margin: 12px 0 0; color: #a9413b; font-size: 14px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-wrong-action { background: #b74942; border-color: #b74942; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-reset { min-height: 42px; padding: 0; border: 0; background: none; color: #52695d; font-size: 14px; font-weight: 700; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .native-path-row.is-locked { opacity: .55; box-shadow: none; }
body.native-app:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .native-journey-steps { grid-template-columns: repeat(8, minmax(0, 1fr)); }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-finish { max-width: 500px; margin: 25px auto; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-finish h2 { font-size: 31px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-word-meaning { background: #342b24; border-color: #5a4638; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-flashcard-front { border-color: #405f4b; background: linear-gradient(145deg, #233a30, #1b2e27); color: #f3f1e9; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-flashcard-back { border-color: #76533e; background: linear-gradient(145deg, #47362b, #342820); color: #f3f1e9; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-flashcard-label,
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-word-info strong { color: #a8dec7; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-flashcard-prompt,
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-card-help { color: #bbcec0; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-info-button,
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-card-audio { border-color: #4b6a57; background: #263d32; color: #e3eee4; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-info-button[aria-expanded="true"] { background: #34866c; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-word-info { border-color: #405b48; background: #21342b; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-word-info p { color: #e0e9de; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-study-again { border-color: #58705f; background: #263a30; color: #f3f1e9; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-know-word { border-color: #3b9775; background: #247457; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-word-meaning strong,
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-builder-prompt { color: #f3f1e9; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-answer-bank { background: #1c3029; color: #dbe9df; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-answer-bank.is-drop-target { border-color: #efbb68; background: #334333; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-answer-bank.is-correct { background: #197546; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-answer-bank.is-incorrect { background: #b74942; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-token { background: #253b32; border-color: #456151; color: #f3f1e9; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-answer-bank .a1-token { background: rgba(255,255,255,.12); }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-grammar-note,
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-theme="dark"] .a1-reset { color: #bdcfc0; }
@media (max-width: 760px) {
  body.native-app:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .lesson-frame .studio-content { min-height: 52vh; }
  body.native-app:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-route-card { padding-top: 8px; }
  body.native-app:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-today-card h2 { margin-top: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-flashcard-inner { transition: none; }
  body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-tap-hand-shape,
  body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-tap-touch { animation: none; }
  body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-tap-touch { opacity: 1; }
  body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-shard, body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-shatter-frame { display: none; }
  body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-shatter-reveal, body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-shatter-glow,
  body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-celebration-cta, body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-cta-hand { animation: none; }
  body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-burst { display: none; }
  body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-earned-badge { animation: none; }
  body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-door-win-core, body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-door-win-glow,
  body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-round-progress .is-next, body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .a1-door-path .is-new { animation: none; }
}

body.native-app[data-level="A2"] .native-journey-steps { grid-template-columns: repeat(17, minmax(0, 1fr)); }

body.native-app[data-level="B1"] .native-journey-steps { grid-template-columns: repeat(18, minmax(0, 1fr)); }

body.native-app[data-level="B2"] .native-journey-steps { grid-template-columns: repeat(10, minmax(0, 1fr)); }

body.native-app .native-journey-progress { height: 8px; margin-top: 16px; overflow: hidden; border-radius: 8px; background: #CFDED0; }
body.native-app .native-journey-progress i { display: block; height: 100%; border-radius: inherit; background: #12665E; }
body.native-app[data-theme="dark"] .native-journey-progress { background: #36594B; }
body.native-app[data-theme="dark"] .native-journey-progress i { background: #A6E4C8; }
body[data-theme="dark"] .home-illustration,
body[data-theme="dark"] .native-illustration,
body[data-theme="dark"] .native-milestone img { filter: brightness(0) invert(.9); }
body.native-app .native-path-archive { display: grid; gap: 10px; }
body.native-app .native-path-archive summary { padding: 10px 4px; color: #12665E; font-size: 14px; font-weight: 700; cursor: pointer; }
body.native-app .native-path-ahead { margin: 3px 4px; color: #587064; font-size: 13px; }
body.native-app[data-theme="dark"] .native-path-archive summary,
body.native-app[data-theme="dark"] .native-path-ahead { color: #B8D8C7; }

/* A1 village: one scene and one action at a time. The illustration has no fills. */
body[data-level] #learn .learn-heading { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body[data-level] #learn:has(.a1-village-card) .lesson-frame { border: 0; background: transparent; box-shadow: none; }
body[data-level] #learn:has(.a1-village-card) .studio-content { padding: 8px 0 24px; }
body[data-level] .a1-today-card .a1-village-art { position: absolute; top: 8px; right: 16px; width: min(53%, 270px); height: 118px; color: #17675d; opacity: .9; }
body[data-level] .a1-today-card h2 { position: relative; }
body[data-level] .a1-village-card { max-width: 620px; margin: 0 auto 24px; padding: clamp(22px, 5vw, 38px); border: 1px solid #d9e4d7; border-radius: 28px; background: linear-gradient(155deg, #fffefa, #f6f3ea); box-shadow: 0 16px 34px rgba(24, 57, 45, .07); color: #20342f; }
body[data-level] .a1-village-card .a1-village-art { display: block; width: min(100%, 320px); height: 118px; margin: 6px auto 20px; color: #17675d; }
body[data-level] .a1-grammar-card .a1-village-art { height: 80px; margin: 4px auto 14px; }
body[data-level] .a1-grammar-card .a1-village-note { margin: 8px 0 14px; }
body[data-level] .a1-grammar-card .a1-village-question { margin-top: 14px; }
body[data-level] .a1-grammar-card .a1-village-feedback { margin: 10px 0 4px; }
body[data-level] .a1-mission-card { padding: 24px 28px; }
body[data-level] .a1-mission-card .a1-village-art { width: 210px; height: 68px; margin: 0 auto 8px; }
body[data-level] .a1-mission-card h2 { font-size: 34px; }
body[data-level] .a1-village-kicker { color: #17675d; font-size: 12px; font-weight: 850; letter-spacing: .14em; }
body[data-level] .a1-village-card h2 { margin: 0 0 12px; font-size: clamp(30px, 6vw, 43px); line-height: 1.05; letter-spacing: -.045em; }
body[data-level] .a1-village-card h3 { margin: 18px 0 12px; font-size: 22px; }
body[data-level] .a1-village-example { margin: 16px 0 4px; color: #17675d; font-size: clamp(22px, 5vw, 28px); font-weight: 750; }
body[data-level] .a1-village-note { margin: 10px 0 22px; color: #53685b; font-size: 16px; line-height: 1.55; }
body[data-level] .a1-village-question { margin: 22px 0 0; padding: 0; border: 0; }
body[data-level] .a1-village-question legend, body[data-level] .a1-village-question > strong { display: block; margin-bottom: 12px; color: #20342f; font-size: 17px; font-weight: 750; }
body[data-level] .a1-village-question small { display: block; margin-top: 8px; color: #6b5e49; line-height: 1.4; }
body[data-level] .a1-village-options { display: grid; gap: 9px; }
body[data-level] .a1-village-option { width: 100%; min-height: 51px; padding: 12px 16px; border: 1px solid #c9d9cc; border-radius: 14px; background: #fff; color: #20342f; font: inherit; font-size: 16px; font-weight: 650; text-align: left; cursor: pointer; }
body[data-level] .a1-village-option.is-selected { border-color: #17675d; box-shadow: inset 0 0 0 1px #17675d; }
body[data-level] .a1-village-option.is-correct { border-color: #258e58; background: #dcefe1; color: #135c35; }
body[data-level] .a1-village-option.is-wrong { border-color: #af4e46; background: #f9e1dd; color: #842e2d; }
body[data-level] .a1-village-feedback { min-height: 22px; margin: 18px 0 9px; color: #17675d; font-size: 15px; font-weight: 700; }
body[data-level] .a1-village-feedback.is-wrong { color: #a4433c; }
body[data-level] .a1-village-card .native-main-action { width: 100%; margin-top: 10px; }
body[data-level] .a1-village-card button:disabled { cursor: default; opacity: .55; }
body[data-level] .a1-mission-stages { display: flex; justify-content: space-between; gap: 8px; margin: 14px 0 18px; }
body[data-level] .a1-mission-stages span { display: grid; flex: 1; place-items: center; min-height: 35px; border-radius: 10px; background: #e8ece3; color: #6a796d; font-size: 12px; font-weight: 800; text-transform: capitalize; }
body[data-level] .a1-mission-stages span.is-current { background: #17675d; color: #fff; }
body[data-level] .a1-mission-stages span.is-done { background: #d7eadb; color: #17675d; }
body[data-level] .a1-village-passage { padding: 20px; border-left: 4px solid #c58a53; border-radius: 0 16px 16px 0; background: #f4ece0; color: #2c3b33; font-size: 19px; line-height: 1.7; }
body[data-level] .a1-village-listen { display: grid; gap: 10px; padding: 18px; border: 1px solid #d9e4d7; border-radius: 16px; background: #f7f8f2; }
body[data-level] .a1-village-listen audio, body[data-level] .a1-mission-playback { width: 100%; }
body[data-level] .a1-village-transcript { margin-top: 16px; color: #53685b; }
body[data-level] .a1-village-transcript summary { cursor: pointer; font-weight: 700; }
body[data-level] .a1-village-label { display: block; margin: 16px 0 8px; font-weight: 750; }
body[data-level] #a1MissionDraft { width: 100%; min-height: 150px; box-sizing: border-box; }
body[data-level] .a1-village-review { margin-top: 18px; padding: 18px; border: 1px solid #d9e4d7; border-radius: 16px; background: #f5f7f0; }
body[data-level] .a1-village-review p { color: #17675d; font-size: 17px; }
body[data-level] .a1-village-checks { display: grid; gap: 9px; }
body[data-level] .a1-village-checks label { display: flex; align-items: center; gap: 10px; line-height: 1.35; }
body[data-level] .a1-village-checks input { width: 20px; height: 20px; accent-color: #17675d; }
body[data-level] .a1-village-speak { display: grid; gap: 10px; padding: 17px; border: 1px solid #d9e4d7; border-radius: 16px; }
body[data-level] .a1-village-speak p { margin: 0; color: #53685b; font-size: 13px; }
body[data-level] #a1MissionRecordStatus:empty { display: none; }
body[data-level] .guided-speaking-card { max-width: 540px; min-height: min(590px, 70svh); display: flex; flex-direction: column; text-align: center; }
body[data-level] .guided-speaking-card .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; }
body[data-level] .guided-speaking-topline { display: flex; justify-content: space-between; gap: 12px; color: #637769; font-size: 12px; font-weight: 750; }
body[data-level] .guided-speaking-line { display: grid; align-content: center; justify-items: center; gap: 22px; flex: 1; padding: 44px 0 32px; }
body[data-level] .guided-speaking-line strong { max-width: 18ch; color: #20342f; font-size: clamp(30px, 7vw, 46px); line-height: 1.2; letter-spacing: -.035em; }
body[data-level] .guided-speaking-tools { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; }
body[data-level] .guided-speaking-listen { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 7px 12px; border: 0; border-radius: 999px; background: transparent; color: #17675d; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
body[data-level] .guided-speaking-listen span { font-size: 12px; }
body[data-level] .guided-speaking-meaning { position: relative; color: #587065; font-size: 14px; }
body[data-level] .guided-speaking-meaning summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; font-weight: 750; }
body[data-level] .guided-speaking-meaning summary::-webkit-details-marker { display: none; }
body[data-level] .guided-speaking-meaning[open] { flex-basis: 100%; }
body[data-level] .guided-speaking-meaning[open] summary { justify-content: center; }
body[data-level] .guided-speaking-meaning p { margin: 3px 0 0; line-height: 1.4; }
body[data-level] .guided-speaking-actions { display: grid; gap: 10px; margin-top: 20px; }
body[data-level] .guided-speaking-actions .native-main-action { width: 100%; justify-content: center; }
body[data-level] .guided-speaking-mic span { font-size: 19px; line-height: 1; }
body[data-level] .guided-speaking-mic.is-listening { background: #a94242; border-color: #a94242; animation: guided-mic-pulse 1.4s ease-in-out infinite; }
body[data-level] .guided-speaking-retry { justify-self: center; min-height: 44px; border: 0; background: transparent; color: #17675d; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
body[data-level] .guided-speaking-result { display: grid; gap: 5px; margin-top: 12px; padding: 15px; border: 1px solid #b9d7c5; border-radius: 16px; background: #edf7ed; text-align: left; }
body[data-level] .guided-speaking-result span { color: #17675d; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
body[data-level] .guided-speaking-result strong { color: #20342f; font-size: 22px; font-weight: 800; }
body[data-level] .guided-speaking-result small, body[data-level] .guided-speaking-status { color: #52695e; font-size: 14px; line-height: 1.4; }
body[data-level] .guided-speaking-status { margin: 12px 0 0; }
@keyframes guided-mic-pulse { 50% { box-shadow: 0 0 0 10px rgba(169, 66, 66, .14); } }
@media (prefers-reduced-motion: reduce) { body[data-level] .guided-speaking-mic.is-listening { animation: none; } }
body[data-level][data-theme="dark"] .guided-speaking-line strong { color: #f3f1e9; }
body[data-level][data-theme="dark"] .guided-speaking-topline, body[data-level][data-theme="dark"] .guided-speaking-meaning { color: #cbd0dd; }
body[data-level][data-theme="dark"] .guided-speaking-listen { color: #f2b766; }
body[data-level][data-theme="dark"] .guided-speaking-result { border-color: #4b6655; background: #294036; }
body[data-level][data-theme="dark"] .guided-speaking-result strong { color: #f3f1e9; }
body[data-level][data-theme="dark"] .guided-speaking-result small, body[data-level][data-theme="dark"] .guided-speaking-status { color: #bdcfc0; }
body[data-level][data-theme="dark"] .guided-speaking-retry { color: #a8dec7; }
/* The learner's own line gets one clear focal point. Help stays behind one tap. */
body[data-level] .personal-line-card { max-width: 540px; min-height: min(560px, 68svh); display: flex; flex-direction: column; text-align: center; }
body[data-level] .personal-line-card .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; }
body[data-level] .personal-line-scene { position: relative; display: grid; place-items: center; width: 90px; height: 90px; margin: 25px auto 8px; color: #d68a55; }
body[data-level] .personal-line-orbit { position: absolute; inset: 12px; border: 2px solid currentColor; border-radius: 32% 68% 64% 36%; transform: rotate(-18deg); animation: personal-orbit 2.8s ease-in-out infinite alternate; }
body[data-level] .personal-line-pencil { font-size: 48px; animation: personal-spark 2.4s ease-in-out infinite; }
body[data-level] .personal-line-card h2 { margin: 0; }
body[data-level] .personal-line-invite { margin: 8px 0 25px; color: #617168; font-size: 16px; }
body[data-level] #personalLineDraft { display: block; width: 100%; min-height: 120px; padding: 18px 20px; border: 2px solid #b8c8be; border-radius: 21px; background: #fff; color: #20342f; font: inherit; font-size: clamp(21px, 5vw, 27px); font-weight: 700; line-height: 1.35; resize: vertical; }
body[data-level] #personalLineDraft:focus-visible { outline: 3px solid #efb76d; outline-offset: 3px; border-color: #17675d; }
body[data-level] .personal-line-help { margin: 12px 0 0; text-align: left; color: #17675d; }
body[data-level] .personal-line-help summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 750; cursor: pointer; }
body[data-level] .personal-line-help p { margin: 7px 0 0; color: #20342f; font-size: 18px; font-weight: 750; }
body[data-level] .personal-line-help small { color: #617168; }
body[data-level] .personal-line-help button { display: block; min-height: 44px; margin-top: 8px; padding: 4px 0; border: 0; background: transparent; color: #17675d; font: inherit; font-weight: 780; text-decoration: underline; cursor: pointer; }
body[data-level] .personal-line-feedback { margin: 12px 0 0; color: #17675d; font-size: 15px; line-height: 1.4; text-align: left; }
body[data-level] .personal-line-actions { margin-top: auto; padding-top: 28px; }
body[data-level] .personal-line-reward { max-width: 21ch; color: #17675d; font-size: clamp(20px, 5vw, 28px); font-weight: 780; line-height: 1.25; animation: personal-reward-enter .9s .7s both; }
@keyframes personal-orbit { to { transform: rotate(17deg) scale(1.06); } }
@keyframes personal-spark { 50% { transform: translateY(-7px) rotate(12deg); } }
@keyframes personal-reward-enter { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
body[data-level][data-theme="dark"] #personalLineDraft { border-color: #68718a; background: #30364a; color: #f8f2eb; }
body[data-level][data-theme="dark"] .personal-line-invite, body[data-level][data-theme="dark"] .personal-line-help small { color: #cbd0dd; }
body[data-level][data-theme="dark"] .personal-line-help, body[data-level][data-theme="dark"] .personal-line-help button, body[data-level][data-theme="dark"] .personal-line-feedback, body[data-level][data-theme="dark"] .personal-line-reward { color: #f2b766; }
body[data-level][data-theme="dark"] .personal-line-help p { color: #f8f2eb; }
@media (prefers-reduced-motion: reduce) { body[data-level] .personal-line-orbit, body[data-level] .personal-line-pencil, body[data-level] .personal-line-reward { animation: none; } }
/* Small wins move the lesson forward; larger fireworks stay with the badge. */
body[data-level] .a1-answer-bank.is-correct { animation: lesson-win-glow .85s cubic-bezier(.16, 1, .3, 1) both; }
body[data-level] .a1-result.is-correct { position: relative; animation: lesson-win-rise .7s cubic-bezier(.16, 1, .3, 1) both; }
body[data-level] .a1-result.is-correct::before { content: '✦'; position: absolute; left: -12px; top: -18px; color: #efb76d; font-size: 28px; pointer-events: none; animation: lesson-win-spark 1.05s ease-out both; }
body[data-level] .a1-grammar-card .a1-village-option.is-correct { animation: lesson-win-glow .85s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes lesson-win-glow { 0% { transform: scale(.975); filter: brightness(1.2); box-shadow: 0 0 0 0 rgba(241, 183, 100, .6); } 60% { box-shadow: 0 0 0 12px rgba(241, 183, 100, .18); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(241, 183, 100, 0); } }
@keyframes lesson-win-rise { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes lesson-win-spark { from { opacity: 0; transform: rotate(-45deg) scale(.5); } 35% { opacity: 1; } to { opacity: 0; transform: translate(-20px, -22px) rotate(60deg) scale(1.5); } }
@media (prefers-reduced-motion: reduce) { body[data-level] .a1-answer-bank.is-correct, body[data-level] .a1-result.is-correct, body[data-level] .a1-result.is-correct::before, body[data-level] .a1-grammar-card .a1-village-option.is-correct { animation: none; } }
body[data-level] .a1-village-row .native-path-icon { width: 54px; height: 38px; }
body[data-level] .a1-village-row .a1-village-art { width: 54px; height: 38px; color: #17675d; }
body[data-level] .a1-village-seals { display: flex; justify-content: center; gap: 12px; margin: 15px 0 3px; }
body[data-level] .a1-village-seals span { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #9fb9aa; border-radius: 50%; color: #60806a; font-size: 13px; font-weight: 800; }
body[data-level] .a1-village-seals span.is-earned { border-color: #c7965c; background: #f8e8c6; color: #6d4b2b; box-shadow: 0 0 0 4px rgba(199, 150, 92, .12); }
body[data-level] .a1-village-achievements { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
body[data-level] .a1-village-achievements div { display: grid; gap: 4px; padding: 16px; border: 1px solid #d6e3d7; border-radius: 14px; background: #f5f8f2; }
body[data-level] .a1-village-achievements strong { color: #17675d; font-size: 23px; }
body[data-level] .a1-village-achievements span { color: #53685b; font-size: 13px; }
body[data-level][data-theme="dark"] .a1-village-card { border-color: #3b5748; background: linear-gradient(155deg, #23372e, #1c2c27); color: #f3f1e9; }
body[data-level][data-theme="dark"] .a1-village-card h2, body[data-level][data-theme="dark"] .a1-village-card h3, body[data-level][data-theme="dark"] .a1-village-question legend, body[data-level][data-theme="dark"] .a1-village-question > strong { color: #f3f1e9; }
body[data-level][data-theme="dark"] .a1-village-card .a1-village-art, body[data-level][data-theme="dark"] .a1-today-card .a1-village-art, body[data-level][data-theme="dark"] .a1-village-example, body[data-level][data-theme="dark"] .a1-village-kicker { color: #a8dec7; }
body[data-level][data-theme="dark"] .a1-village-note, body[data-level][data-theme="dark"] .a1-village-speak p { color: #bdcfc0; }
body[data-level][data-theme="dark"] .a1-village-option, body[data-level][data-theme="dark"] .a1-village-listen, body[data-level][data-theme="dark"] .a1-village-review, body[data-level][data-theme="dark"] .a1-village-speak { border-color: #4b6655; background: #294036; color: #f3f1e9; }
body[data-level][data-theme="dark"] .a1-village-passage { background: #3a3329; color: #f3f1e9; }

/* Two short grammar games take the place of the usual multiple-choice stop. */
body[data-level] .a1-grammar-game { max-width: 570px; padding: clamp(20px, 5vw, 32px); }
body[data-level] .a1-grammar-game h2 { margin: 8px 0 6px; font-size: clamp(27px, 6vw, 38px); }
body[data-level] .a1-game-rule { margin: 0; color: #52695e; font-size: 15px; line-height: 1.45; }
body[data-level] .a1-game-progress { display: flex; gap: 7px; margin: 20px 0 13px; }
body[data-level] .a1-game-progress span { flex: 1; height: 7px; border-radius: 999px; background: #dce5da; }
body[data-level] .a1-game-progress span.is-current { background: #e8aa56; }
body[data-level] .a1-game-progress span.is-done { background: #268a69; }
body[data-level] .a1-game-stamp-scene, body[data-level] .a1-game-bridge-scene { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 20px); min-height: 190px; padding: 35px 14px 18px; border: 2px solid #d7ad75; border-radius: 21px; background: linear-gradient(155deg, #fff5dc, #f6dfba); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .48); }
body[data-level] .a1-game-scene-label { position: absolute; top: 15px; left: 18px; color: #79522e; font-size: 12px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
body[data-level] .a1-game-stamp-scene > strong, body[data-level] .a1-game-bridge-line > strong { color: #233e37; font-size: clamp(20px, 6vw, 28px); line-height: 1.1; }
body[data-level] .a1-game-arrow { color: #ac7043; font-size: 26px; font-weight: 700; }
body[data-level] .a1-game-stamp-target { display: grid; place-items: center; gap: 3px; min-width: 100px; min-height: 85px; padding: 10px; border: 2px dashed #ad7546; border-radius: 13px; background: #fffdf5; color: #825328; transform: rotate(3deg); }
body[data-level] .a1-game-stamp-target span { font-size: 11px; font-weight: 900; letter-spacing: .14em; }
body[data-level] .a1-game-stamp-target strong { color: #253d35; font-size: clamp(21px, 6vw, 29px); }
body[data-level] .a1-game-stamp-scene.is-solved .a1-game-stamp-target { border-style: solid; border-color: #228562; transform: rotate(-4deg); animation: a1-game-stamp .35s ease-out both; }
body[data-level] .a1-game-bridge-scene { min-height: 185px; border-color: #83aec0; background: linear-gradient(155deg, #edf8f6, #d6eaf0); }
body[data-level] .a1-game-bridge-scene .a1-game-scene-label { color: #285d70; }
body[data-level] .a1-game-bridge-line { display: flex; align-items: center; justify-content: center; gap: clamp(5px, 2vw, 12px); width: 100%; }
body[data-level] .a1-game-bridge-line > strong { flex: 1; min-width: 0; padding: 15px 3px; border: 1px solid #a9c9c4; border-radius: 12px; background: #fffdf5; text-align: center; }
body[data-level] .a1-game-bridge-gap { display: grid; flex: 0 0 72px; place-items: center; height: 58px; border: 2px dashed #447899; border-radius: 11px; background: #fdf8e9; color: #285d70; font-size: 21px; font-weight: 850; }
body[data-level] .a1-game-bridge-scene.is-solved .a1-game-bridge-gap { border-style: solid; border-color: #1b8060; background: #1b8060; color: white; animation: a1-game-bridge .35s ease-out both; }
body[data-level] .a1-game-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 17px; }
body[data-level] .a1-game-choice { min-height: 64px; padding: 10px; border: 2px solid #a9c8b8; border-radius: 14px; background: #fffefa; color: #21483b; box-shadow: 0 4px 0 #d8e3d6; cursor: pointer; font: inherit; font-size: clamp(19px, 5vw, 24px); font-weight: 850; }
body[data-level] .a1-game-choice:hover { border-color: #17675d; transform: translateY(-2px); }
body[data-level] .a1-game-choice:focus-visible { outline: 3px solid #eb9d4b; outline-offset: 3px; }
body[data-level] .a1-game-choice.is-correct, body[data-level] .a1-game-choice.is-correct:disabled { border-color: #136748; background: #21865f; color: white; box-shadow: 0 4px 0 #10573e; opacity: 1; }
body[data-level] .a1-game-choice.is-wrong { border-color: #a33e36; background: #c84b3e; color: white; box-shadow: 0 4px 0 #96352f; }
body[data-level] .a1-grammar-game .a1-village-feedback { margin: 16px 0 8px; }
body[data-level] .a1-grammar-game .native-main-action { margin-top: 8px; }
body[data-level][data-theme="dark"] .a1-game-rule { color: #c0d4c6; }
body[data-level][data-theme="dark"] .a1-game-stamp-scene { border-color: #b98e55; background: linear-gradient(155deg, #5b452b, #403a2e); }
body[data-level][data-theme="dark"] .a1-game-bridge-scene { border-color: #4d8f9a; background: linear-gradient(155deg, #244753, #243b44); }
body[data-level][data-theme="dark"] .a1-game-scene-label, body[data-level][data-theme="dark"] .a1-game-bridge-scene .a1-game-scene-label { color: #f6d7a0; }
body[data-level][data-theme="dark"] .a1-game-stamp-scene > strong, body[data-level][data-theme="dark"] .a1-game-bridge-line > strong, body[data-level][data-theme="dark"] .a1-game-stamp-target strong { color: #203a33; }
body[data-level][data-theme="dark"] .a1-game-choice { border-color: #5b8b79; background: #294036; color: #f5f5e9; box-shadow: 0 4px 0 #192c24; }
body[data-level][data-theme="dark"] .a1-game-choice.is-correct:disabled { background: #21865f; color: white; }
body[data-level][data-theme="dark"] .a1-game-choice.is-wrong { background: #a33e36; color: white; }
@keyframes a1-game-stamp { 0% { transform: rotate(8deg) scale(1.17); } 100% { transform: rotate(-4deg) scale(1); } }
@keyframes a1-game-bridge { 0% { transform: scaleX(.65); } 100% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { body[data-level] .a1-game-stamp-scene.is-solved .a1-game-stamp-target, body[data-level] .a1-game-bridge-scene.is-solved .a1-game-bridge-gap { animation: none; } }

/* One board per guided badge. The board is a map, not another lesson menu. */
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .home-view { display: block; min-height: 0; padding-block: 28px 48px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .native-home-intro { display: block; max-width: 760px; margin: 0 auto 17px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .native-home-intro span,
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .native-home-intro p,
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .home-intro,
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .focus-card,
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .home-aside,
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .about-details { display: none; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .native-home-intro h1 { margin: 0; font-size: clamp(30px, 5vw, 42px); letter-spacing: -.045em; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .native-today-content,
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .native-journey { display: block; max-width: 760px; margin-inline: auto; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"])[data-view="path"] .native-path { display: block; max-width: 850px; min-height: 0; padding-block: 28px 60px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .native-path-list { display: grid; gap: 22px; max-width: 760px; margin-inline: auto; overflow: visible; border: 0; background: transparent; box-shadow: none; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .native-path-summary { display: flex; justify-content: space-between; max-width: 760px; margin: 0 auto 16px; color: #60766a; font-size: 13px; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .native-path-summary strong { color: #173f39; }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .native-path .native-page-subtitle { display: none; }

.badge-map { --board-ink: #203b36; --board-muted: #66786e; --board-gold: #b58447; --board-cream: #fffaf0; color: var(--board-ink); }
.badge-map-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.badge-map-eyebrow { color: #8c683a; font-size: 11px; font-weight: 800; letter-spacing: .17em; }
.badge-map-heading h2 { margin: 3px 0 0; color: #203b36; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(29px, 5vw, 42px); font-weight: 600; letter-spacing: -.04em; }
.badge-map-count { flex: 0 0 auto; padding: 8px 11px; border: 1px solid #cbd9c9; border-radius: 999px; background: #f2f6ef; color: #285b4d; font-size: 12px; font-weight: 750; }
.badge-map-board { padding: clamp(8px, 2vw, 14px); border: 2px solid #2a4e45; border-radius: 24px; background: linear-gradient(145deg, #2d5b4f, #15382f); box-shadow: 0 18px 42px rgba(18, 52, 42, .16), inset 0 0 0 3px rgba(221, 188, 128, .27); }
.badge-board-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: clamp(3px, .8vw, 7px); aspect-ratio: 1 / 1; }
.badge-board-tile, .badge-board-road { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 3px; border-radius: clamp(8px, 1.4vw, 14px); text-align: center; }
.badge-board-tile { overflow: hidden; border: 1px solid #d9dfd3; background: #f9f8f1; color: #31544a; font: inherit; }
.badge-board-tile.is-done { border-color: #4c8970; background: #2c6556; color: #f8f5e8; }
.badge-board-tile.is-locked { border-color: #d6d8d0; background: #ebede7; color: #89958b; }
.badge-board-tile.is-active { z-index: 3; border: 2px solid #9d6a31; background: linear-gradient(155deg, #fff3d3, #f4dfac); color: #3b4b36; box-shadow: 0 0 0 3px rgba(239, 204, 125, .5), 0 6px 14px rgba(16, 42, 33, .2); cursor: pointer; animation: board-awake 2.8s ease-in-out infinite; }
.badge-board-tile.is-active:focus-visible, .badge-map-cta:focus-visible, .badge-atlas-tile.is-active:focus-visible { outline: 3px solid #e3af55; outline-offset: 3px; }
.badge-board-icon { display: grid; place-items: center; width: clamp(20px, 3.5vw, 33px); height: clamp(20px, 3.5vw, 33px); margin-bottom: 2px; }
.badge-board-icon svg { width: 100%; height: 100%; }
.badge-board-tile strong { display: block; max-width: 100%; font-size: clamp(10px, 1.35vw, 11px); font-weight: 850; letter-spacing: .06em; line-height: 1.08; }
.badge-board-tile small { display: -webkit-box; max-width: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: clamp(9px, 1.15vw, 10px); font-weight: 620; line-height: 1.1; }
.badge-board-check { position: absolute; top: 3px; right: 5px; color: #e7c984; font-size: 10px; font-weight: 900; }
.badge-board-pawn { position: absolute; top: 3px; left: 3px; display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid #d9b46b; border-radius: 50%; background: #285648; color: #fbe7b8; font-size: 12px; line-height: 1; box-shadow: 0 2px 5px rgba(23, 50, 40, .25); animation: board-pawn-arrive .5s ease-out both; }
.badge-board-road { border: 1px solid rgba(244, 229, 188, .23); background: rgba(241, 237, 211, .07); }
.badge-board-road i { width: 48%; height: 2px; border-radius: 2px; background: rgba(244, 229, 188, .68); }
.badge-board-road.is-vertical i { transform: rotate(90deg); }
.badge-board-center { z-index: 2; grid-row: 2 / 4; grid-column: 2 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #d6bb83; border-radius: clamp(12px, 2vw, 20px); background: radial-gradient(circle at 50% 20%, #fffefa 0%, #f0e7d0 80%); box-shadow: inset 0 0 0 5px #f8f4e9, inset 0 0 0 6px #c8b184; }
.badge-board-center::before { position: absolute; width: 62%; aspect-ratio: 1; border: 1px solid rgba(183, 148, 91, .47); border-radius: 50%; content: ''; }
.badge-board-center span, .badge-board-center small { z-index: 1; color: #7a6342; font-size: clamp(8px, 1.25vw, 11px); font-weight: 800; letter-spacing: .2em; }
.badge-board-center strong { z-index: 1; margin: 1px 0; color: #24483e; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(46px, 8vw, 94px); font-weight: 500; line-height: .95; }
.badge-board-center i { position: absolute; bottom: 9%; color: #a57b41; font-size: 20px; font-style: normal; }
.badge-map-next { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 18px; margin-top: 12px; padding: 18px 20px; border: 1px solid #d5dfd3; border-radius: 18px; background: #fffefa; box-shadow: 0 8px 23px rgba(32, 59, 54, .06); }
.badge-map-next-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; color: #9b6b34; font-size: 10px; font-weight: 850; letter-spacing: .18em; }
.badge-map-next-label i { width: 7px; height: 7px; border-radius: 50%; background: #cf9752; box-shadow: 0 0 0 4px #faeedb; }
.badge-map-next h3 { grid-column: 1; margin: 0; color: #203b36; font-size: clamp(19px, 3vw, 25px); line-height: 1.1; }
.badge-map-next p { grid-column: 1; margin: 0; color: #677a70; font-size: 13px; }
.badge-map-cta { grid-column: 2; grid-row: 2 / 4; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 49px; padding: 11px 17px; border: 1px solid #245a4d; border-radius: 11px; background: #20594b; color: #fff9e9; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
.badge-map-cta span { color: #f3cb87; font-size: 18px; }
.badge-atlas-link { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; margin-top: 15px; padding: 12px 4px; border: 0; border-bottom: 1px solid #d4dfd4; background: transparent; color: #547165; font: inherit; font-size: 13px; cursor: pointer; }
.badge-game-invite { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 11px; width: 100%; max-width: 480px; margin: 15px auto 0; padding: 12px 16px; border: 2px solid #bb7748; border-radius: 15px; background: #fff1d9; color: #593b2b; cursor: pointer; font: inherit; text-align: left; }
.badge-game-invite > span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e68d4f; color: white; font-size: 19px; }
.badge-game-invite strong, .badge-game-invite small { display: block; }
.badge-game-invite strong { font-size: 14px; }
.badge-game-invite small { margin-top: 2px; color: #805e46; font-size: 12px; }
.badge-game-invite > span:last-child { color: #a85536; font-size: 22px; }
.badge-game-invite:hover { border-color: #98522d; background: #ffe7c3; }
.badge-game-invite:focus-visible { outline: 3px solid #2b5cbd; outline-offset: 3px; }
body[data-theme="dark"] .badge-game-invite { border-color: #bd8b61; background: #483a2c; color: #fff0d9; }
body[data-theme="dark"] .badge-game-invite small { color: #e9c9ad; }
.badge-atlas-link strong { color: #20594b; }
.badge-atlas { padding: 18px 20px; border: 1px solid #d5dfd3; border-radius: 19px; background: #fffefa; }
.badge-atlas-line { position: relative; display: flex; justify-content: space-between; gap: 8px; margin-top: 15px; }
.badge-atlas-line::before { position: absolute; top: 24px; right: 3%; left: 3%; height: 2px; background: #d4d4b9; content: ''; }
.badge-atlas-tile { z-index: 1; display: grid; place-items: center; gap: 1px; flex: 1; min-width: 0; max-width: 82px; min-height: 58px; border: 1px solid #d4d9cf; border-radius: 12px; background: #f1f1e9; color: #7d8b7c; font: inherit; text-align: center; }
.badge-atlas-tile.is-done { border-color: #4d8a71; background: #2c6556; color: #fff9e9; }
.badge-atlas-tile.is-active { border: 2px solid #a87639; background: #f7e4b7; color: #294a3d; box-shadow: 0 0 0 3px rgba(235, 195, 119, .35); cursor: pointer; }
.badge-atlas-number { font-family: Georgia, 'Times New Roman', serif; font-size: 22px; line-height: 1; }
.badge-atlas-tile small { font-size: 10px; font-weight: 700; }
.badge-atlas-ahead { display: block; margin-top: 11px; color: #6e806f; font-size: 12px; text-align: right; }
.badge-map-catchup { padding: 8px 14px; border: 1px solid #d5dfd3; border-radius: 12px; background: #fffefa; }
.badge-map-catchup summary { cursor: pointer; color: #335c4c; font-size: 13px; font-weight: 700; }
.badge-map-catchup div { display: grid; gap: 5px; margin-top: 9px; }
.badge-map-catchup button { padding: 10px 4px; border: 0; border-bottom: 1px solid #e4e8df; background: transparent; color: #285747; font: inherit; text-align: left; cursor: pointer; }
@keyframes board-awake { 50% { box-shadow: 0 0 0 5px rgba(239, 204, 125, .72), 0 7px 18px rgba(16, 42, 33, .26); } }
@keyframes board-pawn-arrive { from { opacity: 0; transform: translateY(-10px) scale(.65); } to { opacity: 1; transform: translateY(0) scale(1); } }

body[data-theme="dark"] .badge-map { --board-ink: #f5f0e5; --board-muted: #bbd0c1; }
body[data-theme="dark"] .badge-map-heading h2,
body[data-theme="dark"] .badge-map-next h3,
body[data-theme="dark"] .native-path-summary strong { color: #f5f0e5; }
body[data-theme="dark"] .badge-map-count,
body[data-theme="dark"] .badge-map-next,
body[data-theme="dark"] .badge-atlas,
body[data-theme="dark"] .badge-map-catchup { border-color: #425b4d; background: #1d302b; color: #e8eddf; }
body[data-theme="dark"] .badge-map-next p,
body[data-theme="dark"] .badge-map-catchup summary,
body[data-theme="dark"] .badge-atlas-link { color: #bcd0c1; }
body[data-theme="dark"] .badge-atlas-link strong { color: #c7e6c9; }
body[data-theme="dark"] .badge-map-board { border-color: #7a9d80; background: linear-gradient(145deg, #21473e, #102a25); }
body[data-theme="dark"] .badge-board-center { border-color: #887b58; background: radial-gradient(circle at 50% 20%, #354238, #25362f 85%); box-shadow: inset 0 0 0 5px #2c3c33, inset 0 0 0 6px #7c7858; }
body[data-theme="dark"] .badge-board-center strong { color: #e8e2c8; }
body[data-theme="dark"] .badge-board-center span,
body[data-theme="dark"] .badge-board-center small { color: #dac99f; }
body[data-theme="dark"] .badge-board-tile.is-locked { border-color: #4c6254; background: #2b3c33; color: #91a899; }
body[data-theme="dark"] .badge-board-tile.is-active { border-color: #d6ab6a; background: linear-gradient(155deg, #f3dba9, #d6b675); color: #26392d; }
@media (max-width: 600px) {
  body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .home-view { padding-block: 17px 28px; }
  body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .native-home-intro { margin-bottom: 11px; }
  .badge-map-heading { margin-bottom: 9px; }
  .badge-map-board { border-radius: 18px; }
  .badge-map-next { grid-template-columns: 1fr; padding: 15px 16px; }
  .badge-map-next-label, .badge-map-next h3, .badge-map-next p, .badge-map-cta { grid-column: 1; grid-row: auto; }
  .badge-map-cta { margin-top: 9px; }
  .badge-atlas { padding: 15px 12px; }
  .badge-atlas-line { gap: 4px; }
  .badge-atlas-tile { min-height: 53px; }
}
@media (prefers-reduced-motion: reduce) { .badge-board-tile.is-active, .badge-board-pawn { animation: none; } }
body[data-level][data-theme="dark"] .a1-village-option.is-correct { background: #255d3f; }
body[data-level][data-theme="dark"] .a1-village-option.is-wrong { background: #713935; }
body[data-level][data-theme="dark"] .a1-mission-stages span { background: #324b3e; color: #d1dfd0; }

/* The board is a playable place: vivid spaces, a visible player token and one clear move. */
.badge-map { --game-ink: #15243b; --game-blue: #2454d4; --game-yellow: #ffcf54; --game-coral: #ef654d; --game-paper: #fffaf0; width: 100%; max-width: 480px; margin-inline: auto; color: var(--game-ink); }
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .native-home-intro,
body:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"]) .native-journey { max-width: 480px; }
.badge-map-heading { margin-bottom: 12px; }
.badge-map-eyebrow { color: #2856ae; }
.badge-map-heading h2 { color: var(--game-ink); font-family: inherit; font-size: clamp(28px, 5vw, 38px); font-weight: 850; letter-spacing: -.065em; line-height: 1.05; }
.badge-map-story { margin: -2px 0 13px; color: #40516a; font-size: 14px; font-weight: 620; line-height: 1.3; }
.badge-map[data-district="town"], .badge-map[data-district="civic"], .badge-map[data-district="justice"] { --district-top: #3973df; --district-bottom: #254db9; --district-edge: #143a94; }
.badge-map[data-district="school"], .badge-map[data-district="media"] { --district-top: #7958c6; --district-bottom: #4b389d; --district-edge: #392778; }
.badge-map[data-district="health"] { --district-top: #20a6a7; --district-bottom: #147780; --district-edge: #0a5b66; }
.badge-map[data-district="home"], .badge-map[data-district="park"] { --district-top: #43a578; --district-bottom: #277b69; --district-edge: #176452; }
.badge-map[data-district="market"], .badge-map[data-district="food"] { --district-top: #ec965c; --district-bottom: #cc634e; --district-edge: #9f4439; }
.badge-map[data-district="work"], .badge-map[data-district="transit"], .badge-map[data-district="travel"] { --district-top: #3b83c6; --district-bottom: #2157a5; --district-edge: #174583; }
.badge-map-count { border: 2px solid #204daf; background: #eef4ff; color: #173f97; font-weight: 850; }
.badge-map-board { border: 4px solid var(--district-edge, #143a94); border-radius: 25px; background: linear-gradient(145deg, var(--district-top, #3973df), var(--district-bottom, #254db9)); box-shadow: 0 9px 0 var(--district-edge, #183983), 0 20px 38px rgba(27, 59, 138, .22); }
.badge-board-tile strong { letter-spacing: 0; }
.badge-board-grid { gap: clamp(4px, 1vw, 8px); }
.badge-board-tile { border: 2px solid #172e61; border-radius: 12px; background: #fffdf5; color: #1e3763; box-shadow: 0 3px 0 rgba(15, 42, 101, .25); }
.badge-board-tile::before { position: absolute; inset: 0 0 auto; height: 22%; background: #69b9ec; content: ''; }
.badge-board-tile.is-words::before { background: #48cbaa; }
.badge-board-tile.is-sentences::before { background: #fa8975; }
.badge-board-tile.is-grammar::before { background: #b795f0; }
.badge-board-tile.is-badge::before { background: #ffce56; }
.badge-board-tile.is-mission::before { background: #7ab4ee; }
.badge-board-tile.is-done { border-color: #183970; background: #d7f5e7; color: #153d57; }
.badge-board-tile.is-done::before { background: #27b58c; }
.badge-board-tile.is-locked { border-color: #9aafca; background: #e7edf5; color: #61758f; box-shadow: none; }
.badge-board-tile.is-locked::before { background: #b9c7d9; }
.badge-board-tile.is-locked.is-words { background: #e0f2ec; }
.badge-board-tile.is-locked.is-words::before { background: #80c9b6; }
.badge-board-tile.is-locked.is-sentences { background: #fff0e9; }
.badge-board-tile.is-locked.is-sentences::before { background: #eeb2a2; }
.badge-board-tile.is-locked.is-grammar { background: #f0eafb; }
.badge-board-tile.is-locked.is-grammar::before { background: #bca5e0; }
.badge-board-tile.is-locked.is-badge { background: #fff1c9; }
.badge-board-tile.is-locked.is-badge::before { background: #e8c778; }
.badge-board-tile.is-locked.is-mission { background: #e8f1fe; }
.badge-board-tile.is-locked.is-mission::before { background: #9fbee5; }
.badge-board-tile.is-active { z-index: 4; border: 3px solid #193773; background: linear-gradient(170deg, #fff4bf 6%, #ffd36a 100%); color: #102348; box-shadow: 0 0 0 4px #fffaf0, 0 0 0 8px #f77756, 0 10px 17px rgba(25, 42, 99, .34); animation: game-tile-beat 2.7s ease-in-out infinite; }
.badge-board-tile.is-active::before { height: 20%; background: #ef654d; }
.badge-board-tile.is-active:hover, .badge-board-tile.is-active:active { transform: translateY(-2px); }
.badge-board-icon { z-index: 1; margin-top: 5px; color: currentColor; }
.badge-board-tile strong, .badge-board-tile small { z-index: 1; }
.badge-board-tile.is-active strong { font-weight: 900; }
.badge-board-check { z-index: 2; top: 3px; right: 5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #176954; color: white; font-size: 12px; }
.badge-board-pawn { z-index: 3; top: -5px; left: -5px; width: 30px; height: 30px; border: 2px solid #153a8e; border-radius: 50%; background: #fff; color: #173e91; font-size: 8px; font-weight: 950; letter-spacing: -.06em; box-shadow: 0 3px 0 #153a8e; }
.badge-board-play { z-index: 2; position: absolute; right: 0; bottom: 0; left: 0; padding: 3px 0; background: #163d9e; color: white; font-size: clamp(8px, 1.4vw, 10px); font-weight: 950; letter-spacing: .04em; line-height: 1; }
.badge-board-road { border: 1px solid rgba(236, 245, 255, .58); background: rgba(255, 255, 255, .16); }
.badge-board-road i { background: rgba(255, 243, 207, .85); }
.badge-board-center { position: relative; border: 3px solid #2147a8; border-radius: 18px; background: radial-gradient(circle at 50% 20%, #fff8e7, #f8e8c9); box-shadow: inset 0 0 0 4px #fffaf0, 0 5px 0 #173b9b; }
.badge-board-center::before { inset: 4%; width: auto; aspect-ratio: auto; border: 1px solid rgba(33, 71, 168, .2); border-radius: 13px; }
.badge-board-center .badge-board-center-label { position: absolute; top: 8%; color: #20459d; font-size: clamp(6px, 1.2vw, 9px); font-weight: 950; letter-spacing: .08em; }
.badge-board-crew { z-index: 1; position: absolute; top: 20%; width: 95%; height: 55%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 5px 5px rgba(48, 57, 68, .15)); }
.badge-board-center strong { position: absolute; bottom: 12%; margin: 0; color: #173a87; font-family: inherit; font-size: clamp(14px, 3vw, 24px); font-weight: 900; letter-spacing: -.045em; line-height: 1; }
.badge-board-center small { position: absolute; bottom: 5%; color: #66584c; font-size: clamp(7px, 1.15vw, 10px); font-weight: 750; letter-spacing: .02em; }
.badge-map.is-reward .badge-board-center { border-color: #cb7a26; box-shadow: inset 0 0 0 4px #fffaf0, 0 0 0 3px #ffe3a6, 0 0 24px rgba(255, 199, 78, .75); }
.badge-map.is-reward .badge-board-center-label { color: #ae3a28; }
.badge-map.is-reward .badge-board-center::after { position: absolute; top: 7%; right: 8%; color: #d6902f; font-size: 17px; content: '✦'; animation: reward-spark 1.8s ease-in-out infinite; }
.badge-map-next { gap: 3px 12px; margin-top: 19px; border: 2px solid #1c47a5; border-radius: 18px; background: #fffdf7; box-shadow: 0 5px 0 #d3def7, 0 12px 22px rgba(25, 67, 148, .12); }
.badge-map-next-label { color: #214a9f; }
.badge-map-next-label i { background: #ef654d; box-shadow: 0 0 0 4px #ffe1d8; }
.badge-map-next h3 { color: #182c55; font-weight: 850; letter-spacing: -.045em; }
.badge-map-next p { color: #4b5f78; }
.badge-map-cta { min-height: 56px; border: 2px solid #861c14; border-radius: 13px; background: linear-gradient(#c8412d, #ad2e21); color: #fff; box-shadow: 0 5px 0 #7a211a, 0 11px 20px rgba(174, 55, 41, .22); font-size: 15px; font-weight: 900; }
.badge-map-cta span { color: white; font-size: 22px; }
.badge-map-cta:hover, .badge-map-cta:active { transform: translateY(2px); box-shadow: 0 3px 0 #7a211a, 0 6px 12px rgba(174, 55, 41, .2); }
.badge-map-cta:focus-visible, .badge-board-tile.is-active:focus-visible { outline: 4px solid #eb604a; outline-offset: 5px; }
.badge-atlas-link strong { color: #19479d; }
.badge-atlas-tile.is-done { border-color: #175b78; background: #2bb58e; color: #123b57; }
.badge-atlas-tile.is-active { border: 2px solid #194396; background: #ffd46a; color: #173767; box-shadow: 0 0 0 3px #f67b5c; }
@keyframes game-tile-beat { 50% { box-shadow: 0 0 0 4px #fffaf0, 0 0 0 10px #fa9277, 0 11px 19px rgba(25, 42, 99, .34); } }
@keyframes reward-spark { 50% { opacity: .4; transform: scale(1.25) rotate(12deg); } }
body[data-theme="dark"] .badge-map { --game-ink: #f8f2df; }
body[data-theme="dark"] .badge-map-eyebrow { color: #a8c2ff; }
body[data-theme="dark"] .badge-map-story { color: #d1ddf2; }
body[data-theme="dark"] .badge-map-heading h2 { color: #f8f2df; }
body[data-theme="dark"] .badge-map-count { border-color: #7da8ff; background: #213d76; color: #fff4d0; }
body[data-theme="dark"] .badge-map-board { border-color: #c1cefb; background: linear-gradient(145deg, var(--district-top, #284eae), var(--district-bottom, #182c70)); }
body[data-theme="dark"] .badge-board-center { border-color: #4974d7; background: radial-gradient(circle at 50% 20%, #fff8e7, #efd9ad); box-shadow: inset 0 0 0 4px #fffaf0, 0 5px 0 #12245a; }
body[data-theme="dark"] .badge-board-center strong { color: #173a87; }
body[data-theme="dark"] .badge-board-center .badge-board-center-label { color: #20459d; }
body[data-theme="dark"] .badge-board-center small { color: #66584c; }
body[data-theme="dark"] .badge-board-tile.is-locked { border-color: #7085a9; background: #2a3a5c; color: #c3d0e5; }
body[data-theme="dark"] .badge-board-tile.is-locked.is-words { background: #234748; }
body[data-theme="dark"] .badge-board-tile.is-locked.is-sentences { background: #503c4d; }
body[data-theme="dark"] .badge-board-tile.is-locked.is-grammar { background: #413d66; }
body[data-theme="dark"] .badge-board-tile.is-locked.is-badge { background: #594c3c; }
body[data-theme="dark"] .badge-board-tile.is-locked.is-mission { background: #294663; }
body[data-theme="dark"] .badge-board-tile.is-done { border-color: #75e0bf; background: #215e63; color: #f0fff3; }
body[data-theme="dark"] .badge-board-tile.is-active { border-color: #193773; background: linear-gradient(170deg, #fff4bf, #ffd36a); color: #102348; }
body[data-theme="dark"] .badge-map-next { border-color: #7da8ff; background: #1b2b4c; box-shadow: 0 5px 0 #101b33; }
body[data-theme="dark"] .badge-map-next h3 { color: #fff6db; }
body[data-theme="dark"] .badge-map-next p { color: #cedbf2; }

/* Every board space is a place, with its own material and silhouette. */
.badge-board-tile { --venue-sky: #e9efff; --venue-ground: #d0d9f7; --venue-ink: #243765; --venue-border: #5977b3; background: linear-gradient(180deg, var(--venue-sky) 0 65%, var(--venue-ground) 65% 100%); color: var(--venue-ink); border-color: var(--venue-border); }
.badge-board-tile::before { inset: 0 0 auto; height: 7px; background: var(--venue-border); }
.badge-board-tile.is-venue-gate { --venue-sky: #daf4f0; --venue-ground: #a6d7c9; --venue-ink: #195a53; --venue-border: #368c78; }
.badge-board-tile.is-venue-school { --venue-sky: #f1ecff; --venue-ground: #d7c7f4; --venue-ink: #503486; --venue-border: #8163b4; }
.badge-board-tile.is-venue-classroom { --venue-sky: #e6f0e8; --venue-ground: #a6cbb8; --venue-ink: #205744; --venue-border: #3b8467; }
.badge-board-tile.is-venue-lab { --venue-sky: #e8efff; --venue-ground: #c2d4fa; --venue-ink: #244e8d; --venue-border: #4f78c2; }
.badge-board-tile.is-venue-books { --venue-sky: #fff0d6; --venue-ground: #f6cf91; --venue-ink: #784621; --venue-border: #b66d36; }
.badge-board-tile.is-venue-library { --venue-sky: #f9e9d9; --venue-ground: #e5baa0; --venue-ink: #744129; --venue-border: #ad6545; }
.badge-board-tile.is-venue-food { --venue-sky: #fff1e8; --venue-ground: #ffc4aa; --venue-ink: #823b2e; --venue-border: #d56a50; }
.badge-board-tile.is-venue-media { --venue-sky: #efeaff; --venue-ground: #cbbafa; --venue-ink: #563588; --venue-border: #8d67c5; }
.badge-board-tile.is-venue-workshop { --venue-sky: #f7eddf; --venue-ground: #d7bb98; --venue-ink: #624729; --venue-border: #96714a; }
.badge-board-tile.is-venue-transit { --venue-sky: #dfeeff; --venue-ground: #9fc5ed; --venue-ink: #25517e; --venue-border: #4d87bb; }
.badge-board-tile.is-venue-market { --venue-sky: #fff0d9; --venue-ground: #ffd29c; --venue-ink: #77421c; --venue-border: #c17a32; }
.badge-board-tile.is-venue-health { --venue-sky: #effcff; --venue-ground: #b3e4ea; --venue-ink: #145c68; --venue-border: #e36665; }
.badge-board-tile.is-venue-park { --venue-sky: #e9f7dc; --venue-ground: #b7d992; --venue-ink: #3d6026; --venue-border: #6c9d49; }
.badge-board-tile.is-venue-home { --venue-sky: #fff2e5; --venue-ground: #eac4a8; --venue-ink: #73472f; --venue-border: #b67853; }
.badge-board-tile.is-venue-civic { --venue-sky: #fdf3d9; --venue-ground: #e7d290; --venue-ink: #6d5622; --venue-border: #ac8c37; }
.badge-board-tile.is-venue-justice { --venue-sky: #eceefa; --venue-ground: #b9c3e3; --venue-ink: #3c4d77; --venue-border: #6278a7; }
.badge-board-tile.is-venue-police { --venue-sky: #e5edff; --venue-ground: #afc3f2; --venue-ink: #273e79; --venue-border: #4265ad; }
.badge-board-tile.is-venue-jail { --venue-sky: #eef0f2; --venue-ground: #a9b4bd; --venue-ink: #35434e; --venue-border: #60707e; }
.badge-board-tile.is-venue-market::before { background: repeating-linear-gradient(90deg, #bd5e4d 0 7px, #fff7e9 7px 14px); }
.badge-board-tile.is-venue-health::before { background: repeating-linear-gradient(90deg, #f7ffff 0 15px, #e36665 15px 23px, #f7ffff 23px 39px); }
.badge-board-tile.is-venue-jail::before { background: repeating-linear-gradient(90deg, #536471 0 4px, #cad1d8 4px 10px); }
.badge-board-icon { width: clamp(26px, 3.5vw, 34px); height: clamp(26px, 3.5vw, 34px); margin: 7px 0 1px; }
.badge-board-tile[class*="is-venue-"]:is(.is-locked, .is-done, .is-active),
body[data-theme="dark"] .badge-board-tile[class*="is-venue-"]:is(.is-locked, .is-done, .is-active) { background: linear-gradient(180deg, var(--venue-sky) 0 65%, var(--venue-ground) 65% 100%); color: var(--venue-ink); border-color: var(--venue-border); }
.badge-board-tile.is-locked { filter: saturate(.72); }
.badge-board-tile.is-active { filter: none; border-color: #193773; }
.badge-board-tile[class*="is-venue-"]::before,
.badge-board-tile[class*="is-venue-"]:is(.is-locked, .is-done, .is-active)::before { height: 7px; background: var(--venue-border); }
.badge-board-tile.is-venue-market::before { background: repeating-linear-gradient(90deg, #bd5e4d 0 7px, #fff7e9 7px 14px); }
.badge-board-tile.is-venue-health::before { background: repeating-linear-gradient(90deg, #f7ffff 0 15px, #e36665 15px 23px, #f7ffff 23px 39px); }
.badge-board-tile.is-venue-jail::before { background: repeating-linear-gradient(90deg, #536471 0 4px, #cad1d8 4px 10px); }
.badge-board-tile.is-active::before { background: #ed664d; }
body[data-theme="dark"] .badge-map-next-label { color: #ffd891; }
body[data-theme="dark"] .badge-map-cta { border-color: #f3a28d; background: linear-gradient(#c8412d, #ad2e21); color: white; }
@media (max-width: 600px) {
  .badge-map-board { border-width: 3px; }
  .badge-board-center .badge-board-center-label { top: 7%; }
  .badge-board-tile.is-active { box-shadow: 0 0 0 3px #fffaf0, 0 0 0 6px #f77756, 0 8px 12px rgba(25, 42, 99, .3); }
  .badge-map-next { padding: 15px 16px 18px; }
  .badge-map-cta { width: 100%; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .badge-board-tile.is-active, .badge-map.is-reward .badge-board-center::after { animation: none; } }
body[data-level][data-theme="dark"] .a1-mission-stages span.is-current { background: #277863; color: #fff; }
body[data-level][data-theme="dark"] .a1-mission-stages span.is-done { background: #326a4c; color: #fff; }
body[data-level][data-theme="dark"] .a1-village-seals span { border-color: #638976; color: #c8dbc9; }
body[data-level][data-theme="dark"] .a1-village-seals span.is-earned { border-color: #c7965c; background: #6b5031; color: #fff3d8; }
body[data-level][data-theme="dark"] .a1-village-achievements div { border-color: #496955; background: #263d32; }
body[data-level][data-theme="dark"] .a1-village-achievements strong { color: #a8dec7; }
body[data-level][data-theme="dark"] .a1-village-achievements span { color: #bdcfc0; }
@media (max-width: 520px) {
  body[data-level] .a1-village-card { padding: 20px 17px; }
  body[data-level] .a1-today-card .a1-village-art { width: 168px; height: 92px; }
}

.badge-map-roll { grid-column: 1 / -1; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; width: 100%; min-height: 70px; margin-top: 10px; padding: 9px 16px; border: 2px solid #861c14; border-radius: 14px; background: linear-gradient(#c8412d, #a82d23); color: #fff; box-shadow: 0 5px 0 #7a211a, 0 11px 20px rgba(174, 55, 41, .22); cursor: pointer; font: inherit; font-size: 16px; font-weight: 900; text-align: left; }
.badge-map-roll:hover, .badge-map-roll:active { transform: translateY(2px); box-shadow: 0 3px 0 #7a211a, 0 6px 12px rgba(174, 55, 41, .2); }
.badge-map-roll:focus-visible { outline: 4px solid #eb604a; outline-offset: 5px; }
.badge-map-roll:disabled { cursor: wait; }
.badge-map-roll-arrow { font-size: 26px; line-height: 1; }
.guided-word-boost { display: grid; gap: 20px; }
.guided-word-boost h2 { margin: 0; }
.guided-word-boost-prompt { padding: 22px; border-radius: 20px; background: var(--card, #fffaf2); color: var(--ink, #19342f); font-size: clamp(2rem, 7vw, 3.25rem); font-weight: 800; text-align: center; }
.guided-word-boost-choices { display: grid; gap: 12px; }
.guided-word-boost-feedback { margin: 0; font-weight: 700; }
.badge-map-die { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3px; width: 46px; height: 46px; padding: 8px; border: 2px solid #f8dbcf; border-radius: 10px; background: linear-gradient(145deg, #fff, #f4eee7); box-shadow: inset -4px -4px 0 #e2d5c9, 0 3px 0 #7a211a; transform: rotate(-8deg); }
.badge-map-die i { width: 7px; height: 7px; align-self: center; justify-self: center; border-radius: 50%; background: #ad332a; opacity: 0; }
.badge-map-die[data-face="1"] i:nth-child(5),
.badge-map-die[data-face="2"] i:nth-child(1), .badge-map-die[data-face="2"] i:nth-child(9),
.badge-map-die[data-face="3"] i:nth-child(1), .badge-map-die[data-face="3"] i:nth-child(5), .badge-map-die[data-face="3"] i:nth-child(9),
.badge-map-die[data-face="4"] i:nth-child(1), .badge-map-die[data-face="4"] i:nth-child(3), .badge-map-die[data-face="4"] i:nth-child(7), .badge-map-die[data-face="4"] i:nth-child(9),
.badge-map-die[data-face="5"] i:nth-child(1), .badge-map-die[data-face="5"] i:nth-child(3), .badge-map-die[data-face="5"] i:nth-child(5), .badge-map-die[data-face="5"] i:nth-child(7), .badge-map-die[data-face="5"] i:nth-child(9),
.badge-map-die[data-face="6"] i:nth-child(1), .badge-map-die[data-face="6"] i:nth-child(3), .badge-map-die[data-face="6"] i:nth-child(4), .badge-map-die[data-face="6"] i:nth-child(6), .badge-map-die[data-face="6"] i:nth-child(7), .badge-map-die[data-face="6"] i:nth-child(9) { opacity: 1; }
.badge-board-center .badge-board-crew { top: 17%; height: 51%; }
.badge-board-center-roll { position: absolute; z-index: 3; right: 9%; bottom: 5%; left: 9%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 5px; border: 2px solid #173b91; border-radius: 11px; background: #2354bd; color: #fff; box-shadow: 0 4px 0 #173b91; cursor: pointer; font: inherit; font-size: 13px; font-weight: 950; letter-spacing: .08em; }
.badge-map .badge-board-tile.is-active { animation: none; }
.badge-board-center-roll:not(:disabled) { animation: badge-roll-pulse 2s ease-in-out infinite; }
.badge-board-center-roll:hover, .badge-board-center-roll:active { transform: translateY(2px); box-shadow: 0 2px 0 #173b91; }
.badge-board-center-roll:hover, .badge-board-center-roll:active, .badge-map.is-rolling .badge-board-center-roll { animation: none; }
.badge-board-center-roll:focus-visible { outline: 3px solid #ec694e; outline-offset: 3px; }
.badge-board-center .badge-board-center-roll > span:last-child,
body[data-theme="dark"] .badge-board-center .badge-board-center-roll > span:last-child { color: #fff; font-size: 13px; font-weight: 950; letter-spacing: .08em; }
.badge-board-center-roll .badge-map-die { flex: 0 0 auto; width: 32px; height: 32px; padding: 5px; gap: 2px; border-radius: 7px; box-shadow: inset -3px -3px 0 #e2d5c9, 0 2px 0 #173b91; }
.badge-board-center-roll .badge-map-die i { position: static; width: 5px; height: 5px; background: #ad332a; }
.badge-map.is-rolling .badge-map-die { animation: badge-die-tumble .6s ease-in-out both; }
.badge-map-board { position: relative; }
.badge-board-traveller { position: absolute; z-index: 20; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #153a8e; border-radius: 50%; background: #fff; color: #173e91; font-size: 8px; font-weight: 950; letter-spacing: -.06em; box-shadow: 0 3px 0 #153a8e, 0 8px 15px rgba(20, 38, 84, .3); pointer-events: none; }
@keyframes badge-roll-pulse { 0%, 100% { box-shadow: 0 4px 0 #173b91, 0 0 0 0 rgba(35, 84, 189, .45); transform: scale(1); } 50% { box-shadow: 0 4px 0 #173b91, 0 0 0 8px rgba(35, 84, 189, 0); transform: scale(1.035); } }
@keyframes badge-die-tumble { 0% { transform: rotate(-8deg) scale(1); } 32% { transform: translateY(-10px) rotate(75deg) scale(1.1); } 67% { transform: translateY(-5px) rotate(210deg) scale(1.04); } 100% { transform: rotate(352deg) scale(1); } }
body[data-theme="dark"] .badge-map-roll { border-color: #f3a28d; background: linear-gradient(#c8412d, #a82d23); color: #fff; }
@media (max-width: 600px) { .badge-map-roll { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .badge-board-center-roll, .badge-map.is-rolling .badge-map-die { animation: none; } }

/* A single warm action color, softer depth, and a distinct night palette. */
.button-primary,
.native-app .native-main-action:not(:disabled),
.native-app .practice-turn .button-primary,
.native-app .practice-actions .button-primary,
body[data-level] .a1-celebration-cta,
.badge-map-cta,
.badge-map-roll,
.badge-board-center-roll {
  border: 1px solid rgba(255, 224, 187, .48);
  border-radius: 21px;
  background: linear-gradient(155deg, #f4825a 0%, #df5a49 55%, #bf3e47 100%);
  color: #fff;
  box-shadow: 0 13px 28px rgba(183, 61, 56, .25), inset 0 1px 0 rgba(255, 255, 255, .34);
  transition: transform .26s cubic-bezier(.2, .8, .2, 1), box-shadow .26s ease, filter .26s ease;
}
.button-primary:not(:disabled):hover,
.native-app .native-main-action:not(:disabled):hover,
body[data-level] .a1-celebration-cta:hover,
.badge-map-cta:hover,
.badge-map-roll:hover,
.badge-board-center-roll:hover { filter: brightness(1.08); transform: translateY(-3px); box-shadow: 0 18px 34px rgba(183, 61, 56, .3), inset 0 1px 0 rgba(255, 255, 255, .38); }
.button-primary:not(:disabled):active,
.native-app .native-main-action:not(:disabled):active,
body[data-level] .a1-celebration-cta:active,
.badge-map-cta:active,
.badge-map-roll:active,
.badge-board-center-roll:active { transform: scale(.975); box-shadow: 0 5px 14px rgba(183, 61, 56, .25), inset 0 2px 6px rgba(76, 14, 25, .16); }
.button-primary:focus-visible,
.native-main-action:focus-visible,
.a1-celebration-cta:focus-visible,
.badge-map-roll:focus-visible,
.badge-board-center-roll:focus-visible { outline: 3px solid #f5bf68; outline-offset: 4px; }
@keyframes badge-roll-pulse { 0%, 100% { box-shadow: 0 13px 28px rgba(183, 61, 56, .25), 0 0 0 0 rgba(244, 130, 90, .4); transform: scale(1); } 50% { box-shadow: 0 15px 30px rgba(183, 61, 56, .27), 0 0 0 8px rgba(244, 130, 90, 0); transform: scale(1.035); } }
body[data-level] .a1-celebration-cta { animation: a1-cta-enter .8s 1.65s both; }
body[data-level] .a1-burst-ring { animation-duration: 1.45s; }
body[data-level] .a1-burst-ring-late { border-color: #ff9877; animation-delay: .95s; }
body[data-level] .a1-burst-spark { animation-duration: 1.7s; }
body[data-level] .a1-shard { animation-duration: 1.35s; }
body[data-level] .a1-shatter-reveal { animation-duration: 1.25s; animation-delay: .95s; }
body[data-level] .a1-earned-badge { animation-duration: 1.15s; animation-delay: .8s; }
body[data-level] .a1-door-win-core { animation-duration: 1.05s; animation-delay: 1s; }
body[data-level] .a1-win-gate { position: absolute; z-index: 1; top: 17px; width: 81px; height: 181px; border: 2px solid #dca75c; background: linear-gradient(130deg, #463859, #272a4f); box-shadow: 0 12px 22px rgba(31, 23, 52, .22); }
body[data-level] .a1-win-gate-left { right: 50%; border-radius: 15px 2px 2px 15px; transform-origin: left center; animation: a1-gate-left 1.2s .45s cubic-bezier(.2, .8, .2, 1) both; }
body[data-level] .a1-win-gate-right { left: 50%; border-radius: 2px 15px 15px 2px; transform-origin: right center; animation: a1-gate-right 1.2s .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes a1-gate-left { from { transform: translateX(0) rotateY(0); opacity: 1; } to { transform: translateX(-93px) rotateY(-30deg); opacity: .25; } }
@keyframes a1-gate-right { from { transform: translateX(0) rotateY(0); opacity: 1; } to { transform: translateX(93px) rotateY(30deg); opacity: .25; } }

html:has(body[data-theme="dark"]),
body[data-theme="dark"],
body[data-theme="dark"]::before { background: #10131d; }
body[data-theme="dark"] { --paper: #10131d; --white: #1b2231; --ink: #f8f2eb; --ink-soft: #bfc9d9; --blue: #efb56a; --blue-dark: #ffcf8d; --blue-wash: #30334a; --line: #384052; color: #f8f2eb; }
body[data-theme="dark"] .site-header,
body[data-theme="dark"] .native-tab-bar { background: #171c29; border-color: #34394b; }
body[data-theme="dark"] .header-level,
body[data-theme="dark"] .header-settings { background: #293044; border-color: #586078; color: #f8f2eb; }
body[data-theme="dark"] .header-account { background: #f4ba69; color: #232234; }
body[data-view="learn"] .header-account { border: 1px solid #d9e1e8; background: transparent; color: var(--ink-soft); box-shadow: none; }
body[data-view="learn"] .header-account:hover { background: rgba(110, 125, 143, .12); }
body[data-view="learn"][data-theme="dark"] .header-account { border-color: #586078; background: transparent; color: #d6dbe6; }
body[data-view="learn"][data-theme="dark"] .header-account:hover { background: #293044; }
body[data-theme="dark"] .native-tab[aria-current="page"] { color: #f7bd73; }
body[data-theme="dark"] .button-primary,
body[data-theme="dark"] .native-main-action:not(:disabled),
body[data-theme="dark"] .practice-turn .button-primary,
body[data-theme="dark"] .practice-actions .button-primary,
body[data-theme="dark"] .a1-celebration-cta { border-color: #ffa679; background: linear-gradient(155deg, #fa9462 0%, #eb6d55 55%, #c94654 100%); color: #241b27; box-shadow: 0 14px 28px rgba(223, 87, 78, .28), inset 0 1px 0 rgba(255, 255, 255, .42); }
body[data-level][data-theme="dark"] .a1-village-card { border-color: #505069; background: linear-gradient(155deg, #242638, #1d2231); color: #f8f2eb; box-shadow: 0 22px 48px rgba(0, 0, 0, .26); }
body[data-level][data-theme="dark"] .a1-village-card .a1-village-art,
body[data-level][data-theme="dark"] .a1-village-kicker { color: #f2b766; }
body[data-level][data-theme="dark"] .a1-village-example { color: #9ed2ed; }
body[data-level][data-theme="dark"] .a1-village-note { color: #cbd0dd; }
body[data-level][data-theme="dark"] .a1-village-option { border-color: #596078; background: #30364a; color: #f8f2eb; }
body[data-level][data-theme="dark"] .a1-village-option.is-selected { border-color: #f1b568; box-shadow: inset 0 0 0 1px #f1b568; }
body[data-level][data-theme="dark"] .a1-village-option.is-correct,
body[data-level][data-theme="dark"] .a1-village-option.is-correct:disabled { border-color: #4ddb9b; background: #146d5b; color: #fff; box-shadow: 0 0 0 2px rgba(77, 219, 155, .22); opacity: 1; }
body[data-level][data-theme="dark"] .a1-village-option.is-wrong { border-color: #ff867f; background: #873c53; color: #fff; }
body[data-level][data-theme="dark"] .a1-village-card button:disabled:not(.is-correct) { opacity: .55; }
body[data-level][data-theme="dark"] .a1-village-feedback { color: #f4bd71; }
body[data-level][data-theme="dark"] .a1-village-feedback.is-wrong { color: #ff9e93; }

/* Pattern lessons put one question in focus. Teaching detail stays one tap away. */
body[data-level] .a1-grammar-card { max-width: 620px; padding: clamp(24px, 5vw, 38px); }
body[data-level] .a1-grammar-card .a1-village-kicker { font-size: 11px; letter-spacing: .12em; }
body[data-level] .a1-grammar-topic { margin: 22px 0 7px; color: #607368; font-size: 15px; font-weight: 700; }
body[data-level] .a1-grammar-card .a1-grammar-prompt { max-width: 17ch; margin: 0 0 17px; font-size: clamp(34px, 7vw, 48px); line-height: 1.12; letter-spacing: -.045em; }
body[data-level] .a1-grammar-help { margin: 0 0 22px; }
body[data-level] .a1-grammar-help summary { width: fit-content; min-height: 40px; padding: 9px 0; color: #17675d; font-size: 15px; font-weight: 750; cursor: pointer; }
body[data-level] .a1-grammar-help summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
body[data-level] .a1-grammar-help-body { margin: 8px 0 4px; padding: 16px 18px; border-radius: 14px; background: #eff4eb; }
body[data-level] .a1-grammar-help-body .a1-village-example { margin: 0 0 7px; font-size: 17px; line-height: 1.35; }
body[data-level] .a1-grammar-help-body .a1-village-note { margin: 0; font-size: 14px; line-height: 1.45; }
body[data-level] .a1-grammar-card .a1-village-options { gap: 12px; }
body[data-level] .a1-grammar-card .a1-village-option { min-height: 62px; padding: 15px 18px; font-size: 17px; line-height: 1.35; }
body[data-level] .a1-grammar-card .a1-village-feedback { margin: 17px 0 4px; }
body[data-level] .a1-grammar-card .native-main-action { margin-top: 14px; }
body[data-level][data-theme="dark"] .a1-grammar-topic { color: #bcc8d7; }
body[data-level][data-theme="dark"] .a1-grammar-help summary { color: #f2b766; }
body[data-level][data-theme="dark"] .a1-grammar-help-body { background: #30364a; }
body[data-level][data-theme="dark"] .a1-grammar-help-body .a1-village-note { color: #cbd0dd; }
@media (max-width: 560px) {
  body[data-level] .a1-grammar-card { padding: 24px 20px; }
  body[data-level] .a1-grammar-topic { margin-top: 17px; }
  body[data-level] .a1-grammar-card .a1-grammar-prompt { font-size: clamp(32px, 8vw, 40px); }
}
body[data-level][data-theme="dark"] .a1-game-choice { border-color: #596078; background: #30364a; color: #f8f2eb; box-shadow: none; }
body[data-level][data-theme="dark"] .a1-game-choice.is-correct:disabled { border-color: #4ddb9b; background: #146d5b; color: #fff; opacity: 1; }
body[data-level][data-theme="dark"] .a1-game-choice.is-wrong { border-color: #ff867f; background: #873c53; color: #fff; }
body[data-level][data-theme="dark"] .a1-route-kicker,
body[data-level][data-theme="dark"] .a1-grammar-note strong,
body[data-level][data-theme="dark"] .a1-word-info strong { color: #f2b766; }
body[data-level][data-theme="dark"] .a1-round-progress span { background: #394055; }
body[data-level][data-theme="dark"] .a1-round-progress .is-lit { background: #74a8dd; }
body[data-level][data-theme="dark"] .a1-round-progress .is-next { background: #f2b766; }
body[data-level][data-theme="dark"] .a1-flashcard-front { border-color: #566385; background: linear-gradient(145deg, #30354d, #20283d); color: #fff8f0; }
body[data-level][data-theme="dark"] .a1-flashcard-back { border-color: #9e6d68; background: linear-gradient(145deg, #583e57, #352b46); color: #fff8f0; }
body[data-level][data-theme="dark"] .a1-card-nav,
body[data-level][data-theme="dark"] .a1-info-button,
body[data-level][data-theme="dark"] .a1-card-audio { border-color: #747e9c; background: #343a54; color: #f5c77f; }
body[data-level][data-theme="dark"] .a1-word-info { border-color: #555b73; background: #252c3f; }
body[data-level][data-theme="dark"] .a1-word-info p { color: #e1e4ec; }
body[data-level][data-theme="dark"] .a1-study-again { border-color: #737b91; background: #30364a; color: #f8f2eb; }
body[data-level][data-theme="dark"] .a1-know-word { border-color: #ffa679; background: linear-gradient(155deg, #fa9462, #c94654); color: #241b27; }
body[data-level][data-theme="dark"] .a1-answer-bank { border-color: #69738e; background: #242c3e; color: #d8dfeb; }
body[data-level][data-theme="dark"] .a1-answer-bank.is-drop-target { border-color: #f2b766; background: #38354b; }
body[data-level][data-theme="dark"] .a1-token { border-color: #68718a; background: #31384d; color: #fff8f0; }
body[data-level][data-theme="dark"] .a1-grammar-note,
body[data-level][data-theme="dark"] .a1-reset { color: #cbd0dd; }
body[data-level][data-theme="dark"] .guided-speaking-result,
body[data-level][data-theme="dark"] .a1-village-listen,
body[data-level][data-theme="dark"] .a1-village-review,
body[data-level][data-theme="dark"] .a1-village-speak { border-color: #596078; background: #30364a; color: #f8f2eb; }
body[data-level][data-theme="dark"] .guided-speaking-listen,
body[data-level][data-theme="dark"] .guided-speaking-retry { color: #f2b766; }
body[data-level][data-theme="dark"] .a1-mission-stages span { background: #343b50; color: #d2d6e1; }
body[data-level][data-theme="dark"] .a1-mission-stages span.is-current { background: #f1b764; color: #242338; }
body[data-level][data-theme="dark"] .a1-mission-stages span.is-done { background: #477ba7; color: #fff; }
body.native-app[data-theme="dark"] .native-journey-panel { border-color: #50566c; background: #22293a; }
body.native-app[data-theme="dark"] .native-journey-copy,
body.native-app[data-theme="dark"] .native-journey-copy strong { color: #f8f2eb; }
body.native-app[data-theme="dark"] .native-journey-copy > span { color: #f2b766; }
body.native-app[data-theme="dark"] .native-journey-copy p { color: #cbd0dd; }
@media (prefers-reduced-motion: reduce) {
  body[data-level] .a1-burst-ring,
  body[data-level] .a1-burst-spark,
  body[data-level] .a1-shard,
  body[data-level] .a1-shatter-reveal,
  body[data-level] .a1-earned-badge,
  body[data-level] .a1-door-win-core,
  body[data-level] .a1-win-gate,
  body[data-level] .a1-celebration-cta { animation: none; }
  body[data-level] .a1-win-gate { display: none; }
}

/* A signed-in learner should see the two saves before making a sync decision. */
.account-dialog:has(.account-conflict:not([hidden])) { width: min(510px, calc(100% - 28px)); }
.account-conflict { margin-top: 12px; padding: 0; border: 0; }
.account-conflict-lead { margin: 0 0 16px; font-size: 14px; line-height: 1.5; }
.account-save-options { display: grid; gap: 12px; }
.account-save-option { padding: 16px; border: 1px solid #d9dfe9; border-radius: 17px; background: #f8f9fc; }
.account-save-option h3 { margin: 0 0 5px; font-size: 17px; }
.account-save-option p { margin: 0 0 14px; white-space: pre-line; color: #45536b; font-size: 13px; line-height: 1.55; }
.account-save-option .button { width: 100%; min-height: 52px; justify-content: space-between; }
.account-save-option:nth-child(2) { background: #f6f6fd; }
.account-save-option:nth-child(2) .button-primary { border-color: #6676c2; background: linear-gradient(150deg, #6578c9, #4658a7); color: #fff; box-shadow: 0 10px 20px rgba(66, 78, 158, .17); }
.account-backup-link { margin-top: 12px; text-align: left; }
body[data-theme="dark"] .account-dialog { border-color: #4b5367; background: #1b2231; color: #f8f2eb; }
body[data-theme="dark"] .account-dialog .dialog-close { border-color: #626b83; background: #343d53; color: #f8f2eb; }
body[data-theme="dark"] .account-status,
body[data-theme="dark"] .account-conflict p { color: #c5cad8; }
body[data-theme="dark"] .account-save-option { border-color: #545d75; background: #283145; }
body[data-theme="dark"] .account-save-option:nth-child(2) { background: #292b48; }
body[data-theme="dark"] .account-save-option p { color: #d0d7e5; }
body[data-theme="dark"] .account-save-option:nth-child(2) .button-primary { border-color: #97a9ed; background: linear-gradient(150deg, #8197e7, #586fc1); color: #151a30; }
@media (max-width: 600px) {
  .native-app .account-dialog:has(.account-conflict:not([hidden])) { padding: 21px 20px calc(17px + env(safe-area-inset-bottom)); }
  .account-save-option { padding: 14px; }
}

/* The pulsing die is the only action on the board. */
.badge-map .badge-board-tile.is-active { cursor: default; }
.badge-map .badge-board-center-roll { min-height: 56px; }

body[data-theme="dark"] .guided-word-boost-prompt { background: #30364a; color: #f8f2eb; }