@import"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600&display=swap";:root{font-family:Microsoft YaHei,PingFang SC,sans-serif;color:#29483e;background:#edf0e9;font-synthesis:none;--ink: #29483e;--muted: #829087;--border: rgba(58, 85, 67, .14)}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,#aquarium:focus-visible{outline:2px solid #6d9981;outline-offset:4px}button:disabled{cursor:wait;opacity:.5}a{color:inherit;text-decoration:none}button{color:inherit}#app{position:relative;width:100%;height:100dvh;min-height:730px;overflow:hidden;background:radial-gradient(ellipse at 52% 43%,#f5f7f1,#e8eee5 75%,#e5ebe2)}#aquarium{position:absolute;inset:0;outline:none;touch-action:none}#aquarium canvas{display:block;width:100%;height:100%;cursor:grab}#aquarium canvas:active{cursor:grabbing}.water-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse,transparent 25%,#173e4730 100%);opacity:0;transition:opacity 1.4s}.immersed .water-vignette{opacity:1}.topbar{position:absolute;left:3.4%;right:3.4%;top:0;height:91px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);z-index:3}.brand{display:flex;gap:11px;align-items:center}.brand svg{width:37px;height:37px}.brand>span{font-family:"Noto Serif SC",SimSun,serif;font-size:23px;letter-spacing:5px;font-weight:600;line-height:1.1}.brand small{display:block;font-family:Arial,sans-serif;font-size:8px;letter-spacing:1.6px;margin-top:7px;font-weight:400}.topbar nav{display:flex;gap:24px;align-items:center;font-size:11px;letter-spacing:1px;color:#87948a}.nav-active{color:#355446}.nav-slash{color:#b9c2b6}.live-tag{display:flex;gap:8px;align-items:center;font-size:10px;letter-spacing:1px}.live-tag i,.water-stats i{display:inline-block;width:5px;height:5px;border-radius:100%;background:#78a582;box-shadow:0 0 0 4px #79a58112}.live-tag>span{font:11px monospace;border-left:1px solid var(--border);padding-left:16px;margin-left:9px}.overlay{position:absolute;inset:0;pointer-events:none}.intro{position:absolute;left:4.6%;top:16.8%;transition:opacity .6s,transform .6s}.eyebrow{display:flex;align-items:center;gap:9px;font:9px Arial,sans-serif;letter-spacing:2.1px;color:#7d9281}.eyebrow>span{width:18px;height:1px;background:#7e9b81}h1{font-family:"Noto Serif SC",Songti SC,SimSun,serif;font-size:clamp(30px,2.7vw,43px);font-weight:500;line-height:1.6;letter-spacing:3px;margin:19px 0 14px}.intro p{font-size:11px;letter-spacing:1px;line-height:2.1;color:#869286}.intro-rule{width:28px;height:1px;background:#c4cebf;margin:22px 0 16px}.scene-meta{display:flex;align-items:center;gap:9px;font-size:9px;color:#8a9689;letter-spacing:.5px}.scene-meta i{width:2px;height:2px;background:#a4b29f;border-radius:50%}.view-panel{position:absolute;right:3.6%;top:33%;width:166px;pointer-events:auto}.panel-label{font-size:9px;letter-spacing:1.2px;color:#8c9a8b;padding:0 4px 15px}.view-button{width:100%;display:flex;align-items:center;gap:12px;position:relative;border:1px solid transparent;background:transparent;padding:17px 13px;margin-bottom:8px;border-radius:10px;text-align:left;transition:all .3s}.view-button:hover{background:#fff5}.view-button.active{border-color:#ffffffaf;background:#fbfff6a6;box-shadow:0 5px 22px #294d3910;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.view-button>svg{width:23px;height:23px;color:#6e8874;flex-shrink:0}.view-button>span{font-size:12px;letter-spacing:1px;white-space:nowrap}.view-button small{display:block;font:6px Arial,sans-serif;letter-spacing:.7px;margin-top:6px;color:#91a18f}.view-button em{font:8px monospace;color:#a1ad9b;position:absolute;right:10px;top:11px}.view-hint{text-align:center;color:#8e9c88;font-size:8px;letter-spacing:1.6px;margin-top:15px}.ecosystem{position:absolute;left:4.6%;bottom:22%;width:253px;transition:opacity .6s,transform .6s}.ecosystem-title{font-size:10px;color:#6c806b;letter-spacing:.6px;display:flex;gap:7px;align-items:center}.leaf-icon{font-size:19px;font-weight:400;color:#819878}.inhabitants{display:flex;gap:32px;margin:21px 0 19px}.inhabitants>div{display:flex;flex-direction:column;gap:7px}.inhabitants strong{font:28px Georgia,serif;color:#49684d;font-weight:400}.inhabitants strong small{font:9px Microsoft YaHei,sans-serif;margin-left:4px;color:#95a18e}.inhabitants>div>span{font-size:8px;color:#8d9984;letter-spacing:.8px}.water-stats{border-top:1px solid #b8c6b544;padding-top:13px;display:flex;gap:20px;font-size:9px;color:#7b8e76;align-items:center}.water-stats span:first-child{display:flex;align-items:center;gap:7px}.water-stats small{font-size:8px}.scene-caption{position:absolute;right:22%;bottom:23%;display:grid;grid-template-columns:25px 1fr;gap:7px 9px;align-items:center}.caption-line{height:1px;background:#90a48a;width:25px}.scene-caption>span:nth-child(2){font-size:10px;letter-spacing:1.5px;color:#71816d}.scene-caption small{grid-column:2;font:7px Arial;letter-spacing:1.5px;color:#9aa893}.bottom-area{position:absolute;left:3.4%;right:3.4%;bottom:22px;display:flex;flex-direction:column;align-items:center;pointer-events:none}.interaction-hint{display:flex;gap:8px;align-items:center;color:#8b9b86;font-size:9px;letter-spacing:.7px;margin-bottom:17px}.interaction-hint svg{width:13px;height:16px}.hint-dot{padding:0 10px;color:#b0bba9}.toolbar{pointer-events:auto;display:flex;align-items:center;padding:7px;border:1px solid #ffffffcc;border-radius:14px;background:#f8fbf3c9;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 9px 35px #49694512}.toolbar button{display:flex;align-items:center;gap:8px;border:0;background:transparent;border-radius:9px;padding:13px 20px;color:#59715a;font-size:10px;letter-spacing:.5px;transition:background .2s}.toolbar button:hover{background:#e7eee1}.toolbar button[aria-pressed=true]{background:#dce9d5;color:#365c3e}.toolbar svg{width:18px;height:18px}.tool-divider{height:20px;width:1px;background:#d6dfcf;margin:0 3px}.footer-note{display:flex;justify-content:space-between;width:100%;border-top:1px solid #b2c1ab3d;margin-top:25px;padding-top:18px;font-size:8px;letter-spacing:1px;color:#95a38c}.footer-note>span{font:7px Arial;letter-spacing:2px}.specimen{position:absolute;left:4.6%;bottom:27%;width:280px;padding:18px 20px;border:1px solid #ffffff99;border-radius:12px;background:#f3f8edd9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s}.specimen-index{font-size:8px;letter-spacing:1.5px;color:#6a8f7b}.specimen h2{font-family:"Noto Serif SC",SimSun,serif;font-size:18px;font-weight:500;line-height:1.8}.specimen p{font-size:10px;line-height:2;color:#749280}.immersed .intro,.immersed .ecosystem{opacity:0;transform:translateY(-8px)}.micro-view .specimen{opacity:1;transform:none}.immersed .topbar{background:#edf2e8a6;border-radius:0 0 10px 10px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.immersed .view-button{background:#f5faefd9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.immersed .scene-caption{right:23%;bottom:23%}.feeding-hud{position:absolute;z-index:4;top:112px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:13px 20px;border:1px solid #ffffffbb;border-radius:12px;background:#f5f9eef0;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 5px 24px #294d3910;pointer-events:none}.feeding-hud[hidden]{display:none}.feeding-hud strong{display:block;font-size:11px;font-weight:500;letter-spacing:1px}.feeding-hud small{display:block;margin-top:6px;color:#7e8e71;font-size:9px;font-variant-numeric:tabular-nums}.feeding-dot{width:7px;height:7px;border-radius:50%;background:#c99656;box-shadow:0 0 0 5px #c996561c}@media(max-width:650px){.feeding-hud{top:auto;bottom:253px;padding:11px 17px;white-space:nowrap}.has-fed .scene-caption{opacity:0}}.toast{position:absolute;bottom:185px;left:50%;transform:translate(-50%,10px);border:1px solid #ffffff70;background:#294c40dd;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);padding:13px 23px;border-radius:30px;color:#f2f7ed;font-size:11px;letter-spacing:.4px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:8;white-space:nowrap}.toast.visible{opacity:1;transform:translate(-50%)}.loading{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:17px;background:#eef2e8;z-index:10;transition:opacity .6s}.loading.done{opacity:0;pointer-events:none}.loading>span{font-family:"Noto Serif SC",SimSun,serif;font-size:19px;letter-spacing:3px}.loading small{color:#8c9a83;font-size:10px;letter-spacing:2px}.loading-ripple{width:42px;height:42px;border:1px solid #7b9a73;border-radius:50%;box-shadow:0 0 0 8px #8eac7914,0 0 0 17px #8eac7909;margin-bottom:18px;animation:ripple 2s ease-in-out infinite}.error{position:absolute;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,85%);padding:30px;background:#f5f8ef;border:1px solid #c1d1b8;border-radius:16px;text-align:center}.error[hidden]{display:none}.error h2{font-size:18px}.error p{font-size:12px;line-height:1.9;color:#7c8d73}.error button{border:0;background:#557553;color:#fff;padding:10px 22px;border-radius:7px}@keyframes ripple{50%{transform:scale(.8);opacity:.5}}@media(min-width:1700px){.intro{left:5.5%;top:18%}.ecosystem{left:5.5%}.view-panel{right:5%;width:185px}.view-button{padding:20px 16px}.scene-caption{right:25%}}@media(max-height:800px)and (min-width:850px){#app{min-height:640px}.intro{top:17%}h1{font-size:32px;margin:11px 0 8px}.intro-rule{margin:15px 0 13px}.ecosystem{bottom:24%}.inhabitants{margin:12px 0}.topbar{height:76px}.bottom-area{bottom:15px}.footer-note{margin-top:17px;padding-top:12px}.scene-caption{bottom:26%}}@media(max-width:1000px){.intro{left:4%}h1{font-size:32px}.view-panel{right:3%;width:130px}.view-button{gap:9px;padding:14px 9px}.view-button small{font-size:5px}.view-button em{display:none}.ecosystem{width:220px;left:4%}.inhabitants{gap:26px}.scene-caption{right:21%;bottom:25%}.topbar nav{gap:12px}}@media(max-width:650px){#app{min-height:720px}.topbar{left:6%;right:6%;height:80px}.brand svg{width:30px;height:30px}.brand>span{font-size:20px}.brand small{font-size:6px}.topbar nav{display:none}.live-tag{font-size:8px;letter-spacing:.3px;gap:6px}.live-tag>span{padding-left:10px;margin-left:4px;font-size:9px}.intro{left:7%;top:117px}.eyebrow{font-size:7px;letter-spacing:1.5px}h1{font-size:31px;line-height:1.5;letter-spacing:2px;margin:15px 0 10px}.intro p{font-size:9px;line-height:1.9}.intro-rule,.scene-meta{display:none}.view-panel{inset:auto 7% 184px;width:auto;display:flex;gap:8px}.panel-label,.view-hint{display:none}.view-button{padding:12px 10px;gap:8px;margin:0;justify-content:center;background:#f8fff32e}.view-button>svg{width:18px;height:18px}.view-button>span{font-size:10px}.view-button small{font-size:5px;letter-spacing:.3px;margin-top:4px}.ecosystem{display:none}.scene-caption{left:7%;bottom:262px;right:auto;gap:5px 8px}.scene-caption>span:nth-child(2){font-size:8px}.scene-caption small{font-size:6px}.bottom-area{left:6%;right:6%;bottom:18px}.interaction-hint{font-size:8px;margin-bottom:13px}.hint-dot{padding:0 5px}.toolbar{width:100%;justify-content:space-around;padding:5px;border-radius:12px}.toolbar button{flex-direction:column;gap:6px;font-size:8px;padding:10px 8px;letter-spacing:0}.toolbar svg{width:17px;height:17px}.tool-divider{margin:0;height:23px}.footer-note{padding-top:15px;margin-top:22px;font-size:7px;letter-spacing:.2px}.footer-note>span{font-size:5px;letter-spacing:.8px}.specimen{left:7%;bottom:auto;top:130px;width:83%}.specimen h2{font-size:21px;margin:12px 0}.specimen p{font-size:10px;max-width:255px}.immersed .scene-caption{left:7%;right:auto;bottom:262px}.toast{bottom:255px;font-size:9px;padding:12px 17px;max-width:90%;white-space:normal;text-align:center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}