:root {
  --sky-shell: #C7F2FF;
  --lagoon-blue: #38A9FF;
  --lime-desktop: #A7F06B;
  --aqua-glass: #7DE7D7;
  --chrome-pearl: #F6FBFF;
  --deep-tray: #12324A;
  --bubble-violet: #9A8CFF;
  --rounded: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --edge: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

/* Space Grotesk** Grotesk* Groteskk for larger interface phrases and reflective labels where a contemporary dev edge is useful. Use **IBM Plex Mono only for tiny boot messages */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--deep-tray);
  background: var(--sky-shell);
  font-family: var(--body);
  overflow-x: hidden;
}

.bubble-os { position: relative; z-index: 2; }
.aero-scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 82px);
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 12%, rgba(246,251,255,.95), transparent 16%),
    radial-gradient(circle at 88% 25%, rgba(154,140,255,.3), transparent 18%),
    linear-gradient(180deg, var(--sky-shell), #eafaff 48%, #b8ecff);
}
.aero-scene::before {
  content: attr(data-scene-name);
  position: absolute;
  top: 24px;
  left: clamp(22px, 4vw, 58px);
  z-index: 8;
  font: 700 11px/1 var(--mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(18,50,74,.48);
  text-shadow: 0 1px 0 rgba(246,251,255,.7);
}
.aero-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(100deg, transparent 0 38px, rgba(246,251,255,.12) 39px 42px, transparent 43px 84px),
    radial-gradient(ellipse at var(--mx, 50%) var(--my, 40%), rgba(125,231,215,.34), transparent 34%);
  mix-blend-mode: screen;
  animation: causticDrift 12s linear infinite;
}

.caustic-layer,
.air-specks {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.caustic-layer {
  z-index: 1;
  opacity: .45;
  background:
    radial-gradient(circle at 20% 30%, rgba(246,251,255,.65) 0 2px, transparent 3px),
    radial-gradient(circle at 65% 72%, rgba(125,231,215,.55) 0 1px, transparent 2px),
    linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.2) 45% 47%, transparent 48% 100%);
  background-size: 90px 120px, 130px 150px, 260px 260px;
  animation: causticDrift 18s linear infinite;
}
.air-specks { z-index: 15; }
.speck {
  position: absolute;
  border-radius: 50%;
  background: rgba(246,251,255,.82);
  box-shadow: 0 0 10px rgba(56,169,255,.38);
  animation: riseSpeck var(--dur, 6s) ease-in forwards;
}

.system-tray {
  position: fixed;
  right: clamp(14px, 2.4vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 12px;
}
.tray-drop {
  width: 54px;
  height: 54px;
  border-radius: 46% 54% 55% 45% / 42% 35% 65% 58%;
  border: 1px solid rgba(246,251,255,.8);
  background: radial-gradient(circle at 32% 24%, var(--chrome-pearl), rgba(125,231,215,.7) 28%, rgba(56,169,255,.72) 70%);
  color: var(--deep-tray);
  box-shadow: inset -8px -10px 18px rgba(18,50,74,.18), 0 12px 30px rgba(18,50,74,.2);
  cursor: pointer;
  transform: scale(.86);
  transition: transform .35s ease, filter .35s ease;
}
.tray-drop span { display: block; font: 800 9px/1 var(--edge); transform: rotate(-12deg); }
.tray-drop.active { transform: scale(1.12); filter: saturate(1.35) drop-shadow(0 0 14px var(--aqua-glass)); }

.chrome-bubble {
  position: fixed;
  left: calc(var(--bubble-x, 50) * 1vw);
  top: calc(var(--bubble-y, 16) * 1vh);
  width: clamp(42px, 6vw, 78px);
  height: clamp(42px, 6vw, 78px);
  z-index: 25;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 22%, #fff 0 8%, #F6FBFF 9% 18%, #7DE7D7 35%, #38A9FF 62%, #9A8CFF 100%);
  box-shadow: inset -10px -14px 22px rgba(18,50,74,.26), inset 8px 8px 18px rgba(255,255,255,.72), 0 14px 34px rgba(18,50,74,.22);
  transform: translate(-50%, -50%) scale(var(--bubble-scale, 1));
  transition: filter .3s ease;
}
.chrome-bubble span { position: absolute; inset: 10px auto auto 12px; width: 30%; height: 22%; border-radius: 50%; background: rgba(255,255,255,.8); filter: blur(1px); }
.chrome-bubble.awake { filter: drop-shadow(0 0 22px var(--lime-desktop)); }

.glass-shell,
.gel-pod,
.code-droplet,
.progress-ring,
.aero-folder,
.rain-icon,
.dock-row {
  border: 1px solid rgba(246,251,255,.72);
  background: linear-gradient(145deg, rgba(246,251,255,.64), rgba(125,231,215,.22) 52%, rgba(56,169,255,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset -18px -24px 42px rgba(18,50,74,.12), 0 28px 70px rgba(18,50,74,.18);
  backdrop-filter: blur(12px);
}
.gel-pod {
  border-radius: 36px 62px 44px 74px / 52px 38px 76px 42px;
  padding: clamp(24px, 4vw, 52px);
  animation: podWobble 7s ease-in-out infinite;
}
.tiny-mono { font: 700 11px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(18,50,74,.58); }
h1, h2 { font-family: var(--rounded); margin: 0; line-height: .86; letter-spacing: -.07em; color: var(--deep-tray); }
h2 { font-size: clamp(62px, 10vw, 150px); text-shadow: 0 3px 0 rgba(246,251,255,.7), 0 18px 42px rgba(56,169,255,.22); }
p { font-size: clamp(17px, 1.7vw, 25px); line-height: 1.55; }

.bubble-bios { display: grid; place-items: center; }
.sky-hills {
  position: absolute;
  inset: auto -5vw -8vh -5vw;
  height: 36vh;
  background:
    radial-gradient(ellipse at 22% 100%, var(--lime-desktop) 0 34%, transparent 35%),
    radial-gradient(ellipse at 70% 100%, #7eea87 0 38%, transparent 39%),
    linear-gradient(180deg, transparent, rgba(167,240,107,.64));
  filter: blur(.2px);
}
.hero-shell {
  width: min(1120px, 92vw);
  min-height: 62vh;
  border-radius: 46% 54% 52% 48% / 36% 42% 58% 64%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(28px, 5vw, 76px);
  position: relative;
}
.wordmark {
  font-size: clamp(76px, 16vw, 250px);
  position: relative;
  filter: url(#none);
  text-shadow: 0 2px 0 #fff, 0 20px 55px rgba(18,50,74,.22);
}
.wordmark::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  background: linear-gradient(105deg, transparent 0 20%, rgba(246,251,255,.95) 24%, transparent 31% 56%, rgba(154,140,255,.46) 62%, transparent 72%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: shineSweep 5s ease-in-out infinite;
}
.gg-lens {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, rgba(246,251,255,.9), rgba(125,231,215,.42) 35%, rgba(56,169,255,.24) 68%);
  box-shadow: inset -10px -12px 20px rgba(18,50,74,.14), inset 7px 7px 16px rgba(255,255,255,.68), 0 0 0 2px rgba(246,251,255,.42);
  transform: translateY(var(--lens-shift, 0));
}
.dot-char { color: var(--lagoon-blue); text-shadow: 0 0 25px var(--chrome-pearl); }
.bios-copy { max-width: 720px; margin: 22px auto 0; color: rgba(18,50,74,.75); }
.boot-condensation { position: absolute; left: 10%; font: 700 clamp(11px, 1.2vw, 14px)/1.4 var(--mono); letter-spacing: .08em; color: rgba(18,50,74,.52); opacity: 0; animation: condense 1.2s ease forwards; }
.line-one { top: 13%; }
.line-two { top: 18%; animation-delay: .55s; }
.wake-button { position: absolute; right: 10vw; bottom: 12vh; max-width: 260px; cursor: pointer; color: var(--deep-tray); }
.wake-button strong { display: block; font: 800 28px/1 var(--edge); margin-top: 8px; }

.aquarium-desktop { background: linear-gradient(180deg, #ddfbff, var(--sky-shell) 42%, #9dddff); }
.desktop-orb { position: absolute; width: 58vw; height: 58vw; left: -16vw; top: 12vh; border-radius: 50%; background: radial-gradient(circle at 38% 26%, rgba(246,251,255,.75), rgba(125,231,215,.22) 44%, transparent 68%); border: 1px solid rgba(246,251,255,.55); }
.desktop-pod { width: min(650px, 82vw); margin: 16vh 0 0 10vw; }
.folder-stack { position: absolute; right: 12vw; top: 24vh; display: grid; gap: 18px; z-index: 6; }
.aero-folder { width: 240px; padding: 20px 24px; border-radius: 26px 46px 28px 32px; font: 800 22px/1 var(--edge); color: var(--deep-tray); text-align: left; cursor: pointer; transition: transform .35s ease, background .35s ease; }
.aero-folder.open, .aero-folder:hover { transform: translateX(-22px) rotate(-3deg); background: linear-gradient(145deg, rgba(246,251,255,.82), rgba(167,240,107,.5)); }
.folder-note { position: absolute; right: 15vw; bottom: 16vh; width: min(430px, 72vw); color: rgba(18,50,74,.72); transition: opacity .25s ease, transform .25s ease; }
.cursor-fish { position: absolute; left: var(--fish-x, 68%); top: var(--fish-y, 68%); width: 92px; height: 44px; border-radius: 55% 45% 45% 55%; background: linear-gradient(90deg, var(--bubble-violet), var(--aqua-glass)); box-shadow: inset 10px 8px 18px rgba(255,255,255,.45), 0 10px 28px rgba(18,50,74,.14); transition: left .8s ease, top .8s ease; }
.cursor-fish::after { content: ""; position: absolute; right: -24px; top: 8px; border-left: 28px solid var(--aqua-glass); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }

.refraction-workshop { background: radial-gradient(circle at 68% 42%, rgba(154,140,255,.25), transparent 26%), linear-gradient(180deg, #c5f6ff, #e9fbff 55%, #b2efff); }
.workshop-pod { width: min(680px, 82vw); margin: 13vh 0 0 44vw; }
.workshop-lens { position: absolute; left: 8vw; top: 16vh; width: 34vw; height: 34vw; min-width: 260px; min-height: 260px; font: 800 clamp(52px, 9vw, 132px)/1 var(--edge); color: rgba(18,50,74,.5); }
.code-droplet { position: absolute; left: 12vw; bottom: 10vh; width: min(570px, 82vw); border-radius: 44px 70px 54px 80px / 64px 46px 82px 40px; padding: 32px; color: var(--deep-tray); transform: rotate(-3deg); }
pre { margin: 0; white-space: pre-wrap; }
code { font: 700 clamp(13px, 1.4vw, 18px)/1.7 var(--mono); color: rgba(18,50,74,.76); }
code span { color: #38A9FF; }
.progress-ring { position: absolute; right: 10vw; bottom: 14vh; width: 154px; height: 154px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--lime-desktop) 0 73%, rgba(246,251,255,.36) 73% 100%); font: 900 32px/1 var(--edge); }
.progress-ring::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: rgba(246,251,255,.72); }
.progress-ring span { position: relative; }

.icon-rain-garden { background: linear-gradient(180deg, #dffbff, #b7f0ff 48%, #d6ffbc); }
.rain-pod { width: min(700px, 86vw); margin: 10vh auto 0 8vw; }
.icon-cloud { position: relative; z-index: 5; height: 46vh; margin-top: 6vh; }
.rain-icon { position: absolute; width: clamp(76px, 9vw, 124px); height: clamp(76px, 9vw, 124px); border-radius: 50%; cursor: pointer; color: var(--deep-tray); font: 900 clamp(22px, 3vw, 38px)/1 var(--edge); animation: iconRain 6s ease-in-out infinite; }
.rain-icon:nth-child(1) { left: 12%; top: 6%; }
.rain-icon:nth-child(2) { left: 36%; top: 28%; animation-delay: -1.2s; }
.rain-icon:nth-child(3) { left: 55%; top: 4%; animation-delay: -2.1s; }
.rain-icon:nth-child(4) { left: 74%; top: 31%; animation-delay: -.6s; }
.rain-icon:nth-child(5) { left: 22%; top: 62%; animation-delay: -3.4s; }
.rain-readout { position: absolute; right: 10vw; bottom: 12vh; width: min(420px, 74vw); font-family: var(--edge); color: rgba(18,50,74,.72); }

.sleep-mode-lagoon { display: grid; align-items: center; background: radial-gradient(circle at 72% 22%, rgba(154,140,255,.55), transparent 18%), linear-gradient(180deg, #8edfff, var(--deep-tray)); color: var(--chrome-pearl); }
.sleep-mode-lagoon h2, .sleep-mode-lagoon p, .sleep-mode-lagoon .tiny-mono { color: var(--chrome-pearl); }
.sleep-pod { width: min(760px, 88vw); margin-left: 8vw; background: linear-gradient(145deg, rgba(246,251,255,.18), rgba(125,231,215,.16), rgba(18,50,74,.54)); }
.lagoon-moon { position: absolute; right: 14vw; top: 15vh; width: 180px; height: 180px; font: 900 86px/1 var(--rounded); color: var(--chrome-pearl); }
.aero-link { display: inline-block; margin-top: 14px; color: var(--deep-tray); background: var(--chrome-pearl); text-decoration: none; border-radius: 999px; padding: 15px 22px; font: 900 18px/1 var(--edge); box-shadow: 0 0 26px rgba(125,231,215,.45); }
.dock-row { position: absolute; right: 10vw; bottom: 12vh; display: flex; gap: 16px; padding: 18px; border-radius: 999px; }
.dock-row span { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 30% 24%, #fff, var(--aqua-glass) 44%, var(--lagoon-blue)); }

@keyframes causticDrift { to { background-position: 160px -220px, -120px 180px, 260px 260px; } }
@keyframes podWobble { 0%,100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
@keyframes shineSweep { 0%, 40% { transform: translateX(-30%); opacity: .1; } 68% { transform: translateX(22%); opacity: .9; } 100% { transform: translateX(35%); opacity: .05; } }
@keyframes condense { to { opacity: 1; transform: translateY(8px); } }
@keyframes iconRain { 0%,100% { transform: translateY(-10px) rotate(-4deg); } 50% { transform: translateY(32px) rotate(5deg); } }
@keyframes riseSpeck { to { transform: translateY(-90px) scale(.35); opacity: 0; } }

@media (max-width: 820px) {
  .system-tray { top: auto; bottom: 12px; right: 50%; transform: translateX(50%); display: flex; }
  .tray-drop { width: 44px; height: 44px; }
  .chrome-bubble { width: 42px; height: 42px; }
  .hero-shell { min-height: 58vh; }
  .wake-button, .folder-stack, .folder-note, .code-droplet, .progress-ring, .rain-readout, .dock-row { position: relative; inset: auto; margin: 28px 0 0; }
  .desktop-pod, .workshop-pod, .rain-pod, .sleep-pod { margin: 14vh 0 0; }
  .workshop-lens { opacity: .38; left: auto; right: -18vw; }
  .icon-cloud { height: 55vh; }
}