*{box-sizing:border-box} :root{color-scheme:dark;--mint:#b7f2d7;--white:#e8f7ed;--muted:#a0c9c7;--line:rgba(181,235,221,.19)}
body{margin:0;background:#052e3f;font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:var(--white);overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #c4ffdc;outline-offset:5px}button{border:0;background:none}button:hover{color:#fff}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}#aquarium{position:relative;width:100%;height:100svh;min-height:430px;overflow:hidden;isolation:isolate}#ocean{position:absolute;inset:0;width:100%;height:100%;display:block}#front-reef,#back-reef,#environment{pointer-events:none}
.header{position:absolute;top:30px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{color:#d5f7df;text-decoration:none;display:flex;align-items:center;gap:12px;pointer-events:auto}.brand>svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:1.2}.brand>span{font-size:23px;letter-spacing:5px;font-weight:500}.brand-en{display:block;font-size:8px;letter-spacing:3px;margin-top:5px;font-weight:400}.header-right{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:1px;color:#bbdeda}.live-dot{width:5px;height:5px;background:#a8edc8;border-radius:50%;box-shadow:0 0 12px #a8edc8}.header-rule{height:15px;width:1px;background:var(--line);margin:0 10px}.edition{color:#a3c3c4}.intro{position:absolute;top:145px;left:54px;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:3px;font-weight:500;margin:0;color:var(--mint)}h1{font-family:"Noto Serif SC","Songti SC","SimSun",serif;font-weight:400;letter-spacing:5px;font-size:clamp(30px,3.3vw,50px);margin:21px 0 18px;text-shadow:0 2px 20px #144c55}.intro-copy{font-size:12px;line-height:2.1;color:#b6d7d4;letter-spacing:1px}.intro-line{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:1px;color:#8ebbbb;margin-top:24px}.intro-line i{display:block;width:26px;height:1px;background:#91d5c3}.scene-note{position:absolute;right:47px;top:43%;text-align:right;pointer-events:none;opacity:.75}.note-line{display:inline-block;width:32px;height:1px;background:#abdec6}.scene-note p{font-size:11px;line-height:2.1;letter-spacing:2px}.tiny{font-size:8px;letter-spacing:2.2px;color:#88b3b3}
.footer{position:absolute;bottom:28px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:center;gap:20px;pointer-events:none}.discovery{display:flex;align-items:center;gap:11px;min-width:210px}.discovery-ring{display:grid;place-items:center;width:38px;height:38px;border:1px solid #789e9b;border-radius:50%;font-size:13px;position:relative;background:conic-gradient(#a8edc8 0deg,transparent 0deg)}.discovery-ring:before{content:"";position:absolute;inset:2px;background:#103e49;border-radius:50%}.discovery-ring>span{position:relative}.discovery-label{display:block;font-size:11px;letter-spacing:1px}.discovery-sub{display:block;font-size:9px;color:#93b2b0;margin-top:5px}.toolbar{pointer-events:auto;display:flex;align-items:center;gap:7px;background:rgba(6,39,48,.76);backdrop-filter:blur(22px);border:1px solid rgba(197,245,224,.2);box-shadow:0 12px 32px #001a2560;border-radius:100px;padding:7px 15px}.toolbar button{display:flex;align-items:center;gap:9px;padding:9px 11px;font-size:11px;letter-spacing:1px;border-radius:30px;color:#c1e4d7;transition:background .2s}.toolbar button:hover,.toolbar button[aria-expanded=true]{background:#bef2d51c}.toolbar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4}.toolbar-divider{width:1px;height:15px;background:var(--line)}.footer-hint{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:1px;color:#9cc2bc;min-width:210px;justify-content:flex-end}.footer-hint svg{width:19px;height:19px;stroke:currentColor;stroke-width:1;fill:none}
.fish{cursor:pointer;outline:none}.fish .selection-ring{fill:none;stroke:#b3fbe0;stroke-width:1;stroke-dasharray:3 6;opacity:0;transition:opacity .25s;pointer-events:none}.fish:hover .selection-ring,.fish:focus-visible .selection-ring,.fish.selected .selection-ring{opacity:.65}.fish .art{transition:filter .25s}.fish:hover .art,.fish:focus-visible .art{filter:drop-shadow(0 0 7px #b5f9de55)}.fish .hit-area{fill:transparent;pointer-events:all}.tail{transform-box:fill-box;transform-origin:right center;animation:tail-beat .85s ease-in-out infinite alternate}.fin{transform-box:fill-box;transform-origin:75% 45%;animation:fin-beat 1.3s ease-in-out infinite alternate}.long-fin{transform-origin:0 0;animation:long-fin 3s ease-in-out infinite alternate}.plant{transform-box:fill-box;transform-origin:50% 100%;animation:sway var(--duration,5s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}.beam{transform-origin:50% 0;animation:light-drift 15s ease-in-out infinite alternate}.caustic{animation:caustic 9s ease-in-out infinite alternate}.paused #ocean *,.paused .specimen *{animation-play-state:paused!important}.tooltip{position:fixed;z-index:6;pointer-events:none;padding:9px 14px;background:#052c3ee8;border:1px solid #b4f4d73a;border-radius:8px;color:#e9f8ef;box-shadow:0 8px 30px #001e3733;font-size:11px;letter-spacing:1px}.tooltip small{font-size:9px;color:#aad5c7;margin-left:12px}
.info-panel{position:absolute;z-index:5;top:100px;right:32px;width:342px;max-height:calc(100% - 200px);overflow:auto;background:linear-gradient(150deg,#103d49f5,#062735f5);border:1px solid #aeddd42e;border-radius:19px;box-shadow:0 25px 80px #00141f70;backdrop-filter:blur(25px);animation:panel-in .3s ease}.panel-top{display:flex;align-items:center;justify-content:space-between;padding:13px 14px 0 23px}.panel-top .eyebrow{font-size:8px;letter-spacing:1.8px}.icon-button{font-size:23px;line-height:1;width:34px;height:34px;border-radius:50%;font-weight:300;color:#a8c8c5}.icon-button:hover{background:#b0ddca17}.specimen{height:168px;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at center,#529d8b28,transparent 70%)}.specimen svg{height:158px;width:220px;position:relative}.specimen-orbit{position:absolute;width:138px;height:138px;border-radius:50%;border:1px solid #acdacc1a}.specimen-orbit:before{content:"";position:absolute;inset:16px;border-radius:50%;border:1px dashed #acdacc17}.specimen-number{position:absolute;bottom:15px;right:24px;color:#679c9c;font-family:Georgia,serif;font-size:13px;font-style:italic}.panel-body{padding:0 25px 16px}.family{font-size:10px;color:#9fd3b9;letter-spacing:2px;margin:2px 0 9px}.panel-body h2{font-size:27px;font-family:"Songti SC","SimSun",serif;letter-spacing:3px;font-weight:400;margin:0}.latin{font-size:11px;color:#80a9ad;font-family:Georgia,serif;font-style:italic;letter-spacing:.6px;margin:7px 0 17px}.description{font-size:12px;line-height:1.9;color:#c0d6d2;margin:0 0 16px}.facts{margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:11px 0;display:grid;gap:9px}.facts div{display:flex;gap:15px;font-size:11px;line-height:1.6}.facts dt{min-width:48px;color:#7fa9a9}.facts dd{margin:0;color:#c8ded7}.did-you-know{background:#7da98a12;border-left:2px solid #9bd5ae70;padding:11px 12px;margin-top:17px}.did-you-know>span{font-size:10px;color:#aed8b6;letter-spacing:1px}.did-you-know p{font-size:11px;line-height:1.8;color:#b0cdc5;margin:6px 0 0}.source{display:inline-block;font-size:10px;color:#9dccc1;margin-top:16px;text-decoration:none;border-bottom:1px solid #719c9733;padding-bottom:3px}.illustration-note{font-size:8px;line-height:1.7;color:#729695;margin-bottom:0}.panel-nav{border-top:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;justify-content:space-between}.panel-nav button{font-size:10px;color:#accdc0;padding:6px}.panel-nav span{font-size:9px;letter-spacing:2px;color:#6c9b9d}
.catalog{position:absolute;bottom:103px;left:50%;transform:translateX(-50%);z-index:7;width:min(780px,calc(100% - 48px));max-height:calc(100% - 210px);overflow:auto;border:1px solid #aeeac935;background:#072e3bf5;border-radius:20px;padding:25px 27px 23px;box-shadow:0 16px 60px #00182480;backdrop-filter:blur(25px)}.catalog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.catalog-heading .eyebrow{font-size:8px;color:#82afa9}.catalog-heading h2{font-size:22px;letter-spacing:2px;font-family:"SimSun",serif;font-weight:400;margin:8px 0 0}.catalog-heading h2 span{font:10px "Segoe UI",sans-serif;color:#8bad9e;vertical-align:middle;margin-left:12px;border:1px solid var(--line);border-radius:20px;padding:3px 7px}.species-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.species-card{position:relative;padding:7px 4px 12px;background:#9ecab009;border:1px solid #9ecab015;border-radius:10px;color:#bcdace;transition:background .2s,border-color .2s}.species-card:hover{background:#acd8bc15;border-color:#aedbb660}.species-card svg{display:block;width:100%;height:76px}.species-card>span{font-size:10px;letter-spacing:1px}.species-card .seen-mark{position:absolute;top:6px;right:8px;font-size:8px;color:#aee4c0;opacity:0}.species-card.seen .seen-mark{opacity:1}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes tail-beat{from{transform:scaleX(.78) skewY(-4deg)}to{transform:scaleX(1) skewY(5deg)}}@keyframes fin-beat{from{transform:rotate(-7deg) scaleY(.75)}to{transform:rotate(8deg) scaleY(1)}}@keyframes long-fin{to{transform:skewX(5deg)}}@keyframes sway{from{transform:skewX(-2deg) rotate(-1deg)}to{transform:skewX(3deg) rotate(1.2deg)}}@keyframes light-drift{from{transform:skewX(-5deg);opacity:.6}to{transform:skewX(4deg);opacity:1}}@keyframes caustic{from{opacity:.13;transform:translateX(-9px)}to{opacity:.3;transform:translateX(12px)}}@keyframes panel-in{from{opacity:0;translate:12px 0}to{opacity:1;translate:0 0}}
@media(min-width:1800px){.intro{top:17%}.header{top:40px}.footer{bottom:36px}.info-panel{top:120px;max-height:calc(100% - 235px)}}
@media(max-width:1050px){.footer-hint{display:none}.scene-note{display:none}.header{left:28px;right:28px}.intro{left:32px;top:130px}.footer{left:28px;right:28px}.info-panel{right:22px;width:310px}.panel-body{padding-left:21px;padding-right:21px}}
@media(max-height:760px) and (min-width:701px){.intro{top:115px}h1{font-size:35px;margin:15px 0 10px}.intro-line{margin-top:14px}.info-panel{top:87px;max-height:calc(100% - 172px)}.specimen{height:112px}.specimen svg{height:115px}.panel-top{padding-top:8px}.panel-body{padding-bottom:11px}.description{margin-bottom:10px}.did-you-know{margin-top:10px}.footer{bottom:20px}}
@media(max-width:700px){.header{top:22px;left:22px;right:22px}.brand>svg{width:31px;height:31px}.brand>span{font-size:19px}.brand-en{font-size:6px;letter-spacing:2px}.header-right{font-size:9px;gap:6px}.header-rule,.edition{display:none}.intro{top:110px;left:27px}.eyebrow{font-size:7px;letter-spacing:2px}h1{font-size:31px;letter-spacing:3px;margin:15px 0 12px}.intro-copy{font-size:10px;line-height:2}.intro-line{font-size:8px;margin-top:16px}.footer{left:16px;right:16px;bottom:19px;gap:10px;flex-wrap:wrap;justify-content:center}.discovery{position:absolute;bottom:66px;left:4px;min-width:0;gap:7px}.discovery-ring{width:28px;height:28px;font-size:10px}.discovery-label{font-size:8px}.discovery-sub{font-size:7px;margin-top:3px}.toolbar{padding:5px 12px;gap:8px}.toolbar button{font-size:10px;padding:9px 10px;gap:8px}.info-panel{top:auto;bottom:84px;left:14px;right:14px;width:auto;max-height:64%;border-radius:17px}.specimen{height:116px}.specimen svg{height:120px}.panel-body h2{font-size:24px}.panel-body{padding:0 22px 14px}.description{font-size:11px}.panel-top{padding-top:8px}.catalog{bottom:84px;width:calc(100% - 28px);max-height:calc(100% - 174px);padding:20px 17px}.species-grid{grid-template-columns:repeat(3,1fr);gap:8px}.species-card svg{height:70px}.catalog-heading{margin-bottom:14px}.catalog-heading h2{font-size:20px}.catalog-heading .eyebrow{font-size:7px}.tooltip{font-size:10px}.tooltip small{display:none}}
@media(prefers-reduced-motion:reduce){.info-panel{animation:none}.fish .art,.fish .selection-ring{transition:none}}