/* KIDI-only proposal. No global reset, external font or illustrative asset. */
.kidi-page {
  --kidi-ink: #173b32;
  --kidi-paper: #f7f3e4;
  --kidi-surface: #ffffff;
  --kidi-muted: #456158;
  --kidi-border: #6a8075;
  --kidi-soft-border: #d2ded3;
  --kidi-soft: #eaf2e9;
  --kidi-warm: #f9e9dc;
  --kidi-warm-ink: #69341b;
  --kidi-radius: 1.15rem;
  --kidi-control: 2.75rem;
  margin: 0;
  color: var(--kidi-ink);
  background: var(--kidi-paper);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}
.kidi-page :where(*, *::before, *::after) { box-sizing: border-box; }
.kidi-page [hidden] { display: none !important; }
.kidi-page :where(h1, h2, h3, h4, p, ul, ol, figure, fieldset) { margin-block: 0 1rem; }
.kidi-page :where(h1, h2, h3, h4) { color: var(--kidi-ink); line-height: 1.22; overflow-wrap: anywhere; }
.kidi-page h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); letter-spacing: -.025em; }
.kidi-page h2 { font-size: clamp(1.55rem, 1.25rem + 1vw, 2rem); }
.kidi-page h3 { font-size: 1.3rem; }
.kidi-page :where(p, li, dd, label, th, td, button, summary, a) { overflow-wrap: anywhere; }
.kidi-page :where(ul, ol) { padding-inline-start: 1.4rem; }
.kidi-page li + li { margin-block-start: .45rem; }
.kidi-page a { color: var(--kidi-ink); text-decoration-thickness: .1em; text-underline-offset: .18em; }
.kidi-page a:hover { text-decoration-thickness: .16em; }
.kidi-page :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--kidi-ink);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px var(--kidi-paper);
}
.kidi-page :where(h1, h2, h3, section, [id]) { scroll-margin-block-start: calc(var(--cc-controls-height, 64px) + 1rem); }
.kidi-shell { inline-size: min(100%, 84rem); margin-inline: auto; padding: clamp(1rem, 3vw, 2.25rem); }
.kidi-skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -12rem; z-index: 100; padding: .75rem 1rem; background: white; }
.kidi-skip:focus { inset-block-start: calc(var(--cc-controls-height, 64px) + .5rem); }
.kidi-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-block-end: 1.1rem; }
.kidi-topbar a { display: inline-flex; align-items: center; min-block-size: var(--kidi-control); font-weight: 650; }
.kidi-hero { margin-block-end: 1.5rem; padding: clamp(1.3rem, 3vw, 2.4rem); background: var(--kidi-ink); color: var(--kidi-paper); border-radius: 1.5rem; }
.kidi-page .kidi-hero :where(h1, h2, h3, p, a) { color: inherit; }
.kidi-hero p { max-inline-size: 66ch; }
.kidi-hero > :last-child { margin-block-end: 0; }
.kidi-hero :focus-visible { outline-color: var(--kidi-paper); box-shadow: 0 0 0 7px var(--kidi-ink); }
.kidi-eyebrow { font-size: 1rem; font-weight: 700; letter-spacing: .035em; }
.kidi-lead { max-inline-size: 64ch; font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); }
.kidi-layout { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.kidi-layout > * { min-inline-size: 0; }
.kidi-nav { position: sticky; inset-block-start: calc(var(--cc-controls-height, 64px) + 1rem); padding: 1rem; border: 1px solid var(--kidi-soft-border); border-radius: var(--kidi-radius); background: var(--kidi-surface); }
.kidi-nav :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.kidi-nav li + li { margin-block-start: .5rem; }
.kidi-nav :where(a, button) { display: flex; align-items: center; gap: .6rem; inline-size: 100%; min-block-size: 3.2rem; padding: .65rem .8rem; text-align: start; text-decoration: none; border: 1px solid transparent; border-radius: .7rem; background: transparent; color: var(--kidi-ink); font: inherit; }
.kidi-nav :where(a, button):hover { background: var(--kidi-soft); }
.kidi-nav [aria-current="step"], .kidi-nav [aria-current="page"] { border-color: var(--kidi-ink); background: var(--kidi-soft); font-weight: 750; }
.kidi-nav summary { font-weight: 750; }
.kidi-station { min-inline-size: 0; }
.kidi-station > header { margin-block-end: 1.25rem; }
.kidi-station > header p { max-inline-size: 66ch; }
.kidi-card { min-inline-size: 0; margin-block-end: 1.2rem; padding: clamp(1rem, 2.4vw, 1.65rem); border: 1px solid var(--kidi-soft-border); border-radius: var(--kidi-radius); background: var(--kidi-surface); box-shadow: 0 .15rem .65rem #173b3207; }
.kidi-card > :last-child { margin-block-end: 0; }
.kidi-card :where(p, li) { max-inline-size: 68ch; }
.kidi-goal { padding-inline-start: 1rem; border-inline-start: 4px solid var(--kidi-ink); font-weight: 650; }
.kidi-topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.kidi-topic-grid .kidi-card { display: flex; flex-direction: column; margin: 0; }
.kidi-topic-grid .kidi-actions { margin-block-start: auto; padding-block-start: .75rem; }
.kidi-meta { color: var(--kidi-muted); font-size: 1rem; line-height: 1.5; }
.kidi-page :where(button, input, select, textarea) { font: inherit; color: var(--kidi-ink); }
.kidi-page :where(button, select, input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), textarea) { min-block-size: var(--kidi-control); max-inline-size: 100%; }
.kidi-page :where(input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), select, textarea) { inline-size: 100%; padding: .6rem .75rem; border: 1.5px solid var(--kidi-border); border-radius: .6rem; background: var(--kidi-surface); line-height: 1.5; }
.kidi-page textarea { min-block-size: 7rem; resize: vertical; }
.kidi-page :where(input[type="radio"], input[type="checkbox"]) { flex: 0 0 auto; inline-size: 1.4rem; block-size: 1.4rem; margin: .55rem; accent-color: var(--kidi-ink); }
.kidi-page label { display: block; }
.kidi-page label > :where(input:not([type="radio"]):not([type="checkbox"]), select, textarea) { margin-block-start: .35rem; }
.kidi-page fieldset { min-inline-size: 0; padding: 0; border: 0; }
.kidi-page legend { padding: 0; margin-block-end: .8rem; font-weight: 750; }
.kidi-options { display: grid; gap: .75rem; }
.kidi-option { display: flex; align-items: flex-start; gap: .45rem; min-block-size: 3.5rem; padding: .5rem .75rem; border: 1.5px solid var(--kidi-border); border-radius: .8rem; background: var(--kidi-surface); color: var(--kidi-ink); cursor: pointer; }
.kidi-option > :where(span, div) { min-inline-size: 0; align-self: center; }
.kidi-option:hover { background: #f3f7f1; }
.kidi-option:focus-within { outline: 2px solid var(--kidi-ink); outline-offset: 2px; }
.kidi-option:has(input:checked), .kidi-option[data-selected="true"] { border-width: 2px; border-color: var(--kidi-ink); background: var(--kidi-soft); }
.kidi-option input { align-self: center; }
.kidi-options > select { min-block-size: 3rem; }
.kidi-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block-start: 1rem; }
.kidi-page button, .kidi-actions a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-block-size: var(--kidi-control); padding: .65rem 1rem; border: 1.5px solid var(--kidi-ink); border-radius: .65rem; background: var(--kidi-ink); color: var(--kidi-paper); font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer; }
.kidi-page button:hover, .kidi-actions a:hover { background: #245447; color: var(--kidi-paper); }
.kidi-page button[data-variant="secondary"], .kidi-actions a[data-variant="secondary"] { background: var(--kidi-surface); color: var(--kidi-ink); }
.kidi-page button[data-variant="secondary"]:hover, .kidi-actions a[data-variant="secondary"]:hover { background: var(--kidi-soft); }
.kidi-page button:disabled { border-style: dashed; background: #e3e9e1; color: #456158; cursor: not-allowed; }
.kidi-page button[aria-pressed="true"] { border-width: 3px; background: var(--kidi-soft); color: var(--kidi-ink); }
.kidi-page .kidi-nav button { justify-content: flex-start; background: transparent; color: var(--kidi-ink); font-weight: inherit; }
.kidi-page .kidi-nav button:hover, .kidi-page .kidi-nav button[aria-current="step"], .kidi-page .kidi-nav button[aria-current="page"] { background: var(--kidi-soft); }
.kidi-feedback { margin-block-start: 1rem; padding: 1rem 1.15rem; border: 2px solid var(--kidi-ink); border-radius: .8rem; background: var(--kidi-soft); color: var(--kidi-ink); }
.kidi-feedback[data-state="incorrect"], .kidi-feedback[data-state="incomplete"] { background: var(--kidi-warm); color: var(--kidi-warm-ink); border-color: var(--kidi-warm-ink); }
.kidi-feedback > :last-child { margin-block-end: 0; }
.kidi-feedback strong { display: block; margin-block-end: .3rem; }
.kidi-hints, .kidi-teacher { margin-block: 1rem; padding: .4rem 1rem; border: 1px solid var(--kidi-border); border-radius: .8rem; background: var(--kidi-surface); }
.kidi-page summary { min-block-size: var(--kidi-control); padding-block: .6rem; cursor: pointer; line-height: 1.45; }
.kidi-hints summary, .kidi-teacher summary { font-weight: 700; }
.kidi-hints[open], .kidi-teacher[open] { padding-block-end: 1rem; }
.kidi-hints[open] summary, .kidi-teacher[open] summary { margin-block-end: .6rem; }
.kidi-product { margin-block: 1rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--kidi-border); border-radius: var(--kidi-radius); background: #fbfcf8; }
.kidi-product label + label { margin-block-start: 1rem; }
.kidi-product .kidi-actions { margin-block-end: .25rem; }
.kidi-table-wrap { max-inline-size: 100%; overflow-x: auto; margin-block: 1rem; border: 1px solid var(--kidi-border); border-radius: .7rem; }
.kidi-table { inline-size: 100%; border-spacing: 0; border-collapse: separate; background: var(--kidi-surface); text-align: start; font-size: 1.0625rem; line-height: 1.5; }
.kidi-table caption { padding: .8rem 1rem; color: var(--kidi-ink); font-weight: 750; text-align: start; background: var(--kidi-soft); }
.kidi-table :where(th, td) { padding: .8rem 1rem; vertical-align: top; border-block-end: 1px solid var(--kidi-soft-border); overflow-wrap: anywhere; hyphens: auto; }
.kidi-table th { font-weight: 750; background: #edf3eb; }
.kidi-table tr:last-child > :where(th, td) { border-block-end: 0; }
.kidi-table :where(th, td) + :where(th, td) { border-inline-start: 1px solid var(--kidi-soft-border); }
.kidi-grid-wrap { max-inline-size: 100%; overflow: auto; padding: .4rem; }
.kidi-grid { display: grid; grid-template-columns: repeat(var(--kidi-columns, 4), minmax(2.75rem, 1fr)); gap: .4rem; inline-size: 100%; max-inline-size: 30rem; }
.kidi-grid-cell { display: flex; align-items: center; justify-content: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; aspect-ratio: 1; margin: 0; padding: .25rem; border: 1.5px solid var(--kidi-border); border-radius: .35rem; background: var(--kidi-surface); color: var(--kidi-ink); font: inherit; text-align: center; }
.kidi-page button.kidi-grid-cell { padding: .25rem; background: var(--kidi-surface); color: var(--kidi-ink); }
.kidi-grid-cell[data-blocked="true"] { border-style: double; border-width: 3px; background: #e5e9e2; }
.kidi-grid-cell[data-goal="true"] { border: 3px solid var(--kidi-ink); background: #e0eddb; }
.kidi-grid-cell[data-current="true"] { outline: 3px solid var(--kidi-ink); outline-offset: -5px; font-weight: 800; }
.kidi-progress { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-block: 1rem; color: var(--kidi-muted); font-size: 1rem; }
.kidi-progress progress { flex: 1 1 10rem; inline-size: min(100%, 18rem); block-size: .8rem; accent-color: var(--kidi-ink); }
.kidi-photo { margin-block: 1rem; }
.kidi-photo img { display: block; inline-size: 100%; max-inline-size: 50rem; block-size: auto; object-fit: contain; border-radius: .75rem; background: var(--kidi-surface); }
.kidi-photo figcaption { margin-block-start: .65rem; color: var(--kidi-muted); font-size: 1rem; line-height: 1.5; }
.kidi-project { margin-block-start: 2rem; border-block-start: 3px solid var(--kidi-ink); padding-block-start: 1.5rem; }
.kidi-page :where(code, pre) { font-family: ui-monospace, Consolas, monospace; font-size: .95em; }
.kidi-page pre { overflow-x: auto; padding: 1rem; border: 1px solid var(--kidi-border); border-radius: .6rem; background: #f0f5ec; }
@media (max-width: 58rem) {
  .kidi-layout { grid-template-columns: minmax(0, 1fr); }
  .kidi-nav { position: static; }
}
@media (max-width: 36rem) {
  .kidi-shell { padding-inline: max(.85rem, env(safe-area-inset-left, 0px)); padding-inline-end: max(.85rem, env(safe-area-inset-right, 0px)); }
  .kidi-hero { padding: 1.15rem; border-radius: 1rem; }
  .kidi-topic-grid { grid-template-columns: minmax(0, 1fr); }
  .kidi-card, .kidi-product { padding: 1rem; }
  .kidi-actions > :where(button, a) { flex: 1 1 100%; }
  .kidi-table :where(th, td) { padding: .65rem; }
  .kidi-option { padding-inline: .45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kidi-page *, .kidi-page *::before, .kidi-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .kidi-page, .kidi-hero, .kidi-card, .kidi-option, .kidi-feedback, .kidi-product, .kidi-nav, .kidi-hints, .kidi-teacher, .kidi-grid-cell { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
  .kidi-page :where(button, input, select, textarea), .kidi-actions a { color: ButtonText; background: ButtonFace; border-color: ButtonText; }
  .kidi-page :focus-visible { outline-color: Highlight; box-shadow: none; }
  .kidi-nav [aria-current="step"], .kidi-nav [aria-current="page"], .kidi-option[data-selected="true"], .kidi-grid-cell[data-current="true"] { outline: 3px solid Highlight; }
}
@media print {
  .kidi-page { color: #000; background: #fff; font-size: 11pt; }
  .kidi-shell { inline-size: auto; max-inline-size: none; padding: 0; }
  .kidi-layout { display: block; }
  .kidi-hero { padding: 0 0 1rem; color: #000; background: #fff; }
  .kidi-nav, .kidi-topbar, .kidi-actions, .kidi-skip, .kidi-teacher { display: none !important; }
  .kidi-card, .kidi-product, .kidi-feedback { color: #000; background: #fff; box-shadow: none; break-inside: avoid; }
  .kidi-page h1 { font-size: 22pt; }
  .kidi-page h2 { font-size: 17pt; }
  .kidi-page h3 { font-size: 13pt; }
  .kidi-table { font-size: 11pt; }
  .kidi-table-wrap, .kidi-grid-wrap { overflow: visible; }
  .kidi-page details:not([open]) > :not(summary) { display: none; }
}

/* Bind actual KIDI markup to the shared proposal styles. */
.kidi-page .kidi-nav{position:static}.kidi-page .kidi-nav ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.5rem}.kidi-page .kidi-nav small{display:block}.kidi-page .kidi-course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem}.kidi-page .kidi-choices{display:grid;gap:.75rem}.kidi-page .kidi-choice{text-align:left;justify-content:flex-start}.kidi-page .kidi-table-scroll{overflow:auto;margin:1rem 0}.kidi-page table{border-collapse:collapse;width:100%;background:#fff}.kidi-page th,.kidi-page td{padding:.65rem;border:1px solid #6a8075;vertical-align:top;text-align:left}.kidi-page .kidi-input-card,.kidi-page .kidi-worked-example{margin:1rem 0;padding:1rem;border:1px solid #6a8075;background:#fff;border-radius:.7rem}.kidi-page .kidi-sequence li{margin-bottom:1rem}.kidi-page .kidi-grid-cell{min-width:0;aspect-ratio:auto;min-height:5rem;font-size:1rem}.kidi-page .kidi-hero button{background:#f7f3e4;color:#173b32}.kidi-page .needs-review{background:#f9e9dc;color:#69341b;border-color:#69341b}

.kidi-page .kidi-caption-pair{display:flex;gap:1rem}.kidi-page .kidi-caption-pair figure{flex:1;min-width:0}.kidi-page .kidi-caption-pair img{width:100%;height:auto}.kidi-page .kidi-caption-pair figcaption{margin-top:.5rem}@media(max-width:36rem){.kidi-page .kidi-caption-pair{display:block}}

/* Align KIDI with the established role and learning layout. */
.kidi-page{background:#f2f6f1;color:#193d31;font-size:1rem}.kidi-hero{background:white;color:#193d31;border:1px solid #d6e1d6;border-radius:15px;padding:24px}.kidi-hero h1{font-size:clamp(24px,3vw,34px)}.kidi-workspace{max-width:1320px;margin:0 auto}.kidi-layout{grid-template-columns:240px minmax(0,1fr)}.kidi-learning-content{min-width:0}.kidi-breadcrumb{margin-bottom:16px}.kidi-hero .kidi-actions button{background:#e4f2e6;color:#193d31;border:1px solid #176345}.kidi-hero :focus-visible{outline-color:#176345}.kidi-course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.kidi-photo{margin:16px 0;background:white;border:1px solid #d6e1d6;border-radius:12px;padding:12px}.kidi-photo img{display:block;width:100%;height:auto;max-height:340px;object-fit:contain;margin:0 auto}.kidi-photo figcaption{font-size:14px;line-height:1.45;color:#304f40;margin-top:10px}.kidi-hardware-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.kidi-hardware-grid .kidi-photo img{max-height:230px}.kidi-course-grid .kidi-photo img{height:180px;object-fit:contain}.kidi-course-grid .kidi-photo{border:0;padding:0}.kidi-page .lrf-ui button{font-size:16px}.kidi-page .lrf-role-choices button{background:#e4f2e6;color:#193d31}.kidi-page .lrf-entry{background:white}.kidi-task{background:white;padding:22px;margin:22px 0;border:1px solid #d6e1d6;border-radius:12px}.kidi-nav{top:80px}.kidi-page .kidi-feedback{color:#173b32}.kidi-depth{margin-top:24px}@media(max-width:820px){.kidi-layout{display:block}.kidi-nav{position:static}.kidi-hardware-grid{grid-template-columns:1fr}.kidi-shell{padding:12px}.kidi-task{padding:16px}}

.kidi-page .kidi-choice{display:block;width:100%;max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:left;height:auto;min-height:48px;padding:12px 16px;line-height:1.5;border-radius:10px}.kidi-page .lrf-role-choices button{display:block;white-space:normal;min-height:110px;padding:22px;text-align:left}.kidi-page .lrf-role-choices strong,.kidi-page .lrf-role-choices span{display:block}.kidi-page .lrf-heading h1{font-size:2rem;line-height:1.2}.kidi-page .kidi-nav ol{display:block}.kidi-page button{min-height:44px;height:auto}.kidi-page .kidi-learning-content>.kidi-station>header h2{font-size:1.6rem}