.ia-exercise-demo {
  --ia-blue: #214b8f;
  --ia-blue-dark: #173766;
  --ia-green: #176b45;
  --ia-red: #9d2828;
  --ia-surface: #fff;
  --ia-border: #c8d1dc;
  max-width: 72rem;
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 2rem);
  color: #17202a;
}

.ia-exercise-demo *, .ia-exercise-demo *::before, .ia-exercise-demo *::after { box-sizing: border-box; }
.ia-exercise, .ia-exercise__workspace, .ia-exercise__result { min-width: 0; }
.ia-exercise img { max-width: 100%; height: auto; }
.ia-exercise pre { max-width: 100%; overflow-x: auto; }

.ia-exercise-demo__header { margin-block-end: 2rem; }
.ia-eyebrow { color: var(--ia-blue); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ia-exercise-list { display: grid; gap: 1.5rem; }
.ia-exercise { padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--ia-border); border-radius: .75rem; background: var(--ia-surface); box-shadow: 0 .2rem .8rem rgb(20 38 70 / 8%); }
.ia-exercise__meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.ia-exercise__meta span { padding: .2rem .55rem; border-radius: 1rem; background: #edf3fb; font-size: .875rem; }
.ia-exercise h2 { margin-block: .7rem 1rem; }
.ia-exercise h3 { font-size: 1rem; }
.ia-editor-label { display: grid; gap: .5rem; font-weight: 700; }
.ia-editor { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; min-height: 12rem; padding: .8rem; border: 2px solid #69788a; border-radius: .4rem; background: #111827; color: #f8fafc; font: .95rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
.ia-editor:focus, .ia-exercise button:focus, .ia-exercise summary:focus { outline: .2rem solid #ffbf47; outline-offset: .15rem; }
.ia-choice { display: flex; align-items: flex-start; gap: .65rem; padding: .55rem 0; }
.ia-choice input { inline-size: 1.2rem; block-size: 1.2rem; margin-block-start: .1rem; }
.ia-exercise__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; }
.ia-exercise__actions button { min-height: 2.75rem; padding: .6rem 1rem; border: 2px solid var(--ia-blue); border-radius: .35rem; background: white; color: var(--ia-blue-dark); font-weight: 700; cursor: pointer; }
.ia-exercise__actions .button--primary { background: var(--ia-blue); color: white; }
.ia-exercise__actions button:disabled { cursor: wait; opacity: .65; }
.ia-output { min-height: 4rem; padding: .8rem; overflow-wrap: anywhere; border: 1px solid var(--ia-border); border-radius: .4rem; background: #f6f8fa; white-space: pre-wrap; }
.ia-feedback { margin-block: .6rem; font-weight: 700; }
.ia-feedback.is-correct { color: var(--ia-green); }
.ia-feedback.is-incorrect { color: var(--ia-red); }
.ia-preview { width: 100%; min-height: 14rem; border: 0; background: white; }
.ia-exercise__help { margin-block-start: .75rem; padding: .65rem; border: 1px solid var(--ia-border); border-radius: .4rem; }
.ia-exercise__help summary { cursor: pointer; font-weight: 700; }
.ia-table-scroll { max-width: 100%; overflow-x: auto; }
.ia-table-scroll table { width: 100%; border-collapse: collapse; background: white; }
.ia-table-scroll caption { padding: .4rem; font-weight: 700; text-align: start; }
.ia-table-scroll th, .ia-table-scroll td { padding: .5rem; border: 1px solid #7d8996; text-align: start; }

@media (min-width: 48rem) {
  .ia-exercise__task, .ia-exercise__workspace, .ia-exercise__result { max-width: 62rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ia-exercise-demo * { scroll-behavior: auto !important; }
}