@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap");
:root{
  --bmd-green:#385f4b;
  --bmd-green-dark:#284536;
  --bmd-sage:#dce9df;
  --bmd-sage-light:#f4f8f5;
  --bmd-purple:#6f3f91;
  --bmd-orange:#d9872f;
  --bmd-yellow:#fff0b6;
  --bmd-white:#ffffff;
  --bmd-ink:#17221c;
  --bmd-muted:#59665f;
  --bmd-line:#b9c4bd;
  --bmd-error:#9a2f2f;
  --bmd-body-size:19px;
  --bmd-ui-scale:1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:var(--bmd-ink);
  font-size:var(--bmd-body-size);
  font-family:"Lexend Deca","Poppins",Verdana,Arial,sans-serif;
  line-height:1.58;
}
button{font:inherit}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:8px;background:#fff;border:2px solid var(--bmd-green);padding:8px;z-index:1000}
.topbar{
  position:sticky;top:0;z-index:60;
  background:#fff;
  border-bottom:3px solid var(--bmd-green);
}
.topbar-inner{
  max-width:1160px;margin:auto;padding:10px 16px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
}
.brand{font-weight:700;color:var(--bmd-green-dark);margin-right:auto}
.tool-status{font-size:.9rem;color:var(--bmd-muted)}
.page-nav{display:flex;gap:7px;align-items:center}
.nav-btn,.page-btn,.support-button{
  border:2px solid var(--bmd-green);
  background:#fff;color:var(--bmd-green-dark);
  border-radius:8px;min-height:42px;padding:7px 12px;
  font-weight:700;cursor:pointer;
}
.page-btn{width:42px;padding:0}
.page-btn.active{background:var(--bmd-sage);color:var(--bmd-green-dark)}
.nav-btn:disabled,.bottom-btn:disabled{opacity:.42;cursor:not-allowed}
button:focus-visible,.sentence:focus-visible,.vocab:focus-visible{
  outline:3px solid var(--bmd-orange);outline-offset:3px;
}
main{max-width:1160px;margin:22px auto 84px;padding:0 18px}
.development-label{
  border:2px solid var(--bmd-orange);
  color:var(--bmd-green-dark);
  background:#fff;
  border-radius:8px;padding:8px 12px;margin-bottom:18px;font-weight:700;
}
.screen{display:none}
.screen.active{display:block}
.screen-title{
  color:var(--bmd-green-dark);
  font-size:clamp(1.55rem,3vw,2.2rem);
  margin:.2rem 0 1.15rem;
}
.card,.reading-box,.image-card{
  background:#fff;border:2px solid var(--bmd-line);
  border-radius:12px;padding:18px 20px;margin:0 0 18px;
}
.reading-box{border-left:6px solid var(--bmd-green)}
.reading-box h2,.card h2{
  color:var(--bmd-green-dark);font-size:1.24rem;margin:0 0 10px;
}
.reading-layout,.image-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 190px;
  gap:16px;align-items:start;margin-bottom:18px;
}
.note-access{
  background:#fff;border:2px solid var(--bmd-green);
  border-radius:10px;padding:13px;
}
.note-access h3{font-size:1rem;color:var(--bmd-green-dark);margin:0 0 8px}
.note-access p{font-size:.9rem;color:var(--bmd-muted);margin:.3rem 0 .8rem}
.sentence{
  cursor:pointer;border-radius:5px;padding:2px 3px;margin-left:-3px;
}
.sentence:hover,.sentence.active-support{background:var(--bmd-yellow)}
.vocab{
  color:var(--bmd-purple);
  font-weight:650;
  text-decoration:none;
  cursor:pointer;
}
.vocab:hover{background:var(--bmd-sage-light)}
.response-lines{
  margin-top:12px;height:72px;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 30px,#747d78 31px);
}
.choice-row{display:flex;gap:18px;flex-wrap:wrap;margin:9px 0}
.paper-box{width:21px;height:21px;border:2px solid var(--bmd-ink);display:inline-block;background:#fff}
.choice{display:flex;align-items:center;gap:7px}
.diagram{display:block;max-width:100%;height:auto;margin:auto}
.caption{font-size:.9rem;color:var(--bmd-muted);margin-top:8px}
.pathway,.chain{display:flex;flex-direction:column;align-items:center;gap:7px}
.path-step,.chain-step{
  width:min(760px,100%);background:#fff;
  border:2px solid var(--bmd-line);border-radius:10px;padding:11px;text-align:center;
}
.blank{display:inline-block;min-width:180px;border-bottom:2px solid var(--bmd-ink);height:1.3em;vertical-align:bottom}
.chain-blank{height:58px;background:#fff;border:2px solid var(--bmd-line);border-radius:10px;width:min(760px,100%)}
.arrow{font-size:1.45rem;color:var(--bmd-green);font-weight:700}
.paper-table{width:100%;border-collapse:collapse;margin-top:12px}
.paper-table th,.paper-table td{border:2px solid var(--bmd-line);padding:10px;text-align:left;vertical-align:top}
.paper-table th{background:var(--bmd-sage-light);color:var(--bmd-green-dark)}
.paper-table td{height:72px}
.screen-bottom{display:flex;justify-content:space-between;gap:10px;margin-top:24px}
.bottom-btn{
  border:2px solid var(--bmd-green);background:#fff;color:var(--bmd-green-dark);
  border-radius:8px;padding:10px 15px;font-weight:700;cursor:pointer;
}
.contextual-support{
  position:fixed;
  right:12px;
  left:auto;
  top:110px;
  z-index:110;
  width:min(380px,calc(100vw - 24px));
  background:#fff;
  border:3px solid var(--bmd-green);
  border-radius:12px;
  box-shadow:0 8px 22px #0002;
  display:none;
}
.contextual-support.open{display:block}
.support-head{
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:2px solid var(--bmd-sage);padding:9px 11px;
}
.support-head h3{margin:0;color:var(--bmd-green-dark);font-size:1rem}
.close-tool{border:0;background:#fff;color:var(--bmd-green-dark);font-size:1.4rem;cursor:pointer}
.support-actions{display:flex;gap:6px;flex-wrap:wrap;padding:9px 11px;border-bottom:1px solid var(--bmd-line)}
.support-actions button{
  border:2px solid var(--bmd-green);background:#fff;color:var(--bmd-green-dark);
  border-radius:7px;padding:5px 8px;font-weight:700;cursor:pointer;
}
.support-content{padding:11px;max-height:300px;overflow:auto}
.support-content h4{color:var(--bmd-green-dark);margin:.2rem 0}
.vocab-definition,
.morphology-section,
.morphology-synthesis,
.lesson-meaning{
  border:2px solid var(--bmd-line);
  border-radius:10px;
  padding:10px 12px;
  margin-top:10px;
  background:#fff;
}
.vocab-definition{
  border-left:5px solid var(--bmd-green);
}
.morphology-section{
  border-left:5px solid var(--bmd-purple);
}
.morphology-synthesis{
  border-left:5px solid var(--bmd-orange);
}
.lesson-meaning{
  border-left:5px solid var(--bmd-sage);
}
.vocab-definition h4,
.morphology-section h4,
.morphology-synthesis h4,
.lesson-meaning h4{
  margin:0 0 6px;
  color:var(--bmd-green-dark);
}
.word-learning-note{
  border:2px solid var(--bmd-line);
  border-left:5px solid var(--bmd-purple);
  border-radius:10px;
  padding:10px 12px;
  margin-top:10px;
  background:#fff;
}
.margin-help-panel{
  position:fixed;inset:18px;z-index:130;background:#fff;
  border:3px solid var(--bmd-green);border-radius:14px;
  box-shadow:0 10px 30px #0003;display:none;overflow:auto;
}
.margin-help-panel.open{display:block}
.margin-help-inner{max-width:980px;margin:auto;padding:18px 22px 36px}
.margin-help-top{
  position:sticky;top:0;background:#fff;border-bottom:2px solid var(--bmd-sage);
  display:flex;justify-content:space-between;align-items:center;padding:8px 0;z-index:2;
}
.margin-help-top h2{color:var(--bmd-green-dark);margin:0;font-size:1.35rem}
.note-type{
  border:2px solid var(--bmd-line);border-left:6px solid var(--bmd-green);
  border-radius:10px;padding:12px 14px;margin:12px 0;background:#fff;
}
.note-type h3{color:var(--bmd-green-dark);margin:0 0 5px}
.example{font-weight:650}
.objective{color:var(--bmd-muted)}
.weak-notes{
  border:2px solid var(--bmd-error);border-radius:10px;padding:12px 14px;margin-top:18px;background:#fff;
}
.weak-notes h3{color:var(--bmd-error);margin-top:0}
.weak-list{columns:2;column-gap:26px}

.lesson-identity{
  max-width:1160px;
  margin:18px auto 8px;
  padding:0 18px;
}
.lesson-identity h1{
  margin:0;
  color:var(--bmd-green-dark);
  font-size:clamp(1.7rem,3vw,2.4rem);
  line-height:1.22;
}
.lesson-identity p{
  margin:.35rem 0 0;
  color:var(--bmd-muted);
  font-size:.92em;
}
.text-size-controls{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.text-size-controls .size-label{
  color:var(--bmd-muted);
  font-size:.84rem;
  font-weight:700;
}
.size-btn{
  border:2px solid var(--bmd-green);
  background:#fff;
  color:var(--bmd-green-dark);
  border-radius:8px;
  min-height:38px;
  padding:5px 9px;
  font-weight:700;
  cursor:pointer;
}
.size-btn.active{
  background:var(--bmd-sage);
}
html[data-text-size="standard"]{--bmd-body-size:19px}
html[data-text-size="large"]{--bmd-body-size:21px}
html[data-text-size="larger"]{--bmd-body-size:23px}
html[data-text-size="largest"]{--bmd-body-size:25px}

@media(max-width:800px){
  .contextual-support{right:8px;left:8px;top:auto;bottom:8px;width:auto;max-height:70vh;overflow:auto}

  .reading-layout,.image-layout{grid-template-columns:1fr}
  .topbar-inner{justify-content:center}.brand{width:100%;text-align:center;margin:0}
  .tool-status{display:none}.page-nav{width:100%;justify-content:center}
  .card,.reading-box,.image-card{padding:15px}
  .weak-list{columns:1}
}
@media print{
  .topbar,.contextual-support,.margin-help-panel,.screen-bottom,.development-label,.note-access{display:none!important}
  body{background:#fff}.screen{display:block!important;page-break-after:always}
  .card,.reading-box,.image-card{border-color:#777}
}