:root {
  color-scheme: light;
  --foam: #fbfefe;
  --mist: #ddf5f5;
  --ink: #172126;
  --secondary: #5b6b73;
  --current: #177d86;
  --ripple: #48c9cf;
  --line: #cbeaec;
  --spark: #ffd86a;
  --guide-scrim: rgb(0 0 0 / 58%);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--foam); }
a { color: var(--current); text-decoration: none; text-underline-offset: 4px; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 3px solid var(--current); outline-offset: 4px; border-radius: 8px; }
[hidden] { display: none !important; }
p, h1, h2 { margin: 0; }
.skip-link { position: fixed; top: -80px; left: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--ink); color: white; z-index: 10; }
.skip-link:focus { top: var(--space-4); }
.landing { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--foam) 35%, #f2fafa 100%); }
.landing-header { height: 88px; padding: var(--space-6) var(--space-12); display: flex; align-items: center; justify-content: flex-end; }
.language-switch { min-width: 72px; min-height: 44px; display: inline-flex; gap: var(--space-2); align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; line-height: 20px; color: var(--current); background: rgb(251 254 254 / 72%); }
.language-switch:hover { background: var(--mist); text-decoration: none; }
.language-switch span { font-size: 20px; }
.landing-main { width: min(1024px, calc(100% - 96px)); margin: auto; display: grid; grid-template-columns: minmax(0, 560px) 320px; gap: clamp(48px, 10vw, 144px); align-items: center; padding-block: var(--space-16) var(--space-24); }
.identity { min-width: 0; }
.brand-lockup { display: flex; align-items: center; gap: var(--space-6); }
.brand-logo { width: 72px; height: 72px; flex-shrink: 0; }
.brand-lockup h1 { font-size: 32px; line-height: 44px; font-weight: 700; letter-spacing: -.025em; }
.brand-english { display: block; font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0; color: var(--current); }
.tagline { margin-top: var(--space-8); font-size: 56px; line-height: 76px; letter-spacing: -.035em; font-weight: 700; }
html[lang="en"] .tagline { letter-spacing: -.045em; }
.download { text-align: center; }
.download-prompt { font-size: 16px; line-height: 24px; color: var(--current); font-weight: 500; margin-bottom: var(--space-4); }
.coming-soon, .app-store-link { width: 200px; min-height: 56px; margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: var(--space-3); font-size: 18px; line-height: 24px; border-radius: 999px; }
.coming-soon { background: var(--mist); color: var(--current); }
.arrival-mark { opacity: .6; }
.release-note { margin-top: var(--space-4); color: var(--secondary); font-size: 14px; line-height: 20px; }
.app-store-link { background: var(--current); color: var(--foam); }
.app-store-link:hover { background: #106872; text-decoration: none; }
.qr-card { width: 192px; height: 192px; margin-inline: auto; display: grid; place-items: center; background: var(--foam); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 16px 40px rgb(23 125 134 / 5%); }
.qr-card img { display: block; width: 160px; height: 160px; }
.audience { color: var(--secondary); font-size: 16px; line-height: 24px; margin-top: var(--space-8); }
.site-footer { position: relative; text-align: center; padding: var(--space-6) var(--space-4) var(--space-8); font-size: 12px; line-height: 18px; }
.site-footer nav { display: flex; justify-content: center; align-items: center; gap: var(--space-6); }
.site-footer a { color: var(--secondary); min-height: 44px; display: inline-flex; justify-content: center; align-items: center; }
.footer-email, .icp { display: flex !important; width: fit-content; margin-inline: auto; }
.water { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.water i { position: absolute; left: -25%; bottom: -47%; width: 150%; height: 68%; border-radius: 50%; background: var(--ripple); opacity: .035; }
.water i:nth-child(2) { bottom: -50%; left: -40%; width: 160%; background: var(--current); }
.water i:nth-child(3) { bottom: -53%; left: -5%; opacity: .025; }
.water i:nth-child(4) { bottom: -56%; left: -50%; width: 180%; opacity: .02; }
.shell { width: min(960px, calc(100% - 48px)); margin-inline: auto; }
.document-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); min-height: 88px; }
.back-link { min-height: 44px; display: inline-flex; align-items: center; font-size: 16px; }
.legal-main { max-width: 820px; padding-block: var(--space-12) var(--space-16); }
.legal-hero { margin-bottom: var(--space-12); }
.legal-hero h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.25; letter-spacing: -.035em; }
.legal-hero > p { margin-top: var(--space-6); color: var(--secondary); font-size: 18px; line-height: 1.7; }
.legal-hero .meta { font-size: 12px; margin-top: var(--space-4); }
.legal-article { line-height: 1.8; font-size: 16px; overflow-wrap: anywhere; }
.legal-article section { padding-block: var(--space-8); border-top: 1px solid var(--line); }
.legal-article h2 { font-size: 22px; line-height: 1.4; }
.legal-article p, .legal-article ol { margin-top: var(--space-4); color: var(--secondary); }
.legal-article a { text-decoration: underline; }
.legal-article .button { padding: var(--space-3) var(--space-6); margin-top: var(--space-4); background: var(--current); color: var(--foam); display: inline-flex; border-radius: 999px; text-decoration: none; }
.notice { padding: var(--space-6); margin-bottom: var(--space-8); background: var(--mist); border-radius: 16px; color: var(--current); }
.document .site-footer { border-top: 1px solid var(--line); }
@media (max-width: 900px) {
 .landing-main { grid-template-columns: minmax(0,1fr) 280px; gap: var(--space-12); }
 .tagline { font-size: 42px; line-height: 60px; }
}
@media (max-width: 700px) {
 .landing-header { height: 72px; padding: var(--space-4) var(--space-6); }
 .landing-main { width: calc(100% - 48px); display: flex; flex-direction: column; gap: var(--space-8); padding-block: var(--space-8) var(--space-12); text-align: center; }
 .brand-lockup { flex-direction: column; gap: var(--space-6); }
 .brand-logo { width: 64px; height: 64px; }
 .brand-lockup h1 { font-size: 56px; line-height: 76px; }
 .brand-english { margin-top: var(--space-1); font-size: 14px; line-height: 20px; letter-spacing: .06em; }
 .tagline { margin-top: var(--space-8); font-size: 16px; line-height: 24px; letter-spacing: 0; font-weight: 400; }
 html[lang="en"] .tagline { letter-spacing: 0; }
 .desktop-break { display: none; }
 .download { width: 100%; }
 .audience { margin-top: var(--space-8); }
 .site-footer { padding-top: var(--space-2); padding-bottom: var(--space-6); }
 .site-footer nav { gap: var(--space-4); }
 .water i { bottom: -27%; height: 36%; }
 .water i:nth-child(2) { bottom: -29%; }
 .water i:nth-child(3) { bottom: -31%; }
 .water i:nth-child(4) { bottom: -33%; }
 .legal-main { padding-block: var(--space-8) var(--space-12); }
 .legal-hero { margin-bottom: var(--space-8); }
 .legal-article h2 { font-size: 20px; }
}
@media (max-width: 359px) {
 .landing-main { width: calc(100% - 32px); }
 .tagline { font-size: 15px; }
 .audience { font-size: 14px; }
 .site-footer nav { gap: var(--space-3); font-size: 11px; }
 .brand-lockup h1 { font-size: 48px; line-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
/* Installation help shares the site's color, spacing, and type tokens. */
.guide-open { overflow: hidden; }
.browser-guide { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; border: 0; padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-6), env(safe-area-inset-right)) max(var(--space-6), env(safe-area-inset-bottom)) max(var(--space-6), env(safe-area-inset-left)); background: transparent; color: var(--ink); overflow-y: auto; overscroll-behavior: contain; text-align: left; }
.browser-guide::backdrop { background: var(--guide-scrim); }
.browser-guide-content { width: min(100%, 360px); margin-left: auto; }
.guide-arrow { display: block; margin: 0 var(--space-2) var(--space-2) auto; color: var(--foam); }
.browser-guide-panel { position: relative; padding: var(--space-6); background: var(--foam); border: 1px solid var(--line); border-radius: var(--space-6); }
.browser-guide-panel h2 { padding-right: var(--space-8); }
.guide-close { position: absolute; top: var(--space-2); right: var(--space-2); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--secondary); font: inherit; font-size: 24px; cursor: pointer; }
.guide-close:hover { background: var(--mist); }
.guide-close:focus-visible { outline: 3px solid var(--current); outline-offset: var(--space-1); }
.browser-guide h2:focus { outline: none; }
.browser-guide h2 { font-size: 16px; line-height: 24px; }
.browser-guide p { margin-top: var(--space-2); font-size: 14px; line-height: 20px; color: var(--secondary); }
.copy-link { margin-top: var(--space-3); min-height: 44px; padding: var(--space-2) var(--space-4); background: var(--foam); color: var(--current); border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer; }
.copy-link:focus-visible, .browser-guide:focus-visible { outline: 3px solid var(--current); outline-offset: var(--space-1); }
.copy-status:empty { display: none; }
.download-address { display: inline-block; padding-block: var(--space-3); overflow-wrap: anywhere; font-size: 14px; line-height: 20px; }
.download-landing .landing-main { max-width: 480px; display: flex; flex-direction: column; gap: var(--space-8); text-align: center; padding-block: var(--space-8) var(--space-12); }
.download-landing .brand-lockup { flex-direction: column; gap: var(--space-6); }
.download-landing .tagline { font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0; }
.download-landing .desktop-break { display: none; }
.download-landing .download { width: 100%; }