@layer app {
  .practice-session { width: min(780px, calc(100% - 2rem)); padding-block: 2.25rem 4rem; }
  .practice-session-heading { max-width: 42rem; margin-bottom: 2rem; }
  .practice-back { display: inline-flex; gap: 0.5rem; align-items: center; width: fit-content; color: var(--muted); font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
  .practice-back:hover { color: var(--primary); }
  .practice-back:focus-visible, .choice:has(input:focus-visible) { outline: 3px solid rgba(35, 86, 246, 0.28); outline-offset: 3px; }
  .practice-heading-copy { margin-top: 1.25rem; }
  .practice-kicker { margin: 0; color: var(--primary); font-size: 0.9rem; font-weight: 800; }
  .practice-session-heading h1 { margin-top: 0.3rem; color: var(--ink); font-family: "Manrope", var(--font-sans); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
  .practice-heading-copy > p:last-child { max-width: 38rem; margin-top: 0.65rem; color: var(--muted); font-size: 1rem; }
  .practice-workspace { display: grid; gap: 1.25rem; }
  .practice-status { display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.7rem 1rem; background: var(--cream-dark); color: var(--muted); font-size: 0.9rem; font-weight: 700; }
  .practice-status strong { color: var(--ink); }
  .practice-question-index { display: flex; gap: 0.3rem; margin-left: auto; }
  .practice-question-index li { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--muted); font-size: 0.85rem; }
  .practice-form { display: grid; gap: 1rem; }
  .question { margin: 0; border: 1px solid var(--line); border-radius: 0.75rem; padding: 1.5rem; background: var(--card); }
  .question legend { display: flex; align-items: flex-start; gap: 0.85rem; width: 100%; color: var(--ink); font-size: 1.1rem; font-weight: 800; line-height: 1.4; }
  .question-number { display: grid; width: 1.8rem; height: 1.8rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.8rem; font-weight: 800; }
  .question-response { display: grid; gap: 0.6rem; margin-top: 1.15rem; }
  .choice { display: flex; align-items: center; gap: 0.8rem; min-height: 3.25rem; border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.7rem 1rem; color: var(--ink); cursor: pointer; transition: border-color 180ms ease, background 180ms ease; }
  .choice:hover { border-color: var(--primary); background: var(--cream-dark); }
  .choice:has(input:checked) { border-color: var(--primary); background: var(--cream-dark); }
  .choice input { width: auto; accent-color: var(--primary); }
  .question textarea { border-color: var(--line); border-radius: 0.5rem; resize: vertical; }
  .question textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(35, 86, 246, 0.16); }
  .question-feedback { display: grid; gap: 0.25rem; margin-top: 1rem; border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.75rem 1rem; background: var(--cream-dark); color: var(--muted); }
  .question-feedback.correct { border-color: #398333; }
  .question-feedback.incorrect { border-color: #c62a38; }
  .question-feedback strong { color: var(--ink); }
  .practice-submit { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1rem 0 0; }
  .practice-submit p { max-width: 25rem; color: var(--muted); font-size: 0.9rem; }
  .practice-submit .button { min-width: 11rem; background: var(--button); border-color: var(--button); font-weight: 800; }
  .practice-submit .button:hover { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: 0 6px 8px rgba(16, 26, 53, 0.14); }
  @media (max-width: 720px) { .practice-session { padding-block: 1.5rem 3rem; } .practice-status { flex-wrap: wrap; } .practice-question-index { width: 100%; margin-left: 0; } .question { padding: 1.25rem; } .practice-submit { align-items: stretch; flex-direction: column; } .practice-submit .button { width: 100%; } }
  @media (prefers-reduced-motion: reduce) { .practice-back, .choice { transition: none; } }
}