:root{color-scheme:light;--page:#f4f7f5;--surface:#fff;--surface-soft:#e9f0ed;--ink:#15211f;--muted:#60706d;--line:#d8e1de;--deep:#083b3a;--teal:#0b6b63;--teal-hover:#07564f;--mint:#b8ddd1;--coral:#ef6b50;--blue:#3978a8;--white:#fff;--shadow:0 8px 24px #083b3a1a;--content:1200px;--reading:720px;--radius:8px;--pill:999px;--font-sans:"SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;color:var(--ink);background:var(--page);font-family:var(--font-sans);letter-spacing:0;text-rendering:optimizelegibility;margin:0;font-size:16px;line-height:1.65}body,button,input{font-family:var(--font-sans)}button,input{letter-spacing:0}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}[hidden]{display:none!important}button,a,input{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid color-mix(in srgb, var(--coral) 72%, white);outline-offset:3px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.site-shell{min-height:100vh}.container{width:min(calc(100% - 40px), var(--content));margin-inline:auto}.site-header{z-index:20;border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--surface) 94%, transparent);position:relative}.site-header--overlay{color:var(--white);background:#083b3a2e;border-bottom-color:#ffffff47;position:absolute;inset:0 0 auto}.site-header__inner{align-items:center;gap:32px;min-height:72px;display:flex}.brand{flex:none;align-items:center;gap:10px;font-size:22px;font-weight:700;display:inline-flex}.brand__mark{border-radius:var(--pill);width:36px;height:36px;color:var(--deep);background:var(--mint);place-items:center;display:grid}.site-nav{align-items:center;gap:28px;margin-left:auto;font-size:14px;font-weight:600;display:flex}.site-nav a{border-bottom:2px solid #0000;align-items:center;min-height:44px;display:inline-flex}.site-nav a:hover,.site-nav a[aria-current=page]{border-bottom-color:currentColor}.hero{min-height:min(700px,100svh - 40px);color:var(--white);background:var(--deep);align-items:center;display:flex;position:relative;overflow:hidden}.hero__media,.hero__scrim{position:absolute;inset:0}.hero__media{object-fit:cover;width:100%;height:100%}.hero__scrim{background:#052b2aad}.hero__content{z-index:1;width:min(660px,72%);padding-block:132px 72px;position:relative}.eyebrow{color:var(--mint);margin:0 0 12px;font-size:14px;font-weight:700}.hero h1{margin:0;font-size:clamp(54px,7vw,94px);font-weight:700;line-height:1}.hero__lead{max-width:600px;margin:24px 0 28px;font-size:clamp(18px,2vw,22px);line-height:1.6}.hero-search{border-radius:var(--radius);width:min(100%,600px);min-height:58px;color:var(--ink);background:var(--surface);box-shadow:var(--shadow);border:1px solid #ffffff75;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:7px 7px 7px 18px;display:grid}.hero-search svg{color:var(--teal)}.hero-search input{width:100%;min-width:0;min-height:44px;color:var(--ink);background:0 0;border:0;outline:0;padding:0;font-size:16px}.hero-search button,.button{border:1px solid var(--teal);border-radius:var(--radius);min-height:44px;color:var(--white);background:var(--teal);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:14px;font-weight:700;display:inline-flex}.hero-search button:hover,.button:hover{border-color:var(--teal-hover);background:var(--teal-hover)}.button--secondary{color:var(--deep);border-color:var(--line);background:var(--surface)}.button--secondary:hover{border-color:var(--deep);color:var(--white);background:var(--deep)}.hero__actions{flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;display:flex}.hero__random{min-height:44px;color:var(--white);align-items:center;gap:8px;padding:0 4px;font-size:14px;font-weight:700;display:inline-flex}.hero__random:hover{color:var(--mint)}.section{padding-block:76px}.section--white{background:var(--surface)}.section--soft{background:var(--surface-soft)}.section__head{justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px;display:flex}.section__head h2,.page-intro h1,.detail-title{margin:0;line-height:1.2}.section__head h2{font-size:clamp(28px,4vw,42px)}.section__head p{max-width:560px;color:var(--muted);margin:8px 0 0}.text-link{min-height:44px;color:var(--teal);white-space:nowrap;align-items:center;gap:8px;font-size:14px;font-weight:700;display:inline-flex}.text-link:hover{color:var(--coral)}.fish-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.fish-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);min-width:0;transition:transform .12s,box-shadow .12s,border-color .12s;overflow:hidden}.fish-card:hover{border-color:var(--teal);box-shadow:var(--shadow);transform:translateY(-3px)}.fish-card__image{aspect-ratio:4/3;background:var(--surface-soft);position:relative;overflow:hidden}.fish-card__image img{object-fit:cover;width:100%;height:100%;transition:transform .18s}.fish-card:hover .fish-card__image img{transform:scale(1.025)}.fish-card__category,.status-badge{border-radius:var(--pill);align-items:center;font-size:12px;font-weight:700;display:inline-flex}.fish-card__category{min-height:28px;color:var(--deep);background:var(--mint);padding:0 10px;position:absolute;bottom:12px;left:12px}.fish-card__body{padding:18px}.fish-card__title-row{justify-content:space-between;align-items:start;gap:12px;display:flex}.fish-card h3{margin:0;font-size:21px;line-height:1.3}.fish-card__arrow{color:var(--teal);flex:none}.fish-card__latin{color:var(--muted);margin-top:4px;font-size:13px;font-style:italic}.fish-card__summary{color:var(--muted);margin:12px 0 0;font-size:14px;line-height:1.65}.habitat-grid{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.habitat-link{flex-direction:column;justify-content:space-between;gap:20px;min-height:154px;padding:28px;display:flex}.habitat-link+.habitat-link{border-left:1px solid var(--line)}.habitat-link svg{color:var(--teal)}.habitat-link strong{margin-bottom:4px;font-size:20px;display:block}.habitat-link span{color:var(--muted);font-size:14px}.habitat-link:hover{color:var(--white);background:var(--deep)}.habitat-link:hover svg,.habitat-link:hover span{color:var(--mint)}.page-intro{border-bottom:1px solid var(--line);background:var(--surface);padding-block:64px 42px}.page-intro__inner{grid-template-columns:minmax(0,1fr) minmax(260px,420px);align-items:end;gap:40px;display:grid}.page-intro h1{font-size:clamp(42px,7vw,72px)}.page-intro p{color:var(--muted);margin:14px 0 0}.page-intro__count{color:var(--teal);font-size:14px;font-weight:700}.catalog{padding-block:36px 80px}.catalog-controls{margin-bottom:28px}.catalog-search{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:50px;padding:0 14px;display:grid}.catalog-search svg{color:var(--teal)}.catalog-search input{min-width:0;min-height:48px;color:var(--ink);background:0 0;border:0;outline:0;font-size:16px}.clear-search{border-radius:var(--radius);width:40px;height:40px;color:var(--muted);cursor:pointer;background:0 0;border:0;place-items:center;display:grid}.clear-search:hover{color:var(--deep);background:var(--surface-soft)}.catalog-meta{color:var(--muted);justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px;font-size:14px;display:flex}.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.empty-state{text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);place-items:center;min-height:280px;display:none}.empty-state[data-visible=true]{display:grid}.empty-state svg{color:var(--teal);margin:0 auto 12px}.empty-state h2{margin:0;font-size:24px}.empty-state p{color:var(--muted);margin:6px 0 18px}.detail-hero{background:var(--surface)}.detail-hero__inner{grid-template-columns:minmax(0,7fr) minmax(360px,5fr);min-height:620px;display:grid}.detail-media{background:var(--surface-soft);min-height:520px;position:relative;overflow:hidden}.detail-media img{object-fit:cover;width:100%;height:100%}.detail-media__credit{border-radius:var(--pill);min-height:28px;color:var(--white);background:#08211fb8;align-items:center;padding:0 10px;font-size:12px;display:inline-flex;position:absolute;bottom:16px;right:16px}.detail-summary{flex-direction:column;justify-content:center;padding:56px;display:flex}.detail-summary__back{width:max-content;min-height:44px;color:var(--teal);align-items:center;gap:8px;margin-bottom:28px;font-size:14px;font-weight:700;display:inline-flex}.detail-summary__label{color:var(--coral);margin:0 0 10px;font-size:14px;font-weight:700}.detail-title{font-size:clamp(42px,5vw,66px)}.detail-latin{color:var(--muted);margin-top:6px;font-size:16px;font-style:italic}.detail-aliases{color:var(--muted);margin:18px 0 0;font-size:14px}.detail-lead{margin:24px 0;font-size:18px}.status-badge{width:max-content;min-height:32px;color:var(--deep);border:1px solid var(--mint);background:var(--surface-soft);gap:8px;padding:0 11px}.status-badge strong{color:var(--teal)}.facts-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--deep);color:var(--white)}.facts-grid{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.fact{flex-direction:column;justify-content:center;gap:6px;min-height:126px;padding:24px 34px;display:flex}.fact+.fact{border-left:1px solid #ffffff2e}.fact__label{color:var(--mint);font-size:13px;font-weight:700}.fact__value{font-size:18px;font-weight:650}.observation-gallery{border-bottom:1px solid var(--line);background:var(--surface-soft);padding-block:56px}.observation-gallery__head{margin-bottom:22px}.observation-gallery__head .eyebrow{margin-bottom:6px}.observation-gallery__head h2{margin:0;font-size:30px}.observation-gallery__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:24px;display:grid}.observation-media{width:min(100%,760px);margin:0}.observation-media img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);width:100%;height:auto}.observation-media figcaption{color:var(--muted);margin-top:9px;font-size:13px}.detail-content{background:var(--surface);padding-block:72px}.detail-content__grid{grid-template-columns:minmax(0, var(--reading)) minmax(220px, 1fr);align-items:start;gap:80px;display:grid}.prose h2{margin:0 0 18px;font-size:30px}.prose h2:not(:first-child){margin-top:48px}.prose p{color:#384744;margin:0;font-size:17px;line-height:1.9}.detail-aside{border-top:3px solid var(--coral);padding-top:18px}.detail-aside h2{margin:0 0 14px;font-size:18px}.detail-aside dl{margin:0}.detail-aside div{border-top:1px solid var(--line);padding:13px 0}.detail-aside dt{color:var(--muted);font-size:12px;font-weight:700}.detail-aside dd{margin:4px 0 0;font-size:14px}.about-page{background:var(--surface);min-height:70vh;padding-block:72px 96px}.about-page__content{width:min(100%, var(--reading))}.about-page h1{text-wrap:balance;margin:0;font-size:clamp(42px,5vw,64px);line-height:1.15}.about-page .lead{color:var(--muted);margin:22px 0 40px;font-size:20px}.about-page h2{margin:38px 0 12px;font-size:26px}.about-page p{color:#384744}.about-credits{border-top:1px solid var(--line);margin:22px 0}.about-credits>div{border-bottom:1px solid var(--line);grid-template-columns:140px minmax(0,1fr);gap:24px;padding-block:20px;display:grid}.about-credits dt{color:var(--deep);font-size:18px;font-weight:700}.about-credits dd{color:#384744;margin:0}.site-footer{color:var(--muted);border-top:1px solid var(--line);background:var(--page);padding-block:40px}.site-footer__inner{justify-content:space-between;align-items:center;gap:24px;display:flex}.site-footer__brand{color:var(--deep);font-weight:700}.site-footer__links{gap:20px;font-size:14px;display:flex}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fish-card,.fish-card__image img{transition:none}}@media (width<=960px){.fish-grid,.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-hero__inner{grid-template-columns:1fr}.detail-media{aspect-ratio:16/10;min-height:auto}.detail-summary{padding:46px max(28px,50vw - 380px)}.detail-content__grid{grid-template-columns:minmax(0,1fr) 240px;gap:44px}}@media (width<=720px){.container{width:min(calc(100% - 28px), var(--content))}.site-header__inner{gap:16px;min-height:64px}.brand{font-size:20px}.brand__mark{width:32px;height:32px}.site-nav{gap:14px;font-size:13px}.site-nav a:nth-child(2){display:none}.hero{align-items:end;min-height:720px}.hero__content{width:100%;padding-block:110px 52px}.hero h1{font-size:clamp(52px,18vw,74px)}.hero__lead{font-size:18px}.hero-search{grid-template-columns:auto 1fr;padding:8px 12px}.hero-search button{grid-column:1/-1;width:100%}.section{padding-block:58px}.section__head,.page-intro__inner{display:block}.section__head .text-link{margin-top:12px}.fish-grid,.catalog-grid{grid-template-columns:1fr}.fish-card{grid-template-columns:minmax(126px,40%) 1fr;display:grid}.fish-card__image{aspect-ratio:auto;height:100%;min-height:184px}.habitat-grid{grid-template-columns:1fr}.habitat-link{min-height:126px}.habitat-link+.habitat-link{border-top:1px solid var(--line);border-left:0}.page-intro{padding-block:48px 34px}.page-intro__count{margin-top:18px}.detail-hero__inner{min-height:0}.detail-media{aspect-ratio:4/3}.detail-summary{padding:32px 20px 40px}.detail-summary__back{margin-bottom:20px}.facts-grid{grid-template-columns:1fr}.fact{min-height:94px;padding:18px 20px}.fact+.fact{border-top:1px solid #ffffff2e;border-left:0}.detail-content{padding-block:52px}.observation-gallery{padding-block:44px}.observation-gallery__head h2{font-size:26px}.detail-content__grid{grid-template-columns:1fr;gap:48px}.about-credits>div{grid-template-columns:1fr;gap:6px}.site-footer__inner{flex-direction:column;align-items:flex-start}}@media (width<=460px){.site-nav a:nth-child(3){display:none}.hero{min-height:700px}.hero__content{padding-bottom:38px}.fish-card{grid-template-columns:118px 1fr}.fish-card__body{padding:14px}.fish-card h3{font-size:18px}.fish-card__summary{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}}