/* Prompt course pilot — lesson layout and interaction states. */

.guide-lesson-article {
  width: min(100%, 900px);
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 56px;
}

.guide-lesson-article > .page-header {
  max-width: 780px;
  margin-bottom: 28px;
}

.guide-lesson-article > .page-header .guide-section-kicker {
  margin-bottom: 9px;
}

.guide-lesson-article > .page-header h1 {
  max-width: 18ch;
}

.lesson-progress,
.lesson-objective,
.lesson-concept,
.lesson-question,
.lesson-completion {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: rgba(var(--overlay-rgb), 0.025);
}

.lesson-progress {
  max-width: 780px;
  margin: 0 0 34px;
  padding: 17px 19px 16px;
}

.lesson-progress__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-main);
  font-size: 0.86rem;
}

.lesson-progress__top strong {
  color: var(--heading);
}

.lesson-progress__summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lesson-progress__top span {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.7rem;
  white-space: nowrap;
}

.lesson-progress__reset {
  min-height: 36px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--guide-accent);
  cursor: pointer;
  font: 700 0.72rem/1.3 var(--font);
  text-decoration: underline;
  text-decoration-color: rgba(110, 231, 183, 0.4);
  text-underline-offset: 3px;
}

.lesson-progress__reset:hover {
  color: var(--heading);
}

.lesson-progress__track {
  height: 8px;
  margin-top: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--overlay-rgb), 0.09);
}

.lesson-progress__track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--guide-accent);
  transition: width 0.2s ease;
}

.lesson-progress p {
  margin: 10px 0 0;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.5;
}

.lesson-objective,
.lesson-concept {
  max-width: 780px;
  padding: 24px 25px 22px;
}

.lesson-objective {
  margin-bottom: 24px;
  border-color: rgba(110, 231, 183, 0.2);
  background: rgba(110, 231, 183, 0.035);
}

.lesson-objective h2,
.lesson-concept h2,
.lesson-practice h2,
.lesson-completion h2 {
  margin: 0;
  color: var(--heading);
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.lesson-objective ul {
  margin: 14px 0 0;
  padding-left: 1.25rem;
}

.lesson-objective li {
  margin: 6px 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.lesson-concept {
  margin-bottom: 48px;
}

.lesson-concept > p {
  margin: 12px 0 0;
  max-width: 70ch;
  color: var(--text-muted);
  line-height: 1.7;
}

.lesson-concept h3 {
  margin: 27px 0 7px;
  color: var(--heading);
  font-size: 1rem;
}

.lesson-idea-compare,
.lesson-shape-grid,
.lesson-anatomy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.lesson-anatomy-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lesson-idea-compare > div,
.lesson-shape-grid > div {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid rgba(var(--overlay-rgb), 0.1);
  border-radius: var(--radius-sm);
  background: rgba(var(--overlay-rgb), 0.035);
}

.lesson-label {
  display: block;
  margin-bottom: 7px;
  color: var(--guide-accent);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lesson-idea-compare strong {
  display: block;
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.55;
}

.lesson-shape-grid p {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.65;
}

.lesson-anatomy-grid > div {
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid rgba(var(--overlay-rgb), 0.1);
  border-radius: var(--radius-sm);
  background: rgba(var(--overlay-rgb), 0.035);
}

.lesson-anatomy-grid strong {
  display: block;
  color: var(--heading);
  font-size: 0.9rem;
}

.lesson-anatomy-grid p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.55;
}

.lesson-reading {
  max-width: 780px;
  margin: 8px 0 50px;
}

.lesson-chapter {
  padding: 34px 0 36px;
  border-top: 1px solid var(--card-border);
}

.lesson-chapter:first-child {
  padding-top: 12px;
  border-top: 0;
}

.lesson-chapter__title {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
}

.lesson-chapter__title > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(110, 231, 183, 0.35);
  border-radius: 50%;
  color: var(--guide-accent);
  font: 700 0.68rem/1 var(--mono);
}

.lesson-chapter__title .guide-section-kicker {
  margin: 0 0 5px;
}

.lesson-chapter h2,
.lesson-recap h2,
.lesson-practice-launch h2 {
  margin: 0;
  color: var(--heading);
  font-size: clamp(1.25rem, 2.5vw, 1.62rem);
  letter-spacing: -0.025em;
  line-height: 1.22;
}

.lesson-chapter > p {
  max-width: 70ch;
  margin: 16px 0 0 57px;
  color: var(--text-muted);
  line-height: 1.72;
}

.lesson-chapter h3 {
  margin: 21px 0 0 57px;
  color: var(--heading);
  font-size: 0.94rem;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.lesson-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1.22fr) 22px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  margin: 22px 0 0 57px;
}

.lesson-flow > div {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(var(--overlay-rgb), 0.1);
  border-radius: var(--radius-sm);
  background: rgba(var(--overlay-rgb), 0.025);
}

.lesson-flow > .lesson-flow__focus {
  border-color: rgba(110, 231, 183, 0.36);
  background: rgba(110, 231, 183, 0.07);
}

.lesson-flow strong,
.lesson-flow small {
  display: block;
}

.lesson-flow strong {
  color: var(--text-main);
  font-size: 0.82rem;
  line-height: 1.5;
}

.lesson-flow small {
  margin-top: 9px;
  color: var(--text-dim);
  font-size: 0.69rem;
  line-height: 1.4;
}

.lesson-flow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--guide-accent);
  font-size: 1rem;
}

.lesson-note {
  margin: 16px 0 0 57px;
  padding: 13px 15px;
  border-left: 3px solid var(--guide-accent);
  background: rgba(110, 231, 183, 0.045);
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.lesson-note strong {
  color: var(--heading);
}

.lesson-dimensions,
.lesson-distinction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0 0 57px;
}

.lesson-dimensions > div {
  display: grid;
  grid-template-columns: minmax(112px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: baseline;
  padding: 12px 14px;
  border: 1px solid rgba(var(--overlay-rgb), 0.09);
  border-radius: var(--radius-sm);
  background: rgba(var(--overlay-rgb), 0.025);
}

.lesson-dimensions strong {
  color: var(--heading);
  font-size: 0.82rem;
}

.lesson-dimensions span {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.69rem;
  line-height: 1.5;
}

.lesson-chapter > .lesson-caption {
  margin-top: 13px;
  color: var(--text-dim);
  font-size: 0.8rem;
}

.lesson-distinction-grid > div {
  min-width: 0;
  padding: 15px 16px 14px;
  border: 1px solid rgba(var(--overlay-rgb), 0.09);
  border-radius: var(--radius-sm);
  background: rgba(var(--overlay-rgb), 0.025);
}

.lesson-distinction-grid strong {
  display: block;
  color: var(--text-main);
  font-size: 0.83rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.lesson-distinction-grid p {
  margin: 7px 0 0;
  color: var(--text-dim);
  font-size: 0.77rem;
  line-height: 1.55;
}

.lesson-build-example {
  display: grid;
  gap: 0;
  margin: 22px 0 0 57px;
}

.lesson-build-example > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 13px;
  position: relative;
  padding-bottom: 20px;
}

.lesson-build-example > div:last-child {
  padding-bottom: 0;
}

.lesson-build-example > div::before {
  content: "";
  position: absolute;
  top: 31px;
  bottom: 0;
  left: 15px;
  width: 1px;
  background: rgba(110, 231, 183, 0.26);
}

.lesson-build-example > div:last-child::before {
  display: none;
}

.lesson-build-example > div > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(110, 231, 183, 0.4);
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--guide-accent);
  font: 700 0.68rem/1 var(--mono);
}

.lesson-build-example small,
.lesson-build-example strong {
  display: block;
}

.lesson-build-example small {
  margin-bottom: 3px;
  color: var(--guide-accent);
  font: 700 0.65rem/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lesson-build-example strong {
  color: var(--text-main);
  font-size: 0.9rem;
  line-height: 1.55;
}

.lesson-build-example p {
  margin: 5px 0 0;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.5;
}

.lesson-chapter .lesson-shape-grid {
  margin-left: 57px;
}

.lesson-recap {
  margin-top: 12px;
  padding: 24px 25px 22px;
  border: 1px solid rgba(110, 231, 183, 0.26);
  border-radius: var(--radius);
  background: rgba(110, 231, 183, 0.045);
}

.lesson-recap ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: recap;
}

.lesson-recap li {
  position: relative;
  margin: 0;
  padding: 14px 14px 14px 42px;
  border: 1px solid rgba(var(--overlay-rgb), 0.09);
  border-radius: var(--radius-sm);
  background: rgba(var(--overlay-rgb), 0.025);
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
  counter-increment: recap;
}

.lesson-recap li::before {
  content: counter(recap);
  position: absolute;
  top: 13px;
  left: 14px;
  color: var(--guide-accent);
  font: 700 0.72rem/1.5 var(--mono);
}

.lesson-practice-launch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  max-width: 780px;
  padding: 27px 28px;
  border: 1px solid rgba(110, 231, 183, 0.32);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(110, 231, 183, 0.085), rgba(var(--overlay-rgb), 0.018));
}

.lesson-practice-launch > div > p:not(.guide-section-kicker) {
  max-width: 58ch;
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.62;
}

.lesson-practice-launch__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
}

.lesson-practice-launch__facts span {
  padding: 5px 9px;
  border: 1px solid rgba(var(--overlay-rgb), 0.09);
  border-radius: 999px;
  color: var(--text-dim);
  font: 700 0.65rem/1.3 var(--mono);
}

.lesson-practice-launch__action {
  min-width: 150px;
  text-align: center;
}

.lesson-practice-launch__action p {
  margin: 0 0 9px;
  color: var(--guide-accent);
  font: 700 0.68rem/1.4 var(--mono);
  letter-spacing: 0.03em;
}

.lesson-practice-launch__button {
  min-width: 150px;
  min-height: 48px;
  border-color: rgba(148, 229, 113, 0.72);
  background: #94e571;
  color: #061c07;
  box-shadow: 0 12px 28px rgba(52, 132, 70, 0.24);
  transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 150ms ease, background-color 150ms ease;
}

.lesson-practice-launch__button:active {
  transform: scale(0.97);
}

.lesson-practice-launch__button:disabled {
  border-color: rgba(var(--overlay-rgb), 0.14);
  background: rgba(var(--overlay-rgb), 0.07);
  color: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.lesson-lock-note {
  max-width: 24ch;
  margin: 12px auto 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.lesson-lock-note a {
  color: var(--guide-accent);
  font-weight: 700;
}

html[data-theme="light"] .lesson-practice-launch__button:disabled {
  border-color: rgba(16, 24, 40, 0.14);
  background: rgba(16, 24, 40, 0.06);
  color: var(--text-muted);
  box-shadow: none;
}

html[data-theme="light"] .lesson-practice-launch__button {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
  box-shadow: 0 12px 28px rgba(24, 105, 59, 0.28);
}

.lesson-practice {
  max-width: 780px;
}

.lesson-practice__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.lesson-practice__heading > p {
  max-width: 34ch;
  margin: 0;
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: right;
}

.lesson-question {
  min-inline-size: 0;
  margin: 0;
  padding: 22px 22px 20px;
}

.lesson-question legend {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 0;
  color: var(--heading);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
}

.lesson-question legend:focus {
  outline: none;
}

.lesson-question__number {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  margin-top: 1px;
  border: 1px solid rgba(110, 231, 183, 0.38);
  border-radius: 50%;
  color: var(--guide-accent);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
}

.lesson-question__meta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.lesson-question__type {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}

[data-lesson-id="what-is-a-prompt"] .lesson-question__number {
  width: auto;
  min-width: 58px;
  padding: 0 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.lesson-options {
  display: grid;
  gap: 9px;
  margin-top: 19px;
}

.lesson-answer-field {
  display: grid;
  gap: 8px;
  margin-top: 19px;
}

.lesson-answer-field label {
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
}

.lesson-answer-field input {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid rgba(var(--overlay-rgb), 0.14);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  color: var(--text-main);
  font: 0.92rem/1.4 var(--font);
}

.lesson-answer-field input::placeholder {
  color: var(--text-dim);
  opacity: 0.9;
}

.lesson-answer-field input:hover {
  border-color: rgba(110, 231, 183, 0.35);
}

.lesson-answer-field input:focus-visible {
  border-color: var(--guide-accent);
  outline: 2px solid rgba(110, 231, 183, 0.35);
  outline-offset: 2px;
}

.lesson-answer-review {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.lesson-answer-review[hidden] {
  display: none;
}

.lesson-answer-field textarea {
  width: 100%;
  min-height: 108px;
  padding: 13px 14px;
  resize: vertical;
  border: 1px solid rgba(var(--overlay-rgb), 0.14);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  color: var(--text-main);
  font: 0.92rem/1.55 var(--font);
}

.lesson-answer-field textarea::placeholder {
  color: var(--text-dim);
  opacity: 0.9;
}

.lesson-answer-field textarea:hover {
  border-color: rgba(110, 231, 183, 0.35);
}

.lesson-answer-field textarea:focus-visible {
  border-color: var(--guide-accent);
  outline: 2px solid rgba(110, 231, 183, 0.35);
  outline-offset: 2px;
}

.lesson-quiz-dialog [data-question-type="build"] .lesson-answer-field,
.lesson-quiz-dialog [data-question-type="build"] .lesson-actions,
.lesson-quiz-dialog [data-question-type="build"] .lesson-feedback {
  width: min(100%, 760px);
  margin-right: auto;
  margin-left: auto;
}

.lesson-quiz-dialog [data-question-type="build"] .lesson-answer-field textarea {
  min-height: 150px;
  padding: 18px 20px;
  border-color: rgba(110, 231, 183, 0.3);
  border-radius: 14px;
  background: rgba(110, 231, 183, 0.045);
  font-size: 1rem;
}

.lesson-quiz-dialog [data-question-type="build"] .lesson-answer-review {
  padding: 24px;
  border: 1px solid var(--success);
  border-radius: 14px;
  background: rgba(46, 204, 113, 0.14);
  color: var(--heading);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.lesson-quiz-dialog [data-question-type="build"] [data-check] {
  border-color: rgba(148, 229, 113, 0.72);
  background: #94e571;
  color: #061c07;
  box-shadow: 0 12px 28px rgba(52, 132, 70, 0.24);
}

html[data-theme="light"] .lesson-quiz-dialog [data-question-type="build"] [data-check],
html[data-theme="light"] .lesson-quiz-dialog [data-question-type="build"] .lesson-answer-review {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}

.lesson-edit-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.lesson-edit-checklist li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 13px 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: rgba(var(--overlay-rgb), 0.025);
}

.lesson-edit-checklist strong {
  color: var(--guide-accent);
  font: 700 0.72rem/1.4 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lesson-edit-checklist span {
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.lesson-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgba(var(--overlay-rgb), 0.1);
  border-radius: var(--radius-sm);
  background: rgba(var(--overlay-rgb), 0.02);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1.5;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.lesson-option:has(input:focus-visible) {
  outline: 2px solid var(--guide-accent);
  outline-offset: 2px;
}

.lesson-option:has(input:checked) {
  border-color: rgba(110, 231, 183, 0.48);
  background: rgba(110, 231, 183, 0.08);
  color: var(--text-main);
}

.lesson-option input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 2px 0 0;
  accent-color: var(--guide-accent);
}

.lesson-option b {
  color: var(--heading);
}

.lesson-option.is-correct {
  border-color: rgba(110, 231, 183, 0.65);
  background: rgba(110, 231, 183, 0.12);
}

.lesson-option.is-incorrect {
  border-color: rgba(255, 180, 180, 0.56);
  background: rgba(255, 100, 100, 0.08);
}

.lesson-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px 14px;
  margin-top: 19px;
}

.lesson-actions .btn {
  min-height: 42px;
  padding: 10px 21px;
  font-size: 0.88rem;
}

.lesson-hint {
  min-height: 42px;
  padding: 8px 1px;
  border: 0;
  background: transparent;
  color: var(--guide-accent);
  cursor: pointer;
  font: 600 0.82rem/1.4 var(--font);
  text-decoration: underline;
  text-decoration-color: rgba(110, 231, 183, 0.35);
  text-underline-offset: 3px;
}

.lesson-hint:hover {
  color: var(--heading);
}

.lesson-hint:focus-visible,
.lesson-progress__reset:focus-visible,
.lesson-next-nav a:focus-visible,
.lesson-completion a:focus-visible,
.lesson-completion button:focus-visible {
  outline: 2px solid var(--guide-accent);
  outline-offset: 4px;
}

.lesson-feedback {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--guide-accent);
  background: rgba(110, 231, 183, 0.055);
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.lesson-feedback[data-state="correct"] {
  border-left-color: var(--success);
  color: var(--success-text);
}

.lesson-feedback[data-state="retry"] {
  border-left-color: var(--warning-text);
}

.lesson-feedback[data-state="answer"] {
  border-left-color: var(--info-text);
}

.lesson-feedback[data-state="neutral"] {
  border-left-color: var(--text-dim);
}

.lesson-question.is-resolved {
  border-color: rgba(110, 231, 183, 0.28);
}

.lesson-question.is-revealed {
  border-color: rgba(147, 197, 253, 0.35);
}

.lesson-completion {
  max-width: 780px;
  margin-top: 32px;
  padding: 25px 25px 23px;
  border-color: rgba(110, 231, 183, 0.3);
  background: linear-gradient(135deg, rgba(110, 231, 183, 0.09), rgba(var(--overlay-rgb), 0.025));
}

.lesson-completion > p:not(.guide-section-kicker) {
  max-width: 64ch;
  margin: 11px 0 0;
  color: var(--text-muted);
}

.lesson-completion__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 600px);
  margin-top: 20px;
}

.lesson-completion__actions .btn {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 10px 20px;
  justify-content: center;
  box-sizing: border-box;
  font-size: 0.88rem;
}

.guide-page .prose .lesson-completion__actions .btn-secondary {
  color: var(--text-main);
}

.lesson-completion__actions .lesson-completion__primary {
  border-color: rgba(148, 229, 113, 0.72);
  background: #94e571;
  color: #061c07;
  box-shadow: 0 12px 28px rgba(52, 132, 70, 0.24);
  transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 150ms ease, background-color 150ms ease;
}

.guide-page .prose .lesson-completion__actions .lesson-completion__primary {
  color: #061c07;
}

.lesson-completion__actions .lesson-completion__primary:active {
  transform: scale(0.97);
}

html[data-theme="light"] .lesson-completion__actions .lesson-completion__primary {
  border-color: var(--success);
  background: var(--success);
  color: var(--bg-elevated);
  box-shadow: 0 12px 28px rgba(24, 105, 59, 0.28);
}

html[data-theme="light"] .guide-page .prose .lesson-completion__actions .lesson-completion__primary {
  color: #fff;
}

.lesson-completion h2:focus {
  outline: none;
}

.lesson-next-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  max-width: 780px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--card-border);
}

.guide-page .prose .lesson-next-nav a {
  color: var(--guide-accent);
  font-size: 0.84rem;
  font-weight: 650;
  text-decoration: none;
}

.guide-page .prose .lesson-next-nav a:hover {
  color: var(--heading);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lesson-static-key {
  margin-top: 28px;
  padding: 18px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: rgba(var(--overlay-rgb), 0.025);
}

.lesson-static-key h2 {
  margin: 0;
  color: var(--heading);
  font-size: 1rem;
}

.lesson-static-key p,
.lesson-static-key li {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.lesson-static-key ol {
  margin-bottom: 0;
}

html.lesson-quiz-is-open {
  overflow: hidden;
}

.lesson-quiz-dialog {
  width: min(1040px, calc(100% - 32px));
  height: min(860px, calc(100dvh - 32px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--overlay-rgb), 0.14);
  border-radius: 20px;
  background: var(--bg-elevated);
  color: var(--text-main);
  box-shadow: 0 32px 90px rgba(var(--shadow-rgb), 0.38);
  transform-origin: center;
}

.lesson-quiz-dialog[open] {
  animation: lesson-quiz-enter 220ms ease-out both;
}

.lesson-quiz-dialog::backdrop {
  background: rgba(2, 6, 5, 0.72);
  backdrop-filter: blur(7px);
}

.lesson-quiz-dialog[open]::backdrop {
  animation: lesson-quiz-backdrop-enter 180ms ease-out both;
}

@keyframes lesson-quiz-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lesson-quiz-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lesson-quiz-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.lesson-quiz-topbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: clamp(14px, 3vw, 28px);
  align-items: center;
  flex: 0 0 auto;
  min-height: 88px;
  padding: 17px clamp(20px, 4vw, 42px);
  border-bottom: 1px solid var(--card-border);
  background: rgba(var(--overlay-rgb), 0.018);
}

.lesson-quiz-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(var(--overlay-rgb), 0.12);
  border-radius: 50%;
  background: rgba(var(--overlay-rgb), 0.035);
  color: var(--text-muted);
  cursor: pointer;
  font: 400 1.55rem/1 var(--font);
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.lesson-quiz-close:active {
  transform: scale(0.97);
}

.lesson-quiz-close:focus-visible,
.lesson-practice-launch__button:focus-visible {
  outline: 2px solid var(--guide-accent);
  outline-offset: 3px;
}

.lesson-quiz-dialog .lesson-progress {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.lesson-quiz-dialog .lesson-progress__top {
  align-items: center;
  margin-bottom: 8px;
}

.lesson-quiz-dialog .lesson-progress__top > span {
  color: var(--text-muted);
  font-size: 0.68rem;
}

.lesson-quiz-dialog .lesson-progress__reset {
  min-height: 28px;
  padding: 2px 0;
}

.lesson-quiz-dialog .lesson-progress__track {
  height: 11px;
  margin-top: 0;
  border: 1px solid rgba(var(--overlay-rgb), 0.06);
  background: rgba(var(--overlay-rgb), 0.09);
}

.lesson-quiz-dialog .lesson-progress__track > span {
  box-shadow: 0 0 18px rgba(110, 231, 183, 0.24);
}

.lesson-quiz-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 231, 183, 0.3) transparent;
}

.lesson-quiz-scroll::-webkit-scrollbar {
  width: 9px;
}

.lesson-quiz-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(110, 231, 183, 0.3);
  background-clip: padding-box;
}

.lesson-quiz-dialog .lesson-practice {
  width: min(100%, 820px);
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(28px, 5vh, 44px) 24px 48px;
}

.lesson-quiz-dialog .lesson-practice__heading {
  display: block;
  margin-bottom: 24px;
  text-align: center;
}

.lesson-quiz-dialog .lesson-practice__heading .guide-section-kicker {
  display: none;
}

.lesson-quiz-dialog .lesson-practice__heading h2 {
  color: var(--guide-accent);
  font: 700 0.7rem/1.4 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.lesson-quiz-dialog .lesson-practice__heading > p {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lesson-quiz-dialog .lesson-question {
  display: flex;
  flex-direction: column;
  padding: 0 0 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.lesson-quiz-dialog .lesson-question legend {
  flex-direction: column;
  align-items: center;
  gap: 11px;
  text-align: center;
  font-size: clamp(1.25rem, 2.8vw, 1.65rem);
  line-height: 1.25;
}

.lesson-quiz-dialog .lesson-question__number,
[data-lesson-id="what-is-a-prompt"] .lesson-quiz-dialog .lesson-question__number {
  width: auto;
  min-width: 74px;
  height: 30px;
  margin: 0;
  padding: 0 11px;
  border-color: rgba(110, 231, 183, 0.38);
  border-radius: 999px;
  background: rgba(110, 231, 183, 0.065);
  font-size: 0.66rem;
}

.lesson-quiz-dialog .lesson-question__meta {
  justify-content: center;
  gap: 10px;
}

.lesson-quiz-dialog .lesson-question__type {
  padding: 5px 9px;
  border: 1px solid rgba(var(--overlay-rgb), 0.11);
  border-radius: 999px;
  background: rgba(var(--overlay-rgb), 0.025);
}

.lesson-quiz-dialog [data-question-type="cloze"] .lesson-answer-field input {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}

.lesson-quiz-dialog [data-question-type="qa"] .lesson-answer-field textarea {
  min-height: 132px;
  line-height: 1.55;
}

.lesson-quiz-dialog .lesson-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  order: 1;
  margin-top: 30px;
}

.lesson-quiz-dialog .lesson-option {
  position: relative;
  min-height: 82px;
  align-items: center;
  padding: 15px 17px;
  border-width: 1px;
  border-color: rgba(110, 231, 183, 0.28);
  border-radius: 14px;
  background: rgba(110, 231, 183, 0.065);
  box-shadow: 0 3px 0 rgba(110, 231, 183, 0.14);
  color: var(--text-main);
  font-size: 0.92rem;
  font-weight: 500;
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.lesson-quiz-dialog .lesson-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
}

.lesson-quiz-dialog .lesson-option > span {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
}

.lesson-quiz-dialog .lesson-option b {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(110, 231, 183, 0.32);
  background: rgba(110, 231, 183, 0.12);
  color: var(--guide-accent);
  font: 700 0.78rem/1 var(--mono);
}

.lesson-quiz-dialog .lesson-option:has(input:checked):not(.is-correct):not(.is-incorrect) {
  border-color: var(--guide-accent);
  background: rgba(110, 231, 183, 0.13);
  box-shadow: 0 3px 0 rgba(110, 231, 183, 0.3);
}

.lesson-quiz-dialog .lesson-option.is-correct {
  border-color: var(--success);
  background: rgba(46, 204, 113, 0.12);
  box-shadow: 0 3px 0 rgba(46, 204, 113, 0.24);
  cursor: default;
}

.lesson-quiz-dialog .lesson-option.is-correct b {
  border-color: var(--success);
  background: var(--success);
  color: var(--bg-elevated);
}

.lesson-quiz-dialog .lesson-question.is-resolved .lesson-options {
  grid-template-columns: minmax(0, 1fr);
}

.lesson-quiz-dialog .lesson-question.is-resolved .lesson-option:not(.is-correct) {
  display: none;
}

.lesson-quiz-dialog .lesson-question.is-resolved .lesson-option.is-correct {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
  width: 100%;
  min-height: 116px;
  padding: 22px clamp(20px, 5vw, 44px);
  border-color: var(--success);
  background: rgba(46, 204, 113, 0.14);
  color: var(--heading);
  box-shadow: 0 14px 34px rgba(0, 230, 118, 0.12);
  text-align: center;
}

.lesson-quiz-dialog .lesson-question.is-resolved .lesson-option.is-correct::before {
  content: "\2713  Correct answer";
  color: var(--success-text);
  font: 700 0.68rem/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.82;
}

.lesson-quiz-dialog .lesson-question.is-resolved .lesson-option.is-correct > span {
  justify-content: center;
  font-size: clamp(1rem, 2.2vw, 1.16rem);
  font-weight: 700;
  line-height: 1.45;
}

.lesson-quiz-dialog .lesson-question.is-resolved .lesson-option.is-correct b {
  display: none;
}

.lesson-quiz-dialog .lesson-option.is-incorrect {
  border-color: var(--danger-text);
  background: rgba(255, 100, 100, 0.09);
  box-shadow: 0 3px 0 rgba(255, 100, 100, 0.2);
}

.lesson-quiz-dialog .lesson-option.is-incorrect b {
  border-color: var(--danger-text);
  background: var(--danger-text);
  color: var(--bg-elevated);
}

[data-lesson-mode="text"] .lesson-quiz-dialog .lesson-answer-field {
  order: 1;
  width: min(100%, 680px);
  margin: 30px auto 0;
  gap: 10px;
}

[data-lesson-mode="text"] .lesson-quiz-dialog .lesson-answer-field label {
  color: var(--text-dim);
  font: 700 0.67rem/1.35 var(--mono);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

[data-lesson-mode="text"] .lesson-quiz-dialog .lesson-answer-field input {
  min-height: 64px;
  padding: 15px 18px;
  border-color: rgba(110, 231, 183, 0.3);
  border-radius: 14px;
  background: rgba(110, 231, 183, 0.045);
  box-shadow: 0 3px 0 rgba(110, 231, 183, 0.13);
  color: var(--heading);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-align: center;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

[data-lesson-mode="text"] .lesson-quiz-dialog .lesson-answer-field input:disabled {
  cursor: default;
  opacity: 1;
  -webkit-text-fill-color: currentColor;
}

[data-lesson-mode="text"] .lesson-quiz-dialog .lesson-answer-field input.is-incorrect:not(:disabled) {
  border-color: var(--danger-text);
  background: rgba(255, 100, 100, 0.07);
  box-shadow: 0 3px 0 rgba(255, 100, 100, 0.18);
}

[data-lesson-mode="text"] .lesson-quiz-dialog .lesson-question.is-resolved .lesson-answer-field input {
  min-height: 100px;
  padding: 22px clamp(20px, 5vw, 44px);
  border-color: var(--success);
  background: rgba(46, 204, 113, 0.14);
  box-shadow: 0 14px 34px rgba(0, 230, 118, 0.12);
  color: var(--heading);
  font-size: clamp(1.02rem, 2.3vw, 1.2rem);
  font-weight: 750;
}

[data-lesson-mode="text"] .lesson-quiz-dialog .lesson-answer-review {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: 22px clamp(20px, 5vw, 44px);
  border: 1px solid var(--success);
  border-radius: 14px;
  background: rgba(46, 204, 113, 0.14);
  box-shadow: 0 14px 34px rgba(0, 230, 118, 0.12);
  color: var(--heading);
  font-size: clamp(1.02rem, 2.3vw, 1.2rem);
  font-weight: 750;
  line-height: 1.45;
  text-align: center;
}

[data-lesson-mode="text"] .lesson-quiz-dialog .lesson-actions,
[data-lesson-mode="text"] .lesson-quiz-dialog .lesson-feedback {
  width: min(100%, 680px);
  margin-right: auto;
  margin-left: auto;
}

[data-lesson-mode="text"] .lesson-quiz-dialog .lesson-actions {
  flex-direction: column;
  gap: 6px;
}

[data-lesson-mode="text"] .lesson-quiz-dialog .lesson-actions .btn {
  flex: 0 0 auto;
}

[data-lesson-mode="text"] .lesson-quiz-dialog [data-check] {
  width: min(100%, 220px);
  min-width: 200px;
  border-color: rgba(148, 229, 113, 0.72);
  background: #94e571;
  color: #061c07;
  box-shadow: 0 12px 28px rgba(52, 132, 70, 0.24);
  transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 150ms ease, background-color 150ms ease;
}

[data-lesson-mode="text"] .lesson-quiz-dialog [data-check]:active {
  transform: scale(0.97);
}

[data-lesson-mode="text"] .lesson-quiz-dialog .lesson-hint {
  min-height: 36px;
}

html[data-theme="light"] [data-lesson-mode="text"] .lesson-quiz-dialog .lesson-answer-field input:not(:disabled) {
  border-color: rgba(15, 20, 28, 0.18);
  background: #fff;
  box-shadow: 0 3px 0 rgba(15, 20, 28, 0.09);
}

html[data-theme="light"] [data-lesson-mode="text"] .lesson-quiz-dialog .lesson-answer-field input.is-incorrect:not(:disabled) {
  border-color: var(--danger-text) !important;
  background: rgba(163, 50, 53, 0.055) !important;
  background-color: rgba(163, 50, 53, 0.055) !important;
  box-shadow: 0 3px 0 rgba(163, 50, 53, 0.16);
}

html[data-theme="light"] [data-lesson-mode="text"] .lesson-quiz-dialog .lesson-question.is-resolved .lesson-answer-field input {
  border-color: var(--success) !important;
  background: var(--success) !important;
  background-color: var(--success) !important;
  box-shadow: 0 14px 34px rgba(24, 105, 59, 0.24);
  color: #fff;
}

html[data-theme="light"] [data-lesson-mode="text"] .lesson-quiz-dialog .lesson-answer-review {
  border-color: var(--success);
  background: var(--success);
  box-shadow: 0 14px 34px rgba(24, 105, 59, 0.24);
  color: #fff;
}

html[data-theme="light"] [data-lesson-mode="text"] .lesson-quiz-dialog [data-check] {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
  box-shadow: 0 12px 28px rgba(24, 105, 59, 0.28);
}

[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-prompt-draft,
[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-revision-target,
[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-answer-field,
[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-actions,
[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-feedback {
  width: min(100%, 680px);
  margin-right: auto;
  margin-left: auto;
}

[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-prompt-draft {
  order: 1;
  margin-top: 25px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--overlay-rgb), 0.11);
  border-radius: 12px;
  background: rgba(var(--overlay-rgb), 0.025);
  text-align: left;
}

[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-prompt-draft span {
  display: block;
  color: var(--text-dim);
  font: 700 0.64rem/1.35 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-prompt-draft p {
  margin: 6px 0 0;
  color: var(--text-main);
  font-size: 0.94rem;
  line-height: 1.5;
}

[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-revision-target {
  order: 1;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.5;
  text-align: center;
}

[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-revision-target strong {
  color: var(--guide-accent);
}

[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-answer-field {
  order: 1;
  gap: 10px;
  margin-top: 18px;
}

[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-answer-field label {
  color: var(--text-dim);
  font: 700 0.67rem/1.35 var(--mono);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-answer-field textarea {
  min-height: 110px;
  padding: 15px 18px;
  border-color: rgba(110, 231, 183, 0.3);
  border-radius: 14px;
  background: rgba(110, 231, 183, 0.045);
  box-shadow: 0 3px 0 rgba(110, 231, 183, 0.13);
  color: var(--heading);
  font-size: 1rem;
  font-weight: 600;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-answer-field textarea:disabled {
  cursor: default;
  opacity: 1;
  resize: none;
  -webkit-text-fill-color: currentColor;
}

[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-answer-field textarea.is-incorrect:not(:disabled) {
  border-color: var(--danger-text);
  background: rgba(255, 100, 100, 0.07);
  box-shadow: 0 3px 0 rgba(255, 100, 100, 0.18);
}

[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-question.is-resolved .lesson-prompt-draft,
[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-question.is-resolved .lesson-revision-target {
  display: none;
}

[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-question.is-resolved .lesson-answer-field {
  margin-top: 30px;
}

[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-question.is-resolved .lesson-answer-field textarea {
  min-height: 124px;
  padding: 22px clamp(20px, 5vw, 44px);
  border-color: var(--success);
  background: rgba(46, 204, 113, 0.14);
  box-shadow: 0 14px 34px rgba(0, 230, 118, 0.12);
  color: var(--heading);
  font-size: clamp(1rem, 2.3vw, 1.16rem);
  font-weight: 750;
  text-align: center;
}

[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-actions {
  flex-direction: column;
  gap: 6px;
}

[data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-actions .btn {
  flex: 0 0 auto;
}

[data-lesson-mode="edit"] .lesson-quiz-dialog [data-check] {
  width: min(100%, 220px);
  min-width: 200px;
  border-color: rgba(148, 229, 113, 0.72);
  background: #94e571;
  color: #061c07;
  box-shadow: 0 12px 28px rgba(52, 132, 70, 0.24);
  transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 150ms ease, background-color 150ms ease;
}

[data-lesson-mode="edit"] .lesson-quiz-dialog [data-check]:active {
  transform: scale(0.97);
}

html[data-theme="light"] [data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-answer-field textarea:not(:disabled) {
  border-color: rgba(15, 20, 28, 0.18);
  background: #fff;
  box-shadow: 0 3px 0 rgba(15, 20, 28, 0.09);
}

html[data-theme="light"] [data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-answer-field textarea.is-incorrect:not(:disabled) {
  border-color: var(--danger-text) !important;
  background: rgba(163, 50, 53, 0.055) !important;
  box-shadow: 0 3px 0 rgba(163, 50, 53, 0.16);
}

html[data-theme="light"] [data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-question.is-resolved .lesson-answer-field textarea {
  border-color: var(--success) !important;
  background: var(--success) !important;
  box-shadow: 0 14px 34px rgba(24, 105, 59, 0.24);
  color: #fff;
}

html[data-theme="light"] [data-lesson-mode="edit"] .lesson-quiz-dialog [data-check] {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
  box-shadow: 0 12px 28px rgba(24, 105, 59, 0.28);
}

.lesson-quiz-dialog .lesson-actions {
  justify-content: center;
  order: 3;
  min-height: 48px;
  margin-top: 20px;
}

.lesson-quiz-dialog .lesson-actions .btn {
  min-height: 46px;
  padding-inline: 24px;
}

.lesson-quiz-dialog .lesson-next.btn-secondary {
  min-width: 220px;
  border-color: rgba(148, 229, 113, 0.7);
  background: #94e571;
  color: #061c07;
  box-shadow: 0 12px 28px rgba(52, 132, 70, 0.24);
}

.lesson-quiz-dialog .lesson-next.btn-secondary:active {
  transform: scale(0.97);
}

.lesson-quiz-dialog .lesson-feedback {
  order: 2;
  display: grid;
  gap: 5px;
  width: 100%;
  margin: 19px auto 0;
  padding: 16px 18px;
  border: 1px solid rgba(110, 231, 183, 0.28);
  border-radius: 12px;
  text-align: center;
}

.lesson-quiz-dialog .lesson-feedback__label,
.lesson-quiz-dialog .lesson-feedback__body {
  display: block;
}

.lesson-quiz-dialog .lesson-feedback__label {
  color: var(--success-text);
  font: 700 0.67rem/1.35 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lesson-quiz-dialog .lesson-feedback__body {
  color: var(--text-main);
  line-height: 1.55;
}

.lesson-quiz-dialog .lesson-feedback[data-state="correct"] {
  border-color: rgba(46, 204, 113, 0.38);
  background: rgba(46, 204, 113, 0.08);
}

.lesson-quiz-dialog .lesson-feedback[data-state="retry"] {
  border-color: rgba(255, 184, 102, 0.4);
  background: rgba(255, 184, 102, 0.07);
}

.lesson-quiz-dialog .lesson-feedback[data-state="answer"] {
  border-color: rgba(46, 204, 113, 0.38);
  background: rgba(46, 204, 113, 0.08);
}

.lesson-quiz-dialog .lesson-feedback:focus {
  outline: 2px solid rgba(110, 231, 183, 0.5);
  outline-offset: 3px;
}

html[data-theme="light"] .lesson-quiz-dialog .lesson-feedback:focus {
  outline-color: rgba(38, 118, 58, 0.55);
}

html[data-theme="light"] .lesson-quiz-dialog .lesson-question:not(.is-resolved) .lesson-option:not(.is-incorrect) {
  border-color: rgba(15, 20, 28, 0.16);
  background: #fff;
  box-shadow: 0 3px 0 rgba(15, 20, 28, 0.08);
}

html[data-theme="light"] .lesson-quiz-dialog .lesson-question:not(.is-resolved) .lesson-option:not(.is-incorrect) b {
  border-color: rgba(37, 107, 82, 0.3);
  background: rgba(37, 107, 82, 0.08);
  color: #1f6049;
}

html[data-theme="light"] .lesson-quiz-dialog .lesson-question.is-resolved .lesson-option.is-correct {
  background: var(--success);
  color: var(--bg-elevated);
  box-shadow: 0 14px 34px rgba(24, 105, 59, 0.24);
}

html[data-theme="light"] .lesson-quiz-dialog .lesson-question.is-resolved .lesson-option.is-correct::before {
  color: currentColor;
}

html[data-theme="light"] .lesson-quiz-dialog .lesson-next.btn-secondary {
  border-color: var(--success);
  background: var(--success);
  color: var(--bg-elevated);
  box-shadow: 0 12px 28px rgba(24, 105, 59, 0.28);
}

html[data-theme="light"] .lesson-quiz-dialog .lesson-feedback[data-state="correct"],
html[data-theme="light"] .lesson-quiz-dialog .lesson-feedback[data-state="answer"] {
  border-color: rgba(38, 118, 58, 0.42);
  background: rgba(38, 118, 58, 0.08);
}

.lesson-quiz-dialog .lesson-completion {
  max-width: none;
  margin-top: 0;
  padding: clamp(26px, 5vw, 38px);
}

@media (hover: hover) and (pointer: fine) {
  .lesson-option:hover {
    border-color: rgba(110, 231, 183, 0.35);
    background: rgba(110, 231, 183, 0.045);
    color: var(--text-main);
  }

  .lesson-quiz-close:hover {
    border-color: rgba(110, 231, 183, 0.42);
    background: rgba(110, 231, 183, 0.065);
    color: var(--heading);
  }

  .lesson-practice-launch__button:hover {
    border-color: #94e571;
    background: #a6ef87;
    color: #061c07;
    box-shadow: 0 15px 32px rgba(52, 132, 70, 0.3);
    transform: translateY(-1px);
  }

  html[data-theme="light"] .lesson-practice-launch__button:hover {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
    box-shadow: 0 15px 32px rgba(24, 105, 59, 0.34);
  }

  .lesson-quiz-dialog .lesson-option:not(.is-correct):not(.is-incorrect):hover {
    border-color: rgba(110, 231, 183, 0.58);
    background: rgba(110, 231, 183, 0.11);
    box-shadow: 0 4px 0 rgba(110, 231, 183, 0.22);
    transform: translateY(-1px);
  }

  html[data-theme="light"] .lesson-quiz-dialog .lesson-question:not(.is-resolved) .lesson-option:not(.is-incorrect):hover {
    border-color: rgba(37, 107, 82, 0.58);
    background: rgba(37, 107, 82, 0.08);
    box-shadow: 0 4px 0 rgba(37, 107, 82, 0.18);
  }

  .lesson-quiz-dialog .lesson-next.btn-secondary:hover {
    border-color: #94e571;
    background: #a6ef87;
    color: #061c07;
    box-shadow: 0 15px 32px rgba(52, 132, 70, 0.3);
    transform: translateY(-1px);
  }

  html[data-theme="light"] .lesson-quiz-dialog .lesson-next.btn-secondary:hover {
    border-color: var(--success);
    background: var(--success);
    color: var(--bg-elevated);
    box-shadow: 0 15px 32px rgba(24, 105, 59, 0.34);
  }

  .guide-page .prose .lesson-completion__actions .lesson-completion__primary:hover,
  .guide-page .prose .lesson-completion__actions .btn-secondary:hover,
  [data-lesson-mode="text"] .lesson-quiz-dialog [data-check]:hover,
  [data-lesson-mode="edit"] .lesson-quiz-dialog [data-check]:hover {
    border-color: #94e571;
    background: #a6ef87;
    color: #061c07;
    box-shadow: 0 15px 32px rgba(52, 132, 70, 0.3);
    transform: translateY(-1px);
  }

  html[data-theme="light"] .guide-page .prose .lesson-completion__actions .lesson-completion__primary:hover,
  html[data-theme="light"] .guide-page .prose .lesson-completion__actions .btn-secondary:hover,
  html[data-theme="light"] [data-lesson-mode="text"] .lesson-quiz-dialog [data-check]:hover,
  html[data-theme="light"] [data-lesson-mode="edit"] .lesson-quiz-dialog [data-check]:hover {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
    box-shadow: 0 15px 32px rgba(24, 105, 59, 0.34);
  }
}

[data-auto-submit] [data-check] {
  display: none !important;
}

[data-auto-submit] [data-question-type="build"] [data-check] {
  display: inline-flex !important;
}

/* .btn sets display:inline-flex, so keep native hidden semantics intact. */
.guide-lesson-page [hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  .guide-lesson-article {
    padding-bottom: 38px;
  }

  .lesson-progress,
  .lesson-objective,
  .lesson-concept,
  .lesson-question,
  .lesson-completion {
    padding-left: 16px;
    padding-right: 16px;
  }

  .lesson-progress__top {
    display: block;
  }

  .lesson-progress__top span {
    display: block;
    margin-top: 4px;
  }

  .lesson-progress__summary {
    justify-content: space-between;
    margin-top: 6px;
  }

  .lesson-progress__summary span {
    margin-top: 0;
  }

  .lesson-progress__reset {
    min-height: 44px;
  }

  .lesson-idea-compare,
  .lesson-shape-grid,
  .lesson-anatomy-grid {
    grid-template-columns: 1fr;
  }

  .lesson-reading {
    margin-bottom: 38px;
  }

  .lesson-chapter {
    padding-block: 29px 31px;
  }

  .lesson-chapter:first-child {
    padding-top: 8px;
  }

  .lesson-chapter__title {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
  }

  .lesson-chapter__title > span {
    width: 33px;
    height: 33px;
  }

  .lesson-chapter > p,
  .lesson-chapter h3,
  .lesson-flow,
  .lesson-note,
  .lesson-dimensions,
  .lesson-distinction-grid,
  .lesson-build-example,
  .lesson-chapter .lesson-shape-grid {
    margin-left: 0;
  }

  .lesson-flow {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .lesson-flow__arrow {
    height: 18px;
    transform: rotate(90deg);
  }

  .lesson-dimensions,
  .lesson-distinction-grid {
    grid-template-columns: 1fr;
  }

  .lesson-dimensions > div {
    grid-template-columns: minmax(104px, 0.8fr) minmax(0, 1.2fr);
  }

  .lesson-recap {
    padding: 20px 17px 18px;
  }

  .lesson-recap ol {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .lesson-practice-launch {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px 18px;
  }

  .lesson-practice-launch__action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
  }

  .lesson-practice-launch__action p {
    margin: 0;
  }

  .lesson-practice-launch__button {
    min-width: 145px;
  }

  .lesson-quiz-dialog {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .lesson-quiz-topbar {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 10px;
    min-height: 78px;
    padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  }

  .lesson-quiz-dialog .lesson-progress__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
  }

  .lesson-quiz-dialog .lesson-progress__top > span {
    margin-top: 0;
  }

  .lesson-quiz-dialog .lesson-progress__track {
    height: 9px;
  }

  .lesson-quiz-dialog .lesson-progress__reset {
    min-height: 32px;
    font-size: 0.67rem;
  }

  .lesson-quiz-dialog .lesson-practice {
    padding: 23px 16px max(34px, env(safe-area-inset-bottom));
  }

  .lesson-quiz-dialog .lesson-practice__heading {
    margin-bottom: 20px;
  }

  .lesson-quiz-dialog .lesson-question {
    padding: 0 0 12px;
    box-shadow: none;
  }

  .lesson-quiz-dialog .lesson-question legend {
    gap: 9px;
    font-size: 1.28rem;
  }

  .lesson-quiz-dialog .lesson-options {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 23px;
  }

  [data-lesson-mode="text"] .lesson-quiz-dialog .lesson-answer-field {
    margin-top: 23px;
  }

  [data-lesson-mode="text"] .lesson-quiz-dialog .lesson-answer-field input {
    min-height: 58px;
    padding: 13px 14px;
    font-size: 0.96rem;
  }

  .lesson-edit-checklist {
    grid-template-columns: 1fr;
  }

  [data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-prompt-draft {
    margin-top: 20px;
    padding: 12px 13px;
  }

  [data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-answer-field {
    margin-top: 16px;
  }

  [data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-answer-field textarea {
    min-height: 102px;
    padding: 13px 14px;
    font-size: 0.94rem;
  }

  [data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-question.is-resolved .lesson-answer-field textarea {
    min-height: 112px;
  }

  [data-lesson-mode="text"] .lesson-quiz-dialog .lesson-question.is-resolved .lesson-answer-field input {
    min-height: 86px;
  }

  [data-lesson-mode="text"] .lesson-quiz-dialog .lesson-answer-review {
    min-height: 86px;
    padding: 17px 16px;
    font-size: 0.98rem;
  }

  .lesson-quiz-dialog .lesson-option {
    min-height: 66px;
    padding: 12px 13px;
    border-radius: 12px;
    font-size: 0.88rem;
  }

  .lesson-quiz-dialog .lesson-option b {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .lesson-quiz-dialog .lesson-actions {
    gap: 10px;
    min-height: 46px;
    margin-top: 17px;
  }

  .lesson-quiz-dialog .lesson-actions .btn {
    min-height: 46px;
    padding-inline: 17px;
  }

  .lesson-quiz-dialog .lesson-completion {
    padding: 24px 18px;
  }

  .lesson-completion__actions {
    grid-template-columns: 1fr;
  }

  .lesson-quiz-dialog .lesson-feedback {
    margin-top: 15px;
    padding: 12px 13px;
    font-size: 0.82rem;
  }

  .lesson-practice__heading {
    display: block;
  }

  .lesson-practice__heading > p {
    margin-top: 8px;
    text-align: left;
  }

  .lesson-question legend {
    font-size: 0.98rem;
  }

  .lesson-option {
    padding: 11px 12px;
    font-size: 0.84rem;
  }

  .lesson-actions .btn {
    flex: 1 1 auto;
  }

  .lesson-hint {
    flex: 0 0 auto;
  }

  .lesson-quiz-dialog .lesson-next.btn-secondary {
    flex: 0 1 220px;
    width: min(100%, 220px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-quiz-dialog[open],
  .lesson-quiz-dialog[open]::backdrop {
    animation: none;
  }

  .lesson-progress__track > span,
  .lesson-quiz-close,
  .lesson-quiz-dialog .lesson-option,
  .lesson-quiz-dialog .lesson-next,
  .lesson-practice-launch__button,
  .lesson-completion__primary,
  [data-lesson-mode="text"] .lesson-quiz-dialog .lesson-answer-field input,
  [data-lesson-mode="text"] .lesson-quiz-dialog [data-check],
  [data-lesson-mode="edit"] .lesson-quiz-dialog .lesson-answer-field textarea,
  [data-lesson-mode="edit"] .lesson-quiz-dialog [data-check] {
    transition: none;
  }

  .lesson-quiz-dialog .lesson-option:hover,
  .lesson-quiz-dialog .lesson-next:hover,
  .lesson-practice-launch__button:hover,
  .lesson-completion__primary:hover,
  [data-lesson-mode="text"] .lesson-quiz-dialog [data-check]:hover,
  [data-lesson-mode="edit"] .lesson-quiz-dialog [data-check]:hover {
    transform: none;
  }
}