/* Shared styles for the Empowill API documentation portal.
   Tokens follow the empowill.com brand: Parkinsans for headings,
   Instrument Sans for body text, warm cream backgrounds and the
   #ffbe57 brand yellow. */

:root {
  --brand: #ffbe57;
  --brand-soft: #ffdb99;
  --brand-pale: #ffeece;
  --brand-deep: #874b00;
  --ink: #1a1a1a;
  --ink-soft: #666666;
  --border: #e6e6e6;
  --bg: #fffcfb;
  --cream: #f9f4ec;
  --cream-deep: #f5eddf;
  --card-bg: #ffffff;
  --code-bg: #1a1a1a;
  --code-text: #f5eddf;
  --blue: #0168e7;
  --font-heading: "Parkinsans", "Inter", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Inter", system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --nav-height: 60px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  /* The commitments panel breaks out to 100vw; hide the scrollbar-width overflow. */
  overflow-x: hidden;
}

/* ----- Top navigation ----- */

.portal-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  background: var(--bg);
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}

.portal-nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  margin-right: 16px;
  white-space: nowrap;
}

.portal-nav .brand img {
  height: 28px;
  width: auto;
}

.portal-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  flex: 1;
}

.portal-nav a.nav-link {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.portal-nav a.nav-link:hover {
  color: var(--ink);
  background: var(--cream);
}

.portal-nav a.nav-link.active {
  color: var(--ink);
  background: var(--brand);
  font-weight: 600;
}

.portal-nav .nav-sep {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 8px;
  flex: none;
}

.portal-nav .nav-download {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  margin-left: 12px;
  white-space: nowrap;
}

.portal-nav .nav-download:hover {
  border-color: var(--ink);
  background: var(--cream);
}

.portal-nav .nav-site-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--brand);
  margin-left: 12px;
  white-space: nowrap;
}

.portal-nav .nav-site-link:hover {
  background: var(--brand-soft);
}

.portal-nav .version-badge {
  flex: none;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--ink-soft);
  border: 1px solid var(--border);
  background: var(--cream);
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 12px;
}

.portal-nav .version-badge:empty {
  display: none;
}

/* ----- Landing page ----- */

.page {
  max-width: 980px;
  margin: 0 auto;
  /* No bottom padding: the dark footer band closes the page. */
  padding: calc(var(--nav-height) + 32px) 24px 0;
}

.hero {
  text-align: center;
  background: var(--cream);
  border-radius: 24px;
  padding: 56px 32px;
}

/* The bird "holds" the Doc O' Will chip in its beak: the chip's right end
   tucks slightly under the bird (drawn above it), and its -2deg tilt makes it
   swing from the beak. */
.hero .hero-emblem {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 14px;
}

.hero img.hero-logo {
  height: 64px;
  position: relative;
  z-index: 1; /* beak overlaps the chip, not the other way around */
}

/* "Doc O' Will" — the doc's historic nickname, styled as a code-comment chip
   echoing the dark code blocks of the page. */
.hero .hero-nickname {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  background: var(--code-bg);
  color: var(--code-text);
  padding: 6px 18px;
  border-radius: 999px;
  /* hang from the beak: nudge the right end under the bird's left edge */
  margin: 10px -8px 0 0;
  transform: rotate(-2deg);
}

.hero .hero-nickname .hash {
  color: var(--brand);
  font-weight: 700;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 12px;
  color: var(--ink);
}

.hero p.lead {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 700px;
  margin: 0 auto 28px;
}

.hero .cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 11px 24px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.btn-primary {
  background: var(--brand);
  color: var(--ink);
}

.btn-primary:hover {
  background: var(--brand-soft);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-secondary:hover {
  background: rgba(17, 0, 0, 0.05);
  transform: translateY(-1px);
}

/* Tertiary CTA: a plain underlined link sitting on the button baseline. */
.cta-link {
  display: inline-block;
  padding: 11px 4px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.cta-link:hover {
  text-decoration-color: var(--brand);
}

/* ----- Bento grid (marketing-site style: benefit cards + pastel stat tiles) ----- */

.bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 28px 0 8px;
}

.bento-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 26px;
}

.bento-card h3 {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  margin: 14px 0 8px;
  color: var(--ink);
}

.bento-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.bento-wide {
  grid-column: span 2;
}

.bento-stat {
  border-radius: 20px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 150px;
}

.bento-stat .bento-number {
  font-family: var(--font-heading);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.bento-stat p {
  margin: 10px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.75;
  line-height: 1.45;
}

/* Bento tile fills follow the marketing site bento: cream, white, brand
   yellow and warm black only — never blue/green/red flats. */
.bento-yellow {
  background: var(--brand-soft);
}

.bento-cream {
  background: var(--cream);
}

.bento-dark {
  background: #110000;
}

.bento-dark .bento-number {
  color: var(--brand);
}

.bento-dark p {
  color: var(--cream-deep);
  opacity: 0.85;
}

/* ----- Pills (mini tags, harmonized: black text, 1px darker-shade border) ----- */

.pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 12px;
  color: var(--ink);
  border: 1px solid transparent;
}

.pill-mint {
  background: #d0fae6;
  border-color: #81ebba;
}

.pill-blue {
  background: #d6f1ff;
  border-color: #90c2ff;
}

.pill-yellow {
  background: var(--brand-pale);
  border-color: var(--brand-soft);
}

/* ----- Pitch banners (short impactful claims between sections) ----- */

.pitch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-radius: 20px;
  padding: 30px 34px;
  margin-top: 72px;
}

.pitch h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--ink);
}

.pitch p {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
  opacity: 0.75;
}

.pitch-yellow {
  background: var(--brand-soft);
}

.btn-dark {
  background: var(--ink);
  color: #fff;
  flex: none;
}

.btn-dark:hover {
  background: #333333;
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .bento-wide {
    grid-column: auto;
  }
}

/* ----- Table of contents ----- */

.toc {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 22px;
  margin: 28px 0 24px;
}

.toc .toc-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 24px;
  counter-reset: toc;
}

.toc ol li {
  counter-increment: toc;
  font-size: 14.5px;
}

.toc ol li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand-deep);
  font-weight: 700;
  margin-right: 8px;
}

.toc a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}

.toc a:hover {
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
}

/* ----- Reference cards ----- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 24px 0 8px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.card:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 24px rgba(255, 190, 87, 0.25);
  transform: translateY(-2px);
}

.card h3 {
  font-family: var(--font-heading);
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.card p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.card .card-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--brand-pale);
  border: 1px solid var(--brand-soft);
  border-radius: 999px;
  padding: 2px 12px;
  margin-bottom: 10px;
}

/* Pinned to the card bottom so actions align across cards of varying length. */
.card .card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 16px;
}

.card {
  position: relative;
}

/* Stretched link: the primary action covers the whole card, so clicking
   anywhere opens the reference... */
.card .card-btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

/* ...while the secondary download button stacks above the overlay and stays
   independently clickable. */
.card .card-btn:not(.card-btn-primary) {
  position: relative;
  z-index: 1;
}

/* Selector mirrors the CTA charter (yellow primary, transparent outlined
   secondary) and carries the section.doc-section prefix on purpose: the
   generic `section.doc-section a` link color would otherwise paint these
   buttons blue. */
section.doc-section .card-btn {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  white-space: nowrap;
}

section.doc-section .card-btn:hover {
  background: rgba(17, 0, 0, 0.05);
}

section.doc-section .card-btn-primary {
  background: var(--brand);
  border-color: var(--brand);
}

section.doc-section .card-btn-primary:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft);
}

/* ----- Content sections ----- */

section.doc-section {
  margin-top: 72px;
}

section.doc-section h2 {
  font-family: var(--font-heading);
  font-size: 27px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 3px solid var(--brand);
  display: inline-block;
  padding-bottom: 4px;
  margin: 0 0 16px;
}

section.doc-section h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 28px 0 8px;
}

section.doc-section p,
section.doc-section li {
  font-size: 15px;
}

/* Copy-link anchors on guide headings (revealed on hover) */

section.doc-section h2,
section.doc-section h3 {
  position: relative;
}

/* Absolutely positioned so the hidden button never stretches the heading
   (h2's yellow underline must hug the text). */
.anchor-copy {
  appearance: none;
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.62em;
  font-weight: 700;
  color: var(--brand-deep);
  cursor: pointer;
  padding: 2px 7px;
  border-radius: 6px;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.12s ease;
}

section.doc-section h2:hover .anchor-copy,
section.doc-section h3:hover .anchor-copy,
.anchor-copy:focus-visible {
  opacity: 1;
}

.anchor-copy:hover {
  background: var(--brand-pale);
}

.anchor-copy.copied {
  opacity: 1;
  color: #016630;
  background: #d0fae6;
}

section.doc-section ul {
  padding-left: 22px;
}

section.doc-section a {
  color: var(--blue);
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--cream-deep);
  border-radius: 6px;
  padding: 1px 6px;
}

pre {
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 16px;
  padding: 18px 20px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* ----- Syntax highlighting (highlight.js theme on brand colors) ----- */

.hljs-keyword,
.hljs-selector-tag,
.hljs-meta {
  color: var(--brand);
}

.hljs-string,
.hljs-regexp,
.hljs-addition {
  color: #81ebba; /* vert-300 */
}

.hljs-number,
.hljs-literal,
.hljs-symbol,
.hljs-bullet {
  color: #90c2ff; /* bleu-300 */
}

.hljs-comment,
.hljs-quote,
.hljs-deletion {
  color: #999999;
  font-style: italic;
}

.hljs-title,
.hljs-title.function_,
.hljs-title.class_,
.hljs-section,
.hljs-name {
  color: var(--brand-soft);
}

.hljs-attr,
.hljs-attribute,
.hljs-property,
.hljs-variable,
.hljs-template-variable {
  color: #ffdb99; /* brand tertiary */
}

.hljs-built_in,
.hljs-type,
.hljs-class {
  color: #90c2ff; /* bleu-300 */
}

.hljs-params,
.hljs-punctuation,
.hljs-operator,
.hljs-subst {
  color: var(--code-text);
}

table.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 12px 0;
}

table.doc-table th,
table.doc-table td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

table.doc-table th {
  font-family: var(--font-heading);
  font-weight: 600;
  background: var(--cream);
  color: var(--ink);
}

/* ----- Code tabs ----- */

.code-tabs .tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: -6px;
}

.code-tabs .tab-btn {
  appearance: none;
  border: 1px solid var(--border);
  border-bottom: none;
  background: var(--cream);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}

.code-tabs .tab-btn.active {
  background: var(--code-bg);
  border-color: var(--code-bg);
  color: var(--brand);
}

.code-tabs .tab-panel {
  display: none;
}

.code-tabs .tab-panel.active {
  display: block;
}

.code-tabs .tab-panel pre {
  margin-top: 0;
  border-top-left-radius: 0;
}

.callout {
  border-left: 4px solid var(--brand);
  background: var(--brand-pale);
  border-radius: 0 12px 12px 0;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
}

/* ----- Commitments (dark panel like the marketing site's black sections) ----- */

/* Full-bleed dark band: breaks out of the centered page column to span the
   whole viewport, while its content stays aligned with the page column
   (980px max-width minus 24px side padding = 466px half-width). */
.commitments-panel {
  background: #110000;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 64px max(24px, calc(50vw - 466px)) 56px;
}

section.doc-section .commitments-panel h2 {
  color: var(--cream);
}

.commitments-panel .commitments-lead {
  color: var(--cream-deep);
  opacity: 0.75;
  max-width: 640px;
  margin: 0 0 28px;
}

.commitments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.commitment {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px;
}

.commitment .eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 12px;
}

.eyebrow-green {
  background: rgba(129, 235, 186, 0.15);
  color: #81ebba;
}

.eyebrow-blue {
  background: rgba(144, 194, 255, 0.15);
  color: #90c2ff;
}

.eyebrow-yellow {
  background: rgba(255, 190, 87, 0.15);
  color: var(--brand);
}

.eyebrow-pink {
  background: rgba(255, 171, 175, 0.15);
  color: #ffabaf;
}

section.doc-section .commitment h3 {
  margin: 0 0 8px;
  color: var(--cream);
}

.commitment p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cream-deep);
  opacity: 0.8;
}

.commitment p a {
  color: #90c2ff;
}

.commitment p code {
  background: rgba(255, 255, 255, 0.12);
  color: var(--cream-deep);
}

/* Featured certification row */
.commitment-iso {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 16px;
  border-color: rgba(255, 190, 87, 0.45);
}

.commitment-iso img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  flex: none;
  background: #ffffff;
  border-radius: 999px;
  padding: 6px;
}

/* Trust badges strip, on the dark panel like the marketing site logos. */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 48px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px 32px;
  margin-top: 16px;
}

.trust-badges img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

/* Copy-link anchors must stay visible on the dark panel. */
.commitments-panel .anchor-copy {
  color: var(--brand);
}

.commitments-panel .anchor-copy:hover {
  background: rgba(255, 190, 87, 0.18);
}

.commitments-panel .anchor-copy.copied {
  color: #81ebba;
  background: rgba(129, 235, 186, 0.18);
}

@media (max-width: 640px) {
  .commitment-iso {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ----- Footer ----- */

/* Dark full-bleed footer, continuing the commitments band. */
footer.portal-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 0;
  background: #110000;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 24px max(24px, calc(50vw - 466px)) 36px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(245, 237, 223, 0.7);
}

footer.portal-footer a {
  color: var(--cream);
  text-decoration-color: var(--brand);
}

/* ----- Loader (design-system Spinner: bird gently hopping over its shadow) ----- */

/* The bird softly hops: up at 25% and 75% (with a slight tilt), back on the
   ground at 0/50/100%. */
@keyframes empowill-loader-tilt {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-16px) rotate(-8deg) scale(1.02);
  }
  50% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  75% {
    transform: translateY(-16px) rotate(8deg) scale(1.02);
  }
}

@keyframes empowill-loader-appear {
  to {
    opacity: 1;
  }
}

/* The grounded shadow follows the same rhythm: wide and dark when the bird
   lands, narrow and faint while it is in the air. */
@keyframes empowill-loader-shadow {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 0.24;
  }
  25%,
  75% {
    transform: scaleX(0.6);
    opacity: 0.12;
  }
  50% {
    transform: scaleX(1);
    opacity: 0.24;
  }
}

.portal-loader {
  position: fixed;
  inset: var(--nav-height) 0 0 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 0.25s ease;
}

.portal-loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.portal-loader .loader-bird {
  position: relative;
  width: 44px;
  height: 40px;
  color: #d1d5db;
}

.portal-loader .loader-bird svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform-origin: center bottom;
  animation:
    empowill-loader-appear 1ms linear 0.3s forwards,
    empowill-loader-tilt 1.35s cubic-bezier(0.7, 0, 0.3, 1) 0.3s infinite;
}

.portal-loader .loader-shadow {
  position: absolute;
  left: 50%;
  top: calc(100% + 5px);
  width: 80%;
  height: 6px;
  margin-left: -40%;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.35);
  filter: blur(1px);
  transform-origin: center;
  opacity: 0;
  animation:
    empowill-loader-appear 1ms linear 0.3s forwards,
    empowill-loader-shadow 1.35s cubic-bezier(0.7, 0, 0.3, 1) 0.3s infinite;
}

/* ----- Reference page ----- */

body.reference-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.reference-page rapi-doc {
  flex: 1;
  margin-top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
}