/* aepkit.tbelt.online. Layer order is declared in tokens.css, loaded first. */

@font-face {
  /* design-guard-allow: @font-face declares the family name that --font-body references */
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-opsz-normal.woff2") format("woff2-variations");
}

@font-face {
  /* design-guard-allow: @font-face declares the family name that --font-mono references */
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, svg { display: block; max-inline-size: 100%; block-size: auto; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  h1, h2, h3 { text-wrap: balance; }
  p, li, dd { text-wrap: pretty; }
  ul, ol { padding: 0; list-style: none; }
}

@layer base {
  html {
    scroll-padding-block-start: calc(var(--header-height) + var(--space-6));
    scrollbar-color: var(--color-scrollbar) var(--color-ground);
    -webkit-text-size-adjust: 100%;
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    background: var(--color-ground);
    color: var(--color-fg);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    font-optical-sizing: auto;
    font-feature-settings: "cv11", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    caret-color: var(--color-success);
  }

  h1, h2, h3 { color: var(--color-fg-strong); font-weight: var(--weight-semibold); }

  a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: var(--color-border-strong);
    text-decoration-thickness: var(--hairline);
    text-underline-offset: 0.22em;
    transition: text-decoration-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }

  a:hover { text-decoration-color: var(--color-fg-muted); }

  code, pre, kbd { font-family: var(--font-mono); font-variant-ligatures: none; }

  :not(pre) > code:not([class]) {
    font-size: var(--text-inline-code);
    color: var(--color-fg-strong);
    background: var(--color-surface-hover);
    border-radius: var(--radius-xs);
    padding-inline: var(--space-1);
    padding-block: var(--space-0-5);
    white-space: nowrap;
  }

  :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }

  ::selection { background: var(--color-selection); color: var(--color-fg-strong); }

  ::-webkit-scrollbar { inline-size: var(--space-2); block-size: var(--space-2); }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: var(--radius-pill); }
}

@layer layout {
  .container {
    inline-size: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-gutter);
  }

  .section { padding-block: var(--space-section) 0; }

  .section-head {
    display: grid;
    gap: var(--space-4);
    max-inline-size: var(--measure);
    margin-block-end: var(--space-12);
  }

  @media (min-width: 64rem) {
    .section-head--split {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-16);
      align-items: end;
      max-inline-size: none;
      padding-block-end: var(--space-10);
      border-block-end: var(--hairline) solid var(--color-border);
    }
  }
}

@layer components {
  /* Header */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    background: color-mix(in oklch, var(--color-ground) 94%, transparent);
    border-block-end: var(--hairline) solid var(--color-border);
  }

  .site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    min-block-size: var(--header-height);
  }

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

  .brand__mark { inline-size: var(--space-6); block-size: var(--space-6); flex: none; }

  .brand__name {
    font-weight: var(--weight-semibold);
    color: var(--color-fg-strong);
    letter-spacing: var(--tracking-tight);
  }

  .brand__protocol {
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
    padding-inline-start: var(--space-3);
    border-inline-start: var(--hairline) solid var(--color-border-strong);
    white-space: nowrap;
  }

  .nav { display: flex; align-items: center; gap: var(--space-1); }

  .nav__link {
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    text-decoration: none;
    padding-inline: var(--space-3);
    padding-block: var(--space-1-5);
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }

  .nav__link:hover { color: var(--color-fg-strong); background: var(--color-surface-raised); }

  .nav__link--github {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg);
    border: var(--hairline) solid var(--color-border);
  }

  .icon { inline-size: var(--space-4); block-size: var(--space-4); flex: none; }

  /* Buttons */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--space-10);
    padding-inline: var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }

  .button--primary { background: var(--color-action); color: var(--color-on-action); }
  .button--primary:hover { background: var(--color-action-hover); }

  /* Copyable command */
  .command {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--space-10);
    padding-inline: var(--space-4) var(--space-1-5);
    padding-block: var(--space-1);
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    min-inline-size: 0;
  }

  .command__prompt { color: var(--color-fg-faint); user-select: none; }

  .command__text {
    flex: 1;
    min-inline-size: 0;
    color: var(--color-fg-strong);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .copy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    flex: none;
    min-block-size: var(--space-8);
    padding-inline: var(--space-3);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
    transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }

  .copy:hover { color: var(--color-fg-strong); background: var(--color-surface-hover); }
  .copy[data-state="copied"] { color: var(--color-success); }

  /* Capture: unedited terminal output */
  .capture {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-capture);
    min-inline-size: 0;
    overflow: hidden;
  }

  .capture__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-inline: var(--space-4);
    padding-block: var(--space-2);
    border-block-end: var(--hairline) solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
  }

  .capture__label { min-inline-size: 0; }
  .capture__label strong { color: var(--color-fg); font-weight: var(--weight-medium); }

  .capture__exit {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--color-fg-faint);
  }

  .capture__exit[data-exit="1"] { color: var(--color-failure); }
  .capture__exit[data-exit="0"] { color: var(--color-success); }

  .capture pre {
    margin: 0;
    padding: var(--space-4);
    font-size: var(--text-xs);
    line-height: var(--leading-code);
    color: var(--color-fg-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 4;
  }

  .capture--scroll pre {
    max-block-size: calc(var(--capture-lines) * 1lh + var(--space-4) * 2);
    overflow-y: auto;
    overscroll-behavior: contain;
    mask-image: linear-gradient(to bottom, var(--color-ground) calc(100% - var(--space-12)), transparent);
  }

  .capture--nowrap pre { white-space: pre; overflow-x: auto; overflow-wrap: normal; }

  .ln-cmd { color: var(--color-fg-strong); }
  .ln-ok { color: var(--color-success); }
  .ln-fail { color: var(--color-failure); }
  .ln-dim { color: var(--color-fg-faint); }

  /* A test runner's padded progress line: same text, laid out to the panel width up to 80 columns */
  .ln-progress { display: inline-flex; inline-size: min(100%, var(--measure-terminal)); }
  .ln-pad { flex: 1 1 0; min-inline-size: var(--space-2); overflow: hidden; white-space: pre; }

  .capture-caption {
    margin-block-start: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-fg-faint);
    max-inline-size: var(--measure-narrow);
  }

  .capture-caption a { color: var(--color-fg-muted); }

  /* Hero */
  .hero { padding-block: var(--space-16) var(--space-16); }

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

  .hero__copy { display: grid; gap: var(--space-6); justify-items: start; }

  .hero__title {
    font-size: var(--text-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    font-weight: var(--weight-bold);
    max-inline-size: 17ch;
  }

  .hero__lede {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-fg-muted);
    max-inline-size: var(--measure-narrow);
  }

  .hero__lede strong { color: var(--color-fg); font-weight: var(--weight-medium); }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    inline-size: 100%;
    max-inline-size: 34rem;
    margin-block-start: var(--space-2);
  }

  .hero__actions .command { flex: 1 1 16rem; }

  .hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-fg-faint);
  }

  .hero__meta a { color: var(--color-fg-muted); }

  .hero__proof { min-inline-size: 0; }

  @media (min-width: 64rem) {
    .hero { padding-block: var(--space-20) var(--space-20); }
    .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--space-16); }
  }

  /* Feature columns */
  .features {
    display: grid;
    gap: var(--space-10) var(--space-8);
    padding-block-end: var(--space-4);
  }

  .feature {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding-block-start: var(--space-5);
    border-block-start: var(--hairline) solid var(--color-border);
  }

  .feature__title { font-size: var(--text-md); letter-spacing: var(--tracking-tight); }

  .feature__text { color: var(--color-fg-muted); font-size: var(--text-sm); max-inline-size: var(--measure-narrow); }

  .feature__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-fg);
    text-decoration: none;
    justify-self: start;
    transition: color var(--duration-fast) var(--ease-out);
  }

  .feature__link .icon { transition: transform var(--duration-base) var(--ease-out); }
  .feature__link:hover { color: var(--color-fg-strong); }
  .feature__link:hover .icon { transform: translateX(var(--space-0-5)); }

  @media (min-width: 52rem) {
    .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .h2 {
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
  }

  .lede {
    font-size: var(--text-md);
    color: var(--color-fg-muted);
    max-inline-size: var(--measure);
  }

  .lede a { color: var(--color-fg); }

  /* The demo run */
  .run { display: grid; gap: var(--space-12); }

  .run__index { display: none; }

  .run__steps { display: grid; gap: var(--space-20); min-inline-size: 0; }

  .step { display: grid; gap: var(--space-6); min-inline-size: 0; }

  .step__text { display: grid; gap: var(--space-3); max-inline-size: var(--measure); }

  .step__title { font-size: var(--text-xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }

  .step__body { color: var(--color-fg-muted); }

  .step__captures { display: grid; gap: var(--space-4); min-inline-size: 0; }

  @media (min-width: 64rem) {
    .run { grid-template-columns: var(--index-width) minmax(0, 1fr); gap: var(--space-16); }

    .run__index {
      display: block;
      position: sticky;
      inset-block-start: calc(var(--header-height) + var(--space-8));
      align-self: start;
    }

    .run__index ol {
      display: grid;
      border-inline-start: var(--hairline) solid var(--color-border);
    }

    .run__index a {
      display: grid;
      gap: var(--space-0-5);
      padding-inline: var(--space-4) 0;
      padding-block: var(--space-2);
      margin-inline-start: calc(var(--hairline) * -1);
      border-inline-start: var(--rule-active) solid transparent;
      text-decoration: none;
      color: var(--color-fg-faint);
      font-size: var(--text-sm);
      line-height: var(--leading-snug);
      transition: color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
    }

    .run__index a:hover { color: var(--color-fg); }

    .run__index a[aria-current="step"] {
      color: var(--color-fg-strong);
      border-inline-start-color: var(--color-fg-strong);
    }

    .run__index .index__id { font-family: var(--font-mono); font-size: var(--text-2xs); }

    .run__index .index__verdict { font-family: var(--font-mono); font-size: var(--text-2xs); }
    .index__verdict[data-verdict="approved"] { color: var(--color-success); }
    .index__verdict[data-verdict="rejected"] { color: var(--color-failure); }
    .index__verdict[data-verdict="flagged"] { color: var(--color-failure); }
  }

  .run__source {
    margin-block-start: var(--space-16);
    padding-block-start: var(--space-6);
    border-block-start: var(--hairline) solid var(--color-border);
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
    max-inline-size: var(--measure);
  }

  /* Roles */
  .roles {
    display: grid;
    gap: var(--hairline);
    background: var(--color-border);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .role {
    display: grid;
    gap: var(--space-5);
    align-content: start;
    padding: var(--space-8);
    background: var(--color-ground);
  }

  .role__name { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }

  .role__summary { color: var(--color-fg-muted); }

  .role__facts { display: grid; gap: var(--space-3); }

  .role__facts div {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--space-4);
    padding-block-start: var(--space-3);
    border-block-start: var(--hairline) solid var(--color-border);
    font-size: var(--text-sm);
  }

  .role__facts dt { color: var(--color-fg-faint); }
  .role__facts dd { color: var(--color-fg); }

  @media (min-width: 52rem) {
    .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .modes {
    display: grid;
    gap: var(--space-8);
    margin-block-start: var(--space-12);
  }

  .mode { display: grid; gap: var(--space-2); max-inline-size: var(--measure-narrow); }
  .mode__name { font-size: var(--text-md); }
  .mode p { color: var(--color-fg-muted); font-size: var(--text-sm); }

  @media (min-width: 52rem) {
    .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
  }

  .stakes {
    margin-block-start: var(--space-12);
    padding-block-start: var(--space-6);
    border-block-start: var(--hairline) solid var(--color-border);
    color: var(--color-fg-muted);
    max-inline-size: var(--measure);
  }

  .stakes strong { color: var(--color-fg); font-weight: var(--weight-medium); }

  /* Documents */
  .docs { display: grid; gap: var(--space-8); }

  .docs__tabs {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;
    border-block-end: var(--hairline) solid var(--color-border);
  }

  .tab {
    flex: none;
    display: grid;
    gap: var(--space-0-5);
    justify-items: start;
    padding-inline: var(--space-3);
    padding-block: var(--space-2) var(--space-3);
    margin-block-end: calc(var(--hairline) * -1);
    border-block-end: var(--rule-active) solid transparent;
    color: var(--color-fg-faint);
    text-align: start;
    transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }

  .tab:hover { color: var(--color-fg); }

  .tab[aria-selected="true"] { color: var(--color-fg-strong); border-block-end-color: var(--color-fg-strong); }

  .tab__file { font-family: var(--font-mono); font-size: var(--text-xs); }
  .tab__role { font-size: var(--text-2xs); color: var(--color-fg-faint); }

  .doc-panel {
    display: grid;
    gap: var(--space-8);
    align-items: start;
  }

  .doc-panel__text { display: grid; gap: var(--space-3); max-inline-size: var(--measure-narrow); }
  .doc-panel__title { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
  .doc-panel__text p { color: var(--color-fg-muted); }

  @media (min-width: 64rem) {
    .doc-panel { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--space-12); }
  }

  /* Optional mod */
  .mod-grid { display: grid; gap: var(--space-16); }

  .mod-row { display: grid; gap: var(--space-8); align-items: center; }

  .mod-row__text { display: grid; gap: var(--space-3); max-inline-size: var(--measure-narrow); }
  .mod-row__title { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
  .mod-row__text p { color: var(--color-fg-muted); }

  .facts { display: grid; gap: var(--space-2); margin-block-start: var(--space-2); }

  .facts li {
    display: grid;
    align-items: start;
    grid-template-columns: var(--space-4) minmax(0, 1fr);
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-fg);
  }

  .facts li::before {
    content: "";
    inline-size: var(--space-1-5);
    block-size: var(--hairline);
    margin-block-start: var(--space-bullet-offset);
    background: var(--color-fg-faint);
  }

  .shot {
    display: grid;
    gap: var(--space-3);
    min-inline-size: 0;
  }

  /* The screenshots carry their own window frame and dark margin */
  .shot img { inline-size: 100%; }

  .shot--pane img { max-inline-size: var(--pane-shot-width); justify-self: center; }

  .shot__scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--radius-lg); }

  .shot__hint { display: none; font-size: var(--text-xs); color: var(--color-fg-faint); }

  @media (max-width: 52rem) {
    .shot__scroll img { inline-size: auto; max-inline-size: none; block-size: auto; min-inline-size: var(--wide-shot-min); }
    .shot__hint { display: block; }
  }

  @media (min-width: 64rem) {
    .mod-row--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
  }

  .mod-install {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-8);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .mod-install p { color: var(--color-fg-muted); font-size: var(--text-sm); max-inline-size: var(--measure); }

  .provenance { font-size: var(--text-xs); color: var(--color-fg-faint); max-inline-size: var(--measure); }

  /* Install close */
  .install {
    display: grid;
    gap: var(--space-12);
    padding-block: var(--space-section);
  }

  .install__agent { display: grid; gap: var(--space-6); max-inline-size: 48rem; }

  .prompt-block {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border-strong);
    border-radius: var(--radius-lg);
  }

  .prompt-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-fg-faint);
  }

  .prompt-block__text {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-code);
    color: var(--color-fg-strong);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .install__manual { display: grid; gap: var(--space-8); }

  .steps-manual { display: grid; gap: var(--space-6); }

  .steps-manual li { display: grid; gap: var(--space-2); min-inline-size: 0; }
  .steps-manual p { color: var(--color-fg-muted); font-size: var(--text-sm); }

  @media (min-width: 64rem) {
    .steps-manual { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
  }

  .links {
    display: grid;
    border-block-start: var(--hairline) solid var(--color-border);
  }

  .links a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-4);
    align-items: baseline;
    padding-block: var(--space-4);
    border-block-end: var(--hairline) solid var(--color-border);
    text-decoration: none;
  }

  .links a:hover .links__name { text-decoration: underline; text-decoration-color: var(--color-fg-muted); text-underline-offset: 0.22em; }

  .links__name { color: var(--color-fg-strong); font-weight: var(--weight-medium); transition: color var(--duration-fast) var(--ease-out); }
  .links__where { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-fg-faint); overflow-wrap: anywhere; }
  .links__what { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-fg-muted); }

  @media (min-width: 52rem) {
    .links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-12); }
  }

  /* Footer */
  .site-footer {
    border-block-start: var(--hairline) solid var(--color-border);
    padding-block: var(--space-8);
    font-size: var(--text-xs);
    color: var(--color-fg-faint);
  }

  .site-footer__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3) var(--space-8);
  }

  .site-footer a { color: var(--color-fg-muted); }

  /* Narrow screens */
  @media (max-width: 40rem) {
    .brand__protocol { display: none; }
    .nav__link--hide-sm { display: none; }
    .role { padding: var(--space-6); }
    .mod-install, .prompt-block { padding: var(--space-5); }

    .docs__tabs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      border-block-end: 0;
    }

    .tab { border-block-end: var(--hairline) solid var(--color-border); margin-block-end: 0; }
    .tab[aria-selected="true"] { border-block-end: var(--rule-active) solid var(--color-fg-strong); }
  }
}

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

  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: var(--space-2);
    z-index: var(--z-sticky);
    padding-inline: var(--space-3);
    padding-block: var(--space-2);
    background: var(--color-action);
    color: var(--color-on-action);
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
  }

  .skip-link:focus-visible { transform: none; }

  [hidden] { display: none; }
}