:root {
  --ink:#20242c;
  --navy:#111c59;
  --teal:#388b9d;
  --paper:#fff;
  --font-size:20px;
  --leading:3.6;
  --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 {
  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}