.blog-references {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-top: 1rem;
}

.blog-references li {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--secondary);
  margin-bottom: .5rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

.blog-references a {
  color: var(--amber);
  text-decoration: underline;
  text-decoration-color: rgba(255, 190, 39, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s;
}
.blog-references a:hover { text-decoration-color: var(--amber); }

/* Citation superscripts: amber to match the brand accent. */
.blog-body sup a {
  color: var(--amber);
  text-decoration: none;
}
.blog-body sup a:hover {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#pseudo-title { margin-top: 3rem; }
.pseudo-widget { margin: 2rem 0; padding: clamp(1rem, 3vw, 1.5rem); background: #111; border: 1px solid #ffffff1a; border-radius: 16px; font-family: var(--font-sans); }
.pseudo-widget figcaption { font-size: .9rem; line-height: 1.6; color: var(--secondary); }
.pseudo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.pseudo-panel h3 { font-size: 1rem; margin: .5rem 0; }
.pseudo-panel svg { width: 100%; display: block; max-height: 410px; }
.pseudo-panel label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem; font-size: .85rem; margin-top: 1rem; }
.pseudo-panel output { font-variant-numeric: tabular-nums; font-weight: 600; }
.pseudo-panel input { width: 100%; margin: .5rem 0 0; min-height: 32px; accent-color: #ffbe27; cursor: pointer; }
.pseudo-panel:nth-child(2) input { accent-color: #74bbff; }
.pseudo-score { margin-top: 1rem; padding: .7rem; border: 1px solid transparent; border-radius: 8px; font-size: .8rem; }
.pseudo-score strong { display: block; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.pseudo-bar { height: 6px; background: #ffffff14; border-radius: 3px; margin-top: .5rem; overflow: hidden; }
.pseudo-bar span { display: block; height: 100%; background: #ffbe27; }
#swerve-bar, #swerve-pdm-bar { background: #74bbff; }
.pseudo-widget :focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.pseudo-widget figcaption { margin-top: 1.5rem; }
@media (max-width: 600px) { .pseudo-grid { grid-template-columns: 1fr; } .pseudo-panel + .pseudo-panel { border-top: 1px solid #ffffff1a; padding-top: 1rem; } }

.blog-body .pseudo-compliance { margin: 1rem 0 0; padding: 0; color: #b0dfbf; font-size: .85rem; line-height: 1.5; min-height: 3em; }
.blog-body .pseudo-compliance.is-failure { color: #ffb1b5; }


.pseudo-panel:first-child h3 { color: #ffbe27; }
.pseudo-panel:nth-child(2) h3 { color: #74bbff; }

.pseudo-score-value { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pseudo-score-status { color: var(--secondary); font-size: .75rem; white-space: nowrap; }
.pseudo-score.is-better { border-color: #8bcba080; background: #8bcba014; }
.pseudo-score.is-better .pseudo-score-status { color: #b0dfbf; font-weight: 600; }

.alpasim-figure { margin: 2rem 0; padding: 1rem; background: #111; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; font-family: var(--font-sans); scroll-margin-top: 90px; }
.alpasim-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.alpasim-preview { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .75rem; min-width: 0; text-align: center; border-radius: 12px; overflow: hidden; }
.alpasim-preview img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 6px; }
.alpasim-preview strong { font-size: 1rem; color: var(--amber); }
.alpasim-preview span { font-size: .85rem; color: var(--secondary); }
.alpasim-figure figcaption { margin-top: 1rem; text-align: center; font-size: .88rem; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.blog-body p + .alpasim-figure { margin-top: 1.25rem; }
.blog-body .alpasim-figure + p { margin-top: 3.5rem; }
@media (max-width: 600px) { .alpasim-previews { grid-template-columns: 1fr; } }

.leaderboard-figure iframe { display: block; width: 100%; height: 900px; border: 0; border-radius: 6px; background: #fff; }

.lead-video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 9;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
}

/* Custom centered play button: the native player only exposes a tiny control
   in the bottom-left corner, so we overlay a large, brand-amber button that
   calls video.play(). It fades out during playback and returns on pause. */
.lead-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 190, 39, 0.92);
  color: #0a0a0a;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.lead-video-play svg {
  width: 36px;
  height: 36px;
  margin-left: 4px; /* optically center the triangle */
}

.lead-video-play:hover {
  background: var(--amber);
}

.lead-video-embed.is-playing .lead-video-play {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.lead-video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  display: block;
}