:root {
  color-scheme: light;
  --ink: #17213c;
  --muted: #667085;
  --paper: #ffffff;
  --paper-deep: #f1f2ff;
  --blue: #000091;
  --blue-soft: #eef0ff;
  --red: #e1000f;
  --red-soft: #fff0f1;
  --gold: #e1000f;
  --line: #d9d9e8;
  --green: #000091;
  --shadow: 0 22px 70px rgba(24, 28, 64, .14);
  --heading: "Playfair Display", Georgia, serif;
  --body: Inter, Arial, sans-serif;
}
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behaviour: smooth; }
body { margin: 0; min-width: 320px; background: #f4f5ff; color: var(--ink); font: 16px/1.65 var(--body); }
button, textarea, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(225,0,15,.35); outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--heading); line-height: 1.12; }
h2 { color: var(--blue); font-size: clamp(2rem, 5vw, 4.4rem); }
h3 { color: var(--blue); }
.skip-link { position: fixed; z-index: 99; top: .5rem; left: .5rem; padding: .65rem 1rem; transform: translateY(-150%); background: var(--blue); color: #fff; }
.skip-link:focus { transform: translateY(0); }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:76px; padding:.8rem clamp(1rem,4vw,3.5rem); background:#fff; border-bottom:1px solid var(--line); }
.brand-lockup { display:flex; align-items:center; gap:.75rem; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; background:var(--blue); color:#fff; border-bottom:4px solid var(--red); font:bold 1.3rem var(--heading); }
.brand-lockup strong, .brand-lockup small { display:block; }
.brand-logo { width:58px; height:48px; object-fit:contain; }
.brand-lockup strong { color:var(--blue); }
.brand-lockup small { color:var(--muted); font-size:.76rem; }
.header-actions { display:flex; align-items:center; gap:.6rem; }
.book-chip { padding:.35rem .75rem; border:1px solid var(--blue); border-radius:999px; color:var(--blue); font-size:.76rem; font-weight:800; }
.icon-button { border:0; background:transparent; color:var(--blue); font-weight:800; }
.reader-nav { position:sticky; z-index:20; top:0; background:var(--blue); box-shadow:0 8px 24px rgba(0,0,80,.2); }
.nav-scroll { display:flex; max-width:1440px; margin:0 auto; overflow-x:auto; }
.nav-tab { flex:0 0 auto; min-height:54px; padding:.75rem .95rem; border:0; border-bottom:4px solid transparent; background:transparent; color:rgba(255,255,255,.68); font-size:.78rem; font-weight:800; }
.nav-tab:hover { color:#fff; background:rgba(255,255,255,.08); }
.nav-tab.is-active { border-bottom-color:var(--red); color:#fff; background:rgba(255,255,255,.13); }
.reading-progress { height:3px; background:rgba(255,255,255,.2); }
.reading-progress span { display:block; width:8%; height:100%; background:var(--red); transition:width 220ms ease; }
.reader-page { width:min(1240px, calc(100% - 2rem)); min-height:70vh; margin:0 auto; padding:clamp(2rem,5vw,5rem) 0 clamp(3rem,6vw,6rem); scroll-margin-top:64px; }
.reader-page[hidden] { display:none; }
.eyebrow { margin-bottom:.55rem; color:var(--red); font-size:.76rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.heading-fr, .translation { color:var(--muted); font-style:italic; }
.heading-fr { margin-bottom:1.8rem; font:italic 1.25rem var(--heading); }
.cover-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,390px); align-items:center; gap:clamp(2rem,7vw,7rem); min-height:640px; }
.cover-copy h1 { margin-bottom:.25rem; color:var(--blue); font-size:clamp(3.5rem,9vw,8.2rem); letter-spacing:-.06em; }
.french-title { margin-bottom:1.6rem; color:var(--red); font:italic clamp(1.45rem,3vw,2.3rem) var(--heading); }
.cover-intro, .cover-intro-fr { max-width:700px; font-size:1.07rem; }
.cover-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-top:2rem; }
.book-number { color:var(--muted); font-size:.86rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.cover-badges { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.15rem; }
.cover-badges span { padding:.35rem .65rem; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--blue); font-size:.7rem; font-weight:800; }
.book-cover-overlay > img { display:block; width:64px; height:42px; margin-bottom:.65rem; object-fit:contain; background:white; }
.primary-button, .secondary-button, .check-button { min-height:46px; padding:.7rem 1.05rem; border-radius:7px; font-weight:800; }
.primary-button, .check-button { border:1px solid var(--blue); background:var(--blue); color:#fff; }
.primary-button:hover, .check-button:hover { background:#00005f; }
.secondary-button { border:1px solid var(--blue); background:#fff; color:var(--blue); }
.time-note { color:var(--muted); font-size:.82rem; }
.book-cover-frame { position:relative; overflow:hidden; aspect-ratio:2/3; border:12px solid #fff; background:var(--blue); box-shadow:-15px 16px 0 #00005f, 0 28px 60px rgba(0,0,70,.25); }
.book-cover-frame img { width:100%; height:100%; object-fit:cover; }
.book-cover-overlay { position:absolute; inset:auto 0 0; z-index:1; padding:1.1rem 1.15rem; background:rgba(0,0,145,.93); color:#fff; border-top:6px solid var(--red); }
.book-cover-overlay span, .book-cover-overlay strong, .book-cover-overlay em, .book-cover-overlay small { display:block; }
.book-cover-overlay span, .book-cover-overlay small { font-size:.65rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.book-cover-overlay strong { margin:.35rem 0 .1rem; font:2.1rem/1 var(--heading); }
.book-cover-overlay em { color:#e7e7ff; font:italic 1.05rem var(--heading); }
.book-spread { display:grid; grid-template-columns:1fr 1fr; min-height:620px; background:#fff; box-shadow:var(--shadow); }
.book-page { position:relative; padding:clamp(1.35rem,4vw,3.7rem); background:linear-gradient(100deg,#ffffff 0%,#ffffff 92%,#f1f2ff 100%); }
.book-page + .book-page { background:linear-gradient(260deg,#ffffff 0%,#ffffff 92%,#f1f2ff 100%); border-left:1px solid var(--line); }
.chapter-audio-card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; padding:1rem 1.2rem; background:#fff; border-left:5px solid var(--red); box-shadow:0 8px 24px rgba(0,0,70,.05); }
.chapter-audio-card strong, .chapter-audio-card span { display:block; }
.chapter-audio-card strong { color:var(--blue); }
.chapter-audio-card span { color:var(--muted); font-size:.78rem; }
.chapter-audio-card audio { width:min(430px,100%); height:40px; }
.book-page::after { content:""; position:absolute; top:1.5rem; bottom:1.5rem; width:1px; background:#ebe4d8; }
.book-page:first-child::after { right:1.35rem; }
.book-page:last-child::after { left:1.35rem; }
.chapter-kicker { margin-bottom:.7rem; color:var(--red); font-size:.75rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.book-page h2 { margin-bottom:.25rem; font-size:clamp(2rem,4vw,3.5rem); }
.chapter-fr { margin-bottom:2rem; color:var(--red); font:italic 1.35rem var(--heading); }
.story-paragraph { position:relative; z-index:1; margin-bottom:1.2rem; font-size:clamp(1rem,1.4vw,1.16rem); line-height:1.9; }
.story-paragraph:last-child { margin-bottom:0; }
.story-paragraph-fr { color:#4d5871; font-style:italic; }
.word { position:relative; padding:0 .12em; border:0; border-bottom:2px dotted var(--red); background:#eef0ff; color:inherit; font-weight:700; }
.word:hover, .word:focus { background:#d9d9f4; }
.word::after { content:attr(data-tip); position:absolute; z-index:5; left:50%; bottom:calc(100% + 9px); width:210px; padding:.65rem .75rem; transform:translateX(-50%) scale(.96); opacity:0; pointer-events:none; background:var(--ink); color:#fff; border-radius:7px; font:700 .75rem/1.45 var(--body); box-shadow:0 10px 24px rgba(0,0,0,.18); transition:opacity 140ms ease, transform 140ms ease; }
.word:hover::after, .word:focus::after { opacity:1; transform:translateX(-50%) scale(1); }
.spread-caption { display:flex; justify-content:space-between; gap:1rem; margin:1rem 0 0; color:var(--muted); font-size:.78rem; }
.chapter-image { margin:1rem 0 1.2rem; padding:.45rem; background:#f1f2ff; border:1px solid var(--line); transform:rotate(-1deg); }
.chapter-image img { display:block; width:100%; aspect-ratio:16/6; object-fit:cover; }
.chapter-end { margin-top:1.4rem; padding:1.1rem 1.3rem; background:var(--blue); color:#fff; text-align:center; }
.chapter-end strong { display:block; font:1.5rem var(--heading); }
.reader-note { margin-top:1.2rem; padding:1rem 1.2rem; border-left:5px solid var(--red); background:var(--red-soft); }
.reader-note p:last-child { margin-bottom:0; }
.tool-grid, .grammar-grid, .homework-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.3rem; }
.tool-card, .grammar-card, .exercise-card, .homework-card, .character-card { padding:clamp(1.2rem,3vw,2rem); background:#fff; border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,70,.05); }
.tool-card h3, .grammar-card h3, .homework-card h3 { margin-bottom:.35rem; font-size:1.7rem; }
.character-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; }
.character-card { border-top:7px solid var(--blue); }
.character-card:nth-child(2) { border-top-color:var(--red); }
.character-card:nth-child(3) { border-top-color:var(--blue); }
.portrait { display:grid; place-items:center; width:70px; height:70px; margin-bottom:1rem; border-radius:50%; background:var(--blue-soft); color:var(--blue); font-size:2.2rem; }
.character-card:nth-child(2) .portrait { background:var(--red-soft); color:var(--red); }
.character-card:nth-child(3) .portrait { background:var(--blue-soft); color:var(--blue); }
.vocab-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.3rem; }
.vocab-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin:0; }
.vocab-item { display:grid; grid-template-columns:1fr auto; gap:.25rem .55rem; padding:.75rem; border-bottom:1px solid var(--line); }
.vocab-item dt { color:var(--blue); font-weight:900; }
.vocab-item dd { grid-column:1 / 2; margin:0; color:var(--muted); font-style:italic; }
.vocab-item dd.is-hidden { visibility:hidden; }
.flashcard-button { grid-column:2; grid-row:3; padding:.2rem .4rem; border:1px solid var(--blue); border-radius:999px; background:white; color:var(--blue); font-size:.65rem; font-weight:800; }
.vocab-item small { grid-column:1 / 2; color:var(--muted); text-transform:uppercase; font-size:.65rem; letter-spacing:.08em; }
.phrase-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.phrase-card { min-width:0; }
.sentence-card { display:grid; width:100%; min-height:126px; gap:.45rem; align-content:center; padding:1rem; border:1px solid var(--line); border-top:4px solid var(--blue); background:#fff; color:var(--ink); text-align:left; box-shadow:0 6px 20px rgba(0,0,70,.05); }
.sentence-card span, .sentence-card em { color:var(--muted); font-size:.72rem; }
.sentence-card strong { color:var(--blue); font:700 1.15rem/1.35 var(--heading); }
.sentence-card.is-revealed { border-top-color:var(--red); }
.audio-button { display:inline-flex; align-items:center; gap:.4rem; min-height:34px; padding:.35rem .55rem; border:1px solid var(--blue); border-radius:999px; background:#fff; color:var(--blue); font-size:.72rem; font-weight:800; }
.audio-button:hover, .audio-button.is-playing { background:var(--blue); color:#fff; }
.grammar-card { border-top:7px solid var(--blue); }
.grammar-card:nth-child(2) { border-top-color:var(--red); }
.grammar-card:nth-child(3) { border-top-color:var(--blue); }
.grammar-card:nth-child(4) { border-top-color:var(--gold); }
.grammar-label { margin-bottom:.35rem; color:var(--red); font-size:.7rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.grammar-card code { padding:.15rem .35rem; border-radius:3px; background:var(--paper-deep); color:var(--blue); font-size:.84em; }
.language-tip { margin-top:1.2rem; padding:1rem 1.2rem; border-left:5px solid var(--red); background:var(--red-soft); }
.language-tip p:last-child { margin-bottom:0; }
.example-pair { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:.8rem 0; padding:.75rem; background:var(--paper-deep); font-weight:700; }
.tense-table { width:100%; border-collapse:collapse; margin-top:1.2rem; background:#fff; }
.tense-table th, .tense-table td { padding:.8rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.tense-table th { background:var(--blue); color:#fff; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; }
.practice-stack { display:grid; gap:1.2rem; }
.exercise-card { border-top:5px solid var(--blue); }
.question { display:grid; gap:.4rem; margin:.7rem 0; padding:.8rem; background:var(--paper-deep); }
.question select { min-height:38px; padding:.3rem .5rem; border:1px solid #aaa8b6; border-radius:5px; background:#fff; }
.question { display:grid; grid-template-columns:1fr; }
.question .translation { margin:.2rem 0; font-size:.85rem; }
.question select { max-width:520px; }
.quiz-explanation { min-height:1.2rem; color:var(--blue); font-weight:700; }
.is-correct { border-color:var(--blue)!important; background:#eef0ff!important; }
.is-incorrect { border-color:var(--red)!important; background:var(--red-soft)!important; }
.practice-summary { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; justify-content:space-between; padding:1rem; background:#fff; border:1px solid var(--line); }
.practice-summary > span { color:var(--blue); font-weight:900; font-size:1.3rem; }
.practice-summary small { color:var(--muted); margin-right:auto; }
.feedback { min-height:1.3em; margin:.7rem 0 0; font-weight:800; }
.feedback.success { color:var(--blue); }
.feedback.needs-work { color:var(--red); }
.mission-card { display:grid; grid-template-columns:160px 1fr; background:var(--blue); color:#fff; }
.mission-number { display:grid; place-content:center; padding:1.4rem; background:var(--red); font:2.3rem var(--heading); text-align:center; }
.mission-number small { display:block; font:700 .68rem var(--body); letter-spacing:.1em; text-transform:uppercase; }
.mission-copy { padding:clamp(1.4rem,4vw,2.5rem); }
.mission-copy h3 { color:#fff; font-size:2rem; }
.speaking-frame { margin-top:1.3rem; padding:1.3rem; background:#fff; border:2px solid var(--blue); }
.speaking-frame blockquote { margin:0; color:var(--blue); font:1.15rem/1.8 var(--heading); }
.speaking-frame .phrase-grid p { display:grid; gap:.2rem; padding:.7rem .8rem; background:var(--paper-deep); }
.speaking-frame .phrase-grid p span { color:var(--muted); font-style:italic; font-size:.86rem; }
.recording-studio { margin-top:1.3rem; padding:clamp(1.2rem,3vw,2rem); background:#fff; border:1px solid var(--line); }
.recorder-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.recording-time { padding:.35rem .7rem; background:var(--ink); color:#fff; font:1.3rem var(--heading); }
.recorder-status { display:flex; align-items:center; gap:.55rem; min-height:42px; margin:1rem 0; padding:.7rem .9rem; background:var(--paper-deep); color:var(--muted); }
.recording-indicator { width:11px; height:11px; border-radius:50%; background:#b4b0a7; }
.recording-indicator.is-recording { background:var(--red); box-shadow:0 0 0 6px rgba(225,0,15,.12); animation:pulse 1s infinite; }
@keyframes pulse { 50% { transform:scale(1.18); } }
.recorder-controls { display:flex; flex-wrap:wrap; gap:.55rem; }
.record-control { min-height:42px; padding:.55rem .75rem; border:1px solid var(--blue); border-radius:6px; background:#fff; color:var(--blue); font-weight:800; font-size:.82rem; }
.record-control.start, .record-control.submit { background:var(--blue); color:#fff; }
.record-control.subtle { border-color:var(--line); color:var(--muted); }
.record-control:disabled { opacity:.38; cursor:not-allowed; }
.recording-studio audio { width:100%; margin-top:1rem; }
.recorder-privacy { margin:1rem 0 0; color:var(--muted); font-size:.78rem; }
.submission-result { margin:1rem 0 0; padding:.8rem; background:var(--paper-deep); font-weight:700; }
.submission-result.is-success { background:#eef0ff; color:var(--blue); }
.submission-result.is-error { background:var(--red-soft); color:var(--red); }
.reflection-box { margin-top:1.3rem; padding:1.3rem; background:#fff; border:1px solid var(--line); }
.reflection-box textarea { width:100%; margin-top:.75rem; padding:.75rem; resize:vertical; border:1px solid #aaa8b6; border-radius:5px; }
.save-note { margin:.35rem 0 0; color:var(--muted); font-size:.75rem; }
.reader-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; min-height:88px; padding:.8rem clamp(1rem,4vw,3.5rem); background:#fff; border-top:1px solid var(--line); }
.reader-footer > p { margin:0; text-align:center; }
.reader-footer > p span, .reader-footer > p small, .page-button small, .page-button strong { display:block; }
.reader-footer > p span { color:var(--blue); font-weight:900; }
.reader-footer > p small, .page-button small { color:var(--muted); }
.page-button { display:flex; align-items:center; gap:.7rem; justify-self:start; padding:.6rem; border:0; background:transparent; color:var(--blue); text-align:left; }
.page-button.next { justify-self:end; text-align:right; }
.page-button:disabled { opacity:.35; cursor:not-allowed; }
.audio-status { position:fixed; z-index:50; right:1rem; bottom:1rem; max-width:320px; padding:.7rem 1rem; transform:translateY(140%); background:var(--ink); color:#fff; border-radius:6px; font-size:.82rem; transition:transform 180ms ease; }
.audio-status.is-visible { transform:translateY(0); }
@media (max-width: 850px) {
  .cover-layout, .book-spread, .tool-grid, .grammar-grid, .vocab-layout, .homework-grid { grid-template-columns:1fr; }
  .book-page + .book-page { border-left:0; border-top:1px solid var(--line); }
  .book-page::after { display:none; }
  .character-grid { grid-template-columns:1fr; }
  .book-cover-frame { max-width:330px; margin:0 auto; }
  .chapter-audio-card { align-items:flex-start; }
}
@media (max-width: 560px) {
  .site-header { align-items:flex-start; }
  .header-actions { flex-direction:column; align-items:flex-end; }
  .vocab-list { grid-template-columns:1fr; }
  .example-pair { grid-template-columns:1fr; }
  .phrase-grid { grid-template-columns:1fr; }
  .mission-card { grid-template-columns:1fr; }
  .mission-number { padding:1rem; }
  .recorder-heading { flex-direction:column; }
  .reader-footer { grid-template-columns:1fr 1fr; }
  .reader-footer > p { grid-column:1 / -1; grid-row:1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}
@media screen {
  html { scroll-padding-top:64px; }
}
@media print {
  .reader-nav, .reader-footer, .header-actions, .cover-actions, .audio-button, .recorder-controls { display:none !important; }
  .reader-page { width:100%; min-height:0; padding:1rem 0; }
  .reader-page[hidden] { display:none !important; }
}