.guide { max-width: 820px; }
.guide h1 { margin-bottom: 28px; }
.guide-back { display: inline-block; margin-bottom: 20px; padding: 8px 0; }
.guide-choices { display: grid; gap: 16px; }
.guide-choice { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--text); padding: 26px; }
.guide-choice + .guide-choice { margin-top: 0; }
.guide-choice p { margin: 8px 0 0; color: var(--text-dim); }
.guide-choice:hover { border-color: var(--accent); text-decoration: none; }
.guide a:focus-visible, .guide summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.guide-steps h2 { display: flex; align-items: baseline; gap: 12px; }
.guide-step { color: var(--accent); font-family: var(--display); font-size: 1.5rem; }
.guide p { line-height: 1.8; }
.guide-topics { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 24px; }
.guide-topics a { padding: 6px 0; }
.guide details { scroll-margin-top: 150px; }
.guide summary { cursor: pointer; font-weight: 800; }
.guide details[open] summary { margin-bottom: 20px; }
.guide h3 { margin-top: 24px; }
@media (max-width: 560px) {
  .guide-choice { padding: 20px; }
  .guide h1 { font-size: 1.5rem; }
}