@layer sprout {
  .sprout *, .sprout *::before, .sprout *::after { box-sizing: border-box; }
  .sprout :where(button, input, select, textarea) { font: inherit; }
  .sprout :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--sp-ring);
    outline-offset: 4px;
  }
  .sprout :where(button, input, select, textarea):disabled { opacity: 0.5; cursor: not-allowed; }
  .sprout :where(a) { color: inherit; text-underline-offset: 4px; }
  .sprout .sp-button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-space-2);
    min-height: 44px; padding: 0.65rem 1.15rem; border: 1px solid transparent;
    border-radius: var(--sp-radius-md); font-size: var(--sp-text-sm); font-weight: 700;
    line-height: 1.3; text-decoration: none; cursor: pointer;
    background: var(--sp-primary); color: var(--sp-primary-foreground);
    transition: background var(--sp-duration) var(--sp-ease), transform var(--sp-duration) var(--sp-ease);
  }
  .sprout .sp-button:hover:not(:disabled) { background: var(--sp-primary-hover); }
  .sprout .sp-button:active:not(:disabled) { transform: translateY(1px); }
  .sprout .sp-button[data-variant="secondary"] { background: var(--sp-accent); color: var(--sp-accent-foreground); }
  .sprout .sp-button[data-variant="outline"] { background: var(--sp-surface); border-color: var(--sp-control-border); color: var(--sp-foreground); }
  .sprout .sp-button[data-variant="ghost"] { background: transparent; color: var(--sp-foreground); }
  .sprout .sp-button:is([data-variant="outline"], [data-variant="ghost"]):hover:not(:disabled) { background: var(--sp-muted); }
  .sprout .sp-button[data-variant="secondary"]:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--sp-control-border); }
  .sprout .sp-button[data-variant="destructive"] { background: var(--sp-danger); color: var(--sp-danger-foreground); }
  .sprout .sp-button[data-variant="destructive"]:hover:not(:disabled) { box-shadow: inset 0 0 0 2px currentColor; }
  .sprout .sp-button[data-size="sm"] { padding-inline: 0.8rem; font-size: var(--sp-text-xs); }
  .sprout .sp-button[data-size="lg"] { min-height: 52px; padding-inline: 1.5rem; }
  .sprout .sp-button[data-size="icon"] { width: 44px; padding: 0; }
  .sprout .sp-badge {
    display: inline-flex; align-items: center; gap: 0.35rem; width: fit-content;
    padding: 0.25rem 0.6rem; border-radius: var(--sp-radius-pill);
    background: var(--sp-muted); color: var(--sp-muted-foreground);
    font-size: var(--sp-text-xs); font-weight: 700; line-height: 1.5;
  }
  .sprout :is(.sp-badge, .sp-alert)[data-tone="success"] { background: var(--sp-success); color: var(--sp-success-foreground); }
  .sprout :is(.sp-badge, .sp-alert)[data-tone="warning"] { background: var(--sp-warning); color: var(--sp-warning-foreground); }
  .sprout :is(.sp-badge, .sp-alert)[data-tone="danger"] { background: var(--sp-danger-soft); color: var(--sp-danger); }
  .sprout .sp-badge[data-tone="lilac"] { background: var(--sp-lilac); color: var(--sp-lilac-foreground); }
  .sprout .sp-badge[data-tone="peach"] { background: var(--sp-peach); color: var(--sp-peach-foreground); }
  .sprout .sp-card { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); }
  .sprout .sp-card-header { display: grid; gap: var(--sp-space-2); padding: var(--sp-space-6); }
  .sprout .sp-card-title { margin: 0; font-size: var(--sp-text-lg); font-weight: 700; line-height: 1.3; }
  .sprout .sp-card-description { margin: 0; color: var(--sp-muted-foreground); font-size: var(--sp-text-sm); }
  .sprout .sp-card-content { padding: 0 var(--sp-space-6) var(--sp-space-6); }
  .sprout .sp-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-space-3); padding: 0 var(--sp-space-6) var(--sp-space-6); }
  .sprout .sp-field { display: grid; gap: var(--sp-space-2); }
  .sprout .sp-label { font-size: var(--sp-text-sm); font-weight: 700; }
  .sprout .sp-field-description { margin: 0; color: var(--sp-muted-foreground); font-size: var(--sp-text-xs); }
  .sprout .sp-field-error { margin: 0; color: var(--sp-danger); font-size: var(--sp-text-xs); }
  .sprout .sp-input {
    display: block; width: 100%; min-height: 44px; padding: 0.7rem 0.85rem;
    border: 1px solid var(--sp-control-border); border-radius: var(--sp-radius-md);
    background: var(--sp-surface); color: var(--sp-foreground); font-size: var(--sp-text-sm);
  }
  .sprout .sp-input::placeholder { color: var(--sp-muted-foreground); opacity: 1; }
  .sprout .sp-input[aria-invalid="true"] { border-color: var(--sp-danger); }
  .sprout textarea.sp-input { min-height: 112px; resize: vertical; }
  .sprout .sp-check { display: inline-flex; align-items: center; gap: var(--sp-space-3); min-height: 44px; font-size: var(--sp-text-sm); cursor: pointer; }
  .sprout .sp-checkbox { width: 18px; height: 18px; margin: 0; accent-color: var(--sp-primary); flex-shrink: 0; }
  .sprout .sp-switch {
    appearance: none; position: relative; flex-shrink: 0; width: 40px; height: 24px; margin: 0;
    border: 1px solid var(--sp-control-border); border-radius: var(--sp-radius-pill);
    background: var(--sp-muted); cursor: pointer;
  }
  .sprout .sp-switch::before {
    content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--sp-muted-foreground);
    transition: transform var(--sp-duration) var(--sp-ease);
  }
  .sprout .sp-switch:checked { background: var(--sp-primary); border-color: var(--sp-primary); }
  .sprout .sp-switch:checked::before { transform: translateX(16px); background: var(--sp-primary-foreground); }
  .sprout .sp-progress { appearance: none; display: block; width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: var(--sp-radius-pill); background: var(--sp-muted); color: var(--sp-primary); }
  .sprout .sp-progress::-webkit-progress-bar { background: var(--sp-muted); border-radius: var(--sp-radius-pill); }
  .sprout .sp-progress::-webkit-progress-value { background: var(--sp-primary); border-radius: var(--sp-radius-pill); }
  .sprout .sp-progress::-moz-progress-bar { background: var(--sp-primary); border-radius: var(--sp-radius-pill); }
  .sprout .sp-alert { display: grid; gap: var(--sp-space-1); padding: var(--sp-space-4); background: var(--sp-muted); border-radius: var(--sp-radius-md); font-size: var(--sp-text-sm); }
  .sprout .sp-alert-title { margin: 0; font-size: inherit; font-weight: 700; }
  .sprout .sp-alert-description { margin: 0; }
  .sprout .sp-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--sp-lilac); color: var(--sp-lilac-foreground); font-size: var(--sp-text-xs); font-weight: 700; }
  .sprout .sp-separator { margin: var(--sp-space-6) 0; border: 0; border-top: 1px solid var(--sp-border); }
  .sprout .sp-table-wrap { overflow-x: auto; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); }
  .sprout .sp-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--sp-text-sm); }
  .sprout .sp-table caption { padding: var(--sp-space-4); text-align: left; font-weight: 700; }
  .sprout .sp-table :is(th, td) { padding: var(--sp-space-3) var(--sp-space-4); border-top: 1px solid var(--sp-border); }
  .sprout .sp-table th { background: var(--sp-muted); color: var(--sp-muted-foreground); font-size: var(--sp-text-xs); font-weight: 700; }
  .sprout .sp-table tbody tr:hover { background: var(--sp-background); }
  .sprout .sp-skeleton { height: 1rem; background: var(--sp-muted); border-radius: var(--sp-radius-sm); animation: sp-pulse 1.8s ease-in-out infinite; }
  .sprout .sp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  @keyframes sp-pulse { 50% { opacity: 0.45; } }
  @media (prefers-reduced-motion: reduce) {
    .sprout *, .sprout *::before, .sprout *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
  @media (forced-colors: active) {
    .sprout .sp-switch { appearance: auto; }
    .sprout .sp-switch::before { display: none; }
    .sprout .sp-button { border-color: ButtonText; }
  }
}