/* The onboarding keeps the app's typography and controls. Notes answer styling
 * and motion are provided by the unmodified student-app/notes-answer.css. */
.sc-onboarding-example { color: var(--sc-ink, #171a1f); font: 400 .9rem/1.6 var(--sc-font-body, Inter, sans-serif); }
.sc-onboarding-example * { box-sizing: border-box; }
.sc-onboarding-example [hidden] { display: none !important; }
.sc-onboarding-example .sc-oe-example-label { display: inline-flex; margin-bottom: 14px; padding: 4px 10px; border-radius: var(--sc-r-pill, 999px); background: var(--sc-accent-soft, #ebf0ff); color: var(--sc-accent-deep, #1f44cc); font-size: .73rem; font-weight: 650; }
.sc-onboarding-example .sc-oe-content > h3, .sc-onboarding-example .sc-oe-reader h3 { margin: 0; font: 650 clamp(1.25rem, 2.2vw, 1.65rem)/1.22 var(--sc-font-display, "Bricolage Grotesque", sans-serif); letter-spacing: -.025em; text-wrap: balance; }
.sc-onboarding-example .sc-oe-content > h3:focus, .sc-onboarding-example .sc-oe-reader h3:focus, .sc-onboarding-example .sc-oe-feedback:focus { outline: none; }
.sc-onboarding-example .sc-oe-content > p, .sc-onboarding-example .sc-oe-reader p { margin: 12px 0 0; }
.sc-onboarding-example .sc-oe-intro, .sc-onboarding-example .sc-oe-lesson { max-width: 66ch; color: var(--sc-ink-soft, #4b5563); }
.sc-onboarding-example .sc-oe-content > .sc-oe-fine { margin-top: 12px; font-size: .77rem; color: var(--sc-ink-soft, #4b5563); }
.sc-onboarding-example .sc-oe-source { display: inline-flex; margin: 16px 0 4px; color: var(--sc-ink-soft, #4b5563); font-size: .77rem; }
.sc-onboarding-example .sc-oe-choice { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0; padding: 15px 16px; border: 1px solid var(--sc-line, #e8e5dd); border-radius: var(--sc-r-control, 14px); background: var(--sc-surface, #fff); cursor: pointer; }
.sc-onboarding-example .sc-oe-choice input { flex: 0 0 19px; width: 19px; height: 19px; margin: 3px 0; accent-color: var(--sc-accent, #2e5bff); }
.sc-onboarding-example .sc-oe-choice span { min-width: 0; }
.sc-onboarding-example .sc-oe-choice strong { display: block; font-size: .88rem; font-weight: 600; }
.sc-onboarding-example .sc-oe-choice small { display: block; margin-top: 3px; color: var(--sc-ink-soft, #4b5563); font-size: .78rem; }
.sc-onboarding-example .sc-oe-primary, .sc-onboarding-example .sc-oe-secondary, .sc-onboarding-example .sc-oe-text { min-height: 44px; cursor: pointer; font: 600 .86rem/1.45 var(--sc-font-body, Inter, sans-serif); }
.sc-onboarding-example .sc-oe-primary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 20px; padding: 13px 20px; border: 0; border-radius: 16px; background: #2e5bff; color: #fff; box-shadow: var(--sc-shadow-pop); }
.sc-onboarding-example .sc-oe-primary:hover:not(:disabled) { background: #1f44cc; }
.sc-onboarding-example .sc-oe-primary:disabled { cursor: default; background: var(--sc-line, #e8e5dd); color: var(--sc-ink-soft, #4b5563); box-shadow: none; }
.sc-onboarding-example .sc-oe-secondary { padding: 9px 13px; border: 1px solid var(--sc-line, #e8e5dd); border-radius: 12px; background: var(--sc-surface, #fff); color: var(--sc-ink, #171a1f); }
.sc-onboarding-example .sc-oe-secondary:hover { border-color: var(--sc-accent, #2e5bff); }
.sc-onboarding-example .sc-oe-text { padding: 10px 0; border: 0; background: transparent; color: var(--sc-accent-deep, #1f44cc); text-align: left; }
.sc-onboarding-example .sc-oe-text:disabled { color: var(--sc-ink-soft, #4b5563); opacity: .55; cursor: default; }
.sc-onboarding-example .sc-oe-text:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.sc-onboarding-example :is(.sc-oe-primary, .sc-oe-secondary, .sc-oe-text, .sc-oe-choice input, .sc-oe-duration, .sc-oe-lab-answer, .sc-oe-selectable):focus-visible { outline: 2px solid var(--sc-accent, #2e5bff); outline-offset: 4px; }
.sc-onboarding-example .sc-oe-reader { margin-top: 12px; padding: 0; }
.sc-onboarding-example .sc-oe-guide-question { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--sc-line, #e8e5dd); }
.sc-onboarding-example .sc-oe-guide-question h4, .sc-onboarding-example .sc-oe-question-title { margin: 0; font: 650 1rem/1.4 var(--sc-font-display, "Bricolage Grotesque", sans-serif); }
.sc-onboarding-example .sc-oe-guide-question .sc-oe-guide-answer { margin: 2px 0 0; padding: 13px 16px; border-radius: 12px; background: var(--sc-accent-soft, #ebf0ff); }
.sc-onboarding-example .sc-oe-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--sc-line, #e8e5dd); }
.sc-onboarding-example .sc-oe-pager span { color: var(--sc-ink-soft, #4b5563); font-size: .75rem; }
.sc-onboarding-example .sc-oe-durations { display: flex; gap: 12px; margin-top: 20px; }
.sc-onboarding-example .sc-oe-duration { flex: 1; min-width: 0; padding: 16px; border: 1.5px solid var(--sc-line, #e8e5dd); border-radius: var(--sc-r-control, 14px); background: var(--sc-surface, #fff); text-align: left; cursor: pointer; color: var(--sc-ink, #171a1f); }
.sc-onboarding-example .sc-oe-duration strong { display: block; font: 650 1rem/1.4 var(--sc-font-display, "Bricolage Grotesque", sans-serif); }
.sc-onboarding-example .sc-oe-duration span { display: block; margin-top: 5px; font: 400 .78rem/1.5 var(--sc-font-body, Inter, sans-serif); color: var(--sc-ink-soft, #4b5563); }
.sc-onboarding-example .sc-oe-duration[aria-pressed="true"] { border-color: var(--sc-accent, #2e5bff); background: var(--sc-accent-soft, #ebf0ff); }
.sc-onboarding-example .sc-oe-question-title { margin-top: 24px; }
.sc-onboarding-example .sc-oe-lab-answers { display: grid; gap: 10px; margin-top: 14px; }
.sc-onboarding-example .sc-oe-lab-answer { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1.5px solid var(--sc-line, #e8e5dd); border-radius: var(--sc-r-control, 14px); background: var(--sc-surface, #fff); color: var(--sc-ink, #171a1f); text-align: left; font: 400 .86rem/1.5 var(--sc-font-body, Inter, sans-serif); cursor: pointer; }
.sc-onboarding-example .sc-oe-lab-answer strong { flex: 1; font-weight: 550; }
.sc-onboarding-example .sc-oe-lab-answer > span { color: var(--sc-ink-soft, #4b5563); font-weight: 650; }
.sc-onboarding-example .sc-oe-lab-answer[aria-pressed="true"] { border-color: var(--sc-accent, #2e5bff); background: var(--sc-accent-soft, #ebf0ff); }
.sc-onboarding-example .sc-oe-lab-answer.is-correct { border-color: var(--sc-green, #279a64); background: var(--sc-green-soft, #e4f4ec); }
.sc-onboarding-example .sc-oe-lab-answer.is-incorrect { border-color: var(--sc-red, #de5b4e); background: var(--sc-red-soft, #fceae8); }
.sc-onboarding-example .sc-oe-lab-answer:disabled { cursor: default; opacity: 1; }
.sc-onboarding-example .sc-oe-hint { margin: 0 0 16px; padding: 12px 15px; border-radius: 12px; background: var(--sc-accent-soft, #ebf0ff); font-size: .84rem; }
.sc-onboarding-example .sc-oe-feedback { margin-top: 8px; padding: 16px; border-radius: var(--sc-r-control, 14px); background: var(--sc-surface, #fff); }
.sc-onboarding-example .sc-oe-feedback strong { font-size: .9rem; }
.sc-onboarding-example .sc-oe-feedback p { margin: 6px 0 0; font-size: .85rem; }
.sc-onboarding-example .sc-oe-note-document { margin-top: 20px; border-radius: var(--sc-r-card, 22px); background: var(--sc-surface, #fff); box-shadow: var(--sc-shadow-card); overflow: hidden; }
.sc-onboarding-example .sc-oe-note-toolbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 13px 20px; border-bottom: 1px solid var(--sc-line, #e8e5dd); font-size: .75rem; color: var(--sc-ink-soft, #4b5563); }
.sc-onboarding-example .sc-oe-note-pane { max-height: min(68dvh, 620px); overflow-y: auto; overscroll-behavior: contain; }
.sc-onboarding-example .sc-oe-note-pane .doc-inner { position: relative; padding: 22px; }
.sc-onboarding-example .sc-oe-note-pane h4 { margin: 0 0 16px; font: 650 1.18rem/1.3 var(--sc-font-display, "Bricolage Grotesque", sans-serif); }
.sc-onboarding-example .sc-oe-editor { min-height: 0; font: 400 .91rem/1.75 var(--sc-font-body, Inter, sans-serif); }
.sc-onboarding-example .sc-oe-editor > p { margin: 0 0 18px; }
.sc-onboarding-example .sc-oe-selectable { display: inline; padding: 3px 1px; border-radius: 3px; background: var(--sc-accent-soft, #ebf0ff); cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sc-onboarding-example .sc-oe-selectable[aria-pressed="true"] { background: color-mix(in srgb, var(--sc-accent, #2e5bff) 20%, var(--sc-surface, #fff)); }
.sc-onboarding-example .sc-oe-note-tail { color: var(--sc-ink-soft, #4b5563); }
.sc-onboarding-example .sc-oe-selection-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 3px; }
.sc-onboarding-example .sc-oe-selection-tools > span { width: 100%; color: var(--sc-ink-soft, #4b5563); font-size: .73rem; }
.sc-onboarding-example .sc-oe-added { margin: 0 0 18px; }
.sc-onboarding-example .sc-oe-added p { margin: 8px 0; }
.sc-onboarding-example .sc-oe-applied { font-size: .82rem; color: var(--sc-ink-soft, #4b5563); }
.sc-onboarding-example .sc-oe-live { margin: 10px 0 0; font-size: .8rem; color: var(--sc-ink-soft, #4b5563); }
.sc-onboarding-example .sc-oe-live:empty { display: none; }
@media (max-width: 420px) {
  .sc-onboarding-example .sc-oe-note-pane .doc-inner { padding: 18px 14px; }
  .sc-onboarding-example .sc-oe-note-toolbar { padding: 12px 14px; }
  .sc-onboarding-example .sc-oe-duration { padding: 12px; }
  .sc-onboarding-example .sc-oe-durations { gap: 8px; }
}