:root{--ink:#554335;--muted:#807268;--paper:#fffdf8;--pink:#e7ada4;--blue:#c5d4df;--yellow:#f4d792}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid #9e6858;outline-offset:5px}
svg{display:block}
p{line-height:2}
h1,h2,h3,p,figure{margin:0}
h2{font-size:28px;letter-spacing:.06em;line-height:1.8}
.wrap{width:min(1100px,calc(100% - 64px));margin:auto}
.svg-defs{position:absolute;width:0;height:0}
.header{height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;font-weight:700;gap:10px;font-size:15px}
.brand-icon{display:block;flex-shrink:0;width:32px;height:32px;border-radius:7px;object-fit:cover}
.header nav{display:flex;gap:28px;font-size:12px}
.header-cta{font-size:12px;border:1px solid #d9cbbf;padding:12px 18px;border-radius:30px}
.header-cta span{margin-left:12px}
.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;min-height:670px;gap:35px;padding:35px 0 85px}
.little-tag{font-size:12px;letter-spacing:.12em;display:inline-block;border-bottom:1px solid #ddbd8c;padding-bottom:8px;margin-bottom:26px}
h1{font-size:clamp(36px,4.5vw,55px);line-height:1.6;letter-spacing:.06em;font-weight:800;white-space:nowrap}
.pop{position:relative}
.pop:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:12px;background:#f8e4a7;z-index:-1;border-radius:60%}
.period{color:#d49a8b}
.hero-copy>p{font-size:14px;margin:25px 0 28px}
.button{border:0;background:#655041;color:white;border-radius:100px;padding:17px 26px;display:inline-flex;align-items:center;justify-content:center;gap:15px;font-size:14px;box-shadow:0 5px 0 #e8dfd5;transition:transform .2s,background .2s}
.button:hover{background:#806451;transform:translateY(-2px)}
.button svg{width:23px;height:23px}
.hero-note{font-size:11px;margin-top:20px;letter-spacing:.07em;color:var(--muted)}
.hero-art{position:relative;width:100%;height:520px;display:flex;align-items:center;justify-content:center}
.big-circle{position:absolute;width:440px;height:440px;border-radius:50%;background:#f8eae0;left:5%;top:40px}
.photo-back{position:absolute;width:320px;height:425px;border-radius:4px;background:#dfe8ec;transform:rotate(8deg);left:18%;top:55px}
.polaroid{position:relative;width:320px;padding:13px 13px 20px;background:#fff;transform:rotate(-6deg);box-shadow:0 12px 30px #6f53411a}
.photo-window{position:relative;overflow:hidden;aspect-ratio:485/638;background:#eee5d9}
.photo-window img{position:absolute;width:146.186%;max-width:none;left:-23.093%;top:-78.84%}
.polaroid figcaption{text-align:center;font-size:13px;letter-spacing:.15em;padding-top:19px}
.tape{position:absolute;z-index:2;top:-17px;left:33%;width:110px;height:33px;background:repeating-linear-gradient(90deg,#efd3acb8 0 4px,#f6dfbcb8 4px 8px);transform:rotate(4deg);clip-path:polygon(2% 0,98% 0,96% 10%,100% 20%,97% 35%,100% 50%,97% 65%,100% 80%,97% 100%,0 100%,3% 83%,0 67%,3% 50%,0 30%)}
.flower{width:85px;height:85px;color:#f2e3cc}
.hero-flower{position:absolute;right:-4px;top:12px;z-index:3;color:#c6d5df;transform:rotate(15deg)}
.scribble{position:absolute;top:0;left:10px;color:#e6bb6e;font-size:65px;transform:rotate(-12deg)}
.round-label{position:absolute;right:-8px;bottom:40px;background:#f6db93;width:115px;height:115px;border:5px solid var(--paper);outline:1px dashed #e7c984;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(10deg);font-size:13px;line-height:1.8;letter-spacing:.07em}
.round-label strong{font-size:14px}
.dots{position:absolute;bottom:13px;left:30px;color:#dba69b;font-size:40px;letter-spacing:8px;transform:rotate(-15deg)}
.scallop{height:20px;background:radial-gradient(circle at 10px 0,transparent 10px,#f8f3e9 11px) repeat-x;background-size:20px 20px}
.features{background:#f8f3e9;padding:50px 0 75px}
.section-title{text-align:center;margin-bottom:44px}
.tiny-flower{color:#c3917c;font-size:30px;display:block;margin-bottom:4px}
.section-title p{font-size:12px;color:var(--muted);margin-top:10px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature{position:relative;padding:26px 28px 32px;border-radius:90px 90px 12px 12px;text-align:center}
.peach{background:#f5e3dc}
.blue{background:#e5edf1}
.yellow{background:#f7edcd}
.number{display:block;font-family:Georgia,serif;font-style:italic;font-size:16px;margin:8px 0 15px;color:#a5816f}
.feature h3{font-size:17px;line-height:1.8;letter-spacing:.03em}
.feature p{text-align:left;font-size:13px;margin-top:16px}
.feature-drawing{height:100px;width:110px;margin:0 auto;position:relative}
.calendar{height:80px;width:76px;margin-top:10px;margin-bottom:10px;background:#fffaf3;border-radius:8px;transform:rotate(-7deg);box-shadow:3px 4px 0 #c8aa9a40}
.calendar-top{height:20px;background:#d6a298;border-radius:8px 8px 0 0;border-bottom:3px dotted #f6dfd6}
.calendar>span{font-family:Georgia,serif;font-size:35px;line-height:1.6}
.calendar small{font-family:sans-serif;font-size:10px;margin-left:3px}
.spark{position:absolute;right:-27px;top:15px;font-size:35px;color:#d6a767}
.stickers .flower{width:60px;height:60px;position:absolute;left:0;bottom:0;color:#fffaf1;transform:rotate(-20deg)}
.star-face{font-size:82px;line-height:1;position:absolute;right:0;top:0;color:#e8c06f;transform:rotate(12deg);text-shadow:3px 2px white}
.heart{position:absolute;font-size:37px;color:#dca6a0;bottom:0;right:0;transform:rotate(-12deg)}
.bell svg{height:100px;width:100px}
.story{padding:110px 0;display:grid;grid-template-columns:1fr 1.15fr;gap:75px}
.section-label{font-size:12px;letter-spacing:.12em;display:block;margin-bottom:16px;color:#927c6c}
.story h2{font-size:27px}
.story-copy{padding-top:8px}
.story-copy p{font-size:14px;line-height:2.25;margin-bottom:20px}
.signature{display:block;text-align:right;font-family:inherit;font-style:normal;font-size:14px;color:#927c6c}
.story-art{position:relative;margin:38px 0 0;max-width:340px}
.milestone{border:1px solid #dfd6c7;border-radius:50%;width:148px;height:148px;text-align:center;background:repeating-linear-gradient(0deg,#fff9ed 0 7px,#fcf5e8 7px 8px);transform:rotate(-8deg);display:flex;flex-direction:column;justify-content:center}
.milestone span{font-family:Georgia,serif;font-size:64px;color:#a98f73}
.milestone small{font-size:12px}
.story-art .flower{position:absolute;left:115px;top:90px;width:70px;color:#e5b4a9}
.story-art>p{position:relative;margin:15px 0 0 60px;font-size:12px;transform:rotate(-4deg)}
.story-art b{display:block;margin-left:95px;margin-top:12px;font-size:23px;color:#ae8071}
.screens-section{background:#eef3f4;padding:65px 0 45px;overflow:hidden}
.gallery-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}
.gallery-heading .section-label{margin-bottom:5px}
.gallery{display:flex;gap:23px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#b7c8ce transparent;padding:10px 5px 25px}
.screen{flex:0 0 240px;padding:0;border:6px solid white;background:white;border-radius:12px;overflow:hidden;box-shadow:0 5px 12px #4c656b10;scroll-snap-align:start;transition:transform .2s}
.screen img{display:block;width:100%;height:auto}
.gallery-hint{text-align:center;font-size:11px;color:#6d8087;margin-top:18px}
.gallery-hint span{margin:0 10px}
.download{position:relative;text-align:center;padding:85px 0 65px}
.download-icon{display:block;width:63px;height:63px;border-radius:14px;object-fit:cover;margin:0 auto 18px}
.download p{font-size:14px;margin:10px 0 27px}
.download-flower{position:absolute;left:16%;top:140px;width:75px;color:#e4b5a8;transform:rotate(20deg)}
.support{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:32px}
.support a{border:0;background:none;font-size:11px;color:#827164;padding:6px 0;border-bottom:1px solid #d8cabd}
.other{border-top:1px dashed #dbcebf;padding:35px 0 50px}
.other>h2{font-size:17px;margin-bottom:22px}
.other-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.other-grid a{display:flex;align-items:center;gap:12px}
.other-grid a>span:last-child{margin-left:auto}
.other h3{font-size:13px}
.other p{font-size:10px;color:var(--muted);margin-top:4px}
.other-app-icon{display:block;flex-shrink:0;width:45px;height:45px;border-radius:13px;object-fit:cover}
footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:24px 0;border-top:1px solid #e9e1d5;font-size:11px;color:#8e7d6e}
footer small{grid-column:2;grid-row:1;font-size:10px;text-align:center;white-space:nowrap}
footer>a{grid-column:3;grid-row:1;justify-self:end;white-space:nowrap}

@media(min-width:1250px){.hero-art{transform:translateX(5px)}
}
@media(max-width:900px){.header nav{display:none}
.hero{gap:10px}
.hero-art{transform:scale(.88);transform-origin:center}
.hero{grid-template-columns:1fr 1fr}
.feature-grid{gap:15px}
.feature{padding:25px 18px}
.story{gap:35px}
.story h2{font-size:23px}
.other-grid{gap:14px}
.other p{font-size:9px}
}
@media(max-width:640px){.wrap{width:calc(100% - 40px)}
.header{height:76px;gap:8px}
.brand{font-size:12px;gap:6px}
.brand-icon{width:27px;height:27px}
.header-cta{font-size:10px;padding:9px 11px}
.header-cta span{margin-left:4px}
.hero{display:flex;flex-direction:column;gap:16px;padding:27px 0 28px;min-height:auto}
.hero-copy{text-align:center;width:100%}
.little-tag{font-size:10px;margin-bottom:19px;letter-spacing:.1em}
h1{font-size:clamp(32px,8.9vw,43px);line-height:1.65;letter-spacing:.055em}
.hero-copy>p{font-size:12px;margin:18px 0 22px;line-height:2}
.button{font-size:12px;padding:14px 23px;gap:13px}
.hero-note{font-size:10px;margin-top:17px}
.hero-art{height:415px;transform:none;max-width:350px}
.big-circle{width:315px;height:315px;top:54px;left:50%;transform:translateX(-50%)}
.polaroid{width:240px;padding:10px 10px 16px}
.polaroid figcaption{font-size:10px;padding-top:15px}
.photo-back{width:240px;height:330px;left:18%;top:50px}
.hero-flower{width:63px;height:63px;right:3px;top:19px}
.scribble{left:5px;top:5px;font-size:47px}
.round-label{right:-1px;bottom:25px;width:88px;height:88px;font-size:10px}
.round-label strong{font-size:11px}
.dots{font-size:28px;left:12px;bottom:12px}
.tape{width:85px;height:26px;top:-12px}
.features{padding:35px 0 45px}
.section-title{margin-bottom:28px}
h2{font-size:24px}
.section-title p{font-size:11px}
.feature-grid{display:flex;flex-direction:column;gap:18px}
.feature{border-radius:22px;padding:24px 24px 24px 112px;text-align:left;min-height:212px}
.feature-drawing{position:absolute;left:18px;top:42px;width:77px;height:77px;transform:scale(.85)}
.calendar{width:69px;height:79px;left:21px;top:39px;transform:rotate(-8deg) scale(.85)}
.feature .number{font-size:14px;margin:0 0 7px}
.feature h3{font-size:16px;line-height:1.8}
.feature p{font-size:12px;line-height:1.9;margin-top:12px}
.stickers{left:15px}
.star-face{font-size:65px}
.stickers .flower{width:47px;height:47px}
.heart{font-size:28px}
.bell svg{width:80px;height:80px}
.story{display:block;padding:55px 0}
.story-heading{text-align:center}
.story h2{font-size:22px}
.story-art{margin:25px auto 35px;height:165px;max-width:310px;display:flex;align-items:center;gap:12px}
.milestone{width:122px;height:122px;flex-shrink:0}
.milestone span{font-size:53px}
.milestone small{font-size:10px}
.story-art .flower{width:51px;left:95px;top:103px}
.story-art>p{margin:0;font-size:10px;white-space:nowrap}
.story-art b{margin-left:20px;font-size:20px}
.story-copy{padding:0 7px}
.story-copy p{font-size:13px;line-height:2.2}
.signature{font-size:13px}
.screens-section{padding:40px 0 30px}
.section-label{font-size:11px}
.gallery-heading{gap:8px;margin-bottom:20px}
.gallery-heading h2{font-size:23px}
.screen{flex-basis:230px}
.gallery{gap:16px;margin-right:-20px;padding-right:20px}
.download{padding:55px 0 40px}
.download h2{font-size:22px}
.download-flower{left:0;top:68px;width:45px;height:45px}
.download p{font-size:12px}
.support{gap:15px}
.support a{font-size:10px}
.other{padding:28px 0 34px}
.other-grid{grid-template-columns:1fr;gap:23px}
.other h3{font-size:14px}
.other p{font-size:11px}
footer{font-size:9px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{transition:none!important}
}


/* Fixed navigation and matching section edge */
html{scroll-padding-top:112px}

.header-fixed{position:sticky;top:0;z-index:20;background:#fffdf8f5;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 #e9e1d580}



.scallop-blue{background-image:radial-gradient(circle at 10px 0,transparent 10px,#eef3f4 11px)}

@media(max-width:640px){html{scroll-padding-top:88px}
.header .brand{white-space:nowrap}
}

@media(max-width:350px){.header.wrap{width:calc(100% - 24px)}
.header .brand{font-size:11px;gap:4px}
.header .brand-icon{width:24px;height:24px}
}


/* Production links, release status, and keyboard navigation. */
.skip{position:fixed;top:-100px;left:12px;z-index:30;background:var(--paper);padding:12px 18px}

.skip:focus{top:12px}

.store-link{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:13px;line-height:1.6}
.store-link img{display:block;flex-shrink:0;width:auto;height:40px}

.header-store{flex-shrink:0;font-size:11px}
.download .store-link{flex-direction:column;gap:8px}

.gallery:focus-visible{outline:3px solid #9e6858;outline-offset:5px}

.screen{align-self:flex-start}

@media(max-width:640px){.header{height:76px;flex-wrap:nowrap;padding:0}.header .brand{flex-shrink:0}.store-link{font-size:11px;gap:10px}.header-store{gap:6px}html{scroll-padding-top:88px}
}
@media(max-width:350px){.header{gap:4px}.header .brand{font-size:10px}.header-store{font-size:9px;gap:4px}}


/* Fit the decorative hero circle within tablet columns. */
@media (min-width:641px) and (max-width:900px){.big-circle{width:100%;height:auto;aspect-ratio:1;left:0}}

@media (min-width:641px) and (max-width:900px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hero h1{font-size:clamp(28px,4.3vw,36px)}}
@media(max-width:360px){.hero h1{font-size:26px;letter-spacing:.035em}.hero-art{transform:scale(.85);transform-origin:center}.big-circle{width:100%;height:auto;aspect-ratio:1;left:50%}.photo-back{left:10%}}

@media (min-width:641px) and (max-width:900px){.photo-back{left:8%}}

@media(max-width:360px){.story-art{gap:8px}.milestone{width:112px;height:112px}.story-art>p{font-size:9px}}