@font-face {
  font-family: system;
  src: local('Avenir Next');
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #f5f4ee;
  color: #173432;
  font-family: system,'Segoe UI',sans-serif;
  -webkit-font-smoothing: antialiased;
}
button,a,input {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  cursor: pointer;
}
button,a {
  touch-action: manipulation;
}
button:focus-visible,a:focus-visible {
  outline: 3px solid #60964e;
  outline-offset: 5px;
}
button {
  color: inherit;
}
a {
  color: inherit;
}
svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
button {
  border: 0;
}
h1,h2,h3,p {
  margin: 0;
}
h1,h2,h3 {
  font-weight: 500;
}
h1,h2 {
  font-family: Georgia,'Times New Roman',serif;
}
h1 {
  font-size: clamp(30px,3.4vw,48px);
  line-height: 1.13;
  letter-spacing: -1.7px;
}
h2 {
  font-size: 32px;
  letter-spacing: -.8px;
}
h3 {
  font-size: 22px;
  letter-spacing: -.4px;
}
.site-header {
  height: 92px;
  padding: 0 5%;
  border-bottom: 1px solid #dce1d6;
  display: flex;
  align-items: center;
  gap: 22px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.4px;
}
.brand>svg {
  width: 42px;
  height: 42px;
  color: #d0f4ba;
  background: #102d2c;
  padding: 7px;
  border-radius: 13px;
}
.brand small {
  display: block;
  font-size: 11px;
  color: #718179;
  font-weight: 400;
  letter-spacing: .8px;
  margin-top: 3px;
}
.private-label {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #67786e;
  font-size: 12px;
}
.private-label svg {
  width: 16px;
  height: 16px;
}
.avatar {
  display: grid;
  place-items: center;
  border: 1px solid #cad7bd;
  background: #e6eddd;
  border-radius: 100%;
  width: 38px;
  height: 38px;
  font-size: 15px;
}
main {
  max-width: 1440px;
  padding: 44px 5% 0;
  margin: auto;
}
.intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 12px;
  color: #76806c;
}
.intro-copy {
  font-size: 15px;
  color: #6f7b70;
  margin-top: 12px;
  line-height: 1.6;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 17px;
  border-radius: 9px;
  font-size: 13px;
  min-height: 44px;
  font-weight: 500;
  white-space: nowrap;
}
.outline {
  border: 1px solid #c8d0c2;
  background: transparent;
}
.outline:hover {
  background: #e8eddf;
}
.button svg {
  width: 17px;
  height: 17px;
}
.mint {
  background: #d0f4ba;
  color: #173432;
}
.mint:hover {
  background: #bde7a2;
}
.small {
  padding: 10px 15px;
  min-height: 40px;
}
.tabs {
  display: flex;
  gap: 30px;
  margin: 31px 0 22px;
  border-bottom: 1px solid #d4dbcf;
}
.tab {
  font-size: 13px;
  padding: 13px 0 16px;
  background: transparent;
  color: #6b7b70;
  position: relative;
  min-height: 45px;
  white-space: nowrap;
}
.tab.active {
  color: #173432;
  font-weight: 600;
}
.tab.active:after {
  position: absolute;
  content: '';
  height: 2px;
  background: #173432;
  bottom: -1px;
  left: 0;
  right: 0;
}
.tab span {
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
  background: #e4e9db;
  margin-left: 4px;
}
.tank-frame {
  border: 1px solid #204b45;
  border-radius: 14px;
  overflow: hidden;
  background: #102d2c;
  box-shadow: 0 16px 35px #123f2510;
}
.tank {
  height: calc(clamp(370px,40vw,540px) + var(--tank-extra-height, 0px));
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.tank-scene {
  position: absolute;
  inset: 0;
  background: url('/assets/aquarium.webp') center center/cover;
  transition: filter 1s;
}
.tank-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,#031b254d 0%,transparent 30%,transparent 65%,#001e25aa 100%);
  pointer-events: none;
}
.tank.evening .tank-scene {
  filter: brightness(.58) saturate(.8) hue-rotate(14deg);
}
.tank-name {
  position: absolute;
  top: 27px;
  left: 30px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #f2f6e9;
  z-index: 2;
  pointer-events: none;
}
.tank-name span:not(.live-dot) {
  font-size: 9px;
  letter-spacing: 2px;
  opacity: .85;
}
.tank-name h2 {
  font-family: inherit;
  font-size: 20px;
  margin-top: 5px;
  letter-spacing: -.5px;
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cfeeac;
  margin-top: 4px;
  box-shadow: 0 0 12px #cfeeac88;
}
.tank-icon {
  position: absolute;
  top: 25px;
  right: 26px;
  z-index: 2;
  color: #ecf6ec;
  background: #102d2c55;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.tank-icon:hover {
  background: #102d2ca0;
}
.tank-icon svg {
  width: 18px;
  height: 18px;
}
#fish-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fish-target {
  position: absolute;
  left: 0;
  top: 0;
  background: transparent;
  border-radius: 40%;
  padding: 0;
  transform: translate(-50%,-50%);
  z-index: 3;
}
.fish-target:focus-visible {
  outline-color: #d6f3bd;
  outline-offset: 0;
}
.fish-target:focus-visible .fish-hover,.fish-target:hover .fish-hover {
  opacity: 1;
  transform: translate(-50%,0);
}
.fish-hover {
  position: absolute;
  bottom: -34px;
  left: 50%;
  background: #102d2ce8;
  border: 1px solid #89ae8a44;
  backdrop-filter: blur(12px);
  color: #f1f5e8;
  white-space: nowrap;
  font-size: 12px;
  padding: 10px 13px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%,4px);
  transition: opacity .2s,transform .2s;
}
.fish-hover>span {
  font-size: 10px;
  opacity: .7;
  margin-left: 10px;
}
.tank-caption {
  position: absolute;
  left: 30px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
  color: #e9f3df;
  font-size: 11px;
  line-height: 1.7;
  pointer-events: none;
}
.tank-caption strong {
  font-size: 13px;
  font-weight: 400;
}
.tap-mark {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 1px solid #cfebca66;
  border-radius: 100%;
  font-size: 20px;
}
.art-label {
  position: absolute;
  right: 27px;
  bottom: 31px;
  font-size: 9px;
  color: #e2eaddaa;
  z-index: 2;
  pointer-events: none;
}
.tank-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #e0e9d8;
  min-height: 65px;
  padding: 12px 22px;
}
.scene-controls {
  display: flex;
  gap: 3px;
  border: 1px solid #c0d0be26;
  border-radius: 7px;
  padding: 3px;
}
.scene-button {
  padding: 7px 13px;
  font-size: 11px;
  background: transparent;
  color: #9db4a7;
  border-radius: 4px;
  min-height: 31px;
}
.scene-button.selected {
  color: #e6f2de;
  background: #304c43;
}
.pause-button {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: #bacdba;
  font-size: 11px;
  margin-left: auto;
  min-height: 36px;
}
.pause-button svg {
  width: 15px;
  height: 15px;
}
.collection-stats {
  display: flex;
  align-items: center;
  margin: 0 0 34px;
  padding: 28px 10px;
  border-bottom: 1px solid #d9ded2;
  gap: 48px;
}
.collection-stats>div {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.collection-stats strong {
  font-size: 29px;
  font-weight: 400;
  letter-spacing: -1px;
}
.collection-stats span {
  font-size: 11px;
  color: #788373;
}
.collection-stats .stat-memory {
  display: block;
  margin-left: auto;
  text-align: right;
}
.stat-memory span {
  display: block;
  font-size: 9px;
  letter-spacing: 1.5px;
  margin-bottom: 5px;
}
.stat-memory strong {
  font-size: 13px;
  letter-spacing: 0;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 12px 0 23px;
}
.section-heading h2 {
  font-size: 30px;
}
.text-button {
  font-size: 12px;
  min-height: 44px;
  background: transparent;
  padding: 10px 0;
  white-space: nowrap;
}
.memory-card {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 28px;
  border: 1px solid #d9dfd0;
  background: #eeeee4;
  border-radius: 12px;
  padding: 13px;
  transition: background .2s;
}
.memory-card:hover {
  background: #e6eadc;
}
.memory-card>img {
  width: 114px;
  height: 129px;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 7px;
}
.memory-body h3 {
  margin: 9px 0 6px;
  font-family: Georgia,serif;
  font-size: 25px;
}
.memory-body>p {
  color: #6d7a6e;
  font-size: 12px;
}
.pill {
  display: inline-block;
  font-size: 8px;
  letter-spacing: 1.2px;
  font-weight: 600;
  padding: 6px 8px;
  background: #dfe8d1;
  border-radius: 4px;
  color: #526b43;
}
.pill.dark {
  color: #597049;
  background: #e3eadb;
}
.memory-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 15px;
  font-size: 10px;
  color: #77816f;
}
.round-arrow {
  margin-left: auto;
  margin-right: 18px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #bfcdb4;
  border-radius: 50%;
  font-size: 20px;
}
.muted {
  color: #788174;
  font-size: 13px;
  line-height: 1.7;
}
.section-heading .muted {
  margin-top: 9px;
}
.catch-layout {
  display: grid;
  grid-template-columns: minmax(230px,360px) 1fr;
  gap: 46px;
  align-items: start;
  margin: 24px 0 50px;
}
.catch-tile {
  overflow: hidden;
  border: 1px solid #d9dfd0;
  background: #eeeee4;
  border-radius: 12px;
  padding: 0;
  text-align: left;
}
.tile-photo {
  position: relative;
}
.tile-photo img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}
.tile-photo .pill {
  position: absolute;
  bottom: 14px;
  left: 16px;
  background: #f1f4e7e8;
}
.tile-body {
  padding: 23px;
}
.tile-body .eyebrow {
  font-size: 9px;
  letter-spacing: 1.4px;
}
.tile-body h3 {
  margin: 9px 0;
}
.tile-body p {
  font-size: 13px;
  color: #6f7b70;
}
.lure-tag {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 12px;
}
.records {
  padding: 28px 0;
}
.records h3 {
  font-family: Georgia,serif;
  font-size: 27px;
  margin-bottom: 34px;
}
.bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.bar-label strong {
  font-weight: 500;
}
.bar-track {
  height: 9px;
  border-radius: 10px;
  background: #e1e6d9;
  margin: 14px 0 30px;
  overflow: hidden;
}
.bar-track span {
  display: block;
  width: 100%;
  height: 100%;
  background: #789b62;
}
.record-row {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  font-size: 12px;
  border-bottom: 1px solid #d9dfd0;
  padding: 19px 0;
}
.record-row strong {
  font-weight: 400;
  color: #77816f;
  text-align: right;
}
.subtle-note {
  font-size: 11px;
  line-height: 1.75;
  color: #7e8778;
  margin: 16px 0;
}
.records .text-button {
  margin-top: 5px;
}
.place-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.place-photo {
  width: 100%;
  height: 440px;
  object-fit: cover;
  object-position: 45% 45%;
  border-radius: 12px;
}
.place-data {
  padding: 12px 0;
}
.place-data h3 {
  font-family: Georgia,serif;
  font-size: 27px;
  margin-bottom: 8px;
}
.lure-ranking {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid #d9dfd0;
}
.rank {
  color: #8d9c80;
  font-size: 23px;
  font-weight: 300;
}
.lure-ranking>div>strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
}
.lure-ranking>div>span {
  display: block;
  font-size: 11px;
  color: #7a8674;
  margin-top: 6px;
}
.lure-ranking>strong {
  margin-left: auto;
  font-size: 24px;
  font-weight: 400;
}
.lure-ranking small {
  font-size: 11px;
  font-weight: 400;
}
.place-facts {
  display: flex;
  gap: 40px;
  margin: 25px 0;
}
.place-facts span {
  display: block;
  font-size: 10px;
  color: #7e8778;
  margin-bottom: 7px;
}
.place-facts strong {
  font-size: 12px;
  font-weight: 500;
}
.learn-link {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px;
  background: #e6eadb;
  border-radius: 9px;
  text-decoration: none;
}
.learn-link:hover {
  background: #dde5cd;
}
.play-symbol {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #b6c5a8;
  font-size: 11px;
}
.learn-link strong {
  font-size: 12px;
  font-weight: 500;
}
.learn-link small {
  display: block;
  font-size: 10px;
  color: #788174;
  margin-top: 6px;
}
.tank-frame.immersive {
  position: fixed;
  inset: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
}
.immersive .tank {
  flex: 1;
  height: auto;
}
.immersive .tank-controls {
  flex-shrink: 0;
}
.immersive .tank-scene {
  background-size: cover;
}
body.immersed {
  overflow: hidden;
}
#fish-error {
  position: absolute;
  inset: 45% 15% auto;
  background: #102d2cee;
  color: #edf5e4;
  z-index: 3;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
}
footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .3px;
  color: #88917e;
  padding: 30px 0 26px;
  margin-top: 28px;
  border-top: 1px solid #e0e3d9;
}
.footer-dot {
  margin: 0 5px;
}
dialog {
  background: #f5f4ee;
  color: #173432;
  border: 1px solid #d9dfd0;
  padding: 0;
  border-radius: 16px;
  max-width: 880px;
  width: calc(100% - 40px);
  max-height: 90dvh;
  box-shadow: 0 20px 100px #0005;
}
dialog::backdrop {
  background: #041b24ba;
}
.dialog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 23px;
  border-bottom: 1px solid #dce1d6;
}
.dialog-top .eyebrow {
  margin: 0;
}
.close-button {
  background: transparent;
  font-size: 27px;
  min-height: 40px;
  min-width: 40px;
  color: #506547;
  border-radius: 7px;
}
.close-button:hover {
  background: #e5eadc;
}
.catch-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.photo-gallery {
  position: relative;
  background: #173432;
  display: flex;
  flex-direction: column;
  min-height: 460px;
}
.photo-gallery>img {
  width: 100%;
  height: 100%;
  max-height: 620px;
  object-fit: cover;
  flex: 1;
  display: block;
}
.photo-switch {
  position: absolute;
  bottom: 17px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  background: #102d2cde;
  backdrop-filter: blur(5px);
  border: 1px solid #adc69b33;
  border-radius: 8px;
  padding: 4px;
  white-space: nowrap;
}
.photo-switch button {
  background: transparent;
  color: #c1d2b9;
  border-radius: 5px;
  font-size: 11px;
  padding: 9px 15px;
  min-height: 35px;
}
.photo-switch button.selected {
  background: #d0e7bf;
  color: #1b392d;
}
.catch-info {
  padding: 28px;
}
.aquarium-views {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 0;
  color: #60776d;
  font-size: 13px;
}
.aquarium-views svg { width: 18px; height: 18px; }
.catch-info > a.text-button {
  display: flex;
  align-items: center;
  width: fit-content;
  white-space: normal;
}
.catch-info h2 {
  font-size: 32px;
  line-height: 1.15;
  margin: 16px 0 6px;
}
.catch-subtitle {
  font-size: 13px;
  color: #77816f;
}
dl {
  margin: 24px 0;
}
dl>div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #dee3d6;
  font-size: 12px;
}
dt {
  color: #7b8673;
}
dd {
  margin: 0;
  text-align: right;
}
dd.muted {
  font-size: 12px;
}
.art-note {
  display: flex;
  gap: 14px;
  align-items: center;
  border-top: 1px solid #dce1d6;
  margin-top: 16px;
  padding-top: 16px;
}
.art-note img {
  width: 91px;
  height: 53px;
  object-fit: contain;
}
.art-note p {
  font-size: 10px;
  line-height: 1.6;
  color: #7c8673;
}
.hall-content {
  padding: 30px;
}
.hall-content h2 {
  margin-bottom: 10px;
}
.hall-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 25px;
}
.hall-tank {
  border: 1px solid #cfd9c6;
  border-radius: 10px;
  overflow: hidden;
  background: #eceee3;
  padding: 0;
  text-align: left;
}
.mini-tank {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('/assets/aquarium.webp') center/cover;
}
.mini-tank img {
  width: 70%;
  filter: brightness(.9);
}
.hall-tank>div:not(.mini-tank) {
  padding: 17px;
}
.hall-tank strong {
  font-size: 16px;
  font-weight: 500;
}
.hall-tank div>span {
  display: block;
  font-size: 11px;
  color: #748168;
  margin-top: 7px;
}
.hall-tank>span {
  font-size: 11px;
  display: block;
  padding: 0 17px 17px;
}
.future-tank {
  border: 1px dashed #cbd4c2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 13px;
  text-align: center;
  border-radius: 10px;
  padding: 25px;
}
.future-plus {
  font-size: 34px;
  color: #8ca27c;
}
.future-tank strong {
  font-size: 13px;
  font-weight: 500;
}
.future-tank>span:not(.future-plus):not(.pill) {
  font-size: 11px;
  color: #7c876e;
}
.future-tank .pill {
  margin-top: 7px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 10px;
  background: #d0f4ba;
  padding: 14px;
  z-index: 100;
}
.skip-link:focus {
  top: 10px;
}
[hidden] {
  display: none!important;
}
@media(min-width:1400px) {
  main {
    padding-top: 50px;
  }
  .site-header {
    padding-inline: max(5%,calc((100vw - 1296px)/2));
  }
  .tank {
    height: calc(540px + var(--tank-extra-height, 0px));
  }
}
@media(max-width:760px) {
  .site-header {
    height: 78px;
    padding: 0 5%;
    gap: 12px;
  }
  .brand {
    font-size: 16px;
  }
  .brand>svg {
    width: 36px;
    height: 36px;
  }
  .brand small {
    font-size: 9px;
  }
  .private-label {
    font-size: 0;
    gap: 0;
  }
  .private-label svg {
    width: 17px;
    height: 17px;
  }
  .avatar {
    width: 33px;
    height: 33px;
  }
  .intro {
    align-items: flex-start;
    gap: 14px;
  }
  .intro>.button {
    font-size: 0;
    padding: 11px;
    min-width: 44px;
  }
  .intro>.button svg {
    width: 20px;
    height: 20px;
  }
  .intro-copy {
    font-size: 13px;
    max-width: 260px;
    line-height: 1.5;
  }
  .eyebrow {
    font-size: 9px;
    letter-spacing: 1.5px;
  }
  .intro h1 {
    font-size: 34px;
    letter-spacing: -1.3px;
    max-width: 340px;
  }
  main {
    padding: 30px 5% 0;
  }
  .tabs {
    gap: 25px;
    margin: 25px 0 18px;
  }
  .tab {
    font-size: 12px;
  }
  .tank {
    height: calc(420px + var(--tank-extra-height, 0px));
  }
  .tank-name {
    top: 21px;
    left: 21px;
  }
  .tank-name h2 {
    font-size: 18px;
  }
  .tank-icon {
    top: 18px;
    right: 17px;
    min-width: 44px;
    min-height: 44px;
  }
  .tank-caption {
    left: 21px;
    bottom: 26px;
  }
  .art-label {
    right: auto;
    left: 21px;
    bottom: 10px;
    font-size: 8px;
    opacity: .8;
  }
  .tank-controls {
    padding: 11px 12px;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .scene-button {
    padding: 7px 10px;
    min-height: 35px;
  }
  .pause-button {
    font-size: 10px;
    margin-left: 0;
    min-height: 40px;
    gap: 3px;
  }
  .pause-button svg {
    width: 13px;
  }
  .tank-controls>.button {
    width: 100%;
    margin-top: 3px;
    min-height: 40px;
  }
  .collection-stats {
    gap: 0;
    padding: 24px 2px;
    justify-content: space-between;
    margin-bottom: 23px;
  }
  .collection-stats>div {
    flex-direction: column;
    gap: 3px;
  }
  .collection-stats strong {
    font-size: 27px;
  }
  .collection-stats span {
    font-size: 9px;
  }
  .collection-stats .stat-memory {
    display: none;
  }
  .section-heading {
    gap: 10px;
    margin-bottom: 17px;
  }
  .section-heading h2 {
    font-size: 25px;
  }
  .section-heading .text-button {
    font-size: 10px;
  }
  .section-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 1.1px;
  }
  .memory-card {
    gap: 15px;
    padding: 10px;
  }
  .memory-card>img {
    width: 88px;
    height: 130px;
  }
  .memory-body h3 {
    font-size: 22px;
    line-height: 1.1;
  }
  .memory-body>p {
    font-size: 10px;
    line-height: 1.5;
  }
  .memory-body .pill {
    font-size: 7px;
    letter-spacing: .6px;
    padding: 5px;
  }
  .memory-meta {
    gap: 7px;
    margin-top: 9px;
    font-size: 9px;
  }
  .memory-meta span:last-child {
    display: none;
  }
  .round-arrow {
    display: none;
  }
  .catch-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tile-photo img {
    height: 380px;
    object-position: center 40%;
  }
  .records {
    padding: 20px 0;
  }
  .catch-layout .records h3 {
    font-size: 27px;
  }
  .place-layout {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .place-photo {
    height: 380px;
    object-position: center 38%;
  }
  .place-data {
    padding-top: 15px;
  }
  #panel-catches>.section-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  #panel-catches>.section-heading>.button {
    font-size: 11px;
  }
  .place-facts {
    gap: 30px;
  }
  .catch-detail {
    grid-template-columns: 1fr;
  }
  .photo-gallery {
    min-height: 0;
  }
  .photo-gallery>img {
    height: 420px;
    flex: none;
    object-position: center 42%;
  }
  .catch-info {
    padding: 24px;
  }
  .dialog-top {
    padding: 10px 15px;
  }
  dialog {
    width: calc(100% - 24px);
    max-height: 92dvh;
    border-radius: 12px;
  }
  .hall-content {
    padding: 23px;
  }
  .hall-content h2 {
    font-size: 28px;
  }
  .hall-grid {
    grid-template-columns: 1fr;
  }
  .future-tank {
    padding: 20px;
    gap: 8px;
  }
  .future-plus {
    font-size: 26px;
  }
  .mini-tank {
    height: 185px;
  }
  .hall-tank .mini-tank img {
    width: 60%;
  }
  footer {
    font-size: 9px;
    margin-top: 23px;
    padding-top: 22px;
    flex-direction: column;
    gap: 5px;
  }
  .tank-frame.immersive {
    inset: 5px;
  }
  .fish-hover {
    display: none;
  }
}
@media(max-width:360px) {
  .brand small {
    display: none;
  }
  .intro h1 {
    font-size: 29px;
  }
  .intro-copy {
    font-size: 12px;
  }
  .tank-name h2 {
    font-size: 16px;
  }
  .scene-button {
    padding: 7px 8px;
  }
  .tank {
    height: calc(370px + var(--tank-extra-height, 0px));
  }
  .memory-body h3 {
    font-size: 19px;
  }
  .memory-body .pill {
    font-size: 6px;
  }
  .memory-card>img {
    width: 75px;
  }
  .tabs {
    gap: 20px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  *,*:before,*:after {
    transition: none!important;
  }
}
/* Keep the complete original photograph visible and the close control in reach. */
.photo-gallery>img {
  object-fit: contain;
}
.dialog-top {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f5f4ee;
}
#memory-list {
  display: grid;
  gap: 13px;
}
.catch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin: 25px 0;
}
.records-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
}
.place-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 25px 0;
}
.place-picker button[aria-pressed=true] {
  background: #173432;
  border-color: #173432;
  color: #eff4e7;
}
.place-photo-button {
  padding: 0;
  background: #e7ebde;
  border-radius: 12px;
  overflow: hidden;
}
.place-photo {
  object-fit: contain;
  display: block;
}
.pond-memory {
  padding: 23px;
  background: #e6eadb;
  border-radius: 9px;
}
.pond-memory>p:last-child,.catch-notes {
  font-size: 13px;
  line-height: 1.7;
  color: #52684c;
}
.mini-tank {
  position: relative;
}
.mini-tank img {
  position: absolute;
  width: 48%;
  left: 10%;
  top: 12%;
  height: 75px;
  object-fit: contain;
}
.mini-tank img+img {
  left: 40%;
  top: 42%;
  width: 52%;
}
.photo-gallery {
  justify-content: center;
}
.tile-photo img {
  object-fit: contain;
  background: #e3e7da;
}
.memory-card img {
  object-fit: contain;
  background: #dfe4d4;
}
@media(max-width:760px) {
  .catch-grid,.records-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .catch-grid .tile-photo img {
    height: 330px;
  }
  .records-grid {
    gap: 30px;
  }
  .place-photo {
    height: 380px;
  }
  .hall-tank .mini-tank img {
    width: 48%;
    height: 90px;
  }
  .hall-tank .mini-tank img+img {
    width: 52%;
  }
  .lure-tag {
    gap: 12px;
    flex-wrap: wrap;
  }
  .photo-gallery>img {
    max-height: 420px;
    height: auto;
    min-height: 250px;
  }
}
/* Catch intake and editing */
.intro-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.connection-status {
  font-size: 12px;
  color: #657761;
  margin-top: 17px;
}
.connection-status:empty {
  display: none;
}
.connection-status.error {
  padding: 13px 17px;
  background: #fff1d9;
  border-radius: 9px;
  color: #78501c;
}
.pending-artwork {
  padding: 21px;
  background: #e8ecdf;
  border: 1px solid #d8dfcd;
  border-radius: 12px;
  margin-top: 18px;
}
.pending-artwork h3 {
  font-family: Georgia,serif;
  font-size: 23px;
  margin-bottom: 8px;
}
.pending-list {
  display: flex;
  gap: 11px;
  overflow: auto;
  margin-top: 13px;
}
.pending-list button {
  padding: 8px;
  border-radius: 9px;
  background: #f5f4ee;
  min-width: 95px;
  max-width: 130px;
  font-size: 11px;
  text-align: left;
}
.pending-list img {
  width: 100%;
  height: 75px;
  object-fit: contain;
  background: #dfe6d6;
  border-radius: 5px;
  display: block;
  margin-bottom: 7px;
}
.intake-dialog {
  max-width: 1120px;
}
/* Large collections keep their DOM and editable fields, while offscreen cards
   can skip layout/paint. Focused cards remain fully rendered for validation. */
.review-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
.review-card:focus-within {
  content-visibility: visible;
}
.intake-content {
  padding: 30px;
}
.intake-heading h2 {
  font-size: 34px;
  margin-bottom: 12px;
}
.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  border: 1px dashed #89a27c;
  border-radius: 12px;
  padding: 30px 20px;
  background: #e9efdf;
  margin: 25px 0 13px;
  cursor: pointer;
  text-align: center;
}
.upload-zone.dragging {
  background: #d0e7bf;
  border: 2px solid #446a38;
}
.upload-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  bottom: 20px;
}
.upload-zone:focus-within {
  outline: 3px solid #60964e;
  outline-offset: 4px;
}
.upload-symbol {
  font-size: 33px;
  color: #5f7f4d;
}
.upload-zone strong {
  font-weight: 500;
  font-size: 17px;
}
.upload-zone>span:last-child {
  font-size: 11px;
  color: #75826c;
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
  margin: 20px 0;
}
.field-grid label,.review-card>label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  color: #52674e;
}
.field-grid input,.field-grid select,.field-grid textarea,.review-card input,.review-card select,.review-card textarea {
  width: 100%;
  min-width: 0;
  min-height: 43px;
  background: #fffef8;
  border: 1px solid #c6d1bd;
  border-radius: 7px;
  padding: 10px 11px;
  font: inherit;
  font-size: 13px;
  color: #173432;
}
.field-grid textarea,.review-card textarea {
  min-height: 92px;
  resize: vertical;
}
.wide-field {
  grid-column: 1/-1;
}
.measurement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.field-grid input:focus,.field-grid textarea:focus,.review-card input:focus,.review-card textarea:focus {
  outline: 2px solid #729f5e;
  outline-offset: 2px;
}
.form-content {
  padding: 28px;
}
.form-content h2 {
  margin-bottom: 10px;
}
.form-message {
  color: #9b3d25;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-line;
}
.form-message:empty {
  display: none;
}
.batch-toolbar {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin: 22px 0 17px;
  font-size: 12px;
}
.batch-toolbar .button {
  margin-left: auto;
}
.check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.check-label input[type=checkbox] {
  width: 17px;
  height: 17px;
  min-height: 17px;
  accent-color: #355d36;
}
.shared-details {
  padding: 17px;
  border: 1px solid #d1dbc7;
  background: #ecf0e3;
  border-radius: 9px;
  margin-bottom: 20px;
}
.shared-details summary,.review-card details summary {
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 17px;
}
.review-card {
  padding: 14px;
  border: 1px solid #d1dbc7;
  border-radius: 10px;
  background: #eeeee4;
  min-width: 0;
}
.review-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.review-card-head button {
  background: transparent;
  font-size: 20px;
  min-width: 35px;
  min-height: 35px;
  color: #6e7f65;
}
.review-card .field-grid {
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 13px 0;
}
.review-card details {
  margin-top: 15px;
}
.review-photos {
  display: flex;
  gap: 5px;
  overflow: auto;
  margin-bottom: 14px;
}
.review-photo {
  position: relative;
  flex: 1;
  min-width: 65px;
  background: #dde5d3;
  border-radius: 6px;
  overflow: hidden;
}
.review-photo img {
  display: block;
  width: 100%;
  height: 155px;
  object-fit: contain;
}
.review-photo span {
  font-size: 10px;
  display: block;
  padding: 7px;
  overflow-wrap: anywhere;
}
.review-photo button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: #f5f4eee8;
  font-size: 16px;
}
.photo-unavailable {
  font-size: 11px;
  text-align: center;
  padding: 25px 8px;
  color: #667960;
}
.review-card .metadata-note {
  font-size: 10px;
  color: #718267;
  margin-top: 11px;
  line-height: 1.6;
}
.intake-savebar {
  position: sticky;
  bottom: -1px;
  margin: 20px -30px -30px;
  padding: 18px 30px;
  background: #f5f4eef5;
  border-top: 1px solid #d1dbc7;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  backdrop-filter: blur(10px);
}
.intake-savebar p {
  font-size: 12px;
  color: #6e7f65;
  line-height: 1.5;
}
button:disabled {
  cursor: wait;
  opacity: .55;
}
.edit-catch-button {
  margin-top: 14px;
  width: 100%;
}
.coordinates-note {
  font-size: 11px;
  color: #65775d;
  line-height: 1.6;
}
.saved-banner {
  padding: 14px 18px;
  border: 1px solid #bfcea9;
  background: #e3efd5;
  border-radius: 9px;
  margin-top: 18px;
  font-size: 13px;
}
.empty-state {
  padding: 30px;
  background: #e9eedf;
  border-radius: 12px;
  font-size: 14px;
  color: #6c7e60;
}
@media(max-width:900px) {
  .review-grid {
    grid-template-columns: 1fr 1fr;
  }
  .intro-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .intro-actions .button {
    font-size: 11px;
    min-height: 40px;
    padding: 9px 12px;
  }
  .intro-actions #hall-button svg {
    display: none;
  }
}
@media(max-width:600px) {
  .intro {
    display: block;
  }
  .intro-actions {
    flex-direction: row;
    margin-top: 20px;
    justify-content: space-between;
  }
  .intro-actions .button {
    flex: 1;
    font-size: 12px;
  }
  .intake-content,.form-content {
    padding: 21px;
  }
  .intake-heading h2 {
    font-size: 28px;
  }
  .review-grid {
    grid-template-columns: 1fr;
  }
  .review-photos img {
    height: 200px;
  }
  .field-grid {
    grid-template-columns: 1fr;
  }
  .intake-savebar {
    margin: 20px -21px -21px;
    padding: 15px 21px;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .intake-savebar .button {
    width: 100%;
  }
  .batch-toolbar .button {
    width: 100%;
    margin: 0;
  }
  .shared-details {
    padding: 13px;
  }
  .upload-zone {
    padding: 24px 15px;
  }
  .intake-dialog {
    width: calc(100% - 16px);
  }
  .connection-status {
    font-size: 11px;
  }
}
.photo-switch {
  max-width: calc(100% - 24px);
  overflow-x: auto;
  justify-content: flex-start;
}
.photo-switch button {
  flex-shrink: 0;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.export-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.intro-actions {
  flex-wrap: wrap;
}
.photo-unavailable {
  padding: 1rem;
  font-size: .85rem;
  line-height: 1.5;
}
.review-photo img {
  object-fit: cover;
}
#draft-status {
  margin-block: 8px;
}
.export-actions .button {
  white-space: normal;
}
@media(max-width:600px) {
  .export-actions {
    justify-content: flex-start;
  }
  .intro-actions {
    width: 100%;
  }
}

.species-collection{margin:32px 0;padding:24px;border:1px solid #adc6b33d;border-radius:20px}.species-collection summary{cursor:pointer;font-size:18px;font-weight:650}.species-collection .muted{max-width:760px;margin:18px 0}#species-library{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}#species-library article{background:#163d35;border-radius:16px;padding:16px}#species-library img{width:100%;height:110px;object-fit:contain}#species-library h3{font-size:16px;margin:12px 0 5px}#species-library span{font-size:12px;color:#bbd1c0}

#species-library h3{color:#eef6e8}