/* Interactive learning sample. Every rule stays within this component. */
.learning-demo,
.learning-preview {
  --learning-ink: #202329;
  --learning-muted: #666a6b;
  --learning-paper: #fbfaf6;
  --learning-line: #dcdcd4;
  --learning-accent: #f3c85b;
  box-sizing: border-box;
  font-family: "DM Sans", Arial, sans-serif;
  text-align: left;
  color: var(--learning-ink);
  overflow-wrap: break-word;
}

.learning-demo *,
.learning-demo *::before,
.learning-demo *::after,
.learning-preview *,
.learning-preview *::before,
.learning-preview *::after { box-sizing: border-box; }

.learning-demo [hidden],
.learning-preview [hidden] { display: none !important; }

.learning-demo { width: 100%; min-width: 0; margin: 30px 0; }
.learning-heading { margin-bottom: 24px; }
.learning-badge {
  display: inline-block;
  padding: 5px 8px;
  border: 1px solid #b5a06a;
  color: #775315;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.15px;
  line-height: 1.7;
}
.learning-demo .learning-title {
  margin: 14px 0 10px;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: clamp(25px, 3vw, 33px);
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.15;
  text-transform: none;
  color: var(--learning-ink);
}
.learning-demo .learning-description {
  max-width: 640px;
  margin: 0;
  color: var(--learning-muted);
  font-size: 14px;
  line-height: 1.85;
}

/* Course frame and navigation. */
.learning-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid #41464b;
  background: var(--learning-paper);
  box-shadow: 0 13px 32px #20232909;
}
.learning-sidebar { min-width: 0; padding: 27px 18px 24px; background: #202329; color: #f3f1eb; }
.learning-sidebar-heading { padding: 0 5px; }
.learning-sidebar-kicker { display: block; margin-bottom: 10px; color: #bdc0c3; font-size: 8px; letter-spacing: 1.5px; font-weight: 600; line-height: 1.7; }
.learning-sidebar-heading > strong { display: block; max-width: 175px; font-family: "DM Sans", Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.24; letter-spacing: -.55px; }
.learning-progress-wrap { margin: 27px 5px 24px; }
.learning-progress-label { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; font-size: 9px; line-height: 1.6; color: #c3c6c9; }
.learning-progress-label > strong { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; color: #f3f1eb; }
.learning-progress {
  display: block;
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  background: #4b4f55;
  color: var(--learning-accent);
  accent-color: var(--learning-accent);
}
.learning-progress::-webkit-progress-bar { background: #4b4f55; }
.learning-progress::-webkit-progress-value { background: var(--learning-accent); }
.learning-progress::-moz-progress-bar { background: var(--learning-accent); }
.learning-demo .learning-outline {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 7px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.learning-outline-button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  width: 100%;
  min-height: 70px;
  margin: 0;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #ecebe5;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  cursor: pointer;
}
.learning-outline-button:hover:not(:disabled) { background: #2d3036; border-color: #656970; }
.learning-outline-button[aria-current="step"] { background: #34373d; border-color: #74787e; box-shadow: inset 3px 0 0 var(--learning-accent); }
.learning-outline-number { padding-top: 1px; color: #c3c6cb; font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1.75; }
.learning-outline-button[aria-current="step"] .learning-outline-number { color: #f3c85b; }
.learning-outline-copy { display: block; min-width: 0; }
.learning-outline-copy > strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.55; }
.learning-outline-copy > span { display: block; margin-top: 4px; color: #b9bdc2; font-size: 10px; line-height: 1.6; }
.learning-outline-scenario { margin-top: 6px; border-top-color: #565b62; }
.learning-outline-button:disabled { opacity: 1; color: #aeb4bc; cursor: default; }
.learning-outline-button:disabled .learning-outline-number,
.learning-outline-button:disabled .learning-outline-copy > span { color: #9da5ae; }
.learning-sidebar-note { margin: 23px 5px 0; padding-top: 19px; border-top: 1px solid #4b5057; color: #bdc1c6; font-size: 10px; line-height: 1.8; }

/* Lesson canvas. */
.learning-main { display: flex; flex-direction: column; min-width: 0; background: var(--learning-paper); }
.learning-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 61px; padding: 10px 30px; border-bottom: 1px solid var(--learning-line); }
.learning-location { color: #5b6268; font-size: 8px; font-weight: 600; letter-spacing: 1.1px; line-height: 1.8; }
.learning-reset { flex-shrink: 0; min-height: 40px; margin: 0; padding: 8px 0 8px 8px; border: 0; border-radius: 0; background: transparent; color: #5f666d; font-family: inherit; font-size: 10px; font-weight: 500; line-height: 1.7; text-align: right; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.learning-reset:hover { color: #913c2a; }
.learning-view { flex: 1; min-width: 0; padding: 30px; }
.learning-eyebrow { display: block; color: #775315; font-size: 8px; font-weight: 700; letter-spacing: 1.1px; line-height: 1.8; }
.learning-demo .learning-view-title { margin: 10px 0 12px; font-family: "DM Sans", Arial, sans-serif; font-size: clamp(23px, 2.7vw, 31px); font-weight: 500; line-height: 1.2; letter-spacing: -.85px; text-transform: none; color: var(--learning-ink); }
.learning-demo .learning-intro-copy { margin: 0; color: #5e6366; font-size: 14px; line-height: 1.85; }
.learning-steps { display: grid; gap: 0; margin: 25px 0; padding: 0; list-style: none; counter-reset: none; }
.learning-demo .learning-step { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 13px; margin: 0; padding: 17px 0; border-top: 1px solid var(--learning-line); font-size: 13px; line-height: 1.6; }
.learning-step:last-child { border-bottom: 1px solid var(--learning-line); }
.learning-step-number { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border: 1px solid #c9cbc6; color: #60686a; font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1; }
.learning-step-copy { min-width: 0; }
.learning-step-copy > strong { display: block; margin-bottom: 5px; color: #272e31; font-size: 14px; font-weight: 600; line-height: 1.6; }
.learning-demo .learning-step-copy > p { margin: 0; color: #62696b; font-size: 14px; line-height: 1.75; }
.learning-takeaway { margin: 0 0 30px; padding: 18px 19px; border-left: 3px solid #c49c3f; background: #f0eee7; }
.learning-takeaway .learning-eyebrow { color: #626259; font-size: 8px; letter-spacing: .6px; }
.learning-demo .learning-takeaway > p { margin: 8px 0 0; color: #363d3e; font-size: 14px; line-height: 1.7; }
.learning-check-label { display: block; margin-bottom: 13px; color: #70736d; font-size: 8px; font-weight: 700; letter-spacing: 1.35px; line-height: 1.8; }
.learning-question { min-width: 0; margin: 0 0 19px; padding: 0; border: 0; }
.learning-question-title { display: block; float: none; width: 100%; max-width: 100%; margin: 0 0 15px; padding: 0; color: #252c2e; font-size: 16px; font-weight: 600; line-height: 1.55; }
.learning-choices { display: grid; gap: 9px; min-width: 0; }
.learning-choice { display: flex; align-items: flex-start; gap: 12px; min-width: 0; min-height: 50px; margin: 0; padding: 13px 14px; border: 1px solid #cdd0c9; background: #fffefb; color: #434b4e; font-size: 14px; line-height: 1.7; cursor: pointer; }
.learning-choice:has(.learning-radio:enabled):hover { border-color: #8b8f88; background: #f6f5f0; }
.learning-choice:has(.learning-radio:checked) { border-color: #9f8138; background: #fff5d7; color: #37322d; }
.learning-choice:has(.learning-radio:disabled) { cursor: default; }
.learning-radio { flex: 0 0 17px; width: 17px; height: 17px; margin: 2px 0 0; padding: 0; border: 0; accent-color: #775315; cursor: pointer; }
.learning-radio:disabled { cursor: default; }
.learning-choice-copy { display: block; min-width: 0; }

/* Actions and feedback retain full keyboard and native form behavior. */
.learning-button { display: inline-flex; justify-content: center; align-items: center; gap: 13px; max-width: 100%; min-height: 44px; margin: 0; padding: 11px 15px; border: 1px solid transparent; border-radius: 0; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.6; letter-spacing: 0; text-align: center; text-transform: none; white-space: normal; cursor: pointer; }
.learning-button-primary { border-color: var(--learning-accent); background: var(--learning-accent); color: #202329; }
.learning-button-primary:hover:not(:disabled) { border-color: #dbb347; background: #e8bd4d; }
.learning-button-dark { border-color: #292d32; background: #292d32; color: #f7f5ed; }
.learning-button-dark:hover:not(:disabled) { border-color: #4b5058; background: #4b5058; }
.learning-button-quiet { border-color: #bec3bc; background: transparent; color: #404849; }
.learning-button-quiet:hover:not(:disabled) { border-color: #787f78; background: #eeeee6; }
.learning-button:disabled { border-color: #d8dbd3; background: #e8eae3; color: #727970; opacity: 1; cursor: default; }
.learning-button:focus-visible,
.learning-reset:focus-visible,
.learning-radio:focus-visible { outline: 3px solid #775315; outline-offset: 4px; }
.learning-outline-button:focus-visible { outline: 3px solid #f3c85b; outline-offset: 2px; }
.learning-view-title:focus-visible,
.learning-feedback:focus-visible { outline: 2px solid #775315; outline-offset: 5px; }
.learning-feedback { margin-top: 18px; padding: 18px; border: 1px solid #c6d3bb; background: #eef3e8; color: #304432; }
.learning-feedback-title { display: block; font-size: 14px; font-weight: 600; line-height: 1.55; }
.learning-demo .learning-feedback-copy { margin: 7px 0 0; font-size: 14px; line-height: 1.75; color: inherit; }
.learning-feedback-retry { border-color: #d9b9a5; background: #fbefe5; color: #654433; }
.learning-feedback .learning-button { margin-top: 14px; border-color: #b99882; color: #654433; }
.learning-feedback .learning-button:hover { border-color: #986d52; background: #f2e2d4; }
.learning-continue { margin-top: 17px; }
.learning-footer { padding: 21px 30px 20px; border-top: 1px solid var(--learning-line); background: #f4f3ed; }
.learning-navigation { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.learning-page-label { color: #666d6d; font-size: 10px; line-height: 1.7; font-variant-numeric: tabular-nums; text-align: center; }
.learning-demo .learning-navigation-help { margin: 13px 0 0; color: #69706d; font-size: 10px; line-height: 1.8; }
.learning-demo .learning-context-note { max-width: 800px; margin: 15px 0 0; color: #70746d; font-size: 10px; line-height: 1.85; }

/* Scenario and completion. */
.learning-scenario-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 15px; }
.learning-attempts { color: #69706d; font-size: 9px; font-variant-numeric: tabular-nums; line-height: 1.8; }
.learning-customer { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 15px; margin: 26px 0; padding: 20px; border: 1px solid #d4d7cf; background: #efefe7; }
.learning-customer-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #393f43; color: #fffaf0; font-family: "Space Grotesk", sans-serif; font-size: 14px; line-height: 1; }
.learning-customer-copy { min-width: 0; }
.learning-customer-copy > strong { display: block; color: #3a4342; font-size: 12px; font-weight: 600; line-height: 1.7; }
.learning-customer-copy > strong > span { display: block; color: #646f6a; font-size: 9px; font-weight: 400; line-height: 1.7; }
.learning-demo .learning-customer-copy > p { margin: 13px 0 0; color: #35413d; font-size: 16px; line-height: 1.65; }
.learning-scenario-check { margin-top: 26px; }
.learning-complete { padding: 5px 0 8px; }
.learning-complete-mark { display: grid; place-items: center; width: 51px; height: 51px; margin-bottom: 24px; border: 1px solid #a2b595; border-radius: 50%; background: #e8f0e0; color: #355337; font-size: 25px; line-height: 1; }
.learning-complete-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; margin: 25px 0 18px; padding: 20px 0; border-top: 1px solid var(--learning-line); border-bottom: 1px solid var(--learning-line); }
.learning-complete-summary > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.learning-complete-summary dt { order: 1; margin: 0; color: #686f69; font-size: 9px; font-weight: 400; line-height: 1.7; letter-spacing: 0; text-transform: none; }
.learning-complete-summary dd { margin: 0; color: #2c3b30; font-family: "DM Sans", Arial, sans-serif; font-size: 25px; font-weight: 500; line-height: 1.15; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.learning-demo .learning-complete-note { margin: 0 0 23px; color: #71766e; font-size: 10px; line-height: 1.8; }
.learning-complete-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; }
.learning-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }

/* A span-only miniature used inside the portfolio's book media. */
.learning-preview { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 520px; min-width: 0; margin: 0 auto; padding: 0; background: transparent; }
.learning-preview-kicker { display: block; color: #62645e; font-size: 8px; font-weight: 600; line-height: 1.8; letter-spacing: 1.25px; }
.learning-preview-window { display: block; min-width: 0; overflow: hidden; border: 1px solid #969c99; background: var(--learning-paper); box-shadow: 0 13px 25px #2023290d; }
.learning-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px; background: #202329; color: #f3f0e9; }
.learning-preview-bar > strong { font-family: "DM Sans", Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -.25px; }
.learning-preview-bar > code { flex-shrink: 0; padding: 3px 5px; border: 1px solid #927466; color: #f3c85b; font-family: "DM Sans", Arial, sans-serif; font-size: 6px; font-weight: 600; line-height: 1.6; letter-spacing: .8px; }
.learning-preview-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.55fr); min-width: 0; }
.learning-preview-sidebar { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 18px 10px; background: #292d33; color: #d0d4d7; }
.learning-preview-sidebar > span { display: flex; align-items: flex-start; gap: 7px; min-width: 0; padding: 9px 5px; border: 1px solid transparent; font-size: 8px; font-weight: 400; line-height: 1.65; }
.learning-preview-sidebar > span > span { flex-shrink: 0; color: #aeb8c2; font-size: 7px; line-height: 1.9; font-variant-numeric: tabular-nums; }
.learning-preview-sidebar > .learning-preview-active { border-color: #747d84; background: #3a4147; color: #f6f3ed; box-shadow: inset 2px 0 0 var(--learning-accent); }
.learning-preview-sidebar > .learning-preview-active > span { color: #f3c85b; }
.learning-preview-sidebar > .learning-preview-practice { margin-top: auto; padding-top: 14px; border-top-color: #57606a; color: #b8c1c9; font-size: 7px; }
.learning-preview-content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 25px 20px; background: var(--learning-paper); }
.learning-preview-label { display: block; margin-bottom: 11px; color: #94503e; font-size: 7px; font-weight: 600; letter-spacing: .9px; line-height: 1.6; }
.learning-preview-content > strong { display: block; margin: 0 0 20px; color: #283037; font-family: "DM Sans", Arial, sans-serif; font-size: clamp(18px, 1.75vw, 24px); font-weight: 500; line-height: 1.18; letter-spacing: -.6px; }
.learning-preview-line { display: block; width: 100%; height: 3px; margin-bottom: 7px; background: #d3d6d0; }
.learning-preview-line-short { width: 78%; margin-bottom: 21px; }
.learning-preview-option { display: flex; align-items: center; gap: 7px; width: 100%; margin-bottom: 17px; padding: 10px 8px; border: 1px solid #c9b5a7; background: #faf0d3; color: #62483a; font-size: 8px; line-height: 1.7; }
.learning-preview-option > span { flex: 0 0 9px; width: 9px; height: 9px; border: 2px solid #faf0d3; border-radius: 50%; background: #775315; box-shadow: 0 0 0 1px #775315; }
.learning-preview-action { display: flex; align-items: center; justify-content: space-between; gap: 11px; max-width: 100%; margin-top: auto; padding: 9px 11px; background: var(--learning-accent); color: #272529; font-size: 8px; font-weight: 600; line-height: 1.5; }
.learning-preview-action > span { font-size: 13px; font-weight: 400; line-height: 1; }
.learning-preview-caption { display: block; max-width: 390px; color: #696d64; font-size: 10px; font-weight: 400; line-height: 1.85; }

@media (max-width: 960px) {
  .learning-shell { grid-template-columns: 214px minmax(0, 1fr); }
  .learning-sidebar { padding: 24px 14px 22px; }
  .learning-topbar { padding-right: 24px; padding-left: 24px; }
  .learning-view { padding: 26px 24px; }
  .learning-footer { padding-right: 24px; padding-left: 24px; }
  .learning-navigation { gap: 9px; }
  .learning-navigation .learning-button { padding-right: 11px; padding-left: 11px; font-size: 12px; }
  .learning-preview-bar { padding: 13px 12px; }
  .learning-preview-bar > strong { font-size: 12px; }
  .learning-preview-content { padding: 21px 15px; }
  .learning-preview-sidebar { padding: 15px 7px; }
}

@media (max-width: 760px) {
  .learning-shell { grid-template-columns: minmax(0, 1fr); }
  .learning-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 21px 25px; padding: 23px 22px 20px; }
  .learning-sidebar-heading { padding: 0; }
  .learning-sidebar-heading > strong { max-width: 225px; font-size: 21px; }
  .learning-sidebar-kicker { margin-bottom: 7px; font-size: 7px; }
  .learning-progress-wrap { align-self: end; margin: 0 0 4px; }
  .learning-demo .learning-outline { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .learning-outline-button { min-height: 72px; border-color: #4d555d; }
  .learning-outline-scenario { margin-top: 0; }
  .learning-sidebar-note { grid-column: 1 / -1; margin: 0; padding-top: 15px; font-size: 9px; }
  .learning-topbar { min-height: 55px; padding: 7px 23px; }
  .learning-view { padding: 26px 23px; }
  .learning-footer { padding: 20px 23px; }
  .learning-demo .learning-view-title { font-size: 28px; }
  .learning-preview { max-width: 480px; padding: 8px 0; }
  .learning-preview-content { padding: 25px 20px; }
  .learning-preview-content > strong { font-size: 23px; }
  .learning-preview-bar > strong { font-size: 14px; }
  .learning-preview-bar { padding: 15px; }
  .learning-preview-sidebar { padding: 19px 10px; }
  .learning-preview-sidebar > span { font-size: 9px; }
  .learning-preview-option { font-size: 9px; }
}

@media (max-width: 480px) {
  .learning-demo { margin: 25px 0; }
  .learning-heading { margin-bottom: 20px; }
  .learning-badge { font-size: 7px; letter-spacing: .65px; }
  .learning-demo .learning-title { font-size: 26px; }
  .learning-demo .learning-description { font-size: 14px; }
  .learning-sidebar { padding: 20px 14px 17px; gap: 17px 15px; }
  .learning-sidebar-heading > strong { font-size: 18px; }
  .learning-sidebar-kicker { letter-spacing: .85px; }
  .learning-progress-label { font-size: 8px; }
  .learning-progress-label > strong { font-size: 10px; }
  .learning-outline-button { grid-template-columns: 17px minmax(0, 1fr); gap: 7px; min-height: 78px; padding: 10px 8px; }
  .learning-outline-copy > strong { font-size: 12px; }
  .learning-outline-copy > span { font-size: 10px; }
  .learning-outline-number { font-size: 9px; }
  .learning-topbar { gap: 10px; padding-right: 16px; padding-left: 16px; }
  .learning-location { font-size: 7px; letter-spacing: .7px; }
  .learning-reset { font-size: 9px; }
  .learning-view { padding: 24px 16px; }
  .learning-demo .learning-view-title { font-size: 25px; }
  .learning-demo .learning-intro-copy { font-size: 14px; }
  .learning-steps { margin-top: 22px; }
  .learning-demo .learning-step { gap: 10px; }
  .learning-step-copy > strong { font-size: 14px; }
  .learning-demo .learning-step-copy > p { font-size: 14px; }
  .learning-takeaway { padding: 15px; margin-bottom: 25px; }
  .learning-demo .learning-takeaway > p { font-size: 13px; }
  .learning-question-title { font-size: 15px; }
  .learning-choice { gap: 10px; padding: 12px 10px; font-size: 14px; }
  .learning-feedback { padding: 15px; }
  .learning-demo .learning-feedback-copy { font-size: 14px; }
  .learning-footer { padding: 17px 16px; }
  .learning-navigation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .learning-navigation .learning-button { min-width: 0; font-size: 12px; }
  .learning-page-label { grid-column: 1 / -1; grid-row: 1; text-align: left; font-size: 9px; }
  .learning-customer { grid-template-columns: 30px minmax(0, 1fr); gap: 11px; margin-top: 23px; padding: 16px 13px; }
  .learning-customer-mark { width: 30px; height: 30px; font-size: 12px; }
  .learning-demo .learning-customer-copy > p { font-size: 14px; }
  .learning-complete-summary { gap: 12px; }
  .learning-complete-summary dd { font-size: 22px; }
  .learning-complete-summary dt { font-size: 8px; }
  .learning-complete-actions { align-items: stretch; flex-direction: column; }
  .learning-preview { gap: 15px; }
  .learning-preview-kicker { font-size: 7px; letter-spacing: .75px; }
  .learning-preview-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); }
  .learning-preview-bar { gap: 7px; padding: 12px; }
  .learning-preview-bar > strong { font-size: 12px; }
  .learning-preview-sidebar { gap: 6px; padding: 13px 7px; }
  .learning-preview-sidebar > span { gap: 5px; padding: 8px 5px; font-size: 8px; }
  .learning-preview-content { padding: 21px 13px; }
  .learning-preview-content > strong { margin-bottom: 18px; font-size: 20px; }
  .learning-preview-option { gap: 6px; padding: 9px 7px; font-size: 8px; }
  .learning-preview-action { gap: 8px; padding: 8px; font-size: 7px; }
  .learning-preview-caption { font-size: 9px; }
}

@media (max-width: 360px) {
  .learning-sidebar { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .learning-sidebar-heading > strong { max-width: 230px; }
  .learning-progress-wrap { margin: 0; }
  .learning-progress-label { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px; }
  .learning-demo .learning-outline { grid-template-columns: minmax(0, 1fr); }
  .learning-outline-button { grid-template-columns: 20px minmax(0, 1fr); min-height: 59px; }
  .learning-outline-copy > strong { font-size: 12px; }
  .learning-demo .learning-view-title { font-size: 24px; }
  .learning-view { padding: 22px 13px; }
  .learning-footer { padding: 17px 13px; }
  .learning-preview-bar { padding: 11px 9px; }
  .learning-preview-bar > strong { font-size: 11px; }
  .learning-preview-bar > code { font-size: 5px; letter-spacing: .5px; }
  .learning-preview-sidebar { padding: 11px 5px; }
  .learning-preview-sidebar > span { gap: 4px; padding: 7px 4px; font-size: 7px; }
  .learning-preview-sidebar > span > span { font-size: 6px; }
  .learning-preview-sidebar > .learning-preview-practice { font-size: 6px; }
  .learning-preview-content { padding: 18px 10px; }
  .learning-preview-content > strong { font-size: 17px; letter-spacing: -.4px; }
  .learning-preview-option { font-size: 7px; padding: 8px 6px; }
  .learning-preview-action { gap: 5px; padding: 8px 6px; font-size: 6px; }
}

@media (forced-colors: active) {
  .learning-outline-button[aria-current="step"],
  .learning-choice:has(.learning-radio:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
  .learning-progress { appearance: auto; -webkit-appearance: auto; }
  .learning-button:disabled,
  .learning-outline-button:disabled { color: GrayText; border-color: GrayText; }
}