@font-face{font-family:Maru;src:url('/assets/MaruBuri-Regular.otf') format('opentype');font-display:swap}@font-face{font-family:NotoJP;src:url('/assets/NotoSerifJP.ttf') format('truetype');font-display:swap}
:root{color-scheme:light;--paper:#f7f8f7;--ink:#343b38;--muted:#68716d;--line:#dde2df;--mood:#559b8b}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.9 Maru,Georgia,serif}html:lang(ja) body{font-family:NotoJP,serif}html:lang(en) body{font-family:Georgia,serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #559b8b;outline-offset:5px}header,footer{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 40px}.brand{font:28px Georgia,serif;letter-spacing:2px}nav{display:flex;align-items:center;gap:28px;font-size:13px}nav a[aria-current=page]{border-bottom:1px solid #68716d}.languages{display:flex;gap:13px;border-left:1px solid var(--line);padding-left:24px}.languages a{font-size:12px}.hero{max-width:1200px;min-height:740px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:40px;gap:40px}.eyebrow{font:11px/1.7 sans-serif;letter-spacing:2px;color:var(--muted);text-transform:uppercase}h1{font-size:clamp(34px,4vw,56px);font-weight:400;line-height:1.55;letter-spacing:-1.5px;margin:20px 0 28px;word-break:keep-all}p{word-break:keep-all}.lead{max-width:390px;color:var(--muted);font-size:16px}.app-store-link{display:inline-block;margin-top:30px;padding:12px;line-height:0}.app-store-link img{display:block;height:48px;width:auto}.scene{text-align:center}.bowl{width:100%;max-width:490px;display:block;margin:auto}.palette{display:flex;justify-content:center;gap:20px;margin:22px auto 8px}.palette button{border:0;background:none;padding:9px;width:36px;height:48px;transition:transform .25s}.palette button[aria-pressed=true]{transform:translateY(-7px)}.palette svg{width:20px;height:27px;fill:currentColor}.mood-name{font-size:13px;color:var(--muted);min-height:25px}.bowl .ink{transition:fill .8s}.steps{border-top:1px solid var(--line);width:calc(100% - 80px);max-width:1120px;margin:0 auto;padding:65px 0 90px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:70px}.steps span{font:12px Georgia;color:var(--muted)}h2{font-size:25px;font-weight:400;line-height:1.5}h3{font-size:18px;font-weight:400}.steps p{font-size:14px;color:var(--muted)}.closing{max-width:1120px;margin:0 auto 70px;border-top:1px solid var(--line);padding-top:50px;display:flex;justify-content:space-between;gap:40px}.closing p{max-width:520px;color:var(--muted);font-size:14px}footer{border-top:1px solid var(--line);font:12px/1.7 sans-serif;color:var(--muted);flex-wrap:wrap}footer div{display:flex;gap:24px}.document{max-width:780px;margin:70px auto 100px;padding:0 24px}.document h1{font-size:36px}.document h2{border-top:1px solid var(--line);padding-top:32px;margin-top:40px;font-size:22px}.document p,.document li{font-size:15px;color:#515a55}.document a{text-decoration:underline;text-underline-offset:4px}.document details{border-bottom:1px solid var(--line);padding:20px 0}.document summary{cursor:pointer;font-size:18px}.contact{display:inline-block;margin:18px 0;font-size:24px}.skip{position:absolute;top:-100px}.skip:focus{top:10px;background:white;padding:10px;z-index:10}@media(max-width:800px){header{padding:24px;flex-wrap:wrap;gap:15px}nav{gap:18px;flex-wrap:wrap}.languages{padding-left:16px}.hero{min-height:auto;grid-template-columns:1fr;padding:48px 24px 28px;gap:20px;text-align:center}.lead{margin:auto}.app-store-link{margin-top:20px}.scene{max-width:480px;width:100%;margin:auto}.steps{width:auto;margin:30px 24px 0;padding:35px 0;grid-template-columns:1fr;gap:20px}.steps h2{margin:8px 0}.closing{margin:15px 24px 50px;padding-top:25px;display:block}footer{padding:24px}.document{margin-top:35px}.palette{gap:10px}h1{font-size:36px}.brand{font-size:25px}nav{font-size:12px}.document h1{font-size:30px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* One large drop above the glass, with quiet neighboring colors. */
.steps span{font-size:20px}
.palette.carousel{position:relative;overflow:clip;width:min(100%,390px);height:120px;margin:0 auto;display:block;touch-action:pan-y;user-select:none;--drag:0px}
.palette.carousel button[data-color]{position:absolute;left:calc(50% - 40px);top:0;width:80px;height:116px;padding:8px;transform:translateX(calc(var(--offset) * 102px + var(--drag))) scale(.28);opacity:0;pointer-events:none;transition:transform .38s cubic-bezier(.22,.75,.25,1),opacity .25s}
.palette.carousel button[data-color] svg{width:64px;height:90px;display:block}
.palette.carousel button[data-offset='0']{transform:translateX(var(--drag)) scale(1);opacity:1;pointer-events:auto}
.palette.carousel button[data-offset='-1'],.palette.carousel button[data-offset='1']{opacity:.58;pointer-events:auto}
.palette.carousel .mood-arrow{position:absolute;top:32px;width:44px;height:44px;padding:0;color:#bac1bc;font:30px/1 Georgia;transform:none;z-index:2}
.mood-arrow.previous{left:0}.mood-arrow.next{right:0}
.scene .mood-name{margin:4px 0 0;font-size:14px}.scene .bowl{margin-top:-16px}
@media(max-width:800px){.hero{gap:45px}.palette.carousel{max-width:350px}.palette.carousel button[data-color]{transform:translateX(calc(var(--offset) * 87px + var(--drag))) scale(.28)}.palette.carousel button[data-offset='0']{transform:translateX(var(--drag)) scale(1)}}

.brand{display:inline-flex;align-items:center;gap:10px}.brand img{display:block;border-radius:7px;flex-shrink:0}

.brand-drop{color:#00b9c7;flex-shrink:0}.title-indent{display:inline-block;padding-left:.75em}

.hero .lead{margin-bottom:0}.hero .app-store-link{margin-top:6px}
/* Legal pages: a readable document, with the same hierarchy in each locale. */
.policy-document{max-width:860px;margin-top:56px}
.policy-document>h1{margin-bottom:12px;letter-spacing:-.6px}
.policy-document>p{color:var(--muted)}
.policy-toc{display:block;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin:36px 0 8px}
.policy-toc>p{margin:0 0 10px;font-size:12px;color:var(--muted)}
.policy-toc ol{display:grid;grid-template-columns:1fr 1fr;gap:7px 32px;margin:0;padding-left:24px}
.policy-toc li{font-size:14px;padding-left:4px}.policy-toc a{text-decoration:none;display:inline-block;padding:3px 0}.policy-toc a:hover{text-decoration:underline}
.policy-section{scroll-margin-top:28px;padding:32px 0;border-bottom:1px solid var(--line)}
.policy-document .policy-section h2{display:flex;align-items:baseline;gap:17px;border:0;padding:0;margin:0 0 16px;font-size:21px;font-weight:400;letter-spacing:-.3px}
.policy-section h2 span{font:13px/1.7 Georgia,serif;color:var(--muted);flex-shrink:0}
.policy-document .policy-section p{margin:0;font-size:15px;line-height:2.05;word-break:normal;overflow-wrap:anywhere}
@media(max-width:600px){.policy-document{margin-top:32px;padding:0 24px}.policy-document>h1{font-size:28px}.policy-toc ol{grid-template-columns:1fr;gap:4px}.policy-section{padding:25px 0}.policy-document .policy-section h2{font-size:19px;gap:12px}.policy-document .policy-section p{font-size:14px;line-height:2}}
.policy-document .policy-points{margin:0;padding-left:1.2em;list-style-type:disc}
.policy-document .policy-points li{padding-left:5px;margin:0 0 10px;font-size:15px;line-height:1.95;overflow-wrap:break-word}
.policy-document .policy-points li:last-child{margin-bottom:0}
.policy-points li::marker{color:#a5afa9;font-size:.7em}
.policy-points strong{font-weight:600;color:var(--ink)}
.policy-document .policy-section p+p{margin-top:12px}
html:lang(ko) .policy-document .policy-section p,html:lang(ko) .policy-points li{word-break:keep-all;overflow-wrap:break-word}
@media(max-width:600px){.policy-document .policy-points li{font-size:14px}}
.policy-document .policy-section p{line-height:1.7}
.policy-document .policy-section p+p{margin-top:5px}
.policy-contact{font-style:normal;font-size:15px;line-height:1.7}
.policy-contact dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 28px;margin:0}
.policy-contact dt{color:var(--muted)}.policy-contact dd{margin:0;overflow-wrap:anywhere}
.policy-contact-notes{margin-top:22px}.policy-document .policy-contact-notes p{font-size:14px;color:var(--muted)}
@media(max-width:600px){.policy-contact{font-size:14px}.policy-contact dl{gap:7px 16px}.policy-document .policy-contact-notes p{font-size:13px}}
@media(max-width:380px){.policy-contact dl{grid-template-columns:1fr;gap:3px}.policy-contact dd{margin-bottom:9px}}
.policy-document .policy-section:last-child{border-bottom:0}
.policy-document>.eyebrow{text-transform:none}

footer .footer-links{align-items:center;flex-wrap:wrap}footer .languages{gap:13px}@media(max-width:480px){footer .languages{flex-basis:100%;border-left:0;padding-left:0}}

.document .contact{margin-bottom:0}.document .contact + p{margin-top:6px}

/* Quiet feedback on interactive elements; preserve the carousel's positioning. */
header a,footer a,.document a,.document summary{transition:color .2s ease,opacity .2s ease,text-decoration-color .2s ease}
.brand-drop,.palette.carousel button[data-color] svg{transition:transform .2s ease}
.palette.carousel .mood-arrow{transition:color .2s ease,transform .2s ease}
.document .contact{transition:color .2s ease,transform .2s ease,text-underline-offset .2s ease}
header nav a,footer a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px}
@media(hover:hover) and (pointer:fine){
  header nav a:hover,footer a:hover{color:#3e7c70;text-decoration-color:#91aaa2}
  .brand:hover{color:#3e7c70}.brand:hover .brand-drop{transform:translateY(-2px)}
  .document a:hover,.document summary:hover{color:#3e7c70}
  .document .contact:hover{transform:translateY(-1px);text-underline-offset:7px}
  .palette.carousel button[data-color]:hover svg{transform:scale(1.04)}
  .palette.carousel .mood-arrow:hover{color:#687f75;transform:scale(1.1)}
}
header a:focus-visible,footer a:focus-visible,.document a:focus-visible,.document summary:focus-visible{color:#3e7c70}
.palette.carousel .mood-arrow:focus-visible{color:#687f75}
.document .contact:active{transform:translateY(1px)}
.palette.carousel button[data-color]:active svg{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){
  .brand:hover .brand-drop,.document .contact:hover,.document .contact:active,
  .palette.carousel button[data-color]:hover svg,.palette.carousel button[data-color]:active svg,
  .palette.carousel .mood-arrow:hover{transform:none}
}

.steps h2{margin-top:12px}@media(max-width:800px){.steps h2{margin-top:6px}}

.document > details:last-child{border-bottom:0}

.document .contact{display:inline-flex;align-items:center;gap:10px;text-decoration:none}.contact .mail-icon{flex-shrink:0}.document .contact + p{margin-bottom:28px}

.palette.carousel .mood-arrow{display:flex;align-items:center;justify-content:center}.palette.carousel .mood-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Page destinations sit above a compact credit/language footer. */
.page-actions{max-width:1200px;margin:0 auto;padding:0 40px 38px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.page-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border:1px solid var(--line);border-radius:12px;font-size:14px;transition:background .2s,color .2s,border-color .2s}
footer{flex-wrap:nowrap;gap:12px}footer>a{white-space:nowrap}footer>.languages{margin-left:auto;flex-basis:auto;border:0;padding:0;gap:13px;white-space:nowrap}
@media(hover:hover) and (pointer:fine){.page-actions a:hover{background:#eef2ef;border-color:#b8c8bf;color:#3e7c70}}
@media(max-width:800px){
 .title-indent{padding-left:0}
 .steps article{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:baseline}
 .steps article>span{grid-column:1}.steps article>h2{grid-column:2;margin:0}
 .steps article>p{grid-column:1 / -1}
 .page-actions{padding:10px 24px 30px;gap:12px}.page-actions a{padding:12px 18px}
}
@media(max-width:380px){footer{padding:24px 16px;font-size:11px}footer>.languages{gap:9px}footer .languages a{font-size:11px}}
.scene{position:relative;isolation:isolate}
.falling-drop{position:absolute;z-index:3;pointer-events:none;transform-origin:center;overflow:visible}


/* Final spacing and quiet, persistent focus feedback. */
a:focus,button:focus,summary:focus{outline:none}
a,button,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:none;color:#3e7c70}
.palette.carousel button[data-color]:focus-visible svg{filter:brightness(.85)}
.page-actions a{width:210px;min-height:50px;background:#e8eeea;border-color:#c7d2cb;color:#3c5046;font-weight:500}
.hero{min-height:650px;padding-top:28px;padding-bottom:24px}
.hero h1{margin-bottom:18px}.scene .bowl{max-width:440px}
.steps{padding-bottom:60px}
@media(max-width:800px){
 .hero{min-height:auto;padding-top:38px;padding-bottom:20px;gap:36px}
 .hero h1{margin-bottom:22px}
 .steps{padding-bottom:28px}
 .steps article{align-items:center}
 .steps article>span{line-height:1.5;align-self:center}
 .page-actions a{width:auto;flex:1 1 0;max-width:210px;padding:12px 10px}
}

/* Align the visible numeral height with the heading, not Georgia's old-style figures. */
@media(max-width:800px){
 .steps article>span{font-family:Arial,sans-serif;font-size:18px;font-variant-numeric:lining-nums;line-height:1;transform:translateY(-1px)}
 .steps article>h2{line-height:1.3}
}
@media(min-width:801px){
 .hero h1{line-height:1.3;margin-bottom:8px}
 .hero .lead{margin-top:0;line-height:1.75}
 .hero .status{margin-top:14px}
}

/* Bring the hero closer to the brand, while keeping the title spacious. */
@media(min-width:801px){
 header{padding-bottom:12px}
 .hero{min-height:0;padding-top:8px;align-items:start}
 .hero>div:first-child{padding-top:20px}
 .hero h1{line-height:1.65;margin-bottom:40px}
 .hero .lead{margin-top:0;line-height:1.9}
 .hero .app-store-link{margin-top:6px}
}

/* Keep localized step text within its column at intermediate widths. */
.steps article{min-width:0;overflow-wrap:anywhere}

/* Use natural Japanese line wrapping rather than Korean word grouping. */
html:lang(ja) .steps p{word-break:normal;line-break:strict}

/* Keep localized badges equally prominent without overpowering the heading. */
.hero .app-store-link{width:auto;max-width:100%;padding:12px 0}
.hero .app-store-link img{width:auto;height:64px;max-width:100%;object-fit:contain}

@media(min-width:801px){html:lang(ja) .hero .title-indent{padding-left:calc(3em - 4.5px)}}

/* Japanese hero: align 気 and 合, and separate the download action from the copy. */
html:lang(ja) .hero h1{margin-bottom:20px}
html:lang(ja) .hero .app-store-link{margin-top:36px;width:242.05px;max-width:100%;padding:0}
html:lang(ja) .hero .app-store-link img{width:100%;height:auto}