:root {
  color-scheme: light;
  --bg: #f6f5f4;
  --surface: #ffffff;
  --text: rgba(0, 0, 0, .92);
  --muted: #615d59;
  --line: rgba(0, 0, 0, .10);
  --blue: #0075de;
  --blue-soft: #f2f9ff;
  --green: #1aae39;
  --orange-soft: #fff4e8;
  --shadow: rgba(0,0,0,.04) 0 4px 18px, rgba(0,0,0,.027) 0 2px 8px, rgba(0,0,0,.02) 0 1px 3px;
}
* { box-sizing: border-box; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  background: radial-gradient(circle at top left, #fff 0, var(--bg) 42rem);
  color: var(--text);
  line-height: 1.55;
}
.site-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1rem 1.5rem;
  background:rgba(255,255,255,.86);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index: 10;
  backdrop-filter: blur(16px);
}
.site-brand { font-weight: 800; letter-spacing: -.03em; }
.site-nav { display:flex; gap:0.75rem; flex-wrap:wrap; }
.site-nav a { color:var(--muted); text-decoration:none; font-weight: 650; font-size: .95rem; }
.site-nav a:hover { color: var(--text); }
.container { max-width: 1120px; margin: 0 auto; padding: 1.25rem; }
.card, .subcard {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.card { padding: 1.2rem; }
.subcard { padding: 1.1rem; }
.hero-card { display:grid; gap:1rem; }
.meta-row, .actions, .button-row, .card-heading-row { display:flex; gap:0.75rem; flex-wrap:wrap; align-items:center; }
.card-heading-row { justify-content: space-between; }
.button, button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.78rem 1rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
}
.button.primary, button[data-action="complete"] { background:var(--blue); color:#fff; }
.button.secondary, button[data-action="more_practice"] { background:var(--blue-soft); color:#075ea8; border-color:#cce7ff; }
button[data-action="incomplete"] { background:#fff; color:#8a3a00; border-color:#f2c08e; }
.muted { color:var(--muted); }
.eyebrow { color: var(--blue); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; margin:0 0 .4rem; }
.lesson-shell { padding: clamp(1.25rem, 3vw, 2.25rem); }
.lesson-hero { display:grid; grid-template-columns: minmax(0, 1fr) 220px; gap:1.5rem; align-items:start; }
h1 { font-size: clamp(2.15rem, 5vw, 4rem); line-height:1; letter-spacing:-.06em; margin:.2rem 0 1rem; }
h2 { font-size: clamp(1.45rem, 3vw, 2.1rem); line-height:1.08; letter-spacing:-.035em; margin:0 0 1rem; }
h3 { font-size:1.16rem; line-height:1.25; letter-spacing:-.015em; margin:.1rem 0 .65rem; }
.lesson-lead { font-size:1.2rem; color:#31302e; max-width: 780px; }
.goal-box { background: var(--blue-soft); border:1px solid #d6ebff; border-radius:14px; padding:1rem; }
.lesson-status-card { display:grid; gap:.35rem; padding:1rem; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow); }
.lesson-status-card strong { font-size:2rem; letter-spacing:-.04em; }
.pill { display:inline-flex; width:max-content; align-items:center; border-radius:999px; background:var(--blue-soft); color:#097fe8; padding:.25rem .6rem; font-size:.78rem; font-weight:800; }
.muted-pill { background:#f6f5f4; color:#615d59; }
.lesson-section { margin-top: 1.45rem; padding-top: 1.45rem; border-top:1px solid var(--line); }
.warm-section { background:#fbfaf8; border:1px solid var(--line); border-radius:18px; padding:1.2rem; }
.compact-section { background:#fff; }
.block-list { display:grid; gap:1rem; }
.theory-card, .practice-card, .quiz-card { box-shadow:none; }
.theory-card p, .practice-card p { margin:.55rem 0; }
.note-line { background:#f8fafc; border-left:4px solid var(--blue); padding:.75rem .85rem; border-radius:10px; }
.inline-group { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; margin:.8rem 0; }
.inline-group span, .chip-list li { border:1px solid var(--line); background:#fff; border-radius:999px; padding:.28rem .62rem; font-size:.9rem; }
.mistake-box, .check-box, .takeaway, .extension { border-radius:14px; padding:.85rem 1rem; margin:.8rem 0; }
.mistake-box { background:#fff4e8; border:1px solid #ffd9ad; }
.check-box { background:#f2fbf5; border:1px solid #cbeed5; }
.takeaway { background:#f2f9ff; border:1px solid #d6ebff; }
.extension { background:#faf5ff; border:1px solid #ead7ff; }
.mistake-box ul, .check-box ul { margin:.45rem 0 0; }
.timeline-list, .step-list { display:grid; gap:.55rem; padding-left:1.25rem; }
.timeline-list li { background:#fff; border:1px solid var(--line); border-radius:12px; padding:.75rem .85rem; }
.chip-list { display:flex; flex-wrap:wrap; gap:.5rem; padding:0; list-style:none; }
details { border:1px solid var(--line); border-radius:12px; padding:.8rem .9rem; background:#fff; margin:.8rem 0; }
summary { cursor:pointer; font-weight:800; }
.reflection-list, .checklist-list { display:grid; gap:.6rem; padding-left:0; list-style:none; }
.reflection-list li, .checklist-list li { background:#fff; border:1px solid var(--line); border-radius:12px; padding:.8rem .9rem; }
.checklist-list li::before { content:"✓"; color:var(--green); font-weight:900; margin-right:.5rem; }
.lesson-feedback-card {
  margin-top: 2rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: linear-gradient(135deg, #ffffff 0%, #f2f9ff 100%);
  border:1px solid #cfe8ff;
  border-radius:20px;
  box-shadow:var(--shadow);
  display:grid;
  gap:1rem;
}
.feedback-form { display:grid; gap:.65rem; }
.feedback-form label { font-weight:800; }
textarea, select {
  width:100%;
  border:1px solid #d8d4cf;
  border-radius:12px;
  background:#fff;
  padding:.85rem;
  font:inherit;
  color:var(--text);
}
textarea:focus, select:focus, button:focus, a:focus { outline:2px solid #097fe8; outline-offset:2px; }
.feedback-summary { margin-top:.25rem; box-shadow:none; }
@media (max-width: 760px) {
  .site-header { align-items:flex-start; flex-direction:column; }
  .container { padding:.75rem; }
  .lesson-hero { grid-template-columns:1fr; }
  .button, button { width:100%; }
  .card-heading-row { align-items:flex-start; }
}