:root{--ink:#232837;--muted:#555c6c;--blue:#344cba;--paper:#faf9f6}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 'Segoe UI',sans-serif}a{color:inherit;text-underline-offset:5px}a:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.wrap{max-width:1168px;margin:auto;padding:0 24px}.chooser{display:flex;justify-content:center;align-items:center;gap:12px;padding:12px;background:#232837;color:white;flex-wrap:wrap;font-size:13px}.chooser span{font-size:10px;letter-spacing:.13em;margin-right:14px}.chooser a{padding:7px 14px;text-decoration:none;border:1px solid #707683;border-radius:5px}.chooser a[aria-current]{background:white;color:#232837}header{display:flex;align-items:center;justify-content:space-between;padding:28px 0;border-bottom:1px solid #dddfdf;gap:16px}header>a:last-child{font-size:14px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:19px;font-weight:650}.brand img{border-radius:12px}.hero{display:grid;grid-template-columns:1.35fr 1fr;align-items:center;gap:64px;padding:72px 0 80px}.eyebrow{font-size:11px;font-weight:650;letter-spacing:.13em;color:var(--muted);margin:0 0 24px}h1{font:normal clamp(44px,5.3vw,74px)/1.04 Georgia,serif;letter-spacing:-.055em;margin:0}h1 em{font-weight:normal;color:var(--blue)}.description{color:var(--muted);margin:26px 0}.button{display:inline-flex;align-items:center;gap:30px;min-height:48px;background:var(--ink);color:white;padding:12px 22px;border-radius:8px;text-decoration:none;font-size:14px}.button:hover{background:var(--blue)}.mascot{width:100%;height:auto;border-radius:28%;max-width:330px;justify-self:center}.section-title{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #dddfdf;padding:28px 0;gap:16px}.section-title h2{font:normal 27px Georgia,serif;margin:0}.section-title span{font-size:10px;letter-spacing:.14em;color:var(--muted)}.feature{display:grid;grid-template-columns:1fr 1fr;background:#eaf0ed;border-radius:20px;overflow:hidden}.app-copy{padding:48px}.app-icon{border-radius:16px;margin-bottom:24px}.app-copy .eyebrow{margin-bottom:8px}h3{font:normal 40px/1.15 Georgia,serif;margin:0 0 16px;letter-spacing:-.035em}.app-copy p:not(.eyebrow){max-width:32ch;color:var(--muted)}.text-link{display:inline-block;padding:12px 0;font-size:15px;font-weight:600}.screen-stage{height:380px;overflow:hidden;padding-top:32px;display:flex;justify-content:center;background:#d8e5df}.screen-stage img{width:210px;height:auto;align-self:flex-start;border:5px solid white;border-radius:25px;box-shadow:0 15px 40px #253e3820}.diary{padding:36px 0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dddfdf;gap:24px}.diary h3{font-size:28px;margin:0}.diary p{color:var(--muted);margin-bottom:0}footer{display:flex;justify-content:space-between;padding:32px 0;font-size:12px;color:var(--muted);gap:20px}body[data-view=a] .hero{min-height:620px;grid-template-columns:1.5fr 1fr}body[data-view=a] h1{font-size:clamp(48px,6.2vw,88px)}body[data-view=a] .mascot{max-width:390px}body[data-view=b] .hero{padding:36px 0;grid-template-columns:1fr 100px;gap:24px}body[data-view=b] h1{font-size:40px}body[data-view=b] .desktop{display:none}body[data-view=b] .eyebrow{display:none}body[data-view=b] .description{margin:16px 0}body[data-view=b] .feature{grid-template-columns:1fr 240px}body[data-view=b] .screen-stage{height:320px}body[data-view=b] .app-copy{padding:28px}body[data-view=b] .app-icon{float:left;margin:0 24px 64px 0}body[data-view=b] .mascot{border-radius:24px}@media(max-width:700px){.chooser{gap:6px}.chooser span{width:100%;text-align:center;margin:0}.chooser a{font-size:11px;padding:6px 10px}.brand{font-size:16px}.brand img{width:34px;height:34px}header{padding:20px 0}.hero,body[data-view=a] .hero{grid-template-columns:1fr;gap:28px;padding:40px 0;min-height:0}.mascot{width:160px;grid-row:1;justify-self:start}h1,body[data-view=a] h1{font-size:48px}.eyebrow{margin-bottom:18px}.desktop{display:none}.section-title{align-items:flex-start}.section-title h2{font-size:24px}.section-title span{display:none}.feature,body[data-view=b] .feature{grid-template-columns:1fr}.app-copy{padding:28px}.screen-stage{height:290px}.diary,footer{align-items:flex-start;flex-direction:column;gap:12px}.diary h3{font-size:28px}body[data-view=b] .hero{grid-template-columns:1fr}body[data-view=b] .mascot{width:70px}body[data-view=b] h1{font-size:38px}body[data-view=b] .app-icon{float:none;margin:0 0 16px}body[data-view=b] .screen-stage{height:260px}}