.grid-container[data-v-19abcb78] {
	--size: calc(var(--container-width) / var(--columns));
	display: grid;
	grid-template-columns: repeat(var(--columns), var(--size));
	grid-template-rows: repeat(var(--rows), var(--size));
}

.flip-card[data-v-74ef457a] {
    background-color: transparent;
    perspective: 1000px;
}
.flip-card-inner[data-v-74ef457a] {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner[data-v-74ef457a] {
    transform: rotateY(180deg);
}
.flip-card-front[data-v-74ef457a],
.flip-card-back[data-v-74ef457a] {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flip-card-front[data-v-74ef457a] {
    background-color: #bbb;
    color: black;
}
.flip-card-back[data-v-74ef457a] {
    transform: rotateY(180deg);
}
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
[data-v-0ea48513],[data-v-0ea48513]:before,[data-v-0ea48513]:after,[data-v-0ea48513]::backdrop {
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-font-weight: initial;
      --tw-duration: initial;
}
}
}
.filter-select[data-v-0ea48513] {
  border-radius: var(--radius-md, .375rem);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-dark, #f2f3f3);
  background-color: var(--color-white, #fff);
  width: 100%;
  padding-inline: calc(var(--spacing, .25rem) * 3);
  padding-block: calc(var(--spacing, .25rem) * 2);
  display: flex;
}
.filter-select[data-v-0ea48513]:focus {
  --tw-outline-style: none;
  outline-style: none;
}
@media (forced-colors: active) {
.filter-select[data-v-0ea48513]:focus {
    outline-offset: 2px;
    outline: 2px solid #0000;
}
}
.filter-select[data-v-0ea48513]:focus-visible {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-accent, #99ff6e);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.apply-button[data-v-0ea48513] {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: calc(var(--spacing, .25rem) * 2);
  border-radius: var(--radius-md, .375rem);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-accent-dark, #0e3d3d);
  background-color: var(--color-accent-dark, #0e3d3d);
  width: 100%;
  padding-inline: calc(var(--spacing, .25rem) * 3);
  padding-block: calc(var(--spacing, .25rem) * 2);
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-white, #fff);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
  --tw-duration: .3s;
  transition-duration: .3s;
  display: flex;
}
@media (hover: hover) {
.apply-button[data-v-0ea48513]:hover {
    background-color: var(--color-white, #fff);
    color: var(--color-accent-dark, #0e3d3d);
}
}
.apply-button[data-v-0ea48513]:focus {
  --tw-outline-style: none;
  outline-style: none;
}
@media (forced-colors: active) {
.apply-button[data-v-0ea48513]:focus {
    outline-offset: 2px;
    outline: 2px solid #0000;
}
}
.apply-button[data-v-0ea48513]:focus-visible {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-accent-dark, #0e3d3d);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.reset-button[data-v-0ea48513] {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: calc(var(--spacing, .25rem) * 2);
  border-radius: var(--radius-md, .375rem);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-accent-dark, #0e3d3d);
  background-color: var(--color-white, #fff);
  width: 100%;
  padding-inline: calc(var(--spacing, .25rem) * 3);
  padding-block: calc(var(--spacing, .25rem) * 2);
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-accent-dark, #0e3d3d);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
  --tw-duration: .3s;
  transition-duration: .3s;
  display: flex;
}
@media (hover: hover) {
.reset-button[data-v-0ea48513]:hover {
    background-color: var(--color-accent-dark, #0e3d3d);
    color: var(--color-white, #fff);
}
}
.reset-button[data-v-0ea48513]:focus {
  --tw-outline-style: none;
  outline-style: none;
}
@media (forced-colors: active) {
.reset-button[data-v-0ea48513]:focus {
    outline-offset: 2px;
    outline: 2px solid #0000;
}
}
.reset-button[data-v-0ea48513]:focus-visible {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-accent-dark, #0e3d3d);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false
}
@property --tw-duration {
  syntax: "*";
  inherits: false
}
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
[data-v-672237b7],[data-v-672237b7]:before,[data-v-672237b7]:after,[data-v-672237b7]::backdrop {
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-duration: initial;
}
}
}
.species-card[data-v-672237b7] {
  margin-bottom: calc(var(--spacing, .25rem) * 4);
  border-radius: var(--radius-xl, .75rem);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray, #f9f9f9);
  background-color: var(--color-white, #fff);
  padding-inline: calc(var(--spacing, .25rem) * 4);
  padding-block: calc(var(--spacing, .25rem) * 4);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.species-header[data-v-672237b7] {
  align-items: flex-start;
  gap: calc(var(--spacing, .25rem) * 3);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray, #f9f9f9);
  padding-bottom: calc(var(--spacing, .25rem) * 3);
  display: flex;
}
.species-icon[data-v-672237b7] {
  margin-top: calc(var(--spacing, .25rem) * .5);
  height: calc(var(--spacing, .25rem) * 9);
  width: calc(var(--spacing, .25rem) * 9);
  background-color: var(--color-accent-dark, #0e3d3d);
  font-size: var(--text-sm, .875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));
  color: var(--color-white, #fff);
  border-radius: 3.40282e38px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}
.species-name[data-v-672237b7] {
  font-size: var(--text-fluid-xl, clamp(1.25rem, .6vw + .5rem, 1.5rem));
  --tw-leading: var(--leading-tight, 1.25);
  line-height: var(--leading-tight, 1.25);
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-accent-dark, #0e3d3d);
  text-underline-offset: 4px;
  display: block;
}
@media (hover: hover) {
.species-name[data-v-672237b7]:hover {
    text-decoration-line: underline;
}
}
.scientific-name[data-v-672237b7] {
  margin-top: calc(var(--spacing, .25rem) * .5);
  font-size: var(--text-fluid-xs, clamp(.75rem, .6vw + .5rem, .875rem));
  color: var(--color-gray-600, oklch(44.6% .03 256.802));
  font-style: italic;
}
.information-grid[data-v-672237b7] {
  gap: calc(var(--spacing, .25rem) * 4);
  padding-block: calc(var(--spacing, .25rem) * 4);
  display: grid;
}
@media (min-width: 80rem) {
.information-grid[data-v-672237b7] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.information-section + .information-section[data-v-672237b7] {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray, #f9f9f9);
  padding-top: calc(var(--spacing, .25rem) * 4);
}
@media (min-width: 80rem) {
.information-section + .information-section[data-v-672237b7] {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
    border-left-style: var(--tw-border-style);
    padding-top: 0;
    padding-left: calc(var(--spacing, .25rem) * 4);
    border-left-width: 1px;
}
}
.section-title[data-v-672237b7] {
  margin-bottom: calc(var(--spacing, .25rem) * 2);
  align-items: center;
  gap: calc(var(--spacing, .25rem) * 2);
  font-size: var(--text-fluid-sm, clamp(.875rem, .6vw + .5rem, 1rem));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-accent-dark, #0e3d3d);
  display: flex;
}
.data-list[data-v-672237b7], .features-list[data-v-672237b7] {
  gap: calc(var(--spacing, .25rem) * 1.5);
  flex-direction: column;
  display: flex;
}
.data-row[data-v-672237b7], .features-list li[data-v-672237b7] {
  min-height: calc(var(--spacing, .25rem) * 8);
  align-items: center;
  gap: calc(var(--spacing, .25rem) * 2);
  border-radius: var(--radius-md, .375rem);
  background-color: #f2f3f380;
  display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.data-row[data-v-672237b7], .features-list li[data-v-672237b7] {
    background-color: color-mix(in oklab, var(--color-gray-dark, #f2f3f3) 50%, transparent);
}
}
.data-row[data-v-672237b7], .features-list li[data-v-672237b7] {
  padding-inline: calc(var(--spacing, .25rem) * 2.5);
  padding-block: calc(var(--spacing, .25rem) * 1.5);
  font-size: var(--text-fluid-xs, clamp(.75rem, .6vw + .5rem, .875rem));
}
.data-row dt[data-v-672237b7] {
  align-items: center;
  gap: calc(var(--spacing, .25rem) * 2);
  min-width: 0;
  color: var(--color-gray-600, oklch(44.6% .03 256.802));
  flex-grow: 1;
  display: flex;
}
.data-row dt .fas[data-v-672237b7], .feature-icon[data-v-672237b7] {
  width: calc(var(--spacing, .25rem) * 4);
  text-align: center;
  color: var(--color-accent-highlight, #07ab51);
  flex-shrink: 0;
}
.data-row dd[data-v-672237b7] {
  text-align: right;
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-accent-dark, #0e3d3d);
  flex-shrink: 0;
}
.data-row small[data-v-672237b7] {
  --tw-font-weight: var(--font-weight-normal, 400);
  font-weight: var(--font-weight-normal, 400);
  white-space: nowrap;
}
.feature-status.is-enabled[data-v-672237b7] {
  color: var(--color-accent-light, #4fc584);
}
.feature-status.is-disabled[data-v-672237b7] {
  color: var(--color-danger, #ff6e6e);
}
.actions[data-v-672237b7] {
  align-items: center;
  column-gap: calc(var(--spacing, .25rem) * 3);
  row-gap: calc(var(--spacing, .25rem) * 2);
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray, #f9f9f9);
  padding-top: calc(var(--spacing, .25rem) * 3);
  flex-wrap: wrap;
  display: flex;
}
.action-primary[data-v-672237b7], .action-link[data-v-672237b7] {
  align-items: center;
  gap: calc(var(--spacing, .25rem) * 1.5);
  border-radius: var(--radius-md, .375rem);
  padding-inline: calc(var(--spacing, .25rem) * 2.5);
  padding-block: calc(var(--spacing, .25rem) * 1.5);
  font-size: var(--text-fluid-xs, clamp(.75rem, .6vw + .5rem, .875rem));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
  --tw-duration: .3s;
  transition-duration: .3s;
  display: inline-flex;
}
.action-primary[data-v-672237b7] {
  background-color: var(--color-accent-dark, #0e3d3d);
  color: var(--color-white, #fff);
}
@media (hover: hover) {
.action-primary[data-v-672237b7]:hover {
    background-color: var(--color-accent-highlight, #07ab51);
    color: var(--color-accent-dark, #0e3d3d);
}
}
.action-link[data-v-672237b7] {
  color: var(--color-accent-dark, #0e3d3d);
}
@media (hover: hover) {
.action-link[data-v-672237b7]:hover {
    background-color: var(--color-gray-dark, #f2f3f3);
    text-decoration-line: underline;
}
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-leading {
  syntax: "*";
  inherits: false
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false
}
@property --tw-duration {
  syntax: "*";
  inherits: false
}