/* A little movement, like a paper postcard on a sunny desk. */
body{isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 7% 12%,#b4d9cb36 0,transparent 36%),radial-gradient(ellipse at 97% 41%,#e9c59730 0,transparent 35%),radial-gradient(ellipse at 13% 88%,#b9c8dc22 0,transparent 30%),linear-gradient(#a4b7a50a 1px,transparent 1px),linear-gradient(90deg,#a4b7a50a 1px,transparent 1px);background-size:auto,auto,auto,32px 32px,32px 32px}
.ambient-stars{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;color:#90af9a}
.ambient-star{position:absolute;left:var(--star-x);top:var(--star-y);font-family:Georgia,serif;font-size:var(--star-size,18px);opacity:.27;line-height:1}
.ambient-star:nth-child(3n){color:#bf9168}.ambient-star:nth-child(4n){color:#9eabc2}
.hero-art{translate:var(--drift-x,0px) var(--drift-y,0px)}
.hero-copy .title-phrase{display:inline-block}
.mint-word::after{transform-origin:left center}
.motion-ready[data-motion="on"] .hero-copy .eyebrow{animation:mail-arrive .75s .08s both}
.motion-ready[data-motion="on"] .hero-copy .hand-note{animation:note-arrive .8s .18s both}
.motion-ready[data-motion="on"] .hero-copy .title-phrase{animation:ink-arrive .85s both;animation-delay:calc(.25s + var(--intro-i,0)*.12s)}
.motion-ready[data-motion="on"] .mint-word::after{animation:draw-underline .8s .85s both}
.motion-ready[data-motion="on"] .hero-description{animation:mail-arrive .85s .55s both}
.motion-ready[data-motion="on"] .hero-actions{animation:mail-arrive .85s .7s both}
.motion-ready[data-motion="on"] .postscript{animation:mail-arrive .8s .82s both}
.motion-ready[data-motion="on"] .hero-art{animation:paper-float 7s 1.2s ease-in-out infinite}
.motion-ready[data-motion="on"] :is(.spark,.tiny-star,.doodle-star,.record-star,.closing>span){animation:gentle-twinkle 4.8s ease-in-out infinite}
.motion-ready[data-motion="on"] .tiny-star{animation-delay:-2.4s}
.motion-ready[data-motion="on"] .doodle-star{animation-delay:-1.4s}
.motion-ready[data-motion="on"] .record-star{animation-delay:-3.2s}
.motion-ready[data-motion="on"] .ambient-star{animation:star-drift 9s ease-in-out infinite;animation-delay:var(--star-delay,0s)}
.motion-ready[data-motion="on"] .hero-mini-sticker{animation:sticker-sway 8s ease-in-out infinite}
.reveal-target{transition:opacity .8s ease,translate .8s cubic-bezier(.2,.7,.2,1)}
.motion-ready[data-motion="on"] .reveal-target.reveal-pending{opacity:0;translate:0 20px}
.motion-ready[data-motion="on"] .reveal-target.reveal-seen{opacity:1;translate:0 0}
.letter-paper{transform-origin:15% 40%;backface-visibility:hidden}
.motion-ready[data-motion="on"] .letter-paper.letter-turn{animation:letter-turn .6s cubic-bezier(.2,.65,.2,1) both}
.motion-ready[data-motion="on"] .letter-paper.letter-turn .letter-body>div{animation:letter-ink .6s both}
.motion-ready[data-motion="on"] .letter-paper.letter-turn #letter-image{animation:photo-arrive .65s both}
.blessing-tab{transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
.blessing-tab:hover{transform:translateY(-4px) rotate(-2deg);box-shadow:3px 6px 0 #829c7c16}
.blessing-tab:active{transform:translateY(1px) rotate(-1deg)}
.hero-mini-sticker{position:absolute;left:-25px;top:12%;width:83px;height:83px;object-fit:cover;border:5px solid #fffdf7;border-radius:50%;box-shadow:2px 5px 10px #3957471c;z-index:4;rotate:-10deg}
.section-doodle{width:58px;height:58px;object-fit:contain;vertical-align:middle;margin-left:12px;rotate:7deg}
.miku-strip{max-width:1080px;margin:36px auto 12px;padding:20px 24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:27px;position:relative}
.miku-strip::before{content:"";position:absolute;left:3%;right:3%;top:20px;border-top:1px dashed #b6c1aa;rotate:-1deg;z-index:-1}
.miku-strip figure{--photo-angle:-4deg;margin:0;padding:9px 9px 0;background:#fffdf7;border:1px solid #dfdfd0;box-shadow:3px 5px 0 #ccd6c025;transform:rotate(var(--photo-angle));transition:transform .35s ease,box-shadow .35s ease;position:relative;min-width:0}
.miku-strip figure:nth-child(2){--photo-angle:3deg;margin-top:14px}.miku-strip figure:nth-child(3){--photo-angle:-2deg}.miku-strip figure:nth-child(4){--photo-angle:5deg;margin-top:10px}
.miku-strip figure::before{content:"";position:absolute;left:35%;top:-9px;width:35%;height:19px;background:#c4d5b8aa;rotate:-7deg;z-index:1;clip-path:polygon(2% 0,100% 4%,97% 100%,0 95%)}
.miku-strip figure:nth-child(2)::before{background:#e5c8ae99;rotate:5deg}.miku-strip figure:nth-child(4)::before{background:#c6cce4aa}
.miku-strip img{display:block;width:100%;height:auto;aspect-ratio:1.24;object-fit:cover}
.miku-strip figcaption{padding:12px 3px 13px;text-align:center;font-family:var(--serif);font-size:16px;line-height:1.5;color:#6f806e}
@media(hover:hover) and (pointer:fine){.miku-strip figure:hover{transform:translateY(-7px) rotate(0deg);box-shadow:4px 10px 20px #53674a14}.miku-strip figure:hover::before{opacity:.8}}
#motion-toggle{font-size:11px;min-height:36px;padding:8px 12px;border:1px dashed #9eaf97;border-radius:20px;white-space:nowrap;color:#607863;background:#f6f3e9cc}
#motion-toggle[aria-pressed="false"]{background:#ebece2;color:#777e70}
#motion-toggle:disabled{opacity:.8;cursor:default}
html[data-page-paused="true"] *,html[data-page-paused="true"] *::before,html[data-page-paused="true"] *::after{animation-play-state:paused!important}
body.is-study-quiet .hero-art,body.is-study-quiet .ambient-star,body.is-study-quiet :is(.spark,.tiny-star,.doodle-star,.record-star,.closing>span,.hero-mini-sticker),body.focus-on .ambient-star{animation-play-state:paused!important}
body.is-study-quiet .ambient-stars{opacity:.2}
html[data-motion="off"]{scroll-behavior:auto}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important}
html[data-motion="off"] .reveal-target{opacity:1!important;translate:none!important}
html[data-motion="off"] .hero-art{translate:none!important}
html[data-motion="off"] .meteor{display:none}
@keyframes mail-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes note-arrive{from{opacity:0;translate:-9px 6px}to{opacity:1;translate:0 0}}
@keyframes ink-arrive{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}
@keyframes draw-underline{from{transform:rotate(-2deg) scaleX(0)}to{transform:rotate(-2deg) scaleX(1)}}
@keyframes paper-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-.35deg)}}
@keyframes gentle-twinkle{0%,100%{opacity:.75}50%{opacity:.35}}
@keyframes star-drift{0%,100%{translate:0 0;opacity:.21}50%{translate:3px -9px;opacity:.4}}
@keyframes sticker-sway{0%,100%{rotate:-10deg}50%{rotate:-4deg}}
@keyframes letter-turn{0%{transform:perspective(900px) rotateY(-4deg) rotateZ(-.4deg)}45%{transform:perspective(900px) rotateY(1deg) rotateZ(.2deg)}100%{transform:perspective(900px) rotateY(0) rotateZ(0)}}
@keyframes letter-ink{from{opacity:.2;translate:0 7px}to{opacity:1;translate:0 0}}
@keyframes photo-arrive{from{opacity:.15;transform:translateY(9px) rotate(2deg)}to{opacity:1;transform:translateY(0) rotate(6deg)}}
@media(max-width:900px){.miku-strip{gap:18px;margin-top:26px}.miku-strip figcaption{font-size:14px}.hero-mini-sticker{width:68px;height:68px;left:-20px}.section-doodle{width:48px;height:48px}}
@media(max-width:620px){.ambient-star:nth-child(n+5){display:none}.miku-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 22px;margin:12px 5% 6px;padding:22px 12px}.miku-strip figure{padding:7px 7px 0}.miku-strip img{aspect-ratio:1.25}.miku-strip figcaption{font-size:14px;padding:10px 0}.miku-strip figure:nth-child(3){margin-top:0}.miku-strip figure:nth-child(4){margin-top:10px}.hero-mini-sticker{width:66px;height:66px;top:13%;left:-23px}.section-doodle{width:44px;height:44px;margin-left:6px}.reveal-target{transition-duration:.6s}#motion-toggle{font-size:10px;min-height:36px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal-target{opacity:1!important;translate:none!important}.hero-art{translate:none!important}*,*::before,*::after{animation:none!important;transition:none!important}.meteor{display:none}}