/* Buyer orientation for the detailed examples. The existing scene remains intact. */
.lab-chapters { display: flex; gap: 6px; width: max-content; max-width: 100%; margin-bottom: 28px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); }
.lab-chapters a { padding: 8px 15px; border-radius: var(--r-pill); color: var(--ink-2); font-size: 13px; font-weight: 700; text-decoration: none; }
.lab-chapters a[aria-current] { background: var(--accent-soft); color: var(--accent-ink); }
.lab-chapters a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.lab-plan { max-width: 760px; margin-top: 28px; padding-block: 16px; border-block: 1px solid var(--line); }
.lab-plan summary { width: fit-content; color: var(--ink); font-size: 16px; font-weight: 600; cursor: pointer; }
.lab-plan dl { display: grid; gap: 18px; margin: 24px 0 8px; }
.lab-plan dl > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; }
.lab-plan dt { font-weight: 600; }
.lab-plan dd { margin: 0; color: var(--ink-2); }
.creative-scene__head, .geo-scene__head { min-height: 64px; }
.lab-mobile-cue { display: none; }
.creative-duel:focus-visible, .lab-plan summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
#creative-readout, #creative-walkthrough { scroll-margin-top: 96px; }
@media (max-width: 1000px) {
  .creative-scene__head { gap: 16px; padding: 16px 0; }
  .creative-nav { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; border-radius: var(--r-md); }
  .creative-nav button { min-height: 44px; }
  .lab-mobile-cue { display: block; margin: 16px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
  .creative-duel { margin-right: 0; }
}
@media (max-width: 900px) {
  .geo-scene__head { gap: 16px; padding-block: 16px; }
  .geo-nav { display: flex; flex-wrap: wrap; grid-column: 1 / -1; grid-row: 2; gap: 5px; }
  .geo-nav button { min-height: 44px; padding-inline: 12px; }
  .geo-counter { grid-column: 2; grid-row: 1; }
}
@media (max-width: 600px) {
  .creative-nav, .geo-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .lab-plan dl > div { grid-template-columns: 1fr; gap: 4px; }
}