:root{
  --bg:#0b0c10;
  --surface:#14151b;
  --surface-2:#1b1d25;
  --border: rgba(255,255,255,.09);
  --text:#eef0f3;
  --muted:#9aa0ae;
  --brand:#e11d48;
  --brand-2:#10b981;
  --brand-3:#3b82f6;
  --warning:#f59e0b;
  --radius:14px;
  --radius-sm:10px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{
  font-family:'Open Sans', -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
}
a{ color:inherit; }
.icon{ width:20px; height:20px; stroke:currentColor; stroke-width:1.75; fill:none; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* ---------- Site navbar ---------- */
.site-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(11,12,16,.9);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:1.75rem;
  padding:.8rem 1.5rem;
}
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; margin-right:auto; }
.brand img{ height:2.1rem; width:2.1rem; border-radius:6px; display:block; }
.brand span{ color:#fff; font-weight:800; font-size:1.05rem; letter-spacing:.2px; }
.nav-links{ display:flex; gap:1.6rem; }
.nav-links .nav-link{
  color:#fff; opacity:.82; text-decoration:none; font-size:.92rem; font-weight:600;
  position:relative; padding-bottom:5px; white-space:nowrap;
}
.nav-links .nav-link::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-3));
  transition:width .2s ease;
}
.nav-links .nav-link:hover{ opacity:1; }
.nav-links .nav-link:hover::after{ width:100%; }
.nav-links .nav-link.current{ opacity:1; }
.nav-links .nav-link.current::after{ width:100%; background:var(--brand); }
.nav-social{ display:flex; gap:.85rem; margin-left:.5rem; }
.nav-social a{ color:#fff; opacity:.65; display:flex; }
.nav-social a:hover{ opacity:1; color:var(--brand); }
.nav-social svg{ width:17px; height:17px; stroke-width:1.75; }
.nav-toggle{ display:none; background:none; border:0; color:#fff; padding:.4rem; cursor:pointer; }
@media (max-width:860px){
  .nav-links, .nav-social{ display:none; }
  .nav-toggle{ display:flex; }
}

/* Breadcrumb */
.breadcrumb{
  max-width:900px; margin:0 auto; padding:1.1rem 2rem 0;
  font-size:.85rem; color:var(--muted);
}
.breadcrumb a{ color:var(--muted); text-decoration:none; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb .sep{ margin:0 .4rem; opacity:.5; }
.breadcrumb .current{ color:var(--text); }

/* ---------- Page shell ---------- */
.container{ max-width:900px; margin:0 auto; padding:1.5rem 2rem 3rem; }

.back-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:.65rem 1.25rem; border-radius:25px; text-decoration:none; margin-bottom:1.5rem;
  transition:all .2s ease; font-size:.9rem; font-weight:600;
}
.back-btn:hover{ border-color:var(--brand-3); transform:translateX(-3px); }

.lesson-content{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2.5rem;
}

/* Template B: header block replaces back-btn on some lessons */
.header{
  text-align:center; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:2rem; margin-bottom:1.5rem;
}
.header h1{ border-bottom:none; margin-bottom:.5rem; padding-bottom:0; }
.header p{ color:var(--muted); font-size:1.05rem; }

h1{
  font-family:'Bangers', cursive; font-weight:400;
  font-size:2.6rem; text-align:center; margin-bottom:1.25rem;
  border-bottom:1px solid var(--border); padding-bottom:1.25rem;
  color:#fff; letter-spacing:.5px;
}
h2{
  font-size:1.4rem; color:#fff; font-weight:800;
  margin:2.25rem 0 1rem; border-left:3px solid var(--brand); padding-left:.9rem;
}
h3{ font-size:1.1rem; color:var(--brand-3); margin:1.5rem 0 .85rem; font-weight:700; }
h4{ font-size:1rem; color:#fff; margin:1rem 0 .6rem; font-weight:700; }
p{ margin-bottom:1rem; font-size:1.02rem; color:var(--text); }
ul, ol{ padding-left:1.3rem; margin-bottom:1rem; }
li{ margin:.5rem 0; }
strong{ color:#fff; }

.highlight{
  background:rgba(245,197,66,.18); color:#f5c542;
  padding:.15rem .45rem; border-radius:5px; font-weight:700;
}

.example-box, .rule-box, .warning-box, .formula-section, .search-box{
  background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--brand-3);
  padding:1.5rem 1.75rem; margin:1.5rem 0; border-radius:var(--radius-sm);
}
.rule-box{ border-left-color:var(--brand-2); background:rgba(16,185,129,.06); }
.warning-box{ border-left-color:var(--warning); background:rgba(245,158,11,.06); }
.example-box em{ color:var(--muted); }

table, .comparison-table{
  width:100%; border-collapse:collapse; margin:1.5rem 0;
  background:var(--surface-2); border-radius:var(--radius-sm); overflow:hidden;
  border:1px solid var(--border);
}
.table-container{ overflow-x:auto; margin:1.5rem 0; }
.table-container table{ margin:0; }
th, td{ padding:.9rem 1rem; text-align:left; border-bottom:1px solid var(--border); font-size:.95rem; }
th{ background:rgba(59,130,246,.14); color:#fff; font-weight:700; }
tr:hover{ background:rgba(255,255,255,.03); }
tr:last-child td{ border-bottom:0; }

/* ---------- Exercise system (typed answers) ---------- */
.exercise-section{
  background:rgba(245,197,66,.06); border:1px solid rgba(245,197,66,.3);
  border-radius:var(--radius); padding:1.75rem 2rem; margin:2rem 0;
}
.exercise-title{ color:#f5c542; font-size:1.25rem; margin-bottom:1rem; text-align:center; font-weight:800; }
.exercise{
  margin:1.25rem 0; padding:1.1rem 1.3rem; background:var(--surface); border-radius:var(--radius-sm);
  border-left:3px solid #f5c542; border:1px solid var(--border);
}
.exercise h4{ color:#f5c542; margin-bottom:.9rem; }
.question{ margin:.7rem 0; font-size:1rem; color:var(--text); }
.answer-input{
  background:var(--surface-2); border:1px solid var(--border); padding:.5rem .7rem; border-radius:6px;
  font-size:.96rem; min-width:150px; color:var(--text); font-family:inherit;
}
.answer-input::placeholder{ color:var(--muted); }
.answer-input:focus{ outline:none; border-color:var(--brand-3); }
.search-input{
  background:var(--surface-2); border:1px solid var(--border); padding:.6rem .9rem; border-radius:8px;
  font-size:.96rem; color:var(--text); font-family:inherit; width:100%;
}
.search-input::placeholder{ color:var(--muted); }
.search-input:focus{ outline:none; border-color:var(--brand-3); }
.check-btn, .clear-btn{
  background:var(--brand-2); color:#fff; border:none; padding:.7rem 1.4rem; border-radius:25px;
  cursor:pointer; font-size:.92rem; font-weight:700; margin:1rem .5rem 1rem 0; transition:filter .15s ease; font-family:inherit;
}
.clear-btn{ background:var(--surface-2); border:1px solid var(--border); color:var(--text); }
.check-btn:hover, .clear-btn:hover{ filter:brightness(1.08); }
.result{ margin-top:1rem; padding:.9rem 1.1rem; border-radius:var(--radius-sm); font-weight:700; font-size:.92rem; }
.result.correct, .correct{ background:rgba(16,185,129,.14); color:#6ee7b7; border:1px solid rgba(16,185,129,.4); }
.result.incorrect, .incorrect{ background:rgba(225,29,72,.14); color:#ffb3c1; border:1px solid rgba(225,29,72,.4); }

/* ---------- Click-to-answer quiz system (Template B) ---------- */
.quiz-section, .test-section{
  background:rgba(245,197,66,.06); border:1px solid rgba(245,197,66,.3);
  border-radius:var(--radius); padding:1.75rem 2rem; margin:2rem 0;
}
.quiz-section h2, .test-section h2{ margin-top:0; text-align:center; border-left:none; padding-left:0; color:#f5c542; }
.quiz-question, .test-question, .test-item{
  margin:1.25rem 0; padding:1.1rem 1.3rem; background:var(--surface); border-radius:var(--radius-sm);
  border:1px solid var(--border);
}
.quiz-question h3, .test-question h3{ color:#fff; font-size:1rem; margin-top:0; }
.quiz-options, .test-options{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.75rem; }
.quiz-option, .test-option{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding:.6rem 1.1rem; border-radius:20px; cursor:pointer; font-size:.92rem; font-weight:600;
  transition:all .15s ease;
}
.quiz-option:hover, .test-option:hover{ border-color:var(--brand-3); }
.quiz-option.correct{ background:rgba(16,185,129,.16); color:#6ee7b7; border-color:rgba(16,185,129,.45); }
.quiz-option.incorrect{ background:rgba(225,29,72,.16); color:#ffb3c1; border-color:rgba(225,29,72,.45); }

/* ---------- Bottom action boxes ---------- */
.action-boxes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; margin:2rem 0; }
.action-box{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1.75rem; text-align:center; transition:all .2s ease;
}
.action-box:hover{ transform:translateY(-3px); border-color:var(--brand-3); }
.action-box h3{ color:#fff; margin-top:0; }
.action-btn{
  display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
  padding:.75rem 1.5rem; border-radius:25px; font-weight:700; font-size:.92rem; transition:filter .15s ease;
}
.action-btn:hover{ filter:brightness(1.08); }

/* Bottom lesson-to-lesson navigation (Template B) */
.navigation{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:1.5rem;
}
.nav-button, .home-button{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:.65rem 1.25rem; border-radius:25px; text-decoration:none; font-size:.88rem; font-weight:600;
  transition:all .2s ease;
}
.nav-button:hover, .home-button:hover{ border-color:var(--brand-3); }
.nav-button:disabled{ opacity:.4; cursor:not-allowed; }
.home-button{ background:var(--brand); border-color:var(--brand); color:#fff; }
.home-button:hover{ filter:brightness(1.08); }

.hidden{ display:none !important; }

/* ---------- Generic bespoke content-block families ----------
   Individual lessons invent one-off class names for their own
   diagrams/card-grids (e.g. "adj-card", "movement-grid", "vs-divider").
   These wildcard rules give every such block consistent theme styling
   without having to hand-list every lesson's custom class names. */
[class$="-grid"]{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.1rem; margin:1.5rem 0;
}
[class$="-card"], [class$="-item"]:not(.exercise), [class$="-box"]:not(.action-box):not(.search-box), [class$="-scale"]{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1.25rem 1.4rem; transition:all .18s ease;
}
[class$="-card"]:hover{ border-color:var(--brand-3); transform:translateY(-2px); }
[class$="-card"] h3, [class$="-item"] h3, [class$="-item"] h4, [class$="-box"] h3, [class$="-box"] h4{
  color:var(--brand-3); margin-top:0; font-size:1rem;
}
[class$="-section"]{ margin:2rem 0; }
[class$="-examples"], [class$="-list"]{
  background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--brand-3);
  padding:1.25rem 1.5rem; margin:1.25rem 0; border-radius:var(--radius-sm);
}
[class$="-examples"] li::before, [class$="-list"] li::before, .feature-list li::before, .breakdown li::before{
  content:"→ "; color:var(--brand-3); font-weight:700;
}
[class$="-title"]{ color:#fff; font-weight:800; margin-bottom:.75rem; }
[class$="-comparison"]{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; margin:1.5rem 0; }

/* Specific one-off blocks used by a handful of lessons */
.defining, .non-defining, .can-omit, .cannot-omit, .to-infinitive, .ing-form,
.for-purpose, .to-purpose, .main-clause, .relative-clause{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1.25rem 1.4rem; margin:1rem 0;
}
.vs-container{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; justify-content:center; margin:1.5rem 0; }
.vs-divider{ font-family:'Bangers', cursive; font-size:1.5rem; color:var(--brand); }
.vs-card{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1.25rem 1.5rem; flex:1; min-width:200px;
}
.timeline-visual{ display:flex; align-items:center; gap:.75rem; margin:1.5rem 0; flex-wrap:wrap; }
.timeline-arrow{ color:var(--brand-3); font-weight:700; }
.frequency-scale, .intensity-scale{ display:flex; gap:.75rem; flex-wrap:wrap; margin:1.25rem 0; }
.meaning, .usage, .explanation{ color:var(--muted); font-size:.92rem; margin-top:.3rem; }
.sentence-breakdown, .breakdown-example, .word-comparison, .purpose-comparison{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1.25rem 1.5rem; margin:1.25rem 0;
}
.prefix-group, .fanboys-letters{ margin:1rem 0; }
.comma-highlight{ background:rgba(245,197,66,.18); color:#f5c542; padding:.1rem .4rem; border-radius:4px; }
.mistake-item .right{ color:#6ee7b7; }
.mistake-item .wrong{ color:#ffb3c1; text-decoration:line-through; }

@media (max-width:700px){
  .container{ padding:1.25rem 1.25rem 2.5rem; }
  .lesson-content{ padding:1.5rem; }
  h1{ font-size:2rem; }
  .breadcrumb{ padding:1rem 1.25rem 0; }
  .navigation{ flex-direction:column; align-items:stretch; text-align:center; }
}