/* Option 1: the guided page. Scoped to lessons so the editorial library and
   existing display preferences retain their own layout. */
body[data-stage="lesson"] main { max-width: 1200px; }
body[data-stage="lesson"] .flow-label { display: none; }
body[data-stage="lesson"] .scenario-toolbar { margin-bottom: 14px; }
body[data-stage="lesson"] .scenario-nav { margin-bottom: 0; }
:is(#guided-lesson, #starting-point) {
  --gl-ink: #182130; --gl-muted: #434b5a; --gl-line: #d3d0c7;
  --gl-blue: #244fae; --gl-wash: #eaf0fb; --gl-white: #fffefa; --gl-quiet: #efede7;
  color: var(--gl-ink); font-family: 'Avenir Next', Avenir, system-ui, sans-serif;
  font-size: 16px; line-height: 1.6;
}
[data-contrast="high"] :is(#guided-lesson, #starting-point) { --gl-ink:#101827; --gl-muted:#263447; --gl-line:#64748b; --gl-white:#fff; --gl-quiet:#f1f3f5; --gl-wash:#edf2ff; --gl-blue:#173f96; }
:is(#guided-lesson, #starting-point) [hidden] { display: none !important; }
:is(#guided-lesson, #starting-point) h1, :is(#guided-lesson, #starting-point) h2, :is(#guided-lesson, #starting-point) h3, :is(#guided-lesson, #starting-point) h4 { color:var(--gl-ink); font-family:inherit; }
:is(#guided-lesson, #starting-point) button, :is(#guided-lesson, #starting-point) input, :is(#guided-lesson, #starting-point) select, :is(#guided-lesson, #starting-point) summary { font:inherit; }
:is(#guided-lesson, #starting-point) button, :is(#guided-lesson, #starting-point) summary { cursor:pointer; }
:is(#guided-lesson, #starting-point) :is(button, a, input, select, summary):focus-visible { outline:3px solid var(--gl-blue); outline-offset:4px; }
:is(#guided-lesson, #starting-point) [tabindex="-1"]:focus { outline:none; }
:is(#guided-lesson, #starting-point) [tabindex="-1"] { scroll-margin-top:20px; }
:is(#guided-lesson, #starting-point) p { margin:0 0 12px; }
:is(#guided-lesson, #starting-point) .gl-page-heading { padding:26px 0 23px; }
:is(#guided-lesson, #starting-point) .gl-eyebrow { color:var(--gl-blue); font-size:.75rem; font-weight:650; letter-spacing:.1em; text-transform:uppercase; margin:0 0 8px; }
:is(#guided-lesson, #starting-point) h1 { font-size:clamp(1.85rem,3.1vw,2.6rem); line-height:1.16; letter-spacing:-.035em; font-weight:600; margin:0 0 12px; max-width:900px; }
:is(#guided-lesson, #starting-point) .gl-intro { color:var(--gl-muted); font-size:.94rem; margin:0 0 18px; }
.gl-index { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.gl-index a { display:flex; align-items:center; gap:8px; min-height:44px; font-size:.875rem; color:var(--gl-muted); text-decoration:none; }
.gl-index a:hover { color:var(--gl-blue); text-decoration:underline; text-underline-offset:4px; }
.gl-index b { font-weight:500; color:var(--gl-blue); }
.gl-index > span { width:22px; height:1px; background:var(--gl-line); }
.gl-parts { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin:14px 0; font-size:.875rem; }
.gl-parts select { max-width:100%; min-height:44px; padding:8px 30px 8px 12px; color:var(--gl-ink); border:1px solid var(--gl-line); border-radius:8px; background:var(--gl-white); }
:is(#guided-lesson, #starting-point) .gl-parts p { color:var(--gl-muted); font-size:.8125rem; margin:0; }
.gl-section { padding:25px 0; border-top:1px solid var(--gl-line); scroll-margin-top:20px; }
.gl-section-title { display:flex; align-items:baseline; gap:12px; margin:0 0 17px; }
.gl-section-title > span { color:var(--gl-blue); font-size:.8rem; font-variant-numeric:tabular-nums; }
:is(#guided-lesson, #starting-point) .gl-section-title h2 { font-size:1.12rem; font-weight:600; letter-spacing:-.02em; margin:0; }
.gl-scene-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:32px; align-items:center; }
.gl-photo { margin:0; min-width:0; }
.gl-photo img { display:block; width:100%; height:auto; max-height:none; aspect-ratio:auto; object-fit:contain; border-radius:16px; }
.gl-photo figcaption { margin-top:7px; font-size:.75rem; color:var(--gl-muted); }
:is(#guided-lesson, #starting-point) .gl-story > p { color:#101827; font-size:1rem; font-weight:600; line-height:1.6; margin-bottom:16px; }
.gl-speech { padding:18px 21px; background:var(--gl-wash); border-radius:14px; }
.gl-speaker { display:block; font-size:.8125rem; color:var(--gl-muted); }
:is(#guided-lesson, #starting-point) blockquote { margin:4px 0 12px; font-size:1.4rem; line-height:1.45; letter-spacing:-.02em; font-weight:550; }
:is(#guided-lesson, #starting-point) .gl-small { font-size:.8125rem; color:var(--gl-muted); line-height:1.6; }
:is(#guided-lesson, #starting-point) .gl-small:empty { display:none; }
:is(#guided-lesson, #starting-point) .gl-written-note { margin:0; }
.gl-audio-description { color:var(--gl-muted); font-size:.8125rem; }
.gl-audio-description summary { width:fit-content; padding:8px 0; min-height:40px; }
:is(#guided-lesson, #starting-point) .gl-caption { display:none; font-size:.8125rem; color:var(--gl-muted); }
[data-captions="on"] :is(#guided-lesson, #starting-point) .gl-caption { display:block; }
[data-captions="on"] :is(#guided-lesson, #starting-point) .gl-audio-description { display:none; }
.gl-cues { display:grid; grid-template-columns:1fr 1fr; gap:20px 32px; }
:is(#guided-lesson, #starting-point) .gl-cue h3 { font-size:.94rem; font-weight:650; margin:0 0 4px; }
:is(#guided-lesson, #starting-point) .gl-cue p { font-size:.94rem; color:var(--gl-muted); margin:0; }
.gl-learning-card { padding:26px; border:1px solid var(--gl-line); border-radius:16px; background:var(--gl-white); }
.gl-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; max-width:360px; padding:5px; margin-bottom:25px; border-radius:11px; background:var(--gl-quiet); }
:is(#guided-lesson, #starting-point) .gl-tabs button { min-height:54px; padding:9px; border:0; border-radius:7px; background:transparent; color:var(--gl-muted); font-size:.875rem; font-weight:600; }
.gl-tabs button span { display:block; margin-top:2px; font-size:.75rem; font-weight:450; }
:is(#guided-lesson, #starting-point) .gl-tabs button[aria-selected="true"] { background:var(--gl-white); color:var(--gl-blue); box-shadow:0 1px 4px #18213018; }
.gl-tabs button[aria-selected="true"] span { color:var(--gl-muted); }
:is(#guided-lesson, #starting-point) .gl-response-heading { font-size:1.4rem; line-height:1.3; letter-spacing:-.02em; font-weight:600; margin:0 0 8px; }
:is(#guided-lesson, #starting-point) .gl-goal { color:var(--gl-muted); font-size:.9375rem; margin-bottom:20px; }
.gl-lesson-layout { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:28px; }
.gl-model { padding:22px; background:var(--gl-wash); border-radius:12px; }
.gl-model > span { display:block; margin-bottom:8px; color:var(--gl-blue); font-size:.8125rem; font-weight:600; }
:is(#guided-lesson, #starting-point) .gl-model blockquote { margin:0; font-size:1.4rem; font-weight:600; }
:is(#guided-lesson, #starting-point) .gl-model p { margin:12px 0 0; color:var(--gl-muted); font-size:.875rem; }
:is(#guided-lesson, #starting-point) h4 { font-size:.875rem; font-weight:650; margin:0 0 5px; }
:is(#guided-lesson, #starting-point) .gl-teaching p { font-size:.9375rem; color:var(--gl-muted); }
:is(#guided-lesson, #starting-point) .gl-teaching h4:not(:first-child) { margin-top:16px; }
.gl-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px 22px; margin-top:20px; }
:is(#guided-lesson, #starting-point) .gl-primary { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:48px; padding:12px 22px; border:1px solid var(--gl-blue); border-radius:9px; background:var(--gl-blue); color:white; font-size:.875rem; font-weight:600; text-align:center; }
:is(#guided-lesson, #starting-point) .gl-primary:hover { background:#173f96; }
:is(#guided-lesson, #starting-point) .gl-text-button { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 0; border:0; background:none; color:var(--gl-blue); font-size:.8125rem; font-weight:600; text-align:left; text-decoration:underline; text-underline-offset:4px; }
:is(#guided-lesson, #starting-point) .gl-listen { text-decoration:none; font-size:.875rem; }
.gl-practice-tools { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:-10px; margin-bottom:12px; }
:is(#guided-lesson, #starting-point) .gl-practice-tools p { font-size:.8125rem; color:var(--gl-muted); margin:0; }
.gl-choices { display:grid; gap:10px; border:0; margin:0; padding:0; min-width:0; }
.gl-choice { position:relative; display:flex; align-items:center; gap:14px; padding:15px 18px; border:1px solid var(--gl-line); border-radius:11px; cursor:pointer; font-size:.9375rem; font-weight:550; line-height:1.5; }
.gl-choice:hover { border-color:#7e8a9d; }
.gl-choice:has(input:checked) { border-color:var(--gl-blue); background:var(--gl-wash); box-shadow:inset 0 0 0 1px var(--gl-blue); }
.gl-choice:has(input:focus-visible) { outline:3px solid var(--gl-blue); outline-offset:4px; }
.gl-choice input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.gl-letter { display:flex; justify-content:center; align-items:center; flex:none; width:29px; height:31px; border:1px solid var(--gl-line); border-radius:6px; color:var(--gl-muted); font-size:.75rem; }
.gl-choice:has(input:checked) .gl-letter { background:var(--gl-blue); color:white; border-color:var(--gl-blue); }
:is(#guided-lesson, #starting-point) #gl-selection-help { margin:16px 0 0; }
.gl-feedback { margin-top:23px; padding-top:20px; border-top:1px solid var(--gl-line); }
:is(#guided-lesson, #starting-point) .gl-feedback h3 { font-size:1.075rem; margin:0 0 8px; font-weight:650; }
:is(#guided-lesson, #starting-point) .gl-feedback > p:not(.gl-eyebrow) { font-size:.9375rem; color:var(--gl-muted); }
.gl-reaction { padding:16px 18px; margin:17px 0; background:var(--gl-quiet); border-radius:10px; }
:is(#guided-lesson, #starting-point) .gl-reaction p { margin:0; font-size:.9375rem; }
.gl-rehearsal { margin-top:20px; padding:23px; border:1px solid var(--gl-line); border-radius:12px; }
.gl-rehearsal-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
:is(#guided-lesson, #starting-point) .gl-rehearsal-title h3 { font-size:1.1rem; font-weight:650; margin:0 0 6px; }
.gl-rehearsal-title > span { font-size:.75rem; color:var(--gl-muted); }
.gl-alternatives { margin-top:9px; }
.gl-alternatives summary { min-height:44px; padding:10px 0; color:var(--gl-blue); font-size:.8125rem; font-weight:600; }
.gl-alternatives ul { padding-left:20px; font-size:.875rem; }
.gl-alternatives li + li { margin-top:6px; }
.gl-continue { margin-top:22px; padding-top:20px; border-top:1px solid var(--gl-line); }
:is(#guided-lesson, #starting-point) .gl-continue h3 { font-size:1.05rem; margin:0 0 6px; }
:is(#guided-lesson, #starting-point) .gl-continue > p { font-size:.875rem; color:var(--gl-muted); }
.gl-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:840px) {
  .gl-scene-layout { gap:24px; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
  .gl-speech { padding:15px 17px; }
}
@media (max-width:620px) {
  :is(#guided-lesson, #starting-point) h1 { font-size:1.9rem; }
  .gl-scene-layout, .gl-lesson-layout { grid-template-columns:1fr; gap:20px; }
  .gl-cues { gap:18px; }
  .gl-index { gap:8px 14px; }
  .gl-index a { font-size:.8125rem; }
  .gl-index > span { display:none; }
  .gl-parts { display:block; }
  .gl-parts label { display:block; margin-bottom:5px; }
  .gl-parts select { width:100%; margin-bottom:6px; }
  .gl-learning-card { padding:20px 17px; }
  .gl-tabs { max-width:none; }
  .gl-model { padding:18px; }
  :is(#guided-lesson, #starting-point) .gl-model blockquote { font-size:1.2rem; }
  .gl-choice { gap:11px; padding:14px 12px; }
  .gl-rehearsal { padding:18px 15px; }
  .gl-actions { gap:6px 16px; }
}
@media (max-width:380px) { .gl-cues { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { :is(#guided-lesson, #starting-point) { animation:none; } }