:root {
  --ink: #ecf6ff;
  --muted: #7591a8;
  --panel: rgba(13, 28, 43, .82);
  --line: rgba(146, 193, 225, .16);
  --cyan: #5de5ff;
  --violet: #a989ff;
  --orange: #ffb45c;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #07131f;
  font-family: "Space Grotesk", sans-serif;
  overflow: hidden;
}

.bubbles { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bubbles i { position: absolute; bottom: -20vh; width: 70px; aspect-ratio: 1; border: 1px solid rgba(93, 229, 255, .35); border-radius: 50%; box-shadow: inset 12px 12px 22px rgba(255, 255, 255, .08), 0 0 26px rgba(93, 229, 255, .14); animation: float 20s linear infinite; }
.bubbles i:nth-child(1) { left: 4%; width: 90px; animation-delay: -2s; }
.bubbles i:nth-child(2) { left: 18%; width: 170px; border-color: rgba(169, 137, 255, .3); animation-delay: -11s; animation-duration: 28s; }
.bubbles i:nth-child(3) { left: 35%; width: 110px; animation-delay: -7s; animation-duration: 24s; }
.bubbles i:nth-child(4) { left: 55%; width: 145px; border-color: rgba(255, 180, 92, .32); animation-delay: -15s; animation-duration: 30s; }
.bubbles i:nth-child(5) { left: 72%; width: 75px; animation-delay: -5s; }
.bubbles i:nth-child(6) { left: 79%; width: 210px; border-color: rgba(169, 137, 255, .25); animation-delay: -18s; animation-duration: 34s; }
.bubbles i:nth-child(7) { left: 90%; width: 120px; animation-delay: -9s; animation-duration: 26s; }
.bubbles i:nth-child(8) { left: 46%; width: 65px; animation-delay: -13s; animation-duration: 22s; }

.aquarium { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.animal { position: absolute; display: block; opacity: .58; filter: drop-shadow(0 0 10px rgba(93, 229, 255, .3)); }
.shark { top: 16%; left: -14%; font-size: clamp(2.5rem, 7vw, 4.5rem); animation: swim 26s linear infinite; }
.fish { font-size: 1.8rem; }
.fish-one { top: 28%; left: -8%; animation: swim 18s 3s linear infinite; }
.fish-two { top: 73%; right: -8%; animation: swim-back 22s 1s linear infinite; }
.jellyfish { top: 62%; left: 12%; font-size: 2rem; animation: drift 7s ease-in-out infinite; }
.crab { right: 11%; bottom: 9%; font-size: 1.8rem; animation: scuttle 9s ease-in-out infinite; }

body::before,
body::after {
  position: fixed;
  content: "";
  width: 36vw;
  height: 36vw;
  border: 1px solid rgba(93, 229, 255, .12);
  border-radius: 50%;
  pointer-events: none;
}

body::before { top: -18vw; right: -8vw; box-shadow: 0 0 0 40px rgba(93, 229, 255, .025), 0 0 0 80px rgba(93, 229, 255, .02); }
body::after { bottom: -22vw; left: -12vw; border-color: rgba(169, 137, 255, .12); }

.calculator {
  position: relative;
  z-index: 1;
  width: min(92vw, 390px);
  padding: 22px;
  background: linear-gradient(145deg, rgba(20, 42, 61, .9), rgba(6, 18, 30, .95));
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .08);
  animation: rise .7s ease-out both;
}

.topbar, .status, footer { display: flex; align-items: center; }
.topbar { justify-content: space-between; margin-bottom: 20px; }
.logo { font: 700 1.2rem "Syne", sans-serif; letter-spacing: .16em; }
.logo i { display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 13px var(--cyan); }
.status { gap: 7px; color: var(--muted); font-size: .59rem; letter-spacing: .12em; }
.status b { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

.display {
  min-height: 137px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  background: rgba(2, 10, 18, .55);
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .22);
}
#history { min-height: 17px; color: var(--muted); font-size: .67rem; letter-spacing: .1em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#screen { font: 600 clamp(2.4rem, 11vw, 3.7rem) "Syne", sans-serif; letter-spacing: -.04em; overflow: hidden; text-overflow: ellipsis; }

.keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.key { min-height: 58px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: rgba(24, 47, 66, .62); font: 500 1.15rem "Space Grotesk", sans-serif; cursor: pointer; transition: transform .15s, background .15s, border-color .15s; }
.key:hover { background: rgba(42, 76, 101, .8); border-color: rgba(146, 193, 225, .4); transform: translateY(-2px); }
.key:active { transform: translateY(1px) scale(.97); }
.utility { color: var(--muted); background: rgba(24, 47, 66, .32); }
.operator { color: var(--cyan); background: rgba(31, 81, 100, .3); font-size: 1.45rem; }
.equals { color: #101b28; background: linear-gradient(135deg, var(--cyan), #8cf0ff); border: 0; box-shadow: 0 0 18px rgba(93, 229, 255, .18); }
.wide { grid-column: span 2; text-align: left; padding-left: 24px; }
footer { justify-content: center; gap: 8px; margin-top: 17px; color: var(--muted); font-size: .58rem; letter-spacing: .15em; }
footer span { color: var(--orange); }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0% { opacity: 0; transform: translate(0, 10vh) scale(.6); } 12%, 82% { opacity: .8; } 100% { opacity: 0; transform: translate(7vw, -120vh) scale(1.15); } }
@keyframes swim { from { transform: translateX(0) scaleX(-1); } 50% { transform: translateX(58vw) translateY(22px) scaleX(-1); } to { transform: translateX(125vw) scaleX(-1); } }
@keyframes swim-back { from { transform: translateX(0); } 50% { transform: translateX(-45vw) translateY(-18px); } to { transform: translateX(-125vw); } }
@keyframes drift { 50% { transform: translateY(-28px) rotate(4deg); } }
@keyframes scuttle { 50% { transform: translateX(-45px); } }
@media (prefers-reduced-motion: reduce) { .bubbles i, .animal, .calculator { animation: none; } }
@media (max-width: 420px) { .calculator { padding: 16px; border-radius: 20px; } .key { min-height: 54px; } }