.tank{color:#fff;isolation:isolate;background:linear-gradient(#8fdbe6 0%,#3fb2c7 16%,#0b7a8f 46%,#0a4f70 74%,#082f47 100%);height:calc(100svh - 4rem);min-height:34rem;position:relative;overflow:clip;container-type:inline-size}.tank:before{content:"";z-index:-1;filter:blur(14px);background:repeating-linear-gradient(100deg,#ffffff1a 0 3%,#0000 3% 9%,#ffffff0d 9% 13%,#0000 13% 21%);animation:16s ease-in-out infinite alternate tank-rays;position:absolute;inset:-10% -20% 25%;mask-image:linear-gradient(#000,#0000)}@keyframes tank-rays{0%{opacity:.75;transform:translate(-3%)skew(-4deg)}to{opacity:1;transform:translate(3%)skew(4deg)}}.tank-caustics{z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:.5;position:absolute;inset:0;overflow:hidden;mask-image:linear-gradient(#000 0%,#000000bf 55%,#0000004d 100%)}.tank-caustics:before,.tank-caustics:after{content:"";will-change:transform;background:url(/assets/tank/caustics.webp) 0 0/640px 640px;position:absolute;inset:-640px}.tank-caustics:before{animation:22s linear infinite tank-caustic-a}.tank-caustics:after{mix-blend-mode:multiply;animation:31s linear infinite tank-caustic-b}@keyframes tank-caustic-a{to{transform:translate(640px,640px)}}@keyframes tank-caustic-b{to{transform:translate(-640px,640px)}}.tank-water{z-index:3;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.tank .tank-sand{z-index:0;pointer-events:none;width:100%;height:12%;position:absolute;inset:auto 0 0}.tank-stage{z-index:1;will-change:transform;position:absolute;inset:0}.tank-bar{z-index:5;pointer-events:none;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;display:flex;position:absolute;inset:.75rem .75rem auto}.tank-bar>*{pointer-events:auto}.tank-chip{backdrop-filter:blur(6px);color:#fff;background:#082f47bf;border:1px solid #ffffff4d;border-radius:999px;align-items:center;gap:.4rem;padding:.5rem .85rem;font-size:.875rem;font-weight:600;transition:background-color .15s;display:inline-flex}.tank-chip:hover{background:#082f47f2}.tank-trail{color:#fff;text-shadow:0 1px 4px #082f47e6;pointer-events:none;font-size:.875rem;font-weight:600}.tank :focus-visible{outline-offset:2px;outline:3px solid #fff}.tank-photo{user-select:none;-webkit-user-drag:none;width:100%;height:auto;display:block}.tank-photo--faded{mask-image:radial-gradient(50% 50%,#000 58%,#0000 100%)}.tank-level--one{grid-template-rows:repeat(3,1fr);height:100%;display:grid}.tank-zone{width:100%;color:inherit;text-align:left;background:0 0;border:0;transition:background-color .2s;position:relative;overflow:hidden;container-type:inline-size}.tank-zone+.tank-zone{border-top:1px dashed #ffffff38}.tank-zone:hover,.tank-zone:focus-visible{background-color:#ffffff1a}.tank-zone:focus-visible{outline-offset:-5px}.tank-zone-life{pointer-events:none;position:absolute;inset:0}.tank-zone-label{backdrop-filter:blur(4px);background:#082f47b3;border-radius:.875rem;flex-direction:column;gap:.1rem;padding:.55rem .9rem;transition:transform .2s;display:flex;position:absolute;top:.75rem;left:clamp(.75rem,3cqw,2.5rem)}.tank-zone--top .tank-zone-label{top:3.75rem}.tank-zone:hover .tank-zone-label,.tank-zone:focus-visible .tank-zone-label{transform:translate(6px)}.tank-zone-label strong{font-family:var(--font-serif);font-size:clamp(1.15rem,2.6cqw,1.8rem);line-height:1.2}.tank-zone-label small{opacity:.92;font-size:.8rem}.tank-swimmer{top:var(--top);width:var(--size);min-width:2.6rem;animation:tank-swim var(--swim) linear var(--delay) infinite;position:absolute;left:0}@keyframes tank-swim{0%{transform:translate(-16cqw)scaleX(1)}49.9%{transform:translate(104cqw)scaleX(1)}50%{transform:translate(104cqw)scaleX(-1)}to{transform:translate(-16cqw)scaleX(-1)}}.tank-bob{animation:tank-bob 2.6s ease-in-out var(--bob-delay,0s) infinite alternate;display:block}@keyframes tank-bob{0%{transform:translateY(-5px)rotate(-1.5deg)}to{transform:translateY(5px)rotate(1.5deg)}}.tank-scenery{pointer-events:none;position:absolute;inset:0}.tank-plant{bottom:0;left:var(--left);width:calc(clamp(5.5rem, 13cqw, 11rem) * var(--plant-height));transform-origin:50% 100%;animation:tank-sway 6s ease-in-out var(--sway-delay) infinite alternate;position:absolute}@keyframes tank-sway{0%{transform:rotate(-2deg)}to{transform:rotate(2deg)}}.tank-level--close{scrollbar-width:thin;flex-direction:column;padding-inline:clamp(1rem,4cqw,3rem);display:flex;position:absolute;inset:4.25rem 0 4.5rem;overflow-y:auto}.tank-level--more{mask-image:linear-gradient(#000 calc(100% - 3rem),#0000)}.tank-more{display:none}.tank-level--more+.tank-more{filter:drop-shadow(0 1px 3px #082f47e6);pointer-events:none;border-bottom:4px solid #fff;border-right:4px solid #fff;width:1.2rem;height:1.2rem;animation:1.2s ease-in-out infinite alternate tank-more;display:block;position:absolute;bottom:4.9rem;left:calc(50% - .6rem)}@keyframes tank-more{0%{transform:translateY(-2px)rotate(45deg)}to{transform:translateY(3px)rotate(45deg)}}.tank-heading:focus{outline:none}.tank-tiles{grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));place-items:center;gap:clamp(.75rem,2.5cqw,2rem);width:100%;max-width:76rem;margin:auto;display:grid}.tank-tile{aspect-ratio:4/3;pointer-events:none;background:0 0;border:0;border-radius:1rem;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;width:100%;max-width:20rem;padding:0;display:grid;position:relative}.tank-tile .tank-photo{pointer-events:auto;cursor:pointer;filter:drop-shadow(0 10px 14px #082f4773);transition:transform .2s,filter .2s}.tank-tile .tank-photo:hover{filter:drop-shadow(0 14px 20px #082f478c)brightness(1.06);transform:scale(1.06)}.tank-hover{animation:tank-hover var(--hover-time) ease-in-out var(--hover-delay) infinite;display:block}@keyframes tank-hover{0%,to{transform:translate(0)rotate(0)scaleX(1)}25%{transform:translate(2px,-5px)rotate(-1.2deg)scaleX(.992)}50%{transform:translate(-2px,-1px)rotate(.6deg)scaleX(1)}75%{transform:translate(1px,4px)rotate(1.1deg)scaleX(.994)}}.tank-tile-photo{width:calc(92% * var(--fit));position:relative}.tank-tip{z-index:6;width:min(18rem,100% - 1.5rem);color:var(--color-text);pointer-events:none;background:#fff;border-radius:.875rem;padding:.8rem .95rem;position:absolute;top:0;left:0;box-shadow:0 12px 30px #082f4766}.tank-tip[hidden]{display:none}.tank-tip-title{font-family:var(--font-serif);color:var(--color-primary);font-size:1.05rem;font-weight:700}.tank-tip-sub{color:#10293abf;font-size:.8rem;font-style:italic}.tank-tip dl{grid-template-columns:auto 1fr;gap:.15rem .6rem;margin-top:.5rem;font-size:.8rem;display:grid}.tank-tip dt{color:#10293ab3}.tank-tip dd{color:var(--color-primary);font-weight:600}.tank-tip-credit{color:#10293ab3;margin-top:.5rem;font-size:.7rem}.tank-tip-hint{color:var(--color-accent);margin-top:.4rem;font-size:.8rem;font-weight:600}.tank-skip{z-index:5;color:var(--color-primary);white-space:nowrap;background:#fff;border-color:#0000;padding:.7rem 1.25rem;font-size:1rem;font-weight:700;position:absolute;bottom:.9rem;left:50%;transform:translate(-50%);box-shadow:0 6px 20px #082f4773}.tank-skip:hover{background:var(--color-bg)}.tank-skip svg{width:1rem;height:1rem;animation:1.6s ease-in-out infinite alternate tank-nudge}@keyframes tank-nudge{0%{transform:translateY(-2px)}to{transform:translateY(3px)}}.tank-credits-link{z-index:5;color:#fff;text-shadow:0 1px 3px #082f47e6;padding:.25rem .35rem;font-size:.72rem;text-decoration:underline;position:absolute;bottom:.5rem;right:.75rem}.tank-fallback{text-align:center;flex-direction:column;justify-content:center;gap:.75rem;height:100%;padding:4.5rem 1.25rem;display:flex}.tank-fallback a{font-weight:600;text-decoration:underline}@container (width<=40rem){.tank-zone-label small{font-size:.72rem}.tank-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tank-zone--top .tank-zone-label{top:5.5rem}.tank-level--close{inset:5.25rem 0 5.5rem}.tank-tile{aspect-ratio:8/5}.tank-level--more+.tank-more{bottom:5.9rem}.tank-trail{width:100%}.tank-credits-link{bottom:3.75rem}}@media (prefers-reduced-motion:reduce){.tank *,.tank:before,.tank-caustics:before,.tank-caustics:after{transition:none!important;animation:none!important}.tank-swimmer{left:calc(var(--top) * .9)}}
