@layer base {
  .t-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 600; }
  .t-headline { font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: 600; }
  .t-title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; }
  .t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
  .t-label { font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: 0.01em; }
  .t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--on-surface-variant); }
  .t-mono { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); font-variant-numeric: tabular-nums; }

  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  .skip {
    position: absolute; left: var(--space-4); top: -100px;
    padding: var(--space-2) var(--space-4);
    background: var(--primary); color: var(--on-primary);
    border-radius: var(--radius-control); z-index: 100;
  }
  .skip:focus { top: var(--space-4); }

  .noscript {
    margin: var(--space-6);
    padding: var(--space-4);
    background: var(--warning-container);
    color: var(--on-warning);
    border-radius: var(--radius-container);
  }

  .icon { width: 20px; height: 20px; flex: none; }
  .icon--sm { width: 16px; height: 16px; }

  .container { max-width: 1100px; margin-inline: auto; padding-inline: var(--space-6); }

  .btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: 36px; padding-inline: var(--space-3);
    border-radius: var(--radius-control);
    font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500;
    border: var(--border-structure);
    background: var(--surface-container);
    color: var(--on-surface);
    transition: background var(--dur-1) var(--ease-standard);
    cursor: pointer;
  }
  .btn:hover { background: color-mix(in oklab, var(--on-surface) 8%, var(--surface-container)); }
  .btn:active { background: color-mix(in oklab, var(--on-surface) 12%, var(--surface-container)); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
  .btn--primary { background: var(--primary); color: var(--on-primary); border-color: transparent; }
  .btn--primary:hover { background: color-mix(in oklab, var(--on-primary) 8%, var(--primary)); }
  .btn--quiet { background: transparent; border-color: transparent; }
  .btn--quiet:hover { background: color-mix(in oklab, var(--on-surface) 8%, transparent); }
  .btn--danger { color: var(--on-danger); background: var(--danger); border-color: transparent; }

  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--radius-control);
    color: var(--on-surface-variant);
  }
  .icon-btn:hover { background: color-mix(in oklab, var(--on-surface) 8%, transparent); color: var(--on-surface); }

  .code-token {
    font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono);
    padding: 2px var(--space-2);
    background: var(--surface-container-high);
    border-radius: 6px;
    color: var(--on-surface);
    white-space: nowrap;
  }
}