@keyframes shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

.shimmer-highlight {
  background-image: linear-gradient(
    90deg,
    rgba(251, 191, 36, 0.5) 0%,
    rgba(251, 191, 36, 0.55) 30%,
    rgba(253, 230, 138, 0.75) 50%,
    rgba(251, 191, 36, 0.55) 70%,
    rgba(251, 191, 36, 0.5) 100%
  );
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
  position: relative;
  background-clip: padding-box;
  cursor: default;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* Sparkle styling */
.sparkle {
  display: none;
  position: absolute;
  width: 12px;
  height: 12px;
  background: #f59e0b; /* amber-500 */
  clip-path: polygon(50% 0%, 65% 40%, 100% 50%, 65% 60%, 50% 100%, 35% 60%, 0% 50%, 35% 40%);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 0 4px rgba(245, 158, 11, 0.8);
}

@media (min-width: 1024px) {
  .sparkle {
    display: block;
    animation: sparkle 2s ease-in-out infinite;
  }
}

/* Position sparkles */
.sparkle.s1 {
  top: -6px;
  left: -4px;
  animation-delay: 0s;
}

.sparkle.s2 {
  top: -4px;
  right: 10%;
  animation-delay: 0.5s;
  width: 8px;
  height: 8px;
}

.sparkle.s3 {
  bottom: -6px;
  right: -4px;
  animation-delay: 1s;
  width: 10px;
  height: 10px;
}

/* Animate on hover */
.shimmer-highlight:hover {
  background-color: rgba(251, 191, 36, 0.2);
}

.dark .shimmer-highlight {
  background-image: linear-gradient(
    90deg,
    rgba(245, 158, 11, 0.15) 0%,
    rgba(245, 158, 11, 0.2) 30%,
    rgba(253, 186, 116, 0.25) 50%,
    rgba(245, 158, 11, 0.2) 70%,
    rgba(245, 158, 11, 0.15) 100%
  );
  background-size: 200% auto;
}

.dark .sparkle {
  background: #fef3c7; /* amber-100 */
}

.dark .shimmer-highlight:hover {
  background-color: rgba(245, 158, 11, 0.15);
}
.pagy {
  --spacing: 0.15rem;
  --padding: 0.7rem;
  --rounding: 0.5rem;
  --border-width: 1px;
  --font-size: 0.875rem;
  --font-weight: 500;
  --line-height: 1.6;

  /* light (tailwind neutral) */
  --text: #171717; /* neutral-900 */
  --text-hover: #0a0a0a; /* neutral-950 */
  --text-current: #fafafa; /* neutral-50 */
  --background: #ffffff; /* white */
  --background-hover: #f5f5f5; /* neutral-100 */
  --background-current: #171717; /* neutral-900 */
  --background-input: #ffffff;

  color: var(--text);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  display: flex;
  user-select: none;
}

.pagy > :not([hidden]) ~ :not([hidden]) {
  margin-left: calc(var(--spacing) * (1 - var(--space-reverse, 0)));
  margin-right: calc(var(--spacing) * var(--space-reverse, 0));
}

.rtl .pagy > :not([hidden]) ~ :not([hidden]) {
  --space-reverse: 1;
}

.pagy a:not([role="separator"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  text-decoration: none;
  background-color: var(--background);
  padding: 0.25rem;
  border: var(--border-width) solid #e5e5e5; /* neutral-200 */
  border-radius: var(--rounding);
  color: inherit;
}

.pagy a[href]:hover {
  background-color: var(--background-hover);
  color: var(--text-hover);
}

.pagy a:not([href]) {
  cursor: default;
}

.pagy a[role="link"]:not([aria-current]) {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagy a[aria-current],
.pagy span[aria-current] {
  background-color: var(--background-current);
  color: var(--text-current);
  border-color: var(--background-current);
}

.pagy a[aria-label="Previous"],
.pagy a[aria-label="Next"] {
  position: relative;
  font-size: 0;
  color: var(--text);
}

.pagy a[aria-label="Previous"]::before,
.pagy a[aria-label="Next"]::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: auto;
  background-size: 0.75rem 0.75rem;
  background-repeat: no-repeat;
  background-position: center;
}

.pagy a[aria-label="Previous"]::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' stroke='currentColor'%3E%3Cpolyline points='7.75 1.75 3.5 6 7.75 10.25'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
}

.pagy a[aria-label="Next"]::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' stroke='currentColor'%3E%3Cpolyline points='4.25 10.25 8.5 6 4.25 1.75'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
}

.pagy [role="separator"] {
  background: transparent;
  color: #a3a3a3; /* neutral-400 */
  padding: 0.25rem 0.4rem;
  border: none;
  box-shadow: none;
}

.pagy label {
  white-space: nowrap;
  display: inline-block;
  border: var(--border-width) solid #e5e5e5;
  border-radius: var(--rounding);
  background-color: var(--background);
  padding: 0.2rem 0.5rem;
}

.pagy label input {
  all: unset;
  border: 1px solid #e5e5e5;
  border-radius: calc(var(--rounding) / 2) !important;
  background-color: var(--background-input);
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  color: var(--text);
}

.pagy-compact .pagy {
  --spacing: 0.1rem;
  --padding: 0.55rem;
  --rounding: 0.35rem;
}

.dark .pagy {
  /* dark (tailwind neutral) */
  --text: #f5f5f5; /* neutral-100 */
  --text-hover: #ffffff;
  --text-current: #0a0a0a; /* neutral-950 */
  --background: #262626; /* neutral-800 */
  --background-hover: #404040; /* neutral-700 */
  --background-current: #f5f5f5; /* neutral-100 */
  --background-input: #262626; /* neutral-800 */
}

.dark .pagy a:not([role="separator"]) {
  border-color: #ffffff1a; /* white/10 */
  background-color: var(--background);
}

.dark .pagy a:not([role="separator"]):hover {
  border-color: #ffffff1a; /* white/10 */
  background-color: var(--background-hover);
  color: var(--text-hover);
}

.dark .pagy a[aria-current]:hover {
  background-color: var(--background-current);
  color: var(--text-current);
}

.dark .pagy a[aria-current] {
  border-color: var(--background-current);
  background-color: var(--background-current);
}

.dark .pagy a[aria-label="Previous"]::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2' stroke='%23f5f5f5'%3E%3Cpolyline points='7.75 1.75 3.5 6 7.75 10.25'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
}

.dark .pagy a[aria-label="Next"]::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2' stroke='%23f5f5f5'%3E%3Cpolyline points='4.25 10.25 8.5 6 4.25 1.75'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
}

.dark .pagy [role="separator"] {
  color: #a3a3a3; /* neutral-400 */
}

.dark .pagy label {
  border-color: #262626;
  background-color: var(--background);
}

.dark .pagy label input {
  border-color: #262626;
  background-color: var(--background-input);
  color: var(--text);
}

/* Loading state for Turbo Frame pagination */
turbo-frame[aria-busy="true"] .pagy {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

/* Loading indicator with overlay */
turbo-frame[aria-busy="true"][data-pagy-loading-indicator] {
  position: relative;
  cursor: wait;
  pointer-events: none;
}

/* Semi-transparent overlay */
turbo-frame[aria-busy="true"][data-pagy-loading-indicator]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 10;
  opacity: 0;
  animation: pagy-fade-in 0.15s ease forwards;
}

.dark turbo-frame[aria-busy="true"][data-pagy-loading-indicator]::before {
  background-color: rgba(23, 23, 23, 0.75);
}

/* Spinning loader */
turbo-frame[aria-busy="true"][data-pagy-loading-indicator]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 2.5px solid #e5e5e5;
  border-top-color: #171717;
  border-radius: 50%;
  opacity: 0;
  animation: pagy-spin 0.6s linear infinite, pagy-fade-in 0.15s ease forwards;
  z-index: 11;
  pointer-events: none;
}

.dark turbo-frame[aria-busy="true"][data-pagy-loading-indicator]::after {
  border-color: #404040;
  border-top-color: #f5f5f5;
}

@keyframes pagy-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes pagy-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Mobile responsive styles */
@media (max-width: 640px) {
  .pagy {
    --spacing: 0.1rem;
    --padding: 0.3rem;
    --font-size: 0.75rem;
  }

  .pagy a:not([role="separator"]) {
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: 0.1rem;
  }

  .pagy a[role="separator"] {
    padding: 0.15rem 0.2rem;
    font-size: 0.75rem;
  }

  .pagy label {
    padding: 0.1rem 0.3rem;
  }

  .pagy label input {
    padding: 0.15rem 0.3rem;
    font-size: 0.75rem;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file in this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *



 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/inter-latin-wght-normal-007fce1bff9f7f37469fe61eff9ef62c033af63fccb0e65a2e94f4e0c14d9d6d.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/inter-latin-wght-italic-ba810cae5c279abdccccaef2804b33880f310a8437a42af6d5167254b2f71a6c.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Greycliff CF";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/greycliff-cf-medium-30cc076a9b6caabcf8c78084f81ce2f9b6c1f260796f8fc244f1ca71b358ed25.woff2) format("woff2");
}

@font-face {
  font-family: "Greycliff CF";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/greycliff-cf-demibold-b3ee0ee8f97e0e399bb9be20ce3944585c074de4e43ca67c38c690cb203fee05.woff2) format("woff2");
}

@font-face {
  font-family: "Greycliff CF";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/greycliff-cf-bold-454046a3abdfe2e35b393b76d00c26a5e75436302e684f77b5aac2b27bd669b8.woff2) format("woff2");
}

@font-face {
  font-family: "Greycliff CF";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/greycliff-cf-extrabold-a332e91078cdd6302ba9c071d0ae6ab9fcf6547b51ed9037e425ab77d9b1e36e.woff2) format("woff2");
}

/*
 * Apply the preloaded faces here, in the same stylesheet as @font-face.
 * Tailwind also sets these, but it used to load after the importmap and Chrome
 * then reported the preloads as unused.
 */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.font-heading {
  font-family: "Greycliff CF", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
}


/* Glossary and other prose headings use the display face as well. */
.prose :is(h1, h2, h3, h4) {
  font-family: "Greycliff CF", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/*
 * Article reading column: plain, generous, nothing decorative. Scoped under
 * .article-body so it outranks the editor's default content styles without
 * touching the editor itself.
 */
.article-body,
#glossary-term-content {
  --article-quote-rule: #3b82f6;
  --article-quote-surface: rgba(59, 130, 246, 0.07);
}

.article-body {
  --article-ink: #0a0a0a;
  --article-text: #404040;
  --article-muted: #737373;
  --article-rule: rgba(0, 0, 0, 0.12);
  --article-surface: rgba(0, 0, 0, 0.04);

  color: var(--article-text);
  font-size: 1.0625rem;
  line-height: 1.75;
  letter-spacing: -0.006em;
  text-wrap: pretty;
}

.dark .article-body:not(.article-paper .article-body),
.dark #glossary-term-content {
  --article-quote-rule: #60a5fa;
  --article-quote-surface: rgba(96, 165, 250, 0.1);
}

.dark .article-body:not(.article-paper .article-body) {
  --article-ink: #fafafa;
  --article-text: #c8c8c8;
  --article-muted: #8f8f8f;
  --article-rule: rgba(255, 255, 255, 0.14);
  --article-surface: rgba(255, 255, 255, 0.06);
}

.article-body .lexxy-content {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.article-body .lexxy-content > :first-child {
  margin-top: 0;
}

.article-body .lexxy-content :is(p, ul, ol) {
  margin-block: 0 1.4em;
}

.article-body .lexxy-content :is(h2, h3, h4) {
  color: var(--article-ink);
  font-family: "Greycliff CF", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  scroll-margin-top: calc(var(--app-header-height, 4rem) + 1.5rem);
}

.article-body .lexxy-content h2 {
  margin-block: 3em 0.8em;
  font-size: 1.5em;
  line-height: 1.25;
}

.article-body .lexxy-content h3 {
  margin-block: 2.2em 0.6em;
  font-size: 1.15em;
  line-height: 1.35;
}

.article-body .lexxy-content h4 {
  margin-block: 1.8em 0.5em;
  font-size: 1em;
}

.article-body .lexxy-content :is(strong, b) {
  color: var(--article-ink);
  font-weight: 600;
}

#blog-post-content.article-body .lexxy-content a:not(.button-primary, .button-secondary) {
  color: var(--article-ink);
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: var(--article-muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 150ms ease;
}

#blog-post-content.article-body .lexxy-content a:not(.button-primary, .button-secondary):hover {
  color: var(--article-ink);
  text-decoration-color: currentColor;
}

/* Checklists keep the editor's own checkbox styling. */
.article-body .lexxy-content :is(ul:not(:has(> li[role="checkbox"])), ol) {
  padding-left: 1.25em;
}

.article-body .lexxy-content ul:not(:has(> li[role="checkbox"])) {
  list-style: disc;
}

.article-body .lexxy-content ol {
  list-style: decimal;
}

.article-body .lexxy-content li:not([role="checkbox"]) {
  margin-block: 0.4em;
  padding-left: 0.25em;
}

.article-body .lexxy-content li::marker {
  color: var(--article-muted);
}

:is(#blog-post-content.article-body, #glossary-term-content) .lexxy-content blockquote:not(.twitter-tweet, .instagram-media, .tiktok-embed, .fb-xfbml-parse-ignore) {
  margin: 2.4em 0;
  padding: 1em 1.4em 1em 1.25em;
  border: 0;
  border-left: 3px solid var(--article-quote-rule);
  border-radius: 0 0.75rem 0.75rem 0;
  background: var(--article-quote-surface);
  color: var(--article-ink, inherit);
  font-size: 1.05em;
  font-style: normal;
  line-height: 1.6;
}

:is(#blog-post-content.article-body, #glossary-term-content) .lexxy-content blockquote:not(.twitter-tweet, .instagram-media, .tiktok-embed, .fb-xfbml-parse-ignore) > :last-child {
  margin-bottom: 0;
}

.dark #glossary-term-content .lexxy-content blockquote.lexxy-photo-quote cite {
  color: var(--color-neutral-400, #a3a3a3);
}

.article-body .lexxy-content .lexxy-callout {
  margin: 2.4em 0;
}

.article-body .lexxy-content .lexxy-callout > :last-child {
  margin-bottom: 0;
}

.article-body .lexxy-content :is(figure, action-text-attachment) {
  display: block;
}

.article-body .lexxy-content figure.attachment {
  margin-block: 1rem;
}

.article-body .lexxy-content figcaption {
  margin-top: 0.9em;
  color: var(--article-muted);
  font-size: 0.8em;
  line-height: 1.5;
  text-align: center;
}

/* Quieter corners than the editor default, in keeping with the cover. */
#blog-post-content.article-body .lexxy-content .attachment--preview :is(img, .attachment__image-frame) {
  border-radius: 0.5rem;
}

.article-body .lexxy-content hr {
  margin: 3em 0;
  border: 0;
  border-top: 1px solid var(--article-rule);
}

.article-body .lexxy-content :not(pre) > code {
  padding: 0.15em 0.4em;
  border-radius: 0.3em;
  background: var(--article-surface);
  font-size: 0.9em;
}

/* The reading sheet stays white in both site themes. */
.article-layout { max-width: 45rem; margin-inline: auto; }
.article-layout--admin { max-width: 58rem; }
.article-admin-actions { width: 100%; padding-top: 1rem; }
.glossary-article-content { grid-column: 1; }
.glossary-article-layout:not(.article-layout--admin) { max-width: 42rem; }
@media (min-width: 1024px) {
  .article-layout--admin { display: grid; grid-template-columns: minmax(0, 45rem) 8rem; column-gap: 1.5rem; align-items: start; }
  .article-admin-actions { position: sticky; top: calc(var(--app-header-height, 4rem) + 1.5rem); grid-column: 2; grid-row: 1; }
}
.article-header { display: contents; }
.article-mobile-toc {
  position: sticky;
  top: calc(var(--app-header-height, 4rem) + 0.5rem);
  z-index: 30;
  height: 0;
  width: fit-content;
  margin-left: 1rem;
  transform: translateY(1rem);
}
.glossary-mobile-toc {
  top: calc(var(--app-header-height, 4rem) + 0.25rem);
  margin-left: auto;
  margin-right: 0.5rem;
  transform: none;
}
.article-paper {
  background: #fff;
  color: #262626;
  color-scheme: light;
  border-radius: 1.5rem;
  padding: clamp(1rem, 4vw, 3rem);
}
.article-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 24rem;
  overflow: hidden;
  border-radius: 1rem;
  background: #303c3d;
}
.article-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.article-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / 40%), rgb(0 0 0 / 58%)); }
.article-hero-title {
  margin: 0;
  padding: 4.5rem 2rem 5rem;
  color: #fff;
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgb(0 0 0 / 15%);
}
.article-facts {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  width: fit-content;
  max-width: calc(100% - 2rem);
  margin: -2.5rem auto 0;
  padding: 1.5rem 2rem;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 1rem;
  background: #1c1c1c;
  color: #fff;
  box-shadow: 0 8px 20px rgb(0 0 0 / 15%);
}
.article-introduction { margin-top: 3rem; }
.article-author {
  max-width: 28rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 2px solid #d4d4d4;
  border-radius: 0.875rem;
  background: #fafafa;
  color: #262626;
  box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
}
.article-author-heading { margin: 0; font-size: 1rem; line-height: 1.5; }
.article-author-label { display: block; color: #737373; font-size: 0.875rem; font-weight: 400; }
.article-author-name { display: block; margin-top: 0.25rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.article-author-name--nickname { width: fit-content; cursor: help; }
.article-author-nickname {
  display: block;
  max-height: 0;
  overflow: hidden;
  color: #737373;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0;
  transition: max-height 180ms ease, opacity 180ms ease, margin-top 180ms ease;
}
.article-author-name--nickname:hover .article-author-nickname,
.article-author-name--nickname:focus-visible .article-author-nickname {
  max-height: 1.5em;
  margin-top: 0.25rem;
  opacity: 1;
}
.article-author-name--nickname:focus-visible { outline: 2px solid #525252; outline-offset: 4px; border-radius: 0.125rem; }
.article-author-profile { display: flex; align-items: center; gap: clamp(1rem, 4vw, 2rem); margin-top: 1.25rem; }
.article-author-picture { width: 7rem; height: 7rem; flex-shrink: 0; border-radius: 1.25rem; object-fit: cover; }
.article-author-links { margin: 0; padding: 0; list-style: none; }
.article-author-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.5rem;
  color: #404040;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}
.article-author-link:hover { color: #0a0a0a; text-decoration: underline; text-underline-offset: 4px; }
.article-author-link:focus-visible { outline: 2px solid #525252; outline-offset: 4px; border-radius: 0.25rem; }
.article-author-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.article-author-bio { margin: 1.25rem 0 0; color: #525252; font-size: 0.875rem; line-height: 1.75; }
.dark .article-author {
  border-color: #404040;
  background: #1c1c1c;
  color: #f5f5f5;
  color-scheme: dark;
  box-shadow: 0 2px 0 rgb(0 0 0 / 20%);
}
.dark .article-author-label { color: #a3a3a3; }
.dark .article-author-link { color: #d4d4d4; }
.dark .article-author-link:hover { color: #fff; }
.dark .article-author-link:focus-visible { outline-color: #a3a3a3; }
.dark .article-author-bio { color: #a3a3a3; }
@media (max-width: 639px) {
  .glossary-article-layout { padding-inline: 1rem; }
  .article-paper { border-radius: 1rem; padding-block: 1.5rem; }
  .article-hero { min-height: 14rem; }
  .article-hero-title { padding: 4.5rem 1rem 2rem; font-size: clamp(1.5rem, 6vw, 2rem); }
  .article-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 1.25rem 1rem;
    border-radius: 0 0 1rem 1rem;
  }
  .article-hero { border-radius: 1rem 1rem 0 0; }
  .article-company { flex-direction: column; text-align: center; overflow-wrap: anywhere; }
  .article-reading-details { min-width: 0; gap: 0.75rem; }
  .article-reading-details > span { align-items: flex-start; }
  .article-reading-details svg { margin-top: 0.125rem; }
  .article-facts > .article-reading-details:only-child { grid-column: 1 / -1; align-items: center; }
  .article-introduction { margin-top: 2rem; }
}
@media (max-width: 1023px) {
  .article-layout--admin { display: flex; flex-direction: column; gap: 1rem; }
  .article-admin-actions { position: static; order: -1; padding-top: 0; }
}