.identification-page {
  --fish-id-blue: var(--blue, #1664ff);
  --fish-id-ink: var(--ink, #07183b);
  --fish-id-muted: var(--muted, #62718a);
  --fish-id-soft: color-mix(in srgb, var(--fish-id-blue) 8%, #f7fbff);
  --fish-id-surface: rgba(255, 255, 255, .72);
  --fish-id-green: #138a56;
  padding: clamp(14px, 2vw, 24px) 0 clamp(42px, 7vw, 88px);
}

.identification-page,
.identification-page button,
.identification-page input {
  font-family: var(--font-body);
}

.fish-id-app {
  width: 100%;
}

.fish-id-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.fish-id-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--fish-id-blue);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.fish-id-header h1 {
  margin: 0;
  color: var(--fish-id-ink);
  font-family: var(--font-body);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
}

.fish-id-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.fish-id-counter {
  color: var(--fish-id-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.fish-id-reset,
.fish-id-refine > button {
  border: 0;
  color: var(--fish-id-ink);
  background: var(--fish-id-soft);
  cursor: pointer;
}

.fish-id-reset {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.fish-id-reset svg,
.fish-id-refine svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}

.fish-id-reset:hover,
.fish-id-refine > button:hover,
.fish-id-choice:hover,
.fish-id-chip:hover,
.fish-id-refine-choice:hover {
  color: var(--fish-id-blue);
  background: color-mix(in srgb, var(--fish-id-blue) 12%, white);
}

.fish-id-reset:focus-visible,
.fish-id-hotspot:focus-visible,
.fish-id-choice:focus-visible,
.fish-id-chip:focus-visible,
.fish-id-result-open:focus-visible,
.fish-id-refine > button:focus-visible,
.fish-id-refine-choice:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--fish-id-blue) 72%, white);
  outline-offset: 3px;
}

.fish-id-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: clamp(22px, 3vw, 42px);
  align-items: start;
}

.fish-id-workbench,
.fish-id-results {
  min-width: 0;
}

.fish-id-canvas {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: clamp(430px, 43vw, 620px);
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 48% 42%, rgba(255, 255, 255, .97) 0 21%, rgba(255, 255, 255, .45) 52%, transparent 75%),
    linear-gradient(180deg, #f8fcff 0%, #eaf4f8 100%);
}

.fish-id-canvas::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: 9%;
  left: 12%;
  z-index: -1;
  height: 15%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(31, 103, 135, .12), transparent 70%);
  filter: blur(13px);
  pointer-events: none;
}

.fish-id-model {
  position: absolute;
  inset: 11% 4% 9%;
  width: 92%;
  height: 80%;
  overflow: visible;
}

.fish-id-body-layer > [data-body-variant],
.fish-id-dorsal-layer > [data-dorsal-variant],
.fish-id-tail-layer > [data-tail-variant],
.fish-id-mouth-layer > [data-mouth-variant],
.fish-id-pattern-layer > [data-pattern-variant],
.fish-id-special-layer > [data-special-variant] {
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.fish-id-body-layer > .is-visible,
.fish-id-dorsal-layer > .is-visible,
.fish-id-tail-layer > .is-visible,
.fish-id-mouth-layer > .is-visible,
.fish-id-pattern-layer > .is-visible,
.fish-id-special-layer > .is-visible {
  opacity: 1;
}

.fish-id-body-layer > [data-body-variant] {
  fill: url("#fish-id-body-gradient");
  stroke: #25546c;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.fish-id-body-highlight,
.fish-id-scale-light {
  fill: url("#fish-id-gloss");
  opacity: .72;
}

.fish-id-tail-layer,
.fish-id-dorsal-layer,
.fish-id-lower-fin-layer,
.fish-id-pattern-layer,
.fish-id-special-layer,
.fish-id-face-layer {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .32s cubic-bezier(.2, .72, .28, 1);
}

.fish-id-tail-layer path,
.fish-id-dorsal-layer path,
.fish-id-lower-fin-layer path {
  fill: url("#fish-id-fin-gradient");
  stroke: #285a72;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.fish-id-pattern-layer {
  fill: none;
  stroke: rgba(12, 56, 78, .74);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fish-id-pattern-layer circle {
  fill: rgba(15, 61, 82, .72);
  stroke: none;
}

.fish-id-special-layer {
  fill: rgba(24, 86, 111, .18);
  stroke: #184f68;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fish-id-special-layer circle {
  fill: #54d6ff;
  stroke: rgba(255, 255, 255, .86);
  stroke-width: 2;
}

.fish-id-mouth-layer {
  fill: #234f66;
  stroke: #173d52;
  stroke-width: 2;
}

.fish-id-face-layer {
  fill: none;
  stroke: rgba(17, 62, 82, .78);
  stroke-width: 4;
  stroke-linecap: round;
}

.fish-id-face-layer circle:nth-of-type(1) { fill: #f7fbff; }
.fish-id-face-layer circle:nth-of-type(2) { fill: #07183b; }
.fish-id-face-layer circle:nth-of-type(3) { fill: #fff; stroke: none; }

.body-is-elongate .fish-id-dorsal-layer { transform: translateY(35px) scaleY(.72); }
.body-is-elongate .fish-id-lower-fin-layer { transform: translateY(-25px) scaleY(.72); }
.body-is-elongate .fish-id-tail-layer { transform: scaleY(.72); }
.body-is-elongate .fish-id-pattern-layer,
.body-is-elongate .fish-id-special-layer { transform: scaleY(.72); }
.body-is-elongate .fish-id-hotspot-dorsal { top: 13%; }
.body-is-elongate .fish-id-hotspot-pattern { bottom: 17%; }

.body-is-high-backed .fish-id-dorsal-layer { transform: translateY(-36px) scaleY(1.18); }
.body-is-high-backed .fish-id-lower-fin-layer { transform: translateY(31px) scaleY(1.16); }
.body-is-high-backed .fish-id-tail-layer { transform: scaleY(1.22); }
.body-is-high-backed .fish-id-pattern-layer,
.body-is-high-backed .fish-id-special-layer { transform: scaleY(1.2); }
.body-is-high-backed .fish-id-hotspot-dorsal { top: 1%; }
.body-is-high-backed .fish-id-hotspot-body { bottom: 8%; }

.body-is-eel-like .fish-id-dorsal-layer { transform: translateY(52px) scaleY(.5); }
.body-is-eel-like .fish-id-lower-fin-layer { transform: translateY(-48px) scaleY(.48); }
.body-is-eel-like .fish-id-tail-layer { transform: scaleY(.52); }
.body-is-eel-like .fish-id-pattern-layer,
.body-is-eel-like .fish-id-special-layer { transform: scaleY(.5); }
.body-is-eel-like .fish-id-hotspot-dorsal { top: 17%; }
.body-is-eel-like .fish-id-hotspot-pattern { bottom: 20%; }

.body-is-flat .fish-id-dorsal-layer { transform: translateY(19px) scaleY(.82); }
.body-is-flat .fish-id-lower-fin-layer { transform: translateY(-10px) scaleY(.82); }
.body-is-flat .fish-id-tail-layer { transform: scaleY(.86); }
.body-is-flat .fish-id-pattern-layer,
.body-is-flat .fish-id-special-layer { transform: scaleY(.82); }
.body-is-flat .fish-id-hotspot-dorsal { top: 10%; }

.body-is-unusual .fish-id-dorsal-layer { transform: translateY(-32px) scaleY(1.14); }
.body-is-unusual .fish-id-lower-fin-layer { transform: translateY(29px) scaleY(1.13); }
.body-is-unusual .fish-id-tail-layer { transform: scaleY(1.18); }
.body-is-unusual .fish-id-pattern-layer,
.body-is-unusual .fish-id-special-layer { transform: scaleY(1.16); }
.body-is-unusual .fish-id-hotspot-dorsal { top: 1%; }
.body-is-unusual .fish-id-hotspot-body { bottom: 8%; }

.fish-id-hotspot {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 190px;
  min-height: 40px;
  padding: 7px 10px;
  border: 0;
  border-radius: 999px;
  color: var(--fish-id-ink);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.fish-id-hotspot:hover,
.fish-id-hotspot.is-active {
  color: var(--fish-id-blue);
  background: rgba(255, 255, 255, .94);
  transform: translateY(-1px);
}

.fish-id-hotspot > svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--fish-id-blue);
}

.fish-id-hotspot span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fish-id-hotspot b {
  display: none;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: var(--fish-id-green);
}

.fish-id-hotspot b svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.4;
}

.fish-id-hotspot.is-complete b {
  display: grid;
}

.fish-id-hotspot-body { left: 30%; bottom: 12%; }
.fish-id-hotspot-dorsal { top: 5%; left: 42%; }
.fish-id-hotspot-tail { top: 45%; right: 2%; }
.fish-id-hotspot-mouth { top: 45%; left: 1%; }
.fish-id-hotspot-pattern { right: 25%; bottom: 11%; }
.fish-id-hotspot-special { top: 20%; right: 14%; }

.fish-id-real-match {
  position: absolute;
  inset: 7% 7% 8%;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.fish-id-real-match[hidden] {
  display: none;
}

.fish-id-real-match img {
  max-width: 85%;
  max-height: 80%;
  object-fit: contain;
}

.fish-id-real-match span {
  position: absolute;
  right: 7%;
  bottom: 7%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--fish-id-green);
  background: rgba(255, 255, 255, .82);
  font-size: 11px;
  font-weight: 500;
  backdrop-filter: blur(8px);
}

.fish-id-canvas.has-real-match .fish-id-model {
  opacity: .18;
}

.fish-id-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.fish-id-selection[hidden] {
  display: none;
}

.fish-id-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: var(--fish-id-ink);
  background: var(--fish-id-soft);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}

.fish-id-chip svg {
  width: 14px;
  height: 14px;
  color: var(--fish-id-blue);
}

.fish-id-palette-card {
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--fish-id-blue) 4%, white);
}

.fish-id-palette-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.fish-id-palette-head > svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  color: var(--fish-id-blue);
  background: #fff;
}

.fish-id-palette-head div {
  display: grid;
  gap: 1px;
}

.fish-id-palette-head strong {
  color: var(--fish-id-ink);
  font-size: 14px;
  font-weight: 600;
}

.fish-id-palette-head span {
  color: var(--fish-id-muted);
  font-size: 12px;
}

.fish-id-palette {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.fish-id-choice {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  min-height: 78px;
  padding: 7px 9px 7px 7px;
  border: 0;
  border-radius: 12px;
  color: var(--fish-id-ink);
  background: rgba(255, 255, 255, .72);
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}

.fish-id-choice.is-selected {
  color: var(--fish-id-blue);
  background: color-mix(in srgb, var(--fish-id-blue) 13%, white);
}

.fish-id-choice-preview {
  display: grid;
  place-items: center;
  width: 74px;
  height: 58px;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(255, 255, 255, .78);
}

.fish-id-choice-preview svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: color-mix(in srgb, var(--fish-id-blue) 16%, #bed5df);
  stroke: color-mix(in srgb, var(--fish-id-blue) 58%, #244b60);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fish-id-choice-preview .mini-body {
  fill: color-mix(in srgb, var(--fish-id-blue) 7%, #d7e6ec);
  stroke: #66899a;
}

.fish-id-choice-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.fish-id-choice-copy strong {
  color: currentColor;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.fish-id-choice-copy small {
  color: var(--fish-id-muted);
  font-size: 10px;
  line-height: 1.35;
}

.fish-id-choice > svg {
  width: 16px;
  height: 16px;
  color: var(--fish-id-blue);
}

.fish-id-results {
  position: sticky;
  top: calc(var(--sticky-header-offset, 76px) + 16px);
}

.fish-id-results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 10px;
}

.fish-id-results-head span {
  display: block;
  margin-bottom: 3px;
  color: var(--fish-id-blue);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.fish-id-results-head h2 {
  margin: 0;
  color: var(--fish-id-ink);
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.22;
}

.fish-id-results-head > strong {
  color: var(--fish-id-blue);
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}

.fish-id-result-summary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin: 8px 0 12px;
  color: var(--fish-id-muted);
}

.fish-id-result-summary[hidden] {
  display: none;
}

.fish-id-result-summary > svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  color: var(--fish-id-blue);
  background: var(--fish-id-soft);
}

.fish-id-result-summary p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.fish-id-result-list {
  display: grid;
  gap: 7px;
}

.fish-id-result {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 48px 30px;
  align-items: center;
  gap: 9px;
  min-height: 76px;
  padding: 7px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .68);
}

.fish-id-result.is-leading {
  background: var(--fish-id-soft);
}

.fish-id-result-media {
  display: grid;
  place-items: center;
  width: 64px;
  height: 56px;
  overflow: hidden;
  border-radius: 10px;
  color: var(--fish-id-blue);
  background: color-mix(in srgb, var(--fish-id-blue) 7%, white);
}

.fish-id-result-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fish-id-result-media span {
  display: grid;
  place-items: center;
}

.fish-id-result-media svg {
  width: 23px;
  height: 23px;
}

.fish-id-result-copy {
  display: grid;
  min-width: 0;
}

.fish-id-result-copy strong {
  overflow: hidden;
  color: var(--fish-id-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fish-id-result-copy em,
.fish-id-result-copy small {
  overflow: hidden;
  color: var(--fish-id-muted);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fish-id-result-score {
  display: grid;
  gap: 4px;
  justify-items: end;
}

.fish-id-result-score b {
  color: var(--fish-id-ink);
  font-size: 12px;
  font-weight: 600;
}

.fish-id-result-score span {
  width: 46px;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: #dbe6ee;
}

.fish-id-result-score i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--fish-id-blue);
}

.fish-id-result-open {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--fish-id-blue);
  background: #fff;
}

.fish-id-result-open:hover {
  color: #fff;
  background: var(--fish-id-blue);
}

.fish-id-result-open svg {
  width: 15px;
  height: 15px;
}

.fish-id-refine {
  margin-top: 13px;
}

.fish-id-refine > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.fish-id-refine > button span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.fish-id-refine > button.is-open > svg:last-child {
  transform: rotate(180deg);
}

.fish-id-refine-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.fish-id-refine-panel[hidden] {
  display: none;
}

.fish-id-refine-panel > div {
  display: grid;
  gap: 6px;
}

.fish-id-refine-panel > div > span {
  color: var(--fish-id-muted);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
}

.fish-id-refine-panel > div > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fish-id-refine-choice {
  min-height: 29px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  color: var(--fish-id-muted);
  background: var(--fish-id-soft);
  font-size: 10px;
  cursor: pointer;
}

.fish-id-refine-choice.is-selected {
  color: #fff;
  background: var(--fish-id-blue);
}

.fish-id-note {
  margin: 12px 0 0;
  color: var(--fish-id-muted);
  font-size: 10px;
  line-height: 1.45;
}

.identification-ai-hero:empty {
  display: none;
}

.identification-ai-hero {
  margin-top: 12px;
}

.identification-noscript {
  padding: 16px;
  color: #8a2c2c;
  background: #fff0f0;
}

@media (max-width: 1180px) {
  .fish-id-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    gap: 22px;
  }

  .fish-id-palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .fish-id-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fish-id-results {
    position: static;
  }
}

@media (max-width: 820px) {
  .identification-page {
    padding-top: 8px;
    padding-bottom: 44px;
  }

  .fish-id-header {
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .fish-id-kicker {
    font-size: 10px;
  }

  .fish-id-header h1 {
    font-size: 29px;
  }

  .fish-id-actions > .ai-badge,
  .fish-id-counter {
    display: none;
  }

  .fish-id-reset {
    width: 34px;
    min-height: 34px;
    padding: 0;
  }

  .fish-id-reset span {
    display: none;
  }

  .fish-id-canvas {
    height: clamp(330px, 88vw, 440px);
    border-radius: 16px;
  }

  .fish-id-model {
    inset: 12% -9% 8%;
    width: 118%;
    height: 80%;
  }

  .fish-id-hotspot {
    gap: 5px;
    max-width: 132px;
    min-height: 34px;
    padding: 4px 7px;
  }

  .fish-id-hotspot > svg {
    width: 14px;
    height: 14px;
  }

  .fish-id-hotspot span {
    max-width: 86px;
    font-size: 10px;
  }

  .fish-id-hotspot b {
    width: 16px;
    height: 16px;
  }

  .fish-id-hotspot-body { left: 22%; bottom: 10%; }
  .fish-id-hotspot-dorsal { top: 3%; left: 35%; }
  .fish-id-hotspot-tail { top: 46%; right: 1%; }
  .fish-id-hotspot-mouth { top: 46%; left: 1%; }
  .fish-id-hotspot-pattern { right: 15%; bottom: 8%; }
  .fish-id-hotspot-special { top: 18%; right: 5%; }

  .fish-id-palette-card {
    padding: 11px;
    border-radius: 14px;
  }

  .fish-id-palette-head > svg {
    width: 30px;
    height: 30px;
  }

  .fish-id-palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .fish-id-choice {
    grid-template-columns: 54px minmax(0, 1fr) 14px;
    min-height: 70px;
    gap: 7px;
    padding: 6px;
  }

  .fish-id-choice-preview {
    width: 54px;
    height: 50px;
  }

  .fish-id-choice-copy strong {
    font-size: 11px;
  }

  .fish-id-choice-copy small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 9px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .fish-id-results-head h2 {
    font-size: 17px;
  }
}

@media (max-width: 520px) {
  .fish-id-header h1 {
    font-size: 27px;
  }

  .fish-id-canvas {
    height: 356px;
  }

  .fish-id-model {
    inset: 13% -17% 8%;
    width: 134%;
    height: 78%;
  }

  .fish-id-hotspot span {
    max-width: 70px;
    font-size: 9px;
  }

  .fish-id-hotspot-body { left: 18%; }
  .fish-id-hotspot-dorsal { left: 28%; }
  .fish-id-hotspot-pattern { right: 12%; }
  .fish-id-hotspot-special { right: 2%; }

  .fish-id-result {
    grid-template-columns: 56px minmax(0, 1fr) 40px 28px;
    gap: 7px;
  }

  .fish-id-result-media {
    width: 56px;
    height: 52px;
  }

  .fish-id-result-score span {
    width: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fish-id-tail-layer,
  .fish-id-dorsal-layer,
  .fish-id-lower-fin-layer,
  .fish-id-pattern-layer,
  .fish-id-special-layer,
  .fish-id-face-layer,
  .fish-id-hotspot,
  .fish-id-choice {
    transition: none;
  }
}