@layer components {
  /* Container */
  .page-container,
  .header__container,
  .hero__container,
  .features__container,
  .code-demo__container,
  .cta__container,
  .footer__container {
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--space-md);
  }

  @media (min-width: 768px) {
    .page-container,
    .header__container,
    .hero__container,
    .features__container,
    .code-demo__container,
    .cta__container,
    .footer__container {
      padding-inline: var(--space-lg);
    }
  }

  /* Scroll animations */
  [data-animate] {
    --animate-delay: 0s;
    --animate-duration: 600ms;
    --animate-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
      opacity var(--animate-duration) var(--animate-ease) var(--animate-delay),
      transform var(--animate-duration) var(--animate-ease) var(--animate-delay);
    will-change: opacity, transform;
  }

  [data-animate].is-animated {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  [data-animate="fade-in"] {
    transform: translate3d(0, 12px, 0);
  }

  [data-animate="fade-right"] {
    transform: translate3d(-24px, 0, 0);
  }

  [data-animate="fade-left"] {
    transform: translate3d(24px, 0, 0);
  }

  [data-animate="zoom-in"] {
    transform: scale(0.96);
  }

  [data-animate="zoom-in"].is-animated {
    transform: scale(1);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-animate] {
      transition: none;
      opacity: 1;
      transform: none;
    }
  }

  /* Buttons */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.1;
  }

  .button--primary {
    background-color: var(--color-primary-base);
    color: var(--color-text-inverted);
  }

  .button--primary:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-text-inverted);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }

  .button--secondary {
    background-color: var(--color-surface-tertiary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-light);
  }

  .button--secondary:hover {
    background-color: var(--color-surface-secondary);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
  }

  .button--large {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-lg);
  }


  /* Features Section */
  .features {
    padding: var(--space-4xl) 0;
    background-color: var(--color-surface-secondary);
  }

  .section-title {
    text-align: center;
    margin-bottom: var(--space-2xl);
    font-size: var(--font-size-4xl);
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    font-weight: 300;
  }

  .features__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
  }

  @media (min-width: 768px) {
    .features__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .features__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-lg);
    background-color: var(--color-surface-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    overflow: clip;
    position: relative;
  }

  .feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }

  .feature__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-md);
    color: var(--color-primary);

    svg {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    svg:first-child {
      z-index: 1;
    }

    svg + svg {
      position: absolute;
      rotate: 11deg;
      color: var(--color-secondary-darker);
      transform-origin: center;
      scale: 4;
      opacity: 0.08;
      mix-blend-mode: multiply;
      z-index: 0;
      stroke-width: 0.5;
      fill: var(--color-secondary-light);
      filter: grayscale(1);
    }
  }

  .feature__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-xs);
    color: var(--color-text-primary);
  }

  .feature__description {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin-bottom: 0;
    opacity: .8;
  }

  /* Code Window Component */
  .code-window {
    background-color: var(--code-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-lg);
    width: 100%;
  }

  .code-window__header {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-sm);
    background-color: color-mix(in srgb, var(--code-bg) 85%, black);
    border-bottom: 1px solid color-mix(in srgb, var(--code-bg) 55%, black);
  }

  .code-window__dot {
    width: var(--space-xs);
    height: var(--space-xs);
    border-radius: var(--radius-full);
  }

  .code-window__dot:nth-child(1) {
    background-color: #FF5F56;
  }

  .code-window__dot:nth-child(2) {
    background-color: #FFBD2E;
  }

  .code-window__dot:nth-child(3) {
    background-color: #27C93F;
  }

  .code-panel--after {
    .code-window__dot:not(:nth-child(3)) {
      opacity: 0.15;
    }
  }

  .code-panel--before {
    .code-window__dot:not(:nth-child(1)) {
      opacity: 0.15;
    }
  }

  .code-window__body {
    padding: var(--space-md);
    overflow-x: auto;
  }

  .code-window__code {
    margin: 0;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-md);
    line-height: 1.6;
    color: var(--code-text);
    word-break: break-word; /* allow long tokens to wrap */
    overflow-wrap: anywhere; /* permit wrapping anywhere for very long lines */
  }

  .code--keyword {
    color: var(--code-keyword);
  }

  .code--string {
    color: var(--code-string);
  }

  .code--attr {
    color: var(--code-attr);
  }

  .code--comment {
    color: var(--code-comment);
  }

  /* Code Demo Section */
  .code-demo {
    padding: var(--space-4xl) 0;
    background-color: var(--color-surface-primary);
  }

  .code-demo__before-after {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  @media (min-width: 768px) {
    .code-demo__before-after {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .code-panel {
    display: grid;
    height: 100%;
  }

  .code-panel__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-md);
    text-align: center;
  }

  .code-window__code code {
    background: none !important;
    display: inline; /* override global inline-flex for inline code */
    white-space: pre; /* preserve preformatted whitespace */
    padding: 0; /* remove inline code padding inside code window */
    color: inherit; /* use container text color */
    letter-spacing: normal; /* avoid tightened spacing for inline code */
  }

  /* CTA Section */
  .cta {
    padding: var(--space-3xl) 0;
    background: var(--color-surface-secondary);
    text-align: center;
  }

  .cta__container {
    max-width: var(--container-lg);
  }

  .cta__title {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
  }

  .cta__description {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
    max-width: 36rem;
    margin-inline: auto;
  }

  .cta__actions,
  .cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
    justify-content: center;
  }

  @media (max-width: 480px) {
    .cta__actions,
    .cta__buttons {
      flex-direction: column;
      gap: var(--space-sm);
    }
  }

  /* Installation Page */
  .installation {
    padding: var(--space-3xl) 0;
    background-color: var(--color-surface-primary);
  }

  .installation__container {
    max-width: var(--container-lg);
    margin: 0 auto;
    padding: 0 var(--space-md);
  }

  .installation__step {
    margin-bottom: var(--space-3xl);
  }

  .installation__step:last-child {
    margin-bottom: 0;
  }

  .installation__step-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-primary);
  }

  .installation__step-content {
    background-color: var(--color-surface-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
  }

  /* Checklist */
  .checklist {
    margin: var(--space-md) 0;
    list-style: none;
  }

  .checklist__item {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-md);
  }

  .checklist__item::before {
    content: "✓";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: var(--space-sm);
    background-color: var(--color-success);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
  }

  /* IDE Integration */
  .ide-integration {
    margin-bottom: var(--space-xl);
  }

  .ide-integration:last-child {
    margin-bottom: 0;
  }

  .ide-integration__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-md);
  }

  /* Next Steps */
  .next-steps {
    padding: var(--space-3xl) 0;
    background-color: var(--color-surface-secondary);
  }

  .next-steps__container {
    max-width: var(--container-lg);
    margin: 0 auto;
    padding: 0 var(--space-md);
    text-align: center;
  }

  .next-steps__title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-xl);
  }

  .next-steps__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  @media (min-width: 768px) {
    .next-steps__cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .next-steps__card {
    background-color: var(--color-surface-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  }

  .next-steps__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }

  .next-steps__card-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-md);
  }

  .next-steps__card-description {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
  }

  /* Code Styling */
  code {
    font-family: var(--font-family-mono), monospace;
    font-size: 0.859em;
    border-radius: var(--radius-sm);
    border: 0;
    display: inline;
    line-height: 1.5;
    padding: .15em .45em;
    background: var(--code-bg);
    color: #CEBD5D;
    letter-spacing: -0.025em;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }

  pre code {
    display: inline;
    max-width: none;
    overflow-wrap: normal;
    word-break: normal;
    white-space: inherit;
    padding: 0;
    background: transparent;
    color: inherit;
    letter-spacing: inherit;
  }

  /* Icon Button Component */
  .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    margin: 0 0.25rem;
    background-color: transparent;
    border: none;
    border-radius: 0.5rem;
    color: var(--color-text);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease-in-out;
  }

  .icon-button:hover {
    background-color: var(--color-link);
    color: var(--color-background);
  }

  .icon-button:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .icon-button__icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.2s ease;
    position: relative;
  }

  #theme-toggle .icon-button__icon--sun {
    display: none;
  }

  #theme-toggle .icon-button__icon--moon {
    display: block;
  }

  html[data-theme="dark"] #theme-toggle .icon-button__icon--sun {
    display: block;
  }

  html[data-theme="dark"] #theme-toggle .icon-button__icon--moon {
    display: none;
  }

  /* Header buttons container */
  .header__buttons {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 1rem;
    line-height: 1;
  }

  @media (max-width: 768px) {
    .header__buttons {
      margin-right: 0.5rem;
    }

    .icon-button {
      width: 2rem;
      height: 2rem;
      padding: 0.375rem;
    }
  }

  /* Table of Contents */
  .toc {
    background-color: var(--color-surface-secondary);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
  }

  .toc__title {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
  }

  .toc__list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;

    .toc__list {
      margin-left: 0.75rem;

      li {
        font-size: .95em;
      }
    }

  }

  .toc__list li {
    display: flex;
    flex-direction: column;
    gap: .25rem;
  }

  .toc__list li a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.2s;
  }

  .toc__list li a:hover {
    color: var(--color-primary);
  }

  .toc__list--nested {
    list-style-type: none;
    padding-left: 1.5rem;
    margin-top: 0.5rem;
  }

  .toc__list--nested li {
    margin-bottom: 0.25rem;
  }

  .toc-target {
    scroll-margin-top: 100px;
  }
}

@layer components {
  .ba-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-md);
    max-width: var(--container-md);
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }

  .ba-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-radius: 999px;
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    opacity: 0;
    transform: scale(.97);
    line-height: 1.2;
    transition: opacity 200ms ease, transform 200ms ease;
  }
  
  .ba-chip > label:last-child {
    padding-block-end: 1px;
    display: flex;
  }

  .ba-chip.show {
    opacity: 1;
    transform: scale(1);
  }

  .ba-chip--more {
    background: transparent;
    padding: .35rem 0;
  }

  .ba-check {
    width: 1em;
    height: 1em;
    border: none;
    position: relative;
    box-sizing: border-box;
  }

  .ba-check::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 1px;
    width: 8px;
    height: 5px;
    border-left: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: rotate(-45deg);
    transition: all 500ms ease;
  }

  .ba-chip.is-active .ba-check::after {
    border-color: var(--color-success-base);
    scale: 1.2;
  }

  .ba-chip.is-checked .ba-check::after {
    border-color: rgba(255, 255, 255, 0.75);
  }
}

/* CSS for TOC current section styling */
.toc__item--current > a {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  position: relative;
  transition: all var(--transition-fast);
}

.toc__item--current > a::before {
  animation: toc-indicator-in var(--transition-normal) ease-out forwards;
  background-color: var(--color-primary);
  border-radius: var(--radius-sm);
  content: '';
  height: 1rem;
  left: -1rem;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
}

@keyframes toc-indicator-in {
  from {
    opacity: 0;
    transform: translateY(-50%) scaleY(0);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
  }
}

.md-admonition {
  background: color-mix(in oklch, transparent 95%, var(--color-text-primary));
  border-left: .25em solid var(--color-admonition-border);
  border-radius: .75rem;
  color: inherit;
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-lg);
}

.md-admonition > p,
.md-admonition > pre {
  margin-bottom: var(--space-sm);
}

.md-admonition > ul {
  list-style: inside circle;
}

.md-admonition > *:last-child {
  margin-bottom: 0;
}

.md-admonition-label {
  color: var(--color-admonition-text);
  display: block;
  font-size: var(--font-size-lg);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.md-admonition-tip {
  --color-admonition-border: var(--color-success);
  --color-admonition-text: var(--color-success);
}

.md-admonition-note {
  --color-admonition-border: var(--color-success);
  --color-admonition-text: var(--color-success);
}

.md-admonition-info {
  --color-admonition-border: var(--color-success);
  --color-admonition-text: var(--color-success);
}

.md-admonition-warning {
  --color-admonition-border: var(--color-warning);
  --color-admonition-text: var(--color-warning-base);
}

@layer components {
  .used-by {
    padding: var(--space-3xl) 0;
    background-color: var(--color-surface-primary);
  }

  .used-by__container {
    text-align: center;

    h2 {
      margin: 0;
    }
  }

  .used-by__logos {
    list-style: none;
    padding: 0;
    margin: var(--space-2xl) auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: var(--space-xl) var(--space-2xl);
    align-items: center;
    justify-items: center;
    max-width: var(--container-lg);
  }

  @media (min-width: 640px) {
    .used-by__logos {
      grid-template-columns: repeat(3, minmax(160px, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .used-by__logos {
      grid-template-columns: repeat(5, minmax(160px, 1fr));
    }
  }

  .used-by__item {
    text-align: center;
  }

  .used-by__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    color: inherit;
    text-decoration: none;
  }

  .used-by__avatar {
    width: 84px;
    height: 84px;
    border-radius: var(--radius-full);
    object-fit: cover;
    background: var(--color-surface-secondary);
    border: 3px solid var(--color-surface-secondary);
    box-shadow: none;
    filter: grayscale(1);
    transition: all var(--transition-fast);

    scale: 1.25;
    opacity: .65;
  }

  /* Apply blend mode only in dark theme */
  html[data-theme="dark"] .used-by__avatar {
    mix-blend-mode: hard-light;
  }

  .used-by__link:hover .used-by__avatar {
    opacity: 1;
    transform: translateY(-2px);
    mix-blend-mode: normal;
    filter: grayscale(0);
  }

  .used-by__name {
    padding-top: var(--space-md);
    opacity: .65;
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
  }

  .used-by__link:hover .used-by__name {
    opacity: 1;
    color: var(--color-text-primary);
  }
}