:root {
  --paper: #f4efe4;
  --ink: #1c2722;
  --forest: #174d3b;
  --moss: #477650;
  --coral: #c5533d;
  --sun: #ecbc55;
  --line: #c9c2b2;
  --mist: #e6dfd1;
  --surface: #fbf8f0;
  --input: #fffdf8;
  --ink-muted: #526159;
  --forest-light: #7da58c;
  --forest-pale: #bed0be;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius-sm: 0.25rem;
  --radius-lg: 1rem;
  --border-width: 1px;
  --border-emphasis: 2px;
  --shadow: 0.45rem 0.45rem 0 var(--ink);
  --sans: "Trebuchet MS", "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --type-overline: 0.75rem;
  --type-meta: 0.8rem;
  --type-caption: 0.85rem;
  --type-body: 1rem;
  --type-lede: 1.15rem;
  --type-rule-heading: 1.15rem;
  --type-rule-copy: 0.9rem;
  --type-word: clamp(1.25rem, 2vw, 1.65rem);
  --type-detail: 1.4rem;
  --tracking-ipa: 0.06em;
  --type-heading: clamp(1.8rem, 4vw, 3.2rem);
  --type-display: clamp(2.8rem, 8vw, 6.5rem);
  --workspace-detail-min: 18rem;
  --workspace-detail-column: 1fr;
  --workspace-reading-column: 1.65fr;
  --workspace-height: min(44rem, calc(100svh - var(--space-7) - var(--space-7) - var(--space-6)));
  --rule-audio-width: 11rem;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
button, input { font: inherit; }
button { cursor: pointer; }
.lesson-shell { width: min(100% - var(--space-5), 76rem); margin: 0 auto; padding: var(--space-7) 0; }
.masthead { max-width: 46rem; border-left: var(--space-2) solid var(--coral); padding-left: var(--space-5); margin-bottom: var(--space-7); }
.eyebrow, .detail-kicker, .section-number { color: var(--forest); font-size: var(--type-overline); font-weight: 800; letter-spacing: 0.12em; margin: 0 0 var(--space-2); text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { font-family: var(--serif); font-size: var(--type-display); font-weight: 400; line-height: 0.9; letter-spacing: -0.06em; margin-bottom: var(--space-4); }
h1 em { color: var(--coral); display: block; }
h2 { font-family: var(--serif); font-size: var(--type-heading); font-weight: 400; letter-spacing: -0.04em; margin-bottom: var(--space-2); }
.lede { font-size: var(--type-lede); line-height: 1.55; max-width: 36rem; }
.reading-card, .detail-panel, .rules-panel, .dictionary-section { border: var(--border-width) solid var(--line); border-radius: var(--radius-lg); }
.reader-workspace { display: grid; gap: var(--space-6); grid-template-columns: minmax(var(--workspace-detail-min), var(--workspace-detail-column)) minmax(0, var(--workspace-reading-column)); height: var(--workspace-height); margin-bottom: var(--space-6); }
.study-sidebar { display: flex; flex-direction: column; gap: var(--space-4); min-height: 0; }
.reading-card { background: var(--surface); box-shadow: var(--shadow); padding: var(--space-6); }
.reader-workspace .reading-card { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding: var(--space-4); }
.section-heading, .dictionary-heading { align-items: flex-start; display: flex; gap: var(--space-4); }
.section-heading > div, .dictionary-heading > div { flex: 1; }
.section-heading p:not(.section-number), .dictionary-heading p:not(.section-number) { color: var(--ink-muted); line-height: 1.5; }
.fullscreen-button { align-items: center; background: transparent; border: var(--border-width) solid var(--forest); border-radius: var(--radius-sm); color: var(--forest); display: inline-flex; flex: 0 0 auto; font-size: var(--type-caption); font-weight: 800; justify-content: center; padding: var(--space-2) var(--space-3); text-align: center; }
.fullscreen-button:hover, .fullscreen-button:focus-visible { background: var(--forest); color: var(--paper); outline: var(--border-emphasis) solid var(--coral); outline-offset: var(--space-1); }
.word-count { background: var(--sun); border-radius: 999px; font-size: var(--type-meta); font-weight: 800; margin: 0; padding: var(--space-2) var(--space-3); white-space: nowrap; }
.reading-text { font-family: var(--serif); font-size: var(--type-word); line-height: 2; margin: var(--space-6) 0 0; }
.reading-word { background: transparent; border: 0; border-bottom: var(--border-emphasis) solid transparent; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; padding: 0; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.reading-word:hover, .reading-word:focus-visible, .reading-word.active { background: var(--sun); border-color: var(--coral); color: var(--ink); outline: none; }
.punctuation { white-space: pre; }
.detail-panel { background: var(--forest); color: var(--paper); min-height: 17rem; padding: var(--space-6); }
.reader-workspace .detail-panel { flex: 0 0 auto; }
.detail-kicker { color: var(--sun); }
.detail-content h2 { color: var(--sun); }
.pronunciation-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--space-5) 0; }
.pronunciation-grid div { border-top: var(--border-width) solid var(--forest-light); padding-top: var(--space-2); }
dt { color: var(--forest-pale); font-size: var(--type-overline); font-weight: 800; letter-spacing: 0.08em; margin-bottom: var(--space-2); text-transform: uppercase; }
dd { font-family: var(--serif); font-size: var(--type-detail); margin: 0; }
.detail-ipa { letter-spacing: var(--tracking-ipa); }
.audio-button { background: var(--sun); border: var(--border-emphasis) solid var(--sun); border-radius: var(--radius-sm); color: var(--ink); font-weight: 800; padding: var(--space-3) var(--space-5); }
.audio-button:hover, .audio-button:focus-visible { background: transparent; color: var(--sun); outline: var(--border-emphasis) solid var(--sun); outline-offset: var(--space-1); }
.audio-button:disabled { background: transparent; border-color: var(--forest-light); color: var(--forest-pale); cursor: not-allowed; }
.audio-note { color: var(--forest-pale); font-size: var(--type-caption); margin: var(--space-3) 0 0; }
.clear-selection { background: transparent; border: var(--border-width) solid var(--forest-light); border-radius: var(--radius-sm); color: var(--paper); font-weight: 800; margin-top: var(--space-4); padding: var(--space-2) var(--space-3); }
.clear-selection:hover, .clear-selection:focus-visible { border-color: var(--sun); color: var(--sun); outline: var(--border-emphasis) solid var(--sun); outline-offset: var(--space-1); }
.detail-empty { max-width: 32rem; }
.rules-panel { background: var(--mist); display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; padding: var(--space-4); }
.rules-heading { align-items: flex-start; display: flex; flex: 0 0 auto; gap: var(--space-3); }
.rules-heading > div { flex: 1; min-width: 0; }
.rules-heading h2 { font-size: var(--type-detail); }
.rules-heading p:not(.section-number) { color: var(--ink-muted); font-size: var(--type-caption); line-height: 1.5; }
.rules-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-2) var(--space-2) 0; scroll-padding: var(--space-4); }
.rules-caveat { background: var(--surface); border-left: var(--border-emphasis) solid var(--coral); font-size: var(--type-rule-copy); line-height: 1.55; margin: 0; padding: var(--space-3); }
.rule-section { border-top: var(--border-width) solid var(--line); padding: var(--space-4) 0; }
.rule-section:last-child { padding-bottom: 0; }
.rule-heading { align-items: baseline; display: flex; gap: var(--space-2); }
.rule-number { color: var(--coral); font-size: var(--type-overline); font-weight: 800; letter-spacing: 0.08em; margin: 0; }
.rule-heading h3 { font-family: var(--serif); font-size: var(--type-rule-heading); font-weight: 400; letter-spacing: -0.02em; margin: 0; }
.rule-subheading { color: var(--forest); font-size: var(--type-caption); letter-spacing: 0.08em; margin: var(--space-4) 0 var(--space-2); text-transform: uppercase; }
.rule-copy, .rule-list { font-size: var(--type-rule-copy); line-height: 1.55; margin: var(--space-3) 0 0; }
.rule-list { padding-left: var(--space-5); }
.rule-list li + li { margin-top: var(--space-2); }
.rule-steps li::marker { color: var(--coral); font-weight: 800; }
.rule-table-wrap { margin-top: var(--space-3); overflow-x: auto; }
.rule-table { font-size: var(--type-caption); min-width: 0; width: 100%; }
.rule-table th, .rule-table td { overflow-wrap: anywhere; padding: var(--space-2); vertical-align: top; }
.rule-table th { font-size: var(--type-overline); }
.rule-audio-cell { min-width: var(--rule-audio-width); }
.rule-audio { display: block; max-width: 100%; }
.rule-audio + .rule-audio { margin-top: var(--space-2); }
code { background: var(--forest-pale); border-radius: var(--radius-sm); color: var(--ink); font-family: var(--sans); font-size: 0.9em; padding: 0 var(--space-1); }
.dictionary-section { background: var(--mist); margin-bottom: var(--space-6); padding: var(--space-6); }
.search-label { display: block; font-size: var(--type-caption); font-weight: 800; margin: var(--space-5) 0 var(--space-2); }
input { background: var(--input); border: var(--border-width) solid var(--ink); border-radius: var(--radius-sm); color: var(--ink); padding: var(--space-3); width: min(100%, 34rem); }
input:focus-visible { outline: var(--space-1) solid var(--coral); outline-offset: var(--space-1); }
.table-wrap { margin-top: var(--space-5); overflow-x: auto; }
table { border-collapse: collapse; min-width: 38rem; width: 100%; }
th, td { border-bottom: var(--border-width) solid var(--line); padding: var(--space-3); text-align: left; }
th { color: var(--forest); font-size: var(--type-overline); letter-spacing: 0.08em; text-transform: uppercase; }
.table-word { background: none; border: 0; border-bottom: 1px solid var(--forest); color: var(--forest); font-weight: 800; padding: 0; }
.table-word:hover, .table-word:focus-visible { color: var(--coral); outline: none; }
@media (min-width: 80rem) { .lesson-shell { width: calc(100% - clamp(4rem, 5vw, 12rem)); } }
@media (max-width: 58rem) { .reader-workspace { display: flex; flex-direction: column; height: auto; } .reader-workspace .reading-card { order: -1; overflow: visible; } .rules-panel { flex: initial; } .rules-scroll { overflow: visible; } }
@media (max-width: 38rem) { .lesson-shell { width: min(100% - var(--space-4), 76rem); padding: var(--space-5) 0; } .reading-card, .detail-panel, .rules-panel, .dictionary-section { padding: var(--space-4); } .section-heading, .dictionary-heading { gap: var(--space-3); } .word-count { display: none; } .pronunciation-grid { grid-template-columns: 1fr; } }

.rules-panel:fullscreen, .reading-card:fullscreen { border-radius: 0; box-shadow: none; height: 100%; margin: 0; max-width: none; overflow: hidden; padding: var(--space-6); width: 100%; }
.rules-panel:fullscreen { display: flex; flex-direction: column; }
.rules-panel:fullscreen .rules-scroll { overflow-y: auto; }
.reading-card:fullscreen { display: flex; flex-direction: column; }
.reading-card:fullscreen .reading-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-2) var(--space-2) 0; scroll-padding: var(--space-4); }