.guide-page {
  --guide-ink: var(--color-zinc-900);
  --guide-secondary: var(--color-zinc-600);
  --guide-rule: var(--color-zinc-200);
  --guide-surface: #fff;
  --guide-accent: #b91c1c;
  --guide-selected: color-mix(in srgb, var(--color-red-500) 10%, transparent);
  --guide-focus: var(--color-red-600);
  max-width: 56rem;
  margin-inline: auto;
  padding: 3rem 2rem 4rem;
  color: var(--guide-ink);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.dark .guide-page { --guide-ink: var(--color-zinc-100); --guide-secondary: var(--color-zinc-400); --guide-rule: var(--color-zinc-800); --guide-surface: #18181b; --guide-accent: var(--color-orange-400); --guide-selected: color-mix(in srgb, var(--color-red-500) 10%, transparent); --guide-focus: var(--color-red-400); }
.guide-page a { color: var(--guide-accent); text-underline-offset: .22em; text-decoration: underline; }
.guide-page a:hover { text-decoration-thickness: 2px; }
.guide-page :focus-visible { outline: 3px solid var(--guide-focus); outline-offset: 4px; }
.guide-page ::selection { background: var(--guide-selected); color: var(--guide-ink); }
.guide-intro { margin: 1.5rem 0; }
.guide-intro h1 { font-family: var(--font-display); font-size: 2.25rem; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
.guide-intro p { margin-top: .75rem; color: var(--guide-secondary); max-width: 65ch; }
.guide-page .guide-back { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--guide-secondary); text-decoration: none; }
.guide-back:hover { color: var(--guide-ink); }
.guide-platform { margin-block: 1.5rem; }
.guide-platform > p { color: var(--guide-secondary); font-size: .875rem; margin-bottom: .5rem; }
.guide-os { display: flex; gap: .5rem; flex-wrap: wrap; }
.guide-os a { min-height: 44px; padding: .5rem 1.25rem; border: 1px solid var(--guide-rule); border-radius: 999px; text-decoration: none; color: var(--guide-secondary); font-size: .875rem; }
.guide-os a:hover { border-color: var(--guide-focus); color: var(--guide-ink); }
.guide-os a[aria-current] { background: var(--guide-selected); border-color: var(--guide-focus); color: var(--guide-accent); font-weight: 600; }
.guide-step { margin: 2rem 0; }
.guide-step h2 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.4; font-weight: 600; display: flex; gap: .75rem; align-items: baseline; margin-bottom: .75rem; }
.guide-step-number { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; font-family: inherit; font-size: 1rem; color: var(--guide-accent); background: var(--guide-selected); border-radius: 50%; font-variant-numeric: tabular-nums; flex: 0 0 2rem; }
.guide-step-body { margin-left: 2.75rem; max-width: 70ch; }
.guide-step-body p + p, .guide-step-body ul, .guide-step-body ol { margin-top: .75rem; }
.guide-page ul, .guide-page ol { padding-left: 1.3rem; }
.guide-page ul { list-style: disc; }
.guide-page ol { list-style: decimal; }
.guide-page li + li { margin-top: .5rem; }
.guide-page code { font-family: var(--font-mono); font-size: .875em; }
.guide-open { margin: .75rem 0; }
.guide-open strong { font-weight: 700; }
.guide-open p { margin-top: .5rem; }
.guide-note { color: var(--guide-secondary); margin-block: 1rem; }
.guide-result { margin-top: .75rem; color: var(--guide-secondary); }
.guide-result strong { color: var(--guide-ink); font-weight: 600; }
.guide-command { margin-block: 1rem; background: var(--guide-surface); border: 1px solid var(--guide-rule); border-radius: 12px; overflow: hidden; }
.guide-command-bar { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .375rem .75rem .375rem 1rem; border-bottom: 1px solid var(--guide-rule); color: var(--guide-secondary); font-size: .875rem; }
.guide-command button { min-height: 44px; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; color: var(--guide-ink); border-radius: 8px; cursor: pointer; }
.guide-command button[hidden] { display: none; }
.guide-command button:hover { background: var(--guide-selected); }
.guide-command button:disabled { opacity: .6; cursor: wait; }
.guide-command pre { margin: 0; padding: 1rem; white-space: pre-wrap; word-break: break-word; line-height: 1.65; }
.guide-command pre:focus-visible { outline-offset: -4px; }
.guide-copy-status { font-size: .875rem; padding: 0 1rem; color: var(--guide-accent); }
.guide-copy-status:not(:empty) { padding-bottom: .75rem; }
.guide-help { border-top: 1px solid var(--guide-rule); padding: 1rem 0; }
.guide-help summary { min-height: 44px; padding-block: .5rem; cursor: pointer; font-weight: 500; }
.guide-help h3 { font-weight: 700; margin-top: 1.5rem; }
.guide-help p { margin-top: .5rem; }
.guide-end { border-top: 1px solid var(--guide-rule); margin-top: 2.5rem; padding-top: 1.5rem; color: var(--guide-secondary); font-size: .875rem; }
.guide-related { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1rem; }
.guide-related a { min-height: 44px; padding-block: .5rem; }
.guide-page.guide-index { max-width: 80rem; }
.guide-index .guide-intro { margin: 0 0 2rem; }
.guide-index .guide-intro h1 { font-size: 1.875rem; }
.guide-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.guide-page .guide-directory-entry { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1.5rem; border: 1px solid var(--guide-rule); border-radius: 12px; background: var(--guide-surface); color: var(--guide-ink); text-decoration: none; }
.guide-directory-entry:hover { border-color: color-mix(in srgb, var(--color-red-500) 50%, transparent); }
.guide-directory-entry h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.guide-directory-entry:hover h2 { color: var(--guide-accent); }
.guide-directory-entry p { font-size: .875rem; color: var(--guide-secondary); }
.guide-entry-action { display: flex; align-items: center; justify-content: space-between; align-self: stretch; gap: 1rem; margin-top: auto; padding-top: .75rem; font-size: .875rem; font-weight: 500; }
.guide-entry-action svg { flex: 0 0 20px; }
@media (max-width: 800px) {
  .guide-directory { grid-template-columns: 1fr; }
  .guide-page { padding-inline: 1.5rem; }
}
@media (max-width: 600px) {
  .guide-page { padding: 1.5rem 1rem 3rem; }
  .guide-intro h1 { font-size: 1.875rem; }
  .guide-step-body { margin-left: 0; }
  .guide-command-bar { flex-wrap: wrap; }
}