@layer hp-native {
  h6-field { display: block; min-width: 0; }
  h6-field[hidden] { display: none; }
  
    :where(h6-field) > input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image]):not([hidden]), :where(h6-field) > textarea:not([hidden]), :where(h6-field) > select:not([hidden]) {
      box-sizing: border-box; display: block; width: 100%; min-width: 0; margin: 0;
      height: var(--hp-control-height, 2.5rem); padding: .5rem .75rem;
      border: 1px solid var(--hp-input, var(--_hp-shadcn-input, #d4d4d4)); border-radius: var(--hp-radius-md, calc(var(--hp-radius, var(--_hp-shadcn-radius, .625rem)) * 0.8));
      background-color: var(--hp-background, var(--_hp-shadcn-background, #ffffff)); color: var(--hp-foreground, var(--_hp-shadcn-foreground, #171717));
      font-family: var(--hp-font-family, ui-sans-serif, system-ui, sans-serif);
      font-size: var(--hp-font-size, .875rem); font-weight: 400;
      line-height: var(--hp-line-height, 1.25rem); letter-spacing: normal;
      box-shadow: var(--hp-shadow-inset, inset 0 1px 3px light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .4)), 0 1px 0 light-dark(rgb(255 255 255 / .8), rgb(255 255 255 / .04)));
    }
    :where(h6-field) > textarea:not([hidden]) { height: auto; min-height: calc(2 * var(--hp-control-height, 2.5rem)); resize: vertical; }
    :where(h6-field) > select:not([hidden])[multiple], :where(h6-field) > select:not([hidden])[size]:not([size='1']) { height: auto; min-height: calc(2 * var(--hp-control-height, 2.5rem)); }
    :where(h6-field) > input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image]):not([hidden])::placeholder, :where(h6-field) > textarea:not([hidden])::placeholder { color: var(--hp-muted-foreground, var(--_hp-shadcn-muted-foreground, #737373)); opacity: 1; }
    :where(h6-field) > input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image]):not([hidden]):focus, :where(h6-field) > textarea:not([hidden]):focus, :where(h6-field) > select:not([hidden]):focus { border-color: var(--hp-ring, var(--_hp-shadcn-ring, #737373)); }
    :where(h6-field) > input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image]):not([hidden]):focus-visible, :where(h6-field) > textarea:not([hidden]):focus-visible, :where(h6-field) > select:not([hidden]):focus-visible { outline: 2px solid var(--hp-ring, var(--_hp-shadcn-ring, #737373)); outline-offset: 2px; }
    :where(h6-field) > input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image]):not([hidden]):disabled, :where(h6-field) > textarea:not([hidden]):disabled, :where(h6-field) > select:not([hidden]):disabled { opacity: .5; cursor: not-allowed; }
    :where(h6-field) > input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image]):not([hidden]):user-invalid, :where(h6-field) > textarea:not([hidden]):user-invalid, :where(h6-field) > select:not([hidden]):user-invalid, :where(h6-field) > input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image]):not([hidden])[aria-invalid=true], :where(h6-field) > textarea:not([hidden])[aria-invalid=true], :where(h6-field) > select:not([hidden])[aria-invalid=true] { border-color: var(--hp-destructive, var(--_hp-shadcn-destructive, #b91c1c)); }
    @media (forced-colors: active) {
      :where(h6-field) > input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image]):not([hidden]), :where(h6-field) > textarea:not([hidden]), :where(h6-field) > select:not([hidden]) { box-shadow: none; border-color: CanvasText; }
      :where(h6-field) > input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image]):not([hidden]):focus-visible, :where(h6-field) > textarea:not([hidden]):focus-visible, :where(h6-field) > select:not([hidden]):focus-visible { outline-color: Highlight; }
      :where(h6-field) > input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image]):not([hidden]):disabled, :where(h6-field) > textarea:not([hidden]):disabled, :where(h6-field) > select:not([hidden]):disabled { border-color: GrayText; color: GrayText; opacity: 1; }
    }
  
  .hp-button {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: var(--hp-control-height, 2.5rem); padding: .5rem .75rem;
    border: 1px solid transparent; border-radius: var(--hp-radius-md, calc(var(--hp-radius, var(--_hp-shadcn-radius, .625rem)) * 0.8));
    background: var(--hp-primary, var(--_hp-shadcn-primary, #171717)); color: var(--hp-primary-foreground, var(--_hp-shadcn-primary-foreground, #fafafa));
    font-family: var(--hp-font-family, ui-sans-serif, system-ui, sans-serif); font-size: var(--hp-font-size, .875rem);
    line-height: var(--hp-line-height, 1.25rem); font-weight: 500; text-decoration: none; cursor: pointer;
    box-shadow: var(--hp-shadow-raised, inset 0 1px 1px light-dark(rgb(255 255 255 / .14), rgb(255 255 255 / .08)), inset 0 -1px 0 light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .3)), inset 0 -6px 8px -6px light-dark(rgb(0 0 0 / .14), rgb(255 255 255 / .06)), 0 1px 2px light-dark(rgb(0 0 0 / .08), rgb(0 0 0 / .25)));
  }
  .hp-button[data-variant=secondary] { background: var(--hp-secondary, var(--_hp-shadcn-secondary, #f5f5f5)); color: var(--hp-secondary-foreground, var(--_hp-shadcn-secondary-foreground, #262626)); border-color: var(--hp-input, var(--_hp-shadcn-input, #d4d4d4)); }
  .hp-button[data-variant=outline] { background: var(--hp-background, var(--_hp-shadcn-background, #ffffff)); color: var(--hp-foreground, var(--_hp-shadcn-foreground, #171717)); border-color: var(--hp-input, var(--_hp-shadcn-input, #d4d4d4)); }
  .hp-button[data-variant=ghost] { background: transparent; color: var(--hp-foreground, var(--_hp-shadcn-foreground, #171717)); box-shadow: none; }
  .hp-button[data-variant=destructive] { background: light-dark(var(--hp-destructive, var(--_hp-shadcn-destructive, #b91c1c)), color-mix(in srgb, var(--hp-destructive, var(--_hp-shadcn-destructive, #b91c1c)) 70%, #000)); color: white; }
  .hp-button:hover:not(:disabled):not([aria-disabled=true]) { filter: brightness(.94); text-decoration: none; }
  .hp-button[data-variant=ghost]:hover:not(:disabled) { background: var(--hp-accent, var(--_hp-shadcn-accent, #f5f5f5)); color: var(--hp-accent-foreground, var(--_hp-shadcn-accent-foreground, #171717)); filter: none; }
  .hp-button:active:not(:disabled) { box-shadow: var(--hp-shadow-pressed, inset 0 1px 3px light-dark(rgb(0 0 0 / .18), rgb(0 0 0 / .45)), inset 0 -1px 0 light-dark(rgb(255 255 255 / .3), rgb(255 255 255 / .08))); }
  .hp-button:focus-visible { outline: 2px solid var(--hp-ring, var(--_hp-shadcn-ring, #737373)); outline-offset: 3px; }
  .hp-button:disabled { opacity: .5; cursor: default; box-shadow: none; }
  .hp-button[data-size=sm] { min-height: 2rem; padding: .25rem .625rem; }
  .hp-button[data-size=lg] { min-height: 3rem; padding: .75rem 1rem; }
  .hp-button[data-size=icon] { width: var(--hp-control-height, 2.5rem); padding: .5rem; }
  .hp-button svg { width: 1rem; height: 1rem; flex: none; }
  .hp-button[aria-busy=true]::before { content: ""; width: .875rem; height: .875rem; flex: none; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: hp-spin .8s linear infinite; }
  @keyframes hp-spin { to { transform: rotate(1turn); } }
  @media (prefers-reduced-motion: reduce) { .hp-button[aria-busy=true]::before { animation: none; } }
  @media (forced-colors: active) { .hp-button { box-shadow: none; border: 1px solid ButtonText; } .hp-button:disabled { color: GrayText; border-color: GrayText; } }
}