/* Scoped walkthrough layout; existing production styles remain untouched. */
#infoModal { padding: 16px; }
#infoModal .info-modal-card { width: min(960px, calc(100vw - 32px)); height: min(640px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); padding: 28px; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; background: var(--panel); }
#infoModal .section-kicker { font-size: 11px; color: var(--muted); letter-spacing: 0; }
#infoModal h2 { font-size: 26px; line-height: 1.25; margin: 8px 40px 8px 0; letter-spacing: 0; }
#infoModal .tour-intro { font-size: 14px; margin: 0 28px 22px 0; }
#infoModal .tour-progress { flex-shrink: 0; gap: 0; margin: 0 0 24px; border-bottom: 1px solid var(--line); }
#infoModal .tour-progress button { min-width: 0; min-height: 54px; padding: 8px 10px 12px; border: 0; border-radius: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); gap: 3px; box-shadow: none; }
#infoModal .tour-progress button span { font-size: 10px; font-variant-numeric: tabular-nums; }
#infoModal .tour-progress button small { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
#infoModal .tour-progress button.active { color: var(--text); border-bottom-color: var(--accent); background: var(--panel-2); }
#infoModal .tour-layout { flex: 1; display: grid; grid-template-columns: 1.12fr 1fr; grid-template-areas: 'copy preview'; align-items: start; gap: 30px; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 2px 12px; }
#infoModal .tour-copy { grid-area: copy; min-width: 0; height: auto; min-height: max-content; }
#infoModal #tourCounter { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); margin: 0 0 12px; }
#infoModal #tourTitle { font-size: 22px; line-height: 1.3; margin: 0 0 10px; letter-spacing: 0; }
#infoModal #tourDescription { font-size: 14px; line-height: 1.6; margin: 0 0 18px; color: var(--muted); }
#infoModal .tour-details { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
#infoModal .tour-details li { font-size: 13px; line-height: 1.55; padding-left: 15px; position: relative; }
#infoModal .tour-details li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; position: absolute; left: 0; top: 8px; background: var(--accent); }
#infoModal .tour-tip { font-size: 12px; line-height: 1.55; padding: 14px 0 0; margin: 18px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--muted); }
#infoModal .tour-scene { grid-area: preview; min-width: 0; height: 270px; min-height: 270px; border: 0; border-radius: 0; background: var(--panel-2); padding: 22px 18px; display: flex; align-items: center; }
#infoModal .guide-preview { width: 100%; border: 0; box-shadow: none; background: transparent; padding: 0; }
#infoModal .guide-preview-top { font-size: 11px; gap: 8px; padding: 0 0 18px; }
#infoModal .guide-preview-mark { display: none; }
#infoModal .guide-preview-rows { min-height: 100px; display: grid; align-content: center; gap: 12px; }
#infoModal .guide-preview-rows span { font-size: 12px; line-height: 1.6; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); padding: 8px 0; background: transparent; overflow-wrap: anywhere; }
#infoModal .guide-demo { margin-top: 18px; font-size: 10px; color: var(--muted); }
#infoModal .guide-wave { height: 48px; margin: 8px 0 14px; }
#infoModal .tour-scene[data-step='1'] .guide-wave, #infoModal .tour-scene[data-step='4'] .guide-wave, #infoModal .tour-scene[data-step='5'] .guide-wave { display: none; }
#infoModal .tour-actions { flex-shrink: 0; display: flex; justify-content: space-between; gap: 12px; padding: 18px 0 0; margin: 12px 0 0; border-top: 1px solid var(--line); }
#infoModal .tour-actions button { min-height: 42px; min-width: 105px; border-radius: 6px; font-size: 13px; }
@media (max-width: 600px) {
  #infoModal { padding: 8px; }
  #infoModal .info-modal-card { width: calc(100vw - 16px); height: min(800px, calc(100dvh - 16px)); max-height: calc(100dvh - 16px); padding: 20px 16px 16px; }
  #infoModal h2 { font-size: 22px; }
  #infoModal .tour-intro { margin-bottom: 16px; font-size: 13px; }
  #infoModal .tour-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
  #infoModal .tour-progress button { min-height: 45px; padding: 6px 8px; }
  #infoModal .tour-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'preview'; grid-template-rows: max-content max-content; gap: 18px; min-height: 0; }
  #infoModal #tourTitle { font-size: 20px; }
  #infoModal .tour-scene { height: auto; min-height: 270px; padding: 16px; }
  #infoModal .tour-actions { padding-top: 14px; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { #infoModal .guide-wave i { animation: none !important; } }