/*! default-ui.css v1.0.0 | A visual default layer for semantic HTML | MIT */

/* Unlayered author CSS always wins over everything below.
   Order: reset < base < components. */
@layer reset, base, components;

/* ==========================================================================
   RESET — clean, minimal override of the User Agent stylesheet
   ========================================================================== */
@layer reset {

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

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 2;
  }

  body,
  h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, pre,
  dl, dd, fieldset, legend {
    margin: 0;
  }

  fieldset {
    padding: 0;
    border: 0;
    min-inline-size: 0;
  }

  legend {
    padding: 0;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    max-inline-size: 100%;
  }

  img, video {
    block-size: auto;
  }

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

  button {
    background: none;
    border: 0;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  [hidden] {
    display: none !important;
  }
}

/* ==========================================================================
   BASE — design tokens + native element defaults
   ========================================================================== */
@layer base {

  /* ---------- Design tokens (derived from the visual reference) ---------- */
  :root {
    color-scheme: light;

    /* Typography */
    --ui-font-sans: "Archivo", "Space Grotesk", "Chivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
    --ui-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --ui-text-xs: 0.75rem;
    --ui-text-sm: 0.875rem;
    --ui-text-base: 1rem;
    --ui-text-lg: 1.125rem;
    --ui-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --ui-text-2xl: clamp(1.5rem, 1.28rem + 1.1vw, 2.125rem);
    --ui-text-3xl: clamp(1.875rem, 1.45rem + 2.1vw, 3rem);
    --ui-text-4xl: clamp(2.5rem, 1.6rem + 4.4vw, 4.5rem);

    --ui-leading-tight: 0.95;
    --ui-leading-snug: 1.15;
    --ui-leading-normal: 1.6;

    --ui-tracking-display: 0.02em;
    --ui-tracking-tight: -0.01em;
    --ui-tracking-wide: 0.08em;

    --ui-weight-normal: 400;
    --ui-weight-medium: 500;
    --ui-weight-bold: 700;
    --ui-weight-black: 800;

    /* Color */
    --ui-color-background: #f5f8ce;
    --ui-color-surface: #ffffff;
    --ui-color-text: #0b0b0b;
    --ui-color-muted: #4a4a44;
    --ui-color-border: #000000;
    --ui-color-primary: #d6f03a;
    --ui-color-primary-text: #0b0b0b;
    --ui-color-accent: #22c55e;
    --ui-color-highlight: #f08fdc;
    --ui-color-danger: #f1541b;
    --ui-color-inverse: #0b0b0b;
    --ui-color-inverse-text: #f5f8ce;
    --ui-color-disabled: #dedec8;
    --ui-color-focus: #000000;

    /* Border / radius */
    --ui-border-width: 2px;
    --ui-border: var(--ui-border-width) solid var(--ui-color-border);
    --ui-border-thick: 3px solid var(--ui-color-border);

    --ui-radius-sm: 2px;
    --ui-radius-md: 4px;
    --ui-radius-lg: 8px;
    --ui-radius-pill: 999px;

    /* Spacing */
    --ui-space-1: 0.25rem;
    --ui-space-2: 0.5rem;
    --ui-space-3: 0.75rem;
    --ui-space-4: 1rem;
    --ui-space-5: 1.5rem;
    --ui-space-6: 2rem;
    --ui-space-7: 3rem;
    --ui-space-8: 4.5rem;

    /* Hard shadows — no blur, exactly like the offset frames in the reference */
    --ui-shadow-sm: 3px 3px 0 var(--ui-color-border);
    --ui-shadow-md: 6px 6px 0 var(--ui-color-border);
    --ui-shadow-lg: 10px 10px 0 var(--ui-color-border);

    --ui-transition: 120ms ease-out;

    /* Layout */
    --ui-measure: 68ch;
    --ui-container: 72rem;
    --ui-control-height: 2.75rem;

    /* Inline icons (no external requests) */
    --ui-icon-check: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M2.5%208.4l3.6%203.6%207.4-8'%20fill='none'%20stroke='%230b0b0b'%20stroke-width='2.75'%20stroke-linecap='square'/%3E%3C/svg%3E");
    --ui-icon-caret: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201.5l5%205%205-5'%20fill='none'%20stroke='%230b0b0b'%20stroke-width='2'/%3E%3C/svg%3E");
  }

  /* ---------- Dark mode: same design language, inverted ground ---------- */
  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;

      --ui-color-background: #12140b;
      --ui-color-surface: #1d2013;
      --ui-color-text: #f2f6d8;
      --ui-color-muted: #a6ab8e;
      --ui-color-border: #f2f6d8;
      --ui-color-primary: #d6f03a;
      --ui-color-primary-text: #0b0b0b;
      --ui-color-accent: #35d06f;
      --ui-color-highlight: #f08fdc;
      --ui-color-danger: #ff7a45;
      --ui-color-inverse: #f2f6d8;
      --ui-color-inverse-text: #12140b;
      --ui-color-disabled: #2d3120;
      --ui-color-focus: #d6f03a;

      --ui-icon-caret: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201.5l5%205%205-5'%20fill='none'%20stroke='%23f2f6d8'%20stroke-width='2'/%3E%3C/svg%3E");
    }
  }

  /* ---------- Document ---------- */
  html {
    background: var(--ui-color-background);
    scrollbar-color: var(--ui-color-border) var(--ui-color-background);
  }

  body {
    max-inline-size: var(--ui-container);
    margin-inline: auto;
    padding: var(--ui-space-6) var(--ui-space-5) var(--ui-space-8);
    background: var(--ui-color-background);
    color: var(--ui-color-text);
    font-family: var(--ui-font-sans);
    font-size: var(--ui-text-base);
    font-weight: var(--ui-weight-normal);
    line-height: var(--ui-leading-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Flow spacing — zero specificity so any rule below can override it */
  :where(body, main, section, article, aside, header, footer,
         form, fieldset, figure, blockquote, li, dd, details, dialog, td, th) > * + * {
    margin-block-start: var(--ui-space-4);
  }

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

  :focus-visible {
    outline: 3px solid var(--ui-color-focus);
    outline-offset: 2px;
  }

  /* ---------- Typography ---------- */
  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--ui-weight-black);
    line-height: var(--ui-leading-snug);
    letter-spacing: var(--ui-tracking-display);
    text-wrap: balance;
    margin-block-start: var(--ui-space-6);
  }

  h1 {
    font-size: var(--ui-text-4xl);
    line-height: var(--ui-leading-tight);
  }

  h2 {
    font-size: var(--ui-text-3xl);
    line-height: 1.05;
    margin-block-start: var(--ui-space-7);
  }

  h3 {
    font-size: var(--ui-text-2xl);
  }

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

  h5 {
    font-size: var(--ui-text-lg);
    letter-spacing: var(--ui-tracking-tight);
  }

  /* h6 = the small bold eyebrow above section titles in the reference */
  h6 {
    font-size: var(--ui-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--ui-tracking-wide);
  }

  :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-block-start: 0;
  }

  /* An eyebrow directly followed by its title sits tight against it */
  :is(h6, h5) + :is(h1, h2, h3) {
    margin-block-start: var(--ui-space-2);
  }

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

  small {
    font-size: var(--ui-text-sm);
    color: var(--ui-color-muted);
  }

  strong, b {
    font-weight: var(--ui-weight-black);
  }

  em, i, cite {
    font-style: italic;
  }

  cite {
    font-weight: var(--ui-weight-bold);
    font-style: normal;
  }

  /* The lime highlight box around "Provide" in the reference */
  mark {
    padding: 0.05em 0.3em;
    background: var(--ui-color-primary);
    color: var(--ui-color-primary-text);
    border: var(--ui-border);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  del {
    color: var(--ui-color-muted);
    text-decoration-thickness: 0.12em;
  }

  ins {
    background: color-mix(in srgb, var(--ui-color-accent) 30%, transparent);
    text-decoration: none;
    padding-inline: 0.2em;
  }

  abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: help;
  }

  sub, sup {
    font-size: 0.72em;
    line-height: 0;
  }

  kbd {
    display: inline-block;
    padding: 0.1em 0.45em;
    font-family: var(--ui-font-mono);
    font-size: 0.85em;
    font-weight: var(--ui-weight-bold);
    background: var(--ui-color-surface);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: 2px 2px 0 var(--ui-color-border);
  }

  code, samp, var {
    font-family: var(--ui-font-mono);
    font-size: 0.875em;
  }

  code, samp {
    padding: 0.1em 0.35em;
    background: var(--ui-color-surface);
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-sm);
  }

  /* Code block = the black bar of the reference */
  pre {
    padding: var(--ui-space-4) var(--ui-space-5);
    overflow-x: auto;
    background: var(--ui-color-inverse);
    color: var(--ui-color-inverse-text);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-md);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-text-sm);
    line-height: 1.55;
  }

  pre code, pre samp {
    padding: 0;
    background: none;
    border: 0;
    font-size: inherit;
    color: inherit;
  }

  blockquote {
    padding: var(--ui-space-4) var(--ui-space-5);
    background: var(--ui-color-primary);
    color: var(--ui-color-primary-text);
    border: var(--ui-border);
    border-inline-start-width: 8px;
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-sm);
    font-size: var(--ui-text-lg);
    font-weight: var(--ui-weight-medium);
  }

  blockquote p {
    max-inline-size: none;
  }

  hr {
    block-size: 3px;
    margin-block: var(--ui-space-7);
    border: 0;
    background: var(--ui-color-border);
  }

  /* ---------- Lists ---------- */
  ul, ol {
    margin: 0;
    padding-inline-start: 1.35em;
  }

  li::marker {
    color: var(--ui-color-text);
    font-weight: var(--ui-weight-black);
  }

  li + li {
    margin-block-start: var(--ui-space-2);
  }

  dl {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: var(--ui-space-2) var(--ui-space-5);
  }

  dt {
    font-weight: var(--ui-weight-black);
  }

  dd {
    margin: 0;
    color: var(--ui-color-muted);
  }

  /* ---------- Media ---------- */
  figure > img,
  figure > video,
  article > img {
    background: var(--ui-color-surface);
    border: var(--ui-border-thick);
    box-shadow: var(--ui-shadow-md);
  }

  figcaption {
    margin-block-start: var(--ui-space-3);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-weight-bold);
    color: var(--ui-color-muted);
  }

  /* ---------- Links ---------- */
  a {
    color: inherit;
    font-weight: var(--ui-weight-medium);
    text-decoration: underline;
    text-decoration-thickness: 0.14em;
    text-underline-offset: 0.16em;
    text-decoration-skip-ink: none;
    transition: background var(--ui-transition), color var(--ui-transition);
  }

  a:hover {
    background: var(--ui-color-primary);
    color: var(--ui-color-primary-text);
    box-shadow: 0 0 0 3px var(--ui-color-primary);
    text-decoration-color: currentColor;
  }

  a[target="_blank"]::after {
    content: " ↗";
    font-size: 0.85em;
  }
}

/* ==========================================================================
   COMPONENTS — native elements that behave like designed components
   ========================================================================== */
@layer components {

  /* ---------- Page landmarks ---------- */
  body > header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-4);
    padding-block-end: var(--ui-space-4);
    border-block-end: var(--ui-border-thick);
  }

  body > header > * {
    margin-block-start: 0;
  }

  body > header :is(h1, h2, h3, h4, h5, h6) {
    font-size: var(--ui-text-xl);
    margin-block-start: 0;
  }

  main {
    display: block;
    margin-block-start: var(--ui-space-6);
  }

  section + section {
    margin-block-start: var(--ui-space-8);
  }

  /* Work / project cards in the reference */
  article {
    padding: var(--ui-space-5);
    background: var(--ui-color-surface);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-md);
  }

  article > :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-block-start: 0;
  }

  /* Lime callout card */
  aside {
    padding: var(--ui-space-5);
    background: var(--ui-color-primary);
    color: var(--ui-color-primary-text);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-md);
  }

  aside a:hover,
  blockquote a:hover {
    background: var(--ui-color-surface);
    box-shadow: 0 0 0 3px var(--ui-color-surface);
  }

  /* Black statistics bar */
  body > footer {
    margin-block-start: var(--ui-space-8);
    padding: var(--ui-space-5);
    background: var(--ui-color-inverse);
    color: var(--ui-color-inverse-text);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-md);
  }

  body > footer :is(h1, h2, h3, h4, h5, h6, small) {
    color: inherit;
  }

  body > footer a:hover {
    color: var(--ui-color-primary-text);
  }

  /* ---------- Navigation ---------- */
  nav ul,
  nav ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
    padding: 0;
    list-style: none;
  }

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

  nav a {
    display: inline-block;
    padding: var(--ui-space-2) var(--ui-space-4);
    font-weight: var(--ui-weight-bold);
    text-decoration: none;
    border: var(--ui-border-width) solid transparent;
    border-radius: var(--ui-radius-pill);
  }

  nav a:hover,
  nav a:focus-visible {
    background: var(--ui-color-primary);
    color: var(--ui-color-primary-text);
    border-color: var(--ui-color-border);
    box-shadow: none;
  }

  /* The active "Service" pill */
  nav a[aria-current] {
    background: var(--ui-color-primary);
    color: var(--ui-color-primary-text);
    border-color: var(--ui-color-border);
  }

  /* ---------- Forms ---------- */
  form {
    padding: var(--ui-space-5);
    background: var(--ui-color-surface);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-md);
  }

  form p {
    max-inline-size: none;
  }

  fieldset {
    padding: var(--ui-space-5);
    background: var(--ui-color-background);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
  }

  /* Legend = the lime highlight tag */
  legend {
    padding: var(--ui-space-1) var(--ui-space-3);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-weight-black);
    text-transform: uppercase;
    letter-spacing: var(--ui-tracking-wide);
    background: var(--ui-color-primary);
    color: var(--ui-color-primary-text);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
  }

  label {
    display: block;
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-weight-black);
    letter-spacing: 0.02em;
  }

  label > :is(input, textarea, select),
  label + :is(input, textarea, select) {
    margin-block-start: var(--ui-space-2);
    font-size: var(--ui-text-base);
    font-weight: var(--ui-weight-normal);
    letter-spacing: normal;
  }

  /* A label wrapping a checkbox/radio becomes a row */
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    font-size: var(--ui-text-base);
    font-weight: var(--ui-weight-medium);
    cursor: pointer;
  }

  label:has(> input:disabled) {
    color: var(--ui-color-muted);
    cursor: not-allowed;
  }

  /* Text-like controls */
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"],
             [type="button"], [type="submit"], [type="reset"], [type="image"]),
  textarea,
  select {
    display: block;
    inline-size: 100%;
    min-block-size: var(--ui-control-height);
    padding: var(--ui-space-3) var(--ui-space-4);
    background: var(--ui-color-surface);
    color: var(--ui-color-text);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    transition: background var(--ui-transition), border-color var(--ui-transition);
  }

  textarea {
    min-block-size: 7rem;
    resize: vertical;
    line-height: var(--ui-leading-normal);
  }

  select {
    appearance: none;
    padding-inline-end: var(--ui-space-8);
    background-image: var(--ui-icon-caret);
    background-repeat: no-repeat;
    background-position: right var(--ui-space-4) center;
    background-size: 0.75rem;
    cursor: pointer;
  }

  select[multiple],
  select[size]:not([size="1"]) {
    padding-inline-end: var(--ui-space-4);
    background-image: none;
  }

  option {
    background: var(--ui-color-surface);
    color: var(--ui-color-text);
  }

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

  output {
    font-weight: var(--ui-weight-black);
    font-variant-numeric: tabular-nums;
  }

  /* Field states */
  :is(input, textarea, select):hover:not(:disabled, [readonly]) {
    background: color-mix(in srgb, var(--ui-color-primary) 10%, var(--ui-color-surface));
  }

  :is(input, textarea, select):focus-visible {
    background: color-mix(in srgb, var(--ui-color-primary) 20%, var(--ui-color-surface));
  }

  /* Required = lime edge on the leading border */
  :is(input, textarea, select):required {
    border-inline-start-width: 6px;
    border-inline-start-color: var(--ui-color-primary);
  }

  :is(input, textarea, select):user-valid {
    border-color: var(--ui-color-accent);
  }

  :is(input, textarea, select):is(:user-invalid, [aria-invalid="true"]) {
    border-color: var(--ui-color-danger);
    background: color-mix(in srgb, var(--ui-color-danger) 12%, var(--ui-color-surface));
  }

  :is(input, textarea, select)[readonly] {
    background: color-mix(in srgb, var(--ui-color-background) 70%, var(--ui-color-surface));
    color: var(--ui-color-muted);
  }

  :is(input, textarea, select):disabled {
    background: var(--ui-color-disabled);
    color: var(--ui-color-muted);
    border-color: var(--ui-color-muted);
    cursor: not-allowed;
  }

  /* Checkbox + radio */
  input[type="checkbox"],
  input[type="radio"] {
    appearance: none;
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin: 0;
    vertical-align: -0.2em;
    background: var(--ui-color-surface);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    cursor: pointer;
    transition: background var(--ui-transition);
  }

  input[type="radio"] {
    border-radius: 50%;
  }

  input[type="checkbox"]:checked {
    background: var(--ui-color-primary) var(--ui-icon-check) center / 78% no-repeat;
  }

  input[type="checkbox"]:indeterminate {
    background: var(--ui-color-highlight);
  }

  input[type="radio"]:checked {
    background: var(--ui-color-primary);
    box-shadow: inset 0 0 0 3px var(--ui-color-surface);
  }

  input[type="checkbox"]:disabled,
  input[type="radio"]:disabled {
    background: var(--ui-color-disabled);
    border-color: var(--ui-color-muted);
    cursor: not-allowed;
  }

  /* Range */
  input[type="range"] {
    inline-size: 100%;
    block-size: 2rem;
    appearance: none;
    background: transparent;
    cursor: pointer;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    block-size: 0.6rem;
    background: var(--ui-color-surface);
    border: var(--ui-border);
  }

  input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    margin-block-start: -0.45rem;
    background: var(--ui-color-primary);
    border: var(--ui-border);
  }

  input[type="range"]::-moz-range-track {
    block-size: 0.6rem;
    background: var(--ui-color-surface);
    border: var(--ui-border);
  }

  input[type="range"]::-moz-range-thumb {
    inline-size: 1.35rem;
    block-size: 1.35rem;
    border-radius: 0;
    background: var(--ui-color-primary);
    border: var(--ui-border);
  }

  /* Color */
  input[type="color"] {
    display: block;
    inline-size: 4rem;
    block-size: var(--ui-control-height);
    padding: 0.25rem;
    background: var(--ui-color-surface);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    cursor: pointer;
  }

  /* File */
  input[type="file"] {
    padding: var(--ui-space-2);
    cursor: pointer;
  }

  ::file-selector-button {
    margin-inline-end: var(--ui-space-3);
    padding: var(--ui-space-2) var(--ui-space-4);
    font-family: inherit;
    font-weight: var(--ui-weight-bold);
    background: var(--ui-color-primary);
    color: var(--ui-color-primary-text);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: 2px 2px 0 var(--ui-color-border);
    cursor: pointer;
  }

  /* Search field: keep the native affordance, drop the UA chrome */
  input[type="search"] {
    appearance: none;
  }

  input[type="search"]::-webkit-search-cancel-button {
    appearance: none;
    inline-size: 0.9rem;
    block-size: 0.9rem;
    background: var(--ui-color-border);
    clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%);
    cursor: pointer;
  }

  /* ---------- Buttons ---------- */
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a[role="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    min-block-size: var(--ui-control-height);
    padding: var(--ui-space-3) var(--ui-space-5);
    font-family: var(--ui-font-sans);
    font-size: var(--ui-text-base);
    font-weight: var(--ui-weight-black);
    line-height: 1;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    background: var(--ui-color-primary);
    color: var(--ui-color-primary-text);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-sm);
    cursor: pointer;
    transition: transform var(--ui-transition), box-shadow var(--ui-transition), background var(--ui-transition);
  }

  :is(button, input[type="button"], input[type="submit"], input[type="reset"], a[role="button"]):hover:not(:disabled) {
    transform: translate(-2px, -2px);
    box-shadow: var(--ui-shadow-md);
    background: var(--ui-color-primary);
    color: var(--ui-color-primary-text);
  }

  :is(button, input[type="button"], input[type="submit"], input[type="reset"], a[role="button"]):active:not(:disabled) {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 0 var(--ui-color-border);
  }

  :is(button, input[type="button"], input[type="submit"], a[role="button"]):focus-visible {
    outline: 3px solid var(--ui-color-focus);
    outline-offset: 3px;
  }

  /* Secondary action — reset / cancel */
  button[type="reset"],
  input[type="reset"] {
    background: var(--ui-color-surface);
    color: var(--ui-color-text);
  }

  button[type="reset"]:hover,
  input[type="reset"]:hover {
    background: var(--ui-color-highlight);
    color: var(--ui-color-primary-text);
  }

  button:disabled,
  input[type="button"]:disabled,
  input[type="submit"]:disabled,
  input[type="reset"]:disabled {
    background: var(--ui-color-disabled);
    color: var(--ui-color-muted);
    border-color: var(--ui-color-muted);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
  }

  /* Actions sitting side by side at the end of a form */
  form > :is(button, a[role="button"], input[type="submit"], input[type="reset"]) + :is(button, a, input[type="submit"], input[type="reset"]) {
    margin-block-start: 0;
    margin-inline-start: var(--ui-space-3);
  }

  /* ---------- Tables ---------- */
  table {
    inline-size: 100%;
    background: var(--ui-color-surface);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-md);
  }

  caption {
    padding-block-end: var(--ui-space-3);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-weight-black);
    text-transform: uppercase;
    letter-spacing: var(--ui-tracking-wide);
    text-align: start;
  }

  th, td {
    padding: var(--ui-space-3) var(--ui-space-4);
    text-align: start;
    vertical-align: top;
    border-block-end: var(--ui-border);
  }

  thead th {
    background: var(--ui-color-inverse);
    color: var(--ui-color-inverse-text);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-weight-black);
    text-transform: uppercase;
    letter-spacing: var(--ui-tracking-wide);
    white-space: nowrap;
  }

  tbody th {
    font-weight: var(--ui-weight-black);
  }

  tbody tr:hover {
    background: color-mix(in srgb, var(--ui-color-primary) 28%, transparent);
  }

  tbody tr:last-child > * {
    border-block-end: 0;
  }

  tfoot {
    background: var(--ui-color-primary);
    color: var(--ui-color-primary-text);
    font-weight: var(--ui-weight-black);
  }

  tfoot > tr:first-child > * {
    border-block-start: var(--ui-border);
  }

  tfoot > tr:last-child > * {
    border-block-end: 0;
  }

  /* ---------- Interactive elements ---------- */
  details {
    padding: var(--ui-space-4) var(--ui-space-5);
    background: var(--ui-color-surface);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-sm);
  }

  summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    font-weight: var(--ui-weight-black);
    list-style: none;
    cursor: pointer;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  summary::after {
    content: "+";
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    display: grid;
    place-content: center;
    font-size: var(--ui-text-lg);
    line-height: 1;
    background: var(--ui-color-primary);
    color: var(--ui-color-primary-text);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
  }

  details[open] > summary::after {
    content: "–";
  }

  details[open] > summary {
    padding-block-end: var(--ui-space-3);
    border-block-end: var(--ui-border);
  }

  dialog {
    max-inline-size: min(34rem, 92vw);
    padding: var(--ui-space-5);
    background: var(--ui-color-surface);
    color: var(--ui-color-text);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-lg);
  }

  dialog::backdrop {
    background: color-mix(in srgb, #0b0b0b 72%, transparent);
  }

  /* A non-modal open dialog flows with the content instead of floating over it */
  dialog[open]:not(:modal) {
    position: static;
    margin-inline: 0;
  }

  progress,
  meter {
    inline-size: 100%;
    block-size: 1.35rem;
    appearance: none;
    background: var(--ui-color-surface);
    border: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
  }

  progress::-webkit-progress-bar {
    background: var(--ui-color-surface);
  }

  progress::-webkit-progress-value {
    background: var(--ui-color-primary);
  }

  progress::-moz-progress-bar {
    background: var(--ui-color-primary);
  }

  meter::-webkit-meter-bar {
    background: var(--ui-color-surface);
    border: 0;
  }

  meter::-webkit-meter-optimum-value {
    background: var(--ui-color-accent);
  }

  meter::-webkit-meter-suboptimum-value {
    background: var(--ui-color-primary);
  }

  meter::-webkit-meter-even-less-good-value {
    background: var(--ui-color-danger);
  }

  meter::-moz-meter-bar {
    background: var(--ui-color-accent);
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 40em) {
    body {
      padding-inline: var(--ui-space-4);
    }

    :root {
      --ui-shadow-md: 4px 4px 0 var(--ui-color-border);
      --ui-shadow-lg: 6px 6px 0 var(--ui-color-border);
    }

    form,
    article,
    aside,
    fieldset,
    body > footer {
      padding: var(--ui-space-4);
    }

    dl {
      grid-template-columns: 1fr;
      gap: var(--ui-space-1);
    }

    dd + dt {
      margin-block-start: var(--ui-space-3);
    }

    table {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }

    form > :is(button, a[role="button"], input[type="submit"], input[type="reset"]) {
      inline-size: 100%;
    }

    form > :is(button, a[role="button"], input[type="submit"], input[type="reset"]) + :is(button, a, input[type="submit"], input[type="reset"]) {
      margin-block-start: var(--ui-space-3);
      margin-inline-start: 0;
    }

    /* a plain text link needs a box before vertical margin applies */
    form > :is(button, a[role="button"], input[type="submit"], input[type="reset"]) + a:not([role="button"]) {
      display: inline-block;
    }
  }

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

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

    :is(button, input[type="button"], input[type="submit"], input[type="reset"], a[role="button"]):hover:not(:disabled),
    :is(button, input[type="button"], input[type="submit"], input[type="reset"], a[role="button"]):active:not(:disabled) {
      transform: none;
    }
  }
}