:root{
  /* Space Mono weather stamps create a bilingual poetic observatory only in tiny weather-stamp details such as altitude. */
  --sky-milk:#F3FBFF;
  --high-air:#8ED8FF;
  --deep-sky:#2F8EDB;
  --pearl:#FFF1DD;
  --nacre:#D7C7FF;
  --vapor:#FFC7D6;
  --cyan:#7EE7DE;
  --indigo:#28456B;
  --sun:#FFE58A;
  --white-glass:rgba(255,255,255,0.55);
  --scroll:0;
  --mx:0;
  --my:0;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--sky-milk)}
body{
  margin:0;
  min-height:600vh;
  color:var(--indigo);
  font-family:"Plus Jakarta Sans", Inter, sans-serif;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,229,138,.48), transparent 23vw),
    linear-gradient(180deg,#F3FBFF 0%,#EAF8FF 20%,#8ED8FF 42%,#FFF1DD 64%,#FFC7D6 82%,#28456B 100%);
}

.sky-noise{
  position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.18;
  background-image:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 80% 70%,#7EE7DE 0 1px,transparent 1.4px);
  background-size:58px 58px,83px 83px;mix-blend-mode:soft-light;
}

.sky-marks{
  position:fixed;top:18px;right:28px;z-index:20;display:flex;gap:13px;align-items:center;
  font-family:"Space Mono", monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(40,69,107,.62);
}
.sky-marks:before{content:"";width:16vw;max-width:210px;height:1px;background:linear-gradient(90deg,transparent,#8ED8FF,#D7C7FF);}
.sky-marks a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:5px;opacity:.55;transition:opacity .4s,transform .4s}
.sky-marks a span{width:7px;height:7px;border-radius:50%;border:1px solid currentColor;background:rgba(255,255,255,.45)}
.sky-marks a.active{opacity:1;transform:translateY(3px);color:var(--deep-sky)}

.daywheel{position:fixed;inset:-8vh -8vw;z-index:2;pointer-events:none;transform:translate(calc(var(--mx)*10px),calc(var(--my)*8px)) rotate(calc(var(--scroll)*36deg));transform-origin:58% 48%;transition:filter .8s}
.spiral-svg{width:125vw;height:125vh;opacity:.86;overflow:visible;filter:drop-shadow(0 18px 40px rgba(47,142,219,.15))}
.listening-path{fill:none;stroke:url(#spiralGradient);stroke-width:34;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2600;stroke-dashoffset:calc(1800 - var(--scroll)*1500);filter:url(#softGlow);opacity:.66;mix-blend-mode:multiply;transition:stroke-width .7s ease,opacity .7s ease}
.ghost-path{fill:none;stroke:rgba(255,255,255,.56);stroke-width:2;stroke-dasharray:12 18;opacity:.65;animation:dashDrift 28s linear infinite}
.path-two{stroke:#D7C7FF;animation-duration:37s;opacity:.37}
@keyframes dashDrift{to{stroke-dashoffset:-700}}

main{position:relative;z-index:10}.scene{position:relative;min-height:100vh;padding:8vh 8vw;overflow:hidden}.scene:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;transition:opacity .8s}.scene-blue{background:linear-gradient(180deg,#F3FBFF 0%,rgba(243,251,255,.66) 100%)}
.scene-cloud{background:radial-gradient(circle at 70% 21%,rgba(255,229,138,.48),transparent 18vw),linear-gradient(180deg,rgba(243,251,255,.5),rgba(142,216,255,.42))}.scene-noon{background:linear-gradient(180deg,rgba(142,216,255,.2),rgba(47,142,219,.64))}.scene-shell{background:radial-gradient(ellipse at 65% 52%,rgba(255,241,221,.92),transparent 34vw),linear-gradient(180deg,rgba(47,142,219,.18),rgba(255,241,221,.72))}.scene-vapor{background:radial-gradient(circle at 20% 30%,rgba(126,231,222,.42),transparent 22vw),linear-gradient(180deg,rgba(255,241,221,.45),rgba(255,199,214,.72),rgba(215,199,255,.6))}.scene-pearl{background:radial-gradient(circle at 60% 42%,rgba(215,199,255,.38),transparent 35vw),linear-gradient(180deg,rgba(255,199,214,.55),#28456B 78%);color:#F3FBFF}

.wordmark{position:absolute;top:9vh;left:8vw;font-family:"Fraunces", serif;font-size:clamp(54px,10vw,160px);font-weight:300;letter-spacing:-.07em;color:rgba(40,69,107,.7);text-shadow:0 1px 0 rgba(255,255,255,.9);animation:weightless 12s ease-in-out infinite}
.micro-label{position:absolute;top:29vh;left:13vw;padding:10px 16px;border:1px solid var(--white-glass);border-radius:999px;background:rgba(255,255,255,.32);backdrop-filter:blur(12px);font-size:13px}.bilingual span,.korean{font-family:"Noto Sans KR", sans-serif}.altitude{position:absolute;left:5vw;bottom:12vh;display:flex;flex-direction:column;gap:18px;color:rgba(40,69,107,.44);font-family:"Space Mono", monospace;font-size:10px;letter-spacing:.12em}.ticks span:before{content:"";display:inline-block;width:42px;height:1px;background:#8ED8FF;margin-right:10px;vertical-align:middle}.poem{position:absolute;font-family:"Fraunces", serif;font-weight:300;font-size:clamp(25px,3.8vw,58px);line-height:.98;max-width:580px}.line-one{right:9vw;bottom:13vh;transform:rotate(-3deg);color:rgba(40,69,107,.66)}

.float-note{position:absolute;max-width:430px;padding:24px 28px;border:1px solid rgba(255,255,255,.55);border-radius:38px;background:linear-gradient(140deg,rgba(255,255,255,.42),rgba(255,255,255,.16));box-shadow:0 24px 90px rgba(40,69,107,.11),inset 0 1px 0 rgba(255,255,255,.72);backdrop-filter:blur(20px);transform:translate(calc(var(--mx)*18px),calc(var(--my)*14px)) rotate(var(--tilt,-2deg))}.float-note h1{margin:8px 0 13px;font-family:"Fraunces", serif;font-size:clamp(38px,6vw,86px);font-weight:500;line-height:.88;letter-spacing:-.05em}.float-note p{margin:0;font-size:16px;line-height:1.65}.stamp{font-family:"Space Mono", monospace;font-size:10px;letter-spacing:.13em;color:rgba(40,69,107,.55)}.morning-note{top:21vh;left:12vw;--tilt:2deg}.noon-note{top:17vh;right:10vw;--tilt:-2deg;color:#F3FBFF}.shell-note{top:16vh;left:9vw;--tilt:-4deg}.vapor-note{top:24vh;right:13vw;--tilt:3deg}.dusk-note{top:15vh;left:12vw;--tilt:-1deg;color:#F3FBFF;background:rgba(40,69,107,.22)}

.cloud,.milk-cloud{position:absolute;border-radius:999px;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.96),rgba(255,255,255,.28) 62%,transparent 72%);filter:blur(.2px);animation:float 18s ease-in-out infinite}.comma{width:120px;height:62px}.comma:after{content:"";position:absolute;width:62px;height:62px;border-radius:50%;right:-14px;top:23px;background:inherit}.c1{top:35vh;left:38vw}.c2{top:62vh;right:17vw;transform:scale(.7) rotate(17deg);animation-duration:22s}.milk-cloud{width:260px;height:108px}.cloud-a{right:12vw;top:36vh}.cloud-b{left:44vw;bottom:13vh;transform:scale(.68);animation-duration:24s}.sun-halo{position:absolute;right:18vw;top:17vh;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,#FFE58A 0 10%,rgba(255,229,138,.34) 28%,transparent 68%);animation:pulse 9s ease-in-out infinite}.sun-halo i{position:absolute;inset:45px;border-radius:50%;border:1px solid rgba(255,255,255,.78)}.glint{position:absolute;color:#FFE58A;font-size:26px;text-shadow:0 0 18px #fff}.g1{left:58vw;top:46vh}.g2{left:27vw;bottom:24vh}

.horizon-thread{position:absolute;left:8vw;right:8vw;top:56vh;height:1px;background:linear-gradient(90deg,transparent,#F3FBFF,#7EE7DE,transparent);box-shadow:0 0 18px rgba(243,251,255,.75)}.paper-plane{position:absolute;left:20vw;top:34vh;width:0;height:0;border-left:64px solid rgba(243,251,255,.74);border-top:22px solid transparent;border-bottom:12px solid transparent;transform:rotate(-17deg);filter:drop-shadow(0 8px 18px rgba(40,69,107,.18));animation:orbit 20s ease-in-out infinite}.gull{position:absolute;width:42px;height:18px;border-top:3px solid rgba(243,251,255,.8);border-radius:50%;transform:rotate(8deg)}.gull:after{content:"";position:absolute;right:-33px;top:-3px;width:42px;height:18px;border-top:3px solid rgba(243,251,255,.8);border-radius:50%;transform:rotate(-25deg)}.gull-one{left:44vw;top:22vh}.gull-two{right:22vw;bottom:26vh;transform:scale(.7) rotate(-8deg)}.weather-ring{position:absolute;left:10vw;bottom:12vh;width:118px;height:118px;border:1px dashed rgba(243,251,255,.72);border-radius:50%;display:grid;place-items:center;text-align:center;font-family:"Space Mono", monospace;color:#F3FBFF}

.shell-aperture{position:absolute;right:10vw;top:17vh;width:min(48vw,620px);height:min(58vw,690px);border-radius:58% 42% 52% 48%/47% 53% 47% 53%;background:radial-gradient(ellipse at 44% 47%,rgba(243,251,255,.72),transparent 16%),radial-gradient(ellipse at 60% 45%,#FFF1DD 0 24%,#D7C7FF 58%,rgba(255,199,214,.58) 82%);box-shadow:inset -42px -20px 80px rgba(40,69,107,.18),inset 28px 24px 70px rgba(255,255,255,.68),0 38px 100px rgba(40,69,107,.14);animation:shellBreathe 11s ease-in-out infinite}.rib{position:absolute;left:49%;top:50%;width:76%;height:1px;background:linear-gradient(90deg,rgba(40,69,107,.24),transparent);transform-origin:left center}.r1{transform:rotate(-55deg)}.r2{transform:rotate(-28deg)}.r3{transform:rotate(2deg)}.r4{transform:rotate(31deg)}.r5{transform:rotate(58deg)}.marble{position:absolute;right:29vw;top:45vh;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#8ED8FF 48%,#2F8EDB);box-shadow:0 22px 44px rgba(47,142,219,.28)}.microcopy{position:absolute;left:19vw;bottom:17vh;font-size:22px;color:rgba(40,69,107,.58);transform:rotate(5deg)}

.bokeh,.bubble{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.62);background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.76),rgba(126,231,222,.2) 45%,rgba(215,199,255,.16));box-shadow:inset 0 0 22px rgba(255,255,255,.55);animation:float 17s ease-in-out infinite}.bubble{width:54px;height:54px;left:57vw;top:21vh}.bokeh{width:120px;height:120px}.bx1{left:10vw;top:20vh}.bx2{left:32vw;bottom:16vh;width:76px;height:76px;animation-duration:23s}.bx3{right:16vw;top:50vh;width:160px;height:160px}.bx4{right:38vw;top:25vh;width:46px;height:46px}.nacre-flake{position:absolute;width:72px;height:26px;border-radius:60% 40% 70% 30%;background:linear-gradient(110deg,rgba(255,255,255,.7),rgba(215,199,255,.48),rgba(126,231,222,.35));transform:rotate(var(--rot,20deg));animation:flake 16s ease-in-out infinite}.f1{left:19vw;bottom:25vh;--rot:-20deg}.f2{right:30vw;bottom:31vh;--rot:18deg}.f3{left:50vw;top:18vh;--rot:52deg}

.moon-shell{position:absolute;right:-8vw;bottom:-18vh;width:min(74vw,920px);height:min(74vw,920px);border-radius:50%;background:radial-gradient(circle at 42% 43%,rgba(243,251,255,.86),rgba(255,241,221,.62) 15%,rgba(215,199,255,.48) 36%,rgba(142,216,255,.16) 62%,transparent 70%);box-shadow:inset 0 0 100px rgba(255,255,255,.35),0 0 120px rgba(215,199,255,.38)}.moon-shell div{position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(243,251,255,.3);background:repeating-radial-gradient(circle at 40% 46%,transparent 0 36px,rgba(255,255,255,.16) 38px,transparent 42px)}.final-whisper{position:absolute;right:12vw;top:18vh;font-family:"Noto Sans KR","Plus Jakarta Sans",sans-serif;font-size:14px;letter-spacing:.12em;color:rgba(243,251,255,.72)}.listening-coordinates{position:absolute;left:8vw;bottom:9vh;font-family:"Space Mono", monospace;font-size:12px;color:rgba(243,251,255,.62)}

@keyframes weightless{50%{transform:translateY(-12px) rotate(-1deg)}}@keyframes float{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(26px,-18px,0) rotate(4deg)}}@keyframes pulse{50%{transform:scale(1.09);opacity:.68}}@keyframes orbit{50%{transform:translate(22vw,12vh) rotate(-6deg)}}@keyframes shellBreathe{50%{transform:scale(1.035) rotate(2deg);border-radius:48% 52% 46% 54%/55% 45% 55% 45%}}@keyframes flake{50%{transform:translate(18px,-28px) rotate(calc(var(--rot) + 24deg));opacity:.55}}

@media (max-width:760px){.sky-marks{left:14px;right:14px;top:12px;gap:7px;font-size:8px}.sky-marks:before{display:none}.scene{padding:9vh 6vw}.wordmark{font-size:23vw;left:5vw}.micro-label{top:25vh;left:8vw}.float-note{left:6vw!important;right:6vw!important;top:18vh;max-width:none}.float-note h1{font-size:15vw}.shell-aperture{right:-22vw;top:40vh;width:92vw;height:92vw}.moon-shell{width:118vw;height:118vw}.daywheel{inset:-16vh -55vw}.spiral-svg{width:190vw}.poem{font-size:12vw;left:8vw;right:8vw}.sky-marks a{font-size:0}.sky-marks a span{width:9px;height:9px}}