/* PhotoCatalog site: no build step, no outside fonts; the one outside script is Cloudflare Web Analytics.
   Colors follow the app's tokens. */
:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #ececef;
  --text: #1d1d1f;
  --text-2: #4b4b50;
  --text-3: #86868b;
  --line: rgba(0, 0, 0, 0.09);
  --accent: #2764d6;
  --accent-fill: #2764d6;
  --accent-fill-hover: #1f5bc9;
  --glow: rgba(39, 100, 214, 0.16);
  --shadow: 0 24px 70px rgba(15, 20, 30, 0.22), 0 2px 8px rgba(15, 20, 30, 0.08);
  --lift: 0 18px 44px rgba(15, 20, 30, 0.12);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --radius: 18px;
  --page: 1180px;
  --gutter: 24px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0f10;
    --surface: #1b1c1e;
    --surface-2: #242628;
    --text: #f5f5f7;
    --text-2: #b4b4ba;
    --text-3: #7c7c82;
    --line: rgba(255, 255, 255, 0.09);
    --accent: #5a98f8;
    --accent-fill: #2f6fe0;
    --accent-fill-hover: #2a63cf;
    --glow: rgba(90, 152, 248, 0.18);
    --shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.4);
    --lift: 0 18px 44px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC",
    "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(var(--page), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---- navigation ---- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 20px; height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 17px; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
.nav-links a { color: var(--text-2); }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.lang-switch {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
}
/* each language is its own page; the pill marks the current one */
.lang-switch::before {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 6px;
  background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
html[lang="en"] .lang-switch::before { transform: translateX(100%); }
.lang-switch a {
  position: relative; color: var(--text-2); font-size: 13px; padding: 3px 10px; border-radius: 6px;
  text-align: center; transition: color 0.2s;
}
.lang-switch a:hover { color: var(--text); text-decoration: none; }
.lang-switch a[aria-current] { color: var(--text); }

/* ---- hero ---- */
/* clip sideways only: the drifting glow must not widen the page, but it still reaches up under the bar */
.hero { position: relative; padding: 88px 0 40px; text-align: center; overflow-x: clip; }
.hero::before {
  content: ""; position: absolute; inset: -120px 0 auto; height: 720px; z-index: -1;
  background: radial-gradient(50% 55% at 50% 40%, var(--glow), transparent 70%);
}
.hero-icon { width: 104px; height: 104px; margin: 0 auto 26px; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.18)); }
h1 {
  font-size: clamp(1.75rem, 5vw + 0.4rem, 4.1rem); line-height: 1.08; letter-spacing: -0.025em;
  margin: 0 auto 22px; max-width: 15em; font-weight: 700;
}
h1:lang(zh-Hans), h2:lang(zh-Hans) { letter-spacing: 0; line-height: 1.2; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-2); max-width: 40em; margin: 0 auto 32px; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.button {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 980px;
  font-size: 16px; font-weight: 500; border: 1px solid transparent;
  transition: background-color 0.15s, transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.button:hover { text-decoration: none; }
.button.primary { background: var(--accent-fill); color: #fff; }
.button.primary:hover { background: var(--accent-fill-hover); }
.button.secondary { color: var(--text); border-color: var(--line); background: var(--surface); }
.button.secondary:hover { background: var(--surface-2); }
.button svg { width: 18px; height: 18px; }
.meta { margin-top: 18px; font-size: 14px; color: var(--text-3); }

.hero-shot { margin: 56px auto 0; max-width: 1180px; }

/* window screenshots: rounded like the macOS window they were taken from (35 px at 2880 × 1800) */
.shot { border-radius: 1.215% / 1.944%; box-shadow: var(--shadow); background: #1c1d1f; }
.shot.sheet { border-radius: 1.944% / 2.734%; }

/* ---- highlights ---- */
.highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 80px 0 0;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.highlights div { background: var(--surface); padding: 26px 24px; }
.highlights strong { display: block; font-size: 1.6rem; letter-spacing: -0.02em; margin-bottom: 4px; }
.highlights span { color: var(--text-2); font-size: 15px; }

/* ---- feature rows ---- */
section { scroll-margin-top: 72px; }
.features { padding: 40px 0; }
.row { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; padding: 64px 0; }
.row.flip { grid-template-columns: 7fr 5fr; }
.row.flip .copy { order: 2; }
.eyebrow { color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; margin: 0 0 10px; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; }
.copy p { color: var(--text-2); margin: 0 0 14px; }
.copy ul { margin: 0; padding: 0; list-style: none; color: var(--text-2); }
.copy li { position: relative; padding-left: 18px; margin: 6px 0; }
.copy li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }

/* ---- cards ---- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 24px 0 80px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s;
}
.card svg { width: 30px; height: 30px; color: var(--accent); margin-bottom: 14px; transition: transform 0.4s var(--spring); }
.card h3 { font-size: 1.12rem; margin: 0 0 8px; }
.card p { margin: 0; color: var(--text-2); font-size: 15px; }

/* ---- questions and answers ---- */
.faq { padding: 8px 0 88px; }
.faq h2 { text-align: center; margin-bottom: 36px; }
.qa-list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 56px; }
.qa h3 { font-size: 1.08rem; margin: 0 0 8px; }
.qa p { margin: 0; color: var(--text-2); font-size: 15px; }

/* ---- privacy band ---- */
.band { background: var(--surface); border-block: 1px solid var(--line); padding: 80px 0; text-align: center; }
.band h2 { max-width: 18em; margin-inline: auto; }
.band p { color: var(--text-2); max-width: 40em; margin: 0 auto 10px; }

/* ---- download ---- */
.download { text-align: center; padding: 96px 0; }
.download .hero-icon { width: 80px; height: 80px; }
.download h2 { margin-bottom: 26px; }
.download ul { list-style: none; padding: 0; margin: 22px 0 0; color: var(--text-3); font-size: 14px; }

/* ---- footer ---- */
footer { border-top: 1px solid var(--line); padding: 28px 0 40px; font-size: 13px; color: var(--text-3); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer a { color: var(--text-2); }
footer .grow { flex: 1; }

/* ---- document pages (privacy) ---- */
.doc { max-width: 760px; padding: 64px 0 96px; }
.doc h1 { font-size: clamp(2rem, 4vw, 2.8rem); text-align: left; margin: 0 0 8px; }
.doc .updated { color: var(--text-3); margin: 0 0 40px; }
.doc h2 { font-size: 1.35rem; margin: 40px 0 12px; }
.doc p, .doc li { color: var(--text-2); }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 6px 0; }

/* ---- motion ----
   Only under html.motion, which the head script sets before the first paint unless reduced motion is
   asked for (and takes back if site.js never runs). Reveals are animations that fill backwards only,
   so once they end, hover transitions own transform again. Only opacity and transform move. */
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise, 28px)); } }
@keyframes pop { from { opacity: 0; transform: scale(0.8); } }
@keyframes from-right { from { opacity: 0; transform: translateX(56px) scale(0.98); } }
@keyframes from-left { from { opacity: 0; transform: translateX(-56px) scale(0.98); } }
@keyframes drift { 50% { transform: translate(3%, 4%) scale(1.08); } }

.motion .hero::before { animation: drift 16s ease-in-out infinite; }
.motion .hero .hero-icon { animation: pop 0.9s var(--spring) backwards; }
.motion .hero h1 { animation: rise 0.9s var(--ease-out) 0.08s backwards; }
.motion .hero .lead { animation: rise 0.9s var(--ease-out) 0.16s backwards; }
.motion .hero .actions { animation: rise 0.9s var(--ease-out) 0.24s backwards; }
.motion .hero .meta { animation: rise 0.9s var(--ease-out) 0.3s backwards; }
.motion .hero-shot { --rise: 72px; animation: rise 1.2s var(--ease-out) 0.36s backwards; }

/* site.js adds .in as each one scrolls into view */
.motion .reveal:not(.in) { opacity: 0; }
.motion .reveal.in { animation: rise 0.9s var(--ease-out) var(--d, 0s) backwards; }
.motion .row .media.in { --d: 0.12s; animation-name: from-right; }
.motion .row.flip .media.in { animation-name: from-left; }
.cards > :nth-child(3n + 2) { --d: 0.08s; }
.cards > :nth-child(3n) { --d: 0.16s; }
.motion .download .wrap.in .hero-icon { animation: pop 0.9s var(--spring) 0.15s backwards; }

.motion .button:hover { transform: translateY(-2px); }
.motion .button.primary:hover { box-shadow: 0 10px 28px color-mix(in srgb, var(--accent-fill) 40%, transparent); }
.motion .button:active { transform: scale(0.98); transition-duration: 0.08s; }
.motion .card:hover {
  transform: translateY(-4px); box-shadow: var(--lift);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.motion .card:hover svg { transform: translateY(-2px) scale(1.1); }

/* where scroll-driven animations exist: the hero screenshot leans back and settles flat as the page
   scrolls, and the bar's edge appears once the page has moved */
@supports (animation-timeline: scroll()) {
  @keyframes settle { from { transform: perspective(2400px) rotateX(16deg) scale(0.93); } }
  @keyframes edge { from { border-bottom-color: transparent; } }
  .motion .hero-shot img {
    transform-origin: 50% 100%;
    animation: settle linear both; animation-timeline: scroll(root); animation-range: 0 60vh;
  }
  .nav { animation: edge linear both; animation-timeline: scroll(root); animation-range: 0 48px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (max-width: 900px) {
  .row, .row.flip { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
  .row.flip .copy { order: 0; }
  .motion .row .media.in, .motion .row.flip .media.in { animation-name: rise; }
  .cards { grid-template-columns: 1fr 1fr; }
  .qa-list { grid-template-columns: 1fr; }
  .highlights { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  .nav-links { display: none; }
  .lang-switch { margin-left: auto; }
  .hero { padding-top: 56px; }
  .hero-icon { width: 84px; height: 84px; }
  .cards { grid-template-columns: 1fr; }
  .highlights div { padding: 20px 16px; }
  .highlights strong { font-size: 1.3rem; }
}