.ia-exercise-demo,
.ia-exercise,
.ia-exercise-navigation {
  --ia-blue: #214b8f;
  --ia-blue-dark: #173766;
  --ia-green: #176b45;
  --ia-red: #9d2828;
  --ia-surface: #fff;
  --ia-border: #c8d1dc;
}

.ia-exercise-demo {
  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, .ia-exercise fieldset { min-width: 0; }
.ia-exercise img { max-width: 100%; height: auto; }
.ia-exercise pre { max-width: 100%; overflow-x: auto; overflow-wrap: anywhere; white-space: pre-wrap; }

.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 { max-width: 72rem; margin-inline: auto; 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, .ia-exercise h3 { margin-block: .7rem 1rem; }

/* Small instructional datasets scroll locally, never the whole mobile page. */
.ia-dataset-scroll, .ia-exercise__task details { max-width: 100%; overflow-x: auto; }
.ia-dataset-scroll { margin-block: 1rem; }
.ia-dataset-scroll:focus-visible { outline: .2rem solid #a46500; outline-offset: .15rem; }
.ia-exercise table caption { text-align: left; font-weight: 700; padding-block: .5rem; }
.ia-exercise__progress { margin-block: -.4rem 1rem; color: #5a6472; font-size: .9rem; font-weight: 700; }
.ia-exercise__progress.is-started { color: var(--ia-blue-dark); }
.ia-exercise__progress.is-solved { color: var(--ia-green); }
.ia-exercise-navigation { max-width: 72rem; margin: 2rem auto 0; padding-block-start: 1.25rem; border-top: 1px solid var(--ia-border); }
.ia-exercise-navigation__library { display: inline-block; margin-block-end: 1rem; font-weight: 750; }
.ia-exercise-navigation > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ia-exercise-navigation > div > a { display: grid; gap: .25rem; padding: 1rem; border: 1px solid var(--ia-border); border-radius: .6rem; text-decoration: none; }
.ia-exercise-navigation a[rel="next"] { text-align: end; }
.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; min-width: 0; padding: .55rem 0; overflow-wrap: anywhere; }
.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; }

/* The optional trace help has its own controls and never represents a score. */
.ia-self-check { min-width: 0; max-width: 100%; margin-block: 1rem; padding: .75rem; border: 2px solid #586b80; border-radius: .4rem; }
.ia-self-check legend { max-width: 100%; font-weight: 700; overflow-wrap: anywhere; }
.ia-self-check p, .ia-self-check label { overflow-wrap: anywhere; }
.ia-self-check input:focus-visible { outline: .2rem solid #a46500; outline-offset: .2rem; }
.ia-trace { margin-block: 0 1rem; }
.ia-trace__explanation { color: #374151; }
.ia-trace__controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
.ia-trace__controls button { min-height: 2.75rem; padding: .55rem .8rem; border: 2px solid var(--ia-blue); border-radius: .35rem; background: white; color: var(--ia-blue-dark); font-weight: 700; cursor: pointer; }
.ia-trace__controls button:disabled { color: #526172; border-color: #8795a5; background: #edf0f4; cursor: default; }
.ia-trace__status { font-weight: 700; overflow-wrap: anywhere; }
.ia-trace__values { margin-block: .75rem; }
.ia-trace__values:focus-visible { outline: .2rem solid #a46500; outline-offset: .15rem; }
.ia-trace__values table { table-layout: fixed; }
.ia-trace__values th:first-child { width: 4.25rem; white-space: nowrap; }
.ia-trace__values th, .ia-trace__values td { vertical-align: top; overflow-wrap: anywhere; }
.ia-trace__values .is-active { background: #edf3fb; }
.ia-trace__values .is-active th { box-shadow: inset .25rem 0 var(--ia-blue); }
.ia-trace__marker { font-size: .875rem; }
.ia-trace__values .is-active .ia-trace__marker { font-weight: 700; }

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

@media (max-width: 42rem) {
  .ia-exercise-navigation > div { grid-template-columns: 1fr; }
  .ia-exercise-navigation a[rel="next"] { text-align: start; }
}

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