:root {
  color-scheme: light;
  --ink: #102744;
  --ink-soft: #35506e;
  --paper: #f4f8fc;
  --card: #ffffff;
  --line: #dbe5ef;
  --blue: #275f9c;
  --mint: #c9f36d;
  --mint-ink: #183113;
  --shadow: 0 24px 54px rgba(24, 57, 89, 0.11);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.standalone-fixed-viewport,
html.standalone-fixed-viewport body { touch-action: pan-x pan-y; }
html.standalone-fixed-viewport input,
html.standalone-fixed-viewport textarea,
html.standalone-fixed-viewport select { font-size: 16px; }
html.dialog-open,
body.dialog-open { overflow: hidden; overscroll-behavior: none; }
body.dialog-open { position: fixed; right: 0; left: 0; width: 100%; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  color: var(--ink);
  background: radial-gradient(circle at 50% -20%, #d9edff 0, transparent 35rem), var(--paper);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
[hidden] { display: none !important; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #6daeea; outline-offset: 3px; }
.access-gate { display: grid; min-height: 100vh; place-items: center; padding: 1rem; }
.access-panel { width: min(100%, 27rem); padding: clamp(1.6rem, 7vw, 2.7rem); border: 1px solid rgba(204,217,229,.92); border-radius: 1.35rem; background: rgba(255,255,255,.92); box-shadow: var(--shadow); }
.access-panel .brand-mark { margin-bottom: 1.6rem; }
.access-panel .eyebrow { margin-bottom: .5rem; }
.access-panel h1 { margin: 0; font-size: clamp(1.6rem, 6vw, 2.1rem); line-height: 1.2; }
.access-copy { margin: .75rem 0 1.75rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; }
.access-form label { display: block; margin-bottom: .5rem; color: var(--ink-soft); font-size: .88rem; font-weight: 800; }
.access-form input { width: 100%; min-height: 3.25rem; padding: .7rem .85rem; color: var(--ink); border: 1px solid #b8d0e4; border-radius: .75rem; background: #fff; font: inherit; outline: none; }
.access-form input:focus { border-color: #5b98d2; box-shadow: 0 0 0 3px rgba(91,152,210,.18); }
.access-error { min-height: 1.35rem; margin: .55rem 0 0; color: #a34527; font-size: .88rem; font-weight: 700; }
.access-submit { width: 100%; min-height: 3.25rem; margin-top: .5rem; border-radius: .78rem; font-weight: 800; cursor: pointer; }
.button-icon { display: block; flex: 0 0 auto; width: 1.12rem; height: 1.12rem; }
.chevron-icon { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.speaker-icon path:first-child { fill: currentColor; stroke: none; }
.speaker-icon path:not(:first-child) { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }

.app-shell { width: min(100% - 2rem, 46rem); margin: 0 auto; padding: 1.25rem 0 2.5rem; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand-controls { display: flex; align-items: center; gap: .42rem; min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: .02em; }
.brand-mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .72rem; color: #fff; background: var(--ink); font-size: 1rem; }
.theme-toggle { display: grid; flex: 0 0 auto; place-items: center; width: 1.85rem; height: 1.85rem; padding: 0; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.72); cursor: pointer; }
.theme-toggle:hover { color: var(--blue); background: #eef6ff; }
.theme-icon { grid-area: 1 / 1; width: .98rem; height: .98rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.sun-icon { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.global-search { position: relative; flex: 0 1 9.5rem; min-width: 6.5rem; }
.global-search-icon { position: absolute; z-index: 1; top: 50%; left: .62rem; width: .9rem; height: .9rem; fill: none; stroke: var(--ink-soft); stroke-linecap: round; stroke-width: 1.8; transform: translateY(-50%); pointer-events: none; }
.global-search input { width: 100%; min-height: 2.05rem; padding: .38rem .55rem .38rem 1.82rem; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.78); font-size: .78rem; outline: none; }
.global-search input:focus { border-color: #5b98d2; box-shadow: 0 0 0 3px rgba(91,152,210,.16); }
.global-search-results { position: absolute; z-index: 20; top: calc(100% + .5rem); right: 0; width: min(20rem, calc(100vw - 2rem)); max-height: min(24rem, 62vh); padding: .42rem; overflow: auto; border: 1px solid var(--line); border-radius: .8rem; background: var(--card); box-shadow: 0 18px 42px rgba(16,39,68,.2); }
.global-search-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .7rem; width: 100%; padding: .62rem .65rem; color: var(--ink); border: 0; border-radius: .55rem; background: transparent; text-align: left; cursor: pointer; }
.global-search-result:hover, .global-search-result:focus-visible { background: #edf6ff; }
.global-search-result strong { overflow: hidden; font-family: Georgia, "Times New Roman", serif; font-size: .98rem; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result span { align-self: center; color: var(--ink-soft); font-size: .7rem; white-space: nowrap; }
.global-search-result small { grid-column: 1 / -1; overflow: hidden; color: var(--ink-soft); font-size: .75rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.global-search-empty { margin: .65rem; color: var(--ink-soft); font-size: .82rem; }
.chapter-trigger { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 0; max-width: 19rem; padding: .65rem .8rem; overflow: hidden; color: var(--ink); border: 1px solid var(--line); border-radius: .7rem; background: rgba(255,255,255,.8); font-size: .875rem; font-weight: 700; text-align: center; cursor: pointer; }
.chapter-trigger span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-switch { display: inline-flex; gap: .28rem; margin-top: 1.4rem; padding: .3rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(255,255,255,.68); }
.module-tab { min-width: 5.25rem; padding: .52rem .85rem; color: var(--ink-soft); border: 0; border-radius: .56rem; background: transparent; font-size: .9rem; font-weight: 800; cursor: pointer; }
.module-tab.active { color: var(--ink); background: #e5f2ff; box-shadow: 0 1px 2px rgba(24,57,89,.1); }
.unit-list-trigger { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; margin: 1rem 0 -.7rem; padding: .5rem .15rem; color: var(--blue); border: 0; background: transparent; font-size: .9rem; font-weight: 800; cursor: pointer; }
.unit-list-trigger:hover { color: #174d87; text-decoration: underline; text-underline-offset: .22rem; }

.study-area, .spelling-area { margin-top: clamp(2.5rem, 9vh, 5.25rem); }
.progress-row { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-soft); font-size: .84rem; font-weight: 700; }
.progress-track { height: .4rem; margin-top: .7rem; overflow: hidden; border-radius: 99px; background: #dbe7f0; }
#progress-fill, #spelling-progress-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3f78b6, #86b5e6); transition: width .2s ease; }

.word-card { margin-top: 1.25rem; padding: clamp(1.45rem, 5vw, 2.5rem); border: 1px solid rgba(204,217,229,.9); border-radius: 1.35rem; background: var(--card); box-shadow: var(--shadow); }
.card-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.eyebrow { margin: 0; color: var(--blue); font-size: .76rem; font-weight: 800; letter-spacing: .1em; }
.sound-button { display: inline-flex; align-items: center; justify-content: center; gap: .38rem; min-width: 5.6rem; padding: .52rem .7rem; color: var(--blue); border: 0; border-radius: .5rem; background: #eef6ff; font-size: .84rem; font-weight: 800; line-height: 1; text-align: center; cursor: pointer; }
.sound-button:hover { background: #ddefff; }
#word { width: 100%; margin: clamp(2.2rem, 9vw, 4.8rem) 0 .38rem; padding-bottom: .12em; overflow: hidden; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.7rem, 12vw, 5.75rem); line-height: 1.05; letter-spacing: -.045em; white-space: nowrap; }
.phonetic { min-height: 1.45rem; margin: 0; color: #61778d; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; }
.meaning-wrap { margin-top: clamp(2.2rem, 9vw, 4.6rem); padding-top: 1.05rem; border-top: 1px solid var(--line); }
.meaning-label { margin: 0 0 .5rem; color: var(--ink-soft); font-size: .8rem; font-weight: 800; letter-spacing: .09em; }
.meaning { margin: 0; font-size: clamp(1rem, 2.5vw, 1.15rem); line-height: 1.75; }

.voice-row { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin: 1.1rem .2rem; }
.voice-chip { padding: .43rem .7rem; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 99px; background: transparent; font-size: .82rem; font-weight: 800; cursor: pointer; }
.voice-chip.active { color: var(--ink); border-color: #b6d5f1; background: #e8f4ff; }
.repeat-toggle { display: inline-flex; align-items: center; gap: .35rem; padding: .43rem .7rem; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 99px; background: transparent; font-size: .82rem; font-weight: 800; cursor: pointer; }
.repeat-toggle.active { color: #385b12; border-color: #b4db5f; background: #effbd3; }
.voice-hint { margin-left: .35rem; color: #70859a; font-size: .78rem; }
.study-controls { display: grid; grid-template-columns: 1fr 1.25fr; gap: .7rem; }
.study-controls button { min-height: 3.3rem; border-radius: .8rem; font-weight: 800; cursor: pointer; }
.secondary-button { color: var(--ink); border: 1px solid var(--line); background: rgba(255,255,255,.72); }
.secondary-button:disabled { cursor: not-allowed; opacity: .45; }
.primary-button { color: var(--mint-ink); border: 1px solid #b4db5f; background: var(--mint); box-shadow: 0 8px 16px rgba(100, 151, 29, .16); }
.primary-button:hover { filter: brightness(.97); }

.spelling-card { margin-top: 1.25rem; padding: clamp(1.45rem, 5vw, 2.5rem); border: 1px solid #c9dfef; border-radius: 1.35rem; background: linear-gradient(145deg, #ffffff, #f4faff); box-shadow: var(--shadow); }
.spelling-tip { margin: .35rem 0 0; color: #70859a; font-size: .88rem; line-height: 1.5; }
.spelling-answer-summary { display: block; min-height: 1.35em; margin-top: clamp(1.7rem, 5vw, 2.8rem); overflow-wrap: anywhere; color: #70859a; font-family: Georgia, "Times New Roman", serif; font-size: 1.18rem; line-height: 1.3; }
.spelling-entry-surface { position: relative; min-height: 3.8rem; margin-top: .35rem; overflow: hidden; cursor: text; }
.spelling-slot-input { position: absolute; z-index: 2; inset: 0; width: 100%; padding: 0; color: transparent; caret-color: transparent; border: 0; border-radius: 0; background: transparent; font-size: 1rem; outline: none; appearance: none; -webkit-appearance: none; }
.word-slots { position: relative; z-index: 1; display: flex; align-items: flex-end; flex-wrap: nowrap; gap: .15rem; min-height: 3.8rem; overflow: hidden; color: var(--blue); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.65rem, 6.5vw, 3rem); line-height: 1; white-space: nowrap; pointer-events: none; }
.letter-slot { display: inline-grid; place-items: end center; min-width: .56em; min-height: 1.08em; border-bottom: .065em solid #7895b1; color: #163f70; text-align: center; transition: color .12s ease, border-color .12s ease; }
.letter-slot.filled { color: #23815a; border-bottom-color: transparent; }
.spelling-entry-surface:focus-within .letter-slot.current { border-bottom-color: #215f9a; box-shadow: 0 .08em 0 #215f9a; }
.word-space { display: inline-block; width: .34em; }
.word-symbol { display: inline-grid; place-items: end center; min-width: .3em; min-height: 1.08em; color: #7e98af; }
.spelling-meaning-control { margin-top: 1.45rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.meaning-toggle { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem 0; color: var(--ink-soft); border: 0; background: transparent; font-size: .9rem; font-weight: 800; cursor: pointer; }
.toggle-track { display: inline-flex; align-items: center; width: 2.35rem; height: 1.35rem; padding: .14rem; border-radius: 999px; background: #bfd0df; transition: background .16s ease; }
.toggle-track span { width: 1.07rem; height: 1.07rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,39,68,.24); transform: translateX(0); transition: transform .16s ease; }
.meaning-toggle.active { color: #315f91; }
.meaning-toggle.active .toggle-track { background: #75aee4; }
.meaning-toggle.active .toggle-track span { transform: translateX(1rem); }
.spelling-meaning { margin: .9rem 0 0; padding: .85rem .95rem; color: var(--ink); border-left: 3px solid #77a9da; border-radius: 0 .65rem .65rem 0; background: #edf6ff; font-size: 1rem; line-height: 1.65; }
.spelling-feedback { min-height: 1.45rem; margin: .75rem 0 0; color: var(--ink-soft); font-size: .9rem; font-weight: 700; }
.spelling-feedback.correct { color: #327019; }
.spelling-feedback.incorrect { color: #9a492a; }
.answer-reveal { margin: .65rem 0 0; color: var(--blue); font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; font-weight: 700; }
.spelling-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.2rem; }
.compact-button { min-height: 3rem; border-radius: .75rem; font-weight: 800; cursor: pointer; }
.spelling-controls { margin-top: 1.1rem; }
.spelling-voice-row { margin-top: 1rem; margin-bottom: 0; }

.chapter-dialog { width: min(100% - 1.5rem, 41rem); height: min(80dvh, 44rem); max-height: calc(100dvh - 1.5rem); padding: 0; overflow: hidden; color: var(--ink); border: 0; border-radius: 1rem; background: var(--card); box-shadow: 0 26px 70px rgba(0,0,0,.22); }
.chapter-dialog[open], .word-list-dialog[open] { display: flex; flex-direction: column; overscroll-behavior: contain; }
.chapter-dialog::backdrop { background: rgba(10, 29, 50, .45); backdrop-filter: blur(2px); }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.45rem 1.45rem 1.1rem; border-bottom: 1px solid var(--line); }
.dialog-header h2 { margin: .3rem 0 0; font-size: 1.4rem; }
.close-button { width: 2rem; height: 2rem; color: var(--ink-soft); border: 0; border-radius: .5rem; background: #edf4fa; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.chapter-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .7rem .7rem calc(1.1rem + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.grade-heading { margin: .75rem .8rem .25rem; color: var(--blue); font-size: .78rem; font-weight: 900; letter-spacing: .06em; }
.grade-heading:first-child { margin-top: .2rem; }
.chapter-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .9rem .8rem; color: var(--ink); border: 0; border-radius: .65rem; background: transparent; text-align: left; cursor: pointer; }
.chapter-item:hover, .chapter-item.active { background: #edf6ff; }
.chapter-item strong { display: block; font-size: .95rem; }
.chapter-item span { color: var(--ink-soft); font-size: .8rem; }
.word-list-dialog { width: min(100% - 1.5rem, 41rem); height: min(80dvh, 44rem); max-height: calc(100dvh - 1.5rem); padding: 0; overflow: hidden; color: var(--ink); border: 0; border-radius: 1rem; background: var(--card); box-shadow: 0 26px 70px rgba(0,0,0,.22); }
.word-list-dialog::backdrop { background: rgba(10, 29, 50, .45); backdrop-filter: blur(2px); }
.word-list-help { margin: 0; padding: .85rem 1.45rem; color: var(--ink-soft); border-bottom: 1px solid var(--line); font-size: .88rem; }
.word-list-tools { display: flex; align-items: end; justify-content: space-between; gap: .8rem; margin: 1rem 1.45rem .45rem; }
.word-search-label { display: block; color: var(--ink-soft); font-size: .84rem; font-weight: 800; }
.locate-current-word { flex: 0 0 auto; min-height: 2rem; padding: .3rem .65rem; color: #315f91; border: 1px solid #bdd0e1; border-radius: 999px; background: #f5faff; font-size: .78rem; font-weight: 800; cursor: pointer; }
.locate-current-word:hover, .locate-current-word:focus-visible { border-color: #5b98d2; background: #eaf5ff; }
.word-search { display: block; width: calc(100% - 2.9rem); min-height: 2.8rem; margin: 0 1.45rem .7rem; padding: .55rem .75rem; color: var(--ink); border: 1px solid #bdd0e1; border-radius: .65rem; background: #fff; font-size: .95rem; outline: none; }
.word-search:focus { border-color: #5b98d2; box-shadow: 0 0 0 3px rgba(91,152,210,.18); }
.unit-word-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .7rem .7rem calc(1.1rem + env(safe-area-inset-bottom)); scroll-padding-bottom: calc(1.1rem + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.unit-word-item { display: grid; grid-template-columns: 2.6rem 1fr; gap: .8rem; width: 100%; padding: .85rem .8rem; color: var(--ink); border: 0; border-radius: .7rem; background: transparent; text-align: left; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.unit-word-item:hover, .unit-word-item:focus-visible { background: #edf6ff; }
.unit-word-item.active { background: #eaf5ff; box-shadow: inset 3px 0 #5b98d2; }
.unit-word-item.located { animation: locate-word .8s ease; }
.unit-word-index { padding-top: .14rem; color: #7990a7; font-family: Georgia, "Times New Roman", serif; font-size: .85rem; font-weight: 700; }
.unit-word-item strong { display: block; overflow-wrap: anywhere; font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; }
.unit-word-item small { display: block; margin-top: .22rem; color: var(--ink-soft); font-size: .84rem; line-height: 1.45; }
.word-search-empty { margin: 1.1rem .8rem; color: var(--ink-soft); font-size: .95rem; }

@keyframes locate-word { 0%, 100% { background: #eaf5ff; } 50% { background: #d7edff; } }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e8f1fb;
  --ink-soft: #a8bdd2;
  --paper: #0b1421;
  --card: #121f2f;
  --line: #2b4055;
  --blue: #8bc2f6;
  --mint: #a9df55;
  --mint-ink: #142509;
  --shadow: 0 24px 54px rgba(0, 0, 0, .34);
}
html[data-theme="dark"] body { background: radial-gradient(circle at 50% -20%, #1b3a58 0, transparent 35rem), var(--paper); }
html[data-theme="dark"] .access-panel { border-color: #2b4055; background: rgba(18,31,47,.94); }
html[data-theme="dark"] .access-form input,
html[data-theme="dark"] .word-search,
html[data-theme="dark"] .global-search input { color: var(--ink); border-color: #3d5871; background: #0f1c2b; }
html[data-theme="dark"] .brand-mark { color: #0b1421; background: #dcecff; }
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .chapter-trigger,
html[data-theme="dark"] .module-switch,
html[data-theme="dark"] .secondary-button { background: rgba(18,31,47,.82); }
html[data-theme="dark"] .theme-toggle:hover { background: #1a3550; }
html[data-theme="dark"] .moon-icon { display: none; }
html[data-theme="dark"] .sun-icon { display: block; }
html[data-theme="dark"] .module-tab.active { background: #1a3853; box-shadow: 0 1px 2px rgba(0,0,0,.24); }
html[data-theme="dark"] .unit-list-trigger:hover { color: #b5dcff; }
html[data-theme="dark"] .progress-track { background: #253a4e; }
html[data-theme="dark"] .word-card { border-color: #2b4055; }
html[data-theme="dark"] .sound-button { background: #1a3550; }
html[data-theme="dark"] .sound-button:hover { background: #224767; }
html[data-theme="dark"] .phonetic,
html[data-theme="dark"] .voice-hint,
html[data-theme="dark"] .spelling-tip,
html[data-theme="dark"] .spelling-answer-summary { color: #9db2c7; }
html[data-theme="dark"] .voice-chip.active { border-color: #41698e; background: #193a57; }
html[data-theme="dark"] .repeat-toggle.active { color: #c9ed96; border-color: #708f3a; background: #26391b; }
html[data-theme="dark"] .spelling-card { border-color: #2f4a63; background: linear-gradient(145deg, #142437, #0f1d2d); }
html[data-theme="dark"] .letter-slot { color: #add3f7; border-bottom-color: #66819a; }
html[data-theme="dark"] .letter-slot.filled { color: #72d3a2; border-bottom-color: transparent; }
html[data-theme="dark"] .word-symbol { color: #83a3c0; }
html[data-theme="dark"] .spelling-meaning { border-left-color: #5795ca; background: #172e43; }
html[data-theme="dark"] .spelling-feedback.correct { color: #9bd96d; }
html[data-theme="dark"] .spelling-feedback.incorrect,
html[data-theme="dark"] .access-error { color: #f0a081; }
html[data-theme="dark"] .close-button { background: #1b2e41; }
html[data-theme="dark"] .chapter-item:hover,
html[data-theme="dark"] .chapter-item.active,
html[data-theme="dark"] .global-search-result:hover,
html[data-theme="dark"] .global-search-result:focus-visible,
html[data-theme="dark"] .unit-word-item:hover,
html[data-theme="dark"] .unit-word-item:focus-visible,
html[data-theme="dark"] .unit-word-item.active { background: #19344d; }
html[data-theme="dark"] .locate-current-word { color: #a9d3fa; border-color: #3d5871; background: #14283b; }
html[data-theme="dark"] .locate-current-word:hover,
html[data-theme="dark"] .locate-current-word:focus-visible { border-color: #669acc; background: #1a3550; }
html[data-theme="dark"] .toggle-track { background: #415a70; }

@keyframes locate-word-dark { 0%, 100% { background: #19344d; } 50% { background: #235174; } }
html[data-theme="dark"] .unit-word-item.located { animation-name: locate-word-dark; }

@media (max-width: 540px) {
  .app-shell { width: min(100% - 1rem, 46rem); padding-top: .75rem; }
  .app-header { align-items: stretch; gap: .65rem; flex-wrap: wrap; }
  .brand-controls { width: 100%; }
  .global-search { flex: 1 1 6rem; }
  .chapter-trigger { width: 100%; max-width: none; }
  .study-area { margin-top: 2.6rem; }
  .spelling-area { margin-top: 2.6rem; }
  .word-card { border-radius: 1rem; }
  .spelling-card { border-radius: 1rem; }
  .voice-hint { width: 100%; margin: .15rem 0 0; }
}