:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--paper:#fbf9f6;--soft:#f4f1f8;--story:#faf5eb;--surface:#fff;--ink:#1c1824;--ink-2:#57515f;--ink-3:#7d7787;--line:#1c18241a;--accent:#9b70ce;--accent-ink:#7444b0;--accent-soft:#efe7fa;--rust:#a55638;--night:#1d1727;--display:ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--text:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Hiragino Sans", "Apple SD Gothic Neo", "Noto Sans JP", "Noto Sans KR", sans-serif;--spring:cubic-bezier(.22, 1.32, .42, 1);--ease:cubic-bezier(.25, .8, .25, 1);--shadow-lift:0 2px 4px #1c18240f, 0 24px 48px #2c184824}*,:before,:after{box-sizing:border-box}html{background:var(--paper);scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}body{background:var(--paper);color:var(--ink);font-family:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-size:17px;line-height:1.5;overflow-x:clip}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}ul,ol{margin:0;padding:0;list-style:none}h1,h2,h3,p,figure{margin:0}h1,h2{font-family:var(--display);letter-spacing:-.022em;text-wrap:balance;font-weight:600}h2{font-size:clamp(32px,4.2vw,52px);line-height:1.08}h3{font-family:var(--display);font-weight:600}p{text-wrap:pretty}:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 60%, transparent);outline-offset:3px;border-radius:10px}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.wrap{width:min(1120px,100% - 48px);margin-inline:auto}.lede{color:var(--ink-2);font-size:clamp(18px,1.6vw,20px);line-height:1.55}.lede a{color:var(--accent-ink);text-underline-offset:3px;text-decoration:underline}.fineprint{color:var(--ink-3);margin-top:24px;font-size:14px}.eyebrow{color:var(--accent-ink);margin-bottom:14px;font-size:15px;font-weight:600}.site-header{z-index:20;background:color-mix(in srgb, var(--paper) 80%, transparent);-webkit-backdrop-filter:saturate(1.6)blur(18px);backdrop-filter:saturate(1.6)blur(18px);border-bottom:1px solid var(--line);position:sticky;top:0}.nav{align-items:center;gap:32px;height:56px;display:flex}.brand{font-family:var(--display);align-items:center;gap:10px;font-size:18px;font-weight:600;display:inline-flex}.brand img{border-radius:7px;width:30px;height:30px;box-shadow:0 0 0 .5px #0000001f}.nav-links{color:var(--ink-2);gap:28px;margin-left:auto;font-size:14px;display:flex}.nav-links a:hover{color:var(--ink)}.nav>:last-child{flex-shrink:0}.brand+:last-child{margin-left:auto}.get-app{background:var(--ink);color:#fff;border-radius:999px;align-items:center;height:34px;padding:0 16px;font-size:14px;font-weight:600;display:inline-flex}.get-app-soon-small{color:var(--ink-3);font-size:14px}.get-app-soon-large{color:var(--ink-3);margin-top:28px;font-size:16px}.app-store-badge{margin-top:28px;display:inline-block}.app-store-badge img{width:150px;height:50px}.hero{padding:clamp(40px,7vw,88px) 0 clamp(80px,10vw,128px)}.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,72px);display:grid}.hero h1{letter-spacing:-.03em;font-size:clamp(44px,6vw,76px);line-height:1.04}.hero-line{color:var(--ink-3);display:block}.hero-language{color:var(--accent-ink);display:inline-block}[data-cycled] .hero-language{animation:language-in .6s var(--spring) both}@keyframes language-in{0%{opacity:0;transform:translateY(.3em)}}.hero-lede{max-width:30em;color:var(--ink-2);margin-top:28px;font-size:clamp(18px,1.6vw,20px);line-height:1.55}.hero-stage{aspect-ratio:1/1.08;width:min(480px,100%);margin-inline:auto;position:relative}.hero-shot{aspect-ratio:1;background:var(--tint);width:88%;transition:background-color .6s var(--ease);border-radius:40px;position:absolute;top:0;left:6%}[data-cycled] .hero-shot{animation:shot-in .5s var(--ease) both}@keyframes shot-in{0%{opacity:0;transform:scale(.96)}}.hero-photo,.hero-peel{width:100%;height:100%;position:absolute;inset:0}.hero-photo{border-radius:inherit;object-fit:cover;transition:opacity .5s var(--ease)}.hero-peel{opacity:0;transform-origin:50% 60%;filter:drop-shadow(0 14px 18px #2c184833);transition:opacity .2s linear, transform .75s var(--spring)}.viewfinder{opacity:0;transition:opacity .3s var(--ease), transform .5s var(--spring);position:absolute;inset:9%;transform:scale(1.1)}.viewfinder i{aspect-ratio:1;filter:drop-shadow(0 1px 3px #0003);border:0 solid #fff;width:18%;position:absolute}.viewfinder i:first-child{border-width:4px 0 0 4px;border-top-left-radius:22px;top:0;left:0}.viewfinder i:nth-child(2){border-width:4px 4px 0 0;border-top-right-radius:22px;top:0;right:0}.viewfinder i:nth-child(3){border-width:0 0 4px 4px;border-bottom-left-radius:22px;bottom:0;left:0}.viewfinder i:nth-child(4){border-width:0 4px 4px 0;border-bottom-right-radius:22px;bottom:0;right:0}.hero-stage[data-phase=focus] .viewfinder{opacity:1;transform:scale(1)}.hero-stage:is([data-phase=peel],[data-phase=word]) .hero-shot{background:color-mix(in srgb, var(--tint) 55%, #fff)}.hero-stage:is([data-phase=peel],[data-phase=word]) .hero-photo{opacity:0}.hero-stage:is([data-phase=peel],[data-phase=word]) .hero-peel{opacity:1;transform:translateY(-5%)rotate(-4deg)scale(.96)}.hero-word{background:var(--surface);min-width:56%;max-width:92%;box-shadow:var(--shadow-lift);opacity:0;transition:opacity .3s var(--ease), transform .55s var(--spring);border-radius:22px;grid-template-columns:auto 44px;align-items:center;column-gap:20px;padding:12px 12px 12px 20px;display:grid;position:absolute;bottom:7%;left:50%;transform:translate(-50%,16px)}.hero-stage[data-phase=word] .hero-word{opacity:1;transform:translate(-50%)}.hero-word-language{color:var(--ink-3);grid-column:1;font-size:13px}.hero-word-text{font-family:var(--display);grid-column:1;font-size:clamp(26px,3vw,34px);font-weight:600;line-height:1.2}.hero-word-gloss{color:var(--ink-3);white-space:nowrap;grid-column:1;font-size:15px}.hero-word .speak-button{grid-area:1/2/4}.speak-button{background:var(--accent-soft);width:44px;height:44px;color:var(--accent-ink);transition:transform .3s var(--spring), background-color .2s;border:0;border-radius:50%;place-items:center;display:grid}.speak-button:active{transform:scale(.94)}.speak-button[data-playing]{background:var(--accent);color:#fff}.hero-dots{gap:2px;display:flex;position:absolute;bottom:-16px;left:50%;transform:translate(-50%)}.hero-dots button{background:0 0;border:0;place-items:center;width:22px;height:22px;padding:0;display:grid}.hero-dots button:before{content:"";background:var(--ink);opacity:.2;border-radius:50%;width:6px;height:6px;transition:opacity .2s}.hero-dots button[aria-pressed=true]:before{opacity:.7}.section{padding:clamp(88px,11vw,144px) 0}.tone-soft{background:var(--soft)}.tone-story{background:var(--story)}.tone-night{background:radial-gradient(60% 70% at 78% 40%, #9b70ce5c, transparent 70%), var(--night);color:#fff}.tone-night .lede{color:#ffffffb8}.section-head{text-align:center;max-width:700px;margin:0 auto clamp(48px,6vw,72px)}.section-head .lede{margin-top:18px}.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(40px,7vw,96px);display:grid}.split-copy{max-width:30em}.split-copy .lede{margin-top:20px}.split-art{justify-content:center;display:flex}.split-reverse .split-art{order:-1}.phone{filter:drop-shadow(0 30px 40px #2c184829);width:100%;max-width:320px}.board-languages{flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:44px;display:flex}.board-languages button{height:36px;color:var(--ink-2);background:0 0;border:0;border-radius:999px;padding:0 16px;font-size:15px;transition:background-color .2s,color .2s}.board-languages button:hover{color:var(--ink)}.board-languages button[aria-pressed=true]{background:var(--ink);color:#fff}.board-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px;max-width:920px;margin-inline:auto;display:grid}.board-card{text-align:center;background:0 0;border:0;flex-direction:column;align-items:center;width:100%;padding:0;display:flex}.board-art{aspect-ratio:1;background:color-mix(in srgb, var(--tint) 60%, #fff);border-radius:28px;place-items:center;width:100%;margin-bottom:14px;display:grid}.board-art img{object-fit:contain;filter:drop-shadow(0 6px 8px #2c18481f);width:72%;height:72%;transition:transform .45s var(--spring)}.board-card:hover .board-art img{transform:scale(1.05)}.board-card[data-playing] .board-art img{animation:hop .5s var(--spring)}@keyframes hop{40%{transform:translateY(-6%)scale(1.06)}}.board-word{font-family:var(--display);font-size:20px;font-weight:600;line-height:1.25}[data-playing]>.board-word{color:var(--accent-ink)}.board-gloss{color:var(--ink-3);margin-top:2px;font-size:14px}.story-listen{margin-top:32px}.listen-button{background:var(--rust);color:#fff;height:46px;transition:transform .3s var(--spring);border:0;border-radius:999px;align-items:center;gap:10px;padding:0 20px 0 16px;font-weight:600;display:inline-flex}.listen-button svg{width:16px;height:16px}.listen-button:active{transform:scale(.96)}.story-line{min-height:3.4em;color:var(--ink-3);gap:2px;margin-top:16px;font-size:15px;display:grid}.story-line [lang=ja]{color:var(--ink);font-size:18px}.phone-pair{justify-content:center;gap:clamp(20px,5vw,64px);display:flex}.phone-pair .phone{max-width:300px}.phone-pair .phone:last-child{margin-top:64px}.widget-phones .phone{max-width:280px}.widget-phones .phone:first-child{transform:rotate(-5deg)}.widget-phones .phone:last-child{filter:drop-shadow(0 30px 40px #0006);margin-top:90px;margin-left:-70px;transform:rotate(5deg)}.phone-trio{grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;gap:clamp(20px,4vw,48px);display:grid}.phone-trio figure{max-width:290px}.phone-trio figure:nth-child(2){margin-top:56px}.phone-trio figcaption{color:var(--ink-2);text-align:center;margin-top:18px;font-size:16px}.prose-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,8vw,112px);display:grid}.prose-pair h2{margin-bottom:20px;font-size:clamp(30px,3.4vw,40px)}.prose-pair .lede+.lede{margin-top:14px}.faq{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;display:grid}.faq-list details{border-bottom:1px solid var(--line)}.faq-list details:first-child{border-top:1px solid var(--line)}.faq-list summary{cursor:pointer;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-size:18px;font-weight:600;list-style:none;display:flex}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"";border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);width:10px;height:10px;transition:transform .3s var(--spring);flex-shrink:0;margin-right:6px;transform:translateY(-3px)rotate(45deg)}.faq-list details[open] summary:after{transform:translateY(3px)rotate(-135deg)}.faq-list details>:not(summary){max-width:40em;color:var(--ink-2);margin-bottom:22px}.faq-list a{color:var(--accent-ink);text-underline-offset:3px;text-decoration:underline}.language-list{columns:3;column-gap:24px;font-size:15px;line-height:1.8}.closing{padding:clamp(80px,10vw,128px) 0 clamp(96px,12vw,152px)}.closing-inner{text-align:center;flex-direction:column;align-items:center;display:flex}.closing h2{max-width:12em;margin-top:40px;font-size:clamp(36px,5vw,60px)}.closing .get-app-soon-large{color:#ffffffb8}.closing-stickers{width:min(460px,100%);height:clamp(130px,20vw,170px);position:relative}.closing-stickers img{filter:drop-shadow(0 12px 18px #00000059);position:absolute;bottom:0}.closing-stickers .closing-croissant{width:21%;left:0;transform:rotate(-6deg)}.closing-stickers .closing-headphones{width:24%;bottom:10%;left:17%;transform:rotate(-10deg)}.closing-stickers .closing-apple{z-index:2;width:27%;left:37%}.closing-stickers .closing-sunflower{width:16%;bottom:14%;left:62%;transform:rotate(8deg)}.closing-stickers .closing-mug{width:22%;left:77%;transform:rotate(6deg)}.closing-notify{color:#ffffff8f;margin-top:12px;font-size:15px}.closing-notify a{color:#fff;text-underline-offset:3px;text-decoration:underline}.footer{border-top:1px solid var(--line);background:var(--paper);color:var(--ink-2);padding:44px 0 40px;font-size:15px}.footer-grid{grid-template-columns:1fr auto;gap:28px 48px;display:grid}.footer-brand p{color:var(--ink-3);margin-top:10px}.footer nav ul{flex-wrap:wrap;gap:12px 28px;display:flex}.footer nav a:hover{color:var(--ink)}.footer-legal{color:var(--ink-3);grid-column:1/-1;font-size:13px}.info-hero{padding:clamp(56px,8vw,96px) 0 clamp(32px,4vw,48px)}.info-hero h1{max-width:14em;font-size:clamp(40px,5.4vw,64px);line-height:1.05}.info-hero>p:last-child{color:var(--ink-2);margin-top:18px;font-size:19px}.info-content{color:var(--ink-2);padding-bottom:clamp(72px,9vw,120px)}.info-content>*{max-width:760px}.info-content>h2{color:var(--ink);letter-spacing:-.015em;margin:48px 0 14px;font-size:26px}.info-content>h2:first-child{margin-top:0}.info-content>p{margin-bottom:14px}.policy-list{gap:6px;margin:0 0 18px;padding-left:22px;list-style:outside;display:grid}.policy-list li::marker{color:var(--ink-3)}.info-content a{color:var(--accent-ink);text-underline-offset:3px;text-decoration:underline}.support-contact-card{background:var(--soft);border-radius:24px;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:56px;padding:30px;display:flex}.info-kicker{color:var(--ink-3);font-size:14px}.support-contact-card h2{color:var(--ink);margin:4px 0 8px;font-size:26px}.support-contact-card p{max-width:30em}.info-content .support-contact-card>a{background:var(--ink);color:#fff;border-radius:999px;align-items:center;min-height:44px;padding:10px 20px;font-weight:600;text-decoration:none;display:inline-flex}.support-answers{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;display:grid}.support-answers h3{color:var(--ink);margin-bottom:6px;font-size:18px}.info-link-list{gap:10px;display:grid}.not-found{text-align:center;place-content:center;justify-items:center;gap:18px;min-height:70vh;padding:48px 24px;display:grid}.not-found img{filter:drop-shadow(0 14px 18px #2c184833);width:160px;transform:rotate(-6deg)}.not-found p{color:var(--ink-3)}.not-found h1{max-width:12em;font-size:clamp(34px,4.6vw,52px);line-height:1.1}.not-found a{color:var(--accent-ink);font-weight:600}@media (max-width:900px){.nav-links{display:none}.nav>:last-child{margin-left:auto}.hero-grid,.split,.faq,.prose-pair{grid-template-columns:minmax(0,1fr)}.split-reverse .split-art{order:0}.faq{gap:24px}}@media (max-width:640px){body{font-size:16px}.wrap{width:calc(100% - 32px)}.hero h1{font-size:clamp(38px,11vw,52px)}.hero-grid{gap:0}.hero-copy{display:contents}.hero{padding:28px 0 64px}.hero-stage{order:1;width:min(340px,88%);margin-top:20px}.hero-lede,.get-app-soon-large,.app-store-badge{order:2}.hero-lede{margin-top:32px}.hero-shot{border-radius:30px}.board-languages{scrollbar-width:none;flex-wrap:nowrap;justify-content:flex-start;margin-inline:-16px;padding-inline:16px;overflow-x:auto}.board-languages button{flex-shrink:0}.split-art .phone{max-width:72%}.phone-pair .phone{max-width:46%}.phone-pair .phone:last-child{margin-top:40px}.split-art.widget-phones .phone{max-width:52%}.widget-phones .phone:last-child{margin-top:56px;margin-left:-8%}.phone-trio{scroll-snap-type:x mandatory;scrollbar-width:none;gap:16px;margin-inline:-16px;padding:0 16px 8px;display:flex;overflow-x:auto}.phone-trio figure{scroll-snap-align:center;flex:0 0 64%}.phone-trio figure:nth-child(2){margin-top:0}.language-list{columns:2}.section{padding:56px 0}.section-head{margin-bottom:28px}.split{gap:32px}.peek{padding-bottom:0}.peek .split-art,.peek .phone-pair{align-items:flex-start;height:min(360px,46svh);overflow:hidden}.peek .split-art .phone{max-width:64%}.peek .phone-pair .phone:last-child{margin-top:28px}.peek .split-art.widget-phones .phone{max-width:52%}.peek .widget-phones .phone:last-child{margin-top:40px}.phone-trio figure{flex-basis:52%}.board-languages{margin-bottom:24px}.board-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px}.board-grid li:nth-child(n+7){display:none}.board-art{border-radius:20px;margin-bottom:8px}.board-word{font-size:16px}.board-gloss{font-size:12px}.support-answers,.footer-grid{grid-template-columns:minmax(0,1fr)}}@media (max-width:640px) and (max-height:720px){.hero h1{font-size:36px}.hero-stage{width:min(270px,74%);margin-top:12px}.hero-lede{margin-top:24px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.15s!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
