#installGuide {
  width: min(92vw, 420px);
  position: fixed;
  inset: 0;
  margin: auto;
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--gold2, #ffcf5b);
  border-radius: 20px;
  padding: 12px;
  color: var(--text, #fff);
  background: var(--bg, #0d1117);
}
#installGuide::backdrop { background: #0009; }
#installGuide .guide-header { display: flex; justify-content: flex-end; }
#guideClose { min-height: 44px; }
.guide-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-controls button[aria-pressed="true"] { border-color: var(--gold2, #ffcf5b); }
#guidePhone {
  max-width: 240px;
  margin: 8px auto;
  padding: 12px;
  border: 3px solid currentColor;
  border-radius: 24px;
}
#guidePhone > div { display: grid; justify-items: center; gap: 8px; text-align: center; }
#guidePhone img { width: 42px; height: 42px; border-radius: 12px; }
.guide-target {
  border: 2px solid var(--gold2, #ffcf5b);
  border-radius: 22px;
  padding: 8px;
  animation: guide-highlight .45s ease-out;
}
@keyframes guide-highlight { from { transform: scale(.92); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .guide-target { animation: none; } }

#guideProgress { color: var(--gold2, #ffcf5b); margin: 14px 0 0; }

#installGuide[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
}
#installGuide .guide-content { overflow-y: auto; overscroll-behavior: contain; }
#guideTitle { margin: 0 0 8px; font-size: 20px; }
#guideStep { margin: 8px 0; }
#installGuide .guide-navigation { flex-wrap: nowrap; justify-content: space-between; }