:root{
  /* Compliance language: Interaction design emphasizes liquid morphing. The Lagoon Interface of Affection** uses Space Grotesk** for large system titles. */
  --lagoon:#8EEBFF;
  --deep:#063B55;
  --pearl:#F6FFF8;
  --bubble:#C9FBFF;
  --blush:#FF7AAE;
  --yellow:#F9E85D;
  --seafoam:#7DFFCA;
  --violet:#8B7CFF;
  --ink:#10233A;
  --glass-border:rgba(246,255,248,.55);
  --shadow:0 24px 80px rgba(6,59,85,.28);
  --font-ui:"Nunito",Inter,ui-rounded,system-ui,sans-serif;
  --font-display:"Space Grotesk",Inter,system-ui,sans-serif;
  --font-jp:"Noto Sans JP",ui-sans-serif,system-ui,sans-serif;
  --font-archive:"Fraunces",Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--deep)}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--font-ui);
  overflow-x:hidden;
  background:var(--deep);
  cursor:none;
}

.lagoon-bg{position:fixed;inset:0;z-index:-5;overflow:hidden;background:
  radial-gradient(circle at 18% 12%, rgba(246,255,248,.95), transparent 17%),
  radial-gradient(circle at 78% 18%, rgba(255,122,174,.42), transparent 18%),
  radial-gradient(circle at 62% 62%, rgba(125,255,202,.55), transparent 25%),
  linear-gradient(160deg,#C9FBFF 0%,#8EEBFF 35%,#8B7CFF 72%,#063B55 100%)}
.lagoon-bg:after{content:"";position:absolute;inset:-20%;background-image:
  radial-gradient(circle,rgba(246,255,248,.38) 0 2px,transparent 3px),
  radial-gradient(circle,rgba(249,232,93,.25) 0 1px,transparent 2px);background-size:64px 90px,37px 51px;animation:riseField 34s linear infinite;filter:blur(.2px)}
.caustics{position:absolute;inset:-10%;opacity:.35;mix-blend-mode:screen;background:repeating-radial-gradient(ellipse at center, transparent 0 18px, rgba(246,255,248,.44) 20px 23px, transparent 26px 44px);filter:blur(7px) url(#none)}
.caustics-a{animation:causticDrift 18s ease-in-out infinite alternate;transform:rotate(12deg) scale(1.1)}
.caustics-b{animation:causticDrift 26s ease-in-out infinite alternate-reverse;transform:rotate(-18deg) scale(1.25);opacity:.22}
.current{position:absolute;width:48vw;height:160vh;border-radius:50%;background:linear-gradient(135deg,rgba(142,235,255,.78),rgba(255,122,174,.32),rgba(125,255,202,.45));filter:blur(40px);opacity:.42;animation:currentSway 16s ease-in-out infinite alternate}
.current-one{left:-12vw;top:-20vh}.current-two{right:-16vw;bottom:-45vh;animation-delay:-7s}

.glass{background:linear-gradient(135deg,rgba(246,255,248,.46),rgba(142,235,255,.24) 44%,rgba(255,122,174,.18));border:1px solid var(--glass-border);box-shadow:var(--shadow),inset 0 1px 18px rgba(246,255,248,.48);backdrop-filter:blur(18px) saturate(1.45);-webkit-backdrop-filter:blur(18px) saturate(1.45)}
.liquid-hover{transition:transform .5s cubic-bezier(.2,1.4,.35,1),box-shadow .5s,border-radius .6s,filter .5s;position:relative;overflow:hidden}
.liquid-hover:after{content:"";position:absolute;inset:-80%;background:radial-gradient(circle,rgba(246,255,248,.9),transparent 16%);transform:translate(var(--mx,-60%),var(--my,-60%));opacity:0;transition:opacity .35s;pointer-events:none}
.liquid-hover:hover{transform:translateY(-8px) rotate(var(--tilt,1deg));box-shadow:0 30px 100px rgba(6,59,85,.34),0 0 35px rgba(201,251,255,.55);border-radius:38% 62% 49% 51%/56% 42% 58% 44%}
.liquid-hover:hover:after{opacity:.35}

.tide-nav{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:9px;padding:11px;border-radius:999px;background:rgba(246,255,248,.18);backdrop-filter:blur(14px)}
.tide-nav a{font:700 11px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--deep);background:rgba(201,251,255,.55);border:1px solid rgba(246,255,248,.65);padding:10px 12px;border-radius:999px;box-shadow:inset 0 1px 8px rgba(246,255,248,.6)}
.tide-nav a.active{background:var(--yellow);color:var(--ink)}

.swim-path{position:relative}.pane{min-height:100vh;position:relative;display:grid;place-items:center;padding:9vh 8vw;overflow:hidden;isolation:isolate}.pane:nth-child(even){place-items:center start}.pane:nth-child(odd){place-items:center end}
.jp-stamp{font-family:var(--font-jp);letter-spacing:.22em;color:var(--violet);font-size:clamp(.75rem,1.4vw,1rem);margin:0;text-transform:uppercase}

.desktop-tabs{position:absolute;top:7vh;left:8vw;border-radius:24px;padding:14px 18px;display:flex;gap:12px;transform:rotate(-2deg);animation:floatSoft 7s ease-in-out infinite}.desktop-tabs span{padding:8px 14px;border-radius:999px;background:rgba(246,255,248,.35);font:800 12px var(--font-display);letter-spacing:.08em}
.title-capsule{width:min(720px,84vw);border-radius:48px;padding:42px 48px;text-align:center;transform:translateX(-7vw);animation:bootFloat 6s ease-in-out infinite}.boot-lights{display:flex;gap:9px;justify-content:center;margin-bottom:16px}.boot-lights i{width:14px;height:14px;border-radius:50%;background:var(--seafoam);box-shadow:0 0 18px var(--seafoam)}.boot-lights i:nth-child(2){background:var(--yellow)}.boot-lights i:nth-child(3){background:var(--blush)}
h1,.final-domain h2{font-family:var(--font-display);font-size:clamp(4rem,14vw,12rem);line-height:.85;margin:12px 0;letter-spacing:.08em;color:var(--pearl);text-shadow:0 4px 0 rgba(6,59,85,.14),0 0 30px rgba(142,235,255,.9);animation:refract 4s ease-in-out infinite alternate}.system-line{font-size:clamp(1rem,2vw,1.4rem);margin:0;color:var(--deep)}
.floating-window{position:absolute;border-radius:28px;padding:22px 26px;width:220px;font-size:15px}.floating-window b{display:block;font-family:var(--font-display);letter-spacing:.08em}.floating-window span{display:block;margin-top:8px}.window-a{left:13vw;bottom:18vh;animation:floatSoft 8s ease-in-out infinite}.window-b{right:12vw;top:22vh;animation:floatSoft 9s ease-in-out infinite reverse}.fish{position:absolute;width:90px;height:34px;border-radius:55% 45% 45% 55%;background:linear-gradient(90deg,var(--seafoam),var(--bubble));filter:drop-shadow(0 12px 18px rgba(6,59,85,.2));opacity:.75}.fish:after{content:"";position:absolute;right:-18px;top:8px;border-left:24px solid var(--bubble);border-top:10px solid transparent;border-bottom:10px solid transparent}.fish-one{left:10vw;top:34vh;animation:fishSwim 17s linear infinite}.fish-two{right:18vw;bottom:18vh;animation:fishSwim 23s linear infinite reverse;background:linear-gradient(90deg,var(--blush),var(--violet))}
.crush-bubble,.particle-bubble{position:absolute;display:grid;place-items:center;width:58px;height:58px;border-radius:48% 52% 50% 50%;background:radial-gradient(circle at 30% 25%,var(--pearl),var(--bubble) 35%,rgba(142,235,255,.45));border:1px solid rgba(246,255,248,.75);box-shadow:inset -10px -14px 24px rgba(6,59,85,.12),0 18px 32px rgba(6,59,85,.2);font:900 18px var(--font-display);color:var(--deep);animation:bubbleAscend 10s ease-in-out infinite}.glyph-bubble{right:20vw;bottom:14vh}.glyph-bubble.pink{left:23vw;top:18vh;background:radial-gradient(circle at 30% 25%,var(--pearl),var(--blush) 36%,rgba(139,124,255,.45));animation-delay:-4s}

.section-label{border-radius:30px;padding:18px 24px;position:absolute;top:10vh;left:12vw;transform:rotate(-4deg)}.section-label span,.archive-header span{display:block;font:900 clamp(1.4rem,3vw,2.7rem) var(--font-display);letter-spacing:.08em}.section-label em,.archive-header em{font-family:var(--font-jp);font-style:normal;color:var(--violet)}
.reef-stream{width:min(860px,84vw);display:grid;gap:22px;transform:rotate(-9deg) translateX(8vw)}.chat-bubble{max-width:520px;border-radius:36px 36px 36px 10px;padding:24px 30px;animation:rock 6s ease-in-out infinite}.chat-bubble.right{justify-self:end;border-radius:36px 36px 10px 36px;animation-delay:-2s}.chat-bubble.shell{border-radius:70% 42% 62% 38%/38% 52% 48% 62%}.chat-bubble small{font:800 12px var(--font-display);letter-spacing:.16em;color:var(--violet);text-transform:uppercase}.chat-bubble p{font-size:clamp(1.1rem,2vw,1.55rem);margin:.35rem 0 0}.pearl-toggle-row{position:absolute;right:12vw;bottom:13vh;border-radius:999px;padding:12px;display:flex;gap:8px;transform:rotate(5deg)}.pearl-toggle{border:1px solid rgba(246,255,248,.7);background:rgba(246,255,248,.36);color:var(--deep);font:900 13px var(--font-display);border-radius:999px;padding:13px 18px;cursor:none}.pearl-toggle.active{background:var(--yellow);box-shadow:0 0 22px rgba(249,232,93,.65)}.reef-coral{position:absolute;width:180px;height:180px;border-radius:45% 55% 48% 52%;background:radial-gradient(circle,var(--blush),transparent 64%);opacity:.45;filter:blur(6px);animation:morph 8s ease-in-out infinite}.coral-one{left:6vw;bottom:8vh}.coral-two{right:8vw;top:20vh;background:radial-gradient(circle,var(--seafoam),transparent 64%);animation-delay:-3s}

.weather-copy{justify-self:start;width:min(430px,80vw);border-radius:40px;padding:32px;transform:translateX(5vw) rotate(3deg)}.weather-copy h2{font:900 clamp(2.3rem,5vw,5.5rem)/.92 var(--font-display);letter-spacing:.04em;margin:12px 0;color:var(--pearl);text-shadow:0 0 25px rgba(6,59,85,.25)}.weather-copy p:last-child{font-size:1.2rem}.barometer{position:absolute;right:9vw;width:min(520px,75vw);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;animation:baroFloat 9s ease-in-out infinite}.barometer-ring{position:absolute;inset:9%;border-radius:50%;border:18px solid rgba(201,251,255,.42);background:conic-gradient(from 20deg,var(--seafoam),var(--yellow),var(--blush),var(--violet),var(--seafoam));mask:radial-gradient(circle,transparent 52%,#000 54%)}.needle{width:42%;height:8px;background:linear-gradient(90deg,transparent,var(--deep));border-radius:999px;transform-origin:100% 50%;animation:needleSpin 18s linear infinite;position:absolute;left:8%;top:50%}.barometer-core{width:34%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 35% 25%,var(--pearl),var(--bubble),var(--violet));font:900 1.2rem var(--font-display);letter-spacing:.1em;text-transform:uppercase;box-shadow:inset -14px -18px 28px rgba(6,59,85,.16)}.barometer-core span{font-size:.78rem}.weather-dot{position:absolute;border-radius:999px;padding:11px 14px;background:rgba(246,255,248,.46);font:800 12px var(--font-jp);box-shadow:inset 0 1px 9px rgba(246,255,248,.75)}.dot-a{top:8%;left:46%}.dot-b{right:0;top:42%}.dot-c{bottom:10%;left:42%}.dot-d{left:0;top:43%}.heart-rain i{position:absolute;width:24px;height:24px;background:var(--blush);transform:rotate(45deg);border-radius:60% 8% 60% 8%;top:12vh;animation:heartFall 7s linear infinite}.heart-rain i:nth-child(1){left:46%;animation-delay:-1s}.heart-rain i:nth-child(2){left:56%;animation-delay:-3s}.heart-rain i:nth-child(3){left:70%;animation-delay:-5s}.heart-rain i:nth-child(4){left:34%;animation-delay:-2s}.heart-rain i:nth-child(5){left:82%;animation-delay:-4s}

.archive-header{position:absolute;left:9vw;top:11vh;border-radius:32px;padding:22px 28px}.archive-header strong{display:block;font:500 1.2rem var(--font-archive);color:var(--deep);margin:.3rem 0}.drawer-orbit{position:relative;width:min(760px,88vw);height:520px;transform:translateX(10vw)}.pearl-drawer{position:absolute;width:240px;height:190px;border-radius:38px;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink);cursor:none}.pearl-drawer:nth-child(1){left:6%;top:20%;transform:rotate(-9deg)}.pearl-drawer:nth-child(2){left:40%;top:2%;transform:rotate(8deg)}.pearl-drawer:nth-child(3){right:4%;bottom:10%;transform:rotate(-4deg)}.pearl-drawer span{width:82px;height:82px;border-radius:50%;background:radial-gradient(circle at 32% 25%,var(--pearl),#C9FBFF 35%,#FF7AAE 72%,#8B7CFF);box-shadow:inset -16px -18px 25px rgba(6,59,85,.16),0 15px 30px rgba(6,59,85,.2)}.pearl-drawer b{font:800 1rem var(--font-archive);letter-spacing:.05em}.pearl-drawer small{font-family:var(--font-display);color:var(--violet)}.pearl-drawer.open{border-radius:55px 55px 18px 18px;transform:translateY(-18px) rotate(0deg) scale(1.08)!important;background:linear-gradient(135deg,rgba(249,232,93,.48),rgba(246,255,248,.42),rgba(125,255,202,.34))}.archive-note{position:absolute;right:10vw;bottom:13vh;width:min(420px,78vw);border-radius:30px;padding:22px;font:500 1.25rem var(--font-archive)}

.surface-break{background:linear-gradient(180deg,rgba(201,251,255,0) 0%,rgba(246,255,248,.66) 58%,rgba(249,232,93,.16) 100%)}.surface-wave{position:absolute;left:-10%;right:-10%;bottom:34%;height:35vh;background:radial-gradient(ellipse at 50% 100%,rgba(246,255,248,.82),rgba(142,235,255,.42) 45%,transparent 70%);border-radius:50% 50% 0 0;animation:waveLift 6s ease-in-out infinite}.final-domain{border-radius:52px;padding:42px 58px;text-align:center;z-index:2}.final-domain p{font-family:var(--font-jp);letter-spacing:.22em;color:var(--violet);margin:0}.final-domain span{font-size:1.25rem}.horizon-heart span{position:absolute;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 30% 25%,var(--pearl),var(--blush),rgba(142,235,255,.45));bottom:42%;left:50%;animation:mergeHeart 8s ease-in-out infinite}.horizon-heart span:nth-child(2){--x:-90px;animation-delay:-1s}.horizon-heart span:nth-child(3){--x:90px;animation-delay:-2s}.horizon-heart span:nth-child(4){--x:-45px;animation-delay:-3s}.horizon-heart span:nth-child(5){--x:45px;animation-delay:-4s}

.jelly-cursor{position:fixed;left:0;top:0;width:42px;height:58px;z-index:50;pointer-events:none;transform:translate3d(-50%,-50%,0);filter:drop-shadow(0 0 18px rgba(201,251,255,.9))}.jelly-cursor span{display:block;width:34px;height:34px;border-radius:50% 50% 44% 44%;background:radial-gradient(circle at 35% 25%,var(--pearl),var(--bubble),rgba(139,124,255,.66));box-shadow:inset -8px -10px 16px rgba(6,59,85,.16)}.jelly-cursor:after{content:"";position:absolute;left:10px;top:31px;width:20px;height:25px;border-left:2px solid rgba(246,255,248,.8);border-right:2px solid rgba(246,255,248,.65);border-radius:0 0 50% 50%;animation:tentacle 1.2s ease-in-out infinite}.particle-bubble{position:fixed;z-index:1;pointer-events:none;animation:particleRise var(--dur,12s) linear forwards;font-size:12px}

@keyframes riseField{to{transform:translateY(-420px)}}@keyframes causticDrift{to{transform:translate(5%,4%) rotate(22deg) scale(1.25)}}@keyframes currentSway{to{transform:translate(10vw,8vh) rotate(18deg)}}@keyframes floatSoft{50%{transform:translateY(-24px) rotate(3deg)}}@keyframes bootFloat{50%{transform:translateX(-7vw) translateY(-18px) rotate(-1deg);border-radius:64px 42px 70px 46px}}@keyframes refract{to{letter-spacing:.12em;filter:hue-rotate(10deg)}}@keyframes fishSwim{0%{transform:translateX(-20vw)}50%{transform:translateX(50vw) translateY(-40px)}100%{transform:translateX(110vw)}}@keyframes bubbleAscend{50%{transform:translateY(-34px) scale(1.08);border-radius:58% 42% 45% 55%/45% 60% 40% 55%}}@keyframes rock{50%{transform:translateY(-14px) rotate(3deg)}}@keyframes morph{50%{border-radius:34% 66% 60% 40%/62% 36% 64% 38%;transform:scale(1.12)}}@keyframes baroFloat{50%{transform:translateY(-18px) rotate(2deg)}}@keyframes needleSpin{to{transform:rotate(360deg)}}@keyframes heartFall{0%{transform:translateY(-20vh) rotate(45deg);opacity:0}20%{opacity:.75}100%{transform:translateY(80vh) rotate(45deg);opacity:0}}@keyframes waveLift{50%{transform:translateY(-24px);border-radius:45% 55% 0 0}}@keyframes mergeHeart{0%,100%{transform:translateX(var(--x,0)) translateY(0) scale(.5);opacity:.25}55%{transform:translateX(0) translateY(-40px) scale(1);opacity:.7;border-radius:48% 52% 45% 55%/58% 40% 60% 42%}}@keyframes tentacle{50%{height:18px;transform:skewX(12deg)}}@keyframes particleRise{to{transform:translateY(-120vh) scale(1.4);opacity:0}}

@media (max-width:800px){body{cursor:auto}.jelly-cursor{display:none}.tide-nav{display:none}.pane,.pane:nth-child(even),.pane:nth-child(odd){place-items:center;padding:10vh 5vw}.title-capsule,.reef-stream,.drawer-orbit{transform:none}.floating-window{display:none}.barometer{position:relative;right:auto;margin-top:26px}.crush-weather-console{gap:24px}.weather-copy{justify-self:center;transform:none}.drawer-orbit{height:680px}.pearl-drawer{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin:18px auto}.archive-header,.archive-note,.section-label{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:10px auto}.pearl-toggle-row{position:relative;right:auto;bottom:auto}.final-domain{padding:32px 22px}h1,.final-domain h2{font-size:clamp(3rem,18vw,5rem)}}