@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Gujarati", "Nirmala UI", "Kohinoor Devanagari", "Shobhika", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", "Noto Sans Devanagari", "Nirmala UI", monospace;
    --font-display: "Avenir Next", "Century Gothic", "Segoe UI Variable Display", "Segoe UI Semibold", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, var(--font-sans);
    --text-2xs: .6875rem;
    --text-xs: .75rem;
    --text-sm: .8125rem;
    --text-cp: .875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
    --text-2xl: clamp(1.3125rem, 1.16rem + .72vw, 1.6875rem);
    --text-3xl: clamp(1.75rem, 1.42rem + 1.55vw, 2.5rem);
    --leading-flat: 1.15;
    --leading-tight: 1.28;
    --leading-body: 1.6;
    --leading-loose: 1.72;
    --tracking-tight: -.018em;
    --tracking-wide: .055em;
    --measure-body: 68ch;
    --measure-lede: 56ch;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 3rem;
    --space-10: 4rem;
    --space-11: 5rem;
    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-pill: 999px;
    --brand-npm: #cb3837;
    --brand-pypi: #306998;
    --brand-pub: #0175c2;
    --brand-packagist: #a35a0b;
    --bw-hair: 1px;
    --bw-thick: 2px;
    --bw-marker: 3px;
    --z-raised: 1;
    --z-sticky: 20;
    --z-backdrop: 40;
    --z-drawer: 50;
    --z-header: 60;
    --z-toast: 90;
    --z-skip: 100;
    --ease-out: cubic-bezier(.22, .68, .32, 1);
    --dur-fast: 110ms;
    --dur-base: 180ms;
    --header-h: 3.5rem;
    --sidebar-w: 17.25rem;
    --content-max: 56rem;
    --gutter: var(--space-6)
  }

  [data-theme="light"] {
    color-scheme: light;
    --surface-page: #faf9f7;
    --surface-raised: #ffffff;
    --surface-sunken: #f1efeb;
    --surface-header: rgb(255 255 255 / .86);
    --surface-drawer: #ffffff;
    --text-primary: #191714;
    --text-secondary: #4a443c;
    --text-muted: #6a6257;
    --text-inverse: #faf9f7;
    --border-subtle: #e3ded6;
    --border-default: #d3ccc0;
    --border-control: #8a8378;
    --link: #0a5a83;
    --link-hover: #073f5c;
    --accent: #a94e1d;
    --accent-ink: #8c3f14;
    --accent-soft: #f7e3d5;
    --accent-contrast: #ffffff;
    --accent-2: #106349;
    --accent-2-ink: #0d5940;
    --accent-2-soft: #d9ede4;
    --gold: #a16207;
    --gold-soft: #f5ead1;
    --gradient-text: linear-gradient(100deg, var(--accent-ink), var(--accent-2-ink));
    --gradient-brand: linear-gradient(120deg, var(--accent), var(--gold) 52%, var(--accent-2));
    --hero-glow: radial-gradient(58% 60% at 84% 6%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%), radial-gradient(40% 45% at 8% 90%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 70%);
    --info: #0a5a83;
    --info-soft: #e3f0f7;
    --warn: #7d5000;
    --warn-ink: #6e4600;
    --warn-soft: #faeecd;
    --danger: #96181d;
    --danger-soft: #fae1e1;
    --focus: #0a5a83;
    --overlay: rgb(25 23 20 / .42);
    --table-head-bg: #f1efeb;
    --table-head-bg: color-mix(in srgb, #191714 6%, transparent);
    --table-stripe: #f6f4f0;
    --table-stripe: color-mix(in srgb, #191714 3%, transparent);
    --table-shadow: rgb(25 23 20 / .14);
    --code-bg: #1b2029;
    --code-fg: #e6eaf0;
    --code-muted: #a8b3c4;
    --code-border: #2f3743;
    --code-chrome: #232a35;
    --shadow-xs: 0 1px 1px rgb(28 24 18 / .04);
    --shadow-sm: 0 1px 2px rgb(28 24 18 / .06), 0 1px 3px rgb(28 24 18 / .05);
    --shadow-md: 0 8px 24px -8px rgb(28 24 18 / .18);
    --shadow-lg: 0 24px 48px -16px rgb(28 24 18 / .28);
    --shadow-xl: 0 40px 80px -28px rgb(28 24 18 / .24), 0 2px 6px rgb(28 24 18 / .07)
  }

  [data-theme="dark"] {
    color-scheme: dark;
    --surface-page: #0f1216;
    --surface-raised: #161a20;
    --surface-sunken: #1c222b;
    --surface-header: rgb(15 18 22 / .86);
    --surface-drawer: #13171c;
    --text-primary: #e9e7e2;
    --text-secondary: #bcb6ac;
    --text-muted: #918a7f;
    --text-inverse: #0f1216;
    --border-subtle: #242b34;
    --border-default: #2f3744;
    --border-control: #6d7684;
    --link: #7cc7ee;
    --link-hover: #a5dbf7;
    --accent: #eb9a5e;
    --accent-ink: #eb9a5e;
    --accent-soft: #33230f;
    --accent-contrast: #1c1206;
    --accent-2: #5fd3a0;
    --accent-2-ink: #5fd3a0;
    --accent-2-soft: #132a20;
    --gold: #d9a441;
    --gold-soft: #2c2313;
    --gradient-text: linear-gradient(100deg, var(--accent), var(--accent-2));
    --gradient-brand: linear-gradient(120deg, var(--accent), var(--gold) 52%, var(--accent-2));
    --hero-glow: radial-gradient(58% 60% at 84% 6%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%), radial-gradient(40% 45% at 8% 90%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%);
    --info: #6fbde8;
    --info-soft: #16242e;
    --warn: #e5b656;
    --warn-ink: #e5b656;
    --warn-soft: #2c2513;
    --danger: #f2777e;
    --danger-soft: #331a1c;
    --focus: #7cc7ee;
    --overlay: rgb(0 0 0 / .62);
    --table-head-bg: #1c222b;
    --table-head-bg: color-mix(in srgb, #e9e7e2 7%, transparent);
    --table-stripe: #141920;
    --table-stripe: color-mix(in srgb, #e9e7e2 3.5%, transparent);
    --table-shadow: rgb(0 0 0 / .5);
    --code-bg: #0a0d11;
    --code-fg: #e6eaf0;
    --code-muted: #98a4b5;
    --code-border: #232a34;
    --code-chrome: #151b23;
    --shadow-xs: 0 1px 1px rgb(0 0 0 / .3);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-md: 0 10px 28px -10px rgb(0 0 0 / .7);
    --shadow-lg: 0 28px 56px -20px rgb(0 0 0 / .8);
    --shadow-xl: 0 48px 96px -32px rgb(0 0 0 / .85), 0 2px 8px rgb(0 0 0 / .5)
  }
}

@layer reset {

  * {

    &,
    &::before,
    &::after {
      box-sizing: border-box;
    }
  }

  :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
    margin: 0
  }

  :where(ul, ol) {
    margin: 0;
    padding: 0
  }

  :where(img, svg, video) {
    display: block;
    max-inline-size: 100%
  }

  :where(button, input, select, textarea) {
    font: inherit;
    color: inherit
  }

  :where(button) {
    background: none;
    border: 0
  }
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--header-h) + var(--space-5))
  }

  body {
    margin: 0;
    min-block-size: 100svb;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    color: var(--text-primary);
    background-color: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    overflow-x: clip;
  }

  :target,
  [id] {
    scroll-margin-block-start: calc(var(--header-h) + var(--space-5))
  }

  /* Keyboard modality focus — never remove without a visible replacement. */
  :focus-visible {
    outline: var(--bw-thick) solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);

    /* Preserve visible focus for skip-link activation (any modality). */
    .skip-link:focus:not(&) {
      outline: var(--bw-thick) solid var(--focus);
      outline-offset: 2px;
    }
  }


  a {
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;

    &:hover {
      color: var(--link-hover)
    }
  }

  p {
    max-inline-size: var(--measure-body)
  }

  :is(p, ul, ol)+p,
  p+ :is(ul, ol) {
    margin-block-start: var(--space-4)
  }

  :is(ul, ol) {
    max-inline-size: var(--measure-body);
    padding-inline-start: 1.35em;

    /* combinator: adjacent sibling list items */
    & li+li {
      margin-block-start: var(--space-2)
    }
  }

  strong {
    font-weight: 650;
    color: var(--text-primary)
  }

  :is(h1, h2, h3, h4) {
    font-weight: 640;
    line-height: var(--leading-tight);
    color: var(--text-primary);
    text-wrap: balance
  }

  :is(h1, h2, h3) {
    font-family: var(--font-display)
  }

  :is(h1, h2) {
    letter-spacing: var(--tracking-tight)
  }

  h1 {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: var(--leading-flat)
  }

  h2 {
    font-size: var(--text-2xl);
    font-weight: 680
  }

  h3 {
    font-size: var(--text-xl);
    font-weight: 660
  }

  h4 {
    font-size: var(--text-base);
    color: var(--text-secondary)
  }

  :is(code, kbd, samp) {
    font-family: var(--font-mono);
    font-size: .9em;
    font-variant-ligatures: none
  }

  :not(pre)>code {
    padding: .12em .36em;
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-xs);
    background-color: var(--surface-sunken);
    color: var(--text-primary);
    overflow-wrap: anywhere
  }

  kbd {
    padding: .1em .4em;
    border: var(--bw-hair) solid var(--border-default);
    border-block-end-width: var(--bw-thick);
    border-radius: var(--radius-xs);
    background-color: var(--surface-sunken);
    font-size: var(--text-xs);
    color: var(--text-secondary)
  }

  pre {
    --focus: #7cc7ee;
    margin: 0;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background-color: var(--code-bg);
    color: var(--code-fg);
    font-family: var(--font-mono);
    font-size: var(--text-cp);
    line-height: 1.62;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    tab-size: 2;

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

  table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-cp);
    font-variant-numeric: tabular-nums
  }

  ::selection {
    background-color: var(--accent-soft);
    color: var(--text-primary)
  }
}

@layer layout {
  .app {
    display: grid;
    grid-template-rows: var(--header-h) 1fr;
    min-block-size: 100svb
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    block-size: var(--header-h);
    padding-inline: var(--space-4);
    border-block-end: var(--bw-hair) solid var(--border-subtle);
    background-color: var(--surface-header);

    @supports (backdrop-filter:blur(1px)) {
      backdrop-filter: saturate(1.4) blur(12px);
    }
  }

  .shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    align-items: start;

    @media (max-width:60rem) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .content-col {
    min-inline-size: 0
  }

  .content {
    padding: var(--space-8) var(--gutter) var(--space-10);
    max-width: 1600px;
    margin-inline: auto;
  }

  .content-inner {
    container-type: inline-size;
    container-name: doc;
    max-inline-size: 100dvw;
    min-width: fit-content;

    margin-inline: auto;

    footer & {
      display: flex;
      justify-content: center;
    }
  }

  .sidebar {
    position: sticky;
    inset-block-start: var(--header-h);
    block-size: calc(100svb - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-4) var(--space-3) var(--space-9);
    border-inline-end: var(--bw-hair) solid var(--border-subtle);
    background-color: var(--surface-drawer);
    scrollbar-width: thin;

    @media (max-width:60rem) {
      position: fixed;
      inset-block-start: var(--header-h);
      inset-inline-start: 0;
      z-index: var(--z-drawer);
      inline-size: min(20rem, 86vw);
      border-inline-end: var(--bw-hair) solid var(--border-default);
      box-shadow: var(--shadow-lg);
      translate: -102% 0;
      visibility: hidden;
      transition: translate var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);

      &.is-open {
        translate: 0 0;
        visibility: visible;
        transition: translate var(--dur-base) var(--ease-out), visibility 0s;
      }
    }
  }

  .backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    background-color: var(--overlay);

    &[hidden] {
      display: none
    }
  }

  @media (width <=60rem) {
    :root {
      --gutter: var(--space-4)
    }



    body.is-nav-open {
      overflow: hidden
    }
  }

  @media (width <=30rem) {
    :root {
      --gutter: var(--space-3)
    }
  }
}

@layer components {
  .skip-link {
    position: fixed;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    z-index: var(--z-skip);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background-color: var(--accent);
    color: var(--accent-contrast);
    font-size: var(--text-cp);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    translate: 0 -200%;

    &:focus {
      translate: 0 0;
      color: var(--accent-contrast);
      outline-color: var(--text-primary)
    }
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-inline-size: 0;
    color: var(--text-primary);
    text-decoration: none;

    &:hover {
      color: var(--text-primary)
    }

    .brand-mark {
      display: grid;
      place-items: center;
      inline-size: 2rem;
      block-size: 2rem;
      flex: 0 0 auto;
      border-radius: var(--radius-sm);
      background-color: var(--accent);
      color: var(--accent-contrast);
      font-size: var(--text-cp);
      font-weight: 700;
      line-height: 1
    }

    .brand-text {
      min-inline-size: 0
    }

    .brand-name {
      display: block;
      font-size: var(--text-base);
      font-weight: 680;
      letter-spacing: var(--tracking-tight);
      line-height: 1.2
    }

    .brand-tag {
      display: block;
      font-size: var(--text-xs);
      color: var(--text-muted);
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto
  }

  .icon-btn {
    display: inline-grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: 0 0 auto;
    border: var(--bw-hair) solid var(--border-default);
    border-radius: var(--radius-md);
    background-color: var(--surface-raised);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);

    &:hover {
      border-color: var(--border-control);
      background-color: var(--surface-sunken);
      color: var(--text-primary)
    }

    & .icon {
      inline-size: 1.125rem;
      block-size: 1.125rem;
      grid-area: 1 / 1
    }
  }

  @media (width >=60.0625rem) {
    .menu-btn {
      display: none
    }
  }

  /* :is() groups hide rules; combinators attach state/theme context */
  :is([data-theme="light"] .icon-sun,
    [data-theme="dark"] .icon-moon,
    .menu-btn[aria-expanded="false"] .icon-close,
    .menu-btn[aria-expanded="true"] .icon-menu) {
    display: none
  }

  .sidebar-search {
    position: sticky;
    inset-block-start: calc(var(--space-4) * -1);
    z-index: var(--z-sticky);
    margin-block: calc(var(--space-4) * -1) var(--space-4);
    padding-block: var(--space-4) var(--space-3);
    background-color: var(--surface-drawer);
    border-block-end: var(--bw-hair) solid var(--border-subtle);

    & label {
      display: block;
      margin-block-end: var(--space-2);
      margin-inline-start: var(--space-1);
      font-size: var(--text-2xs);
      font-weight: 700;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--text-muted)
    }
  }

  .search-input {
    inline-size: 100%;
    padding: .4rem .6rem;
    border: var(--bw-hair) solid var(--border-control);
    border-radius: var(--radius-sm);
    background-color: var(--surface-page);
    color: var(--text-primary);
    font-size: var(--text-cp);

    &::placeholder {
      color: var(--text-muted);
      opacity: 1
    }

    &:focus-visible {
      outline-offset: 1px;
      border-color: var(--focus)
    }
  }

  .nav-group {

    /* combinator: adjacent sibling */
    &+& {
      margin-block-start: var(--space-6)
    }

    &.is-filtered-out {
      display: none
    }

    .nav-group-title {
      margin: 0 0 var(--space-2) var(--space-3);
      font-size: var(--text-2xs);
      font-weight: 700;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--text-muted)
    }
  }

  .nav-list {
    list-style: none;
    max-inline-size: none;
    margin: 0;
    padding: 0;

    /* combinator: adjacent sibling */
    & li+li {
      margin-block-start: 1px
    }

    /* parent selector: hide list items whose only link is filtered out */
    & li:has(> a.is-hidden) {
      display: none
    }

    & a {
      position: relative;
      display: block;
      padding: .3rem .8rem .3rem .6rem;
      border-inline-start: var(--bw-thick) solid transparent;
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      color: var(--text-secondary);
      font-size: var(--text-cp);
      text-decoration: none;
      transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);

      &:hover {
        background-color: var(--surface-sunken);
        color: var(--text-primary);
        text-decoration: none
      }

      &[aria-current="location"] {
        border-inline-start-color: var(--accent);
        background-color: var(--accent-soft);
        color: var(--text-primary);
        font-weight: 640;

        &::after {
          content: "";
          position: absolute;
          inset-inline-end: .65rem;
          inset-block-start: 50%;
          inline-size: .34rem;
          block-size: .34rem;
          border-radius: 50%;
          background: var(--accent-2);
          transform: translateY(-50%)
        }
      }

      &.is-hidden {
        display: none
      }
    }
  }

  .nav-empty {
    display: none;
    margin-inline: var(--space-3);
    font-size: var(--text-cp);
    color: var(--text-muted);

    &.is-visible {
      display: block
    }
  }

  .hero {
    position: relative;
    z-index: 0;
    margin-block-end: var(--space-9);
    padding-block: var(--space-3) var(--space-8);
    border-block-end: var(--bw-hair) solid var(--border-subtle);
    overflow: clip;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1
    }

    .hero-watermark {
      position: absolute;
      inset-block-start: -3.5rem;
      inset-inline-end: -1.5rem;
      z-index: 1;
      font-family: var(--font-sans);
      font-size: min(26rem, 46vw);
      line-height: 1;
      color: var(--text-primary);
      opacity: .045;
      user-select: none
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-8);
      align-items: center
    }

    @container doc (min-width:46rem) {
      .hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: var(--space-9)
      }
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: .2rem .75rem .2rem .6rem;
      border: var(--bw-hair) solid color-mix(in srgb, var(--accent) 30%, var(--border-subtle));
      border-radius: var(--radius-pill);
      background-color: var(--accent-soft);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--accent-ink)
    }

    & h1 {
      margin-block-start: var(--space-4)
    }
  }

  .live-dot {
    inline-size: .4rem;
    block-size: .4rem;
    border-radius: 50%;
    background-color: var(--accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
    animation: pulse-ring 2.2s ease infinite;

    @media (prefers-reduced-motion:reduce) {
      animation: none;
    }
  }

  @keyframes pulse-ring {

    0%,
    100% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent)
    }

    55% {
      box-shadow: 0 0 0 6px transparent
    }
  }

  .text-gradient {
    color: var(--accent-ink);

    [data-theme="dark"] & {
      color: var(--accent);
    }

    @supports (background-clip:text) or (-webkit-background-clip:text) {
      background-image: var(--gradient-text);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }

    @media (forced-colors:active) {
      background: none;
      -webkit-text-fill-color: currentColor;
      color: CanvasText;
    }
  }

  .hero-lede {
    margin-block-start: var(--space-4);
    max-inline-size: var(--measure-lede);
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--text-secondary)
  }

  .meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    max-inline-size: none;
    margin-block-start: var(--space-6);
    padding: 0;
    list-style: none;

    & li+li {
      margin-block-start: 0
    }
  }

  .pill {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: .15rem .6rem;
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background-color: var(--surface-raised);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;

    & strong {
      font-weight: 680;
      color: var(--text-primary)
    }
  }

  .eco-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .7rem .2rem .3rem;
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background-color: var(--surface-raised);
    box-shadow: var(--shadow-xs);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);

    &:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm)
    }
  }

  .eco-badge-tag {
    padding: .1rem .5rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: .03em;
    color: #fff;

    /* compound: parent modifier + child (descendant combinator via nesting) */
    .eco-badge-npm & {
      background-color: var(--brand-npm)
    }

    .eco-badge-pypi & {
      background-color: var(--brand-pypi)
    }

    .eco-badge-pub & {
      background-color: var(--brand-pub)
    }

    .eco-badge-packagist & {
      background-color: var(--brand-packagist)
    }
  }

  .pill-accent {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-subtle));
    background-color: var(--accent-soft);
    color: var(--accent-ink);

    & strong {
      color: var(--accent-ink)
    }
  }

  .demo-card {
    position: relative;
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background-color: var(--surface-raised);
    box-shadow: var(--shadow-xl);
    overflow: clip;

    &::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      block-size: 3px;
      background-image: var(--gradient-brand)
    }
  }

  .demo-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background-color: var(--code-chrome)
  }

  .demo-dot {
    inline-size: .6rem;
    block-size: .6rem;
    border-radius: 50%;
    flex: 0 0 auto;

    &:nth-child(1) {
      background-color: #e5604c;
    }

    &:nth-child(2) {
      background-color: #e0a049;
    }

    &:nth-child(3) {
      background-color: #69b465;
    }
  }

  .demo-title {
    margin-inline-start: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--code-muted)
  }

  .live-pill {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7fc784;

    .live-dot {
      background-color: #7fc784;
      box-shadow: 0 0 0 0 rgb(127 199 132 / .5);
    }
  }

  .demo-body {
    padding: var(--space-5)
  }

  .demo-label {
    display: block;
    margin-block-end: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted)
  }

  .demo-input {
    display: block;
    inline-size: 100%;
    padding: .6rem .8rem;
    border: var(--bw-hair) solid var(--border-default);
    border-radius: var(--radius-md);
    background-color: var(--surface-sunken);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-lg);

    &:focus-visible {
      outline-offset: 1px
    }
  }

  .demo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
    padding: 0;
    list-style: none;
    max-inline-size: none;

    li {
      margin: 0;
    }
  }

  .chip-sample {
    padding: .2rem .65rem;
    border: var(--bw-hair) solid var(--border-default);
    border-radius: var(--radius-pill);
    background: none;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);

    &:hover {
      border-color: var(--accent);
      background-color: var(--accent-soft);
      color: var(--accent-ink)
    }
  }

  .demo-out {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-4)
  }

  .demo-out-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: var(--bw-hair) solid transparent;

    &.lang-deva {
      background-color: var(--accent-soft);
      border-color: color-mix(in srgb, var(--accent) 25%, transparent);

      .demo-out-label {
        color: var(--accent-ink)
      }
    }

    &.lang-gujr {
      background-color: var(--accent-2-soft);
      border-color: color-mix(in srgb, var(--accent-2) 25%, transparent);

      .demo-out-label {
        color: var(--accent-2-ink)
      }
    }

    .demo-out-label {
      flex: 0 0 auto;
      inline-size: 5.5rem;
      font-family: var(--font-mono);
      font-size: var(--text-2xs);
      letter-spacing: .08em;
      text-transform: uppercase
    }
  }

  .demo-out-text {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    min-block-size: 1.4em;
    overflow-wrap: anywhere;

    &.flash {
      animation: demo-out-flash .4s var(--ease-out);

      @media (prefers-reduced-motion:reduce) {
        animation: none;
      }
    }
  }

  @keyframes demo-out-flash {
    from {
      opacity: .25;
      translate: 0 3px
    }

    to {
      opacity: 1;
      translate: 0 0
    }
  }


  .demo-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-4)
  }

  .demo-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-cp);
    color: var(--text-secondary);
    cursor: pointer;

    & input {
      position: absolute;
      opacity: 0;

      /* combinator: adjacent sibling */
      &:checked+.demo-switch-track {
        background-color: var(--accent);

        &::after {
          translate: .85rem 0
        }
      }

      &:focus-visible+.demo-switch-track {
        outline: var(--bw-thick) solid var(--focus);
        outline-offset: 2px
      }
    }

    & code {
      font-size: var(--text-xs)
    }

    .demo-switch-track {
      inline-size: 2rem;
      block-size: 1.15rem;
      border-radius: var(--radius-pill);
      background-color: var(--border-default);
      position: relative;
      flex: 0 0 auto;
      transition: background-color var(--dur-fast) var(--ease-out);

      &::after {
        content: "";
        position: absolute;
        inset-block-start: 2px;
        inset-inline-start: 2px;
        inline-size: .85rem;
        block-size: .85rem;
        border-radius: 50%;
        background-color: var(--surface-raised);
        box-shadow: var(--shadow-xs);
        transition: translate var(--dur-base) var(--ease-out)
      }
    }
  }

  .trailer-chip {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--accent-2-ink);
    background-color: var(--accent-2-soft);
    border: 1px dashed color-mix(in srgb, var(--accent-2) 45%, transparent);
    padding: .15rem .6rem;
    border-radius: var(--radius-pill)
  }

  .demo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
    padding: 0;
    list-style: none;
    max-inline-size: none;

    li {
      margin: 0;
      padding: .15rem .55rem;
      border-radius: var(--radius-xs);
      background-color: var(--surface-sunken);
      font-family: var(--font-mono);
      font-size: var(--text-2xs);
      color: var(--text-muted);
    }
  }


  .doc-section {
    margin-block-end: var(--space-10);

    /* child combinator */
    &>h2 {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--space-3);
      margin-block-end: var(--space-5);
      padding-block-end: var(--space-3);
      border-block-end: var(--bw-hair) solid var(--border-subtle)
    }

    & h3 {
      margin-block: var(--space-8) var(--space-4)
    }

    /* :is() + adjacent sibling combinators for flow spacing */
    &> :is(p, ul, ol, .table-wrap, .callout, .card, .api-block, .code-tabs, pre, .grid-2)+ :is(p, ul, ol) {
      margin-block-start: var(--space-4)
    }

    &> :is(p, ul, ol)+ :is(.table-wrap, .callout, .card, .api-block, .code-tabs, pre, .grid-2) {
      margin-block-start: var(--space-5)
    }

    .card-title {
      margin-block-start: 0
    }
  }

  .sec-num {
    display: inline-flex;
    align-items: center;
    padding: .05rem .55rem;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--accent-ink)
  }

  .section-lead {
    max-inline-size: var(--measure-body);
    color: var(--text-secondary)
  }

  .heading-anchor {
    margin-inline-start: .4em;
    color: var(--text-muted);
    font-weight: 400;
    text-decoration: none;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);

    /* :is() parent group + child combinator */
    :is(h2, h3):hover>&,
    &:focus-visible {
      opacity: 1
    }

    &:hover {
      color: var(--accent-ink)
    }

    @media (hover:none) {
      opacity: .5
    }
  }

  .grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);

    @container doc (min-width:34rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .card {
    padding: var(--space-5);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--surface-raised);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);

    @media (hover:hover) {
      &:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
      }
    }

    &:is(ul, ol) {
      max-inline-size: none;
      color: var(--text-secondary);
      font-size: var(--text-cp);
    }
  }

  .card-title {
    margin-block: 0 var(--space-3);
    font-size: var(--text-base);
    font-weight: 680;
    letter-spacing: 0
  }


  .callout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--bw-hair) solid var(--border-subtle);
    border-inline-start: var(--bw-marker) solid var(--info);
    border-radius: var(--radius-md);
    background-color: var(--info-soft);
    margin: 1rem 0;
    box-shadow: var(--shadow-xs);

    & p {
      max-inline-size: none;
      color: var(--text-secondary);
      font-size: var(--text-cp)
    }

    .callout-icon {
      inline-size: 1.1rem;
      block-size: 1.1rem;
      margin-block-start: .18rem;
      color: var(--info)
    }

    &.callout-warn {
      border-inline-start-color: var(--warn);
      background-color: var(--warn-soft);

      .callout-icon {
        color: var(--warn-ink)
      }
    }

    &.callout-success {
      border-inline-start-color: var(--accent-2);
      background-color: var(--accent-2-soft);

      .callout-icon {
        color: var(--accent-2-ink)
      }
    }
  }

  .api-block {
    margin-block-end: var(--space-5);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--surface-raised);
    box-shadow: var(--shadow-sm);
    overflow: clip;

    .api-head {
      margin: 0;
      padding: var(--space-3) var(--space-4);
      border-block-end: var(--bw-hair) solid var(--border-subtle);
      border-inline-start: var(--bw-marker) solid var(--accent);
      background-color: var(--surface-sunken);
      font-size: var(--text-cp);
      letter-spacing: 0;

      .doc-section & {
        margin-block-start: 0
      }

      & code {
        padding: 0;
        border: 0;
        background: none;
        font-size: 1em;
        font-weight: 650;
        color: var(--text-primary)
      }
    }

    .api-body {
      padding: var(--space-4);

      /* combinator: adjacent general siblings among children */
      &>*+* {
        margin-block-start: var(--space-4)
      }
    }
  }

  .tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    max-inline-size: none;
    padding: 0;
    list-style: none;

    li+li {
      margin-block-start: 0;
    }
  }

  .tag {
    display: inline-flex;
    align-items: center;
    padding: .1rem .5rem;
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-xs);
    background-color: var(--surface-sunken);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary)
  }

  .tag-ret {
    border-color: color-mix(in srgb, var(--accent-2) 35%, var(--border-subtle));
    background-color: var(--accent-2-soft);
    color: var(--accent-2-ink)
  }

  .tag-dir {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-subtle));
    background-color: var(--accent-soft);
    color: var(--accent-ink)
  }

  .tag-warn {
    border-color: color-mix(in srgb, var(--warn) 35%, var(--border-subtle));
    background-color: var(--warn-soft);
    color: var(--warn-ink)
  }

  .table-wrap {
    position: relative;
    margin-block-end: var(--space-5);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--surface-raised);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    background-image: linear-gradient(to right, var(--surface-raised) 30%, rgb(0 0 0 / 0)), linear-gradient(to left, var(--surface-raised) 30%, rgb(0 0 0 / 0)), linear-gradient(to right, var(--table-shadow), rgb(0 0 0 / 0)), linear-gradient(to left, var(--table-shadow), rgb(0 0 0 / 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 2.5rem 100%, 2.5rem 100%, .9rem 100%, .9rem 100%;
    background-attachment: local, local, scroll, scroll;

    &:focus-visible {
      outline-offset: -2px
    }

    & table {
      min-inline-size: 34rem;
      background-color: transparent
    }
  }

  caption {
    padding: var(--space-3) var(--space-4);
    border-block-end: var(--bw-hair) solid var(--border-subtle);
    background-color: var(--surface-sunken);
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-align: start;
    caption-side: top
  }

  /* :is() groups cell boxes; combinators keep table structure explicit */
  :is(th, td) {
    padding: .55rem .85rem;
    border-block-end: var(--bw-hair) solid var(--border-subtle);
    text-align: start;
    vertical-align: top;

    & code {
      white-space: nowrap
    }
  }

  thead th {
    background-color: var(--table-head-bg);
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap
  }

  tbody {
    & th[scope="row"] {
      font-weight: 620;
      color: var(--text-primary)
    }

    & td {
      color: var(--text-secondary)
    }

    /* descendant combinator: stripe cells inside even rows (not tr:is(th,td)) */
    & tr:nth-child(even) :is(th, td) {
      background-color: var(--table-stripe)
    }

    & tr:last-child :is(th, td) {
      border-block-end: 0
    }
  }

  .code-tabs {
    margin-block-end: var(--space-5);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--surface-raised);
    box-shadow: var(--shadow-sm);
    overflow: clip;

    /* :is() groups nested chrome children */
    & :is(pre, .code-block) {
      border-radius: 0
    }

    .tablist {
      display: flex;
      gap: var(--space-1);
      padding: var(--space-2);
      border-block-end: var(--bw-hair) solid var(--border-subtle);
      background-color: var(--surface-sunken);
      overflow-x: auto;
      scrollbar-width: thin
    }

    .tab {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      flex: 0 0 auto;
      padding: .3rem .7rem;
      border: var(--bw-hair) solid transparent;
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      font-size: var(--text-cp);
      font-weight: 600;
      cursor: pointer;
      transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);

      &:hover {
        background-color: var(--surface-raised);
        color: var(--text-primary)
      }

      &[aria-selected="true"] {
        border-color: var(--border-default);
        background-color: var(--surface-raised);
        color: var(--text-primary);
        box-shadow: var(--shadow-xs)
      }
    }

    .tabpanel {
      display: none;

      &.is-active {
        display: block
      }

      &:focus-visible {
        outline-offset: -3px
      }

      .code-block {
        margin-block-end: 0
      }
    }
  }

  .tab-dot {
    inline-size: .55rem;
    block-size: .55rem;
    border-radius: 50%;
    flex: 0 0 auto;

    &.tab-dot-dart {
      background-image: linear-gradient(135deg, #0175c2, #29b6f6)
    }

    &.tab-dot-js {
      background-color: #f0db4f
    }

    &.tab-dot-py {
      background-image: linear-gradient(135deg, #306998, #ffd43b)
    }

    &.tab-dot-php {
      background-color: #8892bf
    }
  }

  .code-block {
    position: relative;
    margin-block-end: var(--space-5);
    border-radius: var(--radius-lg);
    background-color: var(--code-bg);
    box-shadow: var(--shadow-md);
    overflow: clip;

    /* child combinator */
    &>pre {
      margin: 0;
      border-radius: 0
    }
  }

  .code-toolbar {
    --focus: #7cc7ee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
    border-block-end: var(--bw-hair) solid var(--code-border);
    background-color: var(--code-chrome)
  }

  .code-lang {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--code-muted)
  }

  .tk-com {
    color: #8b96a8;
    font-style: italic
  }

  .tk-str {
    color: #9ece6a
  }

  .tk-kw {
    color: #ff9e64
  }

  .tk-num {
    color: #e0af68
  }

  .tk-fn {
    color: #7dcfff
  }

  .tk-typ {
    color: #5fd3c4
  }

  .code-copy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: .25rem .6rem;
    border: var(--bw-hair) solid var(--code-border);
    border-radius: var(--radius-sm);
    background-color: color-mix(in srgb, var(--code-fg) 8%, transparent);
    color: var(--code-fg);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);

    &:hover {
      background-color: color-mix(in srgb, var(--code-fg) 16%, transparent)
    }

    & .icon {
      inline-size: .85rem;
      block-size: .85rem
    }

    &[data-state="done"] {
      border-color: var(--accent-2);
      color: var(--accent-2)
    }
  }

  .toast {
    position: fixed;
    inset-block-end: var(--space-5);
    inset-inline: var(--space-4);
    z-index: var(--z-toast);
    max-inline-size: max-content;
    margin-inline: auto;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background-color: var(--text-primary);
    color: var(--text-inverse);
    font-size: var(--text-cp);
    text-align: center;
    box-shadow: var(--shadow-md);
    opacity: 0;
    translate: 0 .75rem;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out);

    /* :empty pseudo-class */
    &:empty {
      padding: 0;
      box-shadow: none
    }

    &.is-visible {
      opacity: 1;
      translate: 0 0
    }
  }

  .site-footer {
    border-block-start: var(--bw-hair) solid var(--border-subtle);
    background-color: var(--surface-page);
    color: var(--text-muted);
    padding: 1rem;
    font-size: var(--text-cp);

    /* combinator: adjacent sibling paragraphs */
    & p+p {
      margin-block-start: var(--space-1)
    }
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  * {

    &,
    &::before,
    &::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      transition-delay: 0s !important;
    }
  }

  .sidebar {
    transition: visibility 0s !important
  }
}

@media (forced-colors:active) {
  .nav-list a[aria-current="location"] {
    forced-color-adjust: none;
    background-color: Highlight;
    color: HighlightText
  }

  .tab[aria-selected="true"] {
    border-color: Highlight
  }

  :is(.icon-btn, .card, .api-block, .table-wrap, .code-tabs, .callout, .demo-card, .eco-badge, .pill, .sec-num) {
    border: 1px solid CanvasText
  }

  .hero::before,
  .hero-watermark,
  .demo-card::before {
    display: none
  }
}

@media print {
  :root {
    --header-h: 0
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt
  }

  .site-header,
  .sidebar,
  .backdrop,
  .skip-link,
  .toast,
  .code-toolbar,
  .heading-anchor,
  .tablist,
  .hero::before,
  .hero-watermark,
  .live-pill,
  .live-dot,
  .demo-chips,
  .demo-meta,
  .tab-dot,
  .demo-dot {
    display: none !important
  }

  .eco-badge-tag {
    background: none !important;
    color: #000 !important;
    border: 1px solid #999
  }

  :is(.tk-com, .tk-str, .tk-kw, .tk-num, .tk-fn, .tk-typ) {
    color: #000 !important;
    font-style: normal !important
  }

  .text-gradient {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: #000 !important
  }

  :is(.app, .shell) {
    display: block
  }

  :is(.content, .site-footer) {
    padding: 0
  }

  .content-inner {
    max-inline-size: none
  }

  .tabpanel {
    display: block !important;

    +.tabpanel {
      margin-block-start: .5rem;
    }
  }

  pre,
  .code-block {
    background: #f4f4f4 !important;
    color: #000 !important;
    border: 1px solid #999
  }

  pre {
    white-space: pre-wrap;
    word-break: break-word
  }

  .table-wrap {
    overflow: visible;
    background-image: none;

    table {
      min-inline-size: 0;
    }
  }

  .doc-section,
  .api-block,
  .card,
  .table-wrap,
  .callout,
  .demo-card,
  figure,
  tr {
    break-inside: avoid
  }

  :is(h1, h2, h3) {
    break-after: avoid
  }

  a {
    color: #000;
    text-decoration: underline
  }

  .content a[href^="#"]::after {
    content: " (" attr(href) ")";
    font-size: .85em;
    color: #444
  }
}