:root {
  --ink:#20242c;
  --navy:#111c59;
  --teal:#388b9d;
  --paper:#fff;
  --font-size:20px;
  --leading:1.75;
  --book-font:Arial,Helvetica,sans-serif;
  --toolbar-height:88px;
  color-scheme:light
}
* {
  box-sizing:border-box
}
html {
  scroll-padding-top:calc(var(--toolbar-height) + 18px)
}
body {
  margin:0;
  background:#eaf0f1;
  color:var(--ink);
  font:15px Arial,Helvetica,sans-serif
}
button,select,a {
  -webkit-tap-highlight-color:transparent
}
button,select {
  font:inherit;
  color:#264557;
  background:#fff;
  border:1px solid #cbd8dd;
  border-radius:9px;
  min-height:42px
}
button {
  padding:0 13px;
  cursor:pointer
}
button:hover,select:hover {
  border-color:#4d8395;
  background:#f2f8fa
}
button:disabled {
  opacity:.35;
  cursor:default
}
button:focus-visible,select:focus-visible,a:focus-visible {
  outline:3px solid #307d99;
  outline-offset:3px
}
.toolbar {
  position:sticky;
  top:0;
  z-index:30;
  min-height:88px;
  padding:15px 28px;
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  background:#fbfdfdee;
  border-bottom:1px solid #cad8db;
  backdrop-filter:blur(16px)
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#213e50;
  flex-shrink:0
}
.brand strong {
  display:block;
  letter-spacing:1.5px;
  font-size:16px
}
.brand small {
  display:block;
  color:#637a84;
  margin-top:6px
}
.monogram {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:48px;
  height:48px;
  border:1px solid #b69942;
  border-radius:50%;
  color:#8b292c;
  background:#fffbea;
  font:bold 27px Georgia,serif
}
.controls {
  display:flex;
  align-items:center;
  gap:8px
}
.controls button {
  font-size:26px;
  min-width:42px
}
.controls select {
  max-width:300px;
  padding:0 34px 0 12px
}
.original {
  color:#264557;
  text-decoration:none;
  background:#fff;
  border:1px solid #cbd8dd;
  border-radius:9px;
  padding:12px 14px;
  margin-left:8px;
  white-space:nowrap
}
.reading-tools {
  max-width:1250px;
  margin:22px auto 20px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  flex-wrap:wrap
}
.reading-tools p {
  margin:0;
  font-size:13px;
  color:#607581;
  line-height:1.8
}
.legend-meaning {
  color:#008c44
}
.legend-ipa {
  color:#d80c21
}
.preferences {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px
}
.preferences label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#5b737d
}
.preferences select {
  padding:0 25px 0 10px;
  min-height:36px
}
.preferences button {
  min-height:36px;
  font-size:13px
}
.font-controls {
  display:flex;
  align-items:center;
  gap:8px
}
.font-controls output {
  min-width:19px;
  text-align:center;
  font-size:12px;
  color:#48636d
}
#hints[aria-pressed=true] {
  background:#fff5b0;
  border-color:#c6ae49;
  color:#68591b
}
#reader {
  max-width:1250px;
  margin:0 auto;
  padding:0 20px 60px
}
.book-page {
  font:var(--font-size)/var(--leading) var(--book-font);
  background:var(--paper);
  margin:0 0 32px;
  box-shadow:0 8px 28px #193c4b0e;
  border:1px solid #dbe4e7;
  scroll-margin-top:calc(var(--toolbar-height) + 18px);
  position:relative
}
.page-heading {margin:0}
.source-faithful-page .page-footer {margin-top:0}
.page-heading {
  display:grid;
  grid-template-columns:100px 1fr;
  background:linear-gradient(112deg,#242d76,#10184c);
  color:#f0f584;
  min-height:115px;
  line-height:1.3
}
.unit-badge {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:linear-gradient(155deg,#4fa1b4,#388792 55%,#17295e);
  color:#fff;
  border-radius:0 0 25px 0;
  font-size:21px;
  gap:1px
}
.unit-badge strong {
  font-size:47px;
  line-height:1;
  font-weight:500
}
.page-heading h2 {
  align-self:center;
  font-size:1.55em;
  font-weight:500;
  margin:24px 35px;
  line-height:1.4
}
.exercise-page .page-heading {
  background:#fff;
  color:var(--navy);
  grid-template-columns:1fr 100px
}
.exercise-page .page-heading h2 {
  grid-column:1;
  grid-row:1;
  font-size:2.1em;
  font-weight:600;
  margin:30px 55px
}
.exercise-page .unit-badge {
  grid-column:2;
  grid-row:1
}
.book-section {
  position:relative;
  padding:24px 44px 30px 144px;
  border-bottom:1px solid #d9e4e7;
  min-width:0
}
.book-section:before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:100px;
  background:linear-gradient(135deg,#67abb7,#3793a2 60%,#3e7998);
  border-radius:0 0 24px 0
}
.section-marker {
  position:absolute;
  top:0;
  left:0;
  width:100px;
  text-align:right;
  padding:8px 15px;
  background:linear-gradient(#3a4285,#10164e);
  color:#f1f684;
  border-radius:0 24px 24px 0;
  font-size:1.1em;
  line-height:1.5
}
.book-section p {
  margin:.25em 0
}
.book-section h3 {
  font-size:1em;
  line-height:1.5;
  margin:0 0 18px
}
.book-section ul {
  list-style:none;
  margin:.35em 0;
  padding-left:1.55em
}
.book-section li {
  position:relative;
  margin:0
}
.book-section li:before {
  content:"";
  position:absolute;
  left:-1.25em;
  top:calc((var(--leading) * 1em - .7em)/2);
  width:.65em;
  height:.65em;
  border:1px solid #aac3c9;
  border-radius:4px
}
.book-section em {
  font-style:italic
}
.book-section .sentence-diagram {
  margin:.5em 0 .9em
}
.clause {
  background:#e2f0f3;
  border-bottom:1px solid #84aeb6;
  position:relative;
  padding:.15em .2em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone
}
.clause:after {
  content:attr(data-caption);
  font-size:.63em;
  color:#597480;
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  white-space:nowrap;
  line-height:1.8;
  background:white;
  padding:0 6px
}
.transform {
  padding:10px 24px;
  margin:16px 0 22px;
  background:#fafdfe;
  border-radius:18px;
  border:1px solid #e8f0f3;
  box-shadow:3px 5px 0 #e7ecf1;
  line-height:var(--leading)
}
.transform .result {
  padding-left:1.3em;
  position:relative
}
.transform .result:before {
  content:"→";
  position:absolute;
  left:0;
  color:#4c8896
}
.alternatives {
  display:inline-flex;
  flex-direction:column;
  vertical-align:middle;
  line-height:1.7;
  padding:0 .45em;
  border-left:1px solid #849ba4;
  border-right:1px solid #849ba4;
  border-radius:10px
}
.analysis-pair {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  align-items:center;
  gap:26px;
  padding:0 20px;
  margin:4px 0 15px;
  background:#f0f7f8;
  border-radius:10px
}
.analysis-pair>p:first-child {
  border-bottom:1px solid #8baab3
}
.note {
  padding:0 20px;
  border-left:2px solid #81aebb;
  margin:8px 0
}
.formula {
  display:flex;
  align-items:center;
  gap:18px;
  margin:14px 0;
  line-height:2.6
}
.brace {
  font-size:3em;
  font-weight:200;
  color:#668796
}
.comparison {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  position:relative
}
.comparison>* {
  min-width:0
}
.comparison>:nth-child(2) {
  border-left:1px solid #bacdd2;
  padding-left:28px
}
.comparison h3 {
  font-weight:600;
  color:#216b82;
  border-bottom:2px solid #8bafb9;
  padding:8px 0
}
.comparison ul {
  padding-left:1.2em
}
.book-crossref {
  margin:24px 40px 24px 132px;
  border:1px solid #91a6ae;
  border-radius:14px;
  padding:12px 18px;
  font:14px/1.8 Arial,sans-serif;
  color:#536d78
}
.exercise {
  position:relative;
  padding:22px 54px 32px 128px
}
.exercise+.exercise {
  border-top:1px solid #e6edef
}
.exercise:before {
  content:attr(data-exercise);
  position:absolute;
  left:32px;
  top:30px;
  background:linear-gradient(#394180,#101849);
  color:#f0f57f;
  border:1px solid #6c78a3;
  border-radius:50%;
  padding:7px 12px;
  font:bold .83em/1.5 Arial,sans-serif;
  box-shadow:inset 0 2px 2px #ffffff3b
}
.exercise h3 {
  font-size:1em;
  line-height:1.75;
  margin:0 0 24px;
  font-weight:600
}
.word-bank {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 24px;
  border:1px solid #b9c9d0;
  padding:14px 24px;
  margin:16px 0 20px
}
.word-bank>div {
  min-width:0
}
.questions {
  padding-left:1.5em;
  margin:16px 0 0
}
.questions>li {
  padding-left:.3em;
  margin-bottom:14px
}
.questions>li::marker {
  font-variant-numeric:tabular-nums
}
.answer-line {
  min-height:calc(var(--leading) * 1em);
  line-height:var(--leading);
  color:#293448
}
.given {
  font-family:var(--book-font);
  font-style:italic;
  color:#414d61;
  border-bottom:1px dotted #aebcc5;
  padding-bottom:.12em
}
.blank {
  display:inline-block;
  min-width:4em;
  width:9em;
  max-width:100%;
  height:1em;
  border-bottom:1px dotted #aebcc5;
  vertical-align:baseline
}
.answer-line>.blank:only-child {
  width:100%
}
.answer-line>.blank {
  width:45%;
  min-width:3em
}
.speech-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:12px 0 28px
}
.speech-card {
  margin:0;
  background:#fff;
  border:1px solid #b4c8d0;
  border-radius:20px;
  padding:28px 14px 0;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  min-width:0
}
.speech-card blockquote {
  margin:0 0 8px;
  text-align:center;
  line-height:var(--leading);
  font-size:.92em
}
.speech-card img {
  height:140px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:bottom
}
.speaker-number {
  position:absolute;
  left:10px;
  top:6px;
  font-size:13px;
  line-height:1.5;
  color:#69818e
}
.illustrated-example {
  display:grid;
  grid-template-columns:1fr 250px;
  gap:25px;
  align-items:center
}
.illustrated-example figure {
  margin:15px 0;
  text-align:center;
  line-height:1.8
}
.illustrated-example img {
  display:block;
  max-width:100%;
  height:auto;
  margin:auto
}
.illustrated-example figcaption {
  font-size:.7em;
  line-height:var(--leading);
  color:#476974
}
.page-footer {
  padding:18px 40px;
  text-align:right;
  color:#627b88;
  font:13px/1.6 Arial,sans-serif;
  border-top:1px solid #e2e9ec
}
.vocab-word {
  position:relative;
  display:inline-block;
  line-height:1.2;
  vertical-align:baseline;
  cursor:pointer;
  border-radius:4px;
  text-indent:0;
  white-space:nowrap;
  font-style:inherit
}
.vocab-word .english {
  border-radius:4px;
  transition:background .12s
}
.show-hints .vocab-word .english {
  background:#fff5b7
}
.vocab-word.active .english,.vocab-word:focus-visible .english {
  background:#ffea62;
  box-shadow:2px 0 #ffea62,-2px 0 #ffea62
}
.vocab-word.active {
  z-index:10
}
.vocab-word:focus-visible {
  outline:2px solid #b59226;
  outline-offset:4px
}
.annotation {
  display:block;
  visibility:hidden;
  position:absolute;
  left:50%;
  width:max-content;
  max-width:min(240px,72vw);
  white-space:normal;
  text-align:center;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:.8em;
  line-height:1.15;
  pointer-events:none;
  z-index:12;
  text-decoration:none
}
.meaning {
  bottom:calc(100% + .2em);
  transform:translateX(calc(-50% + var(--meaning-shift,0px)));
  color:#009b4c
}
.ipa {
  top:calc(100% + .2em);
  transform:translateX(calc(-50% + var(--ipa-shift,0px)));
  color:#e10b18
}
.active .annotation {
  visibility:visible
}
.popup {
  position:fixed;
  z-index:50;
  width:300px;
  height:300px;
  background:#fffdf5;
  border:1px solid #bd676f;
  border-radius:22px;
  box-shadow:0 10px 35px #422a3440;
  overflow:hidden
}
.popup[hidden] {
  display:none
}
.popup img {
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  display:block
}
.popup.image-ready img {
  opacity:1
}
.popup .close {
  position:absolute;
  right:8px;
  top:8px;
  z-index:2;
  border-radius:50%;
  width:32px;
  min-height:32px;
  padding:0;
  background:#fffffff0;
  color:#8d1934;
  font-size:23px;
  border-color:#fff
}
.popup #speak {
  position:absolute;
  bottom:10px;
  left:10px;
  min-height:34px;
  background:#a90725;
  color:#fff;
  border:2px solid #fff;
  border-radius:20px;
  font-size:15px;
  box-shadow:0 3px 8px #31152333
}
.popup #audio-status {
  position:absolute;
  inset:auto 8px 45px;
  margin:0;
  background:#fff9;
  font-size:12px;
  line-height:1.5;
  color:#843348;
  text-align:center
}
.popup #audio-status:empty {
  display:none
}
.sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important
}
#loading {
  padding:60px;
  text-align:center
}
.load-error {
  padding:40px;
  text-align:center;
  line-height:1.8
}
@media(min-width:1500px) {
  #reader,.reading-tools {
    max-width:1380px
  }
}
@media(max-width:1000px) {
  .toolbar {
    padding:12px 18px;
    gap:10px
  }
  .brand strong {
    font-size:14px
  }
  .brand small {
    font-size:11px
  }
  .controls select {
    max-width:240px
  }
  .book-section {
    padding:22px 28px 28px 103px
  }
  .book-section:before,.section-marker {
    width:75px
  }
  .page-heading {
    grid-template-columns:75px 1fr
  }
  .page-heading h2 {
    margin:22px 28px;
    font-size:1.4em
  }
  .exercise {
    padding:24px 30px 25px 101px
  }
  .exercise:before {
    left:19px
  }
  .book-crossref {
    margin-left:100px
  }
  .comparison {
    gap:22px
  }
  .comparison>:nth-child(2) {
    padding-left:20px
  }
  .illustrated-example {
    grid-template-columns:1fr 180px
  }
  .speech-grid {
    grid-template-columns:repeat(2,1fr)
  }
}
@media(max-width:700px) {
  :root {
    --toolbar-height:135px
  }
  .toolbar {
    flex-wrap:wrap;
    padding:10px 12px;
    gap:10px
  }
  .brand {
    gap:9px
  }
  .monogram {
    width:38px;
    height:38px;
    font-size:22px
  }
  .brand strong {
    font-size:13px
  }
  .brand small {
    font-size:11px;
    margin-top:3px
  }
  .controls {
    width:100%;
    gap:6px
  }
  .controls label {
    flex:1;
    min-width:0
  }
  .controls select {
    width:100%;
    max-width:none;
    font-size:13px;
    min-height:38px
  }
  .controls button {
    min-height:38px;
    min-width:34px;
    padding:0 8px
  }
  .original {
    font-size:12px;
    padding:10px 9px;
    margin-left:0
  }
  .reading-tools {
    padding:0 14px;
    margin:16px auto
  }
  .reading-tools p {
    font-size:12px
  }
  .preferences {
    gap:8px
  }
  .preferences label {
    font-size:11px;
    gap:5px
  }
  .preferences select {
    font-size:12px;
    padding:0 20px 0 7px
  }
  .preferences button {
    font-size:12px;
    padding:0 10px
  }
  .font-controls {
    gap:5px
  }
  #reader {
    padding:0 8px 30px
  }
  .book-page {
    margin-bottom:20px
  }
  .page-heading {
    grid-template-columns:58px 1fr;
    min-height:94px
  }
  .page-heading h2 {
    font-size:1.1em;
    margin:18px 16px
  }
  .unit-badge {
    font-size:15px;
    border-radius:0 0 16px 0
  }
  .unit-badge strong {
    font-size:34px
  }
  .exercise-page .page-heading {
    grid-template-columns:1fr 65px
  }
  .exercise-page .page-heading h2 {
    font-size:1.65em;
    margin:20px
  }
  .book-section {
    padding:20px 18px 24px 42px
  }
  .book-section:before {
    width:24px;
    border-radius:0 0 12px 0;
    opacity:.65
  }
  .section-marker {
    width:29px;
    padding:6px 5px;
    font-size:.8em;
    text-align:center;
    border-radius:0 10px 10px 0
  }
  .book-section ul {
    padding-left:1.2em
  }
  .book-section li:before {
    left:-1.05em;
    width:.5em;
    height:.5em
  }
  .transform {
    padding:10px 14px;
    margin:12px 0
  }
  .analysis-pair {
    grid-template-columns:1fr;
    gap:0;
    padding:8px 15px
  }
  .comparison {
    grid-template-columns:1fr;
    gap:18px
  }
  .comparison>:nth-child(2) {
    border-left:0;
    border-top:1px solid #bacdd2;
    padding:14px 0 0
  }
  .formula {
    flex-wrap:wrap;
    gap:10px;
    line-height:2.8
  }
  .formula .brace {
    display:none
  }
  .book-crossref {
    margin:16px 18px 16px 40px;
    padding:10px 12px;
    font-size:12px
  }
  .exercise {
    padding:18px 18px 24px
  }
  .exercise:before {
    position:static;
    display:inline-block;
    margin-bottom:12px;
    font-size:.78em
  }
  .exercise h3 {
    font-size:.91em;
    line-height:1.8;
    margin-bottom:24px
  }
  .word-bank {
    grid-template-columns:1fr;
    padding:12px 16px;
    gap:0;
    margin-bottom:22px
  }
  .questions {
    padding-left:1.25em
  }
  .questions>li {
    padding-left:.15em;
    margin-bottom:20px
  }
  .blank {
    width:5em
  }
  .answer-line>.blank {
    width:50%;
    min-width:2em
  }
  .speech-grid {
    grid-template-columns:1fr 1fr;
    gap:10px
  }
  .speech-card {
    padding:25px 10px 0
  }
  .speech-card blockquote {
    font-size:.85em
  }
  .speech-card img {
    height:115px
  }
  .illustrated-example {
    grid-template-columns:1fr;
    gap:0
  }
  .illustrated-example figure {
    max-width:220px;
    margin:10px auto 20px
  }
  .page-footer {
    padding:16px 20px
  }
  .annotation {
    font-size:.78em;
    max-width:min(220px,78vw)
  }
  .popup {
    width:250px;
    height:250px;
    border-radius:18px
  }
}
@media print {
  .toolbar,.reading-tools,.popup {
    display:none!important
  }
  body {
    background:white
  }
  #reader {
    max-width:none;
    padding:0
  }
  .book-page {
    box-shadow:none;
    border:0;
    break-after:page;
    --leading:1.9;
    font-size:12pt
  }
  .annotation {
    display:none!important
  }
  .book-section,.exercise {
    break-inside:avoid
  }
  .vocab-word .english {
    background:none!important;
    box-shadow:none!important
  }
}
.annotation {
  user-select:none;
  -webkit-user-select:none
}
/* Hidden labels must not widen the document before a word is selected. */
.annotation {
  display:none
}
.active .annotation {
  display:block
}
.book-page {
  scroll-margin-top:0
}
.exercise h3 {
  line-height:var(--leading)
}
.comparison {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)
}
.page-heading h2 {
  overflow-wrap:anywhere
}
.word-bank,.comparison,.analysis-pair,.illustrated-example {
  min-width:0
}
@media(max-width:700px) {
  .comparison {
    grid-template-columns:minmax(0,1fr)
  }
  .book-page {
    overflow-wrap:break-word
  }
}
.definitions {
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  padding:16px 20px
}
.definition-group {
  display:flex;
  gap:10px;
  align-items:center
}
.definition-group .subject {
  flex-shrink:0;
  font-size:.85em
}
.definition-list {
  border-left:1px solid #96aeb8;
  border-radius:9px;
  padding-left:12px;
  min-width:0
}
.matching-banks {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;
  margin:16px 0 25px
}
.sentence-bank {
  border:1px solid #b9c9d0;
  padding:16px 22px 16px 40px;
  margin:0
}
.sentence-bank li {
  padding-left:4px
}
.sentence-bank:not(ol) {
  list-style:none;
  padding-left:22px
}
.word-bank.verbs {
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0 16px
}
.clause:after {
  top:calc(100% + 1.5em)
}
.sentence-diagram {
  padding-bottom:1em
}
.transform .result:has(.clause) {
  padding-bottom:1em
}
@media(max-width:700px) {
  .definitions,.matching-banks {
    grid-template-columns:minmax(0,1fr)
  }
  .definitions {
    gap:20px;
    padding:10px 12px
  }
  .definition-group {
    gap:7px
  }
  .definition-group .subject {
    font-size:.78em
  }
  .definition-list {
    padding-left:9px
  }
  .word-bank.verbs {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}
.speech-card {
  padding-bottom:20px
}
.speech-card img {
  width:112px;
  height:112px;
  object-fit:cover;
  border-radius:50%;
  border:1px solid #e1e9ed;
  margin-top:12px
}
.couple-portraits {
  display:flex;
  justify-content:center;
  gap:10px
}
.couple-portraits img {
  width:94px;
  height:94px
}
.speech-card blockquote {
  margin-bottom:5px
}
@media(max-width:700px) {
  .speech-card img {
    width:86px;
    height:86px
  }
  .couple-portraits {
    gap:4px
  }
  .couple-portraits img {
    width:59px;
    height:59px
  }
}
/* Each phrase owns its meaning; existing emphasis stays inside the English text. */
.phrase-word {
  max-width:100%;
  white-space:normal;
  line-height:1.35;
  vertical-align:baseline;
}
.phrase-word .english {
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.phrase-word .meaning {
  max-width:min(290px,78vw);
  font-size:.78em;
  line-height:1.2;
  bottom:calc(100% + .22em);
}
.phrase-word.active .english {
  background:#ffed7e;
  box-shadow:2px 0 #ffed7e,-2px 0 #ffed7e;
}
.show-hints .phrase-word .english {
  background:#fff7c8;
  border-bottom:1px dotted #c6b45b;
}
.show-hints .phrase-word.active .english {background:#ffed7e}
.phrase-word .given {border-bottom-color:#aebcc5}
.preferences {gap:10px}
@media(max-width:700px) {
  .phrase-word .meaning {max-width:min(265px,82vw)}
}
.phrase-word .english {transition:none}
/* Vietnamese translations use the same font size as their English text. */
.vocab-word > .meaning {
  font-size:1em;
}
/* The original section letters are now accessible summary buttons. */
.section-marker {
  box-sizing:content-box;
  border:0;
  min-height:0;
  font-family:inherit;
  cursor:pointer;
  z-index:2;
}
.section-marker:hover {
  background:linear-gradient(#4b579c,#1c2867);
  color:#ffffa3;
  box-shadow:0 3px 12px #17295730;
}
.section-marker:focus-visible {
  outline:3px solid #d1bd39;
  outline-offset:2px;
}
/* Sidebar controls and a floating, nonmodal glass explanation window. */
html {scrollbar-gutter:stable}
.learning-workspace {display:block}
#reader {width:100%;min-width:0}
.learning-chunk {position:relative;min-width:0;margin:16px 0 24px;padding:0 0 0 14px;border-left:2px solid transparent;transition:background-color .16s,border-color .16s}
.learning-chunk.summary-preview {border-color:#e4a1b9;background:#fff9fb}
.learning-chunk.summary-selected {border-color:#ba3e6a;background:#fff7fa;box-shadow:-2px 0 #ba3e6a}
.book-section.summary-selected {box-shadow:inset 0 0 0 2px #c48baf}
.chunk-content {min-width:0}
.chunk-content>:first-child {margin-top:0}
.chunk-content>:last-child {margin-bottom:0}
.book-section {padding-top:44px}
.section-rail {position:absolute;inset:0 auto 0 0;width:100px;z-index:16;pointer-events:none}
.rail-controls {position:absolute;inset:0;pointer-events:none}
.rail-slot {position:absolute;left:0;right:0;pointer-events:none}
.rail-slot .glass-rail-button {position:sticky;top:calc(var(--toolbar-height) + var(--rail-pin,10px));display:flex;align-items:center;justify-content:center;margin:0 auto;pointer-events:auto}
.rail-slot[data-column] {width:50%;right:auto}
.rail-slot[data-column="1"] {left:50%}
.rail-slot[data-column] .rail-chunk {width:calc(100% - 6px);font-size:11px}
.glass-rail-button {
 box-sizing:border-box;border:1px solid #ffffffb8;
 background:linear-gradient(145deg,#ffffff5e,#ffffff20 55%,#d0e4ff42);
 box-shadow:inset 0 1px 1px #ffffffd9,inset 0 -1px 2px #6a91a640,0 4px 12px #103c5424;
 backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
 color:#123f54;text-shadow:0 1px #ffffff65;
}
.rail-controls .section-marker {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:72px;height:40px;min-height:40px;padding:3px 6px;border-radius:15px;font:600 19px/1 Arial,sans-serif}
.rail-overview-label {white-space:nowrap;font:600 10px/1.4 Arial,sans-serif;letter-spacing:.15px}
.rail-label {font:600 10px/1.4 Arial,sans-serif;color:#f0fcff;text-shadow:0 1px 3px #135365;margin-top:4px}
.rail-chunk {width:54px;min-height:42px;padding:6px 3px;border-radius:15px;font:600 13px/1.2 Arial,sans-serif}
.glass-rail-button:hover {background:linear-gradient(145deg,#ffffffc2,#ffe1ed70);border-color:white;box-shadow:inset 0 1px #fff,0 5px 16px #123b5f30;color:#852749}
.glass-rail-button[aria-expanded=true] {background:linear-gradient(145deg,#fff0f7e6,#edb5d0ae);border-color:#fff2fa;color:#8a224b;box-shadow:inset 0 1px #fff,0 0 0 3px #ffffff2e,0 5px 16px #40264c2a}
.glass-rail-button:focus-visible {outline:3px solid #fff3a9;outline-offset:3px}
.glass-window[hidden] {display:none}
.glass-window {
 position:fixed;z-index:60;left:120px;top:120px;display:flex;flex-direction:column;
 width:min(510px,calc(100vw - 24px));max-height:calc(100dvh - var(--toolbar-height) - 24px);
 padding:7px;border:1px solid #ffffffed;border-radius:28px;
 background:linear-gradient(135deg,#ffffffec,#f7edf4e8 48%,#e6f0f8ec);
 box-shadow:inset 0 1px 0 #fff,inset 1px 0 0 #ffffffbd,inset 0 -1px 0 #d0cfdf,0 20px 65px #273a5540,0 4px 14px #30456720;
 backdrop-filter:blur(28px) saturate(155%);-webkit-backdrop-filter:blur(28px) saturate(155%);
 color:#482b43;font:var(--font-size)/1.6 Arial,Helvetica,sans-serif;
 isolation:isolate;
}
.glass-window::before {content:'';position:absolute;inset:1px;border:1px solid #ffffff8c;border-radius:26px;pointer-events:none;background:linear-gradient(150deg,#ffffff75,transparent 28%,transparent 76%,#fff8);z-index:-1}
.glass-header {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:3px 5px 4px 9px;flex-shrink:0}
.glass-drag {display:flex;align-items:center;gap:7px;cursor:grab;touch-action:none;user-select:none;flex:1;min-height:36px;color:#847087;font:12px/1.5 Arial,sans-serif;border-radius:12px}
.glass-drag>:first-child {font-size:24px;color:#9b8b9f}
.glass-window.is-dragging .glass-drag {cursor:grabbing}
#glass-close {display:grid;place-items:center;width:35px;height:35px;min-height:35px;padding:0;border:1px solid #ffffffdb;border-radius:50%;background:linear-gradient(145deg,#ffffffc9,#ffffff58);box-shadow:inset 0 1px #fff,0 2px 5px #65485c13;font:25px/1 Arial,sans-serif;color:#8b3457}
#glass-close:hover {background:#ffe5f0;color:#a0144a}
.glass-scroll {padding:7px 22px 21px;overflow:auto;overscroll-behavior:contain;min-height:0;scrollbar-width:thin;scrollbar-color:#c6a7bf transparent}
#glass-context {margin:0 0 7px;color:#a23160;font:700 12px/1.5 Arial,sans-serif;letter-spacing:.2px}
#glass-title {margin:0 0 20px;color:#80234e;font-size:1.2em;line-height:1.35;font-weight:700}
.glass-points {padding-left:20px;margin:0}
.glass-points li {margin:0 0 14px;padding-left:3px}
.glass-points li:last-child {margin-bottom:0}
.glass-points li::marker {color:#af4676}
.summary-example {margin-top:18px;padding:15px 16px;border:1px solid #ffffffdb;border-radius:16px;background:linear-gradient(125deg,#ffffffab,#ffffff5c);box-shadow:inset 0 1px #fff,0 3px 8px #63466208}
.summary-example p {margin:0;font-size:1em;line-height:1.6}
.summary-english {font-weight:600;color:#45394f}
.summary-example .summary-vietnamese {margin-top:9px;color:#9b3260}
.summary-english mark {background:#f8d3e4;color:#792447;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.glass-window :focus-visible {outline:2px solid #b4507a;outline-offset:2px}
@supports not (backdrop-filter:blur(1px)) {.glass-window {background:#fff7fb}.glass-rail-button {background:#d9edf4}}
@media(max-width:1000px) {.section-rail {width:75px}.rail-controls .section-marker {width:59px}.rail-chunk {width:49px}}
@media(max-width:700px) {
 .book-section {padding-left:69px;padding-right:14px}
 .book-section:before {width:52px;opacity:.9}
 .section-rail {width:52px}
 .rail-controls .section-marker {width:43px;border-radius:13px;font-size:18px}
 .rail-overview-label {font-size:8px}
 .rail-chunk {width:42px;min-height:42px;font-size:12px;border-radius:13px}
 .rail-label {font-size:9px}
 .learning-chunk {padding-left:7px;margin:12px 0 22px}
 .glass-window {width:calc(100vw - 20px);border-radius:23px;padding:5px}
 .glass-window::before {border-radius:21px}
 .glass-scroll {padding:6px 16px 18px}
 #glass-title {font-size:1.1em}
 .summary-example {padding:12px}
}
@media(prefers-reduced-motion:reduce) {.learning-chunk {transition:none}}
@media print {.section-rail,.glass-window {display:none!important}.learning-chunk {border:0;padding:0;margin:0;box-shadow:none;background:none}.book-section.summary-selected {box-shadow:none}}

/* Exercise guides use the same source-aligned, section-bounded sticky lanes. */
.exercise.has-guidance {padding-top:44px}
.exercise.has-guidance:before {content:'';position:absolute;inset:0 auto 0 0;width:100px;padding:0;margin:0;border:0;border-radius:0 0 24px 0;background:linear-gradient(135deg,#67abb7,#3793a2 60%,#3e7998);box-shadow:none}
.has-guidance .rail-controls .section-marker {font-size:16px}
.guided-question {transition:background-color .16s,box-shadow .16s}
.guided-question.summary-preview {background:#fff9fb;box-shadow:-3px 0 #e4a1b9}
.guided-question.summary-selected {background:#fff7fa;box-shadow:-3px 0 #ba3e6a}
.exercise.summary-selected {box-shadow:inset 0 0 0 2px #c48baf}
@media(max-width:1000px) {.exercise.has-guidance:before {width:75px}}
@media(max-width:700px) {
 .exercise.has-guidance {padding-left:69px;padding-right:14px}
 .exercise.has-guidance:before {width:52px;opacity:.9}
 .has-guidance .rail-controls .section-marker {font-size:13px}
 .has-guidance .rail-overview-label {font-size:7px}
}
@media(prefers-reduced-motion:reduce) {.guided-question {transition:none}}
@media print {.exercise.has-guidance:before {display:none}.guided-question,.exercise.summary-selected {box-shadow:none!important;background:none!important}}

/* Answer spaces keep their original dimensions; the answer appears in the glass window. */
.blank[data-answer] {cursor:pointer;border-bottom-color:#4c879c;background:linear-gradient(transparent 78%,#e4f1f56b);border-radius:3px 3px 0 0;transition:background-color .15s}
.blank[data-answer]:hover,.blank[data-answer][aria-expanded=true] {background-color:#f7dbe7;border-bottom-color:#ad3f69}
.blank[data-answer]:focus-visible {outline:2px solid #b4507a;outline-offset:3px}
.answer-window #glass-title {margin-bottom:12px}
.pdf-answer {padding:15px 17px;border:1px solid #ffffffdd;border-radius:16px;background:#ffffffad;box-shadow:inset 0 1px #fff;color:#493448;font-weight:400;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.answer-explanation {margin:17px 0 0;line-height:1.6;color:#493448}
.answer-source {margin:15px 0 0;font:12px/1.5 Arial,sans-serif;color:#7e6479}
@media(prefers-reduced-motion:reduce) {.blank[data-answer] {transition:none}}
@media print {.blank[data-answer] {background:none;border-bottom-color:#aebcc5}}

.pdf-answer mark{color:#582238;background:#ffe58a;font-weight:700;border-radius:4px;padding:.08em .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;box-shadow:0 1px 0 #d9b948}

/* The vocabulary layer also works above the floating explanation, without changing PDF text. */
.popup{z-index:90}
.vocabulary-labels[hidden]{display:none}
.vocabulary-labels{position:fixed;inset:0;z-index:91;pointer-events:none;font-family:Arial,Helvetica,sans-serif;font-weight:400;font-style:normal}
.vocabulary-labels>span{position:fixed;z-index:91;max-width:min(320px,calc(100vw - 24px));width:max-content;text-align:center;line-height:1.2;padding:2px 6px;border-radius:5px;background:#fffef8;box-shadow:0 1px 5px #49344812}
.floating-meaning{color:#009b4c;font-size:1em}
.floating-ipa{color:#d20b26;font-size:.86em}
.glass-vocab{display:inline;white-space:normal;border-bottom:1px dotted #b697aa;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.glass-vocab.active,.glass-vocab:focus-visible{background:#ffed7e;box-shadow:2px 0 #ffed7e,-2px 0 #ffed7e;outline:none}
.has-vocabulary .pdf-answer,.has-vocabulary .summary-english{line-height:3}
.has-vocabulary .answer-explanation,.has-vocabulary .glass-points{line-height:2.6}

/* Phrases travel from the original prompt into its own answer line. */
.inline-formation {position:relative;isolation:isolate}
.inline-formation .answer-line {position:relative}
.formation-scaffold {display:block}
.formation-scaffold>.blank {width:70%;max-width:calc(100% - 4em)}
.inline-formation-answer {position:absolute;left:0;right:0;top:0;padding-top:calc((var(--leading) - 1.8)*.5em);padding-bottom:12px;line-height:1.8;visibility:hidden;pointer-events:none;font:inherit;line-height:1.8;color:#293448}
.formation-answer-group {border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.formation-answer-group mark {font:inherit;color:inherit;background:#ffe58a;border-radius:4px;padding:2px 0;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.formation-overlay {position:absolute;inset:0;pointer-events:none;z-index:3;overflow:visible;line-height:1.8}
.formation-source-mark {position:absolute;border-radius:4px;background:#ffdf72;opacity:.48;mix-blend-mode:multiply;box-shadow:0 1px #c49639}
.formation-source-mark.linked {background:#85d6e8;box-shadow:0 2px #21859d}
.formation-source-mark.removed {background:#f4bccd}
.formation-source-mark.removed::after {content:'';position:absolute;left:0;right:0;top:50%;border-top:2px solid #a31f55}
.formation-phrase-flying,.formation-added {position:absolute;display:block;color:#582238;background:#ffe58a;box-shadow:0 3px 10px #572d4526;border-radius:5px;font:inherit;line-height:1.4;padding:1px 3px;box-sizing:border-box;white-space:normal;width:max-content}
.formation-added {background:#f7d4e3;border:1px solid #bd5982;font-size:.9em}
.formation-added[hidden] {display:none}
.inline-formation-ui {position:relative;z-index:4;margin:4px 0 18px;line-height:1.5;color:#81314f}
.inline-formation-controls {display:flex;gap:8px;align-items:center;min-height:36px}
.inline-formation-controls button {font:600 13px/1.4 Arial,sans-serif;padding:6px 10px;min-height:34px;border:1px solid #e4b9cc;border-radius:9px;background:#fff4f8;color:#973159;cursor:pointer}
.inline-formation-controls .formation-play {min-width:110px;background:#a92e60;color:white;border-color:#a92e60}
.inline-formation-controls .formation-replay,.inline-formation-controls .formation-close {font-size:20px;padding:1px 9px;min-width:34px}
.inline-formation-controls button:disabled {opacity:.35;cursor:default}
.inline-formation-note {font:14px/1.5 Arial,sans-serif;margin:7px 0 0;height:4.5em;max-width:760px;overflow:auto;color:#81314f}
.inline-formation:not(.formation-started) .formation-next,.inline-formation:not(.formation-started) .formation-replay,.inline-formation:not(.formation-started) .formation-close {visibility:hidden}
.inline-formation.formation-started:not(.formation-complete) .prompt .vocab-word {pointer-events:none}
.given[data-formation] {cursor:pointer;text-decoration:underline dotted #ac6282;text-underline-offset:6px}
@media(max-width:600px) {
 .inline-formation-controls {gap:4px;flex-wrap:wrap}
 .inline-formation-controls button {font-size:11px;padding:6px;min-height:34px}
 .inline-formation-controls .formation-play {min-width:88px}
 .inline-formation-controls .formation-replay,.inline-formation-controls .formation-close {min-width:29px;font-size:19px;padding:1px 6px}
 .inline-formation-note {font-size:13px;height:7.5em}
}
@media print {.inline-formation-ui,.formation-overlay,.inline-formation-answer {display:none!important}.formation-scaffold {visibility:visible!important}}

/* Format-specific walkthroughs retain source text and use compact local evidence. */
.format-formation .formation-context {position:relative;line-height:1.7;margin:8px 0;visibility:hidden;border-left:3px solid #c982a2;padding:5px 10px;background:#fff7fa;border-radius:0 8px 8px 0}
.formation-context-label {display:block;font:600 11px/1.4 Arial,sans-serif;color:#925069;margin-bottom:3px}
.formation-context-phrase {display:block;line-height:1.7}
.formation-new-line {margin-top:8px;line-height:1.8!important}
.formation-placeholder {font:14px Arial;color:#b58a9c}
.format-formation .inline-formation-answer {padding-top:0;padding-bottom:4px}
.format-formation .inline-formation-note {max-width:none}
.format-formation .formation-alternative {font-size:.85em;color:#715e6a}
.format-formation.formation-started:not(.formation-complete) .formation-original .vocab-word {pointer-events:none}
@media print {.formation-context,.formation-new-line {display:none!important}}
/* Control labels may change during playback; their footprint must not. */
.format-formation .formation-play {width:118px;flex:0 0 118px;height:42px;min-width:0}
.format-formation .inline-formation-controls {min-height:42px}
@media(max-width:600px) {.format-formation .formation-play {width:88px;flex-basis:88px}}
/* Keep the source and its construction close enough to read together. */
.format-formation {--leading:2.6;line-height:2.6}
.format-formation .prompt,.format-formation .formation-original {line-height:2.6}
.format-formation .formation-context {font-size:.9em;margin:4px 0}
.format-formation .inline-formation-ui {margin-bottom:10px}
.inline-formation.formation-complete .prompt .vocab-word,.inline-formation.formation-complete .formation-original .vocab-word {pointer-events:auto}

/* Source-attached teaching cues; their absolute layer never pushes the lesson. */
.inline-formation-note.formation-callout {position:absolute;z-index:8;margin:0;height:auto;max-width:380px;overflow:visible;box-sizing:border-box;padding:4px 10px;border:1px solid #c6336c;border-radius:10px;background:#fff0f6;color:#9b1649;box-shadow:0 3px 10px #73284722;font:700 19px/1.2 Arial,sans-serif;pointer-events:none;transform-origin:center bottom;text-wrap:pretty}
.formation-callout[hidden] {display:none}
.formation-callout[data-tone="1"] {color:#6042a3;background:#f3edff;border-color:#9470c8}
.formation-callout[data-tone="2"] {color:#035f70;background:#e8faff;border-color:#238fa5}
.formation-callout[data-tone="complete"] {color:#146942;background:#edfff4;border-color:#64a98a}
.formation-callout-link {position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:7;pointer-events:none;color:#bb3267}
.formation-callout-link path {fill:none;stroke:currentColor;stroke-width:1.8}
.formation-callout-link circle {fill:currentColor}
.formation-callout-link[data-tone="1"] {color:#9470c8}
.formation-callout-link[data-tone="2"] {color:#238fa5}
.formation-callout-link[data-tone="complete"] {color:#64a98a}
.formation-progress {display:block;font:700 12px/1 Arial,sans-serif;color:#973159;min-width:24px;height:12px}
.inline-formation .formation-play {width:118px;flex:0 0 118px;height:42px;min-width:0}
.inline-formation {padding-top:36px!important}
.inline-formation-ui {padding-bottom:0}
.inline-formation .prompt,.inline-formation .formation-original {line-height:3.3}
.format-formation .formation-context {margin-top:30px}
.formation-context-label {display:none}
.formation-context-phrase {line-height:3.5}
@media(max-width:600px) {
 .inline-formation-note.formation-callout {font-size:18px;padding:4px 8px;border-radius:8px}
 .formation-progress {font-size:11px;min-width:22px}
 .inline-formation .formation-play {width:88px;flex-basis:88px}
}
@media print {.formation-callout,.formation-callout-link {display:none!important}}

/* Visible provenance stays beside the controls; opening it changes no page geometry. */
.inline-formation-controls {flex-wrap:wrap}
.formation-reference-row {flex:0 0 100%;line-height:1.3}
.inline-formation-controls .formation-theory {border:0;background:transparent;padding:5px 0;min-height:32px;color:#176879;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.formation-callout[role="button"] {pointer-events:auto;cursor:pointer}
.formation-callout:focus-visible,.formation-theory:focus-visible {outline:3px solid #16788e;outline-offset:3px}
.theory-reference-card {border:1px solid #b8dce2;border-radius:15px;padding:16px;background:#f5fdff;margin:0 0 16px}
.theory-reference-card h3 {font:700 19px/1.35 Arial,sans-serif;color:#175968;margin:0 0 10px}
.theory-source-label {font:600 13px/1.4 Arial,sans-serif;color:#496671;margin:0 0 10px}
.theory-reference-card blockquote {border-left:3px solid #43a0b0;margin:0;padding:0 0 0 13px;color:#253d49;font:400 18px/1.55 Arial,sans-serif}
.theory-reference-card blockquote p {margin:0 0 9px}
.theory-paraphrase,.theory-application {font:400 17px/1.6 Arial,sans-serif;color:#714458;margin:15px 0 5px}
.theory-jump,#theory-return {border:1px solid #4893a2;border-radius:10px;background:#e6f8fc;color:#155d6c;font:600 14px/1.5 Arial,sans-serif;padding:8px 12px;cursor:pointer}
.theory-jump {margin-top:12px}
#theory-return {position:fixed;right:16px;bottom:16px;z-index:50;max-width:calc(100vw - 32px);box-shadow:0 4px 18px #174b5733;background:#fff}
.theory-source-highlight {outline:3px solid #d8a635;outline-offset:6px;background:#fff3b9;border-radius:5px;scroll-margin-top:calc(var(--toolbar-height) + 25px)}
@media(max-width:600px){.theory-reference-card {padding:12px}.theory-reference-card blockquote {font-size:17px}.inline-formation-controls .formation-theory {font-size:13px}}
@media print{#theory-return {display:none!important}}

/* Explain the rule in complete Vietnamese sentences, with source examples. */
.theory-paraphrase {margin:0 0 24px}
.theory-explanation-label {font:600 13px/1.4 Arial,sans-serif;color:#77586a;margin:0 0 14px}
.theory-explanation-part {margin:0 0 22px}
.theory-explanation-part h4 {font:700 18px/1.5 Arial,sans-serif;color:#87254d;margin:0 0 6px}
.theory-explanation-part p {margin:0 0 10px}
.theory-rule-meaning,.theory-example-meaning {font:400 17px/1.65 Arial,sans-serif;color:#4d3f49}
.theory-explanation-part .theory-example-label {font:600 12px/1.4 Arial,sans-serif;color:#496671;margin:12px 0 5px}
.theory-source-example {font:400 17px/1.65 Arial,sans-serif;color:#253d49;border-left:3px solid #deb85c;padding:7px 11px;background:#fffbef;border-radius:0 7px 7px 0}
.theory-source-example mark {background:#ffe58f;color:inherit;padding:1px 2px;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.theory-example-meaning {color:#65514a}

/* Automatic playback and a stable, direct-access step picker. */
.inline-formation-controls .formation-play {border-radius:14px;background:linear-gradient(145deg,#b8376b,#972450);border:1px solid #982c53;box-shadow:inset 0 1px 0 #ffffff30,0 2px 5px #82234618}
.formation-step-picker {flex:0 0 auto;max-width:100%;width:max-content;min-height:54px;display:flex;flex-direction:column;justify-content:flex-start}
.formation-step-dots {display:flex;align-items:center;gap:1px;min-height:44px;flex-wrap:nowrap}
.inline-formation-controls .formation-step-dot {display:grid;place-items:center;flex:0 0 24px;width:24px;height:28px;min-height:28px;min-width:0;border:0;border-radius:8px;padding:0;background:transparent;cursor:pointer}
.formation-step-dot span {display:block;width:8px;height:8px;border-radius:50%;background:#d5b5c4;box-shadow:inset 0 0 0 1px #ba91a4;transition:transform 140ms,background-color 140ms,box-shadow 140ms}
.formation-step-dot.is-complete span {background:#b26988;box-shadow:none}
.formation-step-dot.is-current span {background:#a72d5e;transform:scale(1.35);box-shadow:0 0 0 3px #f4dbe6}
.formation-step-dot:focus-visible {outline:2px solid #176879;outline-offset:1px}
@media(hover:hover){.inline-formation-controls .formation-step-dot:hover {background:#f8e7ef}}
.formation-step-hint {font:400 11px/1.3 Arial,sans-serif;color:#755363;padding:2px 0 0;max-width:174px}
.step-touch-hint {display:none}
@media(hover:none){.step-mouse-hint {display:none}.step-touch-hint {display:inline}}
@media(max-width:600px){.inline-formation-controls .formation-step-dot {flex-basis:20px;width:20px}.formation-step-dots {gap:0}.inline-formation-controls .formation-play {border-radius:12px}}
@media(prefers-reduced-motion:reduce){.formation-step-dot span {transition:none}}

/* Keep selection and clearing separate, on the same row. */
.inline-formation-controls {align-items:flex-start}
.inline-formation-controls .formation-play {height:44px;box-sizing:border-box;line-height:1.25;padding:4px 6px}
.formation-clear-group {display:flex;align-items:center;margin-left:14px;padding-left:14px;border-left:1px solid #d8c3cd;min-height:28px}
.inline-formation-controls .formation-close {background:#faf8f9;border-color:#d8cbd1;color:#795564}
.inline-formation:not(.formation-started) .formation-close {visibility:visible}
@media(max-width:600px){.formation-clear-group {margin-left:10px;padding-left:8px}}

/* A blank reveals the answer directly; Cách làm keeps the teaching sequence. */
.blank[data-answer] {position:relative}
.blank[data-answer]::after {content:"Hiện đáp án";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 12px/1 Arial,sans-serif;color:#9d2453;white-space:nowrap;opacity:0;pointer-events:none}
.blank[data-answer]:hover::after,.blank[data-answer]:focus-visible::after {opacity:1}
.blank[data-answer]:focus-visible {background-color:#f7dbe7;border-bottom-color:#ad3f69}
.formation-answer-only .formation-overlay,.formation-answer-only .formation-context {visibility:hidden!important}
.inline-formation.formation-answer-only .prompt .vocab-word,.format-formation.formation-answer-only .formation-original .vocab-word {pointer-events:auto}
@media(max-width:600px){.blank[data-answer]::after {font-size:10px}}
@media(hover:none){.blank[data-answer]::after {opacity:1}.blank[data-answer] {background-color:#fbeaf1}}
@media print{.blank[data-answer]::after {display:none}}

/* Answer vocabulary keeps the exact answer typography and uses floating labels. */
.inline-formation.formation-complete .inline-formation-answer .vocab-word {pointer-events:auto;cursor:pointer}
.inline-formation-answer .glass-vocab {border-bottom:0}
.vocab-word.audio-playing {text-decoration:underline;text-decoration-color:#b0295b;text-decoration-thickness:2px;text-underline-offset:4px}
#audio-feedback {position:fixed;bottom:16px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);z-index:120;padding:10px 14px;border:1px solid #d59bad;border-radius:12px;background:#fff5f8;color:#8b244a;font:14px/1.4 Arial,sans-serif;box-shadow:0 4px 18px #50243b22}

/* A retained grammatical reason, reserved before playback to avoid layout jumps. */
.formation-recap {font:16px/1.55 Arial,sans-serif;color:#215b48;background:#effaf4;border-left:3px solid #66a487;padding:8px 12px;margin:10px 0 0;visibility:hidden;max-width:900px}
.formation-source-difference {font:14px/1.5 Arial,sans-serif;color:#71475b;padding:6px 10px;background:#fff6e8;border-left:3px solid #c89641;margin:8px 0}
.theory-more {margin-top:12px}.theory-more>summary {cursor:pointer;color:#176879;font:700 16px/1.5 Arial,sans-serif;padding:6px 0}
@media(max-width:600px){.formation-recap{font-size:15px}.formation-source-difference{font-size:13px}}
@media print{.formation-recap,.formation-source-difference{display:none}}

/* Measure cue room before interaction, keeping each cue by its source on phones too. */
.inline-formation {padding-top:var(--cue-top,36px)!important}
.inline-formation .prompt,.inline-formation .formation-original,.inline-formation .formation-context-phrase {line-height:var(--cue-space,66px)!important}

/* While stepping, controls follow within their own question so a visible cue
   never forces a phone learner to scroll away from the next-step dots. */
.inline-formation-ui {display:contents}
.inline-formation-controls {margin:4px 0 10px}
.formation-controls-follow .inline-formation-controls {position:sticky;bottom:8px;z-index:9;background:#fffafd;box-shadow:0 2px 10px #69244618;border-radius:8px}

/* Active instruction bubbles must paint above the neighboring section rail. */
.inline-formation.formation-started {z-index:17}
/* Long contextual glosses use the existing opaque floating label, once. */
.vocab-word.floating-annotation .annotation {visibility:hidden}

.vocabulary-labels>span:empty {display:none}

/* A supplied answer flows naturally; it is not an empty input area. */
.blank.given[data-answer]{display:inline;width:auto;min-width:0;max-width:none;height:auto;white-space:normal;background:none;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.blank.given[data-answer]::after{display:none}
.formation-answer-label{font:600 15px/1.5 Arial,sans-serif;color:#8e2c57;margin:8px 0}
.formation-source-key{font:400 16px/1.6 Arial,sans-serif;color:#365664;margin:8px 0}
.formation-context.has-source-label .formation-context-label{display:block;font-size:15px}
.questions>li[data-label]::marker{content:attr(data-label) '. '}
.source-figure{margin:20px 0}.source-figure img{width:100%;height:auto;display:block}.source-figure figcaption{font:14px/1.5 Arial,sans-serif;color:#55717d}
.source-answer-pool{border:1px solid #cfe2e8;border-radius:16px;padding:16px;margin:20px 0;background:#f3fbfd}.source-answer-pool summary{cursor:pointer;font-weight:700;color:#176a80}

/* Answer phrases occupy the original blank; surrounding source stays interactive. */
.formation-inline-gaps .formation-gap-answer[hidden] {display:none!important}
.formation-inline-gaps .formation-gap-answer {
 position:static;display:inline;visibility:visible;padding:0;font:inherit;line-height:inherit;
 white-space:normal;pointer-events:auto;
}
.formation-inline-gaps.formation-started .blank.formation-inline-slot {
 display:inline;width:auto;min-width:0;max-width:none;height:auto;padding:0;
 border:0;background:none;white-space:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.formation-inline-gaps.formation-started .formation-inline-slot::after {display:none}
.formation-inline-gaps.formation-started .formation-gap-scaffold {position:absolute;pointer-events:none}
@media print {
 .formation-inline-gaps .formation-gap-answer {display:none!important}
 .formation-inline-gaps .formation-gap-scaffold {position:static!important;visibility:visible!important}
 .formation-inline-gaps .blank.formation-inline-slot:not(.given) {display:inline-block;width:9em;min-width:4em;height:1em;border-bottom:1px dotted #aebcc5}
}

/* Keep source-linked exercises compact; reserve cue room only while teaching. */
.questions > .formation-inline-gaps {
 padding-top:4px!important;
 margin-bottom:14px;
}
.formation-inline-gaps .prompt,
.formation-inline-gaps .formation-original,
.formation-inline-gaps .formation-context-phrase {
 line-height:2!important;
}
.formation-inline-gaps .prompt p {margin:0 0 .6em;line-height:inherit}
/* Hidden animation sources must not reserve an empty block above the prompt. */
.formation-inline-gaps .formation-context[aria-hidden="true"],
.formation-inline-gaps.formation-answer-only .formation-context {display:none}
.formation-inline-gaps .formation-context {margin:4px 0}
.exercise .questions {margin-top:8px}

.formation-inline-gaps .inline-formation-controls {margin:8px 0 0}
.formation-inline-gaps .formation-recap {margin:6px 0 0;padding:7px 12px}
.formation-inline-gaps .formation-recap[aria-hidden="true"] {display:none}
.formation-inline-gaps:not(.formation-complete) .formation-source-difference {display:none}
/* The current cue uses only its own height below the controls. No hover-driven
   resizing of the sentence or controls, so step buttons remain click targets. */
.formation-inline-gaps .formation-callout {
 position:relative;left:auto!important;top:auto!important;
 margin:8px 0 0;max-width:min(520px,100%)!important;
}
.formation-inline-gaps .formation-callout-link {display:none!important}
/* Inactive dots remain available to click, without a hover preview or glow. */
[data-formation-hover="off"] .inline-formation-controls .formation-step-dot:hover {background:transparent}
@media print {
 .questions > .formation-inline-gaps {padding-top:0!important;margin-bottom:12px}
 .formation-inline-gaps .prompt {line-height:2!important}
}

/* Paint the selected bank phrase and its flight above the frozen bank itself. */
.formation-bank-overlay {
 position:fixed;inset:0;z-index:84;pointer-events:none;overflow:visible;
}
.formation-bank-overlay[hidden] {display:none}
.formation-bank-overlay .formation-phrase-flying {z-index:1}
@media print {.formation-bank-overlay {display:none!important}}

/* NATIVE_LAYOUT_CSS */
/* Native book blocks: editable text, standalone illustrations, flexible columns. */
.native-book-layout {--leading:1.65}
.native-book-layout .book-section {padding:18px 28px 22px 120px;background:linear-gradient(180deg,#fff,#f6fbfd)}
.native-book-layout .learning-chunk {margin:4px 0 8px;padding-left:0}
.native-book-layout .book-section p {line-height:1.65;margin:5px 0 9px}
.native-card,.native-illustrated,.native-columns {border:1px solid #e0e8ee;border-radius:16px;background:#fff;box-shadow:3px 5px 1px #c7c6dc66;margin:14px 0 22px;padding:18px 20px;min-width:0}
.native-illustrated {display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;align-items:center}
.native-illustrated figure {margin:0;min-width:0}
.native-illustrated img {display:block;width:100%;height:auto;object-fit:contain;max-height:380px}
.native-illustrated-text {min-width:0}
.native-art-right {grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr)}
.native-art-right figure {grid-column:2;grid-row:1}
.native-art-right .native-illustrated-text {grid-column:1;grid-row:1}
.native-columns {display:grid;grid-template-columns:repeat(var(--columns,2),minmax(0,1fr));gap:20px}
.native-column {min-width:0}
.native-column+.native-column {border-left:1px solid #c4d6dd;padding-left:20px}
.native-column>:first-child {margin-top:0!important}
.native-card>.native-columns {border:0;border-radius:0;box-shadow:none;margin:0;padding:0 0 12px}
.native-rows {border:1px solid #afc9d4;padding:5px 12px;margin:12px 0;line-height:1.55}
.native-rows p+p {border-top:1px solid #d6e2e7}
.native-example {position:relative;padding-left:24px}
.native-example:before {content:'';position:absolute;left:3px;top:.57em;width:10px;height:10px;border:1px solid #a9c4ce;border-radius:3px}
.native-role {position:relative;background:#d9edf3;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.native-role:after {content:attr(data-caption);position:absolute;top:100%;left:50%;transform:translateX(-50%);font:italic .65em/1.4 Arial,sans-serif;color:#435764;white-space:nowrap}
.native-book-layout .native-role-line {line-height:2.1;margin-bottom:20px}
.native-book-layout .vocab-word {text-decoration-color:#8ba7af}
.native-book-layout .book-section:before {background:linear-gradient(110deg,#69b2bd,#368ba2 70%,#337c91)}
.book-page {scroll-margin-top:calc(var(--toolbar-height) + 12px)}
@media(max-width:1000px) {
 .native-book-layout .book-section {padding-left:94px;padding-right:20px}
 .native-illustrated {gap:16px;padding:14px}
}
@media(max-width:700px) {
 .native-book-layout .book-section {padding-left:65px;padding-right:12px}
 .native-illustrated,.native-columns {display:flex;flex-direction:column;gap:14px;padding:14px 12px;border-radius:10px}
 .native-illustrated figure {max-width:260px;align-self:center}
 .native-column+.native-column {border-left:0;border-top:1px solid #c4d6dd;padding:14px 0 0}
 .native-illustrated-text {width:100%}
 .native-column {width:100%}
 .native-rows {padding:5px 8px}
 .native-example {padding-left:20px}
}

.page-content{min-width:0;background:#fff}

.native-book-layout p.native-form{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 12px;align-items:baseline}
.native-form-title{grid-column:1/-1;font-style:italic}
.native-form-label{color:#536973;font-style:italic}
.native-form-value{font-weight:600}

/* Sticky is bounded by its exercise, so the next exercise replaces it naturally. */
.exercise-sticky-heading {
 position:sticky;top:var(--toolbar-height);z-index:20;
 background:#fff;border-bottom:1px solid #dbe5e9;
 padding:12px 0 14px;box-shadow:0 5px 6px -6px #28424e66;
 max-height:max(140px,calc((100dvh - var(--toolbar-height)) * .45));
 overflow:auto;scrollbar-width:thin;
}
.exercise .exercise-sticky-heading h3 {margin:0 0 8px;line-height:1.4}
.exercise-heading-row {display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;margin-bottom:8px}
.exercise .exercise-heading-row h3 {margin:0}
.exercise-reveal-all {
 font:600 14px/1.4 Arial,sans-serif;color:#972450;
 background:#fff5fa;border:1px solid #c8799c;border-radius:10px;
 padding:8px 14px;min-height:40px;max-width:100%;cursor:pointer;
 text-align:left;
}
.exercise-reveal-all:hover {background:#f9e5ee}
.exercise-reveal-all:focus-visible {outline:3px solid #176879;outline-offset:3px}
.exercise-sticky-heading .instruction {margin:0;line-height:1.6}
.exercise-sticky-heading .word-bank {margin:12px 0 0;line-height:1.6}
.exercise .questions>li {scroll-margin-top:calc(var(--toolbar-height) + var(--exercise-heading-height,180px) + 24px)}
@media(max-width:700px) {
 .exercise-sticky-heading {padding:10px 0;font-size:.92em}
 .exercise-sticky-heading .word-bank {padding:8px 10px;margin-top:8px}
}
@media print {
 .exercise-reveal-all {display:none}
 .exercise-sticky-heading {position:static;max-height:none;overflow:visible;box-shadow:none}
}

/* Guidance shares the controls row whenever there is enough horizontal room. */
.formation-inline-gaps .formation-guidance-details {
 flex:1 1 280px;min-width:0;align-self:flex-start;
 display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
}
.formation-inline-gaps .formation-guidance-details .formation-theory {
 flex:0 0 auto;
}
.formation-inline-gaps .formation-guidance-details .formation-callout,
.formation-inline-gaps .formation-guidance-details .formation-recap {
 margin:0;box-sizing:border-box;max-width:100%!important;
 flex:0 1 auto;overflow-wrap:anywhere;
}
@media(max-width:700px) {
 .formation-inline-gaps .formation-guidance-details {flex-basis:100%}
}

/* Compact exercise opening: content follows the title without a help banner. */
.exercise-page .page-heading {min-height:82px}
.exercise-page .page-heading h2 {margin:12px 55px}
.exercise-page .page-content>.exercise:first-child {padding-top:4px}
@media(max-width:700px) {
 .exercise-page .page-heading {min-height:72px}
 .exercise-page .page-heading h2 {margin:10px 20px}
}

/* Larger answer invitation; filled answers retain the sentence's natural height. */
@media screen {
 .formation-inline-gaps:not(.formation-started) .blank[data-answer]:not(.given) {
  height:1.65em;min-height:36px;min-width:7em;vertical-align:middle;border-radius:6px 6px 0 0;
 }
 .blank[data-answer]::after {
  font-size:clamp(18px,.85em,26px);font-weight:700;line-height:1.2;
 }
}

/* Opaque room around vocabulary annotations masks neighbouring lesson text. */
.vocabulary-labels > span {
 box-sizing:border-box;
 max-width:min(560px,calc(100vw - 24px));
 padding:10px 18px;
 border-radius:8px;
 background:#fff;
 box-shadow:0 2px 8px #49344812;
 overflow-wrap:anywhere;
}

/* Plain bank text must flow inline: vocabulary spans are not grid columns. */
.word-bank {display:block}
.matching-source-table {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;margin:12px 0 0;line-height:1.6}
.matching-source-table .matching-prompts,.exercise-sticky-heading .matching-source-table .word-bank {margin:0;padding:12px 16px;border:1px solid #dcc9cd;border-radius:12px;background:#fff;min-width:0;line-height:1.6}
.matching-source-table .matching-prompts {padding-left:2.1em}
.matching-prompts li {padding-left:.2em;margin:0}
.matching-options .matching-option {display:flex;align-items:baseline;gap:.5em}
.matching-option .matching-letter {flex:0 0 .8em;color:#922039;font-weight:700}
.matching-option .matching-sentence {min-width:0}
.matching-given {text-decoration:line-through;text-decoration-thickness:1px}
@media(max-width:700px){.matching-source-table {gap:8px;grid-template-columns:1fr;font-size:.9em}.matching-source-table .matching-prompts,.exercise-sticky-heading .matching-source-table .word-bank{padding-top:8px;padding-bottom:8px}}

/* MR. LAM red-and-gold banner, with readable native navigation controls. */
.toolbar {
 background:
  linear-gradient(180deg,#ffffff26,transparent 20%,transparent 76%,#23000433),
  radial-gradient(120% 155% at 52% 35%,#c81225 0%,#980010 52%,#690008 100%);
 border:1px solid #f6ddd5;border-bottom:3px solid #c6a250;
 border-radius:0 0 22px 22px;
 box-shadow:inset 0 0 0 1px #ffffffa6,inset 0 0 0 3px #ffffff24,
  inset 0 2px 2px #ffffff73,inset 0 -2px 2px #3e00174d,0 5px 14px #52122324;
 backdrop-filter:none;-webkit-backdrop-filter:none;
}
.toolbar .brand {color:#fff;min-width:0;flex-shrink:1}
.toolbar .brand strong {font-weight:800;text-shadow:0 1px 2px #59000866}
.toolbar .brand small {color:#ffe393;font-weight:600}
.toolbar .monogram {
 border:2px solid #e8c870;background:linear-gradient(145deg,#fffef8,#fff2cf);
 color:#990b21;box-shadow:inset 0 0 0 2px #fff,0 2px 6px #53000b40;
}
.toolbar .controls {flex-shrink:0}
.toolbar .controls button,.toolbar .controls select {
 color:#8e1229;border:1px solid #efd9b1;border-radius:14px;
 background:linear-gradient(145deg,#fff,#fff8f1);
 box-shadow:inset 0 1px 1px #fff,0 2px 5px #50000b26;
 font-weight:700;
}
.toolbar .controls button:not(:disabled):hover,
.toolbar .controls select:hover {background:#fff0d9;border-color:#ffdb85}
.toolbar .controls button:disabled {opacity:.48}
.toolbar :is(button,select,a):focus-visible {outline:3px solid #ffe08a;outline-offset:3px}
.toolbar .controls select option {color:#651329;background:#fff}

/* Ruby glass controls against the quiet silver section rails. */
.glass-rail-button {
 color:#fff;text-shadow:0 1px 2px #52041799;border:1px solid #ffe0e8bd;
 background:radial-gradient(120% 90% at 14% 0%,#ffffff70,transparent 56%),linear-gradient(150deg,#d83258eb 0%,#b10c35eb 48%,#850b2bf5 100%);
 box-shadow:inset 0 1px 1px #ffffffe6,inset 1px 0 1px #ffffff75,inset 0 -2px 3px #4e052866,inset 0 0 0 2px #ffffff1f,0 3px 8px #5d0a2c38;
 backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
 transition:background-color 160ms,box-shadow 160ms,border-color 160ms;
}
.glass-rail-button:hover {
 color:#fff;border-color:#fff0cd;
 background:radial-gradient(120% 90% at 14% 0%,#ffffff85,transparent 56%),linear-gradient(150deg,#e64465f2,#c31540f2 48%,#960c32f5);
 box-shadow:inset 0 1px 2px #fff,inset 0 -2px 3px #71052c66,inset 0 0 0 2px #ffffff26,0 4px 10px #65092345;
}
.glass-rail-button[aria-expanded=true] {
 color:#fff5c4;border-color:#ffe49b;
 background:radial-gradient(120% 90% at 14% 0%,#ffffff60,transparent 56%),linear-gradient(150deg,#c9274e,#990b2d 55%,#720824);
 box-shadow:inset 0 1px 2px #fff1c8,inset 0 -2px 3px #4a041c80,0 0 0 2px #ffe09c66,0 4px 10px #5d0a2c45;
}
.glass-rail-button:focus-visible {outline:3px solid #b84a60;outline-offset:3px}
@media(max-width:700px) {
 .toolbar {border-radius:0 0 17px 17px}
 .toolbar .brand {width:100%}
 .toolbar .brand strong {letter-spacing:.7px}
 .toolbar .controls button,.toolbar .controls select {border-radius:11px}
}
@media(prefers-reduced-motion:reduce) {.glass-rail-button {transition:none}}

/* The lesson starts directly below the banner and uses the full available width. */
body {background:#f5f6f8}
#reader {max-width:none;width:100%;padding:0;margin:0}
.source-access {display:none}
.book-page {border-left:0;border-right:0;margin-bottom:16px;box-shadow:0 5px 16px #75162b0b}
.page-heading,.exercise-page .page-heading {
 color:#fff5dd;
 background:radial-gradient(ellipse at 12% 0%,#ffb8c34d,transparent 65%),linear-gradient(120deg,#be1735,#980d29 70%,#760b22);
 border:1px solid #f2c5c9;border-radius:0 0 22px 22px;
 box-shadow:inset 0 1px 1px #fff9,inset 0 -2px 3px #56031d40,0 3px 8px #72112a14;
 min-height:86px;
}
.page-heading h2,.exercise-page .page-heading h2 {font-size:1.45em;font-weight:600;margin:18px 30px;text-shadow:0 1px 2px #65001966}
.unit-badge {
 color:#fff;
 background:radial-gradient(ellipse at 5% 0%,#ffffff80,transparent 67%),linear-gradient(145deg,#ed6e86b3,#c22649c9 55%,#9d1436e6);
 border:1px solid #ffffff75;border-radius:0 0 23px 0;
 box-shadow:inset 0 1px 2px #fff9,inset 1px 0 1px #ffffff70,inset 0 -2px 3px #54071f45,2px 0 8px #6500221a;
 backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
}
.exercise-page .unit-badge {border-radius:0 0 0 23px}
.book-section,.native-book-layout .book-section {background:#fff;border-bottom-color:#e4e7eb}
.book-section:before,.native-book-layout .book-section:before,.exercise.has-guidance:before {
 background:linear-gradient(105deg,#f9fafbef,#edf0f4e8);
 border-right:1px solid #e0e4e9;box-shadow:inset 1px 0 1px #fff;
 backdrop-filter:blur(16px) saturate(105%);-webkit-backdrop-filter:blur(16px) saturate(105%);
 opacity:1;
}
.native-card,.native-illustrated,.native-columns {border-color:#e4e7eb;box-shadow:inset 0 1px 0 #fff,0 2px 6px #18263809}
.exercise:not(.has-guidance):before {color:#fff4d8;background:linear-gradient(145deg,#d94b68,#a50d31 65%,#800b26);border-color:#eab6c3;box-shadow:inset 0 1px 2px #fffd,0 2px 5px #7d15321f}
@media(max-width:700px){.page-heading,.exercise-page .page-heading{min-height:74px;border-radius:0 0 15px 15px}.page-heading h2,.exercise-page .page-heading h2{font-size:1.12em;margin:14px 16px}.unit-badge strong{font-size:32px}}