:root {
  /* playful utility precision without leaning on the overused mono-terminal aesthetic. generous tracking. */
  --yellow: #F8E94E;
  --pearl: #F7FFFD;
  --navy: #06243A;
  --coral: #FF6B5E;
  --graphite: #536B78;
  --cyan: #B9F6FF;
  --mint: #7CFFCB;
  --lagoon: #47D7FF;
  --title-font: "Rubik Glitch Pop", "Cooper Black", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body-font: "Nunito Sans", "Trebuchet MS", system-ui, sans-serif;
  --serif-font: "DM Serif Display", Georgia, serif;
  --mono-font: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--navy);
  font-family: var(--body-font);
  background: linear-gradient(180deg, #F7FFFD 0%, #B9F6FF 18%, #47D7FF 58%, #06243A 100%);
}

.aqua-field { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.gridwash {
  position: absolute; inset: -10%; opacity: .26;
  background-image: linear-gradient(rgba(6,36,58,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(6,36,58,.16) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: rotate(-8deg) scale(1.1);
  mask-image: radial-gradient(circle at 50% 18%, black, transparent 72%);
}
.caustics {
  position: absolute; inset: -20%; mix-blend-mode: screen; opacity: .42;
  background: radial-gradient(ellipse at 20% 15%, rgba(247,255,253,.8), transparent 24%), radial-gradient(ellipse at 72% 42%, rgba(124,255,203,.5), transparent 28%), radial-gradient(ellipse at 42% 82%, rgba(185,246,255,.45), transparent 25%);
  animation: floatCaustics 15s ease-in-out infinite alternate;
}
.cursor-bubbles span {
  position: fixed; width: 13px; height: 13px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 25%, var(--pearl), rgba(185,246,255,.55) 35%, rgba(71,215,255,.1) 70%);
  box-shadow: inset -2px -3px 7px rgba(6,36,58,.18), 0 0 12px rgba(247,255,253,.7);
  animation: cursorRise 1.4s ease-out forwards;
}

.chamber {
  position: relative; min-height: 100vh; z-index: 1; overflow: hidden;
  display: grid; place-items: center;
  padding: 8vmin;
  isolation: isolate;
}
.chamber::before {
  content: attr(data-chamber);
  position: absolute; right: 7vw; top: 7vh;
  font: 700 11px/1 var(--mono-font); letter-spacing: .45em; color: rgba(6,36,58,.34);
}
.chamber::after {
  content: ""; position: absolute; inset: 5vh 4vw; border-radius: 44px;
  border: 1px solid rgba(247,255,253,.58);
  box-shadow: inset 0 0 38px rgba(247,255,253,.46), inset 0 -28px 70px rgba(6,36,58,.1), 0 20px 90px rgba(6,36,58,.14);
  background: linear-gradient(135deg, rgba(247,255,253,.22), rgba(185,246,255,.08) 45%, rgba(71,215,255,.16));
  backdrop-filter: blur(12px);
  z-index: -1;
}

.boot { background: radial-gradient(circle at 50% 30%, rgba(247,255,253,.9), rgba(185,246,255,.72) 32%, rgba(71,215,255,.42) 70%, rgba(6,36,58,.2)); }
.reef { background: radial-gradient(circle at 78% 45%, rgba(248,233,78,.25), transparent 28%); }
.sort { background: radial-gradient(circle at 20% 36%, rgba(255,107,94,.22), transparent 30%); }
.lens { background: radial-gradient(circle at 62% 42%, rgba(247,255,253,.48), transparent 34%); }
.mat { background: radial-gradient(circle at 34% 60%, rgba(124,255,203,.3), transparent 34%); }
.surface { background: linear-gradient(180deg, rgba(6,36,58,.22), rgba(185,246,255,.9) 72%, rgba(247,255,253,.98)); }

.glass-cabinet, .drawer-shell, .work-mat, .surface-dome {
  border: 1px solid rgba(247,255,253,.7);
  background: linear-gradient(135deg, rgba(247,255,253,.56), rgba(185,246,255,.26) 42%, rgba(71,215,255,.18));
  backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: inset 0 2px 2px rgba(247,255,253,.9), inset 0 -22px 48px rgba(6,36,58,.12), 0 28px 80px rgba(6,36,58,.22);
}
.boot-pane { width: min(86vw, 980px); height: min(74vh, 660px); border-radius: 52px; position: relative; display: grid; place-items: center; }
.boot-orb { width: min(56vmin, 430px); aspect-ratio: 1; border-radius: 48% 52% 45% 55%; display: grid; place-items: center; position: relative; background: radial-gradient(circle at 32% 22%, #F7FFFD 0 8%, #B9F6FF 26%, rgba(71,215,255,.48) 57%, rgba(6,36,58,.12)); box-shadow: inset -24px -38px 70px rgba(6,36,58,.22), inset 18px 18px 32px rgba(247,255,253,.82), 0 20px 70px rgba(71,215,255,.45); animation: jelly 7s ease-in-out infinite; }
h1, h2 { margin: 0; font-family: var(--title-font); letter-spacing: .015em; }
h1 { font-size: clamp(3.2rem, 11vw, 9rem); color: var(--navy); text-shadow: 0 3px 0 rgba(247,255,253,.7), 0 16px 35px rgba(6,36,58,.25); }
h2 { font-size: clamp(2rem, 5.8vw, 5.2rem); line-height: .92; }
.serif-label { font-family: var(--serif-font); font-size: clamp(1.2rem, 2.4vw, 2.2rem); color: var(--graphite); font-style: italic; margin: .5rem 0 0; }
.mono, .measurement-strip { font-family: var(--mono-font); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--graphite); }
.measurement-strip { position: absolute; padding: 10px 18px; border-radius: 999px; background: rgba(247,255,253,.42); box-shadow: inset 0 1px 0 rgba(247,255,253,.85); }
.top-strip { top: 26px; left: 34px; } .bottom-strip { bottom: 9vh; }
.wake-button { position: absolute; bottom: 42px; right: 48px; border: 0; border-radius: 999px; padding: 15px 24px; color: var(--navy); font-weight: 900; font-family: var(--body-font); background: linear-gradient(#F7FFFD, #B9F6FF 45%, #47D7FF); box-shadow: inset 0 2px 0 rgba(247,255,253,.95), inset 0 -5px 14px rgba(6,36,58,.16), 0 14px 30px rgba(6,36,58,.22); cursor: pointer; }
.wake-button:active { transform: translateY(2px); }
.condensation { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(circle at 25% 20%, rgba(247,255,253,.7), transparent 20%), radial-gradient(circle at 68% 34%, rgba(247,255,253,.62), transparent 24%), rgba(185,246,255,.12); backdrop-filter: blur(9px); opacity: 1; transition: opacity 1.1s ease, transform 1.1s ease; }
body.awake .condensation { opacity: 0; transform: translateY(7vh); }
.drop { position: absolute; width: 26px; height: 38px; border-radius: 58% 42% 62% 38%; background: linear-gradient(135deg, rgba(247,255,253,.75), rgba(185,246,255,.18)); box-shadow: inset 4px 5px 8px rgba(247,255,253,.7), inset -5px -9px 12px rgba(6,36,58,.08), 0 8px 22px rgba(6,36,58,.12); animation: drip 5s ease-in-out infinite; }
.d1{left:12%;top:15%}.d2{left:72%;top:12%;animation-delay:.7s}.d3{left:44%;top:29%;animation-delay:1.2s}.d4{left:86%;top:46%;animation-delay:.3s}.d5{left:20%;top:61%;animation-delay:1.6s}.d6{left:58%;top:72%;animation-delay:.9s}.d7{left:35%;top:8%;animation-delay:2.1s}.d8{left:7%;top:42%;animation-delay:1.3s}
.chrome-ring { position: absolute; border-radius: 50%; border: 14px solid rgba(247,255,253,.52); box-shadow: inset 0 0 0 9px rgba(83,107,120,.18), 0 0 30px rgba(247,255,253,.55); }
.ring-a { width: 70%; aspect-ratio: 1; transform: rotate(-18deg); }
.bubble-stack { position: absolute; inset: 0; } .bubble-stack i { position: absolute; border-radius: 50%; background: rgba(247,255,253,.72); box-shadow: inset -2px -3px 7px rgba(6,36,58,.14); animation: rise 4s infinite ease-in; } .bubble-stack i:nth-child(1){width:16px;height:16px;left:24%;bottom:25%}.bubble-stack i:nth-child(2){width:28px;height:28px;left:73%;bottom:38%;animation-delay:.7s}.bubble-stack i:nth-child(3){width:11px;height:11px;left:62%;bottom:18%;animation-delay:1.5s}.bubble-stack i:nth-child(4){width:22px;height:22px;left:39%;bottom:50%;animation-delay:2s}
.chapter-label { position: absolute; left: 8vw; top: 9vh; font-family: var(--serif-font); font-size: clamp(1.4rem, 3vw, 3rem); color: rgba(6,36,58,.6); font-style: italic; }
.floating-copy { position: absolute; max-width: 420px; padding: 28px; border-radius: 32px; background: rgba(247,255,253,.4); backdrop-filter: blur(14px); border: 1px solid rgba(247,255,253,.68); box-shadow: inset 0 1px rgba(247,255,253,.8), 0 20px 55px rgba(6,36,58,.15); transform: translateY(36px); opacity: .2; transition: transform .8s ease, opacity .8s ease; }
.is-current .floating-copy { transform: translateY(0); opacity: 1; }
.floating-copy p:not(.mono) { font-size: 1.08rem; line-height: 1.65; }
.copy-left { left: 8vw; bottom: 12vh; } .copy-right { right: 8vw; top: 24vh; } .narrow { max-width: 370px; }
.tool-stage { position: relative; width: min(72vw, 760px); height: min(68vh, 590px); }
.wrench { position: absolute; left: 27%; top: 15%; width: 370px; height: 96px; border-radius: 999px; transform: rotate(-28deg); background: linear-gradient(90deg, #F7FFFD, #536B78 12%, #B9F6FF 26%, #F7FFFD 45%, #536B78 72%, #F7FFFD); box-shadow: inset 0 12px 12px rgba(247,255,253,.8), inset 0 -12px 18px rgba(6,36,58,.28), 0 34px 60px rgba(6,36,58,.22); animation: slowRotate 12s ease-in-out infinite alternate; }
.wrench::before { content:""; position:absolute; right:-42px; top:-38px; width:142px; height:142px; border-radius:50%; background: radial-gradient(circle, transparent 0 32%, #F7FFFD 33% 45%, #536B78 48% 65%, transparent 66%); }
.wrench::after { content:""; position:absolute; left:-38px; top:15px; width:92px; height:66px; border-radius:50%; background: radial-gradient(circle at 35% 50%, transparent 0 28%, #F7FFFD 30% 44%, #536B78 52%); }
.suction-ruler { position:absolute; right:3%; bottom:18%; width:520px; height:72px; border-radius:30px; transform: rotate(8deg); background: linear-gradient(135deg, rgba(248,233,78,.82), rgba(247,255,253,.55)); box-shadow: inset 0 5px 8px rgba(247,255,253,.8), inset 0 -12px 18px rgba(6,36,58,.12), 0 18px 38px rgba(6,36,58,.18); display:flex; gap:38px; padding:12px 32px; }
.suction-ruler i { width:3px; background: var(--navy); opacity:.55; border-radius:2px; }
.screw { position:absolute; width:42px; height:42px; border-radius:50%; background: radial-gradient(circle at 30% 25%, #F7FFFD, #536B78); box-shadow: inset 0 -7px 10px rgba(6,36,58,.28); } .screw::after{content:"";position:absolute;left:9px;right:9px;top:19px;height:4px;border-radius:4px;background:#06243A;opacity:.42}.s1{left:10%;top:18%}.s2{right:12%;bottom:12%}
.fish-checks b { position:absolute; color:var(--mint); font-size:38px; text-shadow: 0 3px 0 rgba(6,36,58,.14); animation: swim 8s ease-in-out infinite; } .fish-checks b:nth-child(1){left:55%;top:20%}.fish-checks b:nth-child(2){left:68%;top:68%;animation-delay:1.1s}.fish-checks b:nth-child(3){left:38%;top:77%;animation-delay:2.2s}
.drawer-shell { width:min(76vw, 860px); height:58vh; border-radius:42px; position:relative; display:grid; place-items:center; }
.bubble-level { position:relative; width:min(64vw, 650px); height:92px; border-radius:999px; background: linear-gradient(#F7FFFD, #B9F6FF 40%, rgba(71,215,255,.72)); box-shadow: inset 0 5px 12px rgba(247,255,253,.9), inset 0 -10px 22px rgba(6,36,58,.2), 0 20px 50px rgba(6,36,58,.18); }
.bubble-level i { position:absolute; top:18px; left:calc(50% - 30px); width:60px; height:56px; border-radius:50%; background: radial-gradient(circle at 30% 25%, #F7FFFD, rgba(124,255,203,.8) 35%, rgba(71,215,255,.25) 70%); box-shadow: inset -4px -7px 11px rgba(6,36,58,.16); transition:left .16s ease-out; }
.level-ticks { position:absolute; inset:0; background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(6,36,58,.25) 41px 43px, transparent 44px 80px); border-radius:inherit; }
.sorting-bubbles { position:absolute; inset:auto 9% 12% 9%; display:flex; justify-content:space-between; gap:14px; }
.sorting-bubbles button, .pill-row span { border:0; border-radius:999px; padding:13px 20px; color:var(--navy); font-weight:900; font-family:var(--mono-font); text-transform:uppercase; letter-spacing:.12em; background:linear-gradient(#F7FFFD, #7CFFCB); box-shadow:inset 0 2px rgba(247,255,253,.9), inset 0 -6px 12px rgba(6,36,58,.13), 0 12px 24px rgba(6,36,58,.14); }
.sorting-bubbles button.snapped { transform: translateY(-28px) scale(1.08); background: linear-gradient(#F7FFFD, #F8E94E); }
.lens-field { position:relative; width:min(74vw, 780px); height:62vh; border-radius:50px; background:rgba(247,255,253,.22); border:1px solid rgba(247,255,253,.6); box-shadow: inset 0 0 55px rgba(247,255,253,.3); overflow:hidden; }
.hidden-copy { position:absolute; left:12%; top:40%; font-family:var(--serif-font); font-style:italic; font-size:clamp(2.2rem, 5vw, 5.8rem); color:rgba(6,36,58,.23); white-space:nowrap; filter: blur(1px); }
.magnifier { position:absolute; width:210px; height:210px; border-radius:50%; left:52%; top:30%; transform:translate(-50%,-50%); background:radial-gradient(circle at 35% 25%, rgba(247,255,253,.86), rgba(185,246,255,.5) 40%, rgba(71,215,255,.18) 70%); border:14px solid rgba(247,255,253,.72); box-shadow: inset -14px -18px 40px rgba(6,36,58,.15), 0 26px 50px rgba(6,36,58,.22); transition: transform .18s ease-out; }
.magnifier::after { content:""; position:absolute; width:150px; height:28px; border-radius:999px; right:-104px; bottom:-31px; transform:rotate(42deg); background:linear-gradient(90deg,#536B78,#F7FFFD,#536B78); box-shadow:inset 0 5px 5px rgba(247,255,253,.6), inset 0 -6px 8px rgba(6,36,58,.2); }
.magnifier span { position:absolute; inset:35%; border-radius:50%; background:rgba(247,255,253,.65); }
.tray-lines i { position:absolute; height:1px; left:8%; right:8%; background:rgba(6,36,58,.16); } .tray-lines i:nth-child(1){top:22%}.tray-lines i:nth-child(2){top:42%}.tray-lines i:nth-child(3){top:62%}.tray-lines i:nth-child(4){top:82%}
.work-mat { width:min(72vw, 760px); height:64vh; border-radius:55px; position:relative; background:linear-gradient(135deg, rgba(6,36,58,.58), rgba(83,107,120,.35), rgba(124,255,203,.22)); }
.gasket { position:absolute; inset:18%; border-radius:42% 58% 50% 44%; border:24px solid rgba(124,255,203,.42); box-shadow: inset 0 0 24px rgba(247,255,253,.3), 0 0 46px rgba(124,255,203,.35); animation:jelly 8s ease-in-out infinite reverse; }
.widget { position:absolute; border-radius:24px; padding:22px 28px; background:linear-gradient(135deg, rgba(247,255,253,.82), rgba(185,246,255,.44)); color:var(--navy); font-weight:900; box-shadow:inset 0 2px rgba(247,255,253,.9), inset 0 -10px 16px rgba(6,36,58,.14), 0 18px 34px rgba(6,36,58,.22); transition: transform .7s cubic-bezier(.2,.9,.2,1); }
.work-mat.active .w-a{transform:translate(105px,82px) rotate(-7deg)} .work-mat.active .w-b{transform:translate(-96px,96px) rotate(8deg)} .work-mat.active .w-c{transform:translate(92px,-96px) rotate(5deg)} .work-mat.active .w-d{transform:translate(-100px,-72px) rotate(-8deg)}
.w-a{left:9%;top:12%}.w-b{right:10%;top:16%}.w-c{left:13%;bottom:13%}.w-d{right:12%;bottom:14%}
.tiny-driver { position:absolute; left:46%; top:46%; width:260px; height:34px; border-radius:999px; transform:rotate(-32deg); background:linear-gradient(90deg,#FF6B5E 0 22%, #F7FFFD 22% 36%, #536B78 36% 100%); box-shadow:inset 0 5px rgba(247,255,253,.55), inset 0 -8px rgba(6,36,58,.18); }
.surface-dome { width:min(78vw, 860px); min-height:58vh; border-radius:58% 42% 45% 55%; display:grid; place-items:center; text-align:center; padding:8vmin; position:relative; }
.surface-dome h2 { font-size:clamp(3.5rem, 10vw, 9rem); color:var(--navy); text-shadow:0 5px 0 rgba(247,255,253,.7); }
.sun-cap { position:absolute; top:-8%; width:52%; height:22%; border-radius:50%; background:radial-gradient(ellipse, #F8E94E, rgba(248,233,78,.18) 70%); filter:blur(.2px); }
.pill-row { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.depth-nav { position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:3; display:grid; gap:10px; }
.depth-nav a { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; text-decoration:none; color:var(--navy); font:800 11px var(--mono-font); background:rgba(247,255,253,.38); border:1px solid rgba(247,255,253,.68); box-shadow:inset 0 1px rgba(247,255,253,.9), 0 8px 18px rgba(6,36,58,.14); }
.depth-nav a.active { background:linear-gradient(#F7FFFD,#F8E94E); transform:scale(1.12); }

@keyframes floatCaustics { to { transform: translate3d(-4%, 3%, 0) rotate(5deg); } }
@keyframes cursorRise { to { transform: translateY(-58px) scale(.35); opacity:0; } }
@keyframes jelly { 50% { border-radius: 55% 45% 58% 42%; transform: translateY(-10px) scale(1.02); } }
@keyframes drip { 50% { transform: translateY(28px); } }
@keyframes rise { to { transform: translateY(-160px); opacity:0; } }
@keyframes slowRotate { to { transform: rotate(-17deg) translateY(22px); } }
@keyframes swim { 50% { transform: translate(28px, -18px) rotate(8deg); } }

@media (max-width: 760px) {
  .chamber { padding: 7vmin 5vmin; }
  .copy-left, .copy-right { left: 7vw; right: 7vw; bottom: 8vh; top: auto; }
  .tool-stage, .drawer-shell, .lens-field, .work-mat { width: 86vw; }
  .wrench { width: 250px; left: 12%; }
  .suction-ruler { width: 310px; right: -8%; }
  .sorting-bubbles { flex-wrap: wrap; }
  .depth-nav { display:none; }
}