:root {
  --rr-aqua: #65bec2;
  --rr-aqua-dark: #3f9ca2;
  --rr-aqua-bright: #9fe4e7;
  --rr-ink: #111827;
  --rr-ink-muted: #4b5563;
  --rr-heading: #071b1d;
  --rr-surface: #f7fafb;
  --rr-surface-elevated: #ffffff;
  --rr-border: #d7e1e5;
  --rr-positive: #e9f8f1;
  --rr-negative: #fff1f1;
  --rr-link: #236c71;
  --rr-page-bg: #ffffff;
  --rr-hero-bg: #000000;
  --rr-blockquote-bg: #f8fafc;
  --rr-blockquote-border: #9ca3af;
  --rr-response-bg: #f0fbfc;
  --rr-response-border: #b8dde0;
  --rr-cta-bg: #e8edef;
  --rr-copy-btn-bg: #ffffff;
  --rr-card-shadow: 0 0.35rem 1.2rem rgb(17 24 39 / 6%);
  --rr-navbar-bg: #ffffff;
  --rr-navbar-border: transparent;
  --rr-back-btn-bg: #f5f5f5;
  --rr-back-btn-text: #363636;
  --rr-back-btn-border: #dbdbdb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --rr-ink: #e4ecef;
    --rr-ink-muted: #a8b4ba;
    --rr-heading: #f4f8f9;
    --rr-surface: #1a2428;
    --rr-surface-elevated: #232f34;
    --rr-border: #3a4a52;
    --rr-positive: #173328;
    --rr-negative: #3a2222;
    --rr-link: #7dd3d8;
    --rr-page-bg: #12191c;
    --rr-hero-bg: #000000;
    --rr-blockquote-bg: #1c262b;
    --rr-blockquote-border: #5f6d74;
    --rr-response-bg: #1a2a2c;
    --rr-response-border: #3f6b70;
    --rr-cta-bg: #243035;
    --rr-copy-btn-bg: #232f34;
    --rr-card-shadow: 0 0.35rem 1.2rem rgb(0 0 0 / 28%);
    --rr-navbar-bg: #12191c;
    --rr-navbar-border: #2a363c;
    --rr-back-btn-bg: #2a363c;
    --rr-back-btn-text: #f4f8f9;
    --rr-back-btn-border: #3a4a52;
  }
}

html {
  scroll-behavior: smooth;
  color-scheme: light dark;
}

body {
  color: var(--rr-ink);
  background: var(--rr-page-bg);
}

.rr-article.column.content,
.rr-article,
.rr-article p,
.rr-article li,
.rr-article blockquote,
.rr-article table,
.rr-article td,
.rr-article th,
.rr-toc,
.rr-toc p,
.rr-toc li,
.table-of-contents,
.table-of-contents p,
.table-of-contents li,
.rr-example-card,
.rr-card-content,
.rr-response,
.rr-disclosure,
.rr-related,
.rr-directory,
.rr-group-grid,
.rr-post-card,
.rr-post-card-content {
  color: var(--rr-ink) !important;
}

.rr-article h1,
.rr-article h2,
.rr-article h3,
.rr-article h4,
.rr-article h5,
.rr-article h6,
.rr-toc strong,
.table-of-contents strong,
.rr-example-card h3,
.rr-related h2,
.rr-directory h2,
.rr-group-grid h2,
.rr-post-card h2,
.rr-post-card h3 {
  color: var(--rr-heading) !important;
}

.rr-article a,
.rr-toc a,
.table-of-contents a,
.rr-related a,
.rr-directory a,
.rr-post-card a {
  color: var(--rr-link) !important;
}

.rr-post-card h2 a {
  color: var(--rr-heading) !important;
}

.rr-post-card h2 a:hover {
  color: var(--rr-link) !important;
}

.rr-article a:hover,
.rr-toc a:hover,
.table-of-contents a:hover,
.rr-related a:hover,
.rr-directory a:hover,
.rr-post-card a:hover {
  color: var(--rr-aqua-dark) !important;
}

@media (prefers-color-scheme: dark) {
  .navbar {
    background: var(--rr-navbar-bg) !important;
    border-bottom: 1px solid var(--rr-navbar-border);
  }

  .navbar-item,
  .navbar-link {
    color: var(--rr-ink) !important;
  }

  .navbar-burger span {
    background-color: var(--rr-ink);
  }

  .rr-main,
  .rr-main .blog-body {
    background: var(--rr-page-bg);
  }
}

.rr-navbar {
  max-width: 1120px;
  margin: 0 auto;
}

.rr-navbar .navbar-brand {
  flex: 0 0 15%;
}

.rr-navbar .navbar-item img {
  max-height: 3rem;
}

.rr-hero {
  margin: 2rem 0;
  padding: 2.5rem 1.5rem;
  background: var(--rr-hero-bg);
  color: #fff;
}

.rr-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.08;
}

.rr-hero a,
.rr-breadcrumbs a {
  color: var(--rr-aqua-bright);
}

.rr-hero,
.rr-hero p,
.rr-hero time,
.rr-hero span,
.rr-hero .subtitle {
  color: #fff !important;
}

.rr-hero a {
  color: var(--rr-aqua-bright) !important;
}

.rr-breadcrumbs {
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.rr-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rr-author img {
  border-radius: 50%;
}

.rr-hero-image img {
  display: block;
  width: min(100%, 440px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0 auto;
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 24%);
}

.rr-main {
  padding-top: 0;
}

.rr-main .blog-body {
  max-width: 1120px;
}

.rr-toc,
.table-of-contents {
  position: sticky;
  top: 1rem;
  padding: 1rem;
  border: 1px solid var(--rr-border);
  border-radius: 0.75rem;
  background: var(--rr-surface-elevated);
}

.rr-toc ul,
.table-of-contents ul {
  margin: 0.75rem 0 0;
  padding-left: 1.15rem;
  list-style: none;
}

.rr-toc li,
.table-of-contents li {
  margin-bottom: 0.55rem;
  padding-left: 0.15rem;
}

.rr-cta {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 0.65rem;
  background: var(--rr-cta-bg);
  text-align: center;
}

.rr-cta .button.is-primary,
.rr-toc .button.is-primary,
.table-of-contents .button.is-primary {
  background-color: var(--rr-aqua) !important;
  border-color: var(--rr-aqua-dark) !important;
  color: var(--rr-heading) !important;
}

.rr-cta .button.is-primary:hover,
.rr-toc .button.is-primary:hover,
.table-of-contents .button.is-primary:hover {
  background-color: var(--rr-aqua-dark) !important;
  border-color: var(--rr-aqua-dark) !important;
  color: #fff !important;
}

@media (prefers-color-scheme: dark) {
  .rr-cta .button.is-primary,
  .rr-toc .button.is-primary,
  .table-of-contents .button.is-primary {
    background-color: var(--rr-aqua) !important;
    border-color: var(--rr-aqua) !important;
    color: #071b1d !important;
  }

  .rr-cta .button.is-primary:hover,
  .rr-toc .button.is-primary:hover,
  .table-of-contents .button.is-primary:hover {
    background-color: var(--rr-aqua-bright) !important;
    border-color: var(--rr-aqua-bright) !important;
    color: #071b1d !important;
  }
}

.rr-article {
  min-width: 0;
}

.rr-article h2,
.rr-article h3 {
  scroll-margin-top: 1rem;
}

.rr-section-image {
  display: block;
  margin: 1rem auto 1.5rem;
  max-width: min(100%, 760px);
  overflow: hidden;
  border-radius: 0.8rem;
}

.rr-section-image img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  object-position: center center;
  border-radius: 0.8rem;
}

.rr-disclosure {
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--rr-aqua);
  background: var(--rr-surface);
}

.rr-example-card {
  overflow: hidden;
  margin: 1.5rem 0;
  border: 1px solid var(--rr-border);
  border-radius: 0.85rem;
  background: var(--rr-surface-elevated);
  box-shadow: var(--rr-card-shadow);
}

.rr-example-card > header {
  padding: 1rem 1.25rem;
  background: var(--rr-surface);
}

.rr-example-card.rr-positive > header {
  background: var(--rr-positive);
}

.rr-example-card.rr-negative > header {
  background: var(--rr-negative);
}

.rr-example-card h3 {
  margin: 0;
  font-size: 1.2rem;
}

.rr-card-content {
  padding: 1.25rem;
}

.rr-card-content blockquote {
  margin: 0 0 1rem;
  padding: 1rem;
  border-left: 3px solid var(--rr-blockquote-border);
  background: var(--rr-blockquote-bg);
}

.rr-response {
  padding: 1rem;
  border: 1px solid var(--rr-response-border);
  border-radius: 0.65rem;
  background: var(--rr-response-bg);
}

.rr-response-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.rr-label {
  font-weight: 700;
}

.rr-copy-button {
  appearance: none;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--rr-aqua-dark);
  border-radius: 0.45rem;
  background: var(--rr-copy-btn-bg);
  color: var(--rr-link);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
}

.rr-copy-button:hover,
.rr-copy-button:focus-visible {
  background: var(--rr-aqua);
  color: var(--rr-heading);
}

.rr-signature {
  margin-bottom: 0 !important;
  font-weight: 700;
}

.rr-faq {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rr-border);
  border-radius: 0.65rem;
  background: var(--rr-surface-elevated);
}

.rr-related,
.rr-directory,
.rr-group-grid {
  margin: 2.5rem 0 1rem;
  padding: 1.5rem;
  border: 1px solid var(--rr-border);
  border-radius: 0.9rem;
  background: var(--rr-surface);
}

.rr-related-list,
.rr-directory-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 1.5rem;
  margin: 1rem 0 0 !important;
  padding: 0 0 0 1.15rem;
  list-style: none;
}

.rr-related-list li,
.rr-directory-list li {
  margin: 0;
}

/* Bulma .content restores list bullets/margins — keep blog lists flush and padded */
.rr-article.content .rr-related-list,
.rr-article.content .rr-directory-list,
.rr-article.content .rr-toc ul,
.rr-article.content .table-of-contents ul {
  list-style: none !important;
  margin-left: 0 !important;
  padding-left: 1.15rem;
}

.rr-related-list a,
.rr-directory-list a {
  display: block;
  padding: 0.35rem 0;
  line-height: 1.35;
}

.rr-back-link {
  display: inline-block;
  margin-top: 1.25rem;
  background-color: var(--rr-back-btn-bg) !important;
  border: 1px solid var(--rr-back-btn-border) !important;
  color: var(--rr-back-btn-text) !important;
}

.rr-back-link:hover {
  background-color: var(--rr-surface) !important;
  border-color: var(--rr-aqua-dark) !important;
  color: var(--rr-heading) !important;
}

@media (prefers-color-scheme: dark) {
  .rr-post-card:hover {
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 35%);
  }
}

.rr-index-hero {
  padding: 3.5rem 1.5rem;
  background: #071b1d;
  color: #fff;
}

.rr-index-hero .title,
.rr-index-hero .subtitle {
  color: #fff;
}

.rr-card-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.rr-post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--rr-border);
  border-radius: 0.85rem;
  background: var(--rr-surface-elevated);
  box-shadow: var(--rr-card-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.rr-post-card:hover {
  border-color: var(--rr-aqua-dark);
  box-shadow: 0 0.5rem 1.5rem rgb(17 24 39 / 10%);
  transform: translateY(-2px);
}

.rr-post-card-media {
  display: block;
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0b1012;
  border-bottom: 1px solid var(--rr-border);
}

.rr-post-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.rr-post-card-media--legacy .rr-post-card-image {
  width: 112%;
  height: 112%;
  margin: -6% 0 0 -6%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.rr-post-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
  padding: 1.15rem 1.35rem 1.35rem;
}

.rr-post-card-meta {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.rr-post-card-meta time {
  color: var(--rr-ink-muted) !important;
}

.rr-post-card h2,
.rr-post-card h3 {
  margin: 0 0 0.7rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}

.rr-post-card-excerpt,
.rr-post-card-content > p:not(.rr-post-card-meta) {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--rr-ink-muted) !important;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.rr-pagination {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem 0;
}

.rr-pagination a,
.rr-pagination span {
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--rr-border);
  border-radius: 0.4rem;
}

.rr-pagination [aria-current="page"] {
  border-color: var(--rr-aqua-dark);
  background: var(--rr-aqua);
  color: var(--rr-heading);
  font-weight: 700;
}

@media (max-width: 1023px) {
  .rr-navbar .navbar-menu {
    padding: 0.75rem;
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 12%);
  }

  .rr-navbar .navbar-menu.is-active {
    display: block;
  }

  .rr-toc,
  .table-of-contents {
    position: static !important;
    margin-bottom: 1.5rem;
  }

  .rr-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .rr-hero {
    margin-top: 0;
    padding: 2rem 1rem;
  }

  .rr-hero-image {
    display: block;
    margin-top: 1.5rem;
  }

  .rr-hero-image img {
    width: 100%;
    max-height: 260px;
  }

  .rr-section-image img {
    max-height: 165px;
  }

  .rr-related-list,
  .rr-directory-list,
  .rr-card-grid {
    grid-template-columns: 1fr;
  }

  .rr-response-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}