/* One scroll region; close and step controls stay reachable at every size. */
  .guide-overlay { position:fixed; inset:0; z-index:20000; padding:24px; background:rgba(27,24,19,.6); display:flex; align-items:center; justify-content:center; visibility:hidden; opacity:0; transition:opacity .2s,visibility .2s; }
  .guide-overlay.active { visibility:visible; opacity:1; }
  .guide-modal { width:100%; max-width:960px; max-height:calc(100dvh - 48px); display:flex; flex-direction:column; background:var(--paper); box-shadow:0 20px 80px #0003; overflow:hidden; }
  .guide-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; border-bottom:1px solid var(--line); flex-shrink:0; }
  .guide-header label { font-size:12px; color:var(--stone); display:block; margin-bottom:4px; }
  #guideJump { max-width:100%; padding:6px 28px 6px 0; border:0; background:transparent; color:var(--ink); font:16px var(--sans); cursor:pointer; }
  .guide-close { order:2; flex-shrink:0; width:44px; height:44px; background:transparent; border:1px solid var(--line); color:var(--ink); font-size:26px; cursor:pointer; }
  .guide-body { display:grid; grid-template-columns:1fr 1fr; overflow-y:auto; overscroll-behavior:contain; min-height:0; }
  .guide-visual { flex-direction:column; display:flex; align-items:center; justify-content:center; background:#FAFAF8; padding:16px; }
  .guide-visual img { display:block; width:100%; height:auto; max-height:470px; object-fit:contain; }
  .guide-caption { font-size:12px; color:var(--stone); line-height:1.6; text-align:center; padding:12px 4px 0; }
  .guide-content { padding:32px; align-self:center; }
  .guide-kind { display:block; font-size:12px; color:var(--bronze); margin-bottom:10px; }
  .guide-title { font-family:var(--serif); font-size:36px; font-weight:400; line-height:1.12; margin-bottom:18px; }
  .guide-text { font-size:16px; line-height:1.7; color:var(--ink-soft); }
  .guide-tip { margin-top:20px; border-top:1px solid var(--line); padding-top:16px; font-size:14px; line-height:1.65; color:var(--stone); }
  .guide-tip::before { content:'Keep in mind'; display:block; color:var(--ink); font-weight:600; margin-bottom:4px; }
  .guide-prep { font-size:12px; line-height:1.6; color:var(--stone); margin-top:18px; }
  .guide-progress { height:2px; background:var(--line); flex-shrink:0; }
  .guide-progress-bar { height:100%; background:var(--bronze); transition:width .2s; }
  .guide-nav { display:flex; align-items:center; gap:16px; padding:16px 24px; flex-shrink:0; }
  .guide-step { font-size:12px; color:var(--stone); text-align:center; flex:1; white-space:nowrap; }
  .guide-back,.guide-next { min-height:44px; padding:10px 20px; border:1px solid var(--line); background:transparent; color:var(--ink); font:14px var(--sans); cursor:pointer; }
  .guide-back:disabled { opacity:.35; cursor:default; }
  .guide-next { background:var(--ink); border-color:var(--ink); color:var(--paper); }
  .guide-next:hover { background:var(--bronze); }
  .guide-launch { min-height:44px; background:var(--ink); color:var(--paper); border:0; padding:14px 20px; margin-bottom:22px; font:13px var(--sans); cursor:pointer; }
  @media(max-width:720px) {
    .guide-overlay { padding:0; }
    .guide-modal { height:100dvh; max-height:100dvh; }
    .guide-header { padding:12px 20px; }
    .guide-body { display:block; flex:1; }
    .guide-visual { padding:8px; }
    .guide-visual img { height:250px; width:100%; }
    .guide-content { padding:24px 22px; }
    .guide-title { font-size:30px; margin-bottom:12px; }
    .guide-nav { padding:12px 20px calc(12px + env(safe-area-inset-bottom)); gap:8px; }
    .guide-back,.guide-next { padding:10px 14px; }
  }
  @media(max-width:380px) {
    .guide-header { padding:10px 16px; }
    .guide-visual img { height:220px; }
  }