:root{
  /* Interaction language focuses on condensation wipes. */
  --chrome-white:#F8FFFF;
  --caption-ink:#14314A;
  --morning-blue:#7EDBFF;
  --aero-sky:#DDF7FF;
  --lime:#B9F36A;
  --peach:#FFB38A;
  --violet:#9E8CFF;
  --cyan:#18B7D6;
  --ui:"Nunito","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --jp:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--aero-sky);}
body{
  margin:0;
  min-height:100%;
  color:var(--caption-ink);
  font-family:var(--ui);
  overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 8%,rgba(248,255,255,.95),transparent 22vw),
    radial-gradient(circle at 78% 28%,rgba(185,243,106,.45),transparent 18vw),
    linear-gradient(140deg,#DDF7FF 0%,#F8FFFF 42%,#7EDBFF 100%);
}

body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:12;
  background:repeating-linear-gradient(0deg,rgba(248,255,255,.14) 0 1px,transparent 1px 5px);
  mix-blend-mode:soft-light;opacity:.55;
}

.cursor-halo{
  position:fixed;width:120px;height:120px;border-radius:50%;z-index:14;pointer-events:none;
  transform:translate(-50%,-50%);opacity:.0;
  background:radial-gradient(circle,rgba(248,255,255,.65),rgba(126,219,255,.22) 42%,transparent 70%);
  filter:blur(2px);transition:opacity .25s ease;
}
body.pointer-on .cursor-halo{opacity:1}

.condensation{
  position:fixed;inset:0;z-index:10;pointer-events:none;opacity:.95;
  background:
    radial-gradient(circle at 15% 18%,rgba(248,255,255,.9) 0 5px,transparent 7px),
    radial-gradient(circle at 22% 45%,rgba(248,255,255,.75) 0 3px,transparent 5px),
    radial-gradient(circle at 50% 16%,rgba(248,255,255,.8) 0 4px,transparent 6px),
    radial-gradient(circle at 72% 34%,rgba(248,255,255,.7) 0 7px,transparent 10px),
    radial-gradient(circle at 88% 70%,rgba(248,255,255,.75) 0 4px,transparent 7px),
    linear-gradient(100deg,rgba(221,247,255,.55),rgba(248,255,255,.18));
  backdrop-filter:blur(9px) saturate(1.2);
  mask-image:linear-gradient(90deg,transparent 0%,black 14%,black 100%);
  animation:morningWipe 3s cubic-bezier(.2,.8,.2,1) forwards;
}
.condensation.rewipe{animation:none;mask-image:radial-gradient(circle at var(--wipe-x,50%) var(--wipe-y,50%),transparent 0 90px,black 145px);opacity:.68;}
@keyframes morningWipe{to{opacity:0;mask-position:130vw 0}}

.day-markers{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:9;display:flex;flex-direction:column;gap:10px}
.marker{width:76px;text-decoration:none;color:var(--caption-ink);font:800 12px/1 var(--jp);padding:9px 10px;border-radius:999px;background:rgba(248,255,255,.42);border:1px solid rgba(248,255,255,.78);box-shadow:inset 0 1px 8px rgba(255,255,255,.85),0 10px 25px rgba(20,49,74,.12);backdrop-filter:blur(12px);transition:.35s ease}
.marker.active{background:linear-gradient(135deg,#F8FFFF,#7EDBFF);transform:translateX(-8px);box-shadow:inset 0 0 14px rgba(248,255,255,.95),0 0 28px rgba(126,219,255,.8)}

.bubble-trail{position:fixed;inset:auto 0 8vh 0;width:100vw;height:70vh;z-index:1;pointer-events:none;filter:url(#goo) drop-shadow(0 12px 16px rgba(24,183,214,.18));opacity:.85}
.time-charm{position:fixed;left:8vw;top:68vh;z-index:8;width:178px;height:138px;border-radius:34px;background:linear-gradient(145deg,rgba(248,255,255,.72),rgba(126,219,255,.35));border:1px solid rgba(248,255,255,.86);box-shadow:inset 0 2px 14px rgba(248,255,255,.9),inset 0 -12px 24px rgba(24,183,214,.13),0 20px 55px rgba(20,49,74,.22);backdrop-filter:blur(18px) saturate(1.25);display:grid;place-items:center;text-align:center;transition:transform .15s linear}
.time-charm::before{content:"";position:absolute;inset:10px;border-radius:26px;border:1px solid rgba(248,255,255,.65);background:radial-gradient(circle at 30% 12%,rgba(248,255,255,.95),transparent 26%),radial-gradient(circle at 80% 80%,rgba(158,140,255,.28),transparent 32%)}
.time-charm strong{position:relative;font:900 25px/1 var(--ui);letter-spacing:-.04em}.charm-month,.charm-time{position:relative;font:800 11px/1 var(--jp);letter-spacing:.16em}.charm-time{font-size:18px;color:var(--cyan)}
.chika-spark{position:fixed;z-index:9;left:calc(8vw + 130px);top:calc(68vh - 12px);width:36px;height:22px;transition:transform .15s linear;filter:drop-shadow(0 0 12px #F8FFFF)}
.chika-spark i{position:absolute;width:12px;height:12px;border-radius:50%;background:#F8FFFF;box-shadow:0 0 0 4px rgba(126,219,255,.35),0 0 18px rgba(248,255,255,.95);animation:sparkHop 1.4s ease-in-out infinite}.chika-spark i:nth-child(2){left:18px;top:7px;animation-delay:.22s;background:#B9F36A}@keyframes sparkHop{50%{transform:translateY(-8px) scale(1.15)}}

.day-capsule{position:relative;z-index:2}.aero-scene{min-height:100vh;position:relative;overflow:hidden;padding:9vh 9vw;display:flex;align-items:center;isolation:isolate}.scene-bg{position:absolute;inset:-8%;z-index:-2;transition:transform 1s ease}.scene-bg::before,.scene-bg::after{content:"";position:absolute;border-radius:999px;filter:blur(1px)}
.morning{background:linear-gradient(160deg,#7EDBFF 0%,#DDF7FF 52%,#F8FFFF 100%)}.droplets::before{width:60vw;height:60vw;left:-18vw;top:-18vw;background:radial-gradient(circle,#F8FFFF 0 8%,rgba(248,255,255,.2) 18%,transparent 55%)}.droplets::after{width:35vw;height:35vw;right:12vw;bottom:8vh;background:radial-gradient(circle,rgba(185,243,106,.42),transparent 62%)}
.garden{background:linear-gradient(145deg,#F8FFFF,#DDF7FF 38%,#B9F36A 130%)}.leaflight::before{width:70vw;height:34vw;right:-20vw;top:6vh;background:radial-gradient(ellipse,rgba(185,243,106,.58),transparent 62%);transform:rotate(-22deg)}.leaflight::after{width:26vw;height:70vw;left:12vw;bottom:-30vw;background:radial-gradient(ellipse,rgba(126,219,255,.5),transparent 58%)}
.lunch{background:linear-gradient(135deg,#F8FFFF,#DDF7FF 34%,rgba(255,179,138,.64))}.stickerfield::before{inset:8% auto auto 8%;width:55vw;height:55vw;background:radial-gradient(circle,rgba(255,179,138,.65),transparent 55%)}.stickerfield::after{right:3vw;bottom:6vh;width:36vw;height:36vw;background:radial-gradient(circle,rgba(158,140,255,.34),transparent 65%)}
.errand{background:linear-gradient(160deg,#7EDBFF,#F8FFFF 48%,#9E8CFF 145%)}.errandair::before{width:80vw;height:18vw;left:6vw;top:20vh;background:linear-gradient(90deg,transparent,rgba(248,255,255,.75),transparent);transform:rotate(-18deg)}.errandair::after{width:38vw;height:38vw;right:2vw;bottom:8vh;background:radial-gradient(circle,rgba(24,183,214,.42),transparent 62%)}
.jelly-sunset{background:linear-gradient(150deg,#DDF7FF,#FFB38A 54%,#9E8CFF 125%)}.sunsetbloom::before{width:72vw;height:72vw;left:-20vw;bottom:-35vw;background:radial-gradient(circle,rgba(255,179,138,.9),rgba(158,140,255,.32),transparent 62%)}.sunsetbloom::after{width:30vw;height:30vw;right:16vw;top:18vh;background:radial-gradient(circle,#F8FFFF,rgba(255,179,138,.3),transparent 70%)}
.wish{background:radial-gradient(circle at 50% 20%,#F8FFFF,#DDF7FF 36%,#14314A 150%)}.screensaver::before{width:24vw;height:24vw;background:radial-gradient(circle,rgba(248,255,255,.86),transparent 60%);left:20vw;top:20vh;animation:orbitDrift 8s linear infinite}.screensaver::after{width:34vw;height:34vw;background:radial-gradient(circle,rgba(126,219,255,.42),transparent 70%);right:8vw;bottom:12vh;animation:orbitDrift 11s linear infinite reverse}@keyframes orbitDrift{50%{transform:translate(8vw,7vh) scale(1.1)}}

.dew-pane{position:relative;border:1px solid rgba(248,255,255,.82);background:linear-gradient(145deg,rgba(248,255,255,.64),rgba(221,247,255,.28));box-shadow:inset 0 1px 18px rgba(248,255,255,.95),inset 0 -22px 30px rgba(126,219,255,.12),0 28px 80px rgba(20,49,74,.17);backdrop-filter:blur(20px) saturate(1.3);border-radius:46px;padding:44px;max-width:620px;overflow:hidden}.dew-pane::after{content:"";position:absolute;inset:12px;border-radius:34px;border:1px solid rgba(248,255,255,.45);pointer-events:none}.hero-pane{margin-left:8vw;margin-top:-8vh}.side-pane{margin-left:auto;margin-right:10vw}.lunch-pane{margin-left:12vw;margin-top:18vh}.floating-pane{margin-left:auto;margin-right:13vw;transform:rotate(-2deg)}.sunset-pane{margin-left:9vw}.wish-pane{margin:auto;text-align:center}
.chrome-glint,.dew-pane::before{content:"";position:absolute;left:-40%;top:-20%;width:38%;height:160%;background:linear-gradient(90deg,transparent,rgba(248,255,255,.85),transparent);transform:rotate(22deg);animation:glint 4.2s ease-in-out infinite}@keyframes glint{0%,45%{left:-45%}70%,100%{left:120%}}
.eyebrow{font:900 13px/1 var(--jp);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin:0 0 14px}.vertical-tag{position:absolute;right:18px;top:24px;writing-mode:vertical-rl;font:800 13px/1.2 var(--jp);color:rgba(20,49,74,.62);letter-spacing:.18em}h1,h2{margin:0;color:var(--caption-ink);letter-spacing:-.055em;font:900 clamp(50px,8vw,118px)/.82 var(--display);max-width:900px}h1 span,h2 span{display:block;color:transparent;background:linear-gradient(110deg,#14314A,#18B7D6 50%,#9E8CFF);-webkit-background-clip:text;background-clip:text;text-shadow:0 1px 0 rgba(248,255,255,.7)}.diary-copy{font:700 clamp(17px,2vw,23px)/1.45 var(--ui);max-width:540px;margin:24px 0 0}.weather-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.sticker-control{font:900 13px/1 var(--ui);color:var(--caption-ink);border:1px solid rgba(248,255,255,.9);border-radius:999px;padding:13px 18px;background:linear-gradient(135deg,rgba(248,255,255,.84),rgba(126,219,255,.34));box-shadow:inset 0 1px 8px #F8FFFF,0 12px 24px rgba(20,49,74,.1);cursor:pointer;transition:.28s cubic-bezier(.2,1.4,.4,1)}.sticker-control:hover,.sticker-control.popped{transform:translateY(-5px) rotate(-2deg);background:linear-gradient(135deg,#F8FFFF,#B9F36A)}
.calendar-charm{position:absolute;right:13vw;top:18vh;width:230px;height:270px;border-radius:42px;background:linear-gradient(150deg,rgba(248,255,255,.72),rgba(126,219,255,.28));border:1px solid rgba(248,255,255,.85);box-shadow:inset 0 0 24px rgba(248,255,255,.9),0 24px 70px rgba(20,49,74,.18);backdrop-filter:blur(15px);display:grid;place-items:center;animation:floaty 5s ease-in-out infinite}.calendar-charm span{font:900 18px var(--jp);letter-spacing:.18em}.calendar-charm b{font:900 108px/.7 var(--display)}.calendar-charm em{font:900 30px var(--ui);color:var(--cyan);font-style:normal}@keyframes floaty{50%{transform:translateY(-18px) rotate(3deg)}}
.sticker-note{position:absolute;z-index:3;border-radius:24px;padding:20px 24px;background:linear-gradient(145deg,rgba(255,179,138,.88),rgba(248,255,255,.72));border:1px dashed rgba(20,49,74,.25);box-shadow:0 18px 35px rgba(20,49,74,.14);font:900 18px/1.25 var(--ui);transform:rotate(-7deg);transition:transform .45s cubic-bezier(.2,1.5,.3,1)}.sticker-note strong{font-family:var(--jp);font-size:13px;color:var(--cyan)}.sticker-note.peeled,.sticker-note:hover{transform:rotate(-7deg) translateY(-10px) skewY(-2deg)}.note-a{right:25vw;bottom:16vh}.note-b{left:10vw;bottom:16vh;background:linear-gradient(145deg,#B9F36A,#F8FFFF)}
.plant-orb{position:absolute;left:12vw;top:18vh;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle at 30% 22%,#F8FFFF,rgba(126,219,255,.4) 34%,rgba(185,243,106,.28) 70%,transparent 72%);box-shadow:inset 0 8px 30px rgba(248,255,255,.9),0 35px 70px rgba(20,49,74,.14)}.plant-orb i{position:absolute;width:90px;height:160px;border-radius:90% 10% 90% 10%;background:linear-gradient(145deg,rgba(185,243,106,.85),rgba(24,183,214,.2));left:110px;top:85px;transform-origin:bottom center}.plant-orb i:nth-child(2){transform:rotate(55deg)}.plant-orb i:nth-child(3){transform:rotate(-55deg)}.chrome-rail{position:absolute;right:10vw;bottom:18vh;width:38vw;height:18px;border-radius:999px;background:linear-gradient(#F8FFFF,#7EDBFF 45%,#14314A 52%,#F8FFFF);box-shadow:0 12px 26px rgba(20,49,74,.16);transform:rotate(-12deg)}
.sticker-sheet{margin-left:auto;margin-right:8vw;display:grid;grid-template-columns:repeat(2,150px);gap:18px;transform:rotate(7deg)}.sticker-sheet div{min-height:106px;border-radius:28px;background:rgba(248,255,255,.6);border:2px dashed rgba(20,49,74,.2);display:grid;place-items:center;text-align:center;font:900 17px var(--ui);box-shadow:inset 0 0 18px rgba(248,255,255,.9),0 16px 28px rgba(20,49,74,.12)}.sticker-sheet div:nth-child(2){background:rgba(255,179,138,.65)}.sticker-sheet div:nth-child(3){background:rgba(185,243,106,.55)}.sticker-sheet div:nth-child(4){background:rgba(158,140,255,.38);font-family:var(--jp)}
.bubble-cluster{position:absolute;left:9vw;bottom:12vh;width:410px;height:400px}.bubble-cluster i{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 24%,#F8FFFF,rgba(126,219,255,.34) 35%,rgba(158,140,255,.2) 70%,transparent 72%);box-shadow:inset 0 0 24px rgba(248,255,255,.8);animation:bubbleRise 5s ease-in-out infinite}.bubble-cluster i:nth-child(1){width:110px;height:110px;left:20px;bottom:30px}.bubble-cluster i:nth-child(2){width:70px;height:70px;left:150px;bottom:160px;animation-delay:.5s}.bubble-cluster i:nth-child(3){width:150px;height:150px;left:220px;bottom:60px;animation-delay:1s}.bubble-cluster i:nth-child(4){width:44px;height:44px;left:280px;bottom:250px;animation-delay:1.5s}.bubble-cluster i:nth-child(5){width:82px;height:82px;left:70px;bottom:250px;animation-delay:2s}@keyframes bubbleRise{50%{transform:translateY(-28px) scale(1.06)}}.weather-stickers{position:absolute;right:12vw;bottom:16vh;display:flex;gap:15px}.weather-stickers span{width:68px;height:68px;border-radius:20px;background:rgba(248,255,255,.6);border:1px solid rgba(248,255,255,.9);display:grid;place-items:center;font-size:30px;color:var(--cyan);box-shadow:inset 0 0 12px #F8FFFF,0 12px 26px rgba(20,49,74,.13)}
.sun-medallion{position:absolute;right:16vw;top:20vh;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#F8FFFF,#FFB38A 42%,#9E8CFF 100%);box-shadow:inset 0 8px 30px rgba(248,255,255,.75),0 26px 75px rgba(20,49,74,.18);display:grid;place-items:center;color:#14314A;animation:floaty 6s ease-in-out infinite}.sun-medallion b{font:900 94px/.7 var(--display)}.sun-medallion small{font:900 28px var(--jp);margin-top:-80px}.ribbon-tab{position:absolute;left:22vw;bottom:13vh;border-radius:999px;padding:18px 34px;background:linear-gradient(135deg,rgba(248,255,255,.7),rgba(255,179,138,.5));border:1px solid rgba(248,255,255,.9);font:900 16px var(--ui);box-shadow:inset 0 0 14px #F8FFFF,0 16px 35px rgba(20,49,74,.14)}
.wish-orbits{position:absolute;inset:0;pointer-events:none}.wish-orbits i{position:absolute;border-radius:50%;border:1px solid rgba(248,255,255,.7);box-shadow:0 0 30px rgba(126,219,255,.45)}.wish-orbits i:nth-child(1){width:40vw;height:40vw;left:8vw;top:16vh}.wish-orbits i:nth-child(2){width:24vw;height:24vw;right:12vw;bottom:14vh}.wish-orbits i:nth-child(3){width:12vw;height:12vw;left:52vw;top:14vh;background:radial-gradient(circle,#F8FFFF,transparent 68%)}

.aero-scene .dew-pane,.aero-scene .sticker-note,.aero-scene .sticker-sheet,.aero-scene .plant-orb,.aero-scene .bubble-cluster,.aero-scene .sun-medallion{opacity:.35;transform:translateY(36px) scale(.98);transition:opacity .85s ease,transform .85s cubic-bezier(.2,1,.2,1)}.aero-scene.active .dew-pane,.aero-scene.active .sticker-note,.aero-scene.active .sticker-sheet,.aero-scene.active .plant-orb,.aero-scene.active .bubble-cluster,.aero-scene.active .sun-medallion{opacity:1;transform:translateY(0) scale(1)}.aero-scene.active .floating-pane{transform:rotate(-2deg)}.aero-scene.active .sticker-note{transform:rotate(-7deg)}

@media (max-width:800px){.aero-scene{padding:9vh 22px;align-items:flex-start}.dew-pane{padding:34px 24px;border-radius:34px;margin:8vh 0 0!important}h1,h2{font-size:clamp(48px,18vw,72px)}.day-markers{right:8px;gap:6px}.marker{width:56px;font-size:10px;padding:8px}.time-charm{width:138px;height:112px;left:18px}.chika-spark{left:128px}.calendar-charm,.plant-orb,.sticker-sheet,.bubble-cluster,.sun-medallion{opacity:.35;transform:scale(.75);right:auto;left:44vw}.weather-stickers,.ribbon-tab,.chrome-rail{display:none}}