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

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/font/inter-vi.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/font/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Inter Fallback"; src: local("Roboto"); size-adjust: 107.2%; ascent-override: 96.9%; descent-override: 24.1%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Segoe UI"); size-adjust: 110.1%; ascent-override: 96.9%; descent-override: 24.1%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 104.7%; ascent-override: 96.9%; descent-override: 24.1%; line-gap-override: 0%; }

@layer tokens {
  :root {
    color-scheme: dark;

    --bg: #0a0a0a;
    --surface-1: #141415;
    --surface-2: #1b1b1d;
    --surface-hover: #202023;
    --nav: #101011;
    --elevated: #1b1b1d;
    --ghost-on-base: #262629;
    --ghost-on-base-hover: #2e2e32;
    --field: #1b1b1d;
    --field-edge: transparent;

    --text-1: #fafafa;
    --text-2: #a1a1a6;
    --text-3: #88888c;

    --accent: #2dd4bf;
    --accent-ink: #2dd4bf;
    --accent-soft: rgba(45, 212, 191, .13);

    --ok-ink: #34d399;
    --ok-soft: rgba(52, 211, 153, .13);
    --warn-ink: #fbbf24;
    --warn-soft: rgba(251, 191, 36, .13);
    --err-ink: #f87171;
    --err-soft: rgba(248, 113, 113, .13);
    --neutral-ink: #9ca3af;
    --neutral-soft: rgba(156, 163, 175, .13);

    --btn-a: #ffffff;
    --btn-b: #e9ebf4;
    --btn-fg: #0b0b0c;

    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Inter Fallback", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --fs-xs: .75rem;
    --fs-sm: .8125rem;
    --fs-base: .9375rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;

    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 20px;
    --s6: 24px;
    --s8: 32px;
    --s10: 40px;
    --s12: 48px;
    --s16: 64px;

    --r-card: 18px;
    --r-ctl: 13px;
    --r-nested: 11px;
    --r-pill: 999px;

    --nav-h: 56px;
    --side-w: 264px;
    --wrap: 1180px;

    --t-fast: 120ms;
    --t: 180ms;
    --ease: cubic-bezier(.2, .6, .2, 1);
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      color-scheme: light;
      --bg: #F2F2F7;
      --surface-1: #FFFFFF;
      --surface-2: #EFEFF4;
      --surface-hover: #E8E8ED;
      --nav: #E6E6EB;
      --elevated: #FFFFFF;
      --ghost-on-base: #E5E5EA;
      --ghost-on-base-hover: #DCDCE1;
      --field: #E1E1E7;
      --text-1: #1c1c1e;
      --text-2: #555559;
      --text-3: #636367;
      --accent-ink: #115e59;
      --accent-soft: rgba(17, 94, 89, .12);
      --ok-ink: #047857;
      --ok-soft: rgba(4, 120, 87, .12);
      --warn-ink: #92400e;
      --warn-soft: rgba(146, 64, 14, .12);
      --err-ink: #b91c1c;
      --err-soft: rgba(185, 28, 28, .12);
      --neutral-ink: #52525b;
      --neutral-soft: rgba(82, 82, 91, .12);
      --btn-a: #2c2c2e;
      --btn-b: #1c1c1e;
      --btn-fg: #fafafa;
    }
  }

  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #F2F2F7;
    --surface-1: #FFFFFF;
    --surface-2: #EFEFF4;
    --surface-hover: #E8E8ED;
    --nav: #E6E6EB;
    --elevated: #FFFFFF;
    --ghost-on-base: #E5E5EA;
    --ghost-on-base-hover: #DCDCE1;
    --field: #E1E1E7;
    --text-1: #1c1c1e;
    --text-2: #555559;
    --text-3: #636367;
    --accent-ink: #115e59;
    --accent-soft: rgba(17, 94, 89, .12);
    --ok-ink: #047857;
    --ok-soft: rgba(4, 120, 87, .12);
    --warn-ink: #92400e;
    --warn-soft: rgba(146, 64, 14, .12);
    --err-ink: #b91c1c;
    --err-soft: rgba(185, 28, 28, .12);
    --neutral-ink: #52525b;
    --neutral-soft: rgba(82, 82, 91, .12);
    --btn-a: #2c2c2e;
    --btn-b: #1c1c1e;
    --btn-fg: #fafafa;
  }

  @media (prefers-contrast: more) {
    :root:not([data-theme="light"]) {
      --field-edge: #3a3a3e;
      --text-2: #b4b4b8;
      --text-3: #9a9a9f;
    }

    @media (prefers-color-scheme: light) {
      :root:not([data-theme="dark"]) {
        --field-edge: #C7C7CC;
        --text-2: #4a4a4e;
        --text-3: #5c5c60;
      }
    }

    :root[data-theme="light"] {
      --field-edge: #C7C7CC;
      --text-2: #4a4a4e;
      --text-3: #5c5c60;
    }
  }

  @media (forced-colors: active) {
    :root {
      --field-edge: ButtonBorder;
    }
  }
}

@layer base {
  [hidden] { display: none !important; }

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

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text-1);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4, p, figure, blockquote, dl, dd {
    margin: 0;
  }

  h1, h2, h3, h4 {
    line-height: 1.22;
    letter-spacing: -.02em;
    font-weight: 700;
    text-wrap: balance;
  }

  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-lg); }
  h4 { font-size: var(--fs-md); }

  p { text-wrap: pretty; }

  ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a {
    color: var(--accent-ink);
    text-decoration: none;
  }

  a:hover { text-decoration: underline; }

  img, svg, video {
    max-inline-size: 100%;
    block-size: auto;
  }

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

  :focus-visible {
    outline: 2px solid var(--accent-ink);
    outline-offset: 2px;
  }

  [tabindex="-1"]:focus,
  [tabindex="-1"]:focus-visible {
    outline: none;
  }

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

  code, kbd, pre {
    font-family: var(--font-mono);
    font-size: .92em;
  }

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

    *, *::before, *::after {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

@layer layout {
  .page {
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;
  }

  .wrap {
    inline-size: min(100% - var(--s8), var(--wrap));
    margin-inline: auto;
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  }

  .nav {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: var(--nav);
    padding-block-start: env(safe-area-inset-top);
  }

  .nav__inner {
    display: flex;
    align-items: center;
    gap: var(--s4);
    min-block-size: var(--nav-h);
  }

  .nav__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    color: var(--text-1);
    font-weight: 700;
    letter-spacing: -.02em;
  }

  .nav__brand:hover { text-decoration: none; }

  .nav__mark {
    inline-size: 24px;
    block-size: 24px;
    flex: none;
    color: var(--accent-ink);
    transform: translateY(-1px);
  }

  .nav__spacer { flex: 1 1 auto; }

  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
    padding-block: var(--s6) var(--s12);
  }

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

  .side {
    min-inline-size: 0;
    align-self: start;
  }

  @media (max-width: 59.99rem) {
    .side::after {
      content: "";
      display: block;
      block-size: env(safe-area-inset-bottom);
    }
  }

  @media (min-width: 60rem) {
    .layout { grid-template-columns: var(--side-w) minmax(0, 1fr); }

    .side {
      position: sticky;
      inset-block-start: calc(var(--nav-h) + var(--s4));
      max-block-size: calc(100dvh - var(--nav-h) - var(--s8));
      overflow-y: auto;
      overscroll-behavior: contain;
    }
  }

  .stack > * + * { margin-block-start: var(--s4); }
  .stack--sm > * + * { margin-block-start: var(--s2); }
  .stack--lg > * + * { margin-block-start: var(--s8); }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
  }

  .pair {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
  }

  @media (max-width: 23.99rem) {
    .nav__inner { gap: var(--s2); }

    .nav__inner .cluster { flex-wrap: nowrap; }
  }

  .grid {
    display: grid;
    gap: var(--s3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  }

  .grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

  .footer {
    margin-block-start: auto;
    background: var(--nav);
    padding-block: var(--s8) calc(var(--s8) + env(safe-area-inset-bottom));
    color: var(--text-2);
    font-size: var(--fs-sm);
  }
}

@layer components {
  .card {
    display: block;
    background: var(--surface-1);
    border-radius: var(--r-card);
    padding: var(--s5);
    color: inherit;
  }

  .nested {
    display: block;
    background: var(--surface-2);
    border-radius: var(--r-nested);
    padding: var(--s4);
    color: inherit;
  }

  .card--link,
  .nested--link {
    transition: background var(--t) var(--ease);
  }

  .card--link:hover,
  .nested--link:hover {
    background: var(--surface-hover);
    text-decoration: none;
  }

  .card__head { margin-block-end: var(--s4); }
  .card__title { font-size: var(--fs-lg); }

  .card__sub {
    margin-block-start: var(--s1);
    color: var(--text-2);
    font-size: var(--fs-sm);
  }

  .card__foot {
    margin-block-start: var(--s4);
    color: var(--text-2);
    font-size: var(--fs-sm);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-block-size: 40px;
    padding-inline: var(--s5);
    border: 0;
    border-radius: var(--r-ctl);
    background: var(--surface-2);
    color: var(--text-1);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  }

  .btn:hover {
    background: var(--surface-hover);
    text-decoration: none;
  }

  .btn--primary {
    background-image: linear-gradient(180deg, var(--btn-a), var(--btn-b));
    color: var(--btn-fg);
  }

  .btn--primary:hover {
    background-image: linear-gradient(180deg, var(--btn-a), var(--btn-b));
    opacity: .9;
  }

  :is(.main > header, .main > .cluster, .drawer, .side) .btn--ghost { background: var(--ghost-on-base); }

  :is(.main > header, .main > .cluster, .drawer, .side) .btn--ghost:hover { background: var(--ghost-on-base-hover); }

  .btn--quiet {
    background: transparent;
    color: var(--text-2);
  }

  .btn--quiet:hover {
    background: var(--surface-2);
    color: var(--text-1);
  }

  .btn--sm {
    position: relative;
    min-block-size: 32px;
    padding-inline: var(--s3);
    font-size: var(--fs-sm);
  }

  .btn--sm::after {
    content: "";
    position: absolute;
    inset-inline: -3px;
    inset-block: -6px;
  }

  @media (max-width: 23.99rem) {
    .nav__inner .btn--sm:not(.btn--icon) { padding-inline: var(--s2); }
  }

  @media (max-width: 22.49rem) {
    .nav__menu-ico { display: none; }
  }

  .btn .icon { --ico: 18px; }

  .btn--sm .icon {
    --ico: 16px;
    --ico-sw: 2.25;
  }

  .btn--lg .icon { --ico: 20px; }

  .btn .icon--ext {
    --ico: 16px;
    opacity: .72;
  }

  .btn--sm .icon--ext { --ico: 14px; }
  .btn--lg .icon--ext { --ico: 18px; }

  .btn--icon {
    inline-size: 36px;
    padding-inline: 0;
  }

  .btn--sm.btn--icon { inline-size: 32px; }

  .theme-ico { display: none; }

  :root:not([data-theme]) .theme-ico--system,
  :root[data-theme="dark"] .theme-ico--dark,
  :root[data-theme="light"] .theme-ico--light {
    display: block;
  }

  .btn--lg {
    min-block-size: 50px;
    padding-inline: var(--s8);
    font-size: var(--fs-md);
  }

  .btn--block {
    inline-size: 100%;
  }

  .btn[disabled],
  .btn[aria-disabled="true"] {
    color: var(--text-3);
    cursor: not-allowed;
    background-image: none;
    background: var(--surface-2);
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: 3px var(--s2);
    border-radius: var(--r-pill);
    background: var(--neutral-soft);
    color: var(--neutral-ink);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
  }

  .chip .icon {
    --ico: 13px;
    --ico-sw: 2.5;
  }

  .chip--dot::before {
    content: "";
    flex: none;
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--r-pill);
    background: currentColor;
  }

  .chip--ok { background: var(--ok-soft); color: var(--ok-ink); }
  .chip--warn { background: var(--warn-soft); color: var(--warn-ink); }
  .chip--err { background: var(--err-soft); color: var(--err-ink); }
  .chip--accent { background: var(--accent-soft); color: var(--accent-ink); }

  .field {
    display: flex;
    align-items: center;
    gap: var(--s2);
    background: var(--field);
    border-radius: var(--r-ctl);
    padding-inline: var(--s4);
    min-block-size: 46px;
    outline: 1px solid var(--field-edge);
    outline-offset: -1px;
  }

  .input,
  .select,
  .textarea {
    inline-size: 100%;
    min-inline-size: 0;
    background: transparent;
    border: 0;
    padding-block: var(--s3);
    color: var(--text-1);
    font-size: var(--fs-md);
  }

  .input:focus,
  .select:focus,
  .textarea:focus { outline: none; }

  .input::placeholder { color: var(--text-3); }

  .field > .icon {
    --ico: 18px;
    color: var(--text-3);
  }

  .select {
    appearance: none;
    cursor: pointer;
    padding-inline-end: var(--s5);
  }

  .field:has(> .select) {
    position: relative;
  }

  .field > .field__chev {
    position: absolute;
    inset-inline-end: var(--s3);
    inset-block-start: calc(50% - 8px);
    --ico: 16px;
    --ico-sw: 2.25;
    color: var(--text-2);
    pointer-events: none;
  }

  .list {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
  }

  .row {
    display: flex;
    align-items: center;
    gap: var(--s3);
    background: var(--surface-2);
    border-radius: var(--r-nested);
    padding: var(--s3) var(--s4);
    transition: background var(--t) var(--ease);
  }

  .row:hover { background: var(--surface-hover); }

  .row__main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s3);
    row-gap: 2px;
    align-items: center;
    flex: 1 1 auto;
    min-inline-size: 0;
    color: inherit;
  }

  .row__main:hover { text-decoration: none; }

  .row__main > .tile-ico { grid-row: 1 / span 2; }

  .row__main > .row__title,
  .row__main > .row__meta { grid-column: 2; }

  .row__main--bare { grid-template-columns: minmax(0, 1fr); }

  .row__main--bare > .row__title,
  .row__main--bare > .row__meta { grid-column: 1; }

  .row__title {
    font-weight: 600;
    color: var(--text-1);
  }

  .row__main > .row__title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-inline-size: 0;
  }

  .row__ext {
    --ico: 14px;
    --ico-sw: 2.25;
    color: var(--text-3);
  }

  .row__meta {
    color: var(--text-2);
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .row__tag {
    color: var(--text-2);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
  }

  .row__aside {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    flex: 0 0 auto;
  }

  .row__status:empty { display: none; }

  @media (max-width: 39.99rem) {
    .row { flex-wrap: wrap; }

    .row__main { flex-basis: 100%; }

    .row__meta {
      overflow: visible;
      white-space: normal;
    }

    .row__aside { margin-inline-start: auto; }
  }

  .callout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: var(--surface-2);
    border-radius: var(--r-nested);
    padding: var(--s4);
    color: var(--text-2);
    font-size: var(--fs-sm);
  }

  .callout:has(> .callout__ico) {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s3);
  }

  .callout__ico {
    grid-row: 1 / span 2;
    --ico: 18px;
    margin-block-start: 1px;
  }

  .callout__ico ~ .callout__title,
  .callout__ico ~ .callout__body { grid-column: 2; }

  .callout--info .callout__ico { color: var(--accent-ink); }
  .callout--ok .callout__ico { color: var(--ok-ink); }
  .callout--warn .callout__ico { color: var(--warn-ink); }
  .callout--err .callout__ico { color: var(--err-ink); }

  .callout__title {
    display: block;
    margin-block-end: var(--s1);
    color: var(--text-1);
  }

  .callout--info .callout__title { color: var(--accent-ink); }
  .callout--ok .callout__title { color: var(--ok-ink); }
  .callout--warn .callout__title { color: var(--warn-ink); }
  .callout--err .callout__title { color: var(--err-ink); }

  .crumbs {
    color: var(--text-2);
    font-size: var(--fs-sm);
  }

  .crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
  }

  .crumbs__item + .crumbs__item::before {
    content: "/";
    margin-inline-end: var(--s2);
    color: var(--text-3);
  }

  .crumbs__item a { color: var(--text-2); }
  .crumbs__item [aria-current="page"] { color: var(--text-1); }

  .sidenav { display: flex; flex-direction: column; gap: var(--s1); }

  .sidenav__group {
    margin-block-start: var(--s4);
    padding-inline: var(--s3);
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  .sidenav__link {
    display: flex;
    align-items: center;
    gap: var(--s2);
    min-block-size: 44px;
    padding: var(--s2) var(--s3);
    border-radius: var(--r-nested);
    color: var(--text-2);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }

  .sidenav__link .icon { --ico: 20px; }

  .sidenav__link:hover {
    background: var(--surface-2);
    color: var(--text-1);
    text-decoration: none;
  }

  .sidenav__link[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-weight: 600;
  }

  .icon {
    inline-size: var(--ico, 20px);
    block-size: var(--ico, 20px);
    flex: none;
    vertical-align: middle;
  }

  .logo {
    flex: none;
    fill: currentColor;
  }

  .tile-ico {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--r-nested);
    background: var(--accent-soft);
    color: var(--accent-ink);
    --ico: 22px;
  }

  .tile-ico--row {
    inline-size: 36px;
    block-size: 36px;
    --ico: 20px;
  }

  .tile-ico--hero {
    inline-size: 52px;
    block-size: 52px;
    border-radius: var(--r-ctl);
    --ico: 28px;
  }

  .tile-ico--muted {
    background: var(--surface-1);
    color: var(--text-2);
  }

  @media (min-width: 60rem) {
    .tile-ico--hero {
      inline-size: 56px;
      block-size: 56px;
      --ico: 30px;
    }
  }

  .card__head--ico {
    display: flex;
    align-items: center;
    gap: var(--s3);
  }

  .card--tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ico head go" "ico tag go";
    grid-template-rows: auto 1fr;
    column-gap: var(--s4);
    align-items: start;
  }

  .card--tile > .tile-ico { grid-area: ico; }

  .card--tile > .card__head {
    grid-area: head;
    margin-block-end: 0;
  }

  .card--tile > .tile__tag { grid-area: tag; }

  .card--tile > .card__go {
    grid-area: go;
    align-self: center;
    --ico: 18px;
    color: var(--text-3);
    transition: translate var(--t) var(--ease), color var(--t) var(--ease);
  }

  .card--tile:hover > .card__go {
    translate: 2px 0;
    color: var(--text-2);
  }

  .chooser__title {
    display: flex;
    align-items: center;
    gap: var(--s2);
  }

  .chooser__title > .icon { color: var(--accent-ink); }

  .foot__brand {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-block-end: var(--s3);
    color: var(--text-1);
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: -.02em;
  }

  .foot__mark {
    inline-size: 20px;
    block-size: 20px;
    color: var(--accent-ink);
  }

  .foot__save { margin-block-start: var(--s5); }

  .spinner-wrap {
    display: inline-flex;
    align-items: center;
  }

  .spinner { color: var(--accent-ink); }

  .spinner-arc {
    transform-origin: 12px 12px;
    animation: dh-spin .8s linear infinite;
  }

  @keyframes dh-spin {
    to { transform: rotate(360deg); }
  }

  .skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    inset-block-start: var(--s2);
    z-index: 100;
    padding: var(--s2) var(--s4);
    border-radius: var(--r-ctl);
    background: var(--elevated);
    color: var(--text-1);
  }

  .skip-link:focus {
    inset-inline-start: max(var(--s4), env(safe-area-inset-left));
  }

  .footer li a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }

  .footer .stack--sm > * + * { margin-block-start: 0; }

  @media (forced-colors: active) {
    .card,
    .nested,
    .row,
    .callout,
    .chip,
    .btn,
    .skip-link {
      border: 1px solid ButtonBorder;
    }

    .nav { border-block-end: 1px solid ButtonBorder; }

    .footer { border-block-start: 1px solid ButtonBorder; }

    .tbl tbody th,
    .tbl tbody td { border-block-end: 1px solid ButtonBorder; }

    .btn--primary,
    .btn--primary:hover,
    .sidenav__link[aria-current="page"] {
      background: Highlight;
      color: HighlightText;
      border-color: Highlight;
    }

    .btn[disabled],
    .btn[aria-disabled="true"] {
      color: GrayText;
      border-color: GrayText;
    }

    @media (max-width: 59.99rem) {
      .side { border: 1px solid ButtonBorder; }
    }
  }
}

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

  .muted { color: var(--text-2); }

  .dim {
    color: var(--text-3);
    font-size: var(--fs-xl);
  }

  .lead {
    color: var(--text-2);
    font-size: var(--fs-md);
  }

  .center { text-align: center; }
  .start { text-align: start; }
  .nowrap { white-space: nowrap; }
  .grow { flex: 1 1 auto; }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .measure { max-inline-size: 68ch; }

  .mt-0 { margin-block-start: 0; }
  .mt-2 { margin-block-start: var(--s2); }
  .mt-4 { margin-block-start: var(--s4); }
  .mt-6 { margin-block-start: var(--s6); }
  .mt-8 { margin-block-start: var(--s8); }

  .is-hidden { display: none !important; }

  @media (max-width: 59.99rem) {
    .hide-sm { display: none !important; }
  }

  @media (min-width: 60rem) {
    .hide-lg { display: none !important; }
  }
}

@media print {
  :root {
    color-scheme: light;

    --bg: #ffffff;
    --surface-1: #ffffff;
    --surface-2: #ffffff;
    --surface-hover: #ffffff;
    --nav: #ffffff;
    --elevated: #ffffff;
    --ghost-on-base: #ffffff;
    --ghost-on-base-hover: #ffffff;
    --field: #ffffff;
    --field-edge: #767676;

    --text-1: #000000;
    --text-2: #333333;
    --text-3: #333333;

    --accent-ink: #000000;
    --accent-soft: transparent;
    --ok-ink: #000000;
    --ok-soft: transparent;
    --warn-ink: #000000;
    --warn-soft: transparent;
    --err-ink: #000000;
    --err-soft: transparent;
    --neutral-ink: #000000;
    --neutral-soft: transparent;

    --btn-a: #ffffff;
    --btn-b: #ffffff;
    --btn-fg: #000000;
  }

  .nav,
  .side,
  .skip-link {
    display: none;
  }

  .layout {
    display: block;
    padding-block: 0;
  }
}