:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#031120;color:#edf6ff}
*{box-sizing:border-box}body{margin:0;min-width:280px;min-height:100svh;overflow-x:hidden}
.code-background{position:fixed;inset:-4%;background:url('pycharm.svg') center/cover no-repeat;opacity:.27;filter:blur(1px);transform:rotate(-5deg) scale(1.05);pointer-events:none}
.ocean-light{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,rgba(0,64,68,.25),rgba(1,15,31,.78) 67%,#020b18 100%),linear-gradient(0deg,#020b18,transparent 55%,rgba(2,11,24,.5))}
main{position:relative;min-height:100svh;display:grid;grid-template-rows:100px 1fr 112px;justify-items:center;padding:0 24px;padding-bottom:env(safe-area-inset-bottom,0px)}
.brand{padding-top:32px}.brand svg{width:43px;height:43px;stroke:#39bf91;stroke-width:1.5;opacity:.75}
.coming-soon{align-self:center;text-align:center;width:100%;padding-bottom:24px}
.aquarium{width:min(720px,100%);aspect-ratio:1.9;position:relative;margin:0 auto 20px;display:grid;place-items:center}
canvas{display:block;width:100%;height:100%;position:absolute;inset:0}
.shark-fallback{display:block;width:78%;height:auto;margin-left:10%;object-fit:contain}.ready .shark-fallback{visibility:hidden}
h1{font-size:clamp(26px,3.2vw,40px);font-weight:500;letter-spacing:.055em;margin:0;line-height:1.3}h1 span{display:block}
footer{align-self:center}nav{display:flex;gap:18px}a{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#8da9be;border:1px solid rgba(144,185,214,.16);background:rgba(15,39,60,.22);transition:color .2s,background .2s,transform .2s,border-color .2s}a svg{height:19px;width:19px;fill:currentColor}a:hover{color:#68edab;background:#10312e;border-color:#347861;transform:translateY(-3px)}a:focus-visible{outline:2px solid #68edab;outline-offset:5px}
@media(max-width:600px){main{grid-template-rows:76px 1fr 98px;padding-left:12px;padding-right:12px}.brand{padding-top:22px}.brand svg{width:36px;height:36px}.aquarium{width:100%;aspect-ratio:1.45;margin-bottom:25px}.code-background{background-position:58% center;opacity:.22}.coming-soon{padding-bottom:24px}h1{font-size:clamp(26px,7.5vw,34px);letter-spacing:.045em}nav{gap:20px}}
@media(max-height:620px) and (min-width:601px){main{grid-template-rows:58px 1fr 72px}.brand{padding-top:12px}.brand svg{width:33px;height:33px}.aquarium{width:min(490px,100%);aspect-ratio:2.5;margin-bottom:10px}.coming-soon{padding-bottom:0}h1{font-size:26px}a{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){a{transition:none}}