/* Hallmark · genre: playful · macrostructure: Workbench · theme: custom (studied from the app itself)
 * vibe: "云梭软件本身：暖色极光、毛玻璃、晚霞渐变" · paper #f7f3f0 · accent sunset #ff8a3d→#ff4f8b→#8a5cff
 * fonts: 系统字体（苹方 / 微软雅黑），字标用软件里的手写体动画图
 * nav: N5 floating pill · footer: Ft5 statement · enrichment: real screenshots (F5 annotated) · cta: C4 sticky bottom bar
 * 刻意破例：glass 和渐变按钮——这是软件本身的视觉，官网要跟软件一致
 */

:root {
  --paper: #f7f3f0;
  --ink: #1d1d1f;
  --ink-2: #55555d;
  --ink-3: #6b6b74;
  --rule: rgba(29, 29, 31, .10);
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .80);
  --glass-edge: rgba(255, 255, 255, .85);

  /* 软件里的“晚霞”渐变；按钮用压暗一档的，白字对比度 ≥3.5 */
  --sun-1: #ff8a3d;
  --sun-2: #ff4f8b;
  --sun-3: #8a5cff;
  --btn-1: #e8590c;
  --btn-2: #d9366f;
  --btn-3: #7048e8;
  --accent-text: #b4235f;   /* 5.7:1 on paper */
  --focus: #7048e8;

  --aur-1: #ffc9a3;
  --aur-2: #ffb3cf;
  --aur-3: #cdb8ff;
  --aur-4: #bfe0ff;

  --code-bg: #1f1b24;
  --code-fg: #f3eef6;

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 112px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shell: 1120px;
  --gutter: 20px;

  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 140ms;
  --dur-mid: 260ms;

  --shot-shadow: drop-shadow(0 28px 48px rgba(110, 50, 80, .20)) drop-shadow(0 4px 10px rgba(110, 50, 80, .10));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* ---- 背景极光：几团大的径向渐变慢慢飘，跟软件里一样 ---- */
.aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aurora i {
  position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%;
  filter: blur(60px); opacity: .55;
  animation: drift 28s var(--ease-in-out) infinite alternate;
}
.aurora i:nth-child(1) { background: radial-gradient(circle, var(--aur-1), transparent 65%); left: -22vmax; top: -24vmax; }
.aurora i:nth-child(2) { background: radial-gradient(circle, var(--aur-2), transparent 65%); right: -24vmax; top: -10vmax; animation-delay: -9s; }
.aurora i:nth-child(3) { background: radial-gradient(circle, var(--aur-3), transparent 65%); right: -16vmax; bottom: -30vmax; animation-delay: -17s; }
.aurora i:nth-child(4) { background: radial-gradient(circle, var(--aur-4), transparent 65%); left: -26vmax; bottom: -34vmax; opacity: .35; animation-delay: -4s; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); }
}

/* ---- 按钮 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 48px; padding: 0 28px; border: 0; border-radius: var(--radius-pill);
  background: linear-gradient(100deg, var(--btn-1), var(--btn-2) 55%, var(--btn-3));
  color: #fff; font: inherit; font-size: 17px; font-weight: 600; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(217, 54, 111, .55);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(217, 54, 111, .65); filter: saturate(1.08); }
.btn:active { transform: translateY(1px); box-shadow: 0 6px 14px -8px rgba(217, 54, 111, .55); }
.btn.sm { min-height: 36px; padding: 0 18px; font-size: 15px; }
.ghost {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
  border-radius: var(--radius-pill); border: 1px solid var(--glass-edge);
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--ink); font: inherit; font-size: 16px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ghost:hover { background: var(--glass-strong); }
.ghost:active { transform: translateY(1px); }

/* ---- 导航：浮着的毛玻璃胶囊 ---- */
.pill {
  position: fixed; z-index: 20; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 2 * var(--gutter)), 760px);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: 7px 8px 7px 14px; border-radius: var(--radius-pill);
  background: var(--glass); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 8px 30px -14px rgba(110, 50, 80, .35);
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; text-decoration: none; white-space: nowrap; }
.brand img { border-radius: 7px; }
.links { display: flex; gap: var(--space-lg); font-size: 15px; }
.links a { color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out); }
.links a:hover { color: var(--ink); }

/* ---- 首屏 ---- */
.hero {
  max-width: var(--shell); margin: 0 auto; padding: 128px var(--gutter) var(--space-2xl);
  text-align: center;
}
.wordmark { width: min(343px, 70vw); margin: 0 auto -8px; }
h1 span { display: inline-block; }
h1 {
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.4rem); line-height: 1.2; font-weight: 700;
  letter-spacing: -.01em; overflow-wrap: anywhere; min-width: 0;
}
.lede { max-width: 34em; margin: var(--space-md) auto 0; color: var(--ink-2); font-size: clamp(1rem, .95rem + .3vw, 1.125rem); }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xl); }
.meta { margin-top: var(--space-sm); color: var(--ink-3); font-size: 14px; }
.hero-shot { margin-top: var(--space-2xl); }

/* ---- 截图 ---- */
.shot { position: relative; min-width: 0; }
.shot img { filter: var(--shot-shadow); }
.note {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px; border-radius: var(--radius-pill);
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 10px 22px -10px rgba(29, 29, 31, .6);
}
.note::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sun-1), var(--sun-2));
  box-shadow: 0 0 0 3px rgba(255, 79, 139, .35);
}
.n-share { right: 4%; bottom: 19%; }
.n-conn  { left: 31%; top: 74%; }
.n-bt    { left: 36%; top: 7%; }

/* ---- 功能一屏一屏走 ---- */
.tour { max-width: var(--shell); margin: 0 auto; padding: var(--space-2xl) var(--gutter) 0; }
.step {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: var(--space-xl); align-items: center;
  padding: var(--space-2xl) 0;
}
.step.flip { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); }
.step.flip .text { order: 2; }
.step h2, .more h2, .download h2, .first-run h2, .faq h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.3; font-weight: 700;
  letter-spacing: -.005em; overflow-wrap: anywhere; min-width: 0;
}
.step h2::after {
  content: ""; display: block; width: 44px; height: 4px; margin-top: 14px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sun-1), var(--sun-2), var(--sun-3));
}
.step p { margin-top: var(--space-md); color: var(--ink-2); }

.more { padding: var(--space-2xl) 0 var(--space-xl); }
.more ul {
  list-style: none; margin-top: var(--space-lg);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-xl);
}
.more li { padding: 14px 0 14px 22px; border-top: 1px solid var(--rule); position: relative; color: var(--ink-2); }
.more li::before {
  content: ""; position: absolute; left: 2px; top: 1.45em; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sun-1), var(--sun-3));
}

/* ---- 下载 ---- */
.download, .first-run, .faq { max-width: var(--shell); margin: 0 auto; padding: var(--space-3xl) var(--gutter) 0; }
.sub { margin-top: var(--space-xs); color: var(--ink-2); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm);
  padding: var(--space-lg); border-radius: var(--radius-lg);
  background: var(--glass); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  transition: border-color var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out);
}
.card h3 { font-size: 20px; line-height: 1.4; font-weight: 700; }
.card .req { color: var(--ink-3); font-size: 14px; line-height: 1.6; flex: 1; }
.card .dl-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin-top: var(--space-xs); }
.card .pwd { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.card .pwd code { font-family: var(--mono); font-size: 15px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: rgba(29, 29, 31, .07); color: var(--ink); }
.card .pwd.copied::after { content: "已复制"; margin-left: 6px; color: var(--accent-text); font-weight: 600; }
.card .others { font-size: 14px; color: var(--ink-3); }
.card .others a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
.card .others a:hover { text-decoration-thickness: 2px; }
.card.is-mine { background: var(--glass-strong); border-color: var(--btn-2); }
.card.is-mine h3::after {
  content: "你的电脑"; margin-left: 10px; padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; vertical-align: 3px;
}
.fine { margin-top: var(--space-lg); max-width: 46em; }
.fine p { margin-top: var(--space-xs); color: var(--ink-3); font-size: 15px; line-height: 1.7; }
.fine code, .faq code { font-family: var(--mono); font-size: .92em; padding: 1px 6px; border-radius: 6px; background: rgba(29, 29, 31, .07); color: var(--ink); }
.fine details { margin-top: var(--space-md); }
.fine summary { cursor: pointer; color: var(--ink-2); font-size: 15px; width: fit-content; }
.sums { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--space-md); margin-top: var(--space-sm); font-size: 13px; }
.sums dt { color: var(--ink-3); white-space: nowrap; }
.sums dd { font-family: var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.phone-note {
  margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md);
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
}
.phone-note p { color: var(--ink-2); }
.phone-note .ghost { margin-top: var(--space-sm); min-height: 42px; }

/* ---- 第一次打开 ---- */
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-xl); }
.col h3 { font-size: 20px; font-weight: 700; }
.dialog { width: min(300px, 80%); margin-top: var(--space-md); }
.dialog img { filter: drop-shadow(0 18px 30px rgba(29, 29, 31, .18)); }
.col ol { margin-top: var(--space-md); padding-left: 1.4em; color: var(--ink-2); }
.col li { padding: 4px 0; }
.col li::marker { color: var(--accent-text); font-weight: 700; }
.or { margin-top: var(--space-md); color: var(--ink-3); font-size: 15px; }
.cmd {
  display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs);
  padding: 10px 10px 10px 16px; border-radius: var(--radius-sm);
  background: var(--code-bg); color: var(--code-fg);
}
.cmd code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.copy {
  flex: none; min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .14); color: inherit; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out);
}
.copy:hover { background: rgba(255, 255, 255, .24); }
.copy.done { background: var(--btn-2); color: #fff; }
.phone-note .copy { min-height: 40px; padding: 0 18px; font-size: 15px; background: var(--ink); color: #fff; }
.phone-note .copy.done { background: var(--btn-2); color: #fff; }

/* ---- 常见问题 ---- */
.faq h2 { margin-bottom: var(--space-lg); }
.faq details { border-top: 1px solid var(--rule); max-width: 46em; }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative;
  font-size: 18px; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--dur-mid) var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p { padding: 0 0 18px; color: var(--ink-2); }
.faq details p + p { margin-top: -6px; }

/* ---- 页脚 ---- */
footer { max-width: var(--shell); margin: 0 auto; padding: var(--space-3xl) var(--gutter) var(--space-2xl); }
.statement {
  max-width: 22em; font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); line-height: 1.55; font-weight: 600;
  letter-spacing: -.005em; overflow-wrap: anywhere;
}
.foot-meta { margin-top: var(--space-lg); color: var(--ink-3); font-size: 14px; }
.foot-meta a { color: var(--ink-2); text-underline-offset: 3px; }

/* ---- 往下滚以后的底部下载条 ---- */
.dock {
  position: fixed; z-index: 19; left: 50%; bottom: 16px;
  display: flex; align-items: center; gap: var(--space-md);
  padding: 7px 8px 7px 20px; border-radius: var(--radius-pill);
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px -12px rgba(110, 50, 80, .4);
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transform: translate(-50%, 140%); opacity: 0;
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-mid) var(--ease-out);
}
.dock.show { transform: translate(-50%, 0); opacity: 1; }
.dock[hidden] { display: none; }

/* ---- 窄屏 ---- */
@media (max-width: 880px) {
  .links { display: none; }
  .hero { padding-top: 104px; }
  .step, .step.flip { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-xl) 0; }
  .step.flip .text { order: 0; }
  .note { display: none; }
  .more ul { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .download, .first-run, .faq { padding-top: var(--space-2xl); }
}
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .btn { padding: 0 22px; }
  .ghost { padding: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora i { animation: none; }
  .btn, .ghost, .dock, .card, .faq summary::after { transition: opacity 120ms linear; }
  .btn:hover, .btn:active, .ghost:active { transform: none; }
}

/* JS 复制时用的临时文本框 */
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }