:root{--paper:#f7f5ef;--ink:#26302c;--muted:#677069;--line:#d9ddd1;--lime:#d9ec9f;--lavender:#d5d4f2;--pink:#e8b9a5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}a:focus-visible{outline:3px solid #4d5cde;outline-offset:6px}p{line-height:1.95}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:700;letter-spacing:-.04em}h1{font-size:clamp(52px,7vw,98px);line-height:1.15}h2{font-size:clamp(27px,3.4vw,44px);line-height:1.5}h3{font-size:21px}.skip{position:absolute;left:16px;top:-80px;background:var(--ink);color:white;padding:12px;z-index:10}.skip:focus{top:12px}.header,.footer,.hero,.section{max-width:1240px;margin:auto}.header{height:112px;padding:0 48px;display:flex;align-items:center;justify-content:space-between}.logo{font-size:31px;letter-spacing:-1.8px;font-weight:800;display:inline-flex;align-items:center;gap:12px;line-height:1}.logo:hover{text-decoration:none}.logo-dot{color:#719447;margin-left:-12px}.brand-mark{width:44px;height:44px;border-radius:28%;display:block;flex-shrink:0;object-fit:cover}.header nav{display:flex;gap:30px;font-size:13px;font-weight:600}.hero{padding:56px 48px 94px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2.5px;line-height:1.5}.hero h1{margin:22px 0 26px}.hero h1 span{position:relative}.hero h1 span:after{content:"";position:absolute;left:2px;right:0;bottom:7px;height:13px;background:var(--lime);z-index:-1}.lead{font-size:17px;line-height:2.1}.release-note{display:flex;align-items:center;justify-content:center;gap:10px;width:fit-content;padding:15px 25px;margin-top:31px;border:1px solid #9ba28f;border-radius:100px;font-weight:600;font-size:14px;background:#f1f2e9}.status-dot{width:7px;height:7px;border-radius:50%;background:#65834c}.button{display:inline-flex;gap:20px;justify-content:center;align-items:center;background:var(--ink);color:var(--paper);border-radius:60px;min-height:54px;padding:16px 25px;font-size:15px;font-weight:600;margin:24px 0 12px}.button:hover{background:#3e4d42;text-decoration:none}.how{border-top:1px solid var(--line)}.section{padding:85px 48px}.section-heading{margin-bottom:38px}.section-heading .eyebrow{margin-bottom:16px}.steps{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.steps li{padding:24px 25px 30px;border-top:1px solid #a3aa99}.step-number{font:12px ui-monospace,monospace;color:var(--muted)}.step-art{height:128px;display:flex;align-items:center;justify-content:center;margin:10px 0 24px}.choices{display:grid;grid-template-columns:45px 45px;grid-template-rows:38px 38px;gap:7px;align-content:center}.choices span{border:1px solid #a1a0bf;border-radius:6px;display:grid;place-items:center;font-size:14px}.choices span:nth-child(3){background:var(--lavender);border-color:#74709a}.loop{font-size:94px;color:#9a6d57}.steps p{font-size:13px;color:var(--muted);margin-top:14px}.daily{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.daily .eyebrow{margin-bottom:22px}.daily p{font-size:15px}.daily .eyebrow{font-size:11px}.text-link{display:inline-block;font-size:14px;border-bottom:1px solid #a3aa99;padding-bottom:5px;margin-top:24px}.closing{padding:73px 24px;background:var(--lime);text-align:center}.closing h2{margin:20px 0}.closing .release-note{margin:26px auto 0;background:#eff4df}.footer{padding:50px 48px 28px;display:grid;grid-template-columns:1fr auto;align-items:start;gap:30px}.footer .logo{font-size:25px}.footer .brand-mark{width:36px;height:36px}.footer p{font-size:11px;color:var(--muted);margin-top:17px}.footer nav{display:flex;gap:24px;font-size:11px;padding-top:7px}.footer small{grid-column:1/-1;padding-top:28px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.article{max-width:850px;margin:0 auto;padding:64px 40px 95px;min-height:65vh}.article h1{font-size:clamp(33px,4vw,50px);line-height:1.5;margin:24px 0}.article h2{font-size:22px;margin-bottom:20px}.article section{margin-top:42px;padding-top:25px;border-top:1px solid var(--line)}.article p,.article li{font-size:15px;line-height:2;color:#465448}.article .eyebrow{font-size:11px}.article .article-lead{font-size:17px}.article li{margin-bottom:12px}.article .updated{font-size:12px;color:var(--muted)}.article .release-note{color:var(--ink)}.article p+ p{margin-top:18px}.article .button{color:var(--paper)}@media(max-width:760px){.header{height:86px;padding:0 24px}.logo{font-size:27px}.header nav{gap:18px;font-size:11px}.header nav a[href="/#how"]{display:none}.hero{padding:24px 24px 48px;grid-template-columns:1fr;gap:30px}.hero h1{font-size:clamp(56px,16vw,72px);margin:20px 0}.lead{font-size:15px}.hero-copy{padding-top:3px}.section{padding:58px 24px}.steps{grid-template-columns:1fr;gap:10px}.steps li{padding:25px 12px;display:grid;grid-template-columns:102px 1fr;column-gap:20px}.step-number{grid-column:1/-1;margin-bottom:10px}.step-art{grid-column:1;grid-row:2/4;height:102px;margin:0}.steps h3{font-size:18px;padding-top:14px}.steps p{font-size:12px;margin-top:8px}.choices{grid-template-columns:33px 33px;grid-template-rows:30px 30px}.loop{font-size:76px}.daily{grid-template-columns:1fr;gap:28px}.daily h2{font-size:32px}.closing{padding:52px 24px}.closing h2{font-size:25px}.footer{padding:38px 24px 24px;grid-template-columns:1fr;gap:26px}.footer nav{flex-wrap:wrap;gap:18px}.footer small{padding-top:22px}.article{padding:38px 24px 64px}.article h1{font-size:32px}.article h2{font-size:20px}.article p,.article li{font-size:14px}.article ul{padding-left:23px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* Keep the introduction compact and its destinations visible on small screens. */
#how,#faq{scroll-margin-top:24px}
.faq{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start}
.faq .section-heading{margin-bottom:0}
.faq-list{border-top:1px solid #a3aa99;min-width:0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:24px 28px 24px 0;position:relative;list-style:none;cursor:pointer;font-size:16px;font-weight:600;line-height:1.7}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:0;top:24px;font-size:22px;font-weight:400;line-height:1.2;color:var(--muted)}
.faq details[open] summary::after{content:'−'}
.faq summary:hover{color:#4e633b}
.faq summary:focus-visible{outline:3px solid #4d5cde;outline-offset:4px;border-radius:2px}
.faq details p{margin:0 0 24px;padding-right:24px;font-size:14px;line-height:2;color:#465448}
.faq-contact{margin-top:24px;font-size:13px;color:var(--muted)}
.faq-contact a{text-decoration:underline;text-underline-offset:4px;color:var(--ink)}
@media(max-width:760px){
  .header{height:76px;padding:0 20px}
  .hero{padding:24px 20px 36px;grid-template-columns:minmax(0,1fr) clamp(96px,28vw,180px);gap:18px 16px}
  .hero-copy{display:contents}
  .hero .eyebrow{grid-column:1/-1}
  .hero h1{grid-column:1;grid-row:2;font-size:clamp(38px,11vw,64px);margin:0;line-height:1.2}
  .hero h1 span:after{height:9px;bottom:4px}

  .hero .lead,.hero .release-note,.hero .button{grid-column:1/-1}
  .hero .lead{font-size:16px;line-height:1.85}
  .hero .release-note{margin:0;padding:12px 20px}
  .hero .button{margin:0;width:fit-content;max-width:100%}
  .how{padding-top:40px}
  .faq{grid-template-columns:1fr;gap:28px}
  .faq summary{font-size:15px;padding-top:21px;padding-bottom:21px}
  .faq summary::after{top:21px}
}

/* Lemupi appears around the page edges; the two brand marks stay unchanged. */
.keep-together{display:inline-block}
.mascot{display:block;width:100%;height:auto;object-fit:contain;pointer-events:none;user-select:none}
.hero-scene{position:relative;isolation:isolate;width:100%;max-width:500px;aspect-ratio:1;justify-self:center;align-self:center}
.hero-scene::before{content:"";position:absolute;inset:15% 3% 0 3%;background:#e5e1f2;border-radius:48% 48% 12% 12%;z-index:-1}
.hero-peek{position:absolute;inset:0 0 0;overflow:hidden;border-bottom:2px solid #a9a1be;border-radius:0 0 12% 12%}
.hero-mascot{position:absolute;width:100%;max-width:none;left:0;bottom:-16%;transform:rotate(-7deg);transition:transform .35s ease}
.scene-spark{position:absolute;color:#8c7eac;font-size:36px;line-height:1;pointer-events:none}
.scene-spark-one{left:1%;top:30%;transform:rotate(-12deg)}
.scene-spark-two{right:1%;bottom:22%;font-size:26px}
.mascot-observe{position:relative;isolation:isolate}
.observe-window{position:relative;width:152px;height:128px;overflow:hidden;background:#f0e1d6;border-radius:70px 70px 12px 12px;border-bottom:2px solid #c3a38c}
.observe-window .mascot{position:absolute;width:152px;max-width:none;left:0;bottom:-29px;transform:rotate(7deg)}
.discovery-mark{position:absolute;top:0;left:calc(50% + 63px);font-size:25px;font-weight:600;color:#9a6d57;transform:rotate(16deg)}
.faq-heading{position:relative}
.faq-companion{position:relative;width:230px;height:205px;margin-top:20px;overflow:hidden;border-bottom:1px solid var(--line)}
.faq-companion .mascot{position:absolute;width:220px;left:5px;bottom:-45px;transform:rotate(-8deg);transition:transform .35s ease}
.wonder-mark{position:absolute;z-index:1;right:10px;top:12px;color:#8c7eac;font-size:38px;transform:rotate(12deg);font-weight:500}
.closing{position:relative;margin-top:94px;padding-top:54px}
.closing-companion{position:absolute;left:50%;top:-110px;width:220px;height:122px;transform:translateX(-50%);clip-path:inset(-15px -110px 12px -20px)}
.closing-companion .mascot{position:absolute;width:205px;top:-4px;left:0;transform:rotate(8deg)}
.closing-greeting{position:absolute;left:168px;top:49px;width:max-content;font-size:12px;letter-spacing:.05em;transform:rotate(9deg);color:#58713d}
@media(max-width:760px){
  .hero-scene{grid-column:2;grid-row:2;width:100%;max-width:180px;align-self:center}
  .hero-scene::before{inset:8% 0 0}
  .hero-mascot{width:104%;left:-2%;bottom:-16%}
  .scene-spark{font-size:18px}
  .scene-spark-one{left:-4%;top:8%}
  .scene-spark-two{right:-3%;bottom:22%;font-size:14px}
  .observe-window{width:100px;height:98px;border-radius:50px 50px 10px 10px}
  .observe-window .mascot{width:104px;left:-2px;bottom:-18px}
  .discovery-mark{font-size:20px;left:auto;right:-5px;top:-9px}
  .faq-heading{padding-right:110px;min-height:155px;display:flex;flex-direction:column;justify-content:center}
  .faq h2{font-size:clamp(24px,5.7vw,32px)}
  .faq-companion{position:absolute;right:-4px;bottom:0;width:110px;height:130px;margin:0}
  .faq-companion .mascot{width:112px;left:-1px;bottom:-10px}
  .wonder-mark{font-size:25px;top:2px;right:7px}
  .closing{margin-top:76px;padding-top:35px}
  .closing h2{font-size:clamp(21px,6.4vw,25px)}
  .closing-companion{top:-91px;width:190px;height:103px}
  .closing-companion .mascot{width:175px}
  .closing-greeting{left:135px;top:34px;font-size:10px;transform:rotate(9deg)}
}
@media(prefers-reduced-motion:reduce){.hero-mascot,.faq-companion .mascot{transition:none}}

/* One-time entrances and deliberate responses: no idle/breathing loop. */
:where(.lemupi-play){appearance:none;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:inherit}
.lemupi-play{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;--pose:0deg}
.lemupi-play:disabled{cursor:default}
.lemupi-play:focus-visible{outline:3px solid #4d5cde;outline-offset:-4px}
.hero-peek{--pose:-7deg;--reaction-x:0%;--reaction-y:-3%;--reaction-turn:5deg}
.hero-peek[data-motion="right"]{--reaction-x:4%;--reaction-turn:12deg}
.hero-peek[data-motion="left"]{--reaction-x:-4%;--reaction-turn:-7deg}
.hero-peek[data-motion="lift"]{--reaction-y:-10%;--reaction-turn:1deg}
.observe-window{--pose:7deg}
.faq-companion{--pose:-8deg}
.closing-companion{--pose:8deg}
@media(prefers-reduced-motion:no-preference){
  .lemupi-play.is-waiting .mascot{translate:0 100%}
  .lemupi-play.is-peeking .mascot{animation:lemupi-peek .85s cubic-bezier(.22,.75,.25,1) both}
  .lemupi-play.is-reacting .mascot{animation:lemupi-curious 1.3s ease-in-out both}
  .lemupi-play.has-reaction.is-reacting .mascot{animation-name:lemupi-discover;animation-duration:1.9s}
  .faq-companion.is-reacting .mascot{animation:lemupi-question 1.3s ease-in-out both}
  .hero-peek[data-motion="nod"].has-reaction.is-reacting .mascot{animation-name:lemupi-discover-nod}
}
@keyframes lemupi-peek{
  0%{translate:0 100%}
  65%{translate:0 -5%}
  82%{translate:0 2%}
  100%{translate:0 0}
}
@keyframes lemupi-curious{
  0%,100%{transform:translateY(0) rotate(var(--pose))}
  28%{transform:translateY(-7%) rotate(calc(var(--pose) + 8deg))}
  58%{transform:translateY(-4%) rotate(calc(var(--pose) - 5deg))}
  80%{transform:translateY(-5%) rotate(calc(var(--pose) + 3deg))}
}
/* Change frames below the edge of the window, avoiding a visible body morph. */
@keyframes lemupi-discover{
  0%,100%{transform:translateY(0) rotate(var(--pose))}
  12%,16%,86%,89%{transform:translateY(105%) rotate(var(--pose))}
  28%,72%{transform:translate(var(--reaction-x),var(--reaction-y)) rotate(calc(var(--pose) + var(--reaction-turn)))}
}
/* The question is a single clockwise tilt and return, with no counter-sway. */
@keyframes lemupi-question{
  0%,100%{transform:rotate(var(--pose))}
  38%,60%{transform:rotate(calc(var(--pose) + 10deg))}
}
@keyframes lemupi-discover-nod{
  0%,100%{transform:translateY(0) rotate(var(--pose))}
  12%,16%,86%,89%{transform:translateY(105%) rotate(var(--pose))}
  28%,72%{transform:translateY(-3%) rotate(calc(var(--pose) + 3deg))}
  49%{transform:translateY(2%) rotate(calc(var(--pose) + 7deg))}
}
@media(prefers-reduced-motion:reduce){
  .lemupi-play .mascot,.lemupi-play .wonder-mark{animation:none!important;translate:none!important;transition:none}
}