@layer ally.tokens {
  :root {
    --docs-header-height: 4.25rem;
    --docs-sidebar-width: 18rem;
    --docs-toc-width: 13rem;
    --docs-code-bg: #11131f;
    --docs-code-text: #eef0ff;
  }
}

@layer ally.base {
  body.docs-body {
    background:
      radial-gradient(circle at 85% -10%, rgb(79 70 216 / 10%), transparent 24rem),
      var(--ally-color-bg);
  }
}

@layer ally.components {
  .docs-site-footer .box-d { gap: 1rem; }
  .docs-footer-brand { display: inline-flex; align-items: center; max-inline-size: 13rem; }
  .docs-footer-brand img { display: block; inline-size: 100%; block-size: auto; }
  .docs-footer-brand:focus-visible { outline: 3px solid var(--ally-color-focus); outline-offset: 4px; }

  .docs-site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 2000;
    min-block-size: var(--docs-header-height);
    padding: .65rem 0;
    background: color-mix(in srgb, var(--ally-color-bg) 88%, transparent);
    border-block-end: 1px solid var(--ally-color-border);
    backdrop-filter: blur(14px);
  }

  .docs-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--ally-color-text);
    text-decoration: none;
    white-space: nowrap;
  }
  .docs-brand:hover { color: var(--ally-color-primary-active); }
  .docs-brand-mark {
    display: inline-grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: .78rem;
    background: var(--ally-gradient-brand);
    color: #fff;
    box-shadow: var(--ally-shadow-sm);
    font-weight: 900;
    letter-spacing: -.08em;
  }
  .docs-brand-text { display: grid; line-height: 1.05; }
  .docs-brand-text small { font-size: .7rem; font-weight: 700; color: var(--ally-color-muted); }

  .docs-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
  }

  .docs-version {
    display: none;
    padding: .3rem .6rem;
    border: 1px solid var(--ally-color-border);
    border-radius: var(--ally-radius-pill);
    color: var(--ally-color-muted);
    font-size: .78rem;
    font-weight: 700;
  }

  .docs-search {
    position: relative;
    flex: 1 1 16rem;
    max-inline-size: 29rem;
  }
  .docs-search input {
    inline-size: 100%;
    min-block-size: 2.7rem;
    padding: .55rem 2.7rem .55rem 2.55rem;
    border: 1px solid var(--ally-color-border);
    border-radius: var(--ally-radius-pill);
    background: var(--ally-color-surface);
    color: var(--ally-color-text);
  }
  .docs-search::before {
    content: "⌕";
    position: absolute;
    inset-inline-start: .9rem;
    inset-block-start: .46rem;
    color: var(--ally-color-muted);
    font-size: 1.3rem;
    line-height: 1;
  }
  .docs-search-kbd {
    position: absolute;
    inset-inline-end: .65rem;
    inset-block-start: .53rem;
    padding: .18rem .42rem;
    border: 1px solid var(--ally-color-border);
    border-radius: .35rem;
    background: var(--ally-color-bg);
    color: var(--ally-color-muted);
    font-size: .72rem;
  }

  .docs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-block-size: calc(100vh - var(--docs-header-height));
  }

  .docs-sidebar {
    position: fixed;
    z-index: 1900;
    inset-block: var(--docs-header-height) 0;
    inset-inline-start: 0;
    inline-size: min(88vw, var(--docs-sidebar-width));
    overflow-y: auto;
    padding: 1rem;
    border-inline-end: 1px solid var(--ally-color-border);
    background: var(--ally-color-bg);
    transform: translateX(-105%);
    transition: transform var(--ally-transition);
  }
  .docs-sidebar.is-open { transform: translateX(0); box-shadow: var(--ally-shadow-lg); }
  .docs-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-block-end: 1rem;
  }
  .docs-sidebar-title {
    margin: 0;
    font-size: .8rem;
    color: var(--ally-color-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .docs-nav-group { margin-block-end: 1.25rem; }
  .docs-nav-group > strong {
    display: block;
    padding: .4rem .65rem;
    color: var(--ally-color-text);
    font-size: .84rem;
  }
  .docs-nav-list {
    display: grid;
    gap: .12rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .docs-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-block-size: 2.3rem;
    padding: .42rem .65rem;
    border-radius: var(--ally-radius-sm);
    color: var(--ally-color-muted);
    font-size: .88rem;
    font-weight: 550;
    text-decoration: none;
  }
  .docs-nav-link:hover,
  .docs-nav-link[aria-current="page"] {
    background: var(--ally-color-primary-soft);
    color: var(--ally-color-primary-active);
  }
  .docs-nav-link[aria-current="page"] { font-weight: 800; }
  .docs-nav-class {
    color: var(--ally-color-subtle);
    font-family: var(--ally-font-mono);
    font-size: .67rem;
  }

  .docs-main {
    min-inline-size: 0;
    padding: clamp(1.25rem, 4vw, 3rem) var(--ally-gutter) 5rem;
  }
  .docs-main-inner {
    inline-size: min(100%, 63rem);
    margin-inline: auto;
  }

  .docs-toc {
    display: none;
    position: sticky;
    inset-block-start: calc(var(--docs-header-height) + 1rem);
    align-self: start;
    max-block-size: calc(100vh - var(--docs-header-height) - 2rem);
    overflow-y: auto;
    padding: 1rem;
  }
  .docs-toc h2 {
    margin: 0 0 .75rem;
    font-size: .78rem;
    color: var(--ally-color-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .docs-toc ol {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding-inline-start: 1rem;
  }
  .docs-toc a {
    color: var(--ally-color-muted);
    font-size: .82rem;
    text-decoration: none;
  }
  .docs-toc a:hover { color: var(--ally-color-primary); }

  .docs-mobile-overlay {
    position: fixed;
    z-index: 1800;
    inset: var(--docs-header-height) 0 0;
    background: var(--ally-color-overlay);
  }

  .docs-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2.5rem, 7vw, 5.5rem);
    border: 1px solid var(--ally-color-border);
    border-radius: var(--ally-radius-xl);
    background:
      radial-gradient(circle at 85% 15%, rgb(255 255 255 / 20%), transparent 13rem),
      var(--ally-gradient-brand);
    color: #fff;
    box-shadow: var(--ally-shadow-lg);
  }
  .docs-hero h1,
  .docs-hero h2,
  .docs-hero strong { color: #fff; }
  .docs-hero p { color: rgb(255 255 255 / 86%); font-size: clamp(1.05rem, 2vw, 1.3rem); }
  .docs-hero code { background: rgb(255 255 255 / 14%); color: #fff; }
  .docs-hero .ally-badge { background: rgb(255 255 255 / 14%); color: #fff; }
  .docs-hero .ally-btn-primary {
    border-color: #fff;
    background: #fff;
    color: #3028a1;
  }
  .docs-hero .ally-btn-primary:hover { background: #f0efff; color: #211a8c; }
  .docs-hero .ally-btn-secondary {
    border-color: rgb(255 255 255 / 58%);
    background: transparent;
    color: #fff;
  }

  .docs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-block-end: .8rem;
    color: var(--ally-color-primary-active);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .docs-lead {
    max-inline-size: 56rem;
    color: var(--ally-color-muted);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
  }

  .docs-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-block: 1.2rem;
  }

  .docs-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
    margin-block: 2rem;
  }
  .docs-stat {
    padding: 1.15rem;
    border: 1px solid var(--ally-color-border);
    border-radius: var(--ally-radius);
    background: var(--ally-color-bg);
    box-shadow: var(--ally-shadow-xs);
  }
  .docs-stat strong {
    display: block;
    color: var(--ally-color-primary-active);
    font-size: 1.8rem;
    line-height: 1.1;
  }
  .docs-stat span { color: var(--ally-color-muted); font-size: .84rem; }

  .docs-feature-grid,
  .docs-component-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
  }
  .docs-component-card {
    position: relative;
    min-block-size: 11rem;
  }
  .docs-component-card h2,
  .docs-component-card h3 { margin-block: 0; font-size: 1.05rem; }
  .docs-component-card p { margin-block: 0; color: var(--ally-color-muted); font-size: .9rem; }
  .docs-component-card code { align-self: start; }
  .docs-component-card a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .docs-category {
    padding-block: 1.5rem;
    border-block-start: 1px solid var(--ally-color-border);
  }
  .docs-category:first-of-type { border-block-start: 0; }
  .docs-category-header {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: .75rem;
    margin-block-end: 1rem;
  }
  .docs-category-header h2 { margin: 0; }
  .docs-category-count { color: var(--ally-color-muted); font-size: .88rem; }

  .docs-preview {
    position: relative;
    display: grid;
    gap: 1rem;
    min-block-size: 10rem;
    padding: clamp(1rem, 4vw, 2rem);
    overflow: visible;
    border: 1px solid var(--ally-color-border);
    border-radius: var(--ally-radius-lg) var(--ally-radius-lg) 0 0;
    background:
      linear-gradient(45deg, rgb(79 70 216 / 3%) 25%, transparent 25%),
      linear-gradient(-45deg, rgb(79 70 216 / 3%) 25%, transparent 25%),
      var(--ally-color-bg);
    background-position: 0 0, 12px 12px;
    background-size: 24px 24px;
  }
  .docs-preview > * { max-inline-size: 100%; }
  .docs-preview .ally-hero { padding: clamp(1.5rem, 5vw, 3rem); }
  .docs-preview .ally-cookie,
  .docs-preview .ally-chat,
  .docs-preview .ally-fab,
  .docs-preview .ally-back-top,
  .docs-preview .ally-sticky {
    position: static;
    inset: auto;
    max-inline-size: 100%;
  }
  .docs-preview .ally-chat-panel { inline-size: min(100%, 24rem); }
  .docs-preview .ally-dropdown-menu,
  .docs-preview .ally-popover-panel,
  .docs-preview .ally-hamburger-menu,
  .docs-preview .ally-sidebar-panel { position: absolute; }
  .docs-preview .ally-footer { margin-block-start: 0; }
  .docs-preview .ally-section { padding-block: 1.5rem; }

  .docs-code-wrap {
    position: relative;
    overflow: hidden;
    border: 1px solid #2c3148;
    border-block-start: 0;
    border-radius: 0 0 var(--ally-radius-lg) var(--ally-radius-lg);
    background: var(--docs-code-bg);
  }
  .docs-code-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .75rem;
    border-block-end: 1px solid #2c3148;
    color: #b8bfd9;
    font-size: .75rem;
  }
  .docs-code {
    max-block-size: 32rem;
    margin: 0;
    overflow: auto;
    padding: 1rem;
    background: transparent;
    color: var(--docs-code-text);
    font-size: .84rem;
    line-height: 1.65;
    tab-size: 2;
  }
  .docs-copy {
    min-block-size: 2.15rem;
    padding: .3rem .65rem;
    border: 1px solid #555c7b;
    border-radius: .45rem;
    background: #20243a;
    color: #fff;
    font-size: .75rem;
  }
  .docs-copy:hover { background: #2d3250; }

  .docs-callout {
    padding: 1rem 1.15rem;
    border: 1px solid var(--ally-color-border);
    border-inline-start: .35rem solid var(--ally-color-primary);
    border-radius: var(--ally-radius);
    background: var(--ally-color-primary-soft);
  }
  .docs-callout-warning { border-inline-start-color: var(--ally-color-warning); background: var(--ally-color-warning-soft); }
  .docs-callout-danger { border-inline-start-color: var(--ally-color-danger); background: var(--ally-color-danger-soft); }
  .docs-callout > :first-child { margin-block-start: 0; }
  .docs-callout > :last-child { margin-block-end: 0; }

  .docs-contract {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--ally-color-border);
    border-radius: var(--ally-radius);
  }
  .docs-contract-row {
    display: grid;
    grid-template-columns: minmax(8.5rem, .28fr) 1fr;
    border-block-end: 1px solid var(--ally-color-border);
  }
  .docs-contract-row:last-child { border-block-end: 0; }
  .docs-contract-row dt,
  .docs-contract-row dd {
    margin: 0;
    padding: .8rem 1rem;
  }
  .docs-contract-row dt {
    background: var(--ally-color-surface);
    color: var(--ally-color-text);
    font-weight: 800;
  }
  .docs-contract-row dd { color: var(--ally-color-muted); }

  .docs-pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-block-start: 3rem;
  }
  .docs-pager a {
    display: grid;
    gap: .2rem;
    padding: 1rem;
    border: 1px solid var(--ally-color-border);
    border-radius: var(--ally-radius);
    color: var(--ally-color-text);
    text-decoration: none;
  }
  .docs-pager a:hover { border-color: var(--ally-color-primary); background: var(--ally-color-primary-soft); }
  .docs-pager small { color: var(--ally-color-muted); }
  .docs-pager .docs-next { text-align: end; }

  .docs-token-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .75rem;
  }
  .docs-token {
    overflow: hidden;
    border: 1px solid var(--ally-color-border);
    border-radius: var(--ally-radius);
  }
  .docs-swatch { min-block-size: 4.5rem; }
  .docs-token-info { padding: .75rem; }
  .docs-token-info code { display: block; margin-block-end: .25rem; }

  .docs-demo-outline {
    padding: 1rem;
    border: 1px dashed var(--ally-color-primary);
    border-radius: var(--ally-radius);
    background: var(--ally-color-primary-soft);
  }
  .docs-relative { position: relative; display: inline-flex; }
  .docs-position-static { position: static !important; inset: auto !important; }
  .docs-visually-muted { opacity: .72; }

  .docs-search-results {
    position: fixed;
    z-index: 2200;
    inset-block-start: calc(var(--docs-header-height) - .25rem);
    inset-inline: var(--ally-gutter);
    max-inline-size: 40rem;
    max-block-size: min(70vh, 34rem);
    overflow-y: auto;
    margin-inline: auto;
    padding: .5rem;
    border: 1px solid var(--ally-color-border);
    border-radius: var(--ally-radius);
    background: var(--ally-color-bg);
    box-shadow: var(--ally-shadow-lg);
  }
  .docs-search-results ul { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
  .docs-search-results a {
    display: grid;
    gap: .1rem;
    padding: .7rem;
    border-radius: var(--ally-radius-sm);
    color: var(--ally-color-text);
    text-decoration: none;
  }
  .docs-search-results a:hover,
  .docs-search-results a:focus { background: var(--ally-color-primary-soft); }
  .docs-search-results small { color: var(--ally-color-muted); }

  .docs-table-wrap { overflow-x: auto; }
  .docs-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: .9rem;
  }
  .docs-table th,
  .docs-table td {
    padding: .75rem;
    border-block-end: 1px solid var(--ally-color-border);
    text-align: start;
    vertical-align: top;
  }
  .docs-table th { background: var(--ally-color-surface); color: var(--ally-color-text); }

  @media (min-width: 42rem) {
    .docs-version { display: inline-flex; }
  }

  @media (min-width: 64rem) {
    .docs-layout { grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr); }
    .docs-sidebar {
      position: sticky;
      z-index: 10;
      inset-block-start: var(--docs-header-height);
      inline-size: auto;
      block-size: calc(100vh - var(--docs-header-height));
      transform: none;
      box-shadow: none;
    }
    .docs-sidebar-close,
    .docs-mobile-menu,
    .docs-mobile-overlay { display: none !important; }
  }

  @media (min-width: 84rem) {
    .docs-layout { grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr) var(--docs-toc-width); }
    .docs-toc { display: block; }
  }

  @media (max-width: 47.99rem) {
    .docs-header-actions a { display: none; }
    .docs-header-actions { margin-inline-start: auto; }
    .docs-search { order: 3; flex-basis: 100%; max-inline-size: none; }
    .docs-sidebar { inset-block: 0; z-index: 3100; }
    .docs-mobile-overlay { inset: 0; z-index: 3000; }
    .docs-site-header { position: relative; }
    .docs-header-row { flex-wrap: wrap; }
    .docs-main { padding-inline: 1rem; }
    .docs-hero { border-radius: var(--ally-radius-lg); }
    .docs-contract-row { grid-template-columns: 1fr; }
    .docs-contract-row dt { border-block-end: 1px solid var(--ally-color-border); }
    .docs-pager { grid-template-columns: 1fr; }
    .docs-pager .docs-next { text-align: start; }
  }

  @media print {
    .docs-site-header,
    .docs-sidebar,
    .docs-toc,
    .docs-code-toolbar,
    .docs-pager { display: none !important; }
    .docs-layout { display: block; }
    .docs-main { padding: 0; }
    .docs-preview,
    .docs-code-wrap,
    .docs-contract { break-inside: avoid; }
  }
}

@layer ally.components {
  .docs-showcase-list { display: grid; gap: 1.5rem; }
  .docs-showcase-item {
    overflow: visible;
    border: 1px solid var(--ally-color-border);
    border-radius: var(--ally-radius-lg);
    background: var(--ally-color-bg);
    box-shadow: var(--ally-shadow-xs);
  }
  .docs-showcase-head {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-block-end: 1px solid var(--ally-color-border);
  }
  .docs-showcase-head h3 { margin: 0; font-size: 1.1rem; }
  .docs-showcase-head p { margin: .25rem 0 0; color: var(--ally-color-muted); font-size: .88rem; }
  .docs-showcase-item .docs-preview {
    border: 0;
    border-radius: 0 0 var(--ally-radius-lg) var(--ally-radius-lg);
  }
  .docs-showcase-item[hidden] { display: none !important; }
  .docs-filter-bar {
    position: sticky;
    z-index: 50;
    inset-block-start: calc(var(--docs-header-height) + .5rem);
    padding: .8rem;
    border: 1px solid var(--ally-color-border);
    border-radius: var(--ally-radius);
    background: color-mix(in srgb, var(--ally-color-bg) 90%, transparent);
    box-shadow: var(--ally-shadow-sm);
    backdrop-filter: blur(12px);
  }
  .docs-filter-bar input { flex: 1 1 16rem; }
  .docs-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2rem;
    min-block-size: 2rem;
    border-radius: var(--ally-radius-pill);
    background: var(--ally-color-primary-soft);
    color: var(--ally-color-primary-active);
    font-weight: 800;
  }
}
@layer ally.components { .docs-preview > .ally-btn, .docs-preview > .ally-cta, .docs-preview > .ally-dropdown, .docs-preview > .ally-popover, .docs-preview > .ally-hamburger, .docs-preview > .ally-sidebar, .docs-preview > .ally-offcanvas, .docs-preview > .ally-actions { justify-self: start; } }