/* The guide uses the same artwork, surfaces, and controls as the chat. */
:root { background: #09080a; color: #f3e7e8; }

body.user-guide-page {
  background-color: #09080a;
  background-image:
    linear-gradient(90deg, rgba(8, 7, 10, .89), rgba(8, 7, 10, .77) 52%, rgba(8, 7, 10, .88)),
    url("assets/elitnyi-pryton-splash.webp");
  background-position: center, right 48%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.user-guide-hero {
  border-color: #76515c;
  background-color: #171017;
  background-image:
    linear-gradient(0deg, rgba(8, 7, 10, .96), rgba(8, 7, 10, .68) 55%, rgba(8, 7, 10, .10)),
    url("assets/elitnyi-pryton-splash.webp");
  background-position: center, center 42%;
  background-size: cover;
  box-shadow: 0 14px 42px #0009;
}

.user-guide-eyebrow { color: #edbd89; }
.user-guide-hero h1 { color: #f8d5e2; text-shadow: 0 2px 12px #000; }
.user-guide-hero > p:not(.user-guide-eyebrow) { color: #ebd7dc; text-shadow: 0 1px 5px #000; }

.user-guide-nav {
  border-color: #76515c;
  background: rgba(20, 15, 20, .96);
}

.user-guide-button,
.user-guide-button--primary,
.user-guide-nav a,
.user-guide-footer__return {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid #393939;
  border-radius: 9px;
  background: #292929;
  color: #fff;
  font: 700 13px/1.4 system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
}

.user-guide-button:hover,
.user-guide-button:focus-visible,
.user-guide-nav a:hover,
.user-guide-nav a:focus-visible,
.user-guide-footer__return:hover,
.user-guide-footer__return:focus-visible {
  border-color: #393939;
  background: #292929;
  color: #fff;
  filter: brightness(1.12);
  text-decoration: none;
}

.user-guide-button:focus-visible,
.user-guide-nav a:focus-visible,
.user-guide-footer__return:focus-visible {
  outline: 2px solid #df00ff;
  outline-offset: 2px;
}

.user-guide-button:active,
.user-guide-nav a:active,
.user-guide-footer__return:active { transform: translateY(1px); }

.user-guide-section {
  border-color: #65434f;
  background: rgba(20, 15, 20, .94);
  box-shadow: 0 10px 28px #0006;
  backdrop-filter: blur(5px);
}

.user-guide-number,
.user-guide-section h3 { color: #edbd89; }
.user-guide-section h2 { color: #f0c08c; }
.user-guide-section p,
.user-guide-callout { color: #d4bbc5; }
.user-guide-section b { color: #f5e7e9; }
.user-guide-callout { border-left-color: #a34d70; background: #2b1d25; }
.user-guide-callout--important { border-left-color: #d99b58; background: #30241b; }
.user-guide-grid article { border-color: #65434f; background: #241a21; }
.user-guide-footer { color: #bba6ae; }

@media (max-width: 720px) {
  body.user-guide-page {
    background-image:
      linear-gradient(rgba(8, 7, 10, .88), rgba(8, 7, 10, .92)),
      url("assets/elitnyi-pryton-splash.webp");
    background-position: center, 62% center;
  }
}