:root{--bg:#fffaf0;--panel:#ffffff;--ink:#1d2a24;--muted:#647067;--brand:#146b4a;--brand2:#c77d24;--soft:#f3ead9;--line:#e7d9c1;--good:#1f8a5f;--noun:#1f6feb;--verb:#16833a;--adj:#7a3db8;--prep:#c2410c;--adv:#b7791f;--shadow:0 18px 40px rgba(43,30,12,.10)}*{box-sizing:border-box}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--ink);line-height:1.6}a{color:inherit}.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem clamp(1rem,4vw,3rem);background:rgba(255,250,240,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-weight:800;line-height:1.1}.brand span{display:block;font-size:1.05rem}.brand small{display:block;color:var(--muted);font-weight:600;font-size:.75rem}nav{display:flex;gap:.6rem;flex-wrap:wrap}nav a{text-decoration:none;padding:.5rem .75rem;border-radius:999px;color:var(--muted);font-weight:700}nav a:hover{background:var(--soft);color:var(--ink)}main{width:min(1180px,92vw);margin:0 auto;padding:2rem 0 4rem}.hero{min-height:70vh;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);align-items:center;gap:2rem}.eyebrow{text-transform:uppercase;letter-spacing:.15em;color:var(--brand2);font-weight:900;font-size:.78rem}.hero h1,.page-title h1{font-size:clamp(2.3rem,6vw,5.4rem);line-height:.96;margin:.3rem 0 1rem}.lead{font-size:clamp(1.1rem,2vw,1.35rem);color:var(--muted);max-width:760px}.button{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:900;background:var(--panel);box-shadow:var(--shadow)}.button.primary{background:var(--brand);color:white;border-color:var(--brand)}.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.3rem}.hero-card,.card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:1.35rem;box-shadow:var(--shadow)}.stamp{font-size:1.8rem;font-weight:900}.progress-bar{height:12px;background:var(--soft);border-radius:999px;overflow:hidden}.progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2))}.grid{display:grid;gap:1rem}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.page-title{padding:2rem 0}.map-placeholder{border:2px dashed var(--line);border-radius:28px;min-height:220px;background:linear-gradient(135deg,#fff,#f7ead4);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin-bottom:1.4rem;color:var(--muted)}.map-placeholder strong{font-size:1.5rem;color:var(--ink)}footer{text-align:center;color:var(--muted);padding:2rem}.lesson-hero{border-radius:32px;padding:2rem;background:linear-gradient(135deg,#0f5138,#c77d24);color:white;box-shadow:var(--shadow);margin-bottom:1rem}.lesson-hero h1{font-size:clamp(2rem,5vw,4rem);line-height:1;margin:.2rem 0}.lesson-meta{display:flex;gap:.6rem;flex-wrap:wrap}.pill{display:inline-flex;border-radius:999px;padding:.35rem .7rem;background:rgba(255,255,255,.16);font-weight:800}.section{margin:1rem 0}.section h2{font-size:1.65rem;margin-bottom:.6rem}.vocab-table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:18px}.vocab-table th,.vocab-table td{padding:.75rem;border-bottom:1px solid var(--line);text-align:left}.vocab-table th{background:var(--soft)}.story{font-size:1.1rem}.story p{margin:1rem 0}.speaker{font-weight:900;color:var(--brand)}.hover{border-bottom:2px dotted var(--brand2);cursor:help;position:relative;background:linear-gradient(transparent 65%,rgba(199,125,36,.18) 0)}.hover:focus{outline:3px solid rgba(20,107,74,.25)}.tooltip{position:fixed;z-index:1000;max-width:min(360px,90vw);background:#16241e;color:white;padding:.85rem;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.25);font-size:.95rem}.tooltip small{display:block;color:#ffdca8;margin-top:.25rem}.factbox{border-left:6px solid var(--brand2);background:#fff7e8;padding:1rem;border-radius:18px;margin:1rem 0}.wow{background:#f0fff7;border:1px solid #b7efd2;border-radius:22px;padding:1rem}.quiz-option{display:block;width:100%;text-align:left;margin:.4rem 0;padding:.7rem;border:1px solid var(--line);border-radius:14px;background:white;cursor:pointer}.quiz-option.correct{border-color:var(--good);background:#eafff3}.quiz-option.wrong{border-color:#c33;background:#fff0f0}.noun{color:var(--noun);font-weight:800}.verb{color:var(--verb);font-weight:800}.adj{color:var(--adj);font-weight:800}.prep{color:var(--prep);font-weight:800}.adv{color:var(--adv);font-weight:800}.passport{background:radial-gradient(circle at 20% 20%,#fff3c8,#f0b35a);border:2px solid #8a541c;text-align:center}.big{font-size:2rem;font-weight:900}.prose{max-width:820px}.journal{font-family:Georgia,serif;background:#fffdf6}.print-only{display:none}@media(max-width:800px){.hero{grid-template-columns:1fr;min-height:auto;padding-top:2rem}.grid.three{grid-template-columns:1fr}.site-header{align-items:flex-start;flex-direction:column}.lesson-hero{padding:1.3rem}main{width:min(94vw,1180px)}}@media print{.site-header,footer,.button,.quiz-option{display:none}.print-only{display:block}body{background:white}.card,.lesson-hero{box-shadow:none}}

.notice{background:#fff7e8;border:1px solid var(--line);border-left:6px solid var(--brand2);border-radius:18px;padding:1rem}.muted{color:var(--muted)}.done-card{outline:3px solid rgba(31,138,95,.25)}.mini-result{padding:1rem;border-bottom:1px solid var(--line)}.search-input{width:100%;font:inherit;font-size:1.1rem;padding:1rem;border:1px solid var(--line);border-radius:18px;background:white}.search-results{margin-top:1rem}.checklist{display:flex;gap:.5rem;flex-wrap:wrap}.pill.ok{background:#eafff3;color:#145c3f}.pill.warn{background:#fff7e8;color:#8a541c}body.dark{--bg:#111a16;--panel:#19241f;--ink:#f7f1e7;--muted:#b9c3bb;--soft:#26332c;--line:#3a4a40;--shadow:0 18px 40px rgba(0,0,0,.25)}body[data-size="large"]{font-size:1.12rem}body[data-size="xl"]{font-size:1.25rem}body.show-translations .hover::after{content:" → " attr(data-en); display:block; color:var(--muted); font-size:.9em; border-left:3px solid var(--line); padding-left:.5rem; margin:.25rem 0}.site-header nav a{white-space:nowrap}@media(max-width:800px){.site-header nav{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}.site-header nav a{text-align:center;background:rgba(255,255,255,.35);font-size:.9rem;padding:.45rem}.brand span{font-size:1rem}.brand small{font-size:.72rem}.page-title{padding-top:1rem}.card{border-radius:20px}.button{width:auto}}

/* Build 001 Design System Additions */
.mode-switch{display:flex;gap:.75rem;flex-wrap:wrap;margin:1rem 0}
.component-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:1.25rem;box-shadow:var(--shadow)}
.photo-stop{border-left:6px solid #c79048;background:linear-gradient(135deg,rgba(199,144,72,.12),rgba(255,255,255,.88))}
.victory{border-left:6px solid #2f9e44;background:linear-gradient(135deg,rgba(47,158,68,.12),rgba(255,255,255,.88))}
.notebook{border-left:6px solid #7c5cff;background:linear-gradient(135deg,rgba(124,92,255,.12),rgba(255,255,255,.88))}
.journal{border-left:6px solid #3b82f6;background:linear-gradient(135deg,rgba(59,130,246,.10),rgba(255,255,255,.88))}
.real-spanish{border-left:6px solid #e85d04;background:linear-gradient(135deg,rgba(232,93,4,.12),rgba(255,255,255,.88))}
.stamp-day{border:2px dashed #a16207;background:rgba(254,243,199,.55)}
.explorer-mode .site-header,.explorer-mode .lesson-meta,.explorer-mode .study-only{display:none!important}
.explorer-mode{background:#111;color:#f7f3ea}
.explorer-mode .page{max-width:900px}
.explorer-mode .card,.explorer-mode .section,.explorer-mode .lesson-hero{background:#181818;color:#f7f3ea;border-color:#333}
.explorer-mode .story p{font-size:1.25rem;line-height:2}
.explorer-mode .hover{border-bottom:1px dotted #f7f3ea;color:#fff}
.explorer-mode a{color:#f7d08a}
.qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.6rem;margin-top:1rem}.qa-item{padding:.65rem .8rem;border-radius:999px;background:rgba(0,0,0,.06);font-weight:700}.qa-item.ok{background:rgba(47,158,68,.16);color:#12632a}.qa-item.warn{background:rgba(245,158,11,.18);color:#7c4a03}

/* Build 008: Photo Explorer buttons */
.photo-stop .photo-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1rem;
}
.photo-stop .photo-actions .button{
  flex:1 1 180px;
  text-align:center;
}


/* Build 017: Spanish Word Tally */
.word-tally .stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1rem 0;}
.stat-card{border:1px solid var(--border);border-radius:18px;padding:1rem;background:var(--surface-2,#f8f4ec);box-shadow:var(--shadow-sm,0 6px 18px rgba(0,0,0,.06));}
.stat-card span{display:block;font-size:1.8rem;font-weight:800;color:var(--accent,#9b4d1b);line-height:1.1;}
.stat-card small{display:block;margin-top:.35rem;color:var(--muted,#666);line-height:1.35;}
@media(max-width:800px){.word-tally .stats-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.word-tally .stats-grid{grid-template-columns:1fr;}}


/* Build 020: Platform v1 Dashboard + Word Library */
.grid.four{grid-template-columns:repeat(4,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.badge-grid{display:flex;gap:.65rem;flex-wrap:wrap}.badge{display:inline-flex;padding:.55rem .75rem;border-radius:999px;background:#fff7e8;border:1px solid var(--line);font-weight:900}.timeline{display:grid;gap:.6rem}.timeline-item{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding:.7rem 0}.timeline-item span{color:var(--muted)}.mini-button{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:.35rem .55rem;cursor:pointer;font-weight:900}.vocab-table small{color:var(--muted)}@media(max-width:900px){.grid.four,.grid.two{grid-template-columns:1fr}.timeline-item{display:block}}


/* Build 034: Platform Enhancement 2.0 */
.mode-panel{position:sticky;top:88px;z-index:5}
.mode-story .learning-section,.mode-story .study-section{display:none!important}
.mode-learning .study-section{display:none!important}
.mode-study .learning-section{display:block}
.mode-study .study-section{display:block}
.audio-actions{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1rem}.audio-actions .button{box-shadow:none}
.smart-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:2000;padding:1rem}.smart-modal.open{display:flex}.smart-modal-card{width:min(560px,94vw);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:24px;padding:1.25rem;box-shadow:0 28px 80px rgba(0,0,0,.35)}.smart-close{float:right}.smart-vocab .mini-button{white-space:nowrap}
.photo-stop .photo-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.photo-stop .photo-actions .button{flex:auto;padding:.7rem .8rem;font-size:.92rem}
.stats-grid.expanded{grid-template-columns:repeat(4,minmax(0,1fr))}.achievement-banner{background:linear-gradient(135deg,#0f5138,#c77d24);color:#fff;border-radius:28px;padding:1.35rem;margin:1rem 0}.achievement-list{display:flex;gap:.7rem;flex-wrap:wrap}.achievement-list .badge{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.25);color:white}.map-progress{display:grid;gap:.45rem}.state-tile{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:16px;padding:.75rem;background:var(--panel)}.state-tile.done{border-color:var(--good);background:#eafff3}.state-tile.active{border-color:var(--brand2);background:#fff7e8}.today-card{background:linear-gradient(135deg,#fff7e8,#fff);border-left:6px solid var(--brand2)}
@media(max-width:900px){.stats-grid.expanded{grid-template-columns:1fr 1fr}.photo-stop .photo-actions{grid-template-columns:1fr}.mode-panel{position:static}}
@media(max-width:520px){.stats-grid.expanded{grid-template-columns:1fr}}

/* Build 037: Reading Mode Enhancement */
.mode-panel{transition:box-shadow .25s ease, transform .25s ease}
.mode-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.current-mode-indicator{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:.55rem .85rem;font-weight:900;color:var(--ink)}
.mode-switch{align-items:center}
.mode-button{position:relative;box-shadow:none;transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease}
.mode-button:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 26px rgba(43,30,12,.14)}
.mode-button.active{color:white;border-color:transparent;box-shadow:0 16px 34px rgba(43,30,12,.22)}
.mode-button.active::after{content:'Active';position:absolute;top:-.65rem;right:.45rem;font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;background:#111a16;color:white;border-radius:999px;padding:.12rem .38rem}
.mode-story-btn.active{background:#2563eb!important}
.mode-learning-btn.active{background:#16833a!important}
.mode-study-btn.active{background:#7a3db8!important}
.mode-explorer-btn.active{background:#c2410c!important}
.focus-mode-btn.active{background:#0f5138!important}
#lessonRoot{transition:opacity .25s ease, transform .25s ease}
body.mode-story #lessonRoot,body.mode-learning #lessonRoot,body.mode-study #lessonRoot,body.explorer-mode #lessonRoot{animation:modeFade .28s ease}
@keyframes modeFade{from{opacity:.55;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
body.focus-mode .site-header,body.focus-mode footer,body.focus-mode .lesson-nav,body.focus-mode .audio-practice,body.focus-mode .word-tally{display:none!important}
body.focus-mode .mode-panel{position:sticky;top:0;z-index:20;box-shadow:0 12px 30px rgba(0,0,0,.18)}
body.focus-mode main{width:min(860px,94vw)}
body.focus-mode .lesson-hero{margin-top:1rem}
body.focus-mode .card{box-shadow:none}
body.focus-mode .learning-section,body.focus-mode .study-section{display:none!important}
body.focus-mode .story{font-size:1.2rem;line-height:1.8}
@media(max-width:700px){.mode-switch{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem}.mode-button{padding:.7rem .45rem;min-width:0}.mode-button span{display:none}.mode-button.active::after{display:none}.current-mode-indicator{width:100%;justify-content:center}.mode-panel-head{gap:.5rem}}
@media(prefers-reduced-motion:reduce){.mode-button,#lessonRoot,.mode-panel{transition:none!important;animation:none!important}.mode-button:hover{transform:none}}

/* Build 039: Learning Experience Enhancement */
.daily-goals{border-left:6px solid #16a34a;background:linear-gradient(135deg,rgba(22,163,74,.10),rgba(255,255,255,.92))}
.journey-timeline{border-left:6px solid #2563eb;background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(255,255,255,.92))}
.timeline-strip{display:grid;grid-template-columns:repeat(10,1fr);gap:.45rem;margin-top:1rem}
.timeline-dot{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70px;text-decoration:none;border:1px solid var(--line);border-radius:16px;background:var(--panel);transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.timeline-dot:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.timeline-dot.done{background:#eafff3;border-color:var(--good)}
.timeline-dot.active{background:#fff7e8;border-color:var(--brand2);outline:3px solid rgba(199,125,36,.18)}
.timeline-dot strong{font-size:1.2rem}.timeline-dot small{color:var(--muted);font-weight:800}
.story-paragraph{position:relative;border-radius:16px;padding:.25rem .5rem;transition:background .25s ease, box-shadow .25s ease}
.story-paragraph.is-speaking{background:#fff7e8;box-shadow:inset 0 0 0 2px rgba(199,125,36,.35)}
.paragraph-audio{font-size:.78rem;margin-left:.35rem;padding:.2rem .4rem;vertical-align:middle;box-shadow:none}
.smart-modal-card .actions .button{box-shadow:none}
@media(max-width:800px){.timeline-strip{grid-template-columns:repeat(5,1fr)}.paragraph-audio{display:inline-flex}}
@media(max-width:520px){.timeline-strip{grid-template-columns:repeat(2,1fr)}}

/* Build 045 reading mode repair */
.mode-button{pointer-events:auto;user-select:none}
.mode-button:not(.active){background:#fff;color:var(--ink);border-color:var(--line)}
.mode-button[data-active="true"]{outline:3px solid rgba(255,255,255,.6);outline-offset:-5px}
.mode-switch{position:relative;z-index:30}


/* Build 002 foundation enhancements */
.grid.four{grid-template-columns:repeat(4,1fr)}
.build-foundation{margin-top:2rem}
.build-badge{margin-top:.75rem;color:var(--muted);font-size:.85rem}
.build-badge strong{color:var(--brand)}
.site-note{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:1rem}
@media(max-width:900px){.grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid.four{grid-template-columns:1fr}}


/* Build 003: Reading Modes Repair
   These rules make each mode visibly different.
*/
.mode-panel {
  border: 2px solid rgba(15, 81, 56, .18);
}
.mode-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.mode-switch {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: .65rem;
  margin-top: 1rem;
}
.mode-button {
  min-height: 78px;
  display: flex;
  flex-direction: column;
  gap: .18rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px solid var(--line);
}
.mode-button span {
  font-weight: 800;
}
.mode-button small {
  display: block;
  font-size: .72rem;
  opacity: .82;
  line-height: 1.1;
}
.mode-button.active,
.mode-button[data-active="true"] {
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
.mode-explain {
  margin-top: 1rem;
  padding: .9rem 1rem;
  border-radius: 18px;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--ink);
}
body.mode-story .learning-section,
body.mode-story .study-section,
body.mode-story .explorer-section,
body.mode-story .overview-section,
body.mode-story .support-section {
  display: none !important;
}
body.mode-story .story-section,
body.mode-story .audio-practice {
  display: block !important;
}
body.mode-story .lesson-hero {
  margin-bottom: 1rem;
}
body.mode-story .story-section {
  font-size: 1.17rem;
  line-height: 1.85;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
body.mode-learning .study-section,
body.mode-learning .explorer-section {
  display: none !important;
}
body.mode-learning .learning-section,
body.mode-learning .story-section,
body.mode-learning .overview-section,
body.mode-learning .support-section {
  display: block !important;
}
body.mode-study .learning-section,
body.mode-study .explorer-section,
body.mode-study .overview-section,
body.mode-study .support-section {
  display: none !important;
}
body.mode-study .study-section,
body.mode-study .story-section {
  display: block !important;
}
body.mode-explorer .learning-section,
body.mode-explorer .study-section,
body.mode-explorer .overview-section,
body.mode-explorer .support-section {
  display: none !important;
}
body.mode-explorer .explorer-section,
body.mode-explorer .story-section {
  display: block !important;
}
body.mode-story .mode-panel { border-color: rgba(37,99,235,.28); }
body.mode-learning .mode-panel { border-color: rgba(22,131,58,.32); }
body.mode-study .mode-panel { border-color: rgba(122,61,184,.32); }
body.mode-explorer .mode-panel { border-color: rgba(194,65,12,.32); }
body.mode-story .current-mode-indicator { background: rgba(37,99,235,.12); }
body.mode-learning .current-mode-indicator { background: rgba(22,131,58,.12); }
body.mode-study .current-mode-indicator { background: rgba(122,61,184,.12); }
body.mode-explorer .current-mode-indicator { background: rgba(194,65,12,.12); }
.current-mode-indicator {
  padding: .7rem .9rem;
  border-radius: 999px;
  font-weight: 800;
  white-space: nowrap;
}
@media(max-width:850px){
  .mode-panel-head { flex-direction: column; }
  .mode-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-button { min-height: 68px; }
}
@media(max-width:520px){
  .mode-switch { grid-template-columns: 1fr; }
}


/* Build 004: Audio, copy, and reading-panel repair */
.mode-panel,
body.focus-mode .mode-panel {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  padding: .85rem !important;
  margin: .75rem 0 !important;
  box-shadow: 0 8px 20px rgba(43,30,12,.07) !important;
}
.compact-mode-panel h2 {
  font-size: 1.15rem !important;
  margin: 0 !important;
}
.compact-mode-panel .compact-help {
  font-size: .82rem;
  margin: .1rem 0 0;
}
.compact-mode-panel .mode-panel-head {
  align-items: center;
}
.compact-mode-panel .current-mode-indicator {
  padding: .45rem .7rem;
  font-size: .86rem;
}
.compact-mode-panel .mode-switch {
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: .45rem;
  margin-top: .65rem;
}
.compact-mode-panel .mode-button {
  min-height: 54px !important;
  padding: .45rem .5rem !important;
  box-shadow: none;
}
.compact-mode-panel .mode-button small {
  font-size: .68rem;
}
.compact-mode-panel .mode-explain {
  margin-top: .65rem;
  padding: .65rem .8rem;
  font-size: .9rem;
}

/* Override the old dark Explorer styling so it is readable. */
body.mode-explorer,
body.mode-explorer main,
body.mode-explorer #lessonRoot {
  background: var(--bg) !important;
  color: var(--ink) !important;
}
body.mode-explorer .site-header,
body.mode-explorer .lesson-meta {
  display: flex !important;
}
body.mode-explorer .card,
body.mode-explorer .section,
body.mode-explorer .lesson-hero {
  color: var(--ink) !important;
}
body.mode-explorer .lesson-hero {
  color: white !important;
}
body.mode-explorer .story-section,
body.focus-mode .story-section {
  background: #fffefa !important;
  color: #1d2a24 !important;
  border: 1px solid var(--line);
}
body.mode-explorer .story-section p,
body.focus-mode .story-section p {
  font-size: 1.15rem;
  line-height: 1.85;
}
body.mode-explorer .hover,
body.focus-mode .hover {
  color: inherit !important;
  border-bottom: 2px dotted var(--brand2) !important;
}

/* Focus mode should simplify, not make the page harder to read. */
body.focus-mode {
  background: #fffaf0 !important;
  color: #1d2a24 !important;
}
body.focus-mode main {
  width: min(900px, 94vw) !important;
}
body.focus-mode .lesson-hero {
  padding: 1.1rem !important;
  margin-top: .5rem !important;
}
body.focus-mode .lesson-hero h1 {
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
}
body.focus-mode .mode-panel {
  display: block !important;
}

/* Smart audio layout */
.audio-settings {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  margin: .7rem 0 1rem;
}
.voice-select {
  min-width: min(520px, 100%);
  max-width: 100%;
  padding: .72rem .8rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  color: var(--ink);
  font: inherit;
}
.audio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.manual-copy-box {
  display: none;
  width: 100%;
  min-height: 180px;
  margin-top: 1rem;
  padding: .85rem;
  border: 2px solid var(--brand2);
  border-radius: 16px;
  font: inherit;
  background: #fffefa;
  color: var(--ink);
}
.manual-copy-box.visible {
  display: block;
}
.story-paragraph.is-speaking {
  background: #fff3c8;
  border-radius: 14px;
  padding: .35rem .5rem;
}
@media(max-width:850px){
  .compact-mode-panel .mode-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .compact-mode-panel .mode-panel-head {
    align-items: flex-start;
  }
}
@media(max-width:520px){
  .compact-mode-panel .mode-switch {
    grid-template-columns: 1fr;
  }
  .compact-mode-panel .mode-button {
    min-height: 48px !important;
  }
}


/* Build 005: Auto-scroll repair */
.story-paragraph.is-speaking {
  background: #fff0b8 !important;
  border-left: 6px solid var(--brand2);
  border-radius: 16px;
  padding: .55rem .7rem !important;
  box-shadow: 0 8px 22px rgba(43,30,12,.10);
  transition: background .2s ease, box-shadow .2s ease;
}
.audio-practice .button.primary {
  box-shadow: 0 10px 22px rgba(15,81,56,.18);
}


/* Build 006: Audiobook controls */
.audiobook-main-controls {
  background: #fff8df;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: .75rem;
  margin-bottom: .65rem;
}
.audiobook-main-controls .button {
  font-size: .96rem;
}
.audiobook-settings-controls {
  opacity: .95;
}
.audio-practice .button.primary {
  border-color: var(--brand) !important;
}
@media(max-width:700px){
  .audiobook-main-controls .button,
  .audiobook-settings-controls .button,
  .audiobook-settings-controls a.button {
    width: 100%;
  }
}


/* Build 007: Settings checkbox and real translation text repair */
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  cursor: pointer;
  user-select: none;
}
.toggle-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fake-toggle {
  width: 54px;
  min-width: 54px;
  height: 30px;
  border-radius: 999px;
  background: #d8cbb6;
  border: 2px solid var(--line);
  position: relative;
  margin-top: .15rem;
  transition: .2s ease;
}
.fake-toggle::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: .2s ease;
}
.toggle-row input[type="checkbox"]:checked + .fake-toggle {
  background: var(--brand);
  border-color: var(--brand);
}
.toggle-row input[type="checkbox"]:checked + .fake-toggle::after {
  transform: translateX(24px);
}
.toggle-row input[type="checkbox"]:focus + .fake-toggle {
  outline: 3px solid rgba(199,125,36,.35);
}
.toggle-row small {
  display: block;
  color: var(--muted);
  margin-top: .25rem;
}
.settings-status {
  margin-top: .8rem;
  padding: .65rem .75rem;
  border-radius: 14px;
  background: var(--soft);
  color: var(--muted);
  border: 1px solid var(--line);
}
.settings-status.ok {
  color: #145c3f;
  background: #eafff3;
}
.hover {
  display: inline-block;
  vertical-align: top;
}
.hover .spanish-word {
  display: inline;
}
.translation-under {
  display: none;
  margin-top: .18rem;
  padding-left: .55rem;
  border-left: 3px solid var(--brand2);
  color: var(--muted);
  font-size: .9em;
  line-height: 1.35;
}
.translation-pron {
  color: var(--brand2);
  font-style: normal;
}
html.show-translations .translation-under,
body.show-translations .translation-under {
  display: block !important;
}
html.show-translations .hover::after,
body.show-translations .hover::after {
  content: none !important;
  display: none !important;
}
html.show-translations .story-paragraph,
body.show-translations .story-paragraph {
  line-height: 1.95;
}
html.show-translations .hover,
body.show-translations .hover {
  margin: .08rem .08rem .18rem 0;
  padding: .05rem .12rem;
  border-radius: 10px;
  background: rgba(255, 244, 205, .55);
}


/* Build 008: Smart Audio sticky compact bar */
.smart-audio-sticky {
  position: sticky;
  top: .45rem;
  z-index: 40;
  padding: .7rem .8rem !important;
  border: 2px solid rgba(15,81,56,.18);
  box-shadow: 0 12px 28px rgba(43,30,12,.10);
}
.smart-audio-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .45rem;
}
.smart-audio-title-row h2 {
  font-size: 1.05rem !important;
  margin: 0 0 .12rem !important;
}
.smart-audio-title-row p {
  margin: 0 !important;
  font-size: .86rem;
  color: var(--muted);
}
.smart-audio-sticky .audio-settings {
  margin: .35rem 0 .45rem !important;
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr);
  align-items: center;
  gap: .5rem;
}
.smart-audio-sticky .voice-select {
  width: 100%;
  min-width: 0;
  padding: .55rem .7rem;
}
.audiobook-one-line {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: .35rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: .42rem .2rem .5rem;
  margin: 0;
  scrollbar-width: thin;
}
.audiobook-one-line .button {
  white-space: nowrap;
  flex: 0 0 auto;
  padding: .55rem .72rem;
  font-size: .82rem;
  min-height: 36px;
  border-radius: 999px;
}
.smart-audio-status {
  margin: .25rem 0 0 !important;
  font-size: .82rem;
}
.smart-audio-sticky .manual-copy-box.visible {
  max-height: 170px;
}
@media(max-width: 760px) {
  .smart-audio-sticky {
    top: .25rem;
    padding: .6rem !important;
  }
  .smart-audio-title-row {
    flex-direction: column;
    gap: .35rem;
  }
  .smart-audio-sticky .audio-settings {
    grid-template-columns: 1fr;
  }
  .audiobook-one-line .button {
    font-size: .78rem;
    padding: .5rem .65rem;
  }
}


/* Build 009: Ultra-compact Smart Audio bar */
.compact-audio-bar {
  padding: .45rem .65rem !important;
}
.compact-audio-bar .smart-audio-title-row {
  display: none !important;
}
.compact-audio-bar .compact-voice-row {
  display: grid !important;
  grid-template-columns: auto minmax(260px, 1fr) auto !important;
  align-items: center !important;
  gap: .55rem !important;
  margin: 0 0 .35rem 0 !important;
}
.compact-audio-bar .compact-voice-row label {
  font-size: .92rem;
}
.compact-audio-bar .voice-select {
  padding: .48rem .65rem !important;
  min-height: 38px;
}
.compact-audio-bar #voiceStatus {
  white-space: nowrap;
  font-size: .82rem;
  padding: .38rem .58rem;
}
.compact-audio-bar .audiobook-one-line {
  padding: .3rem .15rem .38rem !important;
}
.compact-audio-bar .smart-audio-status {
  margin-top: .08rem !important;
  font-size: .78rem;
}
@media(max-width: 760px) {
  .compact-audio-bar .compact-voice-row {
    grid-template-columns: auto 1fr !important;
  }
  .compact-audio-bar #voiceStatus {
    grid-column: 1 / -1;
    justify-self: start;
    white-space: normal;
  }
}


/* Build 010: Force compact Smart Audio bar */
.force-compact-audio {
  position: sticky !important;
  top: .35rem !important;
  z-index: 80 !important;
  padding: .38rem .55rem !important;
  margin: .5rem 0 .75rem !important;
}
.force-compact-audio .smart-audio-title-row,
.force-compact-audio h2,
.force-compact-audio > p:first-of-type {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.force-compact-audio .compact-voice-row,
.force-compact-audio .audio-settings {
  display: grid !important;
  grid-template-columns: auto minmax(280px, 1fr) auto !important;
  align-items: center !important;
  gap: .5rem !important;
  margin: 0 0 .28rem !important;
}
.force-compact-audio .voice-select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: .42rem .6rem !important;
  font-size: .9rem !important;
}
.force-compact-audio #voiceStatus {
  white-space: nowrap !important;
  font-size: .78rem !important;
  padding: .34rem .55rem !important;
}
.force-compact-audio .audiobook-one-line {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: .3rem !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: .24rem .12rem .28rem !important;
  margin: 0 !important;
}
.force-compact-audio .audiobook-one-line .button {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  min-height: 34px !important;
  padding: .45rem .62rem !important;
  font-size: .78rem !important;
  border-radius: 999px !important;
}
.force-compact-audio .smart-audio-status {
  margin: .08rem 0 0 !important;
  font-size: .74rem !important;
}
@media(max-width: 760px) {
  .force-compact-audio .compact-voice-row,
  .force-compact-audio .audio-settings {
    grid-template-columns: auto 1fr !important;
  }
  .force-compact-audio #voiceStatus {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    white-space: normal !important;
  }
}


/* Build 011: Word-by-word highlighting */
.audio-word {
  display: inline;
  border-radius: 8px;
  padding: 0 .03rem;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.audio-word.is-current-word {
  background: #0f6f4f !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(15,111,79,.18);
}
.audio-word.is-hover-word {
  background: #ffe08a;
  color: #1d2a24;
}
.hover.is-current-phrase {
  background: rgba(255, 225, 135, .35) !important;
  box-shadow: inset 0 -2px 0 rgba(199,125,36,.55);
}
.hover.is-hover-phrase {
  background: rgba(255, 244, 205, .72);
}
.phrase-chunk {
  border-bottom-style: solid;
}
.word-chunk {
  border-bottom-style: dotted;
}
html.show-translations .audio-word.is-current-word,
body.show-translations .audio-word.is-current-word {
  background: #0f6f4f !important;
  color: #fff !important;
}
.story-paragraph.is-speaking {
  outline: 2px solid rgba(15,111,79,.18);
}


/* Build 012: force word-by-word hover, scroll, and audio highlighting */
.story .audio-word,
.story-section .audio-word,
.audio-word {
  display: inline-block !important;
  border-radius: 7px !important;
  padding: 0 .04rem !important;
  margin: 0 .005rem !important;
  cursor: pointer !important;
  border-bottom: 1px dotted rgba(15,111,79,.45) !important;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease, transform .12s ease !important;
}
.audio-word:hover,
.audio-word:focus,
.audio-word.is-hover-word {
  background: #ffe08a !important;
  color: #17231d !important;
  outline: none !important;
  transform: translateY(-1px);
}
.audio-word.is-current-word {
  background: #0f6f4f !important;
  color: #fff !important;
  border-bottom-color: #0f6f4f !important;
  box-shadow: 0 0 0 3px rgba(15,111,79,.20) !important;
}
.hover.is-current-phrase,
.hover.is-hover-phrase {
  background: rgba(255, 225, 135, .38) !important;
  border-radius: 10px !important;
}
.phrase-chunk {
  border-bottom: 2px solid rgba(199,125,36,.55) !important;
}
.word-chunk {
  border-bottom: 2px dotted rgba(15,111,79,.45) !important;
}
.story-paragraph.is-speaking {
  outline: 2px solid rgba(15,111,79,.20) !important;
  background: rgba(255,246,213,.45) !important;
}
html.show-translations .audio-word.is-current-word,
body.show-translations .audio-word.is-current-word {
  background: #0f6f4f !important;
  color: #fff !important;
}


/* Build 013: reliable Study Mode switch */
.settings-switch {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .85rem;
  border: 2px solid var(--line);
  border-radius: 22px;
  background: #fffaf0;
  padding: .85rem;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.settings-switch:hover,
.settings-switch:focus {
  outline: 3px solid rgba(199,125,36,.28);
  border-color: var(--brand2);
}
.switch-track {
  width: 62px;
  min-width: 62px;
  height: 34px;
  border-radius: 999px;
  background: #d8cbb6;
  border: 2px solid var(--line);
  position: relative;
  transition: .18s ease;
}
.switch-knob {
  position: absolute;
  width: 26px;
  height: 26px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.20);
  transition: .18s ease;
}
.settings-switch.is-on .switch-track {
  background: var(--brand);
  border-color: var(--brand);
}
.settings-switch.is-on .switch-knob {
  transform: translateX(28px);
}
.switch-copy strong {
  display: block;
  font-size: 1.05rem;
}
.switch-copy small {
  display: block;
  color: var(--muted);
  margin-top: .22rem;
}
.settings-preview {
  margin: .9rem 0;
  padding: .85rem;
  border-radius: 18px;
  background: var(--soft);
  border: 1px solid var(--line);
}
.settings-preview p {
  margin: 0;
}
html.show-translations .settings-preview .translation-under,
body.show-translations .settings-preview .translation-under {
  display: block !important;
}


/* Build 014: pronunciation above translation in Study Mode */
.translation-under {
  display: none;
  margin-top: .22rem;
  padding: .42rem .55rem;
  border-left: 3px solid var(--brand2);
  color: var(--muted);
  font-size: .9em;
  line-height: 1.35;
  background: rgba(255, 250, 240, .85);
  border-radius: 0 10px 10px 0;
}
.pronunciation-under,
.english-under {
  display: block;
}
.pronunciation-under {
  color: var(--brand2);
  font-weight: 800;
  margin-bottom: .16rem;
}
.english-under {
  color: var(--muted);
}
html.show-translations .translation-under,
body.show-translations .translation-under {
  display: block !important;
}
html.show-translations .translation-pron,
body.show-translations .translation-pron {
  display: block;
}


/* Build 017: linked Spanish-to-English highlight */
.english-word {
  display: inline-block;
  border-radius: 7px;
  padding: 0 .04rem;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.english-word.is-current-translation {
  background: #194f90 !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(25,79,144,.18);
}
.english-under.is-current-translation {
  background: rgba(25,79,144,.08);
  border-radius: 8px;
}
.translation-under.is-current-translation {
  background: rgba(255,239,190,.92) !important;
  box-shadow: inset 0 0 0 2px rgba(199,125,36,.25);
}
.hover.is-hover-phrase .translation-under,
.hover.is-current-phrase .translation-under {
  border-left-color: #194f90;
}
html.show-translations .hover:hover .english-word,
body.show-translations .hover:hover .english-word {
  cursor: pointer;
}


/* Build 018: force linked highlight visual repair */
.audio-word {
  cursor: pointer !important;
}
.audio-word.is-hover-word,
.audio-word.is-current-word {
  background: #0f6f4f !important;
  color: #fff !important;
  border-radius: 7px !important;
  box-shadow: 0 0 0 3px rgba(15,111,79,.18) !important;
}
.english-word {
  display: inline-block !important;
  border-radius: 7px !important;
  padding: 0 .05rem !important;
}
.english-word.is-current-translation {
  background: #174f90 !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(23,79,144,.20) !important;
}
.english-under.is-current-translation {
  background: rgba(23,79,144,.10) !important;
  border-radius: 9px !important;
  padding: .08rem .18rem !important;
}
.translation-under.is-current-translation {
  display: block !important;
  background: rgba(255,239,190,.96) !important;
  box-shadow: inset 0 0 0 2px rgba(23,79,144,.22) !important;
}
.hover.is-hover-phrase,
.hover.is-current-phrase {
  background: rgba(255,225,135,.40) !important;
}


/* Build 019: correct translation highlight, no wrong proportional guessing */
.english-word.is-current-translation {
  background: #174f90 !important;
  color: #fff !important;
  border-radius: 7px !important;
  box-shadow: 0 0 0 3px rgba(23,79,144,.20) !important;
}
.translation-under.is-current-translation {
  display: block !important;
  background: rgba(255,239,190,.96) !important;
  box-shadow: inset 0 0 0 2px rgba(23,79,144,.22) !important;
}
.english-under.is-current-translation {
  border-radius: 9px !important;
  padding: .08rem .18rem !important;
}


/* Build 020: Study Mode hover-off repair */
html:not(.show-translations) .translation-under,
body:not(.show-translations) .translation-under {
  display: none !important;
}
html:not(.show-translations) .translation-under.is-current-translation,
body:not(.show-translations) .translation-under.is-current-translation,
html:not(.show-translations) .english-under.is-current-translation,
body:not(.show-translations) .english-under.is-current-translation,
html:not(.show-translations) .english-word.is-current-translation,
body:not(.show-translations) .english-word.is-current-translation {
  display: none !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}
html:not(.show-translations) .hover.is-hover-phrase .translation-under,
body:not(.show-translations) .hover.is-hover-phrase .translation-under,
html:not(.show-translations) .hover.is-current-phrase .translation-under,
body:not(.show-translations) .hover.is-current-phrase .translation-under {
  display: none !important;
}
html.show-translations .translation-under,
body.show-translations .translation-under {
  display: block !important;
}


/* Build 021: Study Mode OFF means no hover pronunciation/translation popup */
html:not(.show-translations) .hover:hover::before,
html:not(.show-translations) .hover:hover::after,
body:not(.show-translations) .hover:hover::before,
body:not(.show-translations) .hover:hover::after,
html[data-translations="off"] .hover:hover::before,
html[data-translations="off"] .hover:hover::after,
body[data-translations="off"] .hover:hover::before,
body[data-translations="off"] .hover:hover::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html:not(.show-translations) .hover .translation-under,
body:not(.show-translations) .hover .translation-under,
html[data-translations="off"] .hover .translation-under,
body[data-translations="off"] .hover .translation-under,
html:not(.show-translations) .hover:hover .translation-under,
body:not(.show-translations) .hover:hover .translation-under,
html[data-translations="off"] .hover:hover .translation-under,
body[data-translations="off"] .hover:hover .translation-under {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
html.show-translations .hover .translation-under,
body.show-translations .hover .translation-under,
html[data-translations="on"] .hover .translation-under,
body[data-translations="on"] .hover .translation-under {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.study-hover-disabled::before,
.study-hover-disabled::after {
  display: none !important;
  content: none !important;
}