@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Zalando Sans Expanded";
  src: url("fonts/zalando-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Zalando Sans Expanded";
  src: url("fonts/zalando-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Zalando Sans Expanded";
  src: url("fonts/zalando-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Zalando Sans Expanded";
  src: url("fonts/zalando-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/*
 * Virtos UI
 * A small, class-light interface framework based on the Virtos brand system.
 * Override any --v-* token on :root, [data-theme], or a component scope.
 */

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

@layer theme {
  :root {
    color-scheme: light dark;

    /* Brand */
    --v-black: #000;
    --v-white: #fff;
    --v-grey: #e1e1e1;
    --v-green: #24df92;
    --v-green-dark: #087b4e;

    /* Type */
    --v-font-heading: "Zalando Sans Expanded", "Arial Wide", sans-serif;
    --v-font-body: "Public Sans", Arial, sans-serif;
    --v-font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    --v-leading: 1.55;
    --v-leading-tight: 1.08;

    /* Space */
    --v-space-1: 0.25rem;
    --v-space-2: 0.5rem;
    --v-space-3: 0.75rem;
    --v-space-4: 1rem;
    --v-space-5: 1.5rem;
    --v-space-6: 2rem;
    --v-space-7: 3rem;
    --v-space-8: 4.5rem;
    --v-control-height: 2.75rem;
    --v-content-width: 90rem;
    --v-reading-width: 70ch;
    --v-sidebar-width: 17rem;

    /* Shape and motion */
    --v-radius-sm: 0.35rem;
    --v-radius: 0.75rem;
    --v-radius-lg: 1.25rem;
    --v-border-width: 1px;
    --v-shadow: 0 1rem 3rem rgb(0 0 0 / 0.08);
    --v-focus: 0 0 0 3px rgb(36 223 146 / 0.35);
    --v-transition: 160ms ease;

    /* Semantic light theme */
    --v-bg: #f6f6f4;
    --v-surface: var(--v-white);
    --v-surface-2: #ededeb;
    --v-text: var(--v-black);
    --v-text-soft: #5b5d5c;
    --v-border: #d2d4d2;
    --v-accent: var(--v-green);
    --v-accent-text: #00170e;
    --v-link: #087b4e;
    --v-header-bg: rgb(255 255 255 / 0.88);
    --v-danger: #c93636;
    --v-warning: #a15b00;
    --v-success: #087b4e;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --v-bg: #080a09;
      --v-surface: #111412;
      --v-surface-2: #1b1f1d;
      --v-text: #f7f8f7;
      --v-text-soft: #aeb5b1;
      --v-border: #363b38;
      --v-accent: var(--v-green);
      --v-accent-text: #00170e;
      --v-link: #51eaaa;
      --v-header-bg: rgb(8 10 9 / 0.88);
      --v-danger: #ff8b8b;
      --v-warning: #ffc16c;
      --v-success: #51eaaa;
      --v-shadow: 0 1rem 3rem rgb(0 0 0 / 0.4);
    }
  }

  :root[data-theme="dark"] {
    --v-bg: #080a09;
    --v-surface: #111412;
    --v-surface-2: #1b1f1d;
    --v-text: #f7f8f7;
    --v-text-soft: #aeb5b1;
    --v-border: #363b38;
    --v-accent: var(--v-green);
    --v-accent-text: #00170e;
    --v-link: #51eaaa;
    --v-header-bg: rgb(8 10 9 / 0.88);
    --v-danger: #ff8b8b;
    --v-warning: #ffc16c;
    --v-success: #51eaaa;
    --v-shadow: 0 1rem 3rem rgb(0 0 0 / 0.4);
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, picture, svg, canvas { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  button, label, select, summary, [role="button"] { touch-action: manipulation; }
}

@layer base {
  html {
    background: var(--v-bg);
    color: var(--v-text);
    font-family: var(--v-font-body);
    font-size: 100%;
    line-height: var(--v-leading);
    text-rendering: optimizeLegibility;
  }

  body { min-height: 100vh; background: var(--v-bg); }

  :where(main, section, article, aside, nav, header, footer) { min-width: 0; }

  :where(h1, h2, h3, h4, h5, h6) {
    color: var(--v-text);
    font-family: var(--v-font-heading);
    font-weight: 600;
    line-height: var(--v-leading-tight);
    text-wrap: balance;
  }

  h1 { font-size: clamp(2.35rem, 6vw, 5.75rem); letter-spacing: -0.045em; }
  h2 { font-size: clamp(1.8rem, 3.4vw, 3.4rem); letter-spacing: -0.035em; }
  h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -0.025em; }
  h4 { font-size: 1.1rem; }

  :where(p, ul, ol, dl, blockquote, pre, table, form, details) + :where(p, ul, ol, dl, blockquote, pre, table, form, details) {
    margin-block-start: var(--v-space-4);
  }

  :where(p, li, dd) { max-width: var(--v-reading-width); }
  :where(ul, ol) { padding-inline-start: 1.3em; }
  :where(article, section, fieldset, details, blockquote) > :where(ul, ol) > li + li {
    margin-block-start: var(--v-space-2);
  }
  li::marker { color: var(--v-accent); font-weight: 800; }

  a {
    color: var(--v-link);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    transition: color var(--v-transition);

    &:hover { color: var(--v-text); }
  }

  strong { font-weight: 700; }
  small { color: var(--v-text-soft); font-size: 0.82rem; }
  mark { background: var(--v-accent); color: var(--v-accent-text); padding-inline: 0.2em; }
  del { color: var(--v-text-soft); }
  ins { color: var(--v-success); text-underline-offset: 0.2em; }
  abbr[title] { cursor: help; text-decoration-color: var(--v-accent); }

  :where(code, kbd, samp) {
    border-radius: var(--v-radius-sm);
    font-family: var(--v-font-mono);
    font-size: 0.88em;
  }

  code { background: var(--v-surface-2); padding: 0.16em 0.4em; }
  kbd { background: var(--v-text); color: var(--v-bg); padding: 0.16em 0.45em; box-shadow: inset 0 -2px rgb(127 127 127 / 0.35); }
  pre {
    overflow: auto;
    border: var(--v-border-width) solid var(--v-border);
    border-radius: var(--v-radius);
    background: var(--v-surface-2);
    padding: var(--v-space-5);

    & code { background: transparent; padding: 0; }
  }

  blockquote {
    border-inline-start: 0.3rem solid var(--v-accent);
    color: var(--v-text-soft);
    font-size: 1.15rem;
    padding: var(--v-space-3) var(--v-space-5);

    & footer { margin-block-start: var(--v-space-3); font-size: 0.85rem; }
  }

  hr { border: 0; border-block-start: var(--v-border-width) solid var(--v-border); margin-block: var(--v-space-7); }
  ::selection { background: var(--v-accent); color: var(--v-accent-text); }
  :focus-visible { outline: 2px solid var(--v-accent); outline-offset: 3px; }

  /* Brand assets. URLs resolve relative to this stylesheet. SVG is the default. */
  :where(
    .logo-black, .logo-white, .logo-black-png, .logo-white-png,
    .cloud-black, .cloud-white,
    .mark-black, .mark-green, .mark-white, .mark-black-png, .mark-green-png, .mark-white-png,
    .virtos-black, .virtos-white, .virtos-black-png, .virtos-white-png
  ) {
    display: inline-block;
    width: var(--logo-width, 10rem);
    aspect-ratio: var(--logo-aspect);
    flex: 0 0 auto;
    background: var(--logo-image) center / contain no-repeat;
    vertical-align: middle;
  }

  :where(.logo-black, .logo-white, .logo-black-png, .logo-white-png) { --logo-aspect: 1920 / 242.9; }
  :where(.cloud-black, .cloud-white) { --logo-aspect: 1920 / 300; }
  :where(.mark-black, .mark-green, .mark-white, .mark-black-png, .mark-green-png, .mark-white-png) { --logo-aspect: 1920 / 723.27; }
  :where(.virtos-black, .virtos-white, .virtos-black-png, .virtos-white-png) { --logo-aspect: 1920 / 214.61; }

  .logo-black { --logo-image: url("./logos/logo-black.svg"); }
  .logo-white { --logo-image: url("./logos/logo-white.svg"); }
  .cloud-black{ --logo-image: url("./logos/cloud-black.svg"); }
  .cloud-white{ --logo-image: url("./logos/cloud-white.svg"); }
  .mark-black { --logo-image: url("./logos/mark-black.svg"); }
  .mark-green { --logo-image: url("./logos/mark-green.svg"); }
  .mark-white { --logo-image: url("./logos/mark-white.svg"); }
  .virtos-black { --logo-image: url("./logos/virtos-black.svg"); }
  .virtos-white { --logo-image: url("./logos/virtos-white.svg"); }

  .logo-black-png { --logo-image: url("./logos/logo-black.png"); }
  .logo-white-png { --logo-image: url("./logos/logo-white.png"); }
  .mark-black-png { --logo-image: url("./logos/mark-black.png"); }
  .mark-green-png { --logo-image: url("./logos/mark-green.png"); }
  .mark-white-png { --logo-image: url("./logos/mark-white.png"); }
  .virtos-black-png { --logo-image: url("./logos/virtos-black.png"); }
  .virtos-white-png { --logo-image: url("./logos/virtos-white.png"); }
}

@layer layout {
  .container { width: min(100% - 2rem, var(--v-content-width)); margin-inline: auto; }
  .flow > * + * { margin-block-start: var(--flow-space, var(--v-space-5)); }

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

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
    gap: var(--v-space-5);
  }

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

  .app-shell { min-height: 100vh; }

  .app-header {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--v-space-4);
    border-block-end: var(--v-border-width) solid var(--v-border);
    background: var(--v-header-bg);
    padding: var(--v-space-3) clamp(var(--v-space-4), 3vw, var(--v-space-6));
    backdrop-filter: blur(14px);

    & .brand { display: flex; align-items: center; gap: var(--v-space-3); }
    & .brand > :is(.logo-black, .logo-white) { --logo-width: 9.75rem; }
    & .logo-white { display: none; }
    & > .cluster { margin-inline-start: auto; }
  }

  :root[data-theme="dark"] .app-header,
  :root:not([data-theme="light"]) .app-header {
    @media (prefers-color-scheme: dark) {
      & .logo-black { display: none; }
      & .cloud-black { display: none; }
      & .logo-white { display: inline-block; }
      & .cloud-white { display: inline-block; }
    }
  }
  :root[data-theme="dark"] .app-header {
    & .logo-black { display: none; }
    & .cloud-black { display: none; }
    & .logo-white { display: inline-block; }
    & .cloud-white { display: inline-block; }
  }
  :root[data-theme="light"] .app-header {
    & .logo-black { display: inline-block; }
    & .cloud-black { display: inline-block; }
    & .logo-white { display: none; }
    & .cloud-white { display: none; }
  }

  .app-body { display: grid; grid-template-columns: var(--v-sidebar-width) minmax(0, 1fr); }

  .sidebar {
    position: sticky;
    top: 4.5rem;
    height: calc(100vh - 4.5rem);
    overflow-y: auto;
    border-inline-end: var(--v-border-width) solid var(--v-border);
    background: var(--v-surface);
    padding: var(--v-space-5);

    & nav { display: grid; gap: var(--v-space-1); }
    & a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: var(--v-radius-sm);
      color: var(--v-text-soft);
      font-size: 0.9rem;
      font-weight: 600;
      padding: 0.65rem 0.8rem;
      text-decoration: none;

      &:hover, &[aria-current="page"] { background: var(--v-surface-2); color: var(--v-text); }
      &[aria-current="page"]::after { content: ""; width: 0.45rem; aspect-ratio: 1; border-radius: 50%; background: var(--v-accent); }
    }
  }

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

    & > a,
    & > details > summary {
      display: flex;
      min-height: 2.5rem;
      align-items: center;
      gap: var(--v-space-2);
      border-radius: var(--v-radius-sm);
      color: var(--v-text-soft);
      cursor: pointer;
      font-size: 0.86rem;
      font-weight: 650;
      line-height: 1;
      padding: 0.65rem 0.8rem;
      text-decoration: none;
      transition: background var(--v-transition), color var(--v-transition);

      &:hover { background: var(--v-surface-2); color: var(--v-text); }
    }

    & > a[aria-current="page"] {
      background: var(--v-surface-2);
      color: var(--v-text);
    }

    & > details {
      position: relative;

      & > summary {
        list-style: none;

        &::-webkit-details-marker { display: none; }
        &::after {
          width: 0.42rem;
          height: 0.42rem;
          border-inline-end: 1.5px solid currentColor;
          border-block-end: 1.5px solid currentColor;
          content: "";
          rotate: 45deg;
          translate: 0 -0.12rem;
          transition: rotate var(--v-transition), translate var(--v-transition);
        }
      }

      &[open] > summary {
        background: var(--v-surface-2);
        color: var(--v-text);

        &::after { rotate: 225deg; translate: 0 0.12rem; }
      }

      &:not([open]) > div { display: none; }

      &[open] > div {
        position: absolute;
        z-index: 30;
        inset-block-start: calc(100% + var(--v-space-2));
        inset-inline-start: 0;
        display: grid;
        width: max-content;
        min-width: 14rem;
        overflow: hidden;
        border: var(--v-border-width) solid var(--v-border);
        border-radius: var(--v-radius);
        background: var(--v-surface);
        box-shadow: var(--v-shadow);
        padding: var(--v-space-2);

        & a {
          display: grid;
          border-radius: var(--v-radius-sm);
          color: var(--v-text);
          font-size: 0.88rem;
          font-weight: 650;
          line-height: 1.3;
          padding: 0.7rem 0.8rem;
          text-decoration: none;

          &:hover, &:focus-visible { background: var(--v-surface-2); }
          & small { display: block; margin-block-start: var(--v-space-1); font-weight: 400; }
        }
      }
    }
  }

  .app-main { width: 100%; max-width: calc(var(--v-content-width) + 4rem); padding: clamp(var(--v-space-5), 4vw, var(--v-space-8)); }

  @media (max-width: 800px) {
    .split { grid-template-columns: 1fr; }
    .app-body { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; border-inline-end: 0; border-block-end: var(--v-border-width) solid var(--v-border); padding: var(--v-space-3); }
    .sidebar nav { display: flex; overflow-x: auto; }
    .sidebar a { white-space: nowrap; }
    .app-main { padding: var(--v-space-5) var(--v-space-4) var(--v-space-7); }
    .app-header .brand small { display: none; }
    .app-header { flex-wrap: wrap; }
    .app-header > nav.menu { order: 3; width: 100%; flex-wrap: wrap; padding-block-start: var(--v-space-1); }
    nav.menu > :is(a, details) { flex: 0 0 auto; }
  }
}

@layer components {
  .eyebrow {
    color: var(--v-text-soft);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .lede { color: var(--v-text-soft); font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.45; }
  .accent { color: var(--v-green); }
  .muted { color: var(--v-text-soft); }

  .section-heading {
    display: grid;
    gap: var(--v-space-3);
    margin-block-end: var(--v-space-6);
    scroll-margin-top: 6rem;

    & p { color: var(--v-text-soft); }
  }

  .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--v-radius-lg);
    background: var(--v-black);
    color: var(--v-white);
    padding: clamp(var(--v-space-6), 7vw, 6rem);

    &::after {
      position: absolute;
      z-index: -1;
      right: -8rem;
      bottom: -13rem;
      width: 35rem;
      aspect-ratio: 1;
      border: 4rem solid var(--v-green);
      border-radius: 50%;
      content: "";
      opacity: 0.95;
    }
    & h1, & p { color: inherit; }
    & p { max-width: 46rem; }
  }

  article, .card {
    border: var(--v-border-width) solid var(--v-border);
    border-radius: var(--v-radius);
    background: var(--v-surface);
    padding: var(--v-space-5);

    & > :first-child { margin-block-start: 0; }
    & > :last-child { margin-block-end: 0; }
    & header { margin-block-end: var(--v-space-4); }
    & footer { margin-block-start: var(--v-space-5); }
  }

  .card--metric {
    & data, & .metric { display: block; font-family: var(--v-font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1; }
    & small { display: block; margin-block-start: var(--v-space-2); }
  }
  .card--accent { border-color: var(--v-green); background: var(--v-green); color: var(--v-accent-text); & :where(h1,h2,h3,h4,p,small) { color: inherit; } }
  .card--dark { border-color: var(--v-black); background: var(--v-black); color: var(--v-white); & :where(h1,h2,h3,h4,p,small) { color: inherit; } }

  article.notched-card {
    --notch-bg: var(--v-black);
    --notch-fg: var(--v-white);
    --notch-link: var(--v-green);
    --notch-height: 5.25rem;
    --notch-start: 76%;
    --notch-end: 84%;

    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 25rem;
    border: 0;
    border-radius: var(--v-radius);
    background: transparent;
    color: var(--notch-fg);
    padding: 0;

    /* The lower rectangle begins where the clipped header meets the body. */
    &::before {
      position: absolute;
      z-index: 0;
      inset: var(--notch-height) 0 0;
      border-radius: 0 var(--v-radius) var(--v-radius) var(--v-radius);
      background: var(--notch-bg);
      content: "";
    }

    &::after {
      position: absolute;
      z-index: 0;
      inset: calc(var(--notch-height) + var(--v-space-4)) var(--v-space-4) var(--v-space-4);
      border: 1px solid currentColor;
      border-radius: calc(var(--v-radius) - 0.2rem);
      content: "";
      opacity: 0.18;
      pointer-events: none;
    }

    & > * { position: relative; z-index: 1; }

    /* The semantic article header carries the notch; its heading needs no class. */
    & > header {
      position: relative;
      display: flex;
      width: 100%;
      align-items: center;
      flex: 0 0 var(--notch-height);
      margin: 0;
      border-radius: var(--v-radius) 0 0 0;
      background: var(--notch-bg);
      clip-path: polygon(0 0, var(--notch-start) 0, var(--notch-end) 100%, 100% 100%, 100% 100%, 0 100%);
      clip-path: shape(
        from 0 0,
        hline to calc(var(--notch-start) - var(--v-radius)),
        curve to calc(var(--notch-start) + var(--v-radius)) var(--v-radius) with var(--notch-start) 0,
        line to calc(var(--notch-end) - var(--v-radius)) calc(100% - var(--v-radius)),
        curve to calc(var(--notch-end) + var(--v-radius)) 100% with var(--notch-end) 100%,
        hline to 100%,
        vline to 100%,
        hline to 0,
        close
      );
      padding: var(--v-space-4) var(--v-space-5);

      & > h3 {
        color: var(--notch-fg);
        font-size: clamp(1.45rem, 3vw, 2.5rem);
      }
    }

    & > :where(p, ul, ol, dl, blockquote) {
      max-width: 38rem;
      color: var(--notch-fg);
      padding-inline: clamp(var(--v-space-5), 4vw, var(--v-space-7));
    }

    & > header + :where(p, ul, ol, dl, blockquote) {
      margin-block-start: auto;
      padding-block-start: var(--v-space-7);
    }

    & > p {
      font-size: clamp(1.05rem, 2vw, 1.35rem);
      line-height: 1.45;
    }

    & > footer {
      margin-block-start: var(--v-space-5);
      padding: 0 clamp(var(--v-space-5), 4vw, var(--v-space-7)) var(--v-space-7);

      & a { color: var(--notch-link); font-weight: 700; }
    }

    &.notched-card--right {
      --notch-bg: var(--v-grey);
      --notch-fg: var(--v-black);
      --notch-link: var(--v-green-dark);

      &::before { border-radius: var(--v-radius) 0 var(--v-radius) var(--v-radius); }

      & > header {
        justify-content: end;
        border-radius: 0 var(--v-radius) 0 0;
        clip-path: polygon(0 100%, calc(100% - var(--notch-end)) 100%, calc(100% - var(--notch-start)) 0, 100% 0, 100% 100%);
        clip-path: shape(
          from 0 100%,
          hline to calc(100% - var(--notch-end) - var(--v-radius)),
          curve to calc(100% - var(--notch-end) + var(--v-radius)) calc(100% - var(--v-radius)) with calc(100% - var(--notch-end)) 100%,
          line to calc(100% - var(--notch-start) - var(--v-radius)) var(--v-radius),
          curve to calc(100% - var(--notch-start) + var(--v-radius)) 0 with calc(100% - var(--notch-start)) 0,
          hline to 100%,
          vline to 100%,
          close
        );
        text-align: end;
      }

      & > :is(p, ul, ol, dl, blockquote, footer) { align-self: end; text-align: end; }
    }
  }

  :where(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button) {
    display: inline-flex;
    min-height: var(--v-control-height);
    align-items: center;
    justify-content: center;
    gap: var(--v-space-2);
    border: var(--v-border-width) solid var(--v-text);
    border-radius: var(--v-radius-sm);
    background: var(--v-text);
    color: var(--v-bg);
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    padding: 0.72rem 1rem;
    text-decoration: none;
    transition: transform var(--v-transition), background var(--v-transition), border-color var(--v-transition);

    &:hover { transform: translateY(-1px); }
    &:active { transform: translateY(0); }
    &:focus-visible { box-shadow: var(--v-focus); }
    &:disabled, &[aria-disabled="true"] { cursor: not-allowed; opacity: 0.45; transform: none; }
  }

  :where(button, .button).primary { border-color: var(--v-accent); background: var(--v-accent); color: var(--v-accent-text); }
  :where(button, .button).secondary { border-color: var(--v-border); background: var(--v-surface); color: var(--v-text); }
  :where(button, .button).ghost { border-color: transparent; background: transparent; color: var(--v-text); }
  :where(button, .button).danger { border-color: var(--v-danger); background: var(--v-danger); color: var(--v-white); }
  :where(button, .button).small { min-height: 2.1rem; padding: 0.45rem 0.7rem; font-size: 0.8rem; }

  form { accent-color: var(--v-accent); }
  fieldset {
    min-width: 0;
    border: var(--v-border-width) solid var(--v-border);
    border-radius: var(--v-radius);
    margin: 0;
    padding: var(--v-space-5);

    & + fieldset { margin-block-start: var(--v-space-5); }
  }
  legend { font-family: var(--v-font-heading); font-weight: 600; padding-inline: var(--v-space-2); }
  label { display: inline-block; color: var(--v-text); font-size: 0.88rem; font-weight: 650; }
  label + :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { margin-block-start: var(--v-space-2); }

  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea) {
    width: 100%;
    min-height: var(--v-control-height);
    border: var(--v-border-width) solid var(--v-border);
    border-radius: var(--v-radius-sm);
    background: var(--v-surface);
    color: var(--v-text);
    padding: 0.65rem 0.8rem;
    transition: border-color var(--v-transition), box-shadow var(--v-transition);

    &::placeholder { color: var(--v-text-soft); opacity: 0.75; }
    &:hover { border-color: color-mix(in srgb, var(--v-text), transparent 55%); }
    &:focus { border-color: var(--v-accent); box-shadow: var(--v-focus); outline: none; }
    &:disabled { cursor: not-allowed; opacity: 0.55; }
    &[aria-invalid="true"] { border-color: var(--v-danger); }
  }
  textarea { min-height: 8rem; resize: vertical; }
  input[type="color"] { min-height: var(--v-control-height); padding: var(--v-space-1); }
  input[type="range"] { width: 100%; }
  :where(input[type="checkbox"], input[type="radio"]) { width: 1.05rem; height: 1.05rem; margin: 0; }

  .field { display: grid; align-content: start; gap: var(--v-space-2); }
  .field small { line-height: 1.35; }
  .field-error { color: var(--v-danger); font-size: 0.8rem; }
  .check { display: inline-flex; align-items: center; gap: var(--v-space-2); font-weight: 500; }

  .switch {
    display: inline-flex;
    align-items: center;
    gap: var(--v-space-2);
    cursor: pointer;

    & input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
    & .track {
      position: relative;
      width: 2.7rem;
      height: 1.5rem;
      border: var(--v-border-width) solid var(--v-border);
      border-radius: 99rem;
      background: var(--v-surface-2);
      transition: background var(--v-transition);

      &::after { position: absolute; top: 0.2rem; left: 0.2rem; width: 1rem; aspect-ratio: 1; border-radius: 50%; background: var(--v-text); content: ""; transition: translate var(--v-transition); }
    }
    & input:checked + .track { border-color: var(--v-accent); background: var(--v-accent); }
    & input:checked + .track::after { background: var(--v-accent-text); translate: 1.2rem; }
    & input:focus-visible + .track { box-shadow: var(--v-focus); }
  }

  .table-wrap { overflow-x: auto; border: var(--v-border-width) solid var(--v-border); border-radius: var(--v-radius); }
  table { width: 100%; border-collapse: collapse; background: var(--v-surface); font-variant-numeric: tabular-nums; }
  :where(th, td) { padding: 0.85rem 1rem; text-align: start; vertical-align: middle; }
  :where(tr) { border-block-end: var(--v-border-width) solid var(--v-border);}
  th { color: var(--v-text-soft); font-size: 0.74rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; }
  tbody tr { transition: background var(--v-transition); &:hover { background: color-mix(in srgb, var(--v-accent), transparent 92%); } }
  tbody tr:last-child td { border-block-end: 0; }
  td[data-label]::before { display: none; content: attr(data-label); }

  table.compact {
    font-size: 0.86rem;

    & :where(th, td) { padding: 0.48rem 0.7rem; }
    & th { font-size: 0.68rem; }
  }

  nav.tree {
    color: var(--v-text);
    font-size: 0.9rem;

    & :where(ul[role="tree"], ul[role="group"]) { margin: 0; list-style: none; padding: 0; }
    & ul[role="group"] { margin-inline-start: 1.05rem; padding-inline-start: 0.75rem; border-inline-start: var(--v-border-width) solid var(--v-border); }

    & [role="treeitem"] {
      position: relative;
      margin: 0;
      border-radius: var(--v-radius-sm);
      outline: none;

      & > span {
        display: flex;
        min-height: 2.15rem;
        align-items: center;
        gap: var(--v-space-2);
        border-radius: inherit;
        cursor: default;
        padding: 0.42rem 0.55rem 0.42rem 1.65rem;
      }

      &[aria-expanded] > span { cursor: pointer; font-weight: 650; }
      &[aria-expanded] > span::before {
        position: absolute;
        inset-inline-start: 0.7rem;
        width: 0.42rem;
        height: 0.42rem;
        border-inline-end: 1.5px solid currentColor;
        border-block-end: 1.5px solid currentColor;
        content: "";
        rotate: -45deg;
        transition: rotate var(--v-transition), translate var(--v-transition);
      }
      &[aria-expanded="true"] > span::before { rotate: 45deg; translate: 0 -0.12rem; }
      &[aria-expanded="false"] > ul[role="group"] { display: none; }
      &[aria-selected="true"] > span { background: color-mix(in srgb, var(--v-accent), transparent 84%); color: var(--v-text); }
      &:focus-visible > span { box-shadow: var(--v-focus); }
    }
  }

  table.tree-table {
    & tr[hidden] { display: none; }
    & tbody tr[aria-expanded] { font-weight: 650; }
    & tbody tr[aria-level="2"] td:first-child { padding-inline-start: 1.8rem; }
    & tbody tr[aria-level="3"] td:first-child { padding-inline-start: 3rem; }

    & td:first-child > :is(button, span[aria-hidden="true"]) {
      display: inline-grid;
      width: 1.4rem;
      min-width: 1.4rem;
      height: 1.4rem;
      min-height: 0;
      margin-inline-end: var(--v-space-1);
      padding: 0;
      place-items: center;
      vertical-align: middle;
    }

    & td:first-child > button {
      border: 0;
      background: transparent;
      color: var(--v-text-soft);

      &::before {
        width: 0.42rem;
        height: 0.42rem;
        border-inline-end: 1.5px solid currentColor;
        border-block-end: 1.5px solid currentColor;
        content: "";
        rotate: -45deg;
        transition: rotate var(--v-transition), translate var(--v-transition);
      }
      &:hover { background: var(--v-surface-2); color: var(--v-text); transform: none; }
    }

    & tr[aria-expanded="true"] td:first-child > button::before { rotate: 45deg; translate: 0 -0.12rem; }
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 99rem;
    background: var(--v-surface-2);
    color: var(--v-text);
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;

    &::before { width: 0.45rem; aspect-ratio: 1; border-radius: 50%; background: currentColor; content: ""; }
    &.success { background: color-mix(in srgb, var(--v-success), transparent 84%); color: var(--v-success); }
    &.warning { background: color-mix(in srgb, var(--v-warning), transparent 84%); color: var(--v-warning); }
    &.danger { background: color-mix(in srgb, var(--v-danger), transparent 84%); color: var(--v-danger); }
  }

  .alert {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--v-space-3);
    border: var(--v-border-width) solid var(--v-border);
    border-inline-start: 0.3rem solid var(--v-accent);
    border-radius: var(--v-radius-sm);
    background: var(--v-surface);
    padding: var(--v-space-4);

    & strong { display: block; }
    & p { color: var(--v-text-soft); font-size: 0.9rem; }
    &.danger { border-inline-start-color: var(--v-danger); }
    &.warning { border-inline-start-color: var(--v-warning); }
  }

  progress, meter { width: 100%; height: 0.65rem; accent-color: var(--v-accent); }
  progress { overflow: hidden; border: 0; border-radius: 99rem; background: var(--v-surface-2); }
  progress::-webkit-progress-bar { background: var(--v-surface-2); }
  progress::-webkit-progress-value { border-radius: inherit; background: var(--v-accent); }
  progress::-moz-progress-bar { border-radius: inherit; background: var(--v-accent); }

  details {
    border-block-end: var(--v-border-width) solid var(--v-border);
    padding-block: var(--v-space-4);

    & summary { cursor: pointer; font-weight: 700; }
    &[open] summary { margin-block-end: var(--v-space-3); }
    & p { color: var(--v-text-soft); }
  }

  /* Menu dropdowns use <details>, but should align like adjacent nav links. */
  nav.menu > details {
    align-self: center;
    border: 0;
    margin: 0;
    padding: 0;

    & > summary,
    &[open] > summary { margin: 0; }
  }

  nav.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    margin: 0;
    list-style: none;
    padding: 0;
  }
  nav.breadcrumbs li {
    display: inline-flex;
    align-items: baseline;
    margin: 0;
    color: var(--v-text-soft);
    font-size: 0.82rem;
    line-height: 1.25;

    & a { display: inline; line-height: inherit; }
    & + li::before {
      align-self: baseline;
      content: "/";
      line-height: inherit;
      margin-inline: var(--v-space-2);
    }
  }

  .pagination { display: flex; align-items: center; gap: var(--v-space-1); list-style: none; padding: 0; }
  .pagination a { display: grid; min-width: 2.2rem; min-height: 2.2rem; place-items: center; border-radius: var(--v-radius-sm); color: var(--v-text); text-decoration: none; }
  .pagination a:hover, .pagination a[aria-current="page"] { background: var(--v-accent); color: var(--v-accent-text); }

  dialog {
    max-width: min(32rem, calc(100% - 2rem));
    border: var(--v-border-width) solid var(--v-border);
    border-radius: var(--v-radius);
    background: var(--v-surface);
    color: var(--v-text);
    box-shadow: var(--v-shadow);
    padding: var(--v-space-6);

    &::backdrop { background: rgb(0 0 0 / 0.65); backdrop-filter: blur(3px); }
  }

  .avatar { display: inline-grid; width: 2.35rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--v-accent); color: var(--v-accent-text); font-size: 0.78rem; font-weight: 800; }

  @media (max-width: 620px) {
    article.notched-card { min-height: 21rem; }
    .responsive-table thead { display: none; }
    .responsive-table :where(tbody, tr, td) { display: block; width: 100%; }
    .responsive-table tr { padding: var(--v-space-3); border-block-end: var(--v-border-width) solid var(--v-border); }
    .responsive-table td { display: flex; justify-content: space-between; gap: var(--v-space-4); border: 0; padding: var(--v-space-2); text-align: end; }
    .responsive-table td[data-label]::before { display: block; color: var(--v-text-soft); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-align: start; text-transform: uppercase; }
  }
}

@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .text-right { text-align: right; }
  .nowrap { white-space: nowrap; }
  .full-width { width: 100%; }
  .push-right { margin-inline-start: auto; }
  .surface { background: var(--v-surface); }
  .pad { padding: var(--v-space-5); }
  .rounded { border-radius: var(--v-radius); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  }
}