:root {
  /* Palette mirrors the app's Material theme (theme/Theme.kt):
     primary #1565C0, secondary #42A5F5, error #D32F2F, background #F5F5F5. */
  --bg: #ffffff;
  --bg-alt: #f5f5f5;
  --ink: #212121;
  --ink-soft: #5f6368;
  --line: #e0e0e0;
  --accent: #1565C0;
  --accent-hover: #0d47a1;
  --accent-2: #42A5F5;
  --accent-soft: #e8f1fb;
  --on-accent: #ffffff;
  --danger: #D32F2F;
  --max: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --bg-alt: #1e1e1e;
    --ink: #ffffff;
    --ink-soft: #b3b8bd;
    --line: #2c2f33;
    --accent: #42A5F5;
    --accent-hover: #90caf9;
    --accent-2: #1565C0;
    --accent-soft: #16273a;
    --on-accent: #06121f;
    --danger: #ef5350;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 46rem; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 0.6em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 2.4em; }
h3 { font-size: 1.15rem; margin-top: 2em; }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.2em; }
li { margin-bottom: 0.5em; }

/* Header */
.site-head {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.brand img { width: 2rem; height: 2rem; border-radius: 0.45rem; display: block; }
.brand .brand-text { color: var(--ink); }
.brand .brand-text span { color: var(--accent); }
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  margin-left: 1.35rem;
  font-size: 0.95rem;
}
.site-nav a:hover { color: var(--accent); }
@media (max-width: 30rem) {
  /* Six links wrap to two rows in a sticky header, which eats the viewport.
     Keep them on one line and let the row scroll instead. */
  .site-nav {
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav a { margin: 0 0.9rem 0 0; font-size: 0.9rem; }
}

/* Hero */
.hero { padding: 4.5rem 0 3.5rem; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.hero-art { justify-self: center; text-align: center; }
.hero-art img {
  width: min(15rem, 60vw);
  height: auto;
  border-radius: 1.6rem;
  box-shadow: 0 1.2rem 2.5rem rgba(21, 101, 192, 0.25);
}
@media (max-width: 46rem) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; justify-self: start; }
  .hero-art img { width: 7rem; }
}
.hero p.lead {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 38rem;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--accent);
  margin-bottom: 1rem;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }
.btn {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border-radius: 0.6rem;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid var(--accent);
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost:hover { background: var(--accent-soft); }
.note { font-size: 0.9rem; color: var(--ink-soft); margin-top: 1rem; }

/* Sections */
section { padding: 1rem 0; }
/* The header is sticky, so anchor jumps must clear it. */
section[id] { scroll-margin-top: 5.5rem; }
.band { background: var(--bg-alt); padding: 3rem 0; margin-top: 3rem; }
.band h2 { margin-top: 0; }

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 2rem;
}
.card {
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  padding: 1.4rem;
  background: var(--bg);
}
.card h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { border-color: var(--accent); }

.pill {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}

/* Article */
article { padding: 3rem 0; }
article h1 { margin-bottom: 0.4em; }
article .meta { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 2.5rem; }
article blockquote {
  margin: 1.8rem 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
}
.callout {
  background: var(--accent-soft);
  border-radius: 0.8rem;
  padding: 1.3rem 1.4rem;
  margin: 2.5rem 0;
}
.callout p:last-child { margin-bottom: 0; }

.faq h3 { font-size: 1.05rem; }

table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: 0.95rem; }
th, td { border-bottom: 1px solid var(--line); padding: 0.6rem 0.5rem; text-align: left; vertical-align: top; }
th { color: var(--ink-soft); font-weight: 600; }

/* Footer */
.site-foot {
  border-top: 1px solid var(--line);
  margin-top: 4rem;
  padding: 2.5rem 0 3.5rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.site-foot a { color: var(--ink-soft); }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 1.2rem; }

/* Stat strip */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.8rem;
}
.stats div strong {
  display: block;
  font-size: 1.35rem;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.stats div span { color: var(--ink-soft); font-size: 0.92rem; }

/* Store buttons */
.store-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }

/* FAQ list */
.faq-list { margin-top: 2rem; }
.faq-list details {
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
}
.faq-list summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: " +"; color: var(--accent); }
.faq-list details[open] summary::after { content: " –"; }
.faq-list p { margin: 0.8rem 0 0; color: var(--ink-soft); }

/* Accessibility */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
a:focus-visible, summary:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
}

/* Language switcher */
.lang-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.lang-switch a { color: var(--ink-soft); text-decoration: none; }
.lang-switch a:hover { color: var(--accent); text-decoration: underline; }
.lang-switch a[aria-current] { color: var(--ink); font-weight: 650; }

/* Script-specific typography.
   The Latin stack above has no CJK or Korean faces, so headings fall back to
   whatever the OS picks and the negative tracking meant for Latin looks wrong. */
html[lang^="zh"] body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
}
html[lang^="ko"] body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
               "Noto Sans CJK KR", "Noto Sans KR", sans-serif;
}
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3, html[lang^="zh"] .brand,
html[lang^="ko"] h1, html[lang^="ko"] h2, html[lang^="ko"] h3, html[lang^="ko"] .brand {
  letter-spacing: 0;
}
html[lang^="zh"] body, html[lang^="ko"] body { line-height: 1.75; }

/* Breadcrumbs on nested pages */
.crumbs {
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0.6rem 0;
}
.crumbs li { margin: 0; }
.crumbs li + li::before {
  content: "/";
  margin-right: 0.4rem;
  color: var(--line);
}
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink-soft); }

/* Screenshot gallery.
   A horizontal rail rather than a grid: eight tall phone shots stacked
   vertically would push the whole page below them out of reach. The native
   scrollbar is hidden, so the fade at the live edge is what signals there is
   more — it is a mask, not a colour, so it works on any background in either
   theme. The arrows are added by assets/gallery.js and stay out of the
   pictures by living up in the heading row. */
.gallery-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.gallery-head h2 { margin-bottom: 0.35em; }
.gallery-head p { margin-bottom: 0; color: var(--ink-soft); }
.gallery-nav { display: flex; gap: 0.5rem; flex: 0 0 auto; padding-bottom: 0.2rem; }
.gallery-nav button {
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}
.gallery-nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.gallery-nav button:disabled { opacity: 0.3; cursor: default; }
.gallery-nav svg { width: 1.1rem; height: 1.1rem; display: block; }
.gallery-inert .gallery-nav { display: none; }
@media (max-width: 40rem) {
  /* Swiping is the affordance on touch; the arrows would only crowd it. */
  .gallery-nav { display: none; }
}

.shots {
  --fade: 3rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(10.5rem, 12.5rem);
  gap: 1.25rem;
  margin-top: 2rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
}
.shots::-webkit-scrollbar { width: 0; height: 0; display: none; }
.shots[data-pos="start"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
}
.shots[data-pos="middle"] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.shots[data-pos="end"] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade));
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade));
}
.shots[data-pos="none"] { -webkit-mask-image: none; mask-image: none; }

.shots figure { margin: 0; scroll-snap-align: start; }
.shots img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.10);
}
.shots figcaption {
  margin-top: 0.85rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.shots:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 0.4rem; }
@media (prefers-reduced-motion: reduce) {
  .shots { scroll-snap-type: none; }
}