/* Aquarium page layout, tank presentation, and responsive styles. */
:root{--deep:var(--color-deep-water)}
*{box-sizing:border-box}html{background:var(--ink);color-scheme:dark}body{margin:0;min-width:320px;background:var(--ink);color:var(--foam);font-family:var(--font-body);overflow-x:hidden}button,a{font:inherit;touch-action:manipulation}a{color:inherit}
.site-nav{position:fixed;z-index:var(--layer-nav);inset:0 0 auto;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 clamp(16px,4vw,48px);border-bottom:1px solid var(--border-subtle);background:rgba(3,21,34,.82);backdrop-filter:blur(18px)}
.wordmark{flex:0 0 auto;font:26px var(--font-display);text-decoration:none;letter-spacing:-.02em}.wordmark span{color:var(--aqua)}.nav-paths{height:100%;display:flex;align-items:center;gap:8px}
.path{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;border:1px solid transparent;border-radius:var(--radius-pill);color:var(--mist);text-decoration:none;font-size:11px;font-weight:600;white-space:nowrap;transition:border-color var(--motion-standard) var(--ease-standard),color var(--motion-standard) var(--ease-standard),background-color var(--motion-standard) var(--ease-standard)}.path:hover{border-color:var(--line);color:var(--foam)}.path:focus-visible{border-color:var(--border-interactive);color:var(--foam);outline:var(--focus-ring);outline-offset:var(--focus-offset)}.path[aria-current=page]{border-color:rgba(98,232,213,.32);background:rgba(98,232,213,.08);color:var(--aqua)}.path.disabled{border:0;background:none;color:var(--text-disabled);cursor:not-allowed}.path.disabled small{color:var(--gold);font:700 7px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.aquarium-page{position:relative;min-height:100svh;display:grid;place-items:center;padding:calc(var(--nav-h) + 40px) clamp(20px,5vw,72px) 40px;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 78% 18%,rgba(98,232,213,.1),transparent 32%),radial-gradient(circle at 12% 88%,rgba(41,111,119,.2),transparent 36%),linear-gradient(145deg,#06202d 0%,var(--ink) 58%,#020c13 100%)}
.aquarium-page:before{content:'';position:absolute;z-index:-1;inset:0;opacity:.34;pointer-events:none;background-image:linear-gradient(rgba(169,232,222,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(169,232,222,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,transparent,black 25%,black 74%,transparent)}
.page-shell{width:min(1180px,100%);display:grid;grid-template-columns:minmax(260px,.72fr) minmax(520px,1.28fr);gap:clamp(34px,6vw,82px);align-items:center}.intro{position:relative;z-index:2}.eyebrow{margin:0 0 14px;color:var(--aqua);font:700 9px var(--font-mono);letter-spacing:.23em;text-transform:uppercase}h1{font:clamp(60px,8.2vw,112px)/.82 var(--font-display);letter-spacing:-.05em;margin:0 0 28px}.lede{max-width:470px;margin:0;color:var(--mist);font-size:clamp(15px,1.25vw,18px);line-height:1.72}.lede strong{color:var(--foam);font-weight:600}
.pass-note{max-width:470px;margin:28px 0 0;padding:18px 20px;border:1px solid var(--border-gold);border-radius:var(--radius-card);background:rgba(3,21,34,.58);box-shadow:var(--shadow-card);backdrop-filter:blur(12px)}.pass-note span{display:block;margin-bottom:7px;color:var(--gold);font:700 8px var(--font-mono);letter-spacing:.17em;text-transform:uppercase}.pass-note p{margin:0;color:var(--mist);font-size:12px;line-height:1.62}
.aquarium-frame{position:relative;min-height:min(620px,72svh);display:grid;grid-template-rows:auto minmax(280px,1fr) auto;gap:12px;border:1px solid var(--border-strong);border-radius:clamp(24px,3vw,38px);padding:clamp(12px,1.5vw,18px);background:linear-gradient(145deg,rgba(238,252,248,.08),rgba(98,232,213,.01));box-shadow:0 38px 100px -48px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.09)}.aquarium-frame:before{content:'';position:absolute;inset:9px;border:1px solid rgba(255,255,255,.035);border-radius:calc(clamp(24px,3vw,38px) - 7px);pointer-events:none}
.tank{position:relative;height:100%;min-height:clamp(300px,39svh,390px);overflow:hidden;border-radius:clamp(17px,2.3vw,28px);background:radial-gradient(ellipse at 48% -8%,rgba(198,255,244,.17),transparent 48%),linear-gradient(180deg,#0b3a49 0%,#082b3b 34%,#051d2a 72%,#03121c 100%)}.tank:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.4;background:linear-gradient(108deg,transparent 14%,rgba(219,255,250,.08) 29%,transparent 43%),linear-gradient(72deg,transparent 47%,rgba(219,255,250,.04) 59%,transparent 70%);animation:light-shift 12s ease-in-out infinite alternate}.tank:after{content:'';position:absolute;left:-8%;right:-8%;bottom:-42px;height:92px;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 50% 0,rgba(98,232,213,.12),transparent 62%),#020b12;box-shadow:0 -1px 36px rgba(98,232,213,.05)}
.waterline{position:absolute;z-index:3;inset:0 0 auto;height:1px;background:rgba(98,232,213,.75);box-shadow:0 0 28px rgba(98,232,213,.55)}.waterline:after{content:'';position:absolute;left:8%;right:8%;top:8px;height:26px;border-top:1px solid rgba(238,252,248,.13);border-radius:50%}.depth-marks{position:absolute;z-index:2;right:18px;top:38px;bottom:46px;width:20px;border-right:1px solid rgba(169,232,222,.12);background:repeating-linear-gradient(to bottom,transparent 0 49px,rgba(169,232,222,.13) 50px,transparent 51px)}
.caustic-layer{position:absolute;z-index:1;inset:-16%;pointer-events:none;opacity:.3;mix-blend-mode:screen;background:repeating-radial-gradient(ellipse at 50% -8%,transparent 0 28px,rgba(169,255,240,.055) 30px,transparent 34px 66px);filter:blur(.4px);animation:caustic-drift 16s ease-in-out infinite alternate}
.current-map{position:absolute;z-index:2;inset:8% 2% 14%;width:96%;height:78%;overflow:visible;opacity:.34;pointer-events:none;mask-image:radial-gradient(ellipse at center,black 0 48%,transparent 82%)}.current-map path{fill:none;stroke:rgba(98,232,213,.22);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:8 19;animation:current-flow 19s linear infinite}.current-map path:nth-child(2){stroke:rgba(239,199,110,.12);stroke-dasharray:3 24;animation-duration:26s;animation-direction:reverse}.current-map path:nth-child(3){stroke-width:.8;opacity:.55;animation-duration:31s}
.bubble-field{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none}.bubble{position:absolute;left:var(--x);bottom:-22px;width:var(--size);height:var(--size);border:1px solid rgba(199,255,246,.28);border-radius:50%;box-shadow:inset 1px 1px 0 rgba(255,255,255,.18),0 0 9px rgba(98,232,213,.08);opacity:0;animation:bubble-rise var(--speed) linear infinite;animation-delay:var(--delay)}
.fish-layer{position:absolute;z-index:4;inset:42px 38px 58px;pointer-events:none}.founder-fish{position:absolute;left:var(--x);top:var(--y);width:var(--size);transform:translate(-50%,-50%) scaleX(var(--direction,1));pointer-events:auto}.founder-fish img{display:block;width:100%;height:auto}
.empty-state{position:relative;z-index:3;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:17px 18px;border:1px solid var(--border-default);border-radius:var(--radius-card);text-align:left;background:linear-gradient(150deg,rgba(5,31,43,.72),rgba(3,21,34,.42));box-shadow:var(--shadow-card)}.empty-glyph{position:relative;width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(98,232,213,.4);border-radius:50%;box-shadow:inset 0 0 22px rgba(98,232,213,.07)}.empty-glyph:after{content:'';width:6px;height:6px;border:1px solid var(--aqua);border-radius:50%;box-shadow:0 0 12px rgba(98,232,213,.45)}.empty-copy{min-width:0}.empty-state .eyebrow{margin-bottom:5px}.empty-state h2{margin:0 0 5px;font:clamp(23px,2.2vw,30px)/1.05 var(--font-display)}.empty-state p{margin:0;color:var(--mist);font-size:11px;line-height:1.5}.opening-note{margin-top:6px!important;color:var(--gold)!important;font:700 7px/1.5 var(--font-mono)!important;letter-spacing:.07em;text-transform:uppercase}.wait-link{min-height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--aqua);font-size:10px;font-weight:700;text-underline-offset:4px;white-space:nowrap}.wait-link:hover,.wait-link:focus-visible{color:var(--foam);outline:var(--focus-ring);outline-offset:4px;border-radius:3px}.tank-header{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 6px}.tank-meta{display:flex;align-items:center;gap:18px}.count{display:flex;align-items:baseline;gap:7px}.count strong{font:24px var(--font-display);color:var(--foam)}.count span,.tank-status{color:var(--text-utility);font:700 7px var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.tank-status:before{content:'';display:inline-block;width:6px;height:6px;margin-right:7px;border:1px solid var(--gold);border-radius:50%}.frame-caption{margin:0;color:var(--text-utility);font:700 8px var(--font-mono);letter-spacing:.16em;text-transform:uppercase}.footer-note{position:absolute;z-index:2;left:clamp(20px,5vw,72px);bottom:18px;color:rgba(169,200,202,.45);font:7px var(--font-mono);letter-spacing:.13em;text-transform:uppercase}
@keyframes light-shift{to{transform:translateX(3.5%);opacity:.58}}@keyframes caustic-drift{to{transform:translate3d(4%,-2%,0) rotate(.8deg);opacity:.43}}@keyframes current-flow{to{stroke-dashoffset:-216}}@keyframes bubble-rise{0%{transform:translate3d(0,0,0) scale(.7);opacity:0}12%{opacity:.5}72%{opacity:.22}100%{transform:translate3d(var(--drift,18px),-620px,0) scale(1.08);opacity:0}}
@media(max-width:900px){:root{--nav-h:64px}.site-nav{padding-inline:12px}.nav-paths{gap:4px}.path{padding-inline:10px}.path.disabled small{display:block}.aquarium-page{place-items:start center;padding-top:calc(var(--nav-h) + 32px);overflow:visible}.page-shell{grid-template-columns:1fr;gap:30px}.intro{max-width:680px}.aquarium-frame{width:100%;min-height:0}.tank{min-height:390px}.empty-state{grid-template-columns:auto minmax(0,1fr)}.wait-link{grid-column:2;justify-self:start}.footer-note{position:relative;left:auto;bottom:auto;margin:20px 0 0;grid-column:1/-1}}
@media(max-width:620px){.wordmark{font-size:21px}.nav-paths{gap:2px}.path{padding-inline:7px;font-size:10px}.path.disabled{display:none}.aquarium-page{padding:calc(var(--nav-h) + 26px) 16px 24px}h1{font-size:clamp(56px,20vw,84px);margin-bottom:22px}.lede{font-size:14px}.pass-note{margin-top:20px}.aquarium-frame{min-height:0;padding:10px;border-radius:26px}.tank{min-height:360px;border-radius:18px}.fish-layer{inset:36px 18px 60px}.tank-header{align-items:flex-start;padding:2px 4px}.frame-caption{max-width:130px;line-height:1.45}.depth-marks{right:12px}.empty-state{width:100%;padding:16px 14px;gap:13px}.empty-glyph{width:42px;height:42px}.empty-state h2{font-size:24px}.tank-meta{gap:10px}.tank-status{max-width:92px;text-align:right;line-height:1.45}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.tank:before,.caustic-layer,.current-map path,.bubble{animation:none!important}.bubble{display:none}.path{transition:none}}

/* Stage 1B: responsive page-shell foundation. */
html{max-width:100%;overflow-x:clip;scroll-padding-top:calc(var(--nav-block) + 16px)}
body{max-width:100%;min-width:0;overflow-x:clip}
.site-nav{height:var(--nav-block);padding-top:var(--safe-top);padding-right:max(var(--page-gutter),var(--safe-right));padding-left:max(var(--page-gutter),var(--safe-left))}
.wordmark{min-width:44px;min-height:44px;display:inline-block;line-height:44px}
.aquarium-page{height:auto;min-height:100svh;padding-top:calc(var(--nav-block) + clamp(32px,5vh,64px));padding-right:max(var(--page-gutter),var(--safe-right));padding-bottom:max(40px,calc(24px + var(--safe-bottom)));padding-left:max(var(--page-gutter),var(--safe-left));overflow-x:clip;overflow-y:visible}
.page-shell{width:min(var(--shell-max),100%);min-width:0;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
.page-shell>*,.aquarium-frame,.tank,.empty-state,.empty-copy{min-width:0}
.aquarium-frame{height:auto;min-height:min(620px,72svh)}
.tank-header{flex-wrap:wrap}
.tank-meta{margin-left:auto}
.wait-link,.path{min-width:44px;min-height:44px}
.footer-note{bottom:max(18px,var(--safe-bottom))}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);scroll-margin-top:calc(var(--nav-block) + 16px);scroll-margin-bottom:24px}

@media(max-width:900px),(max-height:820px),(hover:none),(pointer:coarse){
 .aquarium-page{place-items:start center}
}

@media(max-width:900px){
 .aquarium-page{padding-top:calc(var(--nav-block) + 32px)}
 .page-shell{grid-template-columns:1fr}
 .aquarium-frame{min-height:0}
}

@media(max-width:620px){
 .aquarium-page{padding-top:calc(var(--nav-block) + 26px);padding-right:max(16px,var(--safe-right));padding-bottom:max(24px,calc(16px + var(--safe-bottom)));padding-left:max(16px,var(--safe-left))}
 .tank{min-height:360px}
 .empty-state{grid-template-columns:auto minmax(0,1fr)}
 .wait-link{grid-column:1/-1;justify-self:stretch;text-align:center;white-space:normal}
 .footer-note{padding-bottom:var(--safe-bottom)}
}

@media(max-width:380px){
 .site-nav{gap:8px}
 .nav-paths{gap:2px}
 .nav-paths a.path[href$="#how-it-works"]{display:none}
 .path{padding-inline:8px}
}

/* Pass 2: shared link and control motion. */
.wait-link{transition:color var(--motion-standard) var(--ease-standard),outline-color var(--motion-standard) var(--ease-standard)}

/* Pass 7: premium zero-fish Aquarium empty state. */
.skip-link{
 position:fixed;
 z-index:var(--layer-skip);
 top:max(10px,var(--safe-top));
 left:max(10px,var(--safe-left));
 min-height:44px;
 display:inline-flex;
 align-items:center;
 padding:0 16px;
 border:2px solid var(--aqua);
 border-radius:var(--radius-control);
 background:var(--ink);
 color:var(--foam);
 font-weight:700;
 text-decoration:none;
 transform:translateY(-170%);
 transition:transform var(--motion-fast) var(--ease-standard);
}
.skip-link:focus{transform:none}
#aquarium-main:focus{outline:none}

.aquarium-page{
 background:
  radial-gradient(ellipse at 71% -10%,rgba(139,243,228,.13),transparent 42%),
  radial-gradient(ellipse at 8% 82%,rgba(40,118,126,.17),transparent 38%),
  linear-gradient(148deg,#061f2d 0,#031522 54%,#020c13 100%);
}
.aquarium-page:before{
 opacity:.48;
 background-image:
  linear-gradient(180deg,rgba(238,252,248,.018),transparent 24%,rgba(2,12,19,.08) 76%,rgba(2,12,19,.38)),
  repeating-linear-gradient(90deg,transparent 0 138px,rgba(169,232,222,.025) 139px,transparent 140px);
 background-size:auto;
 mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 84%,transparent 100%);
}
.aquarium-page:after{
 content:'';
 position:absolute;
 z-index:-1;
 top:var(--nav-block);
 left:50%;
 width:min(1060px,84vw);
 height:58vh;
 transform:translateX(-23%);
 background:
  linear-gradient(108deg,transparent 25%,rgba(139,243,228,.035) 36%,transparent 47%),
  linear-gradient(72deg,transparent 47%,rgba(238,252,248,.022) 58%,transparent 69%);
 clip-path:polygon(13% 0,87% 0,100% 100%,0 100%);
 opacity:.9;
 pointer-events:none;
}
.page-shell{
 grid-template-columns:minmax(300px,.67fr) minmax(0,1.33fr);
 gap:clamp(42px,5.5vw,86px);
}
.intro:before{
 content:'';
 position:absolute;
 top:-30px;
 left:0;
 width:84px;
 height:1px;
 background:linear-gradient(90deg,var(--aqua),transparent);
 box-shadow:0 0 18px rgba(98,232,213,.26);
 pointer-events:none;
}
.intro>.eyebrow{margin-bottom:18px;color:var(--color-aqua-bright)}
h1{
 margin-bottom:30px;
 font-size:clamp(66px,7.8vw,108px);
 line-height:.84;
 text-shadow:0 16px 42px rgba(0,8,14,.38);
}
.lede{
 max-width:44ch;
 color:rgba(238,252,248,.74);
 font-size:clamp(15px,1.15vw,17px);
 line-height:1.74;
}
.lede strong{color:var(--foam)}
.pass-note{
 position:relative;
 margin-top:30px;
 padding:20px 21px 21px;
 overflow:hidden;
 border-color:rgba(239,199,110,.28);
 background:linear-gradient(145deg,rgba(7,31,44,.76),rgba(2,16,26,.72));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 26px 58px -46px rgba(0,8,14,.92);
 backdrop-filter:blur(8px);
}
.pass-note:before{
 content:'';
 position:absolute;
 top:0;
 left:20px;
 width:58px;
 height:1px;
 background:linear-gradient(90deg,var(--gold),transparent);
 box-shadow:0 0 14px rgba(239,199,110,.18);
}
.pass-note span{margin-bottom:9px}
.pass-note p{color:rgba(238,252,248,.68);line-height:1.66}

.aquarium-frame{
 min-height:min(670px,76svh);
 grid-template-rows:auto minmax(340px,1fr) auto;
 gap:0;
 padding:clamp(13px,1.5vw,19px);
 overflow:visible;
 border-color:rgba(169,232,222,.29);
 border-radius:clamp(28px,3vw,40px);
 background:
  linear-gradient(145deg,rgba(238,252,248,.075),rgba(98,232,213,.018) 34%,rgba(2,16,26,.3) 100%);
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.11),
  inset 1px 0 0 rgba(98,232,213,.04),
  0 46px 110px -54px rgba(0,0,0,.94);
}
.aquarium-frame:before{
 inset:8px;
 border-color:rgba(238,252,248,.05);
 border-radius:calc(clamp(28px,3vw,40px) - 7px);
}
.aquarium-frame:after{
 content:'';
 position:absolute;
 z-index:1;
 top:8px;
 right:clamp(36px,7vw,92px);
 left:clamp(36px,7vw,92px);
 height:1px;
 background:linear-gradient(90deg,transparent,rgba(139,243,228,.34),transparent);
 box-shadow:0 0 22px rgba(98,232,213,.16);
 pointer-events:none;
}
.tank-header{
 min-height:64px;
 padding:5px 12px 8px;
 border-bottom:1px solid rgba(169,232,222,.11);
}
.frame-caption{
 color:rgba(238,252,248,.66);
 font-size:8px;
 letter-spacing:.18em;
}
.tank-meta{gap:10px}
.count,
.tank-status{
 min-height:36px;
 display:inline-flex;
 align-items:center;
 border:1px solid rgba(169,232,222,.14);
 border-radius:var(--radius-pill);
 background:rgba(2,16,26,.42);
}
.count{gap:8px;padding:0 13px}
.count strong{
 color:var(--foam);
 font-size:27px;
 line-height:1;
 text-shadow:0 0 22px rgba(98,232,213,.16);
}
.count span{color:rgba(238,252,248,.62)}
.tank-status{padding:0 13px;color:rgba(238,252,248,.68)}
.tank-status:before{
 width:7px;
 height:7px;
 margin-right:8px;
 border-color:var(--gold);
 background:rgba(239,199,110,.12);
 box-shadow:0 0 0 0 rgba(239,199,110,.12);
 animation:status-breathe 4.8s var(--ease-standard) infinite;
}

.tank{
 min-height:clamp(360px,43svh,440px);
 border:1px solid rgba(169,232,222,.17);
 border-radius:clamp(19px,2.3vw,30px);
 background:
  radial-gradient(ellipse at 50% -9%,rgba(190,255,245,.19),transparent 45%),
  radial-gradient(ellipse at 16% 52%,rgba(40,118,126,.12),transparent 45%),
  linear-gradient(180deg,#0a3a49 0,#072d3e 32%,#041e2d 70%,#02121c 100%);
 box-shadow:
  inset 0 0 0 1px rgba(238,252,248,.025),
  inset 0 30px 70px rgba(139,243,228,.025),
  inset 0 -70px 110px rgba(1,8,14,.38),
  0 22px 54px -40px rgba(0,8,14,.9);
}
.tank:before{
 z-index:1;
 inset:-8% -10%;
 opacity:.56;
 background:
  linear-gradient(106deg,transparent 16%,rgba(219,255,250,.085) 29%,transparent 42%),
  linear-gradient(74deg,transparent 43%,rgba(219,255,250,.052) 56%,transparent 68%),
  linear-gradient(96deg,transparent 62%,rgba(139,243,228,.035) 70%,transparent 78%);
 transform:translateX(-1.5%);
 animation:tank-light-drift 18s ease-in-out infinite alternate;
}
.tank:after{
 z-index:2;
 left:-6%;
 right:-6%;
 bottom:-30px;
 height:112px;
 border-radius:50% 50% 0 0;
 background:
  radial-gradient(ellipse at 15% 45%,rgba(18,52,58,.9) 0 7%,transparent 8%),
  radial-gradient(ellipse at 74% 38%,rgba(12,44,50,.92) 0 10%,transparent 11%),
  radial-gradient(ellipse at 92% 58%,rgba(19,54,57,.86) 0 6%,transparent 7%),
  radial-gradient(ellipse at 44% 36%,rgba(8,37,43,.9) 0 15%,transparent 16%),
  radial-gradient(ellipse at 50% 0,rgba(98,232,213,.105),transparent 57%),
  linear-gradient(180deg,#061b21,#020b12 72%);
 box-shadow:0 -1px 40px rgba(98,232,213,.045);
}
.waterline{
 height:2px;
 background:linear-gradient(90deg,transparent 2%,rgba(139,243,228,.78) 19%,rgba(238,252,248,.55) 50%,rgba(139,243,228,.72) 81%,transparent 98%);
 box-shadow:0 0 20px rgba(98,232,213,.4),0 8px 36px rgba(98,232,213,.13);
}
.waterline:before{
 content:'';
 position:absolute;
 top:10px;
 right:13%;
 left:13%;
 height:18px;
 border-top:1px solid rgba(238,252,248,.09);
 border-radius:50%;
}
.waterline:after{
 top:20px;
 left:22%;
 right:22%;
 height:34px;
 border-color:rgba(238,252,248,.07);
}
.caustic-layer{
 inset:-20%;
 opacity:.32;
 background:
  repeating-radial-gradient(ellipse at 48% -10%,transparent 0 30px,rgba(169,255,240,.05) 32px,transparent 36px 76px),
  repeating-radial-gradient(ellipse at 72% 4%,transparent 0 42px,rgba(238,252,248,.025) 44px,transparent 48px 98px);
 filter:none;
 animation:caustic-drift-pass7 22s ease-in-out infinite alternate;
}
.current-map{
 inset:10% 2% 18%;
 opacity:.23;
 mask-image:radial-gradient(ellipse at center,#000 0 44%,transparent 80%);
}
.current-map path{
 stroke:rgba(98,232,213,.19);
 stroke-width:1;
 stroke-dasharray:6 24;
 animation-duration:28s;
}
.current-map path:nth-child(2){stroke:rgba(239,199,110,.1);animation-duration:36s}
.current-map path:nth-child(3){animation-duration:42s}
.depth-marks{
 z-index:3;
 right:17px;
 top:48px;
 bottom:64px;
 opacity:.78;
 border-right-color:rgba(169,232,222,.13);
 background:repeating-linear-gradient(to bottom,transparent 0 49px,rgba(169,232,222,.14) 50px,transparent 51px);
}
.bubble-field{z-index:3}
.bubble-field:after{
 content:'';
 position:absolute;
 inset:8% 7% 16%;
 opacity:.34;
 background-image:
  radial-gradient(circle,rgba(238,252,248,.32) 0 1px,transparent 1.4px),
  radial-gradient(circle,rgba(98,232,213,.2) 0 1px,transparent 1.3px);
 background-position:0 0,23px 31px;
 background-size:61px 73px,89px 97px;
 mask-image:linear-gradient(180deg,transparent,#000 18%,#000 78%,transparent);
}
.bubble{
 border-color:rgba(199,255,246,.24);
 box-shadow:inset 1px 1px 0 rgba(255,255,255,.16),0 0 8px rgba(98,232,213,.07);
 animation-name:bubble-rise-pass7;
}
.bubble:nth-child(2),
.bubble:nth-child(4),
.bubble:nth-child(7),
.bubble:nth-child(9){display:none}

.empty-state{
 width:calc(100% - clamp(18px,3vw,34px));
 margin:-34px auto 0;
 grid-template-columns:58px minmax(0,1fr) auto;
 gap:20px;
 padding:22px 22px 23px;
 border-color:rgba(169,232,222,.21);
 border-radius:var(--radius-panel);
 background:
  linear-gradient(145deg,rgba(9,41,53,.94),rgba(3,21,34,.94) 58%,rgba(2,16,26,.96));
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.045),
  0 28px 62px -44px rgba(0,8,14,.95);
 backdrop-filter:blur(12px);
}
.empty-glyph{
 width:58px;
 height:58px;
 border-color:rgba(98,232,213,.32);
 background:radial-gradient(circle,rgba(98,232,213,.1),transparent 62%);
 box-shadow:inset 0 0 28px rgba(98,232,213,.06),0 0 24px rgba(98,232,213,.05);
}
.empty-glyph:before{
 content:'';
 position:absolute;
 inset:8px;
 border:1px solid rgba(98,232,213,.16);
 border-radius:50%;
 animation:ripple-breathe 5.4s var(--ease-standard) infinite;
}
.empty-glyph:after{
 width:7px;
 height:7px;
 background:rgba(98,232,213,.1);
 box-shadow:0 0 14px rgba(98,232,213,.38);
}
.empty-state .eyebrow{margin-bottom:7px;color:rgba(139,243,228,.78)}
.empty-state h2{
 margin-bottom:8px;
 color:var(--foam);
 font-size:clamp(27px,2.4vw,34px);
 line-height:1;
}
.empty-state p{color:rgba(238,252,248,.68);font-size:12px;line-height:1.58}
.opening-note{
 margin-top:8px!important;
 color:rgba(239,199,110,.84)!important;
 font-size:7.5px!important;
 letter-spacing:.09em;
}
.wait-link{
 min-height:48px;
 padding:0 17px;
 border:1px solid rgba(98,232,213,.34);
 border-radius:var(--radius-pill);
 background:rgba(98,232,213,.045);
 color:var(--color-aqua-bright);
 text-decoration:none;
}
.wait-link:hover,
.wait-link:focus-visible{
 border-color:var(--aqua);
 background:rgba(98,232,213,.1);
 color:var(--foam);
 border-radius:var(--radius-pill);
}
.footer-note{
 color:rgba(169,200,202,.48);
 letter-spacing:.15em;
}

@keyframes tank-light-drift{
 to{transform:translateX(3%);opacity:.7}
}
@keyframes caustic-drift-pass7{
 to{transform:translate3d(3%,-1.5%,0) rotate(.45deg);opacity:.4}
}
@keyframes bubble-rise-pass7{
 0%{transform:translate3d(0,0,0) scale(.72);opacity:0}
 14%{opacity:.34}
 70%{opacity:.16}
 100%{transform:translate3d(var(--drift,14px),-620px,0) scale(1.06);opacity:0}
}
@keyframes status-breathe{
 50%{box-shadow:0 0 0 5px rgba(239,199,110,.035),0 0 14px rgba(239,199,110,.14)}
}
@keyframes ripple-breathe{
 50%{inset:4px;border-color:rgba(98,232,213,.25)}
}

@media(max-width:1100px) and (min-width:901px){
 .page-shell{grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:38px}
 .aquarium-frame{min-height:min(620px,78svh)}
 .tank{min-height:320px}
 .empty-state{grid-template-columns:50px minmax(0,1fr);gap:16px}
 .empty-glyph{width:50px;height:50px}
 .wait-link{grid-column:2;justify-self:start}
}

@media(max-width:900px){
 .page-shell{grid-template-columns:1fr;gap:34px;align-items:start}
 .aquarium-frame{width:100%;min-height:0}
}

@media(max-width:900px) and (min-width:621px){
 .page-shell{gap:34px}
 .intro{
  max-width:none;
  display:grid;
  grid-template-columns:minmax(250px,.82fr) minmax(0,1.18fr);
  grid-template-rows:auto auto auto;
  gap:14px 28px;
  align-items:start;
 }
 .intro:before{top:-18px}
 .intro>.eyebrow{grid-column:1;grid-row:1;margin:0}
 h1{grid-column:1;grid-row:2/4;margin:0;font-size:clamp(60px,9.4vw,76px)}
 .lede{grid-column:2;grid-row:1/3;max-width:none}
 .pass-note{grid-column:2;grid-row:3;margin:0}
 .aquarium-frame{min-height:650px}
 .tank{min-height:410px}
}

@media(max-width:620px){
 .aquarium-page{
  background:
   radial-gradient(ellipse at 70% 0,rgba(139,243,228,.1),transparent 34%),
   linear-gradient(160deg,#061f2d 0,#031522 50%,#020c13 100%);
 }
 .aquarium-page:after{left:32%;width:112vw;height:42vh;transform:none;opacity:.64}
 .page-shell{gap:28px}
 .intro:before{top:-15px;width:64px}
 .intro>.eyebrow{margin-bottom:14px;font-size:8px;line-height:1.55}
 h1{margin-bottom:20px;font-size:clamp(54px,18vw,72px);line-height:.88}
 .lede{font-size:13.5px;line-height:1.66}
 .pass-note{margin-top:20px;padding:17px 18px 18px}
 .pass-note:before{left:18px;width:48px}
 .pass-note p{font-size:11.5px;line-height:1.6}
 .aquarium-frame{padding:10px;border-radius:27px}
 .aquarium-frame:before{inset:6px;border-radius:21px}
 .tank-header{
  min-height:82px;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  padding:4px 5px 10px;
 }
 .frame-caption{max-width:none}
 .tank-meta{width:100%;margin-left:0;justify-content:space-between}
 .count,.tank-status{min-height:34px;padding-inline:10px}
 .count strong{font-size:24px}
 .tank{min-height:370px;border-radius:19px}
 .depth-marks{right:11px}
 .bubble-field:after{opacity:.26;background-size:54px 68px,77px 91px}
 .empty-state{
  width:calc(100% - 10px);
  margin-top:-26px;
  grid-template-columns:44px minmax(0,1fr);
  gap:13px;
  padding:17px 15px 18px;
  border-radius:var(--radius-card);
  backdrop-filter:blur(9px);
 }
 .empty-glyph{width:44px;height:44px}
 .empty-state .eyebrow{font-size:7.5px;line-height:1.5}
 .empty-state h2{font-size:25px;line-height:1.04}
 .empty-state p{font-size:11.5px}
 .opening-note{font-size:7px!important}
 .wait-link{
  grid-column:1/-1;
  width:100%;
  margin-top:2px;
  justify-self:stretch;
  white-space:normal;
 }
 .footer-note{margin-top:18px;line-height:1.6}
}

@media(max-width:380px){
 .aquarium-page{
  padding-top:calc(var(--nav-block) + 22px);
  padding-right:max(12px,var(--safe-right));
  padding-left:max(12px,var(--safe-left));
 }
 .page-shell{gap:18px}
 .intro>.eyebrow{letter-spacing:.18em}
 h1{margin-bottom:16px;font-size:50px}
 .lede{font-size:12.5px;line-height:1.56}
 .pass-note{margin-top:16px;padding:13px 15px 14px}
 .pass-note p{font-size:11px;line-height:1.55}
 .aquarium-frame{padding:8px}
 .tank-header{padding-inline:4px}
 .frame-caption{font-size:7px}
 .count,.tank-status{padding-inline:8px}
 .count span,.tank-status{font-size:6.5px}
 .tank{min-height:340px}
 .empty-state{width:calc(100% - 6px);padding:15px 13px 16px}
 .empty-state h2{font-size:23px}
 .empty-state p{font-size:11px}
}

@media(prefers-reduced-motion:reduce){
 .skip-link{transition:none}
 .tank:before,
 .caustic-layer,
 .current-map path,
 .bubble,
 .tank-status:before,
 .empty-glyph:before{animation:none!important}
 .tank:before{transform:none;opacity:.62}
 .caustic-layer{transform:none;opacity:.34}
 .current-map path{stroke-dashoffset:0}
 .bubble{display:none}
 .tank-status:before{box-shadow:0 0 10px rgba(239,199,110,.12)}
 .empty-glyph:before{inset:8px;border-color:rgba(98,232,213,.18)}
}
