:root{--bg:#FFF5EC;--fg:#3D2518;--muted:#77594A;--line:#F1DCCB;--card:#FFFFFF;--tint:#FDE6D3;--accent:#B42F49;--btn:#3D2518;--on-btn:#FFF5EC;--bezel:#33271F;
--c1:#F25C78;--c2:#FFB627;--c3:#3FA7F5;--c4:#43B967;--c5:#9B6BE0;--c6:#FF7A3D;--paper:#FFFDF6;
--font:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN","Apple SD Gothic Neo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#1D1512;--fg:#FBEEE3;--muted:#CDB6A7;--line:#3A2B23;--card:#271D18;--tint:#2B201A;--accent:#FF9BAE;--btn:#FBEEE3;--on-btn:#1D1512;--bezel:#0F0B09;--paper:#262B3D}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:19px/1.6 var(--font)}
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3{word-break:auto-phrase}:lang(ko){word-break:keep-all}
/* Hiragino Maru Gothic has a single weight: bold Japanese text uses Hiragino Sans. */
:lang(ja) :is(h1,h2,h3,summary,.store,.facts,.brand,.again,figcaption){font-family:ui-rounded,"SF Pro Rounded","Hiragino Sans","Hiragino Kaku Gothic ProN",system-ui,sans-serif}
a{color:var(--accent);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
header.wrap{display:flex;align-items:center;justify-content:space-between;padding-top:22px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:23px;color:var(--fg);text-decoration:none;letter-spacing:-.01em}
.brand img{border-radius:11px}
.menu{display:flex;gap:22px;font-size:17px;font-weight:700}.menu a{color:var(--muted);text-decoration:none}
.menu a:hover,.menu a[aria-current]{color:var(--fg)}
h1 span{display:block}h1.long{font-size:clamp(40px,5.2vw,64px)}
:lang(ja) h1,:lang(ko) h1{font-size:clamp(38px,4.8vw,60px);line-height:1.18;letter-spacing:0}:lang(ja) h2,:lang(ko) h2{letter-spacing:0}
h1{font-size:clamp(44px,6vw,76px);line-height:.98;letter-spacing:-.035em;font-weight:800;margin:0 0 24px;text-wrap:balance}
h2{font-size:clamp(30px,4.2vw,42px);line-height:1.12;letter-spacing:-.02em;font-weight:800;margin:104px 0 14px;text-wrap:balance}
h3{font-size:21px;line-height:1.3;font-weight:800;margin:0 0 4px}
p{margin:0 0 14px}
.lead{font-size:clamp(20px,2.3vw,23px);line-height:1.5;color:var(--muted);max-width:31em}
.section-lead{color:var(--muted);max-width:36em;font-size:20px}
.store{display:inline-flex;align-items:center;gap:12px;margin-top:30px;padding:9px 26px 9px 9px;border-radius:999px;background:var(--btn);color:var(--on-btn);font-weight:800;font-size:19px;line-height:1.2;text-decoration:none;transition:transform .15s}
.store img{width:42px;height:42px;border-radius:11px;flex:none}
.store:hover{transform:translateY(-1px)}.store:active{transform:none}
/* Hero: the words, and a little Baby Art canvas you can draw on. */
.hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:56px;align-items:center;padding-top:40px}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:26px 0 0;font-weight:800;font-size:17px}
.facts li{display:flex;align-items:center;gap:9px}
.facts li::before{content:"";width:13px;height:13px;border-radius:52% 48% 55% 45%;background:var(--dot,var(--c1))}
.facts li:nth-child(2){--dot:var(--c2)}.facts li:nth-child(3){--dot:var(--c3)}.facts li:nth-child(4){--dot:var(--c4)}
.pad{position:relative;margin:0}
.device{position:relative;aspect-ratio:4/3;padding:14px;border-radius:36px;background:var(--bezel);box-shadow:0 34px 60px -30px rgba(61,37,24,.55),0 2px 0 rgba(255,255,255,.08) inset}
.screen{position:relative;height:100%;border-radius:22px;overflow:hidden;background:var(--paper);transition:background-color .45s}
.screen svg,.screen canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.screen canvas{touch-action:none;cursor:crosshair}
.screen.clean .seed{display:none}
.seed path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s cubic-bezier(.45,0,.3,1) forwards}
.seed path:nth-child(2){animation-delay:.55s}.seed path:nth-child(3){animation-delay:1.05s}.seed path:nth-child(4){animation-delay:1.5s}
.seed path:nth-child(5){animation-delay:1.95s;animation-duration:.2s}.seed path:nth-child(6){animation-delay:2.1s;animation-duration:.2s}
.seed path:nth-child(7){animation-delay:2.25s;animation-duration:.2s}.seed path:nth-child(8){animation-delay:2.4s}
@keyframes draw{to{stroke-dashoffset:0}}
.sticker{position:absolute;z-index:2;left:-22px;top:-30px;width:92px;height:92px;border-radius:50%;border:5px solid #fff;transform:rotate(-9deg);box-shadow:0 10px 24px -8px rgba(61,37,24,.45)}
.pad figcaption{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;color:var(--muted);font-weight:700;font-size:16px;line-height:1.4}
.again{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--fg);font:inherit;font-weight:800;cursor:pointer}
.again svg{width:18px;height:18px}
.again:hover{border-color:var(--muted)}
/* Screens from the app. */
.shots{display:flex;gap:22px;align-items:flex-start;justify-content:safe center;margin:28px 0 0;padding-bottom:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shots figure{flex:none;width:min-content;margin:0;scroll-snap-align:center;text-align:center}
.shots img{display:block;height:430px;width:auto;border:8px solid var(--bezel);border-radius:30px;background:var(--bezel)}
.shots .ipad img{border-width:11px;border-radius:26px}
.shots .framed img{border:0;border-radius:18px;background:none}
.shots figcaption{margin-top:12px;font-weight:800;font-size:16px;line-height:1.35}
/* Why parents like it: a list with a crayon mark per item. */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 56px;list-style:none;padding:0;margin:34px 0 0}
.why li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:18px;align-content:start}
.why .mark{grid-row:span 2;width:34px;height:34px;margin-top:-1px;color:var(--dot,var(--c1))}
.why p{margin:0;color:var(--muted)}
.why li:nth-child(6n+2){--dot:var(--c2)}.why li:nth-child(6n+3){--dot:var(--c3)}.why li:nth-child(6n+4){--dot:var(--c4)}
.why li:nth-child(6n+5){--dot:var(--c5)}.why li:nth-child(6n){--dot:var(--c6)}
/* The way out: three steps, numbers circled in crayon. */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px;list-style:none;padding:0;margin:34px 0 0;counter-reset:step}
.steps li{position:relative;padding-top:74px;counter-increment:step}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:58px;height:58px;display:grid;place-items:center;font-weight:800;font-size:26px}
.steps .ring{position:absolute;left:-4px;top:-4px;width:66px;height:66px;color:var(--dot,var(--c1))}
.steps li:nth-child(2){--dot:var(--c3)}.steps li:nth-child(3){--dot:var(--c4)}
.steps p{margin:0;color:var(--muted)}
/* Guided Access: a note for grown-ups. */
.guided{margin-top:104px;padding:clamp(28px,4.5vw,52px);border-radius:36px;background:var(--tint)}
.guided h2{margin-top:0}
.guided ol{margin:22px 0 0;padding-left:1.3em;max-width:40em}
.guided li{margin:0 0 12px;padding-left:8px}.guided li::marker{font-weight:800;color:var(--accent)}
.free p{max-width:38em}
main details{border-bottom:2px solid var(--line);padding:16px 0}main details:first-of-type{border-top:2px solid var(--line);margin-top:26px}
main summary{display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:800;cursor:pointer;font-size:20px;line-height:1.35;list-style:none}
main summary::-webkit-details-marker{display:none}
main summary::after{content:"";flex:none;width:12px;height:12px;margin-right:6px;border-right:3px solid var(--muted);border-bottom:3px solid var(--muted);border-radius:2px;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
main details[open] summary::after{transform:translateY(3px) rotate(225deg)}
main details p{margin:10px 0 4px;color:var(--muted);max-width:40em}
.more{margin-top:22px}
.cta{margin-top:104px;text-align:center}.cta h2{margin:0 0 10px}.cta p{color:var(--muted)}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.prose{max-width:46em}.prose h1{font-size:clamp(38px,6vw,64px);margin-top:36px}
.prose h2{font-size:26px;margin:44px 0 8px}.prose h3{font-size:21px;margin:34px 0 6px}
.prose p{color:var(--fg)}
@media (prefers-reduced-motion:reduce){.seed path{animation:none;stroke-dashoffset:0}.store,.screen,main summary::after{transition:none}}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:56px;padding-top:24px}.pad{max-width:560px;width:100%;justify-self:center}
.why,.steps{grid-template-columns:1fr}.steps li{padding-top:0;padding-left:84px;min-height:66px}
.shots{justify-content:flex-start;margin-left:-28px;margin-right:-28px;padding-left:28px;padding-right:28px}.shots img{height:380px}}
@media (max-width:520px){.wrap{padding:0 16px}body{font-size:18px}h2{margin-top:80px}.guided,.cta{margin-top:80px}
.sticker{width:68px;height:68px;left:-6px;top:-24px;border-width:4px}.device{padding:10px;border-radius:28px}.screen{border-radius:18px}
.pad figcaption{font-size:15px}.store{font-size:18px}.shots{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.shots img{height:340px}
.menu{gap:16px}.brand{font-size:21px}}
/* Shared footer, layout B. */
.site-footer{margin-top:96px;padding-top:40px;padding-bottom:40px;border-top:2px solid var(--line);color:var(--muted);font-size:15px;line-height:1.5}
.site-footer p{margin:0}
.footer-id a,.footer-links a{color:inherit;text-decoration:none}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px 40px;flex-wrap:wrap}
.footer-id{display:grid;gap:6px;max-width:420px}
.footer-brand{display:inline-flex;align-items:center;gap:8px;justify-self:start;font-weight:700;font-size:16px;margin-bottom:4px}
.footer-brand img{width:20px;height:20px;border-radius:5px;box-shadow:0 0 0 1px var(--line);filter:grayscale(1);opacity:.5;transition:filter .2s,opacity .2s}
.footer-brand:hover img{filter:none;opacity:1}
.footer-made a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.footer-made a:hover,.footer-made a:focus-visible{color:var(--fg);text-decoration-color:currentColor}
.footer-side{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-links a:hover,.footer-links a:focus-visible{color:var(--fg)}
/* Language: a pill in the footer that opens a card menu upwards. Plain links inside, so it works without JavaScript too. */
.language{position:relative;display:inline-block}
.language summary{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--fg);font-weight:700;font-size:15px;line-height:1;font-family:inherit;list-style:none;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .2s}
.language summary::-webkit-details-marker{display:none}
.language summary:hover,.language[open] summary{background:var(--line)}
.language summary svg{width:18px;height:18px;flex:none;color:var(--muted)}
.language summary .chevron{width:14px;height:14px;margin-left:2px;transition:transform .2s}
.language[open] summary .chevron{transform:rotate(180deg)}
.language ul{position:absolute;top:auto;right:0;left:auto;bottom:calc(100% + 10px);z-index:5;transform-origin:bottom right;min-width:220px;margin:0;padding:6px;list-style:none;display:grid;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px -18px rgba(61,37,24,.35),0 6px 18px rgba(61,37,24,.1)}
.language[open] ul{animation:language-in .16s cubic-bezier(.2,.8,.2,1)}
@keyframes language-in{from{opacity:0;transform:translateY(6px) scale(.98)}}
.language a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 14px;border-radius:14px;color:var(--fg);font-size:16px;line-height:1.4;text-decoration:none}
.language a:hover,.language a:focus-visible{background:var(--bg);outline:none}
.language a[aria-current]{font-weight:800}
.language a svg{width:18px;height:18px;flex:none;color:var(--accent)}
@media (prefers-reduced-motion:reduce){.language[open] ul{animation:none}.language summary .chevron{transition:none}}
@media (max-width:760px){.footer-side{align-items:flex-start}.site-footer .language ul{right:auto;left:0;transform-origin:bottom left}}