.guide-prose {
  color: var(--ui-muted);
  line-height: 1.8;
}

.guide-screenshot {
  margin: 1.5rem 0 1.75rem;
}

.guide-image-trigger {
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
  background: var(--ui-bg-soft);
  padding: 0;
  cursor: zoom-in;
  text-align: left;
}

.guide-image-trigger:hover,
.guide-image-trigger:focus-visible {
  border-color: var(--ui-accent-hover);
}

.guide-image-trigger:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
}

.guide-image-trigger img {
  display: block;
  width: 100%;
  height: auto;
}

.guide-screenshot figcaption {
  margin-top: 0.55rem;
  color: var(--ui-subtle);
  font-size: 0.82rem;
  line-height: 1.55;
}

.guide-lightbox {
  position: relative;
  width: min(92vw, 1200px);
  max-width: none;
  max-height: 92vh;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
  background: var(--ui-surface-strong);
  color: var(--ui-text);
  padding: 1rem;
}

.guide-lightbox::backdrop {
  background: rgb(0 0 0 / 72%);
  backdrop-filter: blur(8px);
}

.guide-lightbox img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(92vh - 5.5rem);
  margin: 0 auto;
  object-fit: contain;
}

.guide-lightbox p {
  margin: 0.75rem 2.5rem 0 0;
  color: var(--ui-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.guide-lightbox-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 1;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid var(--ui-border-strong);
  border-radius: 999px;
  background: var(--ui-surface);
  color: var(--ui-text);
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.guide-lightbox-close:hover,
.guide-lightbox-close:focus-visible {
  border-color: var(--ui-accent-hover);
  color: var(--ui-accent-hover);
}

.guide-theme-swatch {
  display: inline-block;
  width: 3.2rem;
  height: 1.35rem;
  margin-right: 0.4rem;
  border: 4px solid;
  border-radius: 0.35rem;
  vertical-align: middle;
  box-sizing: border-box;
}

.guide-theme-swatch--cyber-neon-dark { background: #63D9EE; border-color: #0D0E15; }
.guide-theme-swatch--cyberpunk { background: #00F0FF; border-color: #03070A; }
.guide-theme-swatch--aurora-light { background: #0B8FA3; border-color: #F5FAFC; }
.guide-theme-swatch--arcane-violet { background: #8DEBFF; border-color: #110B1E; }
.guide-theme-swatch--tactical-amber { background: #8FB98B; border-color: #090D0A; }
.guide-theme-swatch--midnight-ocean { background: #4DD8E8; border-color: #061018; }
.guide-theme-swatch--crimson-noir { background: #6EE7D8; border-color: #12080B; }
.guide-theme-swatch--solar-porcelain { background: #2F8C8A; border-color: #FFFDF7; }
.guide-theme-swatch--sakura-mist { background: #3C9BA4; border-color: #FFF8FB; }
.guide-theme-swatch--classic-win11-light { background: #0078D4; border-color: #F3F3F3; }
.guide-theme-swatch--classic-win11-dark { background: #60CDFF; border-color: #202020; }
.guide-theme-swatch--paper-ink-light { background: #8F5A1E; border-color: #F8F3E7; }
.guide-theme-swatch--matrix-terminal-dark { background: #00FF66; border-color: #020805; }
.guide-theme-swatch--toybox-pop-light { background: #FF4FB3; border-color: #FFF4F8; }
.guide-theme-swatch--mono-high-contrast-dark { background: #FFFF00; border-color: #000000; }

.guide-effect-swatch--classic-arrow { background: #FACC15; border-color: #7DD3FC; }
.guide-effect-swatch--purple-lightning { background: #A855F7; border-color: #63D9EE; }
.guide-effect-swatch--cyan-pulse { background: #22D3EE; border-color: #7DD3FC; }
.guide-effect-swatch--magenta-slash { background: #EC4899; border-color: #F472B6; }
.guide-effect-swatch--emerald-comet { background: #34D399; border-color: #10B981; }
.guide-effect-swatch--amber-burst { background: #FBBF24; border-color: #FB923C; }

/* User guides need more horizontal room for screenshots, tables, and code. */
.layout-main:has(.guide-page) {
  width: min(100%, 1600px);
}

html {
  scroll-behavior: smooth;
}

.guide-sidebar-eyebrow {
  color: var(--ui-accent-hover);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.guide-prose h2,
.guide-prose h3 {
  scroll-margin-top: 5rem;
}

.guide-prose h2:target,
.guide-prose h3:target {
  color: var(--ui-accent-hover);
}

.guide-toc {
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  background: var(--ui-bg-soft);
  padding: 1rem 1.25rem;
}

.guide-toc h2 {
  color: var(--ui-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.guide-toc ol {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.7rem;
  list-style: none;
  padding: 0;
}

.guide-toc a {
  color: var(--ui-subtle);
  font-size: 0.9rem;
  text-decoration: none;
}

.guide-toc a:hover,
.guide-toc a:focus-visible {
  color: var(--ui-accent);
}

.guide-toc-subitem {
  padding-left: 1rem;
}

@media (max-width: 640px) {
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .guide-sidebar-link {
    transition: none;
  }
}



.guide-prose h1,


.guide-prose h2,


.guide-prose h3 {
  color: var(--ui-text);
  line-height: 1.25;
}



.guide-prose h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
}



.guide-prose h2 {
  margin: 2.5rem 0 0.85rem;
  border-bottom: 1px solid var(--ui-border);
  padding-bottom: 0.55rem;
  font-size: 1.35rem;
}



.guide-prose h3 {
  margin: 1.75rem 0 0.55rem;
  font-size: 1.05rem;
}



.guide-prose p,


.guide-prose ul,


.guide-prose ol,


.guide-prose blockquote {
  margin: 0.85rem 0;
}



.guide-prose ul,


.guide-prose ol {
  padding-left: 1.5rem;
}



.guide-prose ul {
  list-style: disc;
}



.guide-prose ol {
  list-style: decimal;
}



.guide-prose li + li {
  margin-top: 0.35rem;
}



.guide-prose strong {
  color: var(--ui-muted);
}



.guide-prose :not(pre) > code {
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-bg-soft);
  padding: 2px 6px;
  color: var(--ui-accent-hover);
  font-family: var(--ui-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  font-synthesis: none;
  vertical-align: baseline;
}

.guide-prose pre {
  overflow-x: auto;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-bg-soft);
  padding: 1rem;
  color: var(--ui-muted);
  font-family: var(--ui-mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
}

.guide-prose pre > code {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
}



.guide-prose blockquote {
  border-left: 3px solid var(--ui-accent-hover);
  padding-left: 1rem;
  color: var(--ui-muted);
}



.guide-prose table {
  display: block;
  width: 100%;
  margin: 1rem 0;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9rem;
}



.guide-prose th,


.guide-prose td {
  min-width: 10rem;
  border: 1px solid var(--ui-border);
  padding: 0.65rem 0.75rem;
  text-align: left;
  vertical-align: top;
}



.guide-prose th {
  background: var(--ui-surface);
  color: var(--ui-muted);
  font-weight: 600;
}



.guide-prose td {
  background: var(--ui-bg-soft);
}

.code-block {
  scrollbar-color: var(--ui-border-strong) var(--ui-bg);
}

.date-input {
  color-scheme: dark;
}

/* Guide content rhythm overrides generated markdown defaults above. */
.guide-prose h1,
.guide-prose h2,
.guide-prose h3,
.guide-prose p,
.guide-prose ul,
.guide-prose ol,
.guide-prose blockquote,
.guide-prose table {
  border-top: 0;
}

.guide-prose h1 {
  margin-top: 0.35rem;
}

.guide-prose h2 {
  margin-top: 2.9rem;
  margin-bottom: 1rem;
}

.guide-prose h3 {
  margin-top: 2.1rem;
  margin-bottom: 0.75rem;
}

.guide-prose p {
  margin-top: 1.15rem;
  margin-bottom: 1.15rem;
  padding-top: 0.15rem;
}

.guide-prose h2 + p,
.guide-prose h3 + p,
.guide-prose h2 + ol,
.guide-prose h2 + ul,
.guide-prose h3 + ol,
.guide-prose h3 + ul,
.guide-prose h2 + table,
.guide-prose h3 + table,
.guide-prose h2 + pre,
.guide-prose h3 + pre {
  margin-top: 1.25rem;
}

.guide-layout {
  display: grid;
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.guide-sidebar {
  position: sticky;
  top: 5.5rem;
  min-width: 0;
}

.guide-sidebar-inner {
  border-left: 1px solid var(--ui-border-strong);
  padding: 0.25rem 0 0.25rem 1rem;
}

.guide-sidebar-heading {
  margin-bottom: 0.85rem;
}

.guide-sidebar-heading h2 {
  margin: 0.35rem 0 0;
  color: var(--ui-text);
  font-size: 0.95rem;
  font-weight: 650;
}

.guide-sidebar-list,
.guide-sidebar-sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-sidebar-group + .guide-sidebar-group {
  margin-top: 0.85rem;
}

.guide-sidebar-link {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: 0.35rem;
  color: var(--ui-subtle);
  padding: 0.35rem 0.55rem;
  font-size: 0.82rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.guide-sidebar-link:hover,
.guide-sidebar-link:focus-visible,
.guide-sidebar-link.is-active {
  background: var(--ui-accent-soft);
  color: var(--ui-text);
}

.guide-sidebar-link:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

.guide-sidebar-link-primary {
  color: var(--ui-muted);
  font-weight: 600;
}

.guide-sidebar-link-primary.is-active {
  color: var(--ui-accent-hover);
}

.guide-sidebar-marker {
  width: 0.4rem;
  height: 0.4rem;
  flex: 0 0 auto;
  margin-top: 0.43rem;
  border: 1px solid var(--ui-accent-hover);
  border-radius: 999px;
}

.guide-sidebar-link-primary.is-active .guide-sidebar-marker {
  background: var(--ui-accent-hover);
  outline: 3px solid var(--ui-accent-soft);
}

.guide-sidebar-sublist {
  margin: 0.25rem 0 0 0.9rem;
  border-left: 1px solid var(--ui-border-strong);
  padding-left: 0.45rem;
}

.guide-sidebar-sublist li + li {
  margin-top: 0.08rem;
}

.guide-mobile-nav {
  display: none;
}

.guide-content {
  min-width: 0;
}

@media (max-width: 840px) {
  .guide-layout {
    display: block;
    margin-top: 1.5rem;
  }

  .guide-sidebar {
    display: none;
  }

  .guide-mobile-nav {
    display: grid;
    gap: 0.45rem;
  }

  .guide-mobile-nav label {
    color: var(--ui-subtle);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .guide-mobile-nav select {
    width: 100%;
    border: 1px solid var(--ui-border-strong);
    border-radius: 0.55rem;
    background: var(--ui-surface);
    color: var(--ui-muted);
    padding: 0.7rem 0.8rem;
  }
}

.guide-prose ul,
.guide-prose ol,
.guide-prose blockquote,
.guide-prose table,
.guide-prose pre {
  margin-top: 1.15rem;
  margin-bottom: 1.35rem;
}