@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap";:root{color:#173f47;background:#e8f4ed;font-family:DM Sans,system-ui,sans-serif;font-synthesis:none;--ink: #173f47;--muted: #5d7c79;--paper: #f7fbf7;--coral: #e8795f;--line: rgba(23, 63, 71, .14)}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:radial-gradient(circle at 15% 2%,rgba(255,255,255,.9),transparent 28rem),#e8f4ed}button,input{font:inherit}button{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #e8795f;outline-offset:4px}main{width:min(1180px,calc(100% - 2rem));margin:0 auto;padding:1.4rem 0 2.5rem}.site-header,.intro,.status-heading,footer{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.site-header{min-height:3rem}.wordmark{display:inline-flex;align-items:center;gap:.65rem;color:var(--ink);font-weight:700;letter-spacing:-.02em;text-decoration:none}.wordmark-fin{position:relative;width:1.6rem;height:1rem;border-radius:55% 45% 45% 55%;background:var(--coral)}.wordmark-fin:after{position:absolute;right:85%;bottom:0;width:0;height:0;border-top:.5rem solid transparent;border-right:.55rem solid #f1a26d;border-bottom:.5rem solid transparent;content:""}.local-time{margin:0;color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}.intro{align-items:flex-end;margin:clamp(3rem,8vw,6rem) 0 2rem}.eyebrow{margin:0 0 .5rem;color:#63807c;font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}h1,h2,p{text-wrap:balance}h1{margin:0;font-family:"DM Serif Display",Georgia,serif;font-size:clamp(3.3rem,8vw,6.5rem);font-weight:400;letter-spacing:-.045em;line-height:.85}.greeting{max-width:25rem;margin:0;color:var(--muted);line-height:1.6;text-align:right}.aquarium-shell{padding:.55rem;border:1px solid rgba(255,255,255,.9);border-radius:2.2rem;background:#ffffff59;box-shadow:0 28px 70px #28565329}.aquarium{--cloudiness: 0;position:relative;height:clamp(360px,52vw,620px);min-height:360px;overflow:hidden;border-radius:1.75rem;background:linear-gradient(rgba(162,190,169,calc(var(--cloudiness) * .6)),rgba(99,139,117,calc(var(--cloudiness) * .52))),linear-gradient(180deg,#8ad5dc,#5ebbc7 58%,#4b9da8);isolation:isolate;transition:background 1.2s ease}[data-time=night] .aquarium{background:linear-gradient(rgba(38,67,76,calc(var(--cloudiness) * .7)),rgba(38,67,76,calc(var(--cloudiness) * .6))),linear-gradient(180deg,#386e81,#255768 62%,#1e4957)}.water-glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 70% 15%,rgba(255,253,218,.42),transparent 24%),linear-gradient(105deg,transparent 12%,rgba(255,255,255,.13) 12% 22%,transparent 22% 45%,rgba(255,255,255,.08) 45% 52%,transparent 52%);transition:opacity .8s ease}[data-time=night] .water-glow{opacity:.45}.surface-lines{position:absolute;top:4%;left:7%;width:86%;height:10%;border-top:2px solid rgba(255,255,255,.32);border-radius:50%;transform:rotate(-1deg)}.surface-lines:after{position:absolute;top:1rem;left:12%;width:72%;border-top:1px solid rgba(255,255,255,.18);border-radius:50%;content:""}.fish{position:absolute;top:42%;left:42%;z-index:3;width:clamp(132px,17vw,210px);height:clamp(76px,10vw,125px);padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 15px 12px rgba(12,66,72,.15));animation:swim 12s ease-in-out infinite}.fish-body{position:absolute;inset:0 0 0 18%;border-radius:55% 47% 47% 55%/57% 52% 48% 43%;background:radial-gradient(circle at 73% 32%,rgba(255,217,169,.8) 0 3%,transparent 4%),linear-gradient(145deg,#f5a36f,#eb715d 58%,#d95855)}.fish-body:before{position:absolute;inset:10% 6% 12% 16%;border-radius:inherit;background:radial-gradient(circle,rgba(255,219,171,.23) 0 8%,transparent 9%) 0 0 / 23px 23px;content:""}.fish-tail{position:absolute;top:12%;left:-5%;width:42%;height:77%;border-radius:70% 12% 12% 70%;background:linear-gradient(135deg,#f1a16e,#e86d5c);clip-path:polygon(0 0,100% 48%,4% 100%,23% 52%);transform-origin:90% 50%;animation:tail 1.2s ease-in-out infinite}.fish-fin{position:absolute;right:26%;bottom:-16%;width:28%;height:45%;border-radius:10% 90% 30% 70%;background:#d95b58;transform:rotate(-18deg)}.fish-eye{position:absolute;top:28%;right:16%;width:11%;aspect-ratio:1;border:clamp(3px,.4vw,5px) solid #fff7e9;border-radius:50%;background:#173f47}.fish-eye:after{position:absolute;top:8%;right:10%;width:25%;aspect-ratio:1;border-radius:50%;background:#fff;content:""}.fish-mouth{position:absolute;right:4%;bottom:32%;width:8%;height:8%;border-bottom:2px solid #913f46;border-radius:50%}.aquarium[data-mood=hungry] .fish-mouth{border:2px solid #913f46;border-radius:50%}.aquarium[data-mood=sleepy] .fish-eye{top:35%;height:2px;border-width:0 0 2px;border-color:#173f47;border-radius:0}.aquarium[data-mood=sleepy] .fish-eye:after{display:none}.fish.is-happy{animation:happy 1.4s ease-in-out}.fish.is-chasing{animation:chase 2.8s ease-in-out}.fish.is-eating{animation:eat 2.4s ease-in-out}.ball{position:absolute;top:25%;left:24%;z-index:2;width:clamp(35px,5vw,54px);aspect-ratio:1;padding:0;border:clamp(4px,.5vw,7px) solid rgba(255,246,215,.95);border-radius:50%;background:conic-gradient(#ee7a63 0 25%,#f6ca74 0 50%,#ee7a63 0 75%,#f6ca74 0);box-shadow:0 9px 15px #1850522e;cursor:pointer}.ball.is-bopped{animation:bop 1.4s ease-out}.pebbles{position:absolute;right:-3%;bottom:-10%;left:-3%;height:28%;background:radial-gradient(ellipse at center,#dfc79b 0 35%,transparent 37%) 0 0 / 74px 38px,radial-gradient(ellipse at center,#f0dbad 0 35%,transparent 37%) 20px 8px / 62px 34px,linear-gradient(#d4bd91,#c6ad7e);filter:drop-shadow(0 -8px 10px rgba(34,91,85,.12))}.plant{position:absolute;bottom:13%;z-index:2;width:22%;height:40%}.plant-left{left:3%}.plant-right{right:3%;transform:scale(.75) scaleX(-1);transform-origin:bottom right}.plant i{position:absolute;bottom:0;left:42%;width:20%;height:95%;border:clamp(10px,1.3vw,17px) solid #287e6e;border-right:0;border-bottom:0;border-radius:80% 0 0;transform:rotate(-17deg);transform-origin:bottom}.plant i:nth-child(2){left:55%;height:72%;border-color:#3f9277;transform:rotate(19deg) scaleX(-1)}.plant i:nth-child(3){left:30%;height:58%;border-color:#4c9e7d;transform:rotate(-35deg)}.cave{position:absolute;right:12%;bottom:11%;z-index:1;width:20%;height:22%;border-radius:50% 55% 10% 10%;background:linear-gradient(145deg,#b69f78,#8d795d);box-shadow:inset 0 10px 20px #fff4cd33}.cave:after{position:absolute;right:21%;bottom:0;width:57%;height:62%;border-radius:55% 55% 0 0;background:#376b70;box-shadow:inset 0 8px 13px #0c313740;content:""}.bubbles i{position:absolute;bottom:8%;left:var(--x);z-index:4;width:var(--size);height:var(--size);border:2px solid rgba(232,252,247,.66);border-radius:50%;animation:rise 3.5s var(--delay) ease-in forwards}.tank-message{position:absolute;top:1.4rem;left:50%;z-index:6;max-width:calc(100% - 2rem);margin:0;padding:.7rem 1rem;border:1px solid rgba(255,255,255,.75);border-radius:999px;background:#f7fbf7d6;box-shadow:0 10px 25px #15434624;color:var(--ink);font-size:.86rem;text-align:center;opacity:0;pointer-events:none;transform:translate(-50%,-.7rem);transition:.25s ease}.tank-message.is-visible{opacity:1;transform:translate(-50%)}.aquarium.is-cleaning:after{position:absolute;inset:0;z-index:5;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.35),transparent 80%);content:"";transform:translate(-100%);animation:clean-sweep 1.1s ease-in-out}.dashboard{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1rem;margin-top:1rem}.status-card,.care-card{padding:clamp(1.4rem,3vw,2rem);border:1px solid var(--line);border-radius:1.5rem;background:#f7fbf7bd}.status-card h2,.care-card h2{margin:0;font-family:"DM Serif Display",Georgia,serif;font-size:clamp(1.6rem,3vw,2.15rem);font-weight:400;letter-spacing:-.025em}.age-badge{flex:0 0 auto;padding:.55rem .75rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.75rem;font-weight:600}.meters{display:grid;gap:1rem;margin:1.75rem 0 0}.meters>div{display:grid;gap:.5rem}.meters dt{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;font-weight:600}.meters dd{margin:0}.meter{display:block;height:.55rem;overflow:hidden;border-radius:999px;background:#dceae3}.meter>span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e8795f,#efa16d);transition:width .6s ease}.meters>div:last-child .meter>span{background:linear-gradient(90deg,#3f9787,#70b49b)}.care-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.5rem}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}.action{display:grid;min-width:0;padding:.85rem;border:1px solid var(--line);border-radius:1rem;background:var(--paper);cursor:pointer;text-align:left;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.action:hover{border-color:#173f474d;box-shadow:0 7px 18px #28565317;transform:translateY(-2px)}.action:active{transform:translateY(1px)}.action-icon{display:grid;width:2rem;height:2rem;margin-bottom:.7rem;place-items:center;border-radius:50%;background:#f6e1d8;color:#d75f50;font-size:.8rem;letter-spacing:-.12em}.bubble-icon{background:#d9efee;color:#3b8d8a;font-size:1.4rem}.clean-icon{background:#e3ead2;color:#6e8b55;font-size:1rem}.action strong,.action small{display:block;overflow:hidden;text-overflow:ellipsis}.action strong{font-size:.88rem}.action small{margin-top:.15rem;color:var(--muted);font-size:.7rem;white-space:nowrap}footer{align-items:baseline;padding:2rem 0 0;color:var(--muted);font-size:.78rem}footer p{margin:0}.reset{padding:0;border:0;border-bottom:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;font-size:.72rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes swim{0%,to{transform:translate(-15%,8%) rotate(-2deg)}45%{transform:translate(18%,-15%) rotate(3deg)}70%{transform:translate(5%,8%) rotate(-1deg)}}@keyframes tail{0%,to{transform:scaleX(1)}50%{transform:scaleX(.76)}}@keyframes happy{0%,to{transform:translate(0)}25%{transform:translate(12%,-28%) rotate(-8deg)}55%{transform:translate(25%,5%) rotate(9deg)}}@keyframes chase{0%{transform:translate(0)}30%{transform:translate(-70%,-80%) rotate(-12deg)}60%{transform:translate(35%,-45%) rotate(8deg)}to{transform:translate(0)}}@keyframes eat{0%,to{transform:translate(0)}35%{transform:translate(22%,-65%) rotate(-8deg)}60%{transform:translate(28%,-60%) rotate(5deg)}}@keyframes bop{0%{transform:translate(0)}40%{transform:translate(90%,70%) rotate(160deg)}to{transform:translate(0) rotate(360deg)}}@keyframes rise{0%{opacity:0;transform:translate(0) scale(.8)}15%{opacity:1}to{opacity:0;transform:translate(var(--drift),-520px) scale(1.15)}}@keyframes clean-sweep{to{transform:translate(100%)}}@media(max-width:780px){.dashboard,.care-card{grid-template-columns:1fr}}@media(max-width:560px){main{width:min(100% - 1rem,1180px);padding-top:.8rem}.intro{display:block;margin-top:3rem}.greeting{margin-top:1.2rem;text-align:left}.aquarium-shell{border-radius:1.6rem}.aquarium{height:420px;border-radius:1.2rem}.fish{top:43%;left:35%}.dashboard{margin-top:.6rem}.status-card,.care-card{border-radius:1.2rem}footer{display:grid;justify-items:start;gap:1rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}