/* Forest & Fern v0.3.0 | MIT */
/* Public tokens are global. Element styling is always opt-in. */
:root {
  --ff-font-family: 'Nunito', system-ui, sans-serif;
  --ff-font-size-sm: 0.875rem;
  --ff-font-size-body: 1rem;
  --ff-font-size-title: clamp(2.25rem, 5vw, 4rem);
  --ff-line-height: 1.6;
  --ff-line-height-heading: 1.15;
  --ff-letter-spacing-heading: -0.04em;
  --ff-font-weight-body: 400;
  --ff-font-weight-label: 700;
  --ff-font-weight-heading: 900;
  --ff-space-1: 0.25rem;
  --ff-space-2: 0.5rem;
  --ff-space-3: 0.75rem;
  --ff-space-4: 1rem;
  --ff-space-6: 1.5rem;
  --ff-space-8: 2rem;
  --ff-space-12: 3rem;
  --ff-control-min-height: 46px;
  --ff-button-min-height: 44px;
  --ff-control-padding-block: 0.65rem;
  --ff-control-padding-inline: 0.9rem;
  --ff-button-padding-inline: 1.2rem;
  --ff-card-padding: var(--ff-space-6);
  --ff-border-width: 1.5px;
  --ff-control-radius: 17px 26px 12px 23px / 20px 16px 24px 18px;
  --ff-shape-radius: 29px 42px 23px 37px / 36px 25px 40px 27px;
  --ff-wave-mask: none;
  --ff-duration-subtle: 160ms;
  --ff-duration-organic: 280ms;
  --ff-duration-expressive: 440ms;
  --ff-duration: var(--ff-duration-subtle);
  --ff-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ff-hover-lift: -2px;
}

/* Density is inherited; an explicit comfortable boundary resets compact values. */
[data-ff-density='compact'] {
  --ff-control-min-height: 36px;
  --ff-button-min-height: 36px;
  --ff-control-padding-block: 0.35rem;
  --ff-control-padding-inline: 0.65rem;
  --ff-button-padding-inline: 0.85rem;
  --ff-card-padding: var(--ff-space-4);
  --ff-layout-gap: var(--ff-space-2);
}
[data-ff-density='comfortable'] {
  --ff-layout-gap: initial;
  --ff-control-min-height: 46px;
  --ff-button-min-height: 44px;
  --ff-control-padding-block: 0.65rem;
  --ff-control-padding-inline: 0.9rem;
  --ff-button-padding-inline: 1.2rem;
  --ff-card-padding: var(--ff-space-6);
}

:root,
[data-ff-theme='light'] {
  color-scheme: light;

  --ff-color-bg: #f3f4ec;
  --ff-color-surface: #fdfdf8;
  --ff-color-surface-raised: #e9eee3;
  --ff-color-primary: #174e39;
  --ff-color-primary-hover: #0f3c2b;
  --ff-color-on-primary: #ffffff;
  --ff-color-text: #1b3026;
  --ff-color-muted: #53695b;
  --ff-color-border: #a0b3a3;
  --ff-color-control-border: #6b8070;
  --ff-color-accent: #d9e9d9;
  --ff-color-track: #cad7cb;
  --ff-focus-ring: #3e7850;
  --ff-color-success: #28603d;
  --ff-color-warning: #77510b;
  --ff-color-error: #a33135;
  --ff-color-selected: #d9e9d9;
  --ff-color-on-selected: #174e39;
  --ff-color-disabled: #e2e7de;
  --ff-color-on-disabled: #5b6b5e;
  --ff-shadow: 0 10px 35px #123c2512;
  --ff-tone-neutral-fg: #1b3026;
  --ff-tone-neutral-bg: #e9eee3;
  --ff-tone-neutral-border: #6b8070;
  --ff-tone-info-fg: #245578;
  --ff-tone-info-bg: #e9f2fa;
  --ff-tone-info-border: #245578;
  --ff-tone-success-fg: #28603d;
  --ff-tone-success-bg: #e6f2e8;
  --ff-tone-success-border: #28603d;
  --ff-tone-warning-fg: #77510b;
  --ff-tone-warning-bg: #fff2d6;
  --ff-tone-warning-border: #77510b;
  --ff-tone-danger-fg: #a33135;
  --ff-tone-danger-bg: #fcebed;
  --ff-tone-danger-border: #a33135;
  --ff-color-danger: #a33135;
  --ff-color-danger-hover: #86252a;
  --ff-color-on-danger: #ffffff;
}

[data-ff-theme='dark'] {
  color-scheme: dark;

  --ff-color-bg: #101e19;
  --ff-color-surface: #1b2d25;
  --ff-color-surface-raised: #253e31;
  --ff-color-primary: #79b88c;
  --ff-color-primary-hover: #98caa4;
  --ff-color-on-primary: #10251a;
  --ff-color-text: #e7f2e5;
  --ff-color-muted: #aac2ad;
  --ff-color-border: #476956;
  --ff-color-control-border: #85a78d;
  --ff-color-accent: #30543c;
  --ff-color-track: #45644e;
  --ff-focus-ring: #b4e1b7;
  --ff-color-success: #9bcea6;
  --ff-color-warning: #f0cb80;
  --ff-color-error: #ffaba6;
  --ff-color-selected: #30543c;
  --ff-color-on-selected: #e7f2e5;
  --ff-color-disabled: #293d30;
  --ff-color-on-disabled: #adc0ad;
  --ff-shadow: 0 12px 32px #02090648;
  --ff-tone-neutral-fg: #e7f2e5;
  --ff-tone-neutral-bg: #253e31;
  --ff-tone-neutral-border: #85a78d;
  --ff-tone-info-fg: #a8d4fa;
  --ff-tone-info-bg: #20394e;
  --ff-tone-info-border: #a8d4fa;
  --ff-tone-success-fg: #9bcea6;
  --ff-tone-success-bg: #203e2b;
  --ff-tone-success-border: #9bcea6;
  --ff-tone-warning-fg: #f0cb80;
  --ff-tone-warning-bg: #44351c;
  --ff-tone-warning-border: #f0cb80;
  --ff-tone-danger-fg: #ffaba6;
  --ff-tone-danger-bg: #4b292b;
  --ff-tone-danger-border: #ffaba6;
  --ff-color-danger: #ffaba6;
  --ff-color-danger-hover: #ffc4c0;
  --ff-color-on-danger: #351516;
}

.ff-theme {
  font-family: var(--ff-font-family);
  font-size: var(--ff-font-size-body);
  font-weight: var(--ff-font-weight-body);
  line-height: var(--ff-line-height);
  color: var(--ff-color-text);
  background: var(--ff-color-bg);
}

.ff-heading {
  font-weight: var(--ff-font-weight-heading);
  line-height: var(--ff-line-height-heading);
  letter-spacing: var(--ff-letter-spacing-heading);
}

.ff-link,
.ff-native a {
  color: var(--ff-color-primary);
  text-underline-offset: 0.2em;
}

.ff-link:focus-visible,
.ff-native a:focus-visible {
  outline: 3px solid var(--ff-focus-ring);
  outline-offset: 3px;
}

[data-ff-shape='none'],
.ff-shape-none {
  --ff-shape-radius: 0;
}

[data-ff-shape='soft'],
.ff-shape-soft {
  --ff-shape-radius: 18px 24px 16px 22px / 22px 18px 24px 16px;
}

[data-ff-shape='organic'],
.ff-shape-organic {
  --ff-shape-radius: 29px 42px 23px 37px / 36px 25px 40px 27px;
}

[data-ff-shape='expressive'],
.ff-shape-expressive {
  --ff-shape-radius: 48px 24px 42px 20px / 24px 46px 22px 44px;
}

.ff-card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: var(--ff-card-padding);
  border-radius: var(--ff-shape-radius);
}

/* Only decoration is masked; content and focus outlines stay unclipped. */
:is(.ff-card, .ff-wave-surface)::before,
:is(.ff-card, .ff-wave-surface)::after {
  position: absolute;
  z-index: -1;
  content: '';
  pointer-events: none;
  border-radius: inherit;
}

:is(.ff-card, .ff-wave-surface)::before {
  inset: 0;
  background: var(--ff-color-border);
  box-shadow: var(--ff-shadow);
}

:is(.ff-card, .ff-wave-surface)::after {
  inset: var(--ff-border-width);
  background: var(--ff-card-bg, var(--ff-color-surface));
}

@supports ((mask-image: none) or (-webkit-mask-image: none)) {
  :is(.ff-card, .ff-wave-surface)::before,
  :is(.ff-card, .ff-wave-surface)::after {
    -webkit-mask-image: var(--ff-wave-mask);
    mask-image: var(--ff-wave-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

/* Local override works even inside a wave-enabled ancestor. */
.ff-no-wave,
[data-ff-wave='off'],
[data-ff-wave-strength='0'] {
  /* biome-ignore lint/complexity/noImportantStyles: Explicit off overrides a wave preset on the same boundary. */
  --ff-wave-mask: none !important;
}

@media (forced-colors: active) {
  .ff-card {
    border: 1px solid CanvasText;
    background: Canvas;
  }

  :is(.ff-card, .ff-wave-surface)::before,
  :is(.ff-card, .ff-wave-surface)::after {
    display: none;
  }
}

/* Generated by scripts/generate-waves.mjs. No SVG filters or runtime animation. */
[data-ff-wave-strength='1'],
[data-ff-wave='soft'] { --ff-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20600%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M3%203%20C44.4%205.7%2085.8%205.7%20127.3%203.0%20C168.7%200.3%20210.1%200.3%20251.5%203.0%20C292.9%205.7%20334.3%205.7%20375.8%203.0%20C417.2%200.3%20458.6%200.3%20500.0%203.0%20C541.4%205.7%20582.8%205.7%20624.3%203.0%20C665.7%200.3%20707.1%200.3%20748.5%203.0%20C789.9%205.7%20831.3%205.7%20872.8%203.0%20C914.2%200.3%20955.6%200.3%20997.0%203.0%20C994.3%2027.8%20994.3%2052.5%20997.0%2077.3%20C999.7%20102.0%20999.7%20126.7%20997.0%20151.5%20C994.3%20176.3%20994.3%20201.0%20997.0%20225.8%20C999.7%20250.5%20999.7%20275.3%20997.0%20300.0%20C994.3%20324.8%20994.3%20349.5%20997.0%20374.3%20C999.7%20399.0%20999.7%20423.8%20997.0%20448.5%20C994.3%20473.3%20994.3%20498.0%20997.0%20522.8%20C999.7%20547.5%20999.7%20572.3%20997.0%20597.0%20C955.6%20594.3%20914.2%20594.3%20872.8%20597.0%20C831.3%20599.7%20789.9%20599.7%20748.5%20597.0%20C707.1%20594.3%20665.7%20594.3%20624.3%20597.0%20C582.8%20599.7%20541.4%20599.7%20500.0%20597.0%20C458.6%20594.3%20417.2%20594.3%20375.8%20597.0%20C334.3%20599.7%20292.9%20599.7%20251.5%20597.0%20C210.1%20594.3%20168.7%20594.3%20127.3%20597.0%20C85.8%20599.7%2044.4%20599.7%203.0%20597.0%20C5.7%20572.3%205.7%20547.5%203.0%20522.8%20C0.3%20498.0%200.3%20473.3%203.0%20448.5%20C5.7%20423.8%205.7%20399.0%203.0%20374.3%20C0.3%20349.5%200.3%20324.8%203.0%20300.0%20C5.7%20275.3%205.7%20250.5%203.0%20225.8%20C0.3%20201.0%200.3%20176.3%203.0%20151.5%20C5.7%20126.8%205.7%20102.0%203.0%2077.3%20C0.3%2052.5%200.3%2027.8%203.0%203.0Z%22%2F%3E%3C%2Fsvg%3E"); }

[data-ff-wave-strength='2'] { --ff-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20600%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M5%205%20C46.3%2010.3%2087.5%2010.3%20128.8%205.0%20C170.0%20-0.3%20211.2%20-0.3%20252.5%205.0%20C293.8%2010.3%20335.0%2010.3%20376.3%205.0%20C417.5%20-0.3%20458.8%20-0.3%20500.0%205.0%20C541.3%2010.3%20582.5%2010.3%20623.8%205.0%20C665.0%20-0.3%20706.3%20-0.3%20747.5%205.0%20C788.8%2010.3%20830.0%2010.3%20871.3%205.0%20C912.5%20-0.3%20953.8%20-0.3%20995.0%205.0%20C989.7%2029.6%20989.7%2054.2%20995.0%2078.8%20C1000.3%20103.3%201000.3%20127.9%20995.0%20152.5%20C989.7%20177.1%20989.7%20201.7%20995.0%20226.3%20C1000.3%20250.8%201000.3%20275.4%20995.0%20300.0%20C989.7%20324.6%20989.7%20349.2%20995.0%20373.8%20C1000.3%20398.3%201000.3%20422.9%20995.0%20447.5%20C989.7%20472.1%20989.7%20496.7%20995.0%20521.3%20C1000.3%20545.8%201000.3%20570.4%20995.0%20595.0%20C953.8%20589.7%20912.5%20589.7%20871.3%20595.0%20C830.0%20600.3%20788.8%20600.3%20747.5%20595.0%20C706.3%20589.7%20665.0%20589.7%20623.8%20595.0%20C582.5%20600.3%20541.3%20600.3%20500.0%20595.0%20C458.8%20589.7%20417.5%20589.7%20376.3%20595.0%20C335.0%20600.3%20293.8%20600.3%20252.5%20595.0%20C211.3%20589.7%20170.0%20589.7%20128.8%20595.0%20C87.5%20600.3%2046.3%20600.3%205.0%20595.0%20C10.3%20570.4%2010.3%20545.8%205.0%20521.3%20C-0.3%20496.7%20-0.3%20472.1%205.0%20447.5%20C10.3%20422.9%2010.3%20398.3%205.0%20373.8%20C-0.3%20349.2%20-0.3%20324.6%205.0%20300.0%20C10.3%20275.4%2010.3%20250.8%205.0%20226.3%20C-0.3%20201.7%20-0.3%20177.1%205.0%20152.5%20C10.3%20127.9%2010.3%20103.3%205.0%2078.8%20C-0.3%2054.2%20-0.3%2029.6%205.0%205.0Z%22%2F%3E%3C%2Fsvg%3E"); }

[data-ff-wave-strength='3'],
[data-ff-wave='expressive'] { --ff-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20600%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M7%207%20C48.1%2015.0%2089.2%2015.0%20130.3%207.0%20C171.3%20-1.0%20212.4%20-1.0%20253.5%207.0%20C294.6%2015.0%20335.7%2015.0%20376.8%207.0%20C417.8%20-1.0%20458.9%20-1.0%20500.0%207.0%20C541.1%2015.0%20582.2%2015.0%20623.3%207.0%20C664.3%20-1.0%20705.4%20-1.0%20746.5%207.0%20C787.6%2015.0%20828.7%2015.0%20869.8%207.0%20C910.8%20-1.0%20951.9%20-1.0%20993.0%207.0%20C985.0%2031.4%20985.0%2055.8%20993.0%2080.3%20C1001.0%20104.7%201001.0%20129.1%20993.0%20153.5%20C985.0%20177.9%20985.0%20202.3%20993.0%20226.8%20C1001.0%20251.2%201001.0%20275.6%20993.0%20300.0%20C985.0%20324.4%20985.0%20348.8%20993.0%20373.3%20C1001.0%20397.7%201001.0%20422.1%20993.0%20446.5%20C985.0%20470.9%20985.0%20495.3%20993.0%20519.8%20C1001.0%20544.2%201001.0%20568.6%20993.0%20593.0%20C951.9%20585.0%20910.8%20585.0%20869.8%20593.0%20C828.7%20601.0%20787.6%20601.0%20746.5%20593.0%20C705.4%20585.0%20664.3%20585.0%20623.3%20593.0%20C582.2%20601.0%20541.1%20601.0%20500.0%20593.0%20C458.9%20585.0%20417.8%20585.0%20376.8%20593.0%20C335.7%20601.0%20294.6%20601.0%20253.5%20593.0%20C212.4%20585.0%20171.3%20585.0%20130.3%20593.0%20C89.2%20601.0%2048.1%20601.0%207.0%20593.0%20C15.0%20568.6%2015.0%20544.2%207.0%20519.8%20C-1.0%20495.3%20-1.0%20470.9%207.0%20446.5%20C15.0%20422.1%2015.0%20397.7%207.0%20373.3%20C-1.0%20348.8%20-1.0%20324.4%207.0%20300.0%20C15.0%20275.6%2015.0%20251.2%207.0%20226.8%20C-1.0%20202.3%20-1.0%20177.9%207.0%20153.5%20C15.0%20129.1%2015.0%20104.7%207.0%2080.3%20C-1.0%2055.8%20-1.0%2031.4%207.0%207.0Z%22%2F%3E%3C%2Fsvg%3E"); }

[data-ff-wave-strength='4'] { --ff-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20600%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M9%209%20C49.9%2019.7%2090.8%2019.7%20131.8%209.0%20C172.7%20-1.7%20213.6%20-1.7%20254.5%209.0%20C295.4%2019.7%20336.3%2019.7%20377.3%209.0%20C418.2%20-1.7%20459.1%20-1.7%20500.0%209.0%20C540.9%2019.7%20581.8%2019.7%20622.8%209.0%20C663.7%20-1.7%20704.6%20-1.7%20745.5%209.0%20C786.4%2019.7%20827.3%2019.7%20868.3%209.0%20C909.2%20-1.7%20950.1%20-1.7%20991.0%209.0%20C980.3%2033.3%20980.3%2057.5%20991.0%2081.8%20C1001.7%20106.0%201001.7%20130.3%20991.0%20154.5%20C980.3%20178.8%20980.3%20203.0%20991.0%20227.3%20C1001.7%20251.5%201001.7%20275.8%20991.0%20300.0%20C980.3%20324.3%20980.3%20348.5%20991.0%20372.8%20C1001.7%20397.0%201001.7%20421.3%20991.0%20445.5%20C980.3%20469.8%20980.3%20494.0%20991.0%20518.3%20C1001.7%20542.5%201001.7%20566.8%20991.0%20591.0%20C950.1%20580.3%20909.2%20580.3%20868.3%20591.0%20C827.3%20601.7%20786.4%20601.7%20745.5%20591.0%20C704.6%20580.3%20663.7%20580.3%20622.8%20591.0%20C581.8%20601.7%20540.9%20601.7%20500.0%20591.0%20C459.1%20580.3%20418.2%20580.3%20377.3%20591.0%20C336.3%20601.7%20295.4%20601.7%20254.5%20591.0%20C213.6%20580.3%20172.7%20580.3%20131.8%20591.0%20C90.8%20601.7%2049.9%20601.7%209.0%20591.0%20C19.7%20566.8%2019.7%20542.5%209.0%20518.3%20C-1.7%20494.0%20-1.7%20469.8%209.0%20445.5%20C19.7%20421.3%2019.7%20397.0%209.0%20372.8%20C-1.7%20348.5%20-1.7%20324.3%209.0%20300.0%20C19.7%20275.8%2019.7%20251.5%209.0%20227.3%20C-1.7%20203.0%20-1.7%20178.8%209.0%20154.5%20C19.7%20130.3%2019.7%20106.0%209.0%2081.8%20C-1.7%2057.5%20-1.7%2033.3%209.0%209.0Z%22%2F%3E%3C%2Fsvg%3E"); }

[data-ff-wave-strength='5'] { --ff-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20600%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M11%2011%20C51.8%2024.3%2092.5%2024.3%20133.3%2011.0%20C174.0%20-2.3%20214.7%20-2.3%20255.5%2011.0%20C296.3%2024.3%20337.0%2024.3%20377.8%2011.0%20C418.5%20-2.3%20459.3%20-2.3%20500.0%2011.0%20C540.8%2024.3%20581.5%2024.3%20622.3%2011.0%20C663.0%20-2.3%20703.8%20-2.3%20744.5%2011.0%20C785.3%2024.3%20826.0%2024.3%20866.8%2011.0%20C907.5%20-2.3%20948.3%20-2.3%20989.0%2011.0%20C975.7%2035.1%20975.7%2059.2%20989.0%2083.3%20C1002.3%20107.3%201002.3%20131.4%20989.0%20155.5%20C975.7%20179.6%20975.7%20203.7%20989.0%20227.8%20C1002.3%20251.8%201002.3%20275.9%20989.0%20300.0%20C975.7%20324.1%20975.7%20348.2%20989.0%20372.3%20C1002.3%20396.3%201002.3%20420.4%20989.0%20444.5%20C975.7%20468.6%20975.7%20492.7%20989.0%20516.8%20C1002.3%20540.8%201002.3%20564.9%20989.0%20589.0%20C948.3%20575.7%20907.5%20575.7%20866.8%20589.0%20C826.0%20602.3%20785.3%20602.3%20744.5%20589.0%20C703.8%20575.7%20663.0%20575.7%20622.3%20589.0%20C581.5%20602.3%20540.8%20602.3%20500.0%20589.0%20C459.3%20575.7%20418.5%20575.7%20377.8%20589.0%20C337.0%20602.3%20296.3%20602.3%20255.5%20589.0%20C214.8%20575.7%20174.0%20575.7%20133.3%20589.0%20C92.5%20602.3%2051.8%20602.3%2011.0%20589.0%20C24.3%20564.9%2024.3%20540.8%2011.0%20516.8%20C-2.3%20492.7%20-2.3%20468.6%2011.0%20444.5%20C24.3%20420.4%2024.3%20396.3%2011.0%20372.3%20C-2.3%20348.2%20-2.3%20324.1%2011.0%20300.0%20C24.3%20275.9%2024.3%20251.8%2011.0%20227.8%20C-2.3%20203.7%20-2.3%20179.6%2011.0%20155.5%20C24.3%20131.4%2024.3%20107.3%2011.0%2083.3%20C-2.3%2059.2%20-2.3%2035.1%2011.0%2011.0Z%22%2F%3E%3C%2Fsvg%3E"); }

[data-ff-wave-strength='6'] { --ff-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20600%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M13%2013%20C53.6%2029.0%2094.2%2029.0%20134.8%2013.0%20C175.3%20-3.0%20215.9%20-3.0%20256.5%2013.0%20C297.1%2029.0%20337.7%2029.0%20378.3%2013.0%20C418.8%20-3.0%20459.4%20-3.0%20500.0%2013.0%20C540.6%2029.0%20581.2%2029.0%20621.8%2013.0%20C662.3%20-3.0%20702.9%20-3.0%20743.5%2013.0%20C784.1%2029.0%20824.7%2029.0%20865.3%2013.0%20C905.8%20-3.0%20946.4%20-3.0%20987.0%2013.0%20C971.0%2036.9%20971.0%2060.8%20987.0%2084.8%20C1003.0%20108.7%201003.0%20132.6%20987.0%20156.5%20C971.0%20180.4%20971.0%20204.3%20987.0%20228.3%20C1003.0%20252.2%201003.0%20276.1%20987.0%20300.0%20C971.0%20323.9%20971.0%20347.8%20987.0%20371.8%20C1003.0%20395.7%201003.0%20419.6%20987.0%20443.5%20C971.0%20467.4%20971.0%20491.3%20987.0%20515.3%20C1003.0%20539.2%201003.0%20563.1%20987.0%20587.0%20C946.4%20571.0%20905.8%20571.0%20865.3%20587.0%20C824.7%20603.0%20784.1%20603.0%20743.5%20587.0%20C702.9%20571.0%20662.3%20571.0%20621.8%20587.0%20C581.2%20603.0%20540.6%20603.0%20500.0%20587.0%20C459.4%20571.0%20418.8%20571.0%20378.3%20587.0%20C337.7%20603.0%20297.1%20603.0%20256.5%20587.0%20C215.9%20571.0%20175.3%20571.0%20134.8%20587.0%20C94.2%20603.0%2053.6%20603.0%2013.0%20587.0%20C29.0%20563.1%2029.0%20539.2%2013.0%20515.3%20C-3.0%20491.3%20-3.0%20467.4%2013.0%20443.5%20C29.0%20419.6%2029.0%20395.7%2013.0%20371.8%20C-3.0%20347.8%20-3.0%20323.9%2013.0%20300.0%20C29.0%20276.1%2029.0%20252.2%2013.0%20228.3%20C-3.0%20204.3%20-3.0%20180.4%2013.0%20156.5%20C29.0%20132.6%2029.0%20108.7%2013.0%2084.8%20C-3.0%2060.8%20-3.0%2036.9%2013.0%2013.0Z%22%2F%3E%3C%2Fsvg%3E"); }

[data-ff-wave-strength='7'] { --ff-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20600%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M15%2015%20C55.4%2033.7%2095.8%2033.7%20136.3%2015.0%20C176.7%20-3.7%20217.1%20-3.7%20257.5%2015.0%20C297.9%2033.7%20338.3%2033.7%20378.8%2015.0%20C419.2%20-3.7%20459.6%20-3.7%20500.0%2015.0%20C540.4%2033.7%20580.8%2033.7%20621.3%2015.0%20C661.7%20-3.7%20702.1%20-3.7%20742.5%2015.0%20C782.9%2033.7%20823.3%2033.7%20863.8%2015.0%20C904.2%20-3.7%20944.6%20-3.7%20985.0%2015.0%20C966.3%2038.8%20966.3%2062.5%20985.0%2086.3%20C1003.7%20110.0%201003.7%20133.8%20985.0%20157.5%20C966.3%20181.3%20966.3%20205.0%20985.0%20228.8%20C1003.7%20252.5%201003.7%20276.3%20985.0%20300.0%20C966.3%20323.8%20966.3%20347.5%20985.0%20371.3%20C1003.7%20395.0%201003.7%20418.8%20985.0%20442.5%20C966.3%20466.3%20966.3%20490.0%20985.0%20513.8%20C1003.7%20537.5%201003.7%20561.3%20985.0%20585.0%20C944.6%20566.3%20904.2%20566.3%20863.8%20585.0%20C823.3%20603.7%20782.9%20603.7%20742.5%20585.0%20C702.1%20566.3%20661.7%20566.3%20621.3%20585.0%20C580.8%20603.7%20540.4%20603.7%20500.0%20585.0%20C459.6%20566.3%20419.2%20566.3%20378.8%20585.0%20C338.3%20603.7%20297.9%20603.7%20257.5%20585.0%20C217.1%20566.3%20176.7%20566.3%20136.3%20585.0%20C95.8%20603.7%2055.4%20603.7%2015.0%20585.0%20C33.7%20561.3%2033.7%20537.5%2015.0%20513.8%20C-3.7%20490.0%20-3.7%20466.3%2015.0%20442.5%20C33.7%20418.8%2033.7%20395.0%2015.0%20371.3%20C-3.7%20347.5%20-3.7%20323.8%2015.0%20300.0%20C33.7%20276.3%2033.7%20252.5%2015.0%20228.8%20C-3.7%20205.0%20-3.7%20181.3%2015.0%20157.5%20C33.7%20133.8%2033.7%20110.0%2015.0%2086.3%20C-3.7%2062.5%20-3.7%2038.8%2015.0%2015.0Z%22%2F%3E%3C%2Fsvg%3E"); }

[data-ff-wave-strength='8'] { --ff-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20600%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M17%2017%20C57.3%2038.3%2097.5%2038.3%20137.8%2017.0%20C178.0%20-4.3%20218.2%20-4.3%20258.5%2017.0%20C298.8%2038.3%20339.0%2038.3%20379.3%2017.0%20C419.5%20-4.3%20459.8%20-4.3%20500.0%2017.0%20C540.3%2038.3%20580.5%2038.3%20620.8%2017.0%20C661.0%20-4.3%20701.3%20-4.3%20741.5%2017.0%20C781.8%2038.3%20822.0%2038.3%20862.3%2017.0%20C902.5%20-4.3%20942.8%20-4.3%20983.0%2017.0%20C961.7%2040.6%20961.7%2064.2%20983.0%2087.8%20C1004.3%20111.3%201004.3%20134.9%20983.0%20158.5%20C961.7%20182.1%20961.7%20205.7%20983.0%20229.3%20C1004.3%20252.8%201004.3%20276.4%20983.0%20300.0%20C961.7%20323.6%20961.7%20347.2%20983.0%20370.8%20C1004.3%20394.3%201004.3%20417.9%20983.0%20441.5%20C961.7%20465.1%20961.7%20488.7%20983.0%20512.3%20C1004.3%20535.8%201004.3%20559.4%20983.0%20583.0%20C942.8%20561.7%20902.5%20561.7%20862.3%20583.0%20C822.0%20604.3%20781.8%20604.3%20741.5%20583.0%20C701.3%20561.7%20661.0%20561.7%20620.8%20583.0%20C580.5%20604.3%20540.3%20604.3%20500.0%20583.0%20C459.8%20561.7%20419.5%20561.7%20379.3%20583.0%20C339.0%20604.3%20298.8%20604.3%20258.5%20583.0%20C218.3%20561.7%20178.0%20561.7%20137.8%20583.0%20C97.5%20604.3%2057.3%20604.3%2017.0%20583.0%20C38.3%20559.4%2038.3%20535.8%2017.0%20512.3%20C-4.3%20488.7%20-4.3%20465.1%2017.0%20441.5%20C38.3%20417.9%2038.3%20394.3%2017.0%20370.8%20C-4.3%20347.2%20-4.3%20323.6%2017.0%20300.0%20C38.3%20276.4%2038.3%20252.8%2017.0%20229.3%20C-4.3%20205.7%20-4.3%20182.1%2017.0%20158.5%20C38.3%20134.9%2038.3%20111.3%2017.0%2087.8%20C-4.3%2064.2%20-4.3%2040.6%2017.0%2017.0Z%22%2F%3E%3C%2Fsvg%3E"); }

[data-ff-wave-strength='9'] { --ff-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20600%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M19%2019%20C59.1%2043.0%2099.2%2043.0%20139.3%2019.0%20C179.3%20-5.0%20219.4%20-5.0%20259.5%2019.0%20C299.6%2043.0%20339.7%2043.0%20379.8%2019.0%20C419.8%20-5.0%20459.9%20-5.0%20500.0%2019.0%20C540.1%2043.0%20580.2%2043.0%20620.3%2019.0%20C660.3%20-5.0%20700.4%20-5.0%20740.5%2019.0%20C780.6%2043.0%20820.7%2043.0%20860.8%2019.0%20C900.8%20-5.0%20940.9%20-5.0%20981.0%2019.0%20C957.0%2042.4%20957.0%2065.8%20981.0%2089.3%20C1005.0%20112.7%201005.0%20136.1%20981.0%20159.5%20C957.0%20182.9%20957.0%20206.3%20981.0%20229.8%20C1005.0%20253.2%201005.0%20276.6%20981.0%20300.0%20C957.0%20323.4%20957.0%20346.8%20981.0%20370.3%20C1005.0%20393.7%201005.0%20417.1%20981.0%20440.5%20C957.0%20463.9%20957.0%20487.3%20981.0%20510.8%20C1005.0%20534.2%201005.0%20557.6%20981.0%20581.0%20C940.9%20557.0%20900.8%20557.0%20860.8%20581.0%20C820.7%20605.0%20780.6%20605.0%20740.5%20581.0%20C700.4%20557.0%20660.3%20557.0%20620.3%20581.0%20C580.2%20605.0%20540.1%20605.0%20500.0%20581.0%20C459.9%20557.0%20419.8%20557.0%20379.8%20581.0%20C339.7%20605.0%20299.6%20605.0%20259.5%20581.0%20C219.4%20557.0%20179.3%20557.0%20139.3%20581.0%20C99.2%20605.0%2059.1%20605.0%2019.0%20581.0%20C43.0%20557.6%2043.0%20534.2%2019.0%20510.8%20C-5.0%20487.3%20-5.0%20463.9%2019.0%20440.5%20C43.0%20417.1%2043.0%20393.7%2019.0%20370.3%20C-5.0%20346.8%20-5.0%20323.4%2019.0%20300.0%20C43.0%20276.6%2043.0%20253.2%2019.0%20229.8%20C-5.0%20206.3%20-5.0%20182.9%2019.0%20159.5%20C43.0%20136.1%2043.0%20112.7%2019.0%2089.3%20C-5.0%2065.8%20-5.0%2042.4%2019.0%2019.0Z%22%2F%3E%3C%2Fsvg%3E"); }

[data-ff-wave-strength='10'] { --ff-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20600%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M21%2021%20C60.9%2047.7%20100.8%2047.7%20140.8%2021.0%20C180.7%20-5.7%20220.6%20-5.7%20260.5%2021.0%20C300.4%2047.7%20340.3%2047.7%20380.3%2021.0%20C420.2%20-5.7%20460.1%20-5.7%20500.0%2021.0%20C539.9%2047.7%20579.8%2047.7%20619.8%2021.0%20C659.7%20-5.7%20699.6%20-5.7%20739.5%2021.0%20C779.4%2047.7%20819.3%2047.7%20859.3%2021.0%20C899.2%20-5.7%20939.1%20-5.7%20979.0%2021.0%20C952.3%2044.3%20952.3%2067.5%20979.0%2090.8%20C1005.7%20114.0%201005.7%20137.3%20979.0%20160.5%20C952.3%20183.8%20952.3%20207.0%20979.0%20230.3%20C1005.7%20253.5%201005.7%20276.8%20979.0%20300.0%20C952.3%20323.3%20952.3%20346.5%20979.0%20369.8%20C1005.7%20393.0%201005.7%20416.3%20979.0%20439.5%20C952.3%20462.8%20952.3%20486.0%20979.0%20509.3%20C1005.7%20532.5%201005.7%20555.8%20979.0%20579.0%20C939.1%20552.3%20899.2%20552.3%20859.3%20579.0%20C819.3%20605.7%20779.4%20605.7%20739.5%20579.0%20C699.6%20552.3%20659.7%20552.3%20619.8%20579.0%20C579.8%20605.7%20539.9%20605.7%20500.0%20579.0%20C460.1%20552.3%20420.2%20552.3%20380.3%20579.0%20C340.3%20605.7%20300.4%20605.7%20260.5%20579.0%20C220.6%20552.3%20180.7%20552.3%20140.8%20579.0%20C100.8%20605.7%2060.9%20605.7%2021.0%20579.0%20C47.7%20555.8%2047.7%20532.5%2021.0%20509.3%20C-5.7%20486.0%20-5.7%20462.8%2021.0%20439.5%20C47.7%20416.3%2047.7%20393.0%2021.0%20369.8%20C-5.7%20346.5%20-5.7%20323.3%2021.0%20300.0%20C47.7%20276.8%2047.7%20253.5%2021.0%20230.3%20C-5.7%20207.0%20-5.7%20183.8%2021.0%20160.5%20C47.7%20137.3%2047.7%20114.0%2021.0%2090.8%20C-5.7%2067.5%20-5.7%2044.3%2021.0%2021.0Z%22%2F%3E%3C%2Fsvg%3E"); }

[data-ff-wave-strength='11'] { --ff-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20600%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M23%2023%20C62.8%2052.3%20102.5%2052.3%20142.3%2023.0%20C182.0%20-6.3%20221.7%20-6.3%20261.5%2023.0%20C301.3%2052.3%20341.0%2052.3%20380.8%2023.0%20C420.5%20-6.3%20460.3%20-6.3%20500.0%2023.0%20C539.8%2052.3%20579.5%2052.3%20619.3%2023.0%20C659.0%20-6.3%20698.8%20-6.3%20738.5%2023.0%20C778.3%2052.3%20818.0%2052.3%20857.8%2023.0%20C897.5%20-6.3%20937.3%20-6.3%20977.0%2023.0%20C947.7%2046.1%20947.7%2069.2%20977.0%2092.3%20C1006.3%20115.3%201006.3%20138.4%20977.0%20161.5%20C947.7%20184.6%20947.7%20207.7%20977.0%20230.8%20C1006.3%20253.8%201006.3%20276.9%20977.0%20300.0%20C947.7%20323.1%20947.7%20346.2%20977.0%20369.3%20C1006.3%20392.3%201006.3%20415.4%20977.0%20438.5%20C947.7%20461.6%20947.7%20484.7%20977.0%20507.8%20C1006.3%20530.8%201006.3%20553.9%20977.0%20577.0%20C937.3%20547.7%20897.5%20547.7%20857.8%20577.0%20C818.0%20606.3%20778.3%20606.3%20738.5%20577.0%20C698.8%20547.7%20659.0%20547.7%20619.3%20577.0%20C579.5%20606.3%20539.8%20606.3%20500.0%20577.0%20C460.3%20547.7%20420.5%20547.7%20380.8%20577.0%20C341.0%20606.3%20301.3%20606.3%20261.5%20577.0%20C221.8%20547.7%20182.0%20547.7%20142.3%20577.0%20C102.5%20606.3%2062.8%20606.3%2023.0%20577.0%20C52.3%20553.9%2052.3%20530.8%2023.0%20507.8%20C-6.3%20484.7%20-6.3%20461.6%2023.0%20438.5%20C52.3%20415.4%2052.3%20392.3%2023.0%20369.3%20C-6.3%20346.2%20-6.3%20323.1%2023.0%20300.0%20C52.3%20276.9%2052.3%20253.8%2023.0%20230.8%20C-6.3%20207.7%20-6.3%20184.6%2023.0%20161.5%20C52.3%20138.4%2052.3%20115.3%2023.0%2092.3%20C-6.3%2069.2%20-6.3%2046.1%2023.0%2023.0Z%22%2F%3E%3C%2Fsvg%3E"); }

[data-ff-wave-strength='12'] { --ff-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20600%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M25%2025%20C64.6%2057.0%20104.2%2057.0%20143.8%2025.0%20C183.3%20-7.0%20222.9%20-7.0%20262.5%2025.0%20C302.1%2057.0%20341.7%2057.0%20381.3%2025.0%20C420.8%20-7.0%20460.4%20-7.0%20500.0%2025.0%20C539.6%2057.0%20579.2%2057.0%20618.8%2025.0%20C658.3%20-7.0%20697.9%20-7.0%20737.5%2025.0%20C777.1%2057.0%20816.7%2057.0%20856.3%2025.0%20C895.8%20-7.0%20935.4%20-7.0%20975.0%2025.0%20C943.0%2047.9%20943.0%2070.8%20975.0%2093.8%20C1007.0%20116.7%201007.0%20139.6%20975.0%20162.5%20C943.0%20185.4%20943.0%20208.3%20975.0%20231.3%20C1007.0%20254.2%201007.0%20277.1%20975.0%20300.0%20C943.0%20322.9%20943.0%20345.8%20975.0%20368.8%20C1007.0%20391.7%201007.0%20414.6%20975.0%20437.5%20C943.0%20460.4%20943.0%20483.3%20975.0%20506.3%20C1007.0%20529.2%201007.0%20552.1%20975.0%20575.0%20C935.4%20543.0%20895.8%20543.0%20856.3%20575.0%20C816.7%20607.0%20777.1%20607.0%20737.5%20575.0%20C697.9%20543.0%20658.3%20543.0%20618.8%20575.0%20C579.2%20607.0%20539.6%20607.0%20500.0%20575.0%20C460.4%20543.0%20420.8%20543.0%20381.3%20575.0%20C341.7%20607.0%20302.1%20607.0%20262.5%20575.0%20C222.9%20543.0%20183.3%20543.0%20143.8%20575.0%20C104.2%20607.0%2064.6%20607.0%2025.0%20575.0%20C57.0%20552.1%2057.0%20529.2%2025.0%20506.3%20C-7.0%20483.3%20-7.0%20460.4%2025.0%20437.5%20C57.0%20414.6%2057.0%20391.7%2025.0%20368.8%20C-7.0%20345.8%20-7.0%20322.9%2025.0%20300.0%20C57.0%20277.1%2057.0%20254.2%2025.0%20231.3%20C-7.0%20208.3%20-7.0%20185.4%2025.0%20162.5%20C57.0%20139.6%2057.0%20116.7%2025.0%2093.8%20C-7.0%2070.8%20-7.0%2047.9%2025.0%2025.0Z%22%2F%3E%3C%2Fsvg%3E"); }


.ff-button,
.ff-input,
.ff-select,
.ff-radio,
.ff-checkbox,
.ff-switch,
.ff-range,
.ff-native :is(button, input, select, textarea) {
  box-sizing: border-box;
  font: inherit;
  accent-color: var(--ff-color-primary);
}

.ff-button,
.ff-native button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ff-space-2);
  min-height: var(--ff-button-min-height);
  padding: var(--ff-control-padding-block) var(--ff-button-padding-inline);
  border: var(--ff-border-width) solid transparent;
  border-radius: var(--ff-control-radius);
  font-weight: var(--ff-font-weight-label);
  text-decoration: none;
  color: var(--ff-color-on-primary);
  background: var(--ff-color-primary);
  cursor: pointer;
}

.ff-button:hover,
.ff-native button:hover {
  background: var(--ff-color-primary-hover);
}

.ff-button-secondary,
.ff-native button.ff-button-secondary {
  border-color: var(--ff-color-control-border);
  color: var(--ff-color-text);
  background: var(--ff-color-accent);
}

.ff-button-quiet,
.ff-native button.ff-button-quiet {
  color: var(--ff-color-primary);
  background: transparent;
}

.ff-button-secondary:hover,
.ff-button-quiet:hover {
  background: var(--ff-color-surface-raised);
}

.ff-input,
.ff-select,
.ff-native
  :is(
    input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='hidden']),
    select,
    textarea
  ) {
  width: 100%;
  min-width: 0;
  min-height: var(--ff-control-min-height);
  padding: var(--ff-control-padding-block) var(--ff-control-padding-inline);
  border: var(--ff-border-width) solid var(--ff-color-control-border);
  border-radius: var(--ff-control-radius);
  color: var(--ff-color-text);
  background: var(--ff-color-surface);
}

textarea.ff-input {
  resize: vertical;
}
.ff-input::placeholder,
.ff-native input::placeholder,
.ff-native textarea::placeholder {
  color: var(--ff-color-muted);
  opacity: 1;
}

.ff-input[aria-invalid='true'],
.ff-input:invalid:not(:placeholder-shown),
.ff-native input[aria-invalid='true'] {
  border-color: var(--ff-color-error);
}

.ff-radio,
.ff-checkbox,
.ff-native input:is([type='radio'], [type='checkbox']):not(.ff-switch) {
  width: 24px;
  height: 24px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

/* Native radio/checkbox rendering retains checked and indeterminate glyphs. */
.ff-switch {
  position: relative;
  flex-shrink: 0;
  appearance: none;
  width: 58px;
  height: 32px;
  margin: 0;
  border: 2px solid var(--ff-color-control-border);
  border-radius: 18px 27px 15px 23px;
  background: var(--ff-color-track);
  cursor: pointer;
}

.ff-switch::before {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 44% 56% 38% 62% / 57% 40% 60% 43%;
  background: var(--ff-color-surface);
  transition: left var(--ff-duration) var(--ff-ease);
  content: '';
}

.ff-switch:checked {
  border-color: var(--ff-color-primary);
  background: var(--ff-color-primary);
}

.ff-switch:checked::before {
  left: 29px;
  background: var(--ff-color-on-primary);
}

.ff-range,
.ff-native input[type='range'] {
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.ff-range::-webkit-slider-runnable-track,
.ff-native input[type='range']::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 13px 17px 9px 13px;
  background: var(--ff-color-track);
}

.ff-range::-moz-range-track,
.ff-native input[type='range']::-moz-range-track {
  height: 10px;
  border-radius: 13px 17px 9px 13px;
  background: var(--ff-color-track);
}

.ff-range::-webkit-slider-thumb,
.ff-native input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -9px;
  border: 3px solid var(--ff-color-primary);
  border-radius: 45% 55% 38% 62% / 58% 37% 63% 42%;
  background: var(--ff-color-surface);
}

.ff-range::-moz-range-thumb,
.ff-native input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid var(--ff-color-primary);
  border-radius: 45% 55% 38% 62% / 58% 37% 63% 42%;
  background: var(--ff-color-surface);
}

:is(
  .ff-button,
  .ff-input,
  .ff-select,
  .ff-radio,
  .ff-checkbox,
  .ff-switch,
  .ff-range,
  .ff-interactive
):focus-visible,
.ff-native :is(button, input, select, textarea):focus-visible {
  outline: 3px solid var(--ff-focus-ring);
  outline-offset: 3px;
}

:is(.ff-button, .ff-input, .ff-select, .ff-switch):disabled,
.ff-native
  :is(
    button,
    input:not([type='radio'], [type='checkbox'], [type='range']),
    select,
    textarea
  ):disabled {
  color: var(--ff-color-on-disabled);
  background: var(--ff-color-disabled);
  cursor: not-allowed;
}

:is(.ff-radio, .ff-checkbox, .ff-range):disabled {
  cursor: not-allowed;
}

@media (forced-colors: active) {
  .ff-switch {
    appearance: auto;
    width: 24px;
    height: 24px;
  }

  .ff-switch::before {
    display: none;
  }

  .ff-button,
  .ff-input,
  .ff-select {
    border-color: ButtonText;
  }

  .ff-range::-webkit-slider-thumb {
    border-color: Highlight;
  }
  .ff-range::-moz-range-thumb {
    border-color: Highlight;
  }
}

/* Preserve the native hidden attribute even on controls with explicit display. */
.ff-button[hidden],
.ff-native button[hidden] {
  display: none;
}

/* Size applies to this control only; density continues to govern its siblings. */
:is(
  .ff-button,
  .ff-input,
  .ff-select,
  .ff-native button,
  .ff-native input,
  .ff-native select,
  .ff-native textarea
)[data-ff-size='sm'] {
  --ff-control-min-height: 36px;
  --ff-button-min-height: 36px;
  --ff-control-padding-block: 0.35rem;
  --ff-control-padding-inline: 0.65rem;
  --ff-button-padding-inline: 0.85rem;

  font-size: var(--ff-font-size-sm);
}
:is(
  .ff-button,
  .ff-input,
  .ff-select,
  .ff-native button,
  .ff-native input,
  .ff-native select,
  .ff-native textarea
)[data-ff-size='lg'] {
  --ff-control-min-height: 52px;
  --ff-button-min-height: 52px;
  --ff-control-padding-block: 0.8rem;
  --ff-control-padding-inline: 1.1rem;
  --ff-button-padding-inline: 1.5rem;
}
.ff-button.ff-button-icon,
.ff-native button.ff-button-icon {
  width: max(44px, var(--ff-control-min-height));
  height: max(44px, var(--ff-control-min-height));
  padding: 0;
  flex-shrink: 0;
}
.ff-button-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.ff-button.ff-button-danger,
.ff-native button.ff-button-danger {
  color: var(--ff-color-on-danger);
  background: var(--ff-color-danger);
}
.ff-button.ff-button-danger:hover,
.ff-native button.ff-button-danger:hover {
  background: var(--ff-color-danger-hover);
}
:is(.ff-button, .ff-native button):active:not(:disabled) {
  box-shadow: inset 0 0 0 2px currentColor;
}
/* aria-busy communicates progress. Disable repeat submissions in application code. */
:is(.ff-button, .ff-native button)[aria-busy='true'] {
  cursor: progress;
}
.ff-button.ff-button-danger:disabled,
.ff-native button.ff-button-danger:disabled {
  color: var(--ff-color-on-disabled);
  background: var(--ff-color-disabled);
}
@media (any-pointer: coarse) {
  :is(.ff-button, .ff-input, .ff-select, .ff-native button, .ff-native select, .ff-native textarea),
  .ff-native
    input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='hidden']) {
    min-height: max(44px, var(--ff-control-min-height));
  }
}

[data-ff-motion='subtle'] {
  --ff-duration: var(--ff-duration-subtle);
}
[data-ff-motion='organic'] {
  --ff-duration: var(--ff-duration-organic);
}
[data-ff-motion='expressive'] {
  --ff-duration: var(--ff-duration-expressive);
}

.ff-interactive,
.ff-button,
.ff-native button {
  /* Palette changes are immediate: interpolated backgrounds can lose text contrast. */
  transition: transform var(--ff-duration) var(--ff-ease);
}

@media (hover: hover) and (pointer: fine) {
  .ff-interactive:hover,
  .ff-button:not(:disabled):hover,
  .ff-native button:not(:disabled):hover {
    transform: translateY(var(--ff-hover-lift));
  }
}

.ff-button:not(:disabled):active,
.ff-native button:not(:disabled):active {
  transform: scale(0.98);
}

[data-ff-motion='none'],
[data-ff-reduced-motion='true'] {
  --ff-duration: 0ms;
  --ff-hover-lift: 0px;
}

[data-ff-motion='none'] :is(.ff-button, .ff-interactive, button),
[data-ff-reduced-motion='true'] :is(.ff-button, .ff-interactive, button) {
  /* biome-ignore lint/complexity/noImportantStyles: Explicit static mode must override hover and press states. */
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .ff-theme {
    --ff-duration: 0ms;
    --ff-hover-lift: 0px;
  }

  .ff-button,
  .ff-interactive,
  .ff-native button,
  .ff-switch::before {
    /* biome-ignore lint/complexity/noImportantStyles: System reduced motion must override hover and press. */
    transition: none !important;
    /* biome-ignore lint/complexity/noImportantStyles: Accessibility preference takes priority. */
    animation: none !important;
    /* biome-ignore lint/complexity/noImportantStyles: Accessibility preference takes priority. */
    transform: none !important;
  }

  .ff-switch:checked::before {
    left: 29px;
  }
}

/* Short entrances run once. No animated height, palette, masks, or layout. */
@keyframes ff-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* A slow full turn of the SVG plane, with a small tilt and float. */
@keyframes ff-brand-orbit {
  0% {
    transform: translateY(0) rotateX(12deg) rotateY(0deg);
  }
  25% {
    transform: translateY(-2px) rotateX(0deg) rotateY(90deg);
  }
  50% {
    transform: translateY(-4px) rotateX(-12deg) rotateY(180deg);
  }
  75% {
    transform: translateY(-2px) rotateX(0deg) rotateY(270deg);
  }
  100% {
    transform: translateY(0) rotateX(12deg) rotateY(360deg);
  }
}
.ff-dialog[open],
.ff-tab-panel:not([hidden]),
.ff-accordion[open] > .ff-accordion-content,
.ff-chart-line,
.ff-chart-bar {
  animation: ff-enter var(--ff-duration) var(--ff-ease) both;
}
@supports selector(:popover-open) {
  .ff-popover:popover-open {
    animation: ff-enter var(--ff-duration) var(--ff-ease) both;
  }
}
/* Ambient movement is explicitly opt-in and can be paused by the consumer. */
.ff-brand-mark[data-ff-ambient='true'] {
  perspective: 320px;
}
.ff-brand-mark[data-ff-ambient='true'] svg {
  transform-origin: center;
  animation: ff-brand-orbit 12s linear infinite;
}
.ff-brand-mark[data-ff-paused='true'] svg,
.ff-brand-mark:hover svg {
  animation-play-state: paused;
}
[data-ff-motion='none']
  :is(
    .ff-dialog,
    .ff-popover,
    .ff-tab-panel,
    .ff-accordion-content,
    .ff-chart-line,
    .ff-chart-bar,
    .ff-brand-mark svg
  ),
[data-ff-reduced-motion='true']
  :is(
    .ff-dialog,
    .ff-popover,
    .ff-tab-panel,
    .ff-accordion-content,
    .ff-chart-line,
    .ff-chart-bar,
    .ff-brand-mark svg
  ) {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .ff-dialog[open],
  .ff-tab-panel:not([hidden]),
  .ff-accordion[open] > .ff-accordion-content,
  .ff-chart-line,
  .ff-chart-bar,
  .ff-brand-mark[data-ff-ambient='true'] svg {
    animation: none;
  }
  @supports selector(:popover-open) {
    .ff-popover:popover-open {
      animation: none;
    }
  }
}

/* Native patterns, opt-in styling. Application behavior stays with the consumer. */
.ff-table-region {
  max-width: 100%;
  overflow: auto;
  border: var(--ff-border-width) solid var(--ff-color-border);
  border-radius: var(--ff-shape-radius);
  background: var(--ff-color-surface);
}

.ff-table-region:focus-visible {
  outline: 3px solid var(--ff-focus-ring);
  outline-offset: 3px;
}

.ff-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ff-color-text);
  text-align: start;
  font-variant-numeric: tabular-nums;
}

.ff-table caption {
  padding: 1rem;
  font-weight: var(--ff-font-weight-label);
  text-align: start;
}

.ff-table th,
.ff-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ff-color-border);
  vertical-align: middle;
}

.ff-table thead {
  background: var(--ff-color-surface-raised);
}
.ff-table tbody tr:last-child > * {
  border-bottom: 0;
}
.ff-table tbody tr:hover {
  background: var(--ff-color-surface-raised);
}
.ff-table [data-ff-numeric] {
  text-align: end;
}
.ff-table[data-ff-density='compact'] :is(th, td) {
  padding-block: 0.5rem;
}

.ff-table-sort {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  font: inherit;
  font-weight: var(--ff-font-weight-label);
  text-align: inherit;
  color: var(--ff-color-primary);
  background: transparent;
  cursor: pointer;
}

.ff-table-sort:focus-visible {
  outline: 3px solid var(--ff-focus-ring);
  outline-offset: 3px;
}

.ff-chart {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ff-color-primary);
}

.ff-chart text {
  font: inherit;
  font-size: 13px;
  fill: var(--ff-color-muted);
}
.ff-chart-grid {
  stroke: var(--ff-color-border);
  stroke-width: 1;
}
.ff-chart-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ff-chart-area {
  fill: var(--ff-color-accent);
}
.ff-chart-bar {
  fill: var(--ff-color-primary);
}
.ff-chart-point {
  fill: var(--ff-color-surface);
  stroke: var(--ff-color-primary);
  stroke-width: 3;
}

.ff-dialog,
.ff-popover {
  box-sizing: border-box;
  width: min(32rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  padding: var(--ff-space-6);
  overflow: auto;
  border: var(--ff-border-width) solid var(--ff-color-control-border);
  border-radius: var(--ff-shape-radius);
  color: var(--ff-color-text);
  background: var(--ff-color-surface);
  box-shadow: var(--ff-shadow);
  font-family: var(--ff-font-family);
  line-height: var(--ff-line-height);
}

.ff-dialog::backdrop {
  background: rgb(0 0 0 / 45%);
}
.ff-dialog[data-ff-inline] {
  position: static;
  margin-block: 1rem;
}
.ff-overlay-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}
.ff-overlay-header h2 {
  margin: 0;
}
.ff-overlay-actions {
  display: flex;
  justify-content: end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--ff-space-6);
}
.ff-popover {
  width: min(20rem, calc(100% - 2rem));
}
.ff-popover-actions {
  display: grid;
  gap: 0.5rem;
}
.ff-popover-actions .ff-button {
  justify-content: start;
  width: 100%;
}

/* Unsupported Popover API keeps the content as a readable inline panel. */
@supports selector(:popover-open) {
  .ff-popover[popover] {
    position: fixed;
    inset: auto;
    top: var(--ff-popover-top, 1rem);
    left: var(--ff-popover-left, 1rem);
    margin: 0;
  }
}

@media (max-width: 480px) {
  .ff-dialog,
  .ff-popover {
    padding: var(--ff-space-4);
  }
  .ff-overlay-actions > .ff-button {
    flex: 1;
  }
}

@media (forced-colors: active) {
  .ff-dialog,
  .ff-popover,
  .ff-table-region {
    border-color: CanvasText;
  }
  .ff-chart-line,
  .ff-chart-point {
    stroke: CanvasText;
  }
  .ff-chart-bar {
    fill: CanvasText;
  }
  .ff-chart-area {
    fill: Canvas;
  }
  .ff-chart-grid {
    stroke: GrayText;
  }
}

@supports (height: 100dvh) {
  .ff-dialog,
  .ff-popover {
    max-height: calc(100dvh - 2rem);
  }
}

/* Layout primitives work inside any host app, with no site shell required. */
.ff-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ff-gap, var(--ff-layout-gap, var(--ff-space-4)));
}
.ff-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ff-gap, var(--ff-layout-gap, var(--ff-space-3)));
}
.ff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ff-grid-min, 16rem)), 1fr));
  gap: var(--ff-gap, var(--ff-layout-gap, var(--ff-space-6)));
}
.ff-sidebar-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ff-gap, var(--ff-layout-gap, var(--ff-space-6)));
}
.ff-sidebar-layout > :first-child {
  flex: 1 1 12rem;
  min-width: 0;
}
.ff-sidebar-layout > :last-child {
  flex: 3 1 24rem;
  min-width: 0;
}
.ff-container {
  width: min(100%, var(--ff-container-max, 72rem));
  margin-inline: auto;
}

.ff-tag,
.ff-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ff-space-2);
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--ff-color-control-border);
  border-radius: 999px;
  color: var(--ff-color-text);
  background: var(--ff-color-accent);
  font: inherit;
  font-size: var(--ff-font-size-sm);
  font-weight: var(--ff-font-weight-label);
}
.ff-tag {
  border-radius: var(--ff-control-radius);
}
button.ff-pill,
button.ff-tag {
  min-height: 44px;
  cursor: pointer;
}
.ff-pill[aria-pressed='true'] {
  color: var(--ff-color-on-primary);
  background: var(--ff-color-primary);
}
.ff-pill:focus-visible,
.ff-tag:focus-visible,
.ff-tab:focus-visible,
.ff-tab-panel:focus-visible {
  outline: 3px solid var(--ff-focus-ring);
  outline-offset: 3px;
}
.ff-accordion summary {
  padding-block: var(--ff-space-4);
  font-weight: var(--ff-font-weight-label);
  cursor: pointer;
}
.ff-accordion summary:focus-visible {
  outline: 3px solid var(--ff-focus-ring);
  outline-offset: 3px;
}
.ff-accordion-content {
  padding-bottom: var(--ff-space-4);
}
.ff-accordion-content > :first-child {
  margin-top: 0;
}
.ff-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ff-space-2);
  margin-bottom: var(--ff-space-4);
}
.ff-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--ff-color-control-border);
  border-radius: var(--ff-control-radius);
  font: inherit;
  font-weight: var(--ff-font-weight-label);
  text-decoration: none;
  color: var(--ff-color-text);
  background: var(--ff-color-surface);
}
.ff-tab[aria-selected='true'] {
  color: var(--ff-color-on-primary);
  background: var(--ff-color-primary);
}
.ff-tab-panel[hidden] {
  display: none;
}
.ff-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: var(--ff-shape-radius);
  background: var(--ff-color-accent);
  color: var(--ff-color-primary);
}
.ff-brand-mark svg {
  width: 70%;
  height: 70%;
  overflow: visible;
}
/* Pseudo-elements carry the wave; native top-layer positioning remains intact. */
.ff-dialog.ff-wave-surface,
.ff-popover.ff-wave-surface {
  isolation: isolate;
  border: 0;
  background: transparent;
  box-shadow: none;
}
@media (forced-colors: active) {
  .ff-dialog.ff-wave-surface,
  .ff-popover.ff-wave-surface {
    border: 1px solid CanvasText;
    background: Canvas;
  }
  .ff-pill,
  .ff-tag,
  .ff-tab {
    border-color: ButtonText;
  }
  .ff-pill[aria-pressed='true'],
  .ff-tab[aria-selected='true'] {
    color: HighlightText;
    background: Highlight;
  }
}

/* Shared semantic tones for badges and feedback; status text supplies the meaning. */
:is(.ff-tag, .ff-pill)[data-ff-tone],
.ff-alert {
  color: var(--ff-tone-fg, var(--ff-tone-neutral-fg));
  background: var(--ff-tone-bg, var(--ff-tone-neutral-bg));
  border-color: var(--ff-tone-border, var(--ff-tone-neutral-border));
}

:is(.ff-tag, .ff-pill, .ff-alert)[data-ff-tone='neutral'] {
  --ff-tone-fg: var(--ff-tone-neutral-fg);
  --ff-tone-bg: var(--ff-tone-neutral-bg);
  --ff-tone-border: var(--ff-tone-neutral-border);
}

:is(.ff-tag, .ff-pill, .ff-alert)[data-ff-tone='info'] {
  --ff-tone-fg: var(--ff-tone-info-fg);
  --ff-tone-bg: var(--ff-tone-info-bg);
  --ff-tone-border: var(--ff-tone-info-border);
}

:is(.ff-tag, .ff-pill, .ff-alert)[data-ff-tone='success'] {
  --ff-tone-fg: var(--ff-tone-success-fg);
  --ff-tone-bg: var(--ff-tone-success-bg);
  --ff-tone-border: var(--ff-tone-success-border);
}

:is(.ff-tag, .ff-pill, .ff-alert)[data-ff-tone='warning'] {
  --ff-tone-fg: var(--ff-tone-warning-fg);
  --ff-tone-bg: var(--ff-tone-warning-bg);
  --ff-tone-border: var(--ff-tone-warning-border);
}

:is(.ff-tag, .ff-pill, .ff-alert)[data-ff-tone='danger'] {
  --ff-tone-fg: var(--ff-tone-danger-fg);
  --ff-tone-bg: var(--ff-tone-danger-bg);
  --ff-tone-border: var(--ff-tone-danger-border);
}

/* Native buttons with aria-pressed represent independent selections. */
.ff-selectable,
:where(.ff-native) button.ff-selectable {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--ff-space-2);
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: var(--ff-card-padding);
  border: var(--ff-border-width) solid var(--ff-color-control-border);
  border-radius: var(--ff-shape-radius);
  font: inherit;
  text-align: start;
  overflow-wrap: anywhere;
  color: var(--ff-color-text);
  background: var(--ff-color-surface);
  cursor: pointer;
}
.ff-selectable.ff-list-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--ff-control-radius);
  padding: var(--ff-space-3) var(--ff-card-padding);
}
.ff-selectable:hover:not(:disabled) {
  background: var(--ff-color-surface-raised);
}
.ff-selectable[aria-pressed='true'] {
  border-color: var(--ff-color-primary);
  box-shadow: inset 0 0 0 1px var(--ff-color-primary);
  color: var(--ff-color-on-selected);
  background: var(--ff-color-selected);
}
.ff-selectable[aria-pressed='true']:hover:not(:disabled) {
  background: var(--ff-color-selected);
}
.ff-selectable:disabled {
  color: var(--ff-color-on-disabled);
  background: var(--ff-color-disabled);
  cursor: not-allowed;
}
.ff-metadata,
.ff-field-help {
  font-size: var(--ff-font-size-sm);
  color: var(--ff-color-muted);
}
.ff-selectable:disabled .ff-metadata {
  color: inherit;
}
.ff-field {
  display: grid;
  min-width: 0;
  gap: var(--ff-space-2);
}
.ff-field-label {
  font-weight: var(--ff-font-weight-label);
}
.ff-field :is(.ff-field-help, .ff-field-error) {
  margin: 0;
}
.ff-field-error {
  font-size: var(--ff-font-size-sm);
  color: var(--ff-color-error);
}
.ff-alert {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--ff-space-3);
  padding: var(--ff-card-padding);
  border: var(--ff-border-width) solid;
  border-color: var(--ff-tone-border, var(--ff-tone-neutral-border));
  border-radius: var(--ff-control-radius);
  overflow-wrap: anywhere;
}
.ff-alert > :first-child {
  min-width: 0;
  margin: 0;
}
.ff-empty-state {
  display: grid;
  justify-items: center;
  gap: var(--ff-layout-gap, var(--ff-space-4));
  padding: var(--ff-card-padding);
  text-align: center;
}
.ff-empty-state > :is(h2, h3, p) {
  margin: 0;
}
.ff-busy {
  display: inline-flex;
  align-items: center;
  gap: var(--ff-space-2);
  color: var(--ff-color-muted);
}
/* A static marker avoids motion while visible text explains what is loading. */
.ff-busy::before {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: '';
}
.ff-sidebar-nav,
.ff-bottom-nav {
  display: flex;
  gap: var(--ff-space-2);
  padding: var(--ff-space-2);
  background: var(--ff-color-surface);
}
.ff-sidebar-nav {
  flex-direction: column;
}
.ff-bottom-nav {
  flex-wrap: wrap;
  padding-bottom: max(var(--ff-space-2), env(safe-area-inset-bottom, 0px));
}
.ff-nav-link {
  display: flex;
  align-items: center;
  gap: var(--ff-space-2);
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  padding: var(--ff-space-2) var(--ff-space-3);
  border: var(--ff-border-width) solid transparent;
  border-radius: var(--ff-control-radius);
  text-decoration: none;
  overflow-wrap: anywhere;
  color: var(--ff-color-text);
}
.ff-bottom-nav .ff-nav-link {
  flex: 1 1 auto;
  justify-content: center;
}
.ff-nav-link:hover {
  background: var(--ff-color-surface-raised);
}
.ff-nav-link[aria-current='page'] {
  border-color: var(--ff-color-primary);
  font-weight: var(--ff-font-weight-label);
  color: var(--ff-color-on-selected);
  background: var(--ff-color-selected);
}
.ff-nav-link .ff-pill {
  margin-inline-start: auto;
}
.ff-selectable:focus-visible,
.ff-nav-link:focus-visible {
  outline: 3px solid var(--ff-focus-ring);
  outline-offset: 3px;
}
.ff-responsive-nav .ff-bottom-nav {
  display: none;
}
@media (max-width: 640px) {
  .ff-responsive-nav .ff-sidebar-nav {
    display: none;
  }
  .ff-responsive-nav .ff-bottom-nav {
    display: flex;
  }
}
:is(.ff-selectable, .ff-alert, .ff-empty-state, .ff-busy, .ff-sidebar-nav, .ff-bottom-nav)[hidden] {
  display: none;
}
@media (forced-colors: active) {
  .ff-selectable,
  .ff-alert,
  .ff-nav-link,
  .ff-button.ff-button-danger {
    border-color: ButtonText;
  }
  .ff-selectable[aria-pressed='true'],
  .ff-nav-link[aria-current='page'] {
    border-color: Highlight;
    color: HighlightText;
    background: Highlight;
  }
}