:root {
  --paper: #e8e3d6;
  --ink: #173943;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: "DM Mono", monospace; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .13; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); z-index: 10; }

main { min-height: 100svh; padding: 24px 28px 22px; display: grid; grid-template-rows: 28px minmax(520px, 1fr); gap: 14px; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 7px; }
nav { display: flex; justify-content: flex-end; gap: clamp(24px, 4vw, 56px); }
nav a { color: inherit; font-size: 10px; letter-spacing: .13em; text-decoration: none; position: relative; }
nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; border-bottom: 1px solid; transition: right .25s ease; }
nav a:hover::after { right: 0; }

.tank { position:relative; overflow:hidden; background-color:#5aaeb1; background-image:linear-gradient(to top, rgba(184,174,126,.34) 0%, rgba(100,142,130,.16) 16%, transparent 34%),radial-gradient(ellipse at 18% 103%, rgba(50,100,94,.28) 0%, transparent 28%),radial-gradient(ellipse at 78% 106%, rgba(34,92,88,.24) 0%, transparent 30%),url('assets/watercolor-water.png'); background-position:center; background-size:cover; background-repeat:no-repeat; cursor:crosshair; }
.tank::before { content:""; position:absolute; inset:-1px; z-index:4; pointer-events:none; background:linear-gradient(to right,#e8e3d6 0%,rgba(232,227,214,.76) 2%,rgba(232,227,214,.22) 6%,transparent 11%,transparent 89%,rgba(232,227,214,.22) 94%,rgba(232,227,214,.76) 98%,#e8e3d6 100%),linear-gradient(to bottom,#e8e3d6 0%,rgba(232,227,214,.68) 2%,rgba(232,227,214,.18) 6%,transparent 11%,transparent 89%,rgba(232,227,214,.18) 94%,rgba(232,227,214,.68) 98%,#e8e3d6 100%); }
.tank::after { content:""; position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.14; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
#life { z-index: 2; pointer-events: none; }
#ocean { z-index: 3; }
h1 { margin: 0; font: 400 10px/1 "DM Mono", monospace; letter-spacing: .13em; white-space: nowrap; }
.anchors { position: absolute; top: 100vh; }

@media (max-width: 700px) {
  main { padding: 18px 10px 12px; grid-template-rows: 28px minmax(520px, 1fr); gap: 10px; }
  .topbar { padding:0 5px; }
  nav { gap:16px; }
  nav a, h1 { font-size:9px; letter-spacing:.08em; }
  .tank::before { background:linear-gradient(to right,#e8e3d6 0%,rgba(232,227,214,.34) 5%,transparent 13%,transparent 87%,rgba(232,227,214,.34) 95%,#e8e3d6 100%),linear-gradient(to bottom,#e8e3d6 0%,rgba(232,227,214,.5) 3%,transparent 10%,transparent 90%,rgba(232,227,214,.5) 97%,#e8e3d6 100%); }
}

@media (prefers-reduced-motion: reduce) {
  nav a::after { transition: none; }
}