/* 极简账本官网。颜色取自 App 的 scripts/gen_colors.py：底色 bgBase、文字 textPrimary / textSecondary、
   卡片 cardHome、分割线 hairline；首页背后的光是琥珀（glowAmber），和明细页 Hero 背后的光一样画法。
   字体和 App 一样用系统圆体，不加载网络字体。 */

:root {
  --bg: #f7f3ec;
  --fg: #1a1917;
  --fg2: #6e695f;
  --line: rgba(26, 25, 23, 0.07);
  --card: #fffdf9;
  --seg: rgba(26, 25, 23, 0.06);
  --sel-bg: #1a1917;
  --sel-fg: #ffffff;
  --glow: rgba(240, 176, 84, 0.3);
  --glow-alt: rgba(240, 158, 124, 0.14);
  --shade: rgba(40, 28, 10, 0.22);
  --sans: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --page: 920px;
  /* iOS 图标的连续圆角，n = 5 的超椭圆 */
  --squircle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 50L99.9 68.8L99.7 74.8L99.3 79.1L98.8 82.6L98.1 85.4L97.2 87.9L96.2 90L94.9 91.9L93.5 93.5L91.9 94.9L90 96.2L87.9 97.2L85.4 98.1L82.6 98.8L79.1 99.3L74.8 99.7L68.8 99.9L50 100L31.2 99.9L25.2 99.7L20.9 99.3L17.4 98.8L14.6 98.1L12.1 97.2L10 96.2L8.1 94.9L6.5 93.5L5.1 91.9L3.8 90L2.8 87.9L1.9 85.4L1.2 82.6L0.7 79.1L0.3 74.8L0.1 68.8L0 50L0.1 31.2L0.3 25.2L0.7 20.9L1.2 17.4L1.9 14.6L2.8 12.1L3.8 10L5.1 8.1L6.5 6.5L8.1 5.1L10 3.8L12.1 2.8L14.6 1.9L17.4 1.2L20.9 0.7L25.2 0.3L31.2 0.1L50 0L68.8 0.1L74.8 0.3L79.1 0.7L82.6 1.2L85.4 1.9L87.9 2.8L90 3.8L91.9 5.1L93.5 6.5L94.9 8.1L96.2 10L97.2 12.1L98.1 14.6L98.8 17.4L99.3 20.9L99.7 25.2L99.9 31.2Z'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0a09;
    --fg: #f4f1ec;
    --fg2: #8f897f;
    --line: rgba(244, 241, 236, 0.1);
    --card: rgba(40, 37, 34, 0.55);
    --seg: rgba(255, 255, 255, 0.08);
    --sel-bg: #f4f1ec;
    --sel-fg: #0b0a09;
    --glow: rgba(170, 86, 30, 0.6);
    --glow-alt: rgba(120, 56, 20, 0.25);
    --shade: rgba(0, 0, 0, 0.75);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

::selection { background: rgba(240, 176, 84, 0.35); }

a {
  color: var(--fg);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.22em;
}
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 4px; }

img { max-width: 100%; display: block; }

.wrap {
  width: 100%;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 顶栏：右边是 App 里「叠放 | 展开」那种两段胶囊 */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 18px;
  position: relative;
  z-index: 1;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
}
.brand img {
  width: 28px;
  height: 28px;
  -webkit-mask: var(--squircle) center / 100% 100% no-repeat;
  mask: var(--squircle) center / 100% 100% no-repeat;
}
.top nav {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--seg);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.top nav a {
  padding: 5px 13px;
  border-radius: 999px;
  color: var(--fg2);
  text-decoration: none;
  white-space: nowrap;
}
.top nav a:hover { color: var(--fg); }
.top nav a[aria-current] { background: var(--sel-bg); color: var(--sel-fg); }

/* 首页：图标、名字居中，背后一团琥珀色的光，和账本明细页的 Hero 一样：浅色两层，深色一层从顶上下来 */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: 64px 72px;
  text-align: center;
  --icon: 136px;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -80px;
  bottom: -40px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 52% at 50% 30%, var(--glow), transparent),
    radial-gradient(ellipse 60% 42% at 12% 52%, var(--glow-alt), transparent);
}
@media (prefers-color-scheme: dark) {
  .hero::before {
    background: radial-gradient(ellipse 80% 62% at 50% -4%, var(--glow), var(--glow-alt) 45%, transparent);
  }
}
.hero .icon {
  width: var(--icon);
  height: var(--icon);
  margin: 0 auto 32px;
  -webkit-mask: var(--squircle) center / 100% 100% no-repeat;
  mask: var(--squircle) center / 100% 100% no-repeat;
}
/* 投影放在外层：mask 会把图标自己的投影一起切掉 */
.hero picture { display: block; width: fit-content; margin-inline: auto; filter: drop-shadow(0 16px 24px var(--shade)); }
.hero h1 {
  margin: 0;
  font-weight: 800;
  font-size: 52px;
  line-height: 1.15;
  letter-spacing: 0.04em;
}
.hero .lead {
  margin: 16px 0 0;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
}
.hero .sub {
  margin: 12px auto 0;
  max-width: 30em;
  color: var(--fg2);
}
/* 中文导语只在标点处换行 */
.hero .sub { word-break: keep-all; overflow-wrap: anywhere; }
.badge {
  display: inline-block;
  margin-top: 30px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--seg);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg);
}

/* 截图：五张一排，按 iPhone 屏幕的圆角切；窄屏横着滑 */
.shots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 24px);
  max-width: calc(1080px + 2 * var(--gutter));
  padding-block: 8px 72px;
}
.shots figure { margin: 0; text-align: center; min-width: 0; }
.shots img {
  width: 100%;
  height: auto;
  aspect-ratio: 1320 / 2868;
  border-radius: 15% / 6.9%;
  background: var(--seg);
  box-shadow: 0 0 0 1px var(--line), 0 24px 44px -22px var(--shade);
}
.shots figcaption {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg2);
}

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
  padding-block: 8px 88px;
}
.features > div {
  padding-block: 22px 28px;
  border-top: 1px solid var(--line);
}
.features h3 {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
}
.features p { margin: 0; color: var(--fg2); font-size: 15px; }

/* 正文页：一栏，靠左对齐顶栏 */
.doc { padding-block: 48px 96px; }
.doc > * { max-width: 40rem; }
.doc h1 {
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 36px;
  line-height: 1.3;
}
.doc .meta { margin: 0 0 40px; color: var(--fg2); font-size: 15px; }
.doc .lede { font-size: 17px; }
.doc h2 {
  margin: 48px 0 10px;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.45;
}
.doc p, .doc ul { margin: 0 0 14px; }
.doc ul { padding-left: 1.3em; }
.doc li { margin-bottom: 6px; }
.doc li::marker { color: var(--fg2); }
.doc dl { margin: 0; }
.doc dt {
  margin-top: 22px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.55;
}
.doc dd { margin: 4px 0 0; color: var(--fg2); }

/* 支持页的邮箱：首页卡片那样的一张暖白卡 */
.card {
  margin: 0 0 16px;
  padding: 22px 26px 20px;
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 10px 18px -6px var(--shade), 0 3px 6px -2px color-mix(in srgb, var(--shade) 45%, transparent);
}
.card .big { font-size: 20px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.card .note { margin: 6px 0 0; color: var(--fg2); font-size: 15px; }

/* 页脚 */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  position: relative;
  padding-block: 26px max(40px, env(safe-area-inset-bottom));
  font-size: 13px;
  color: var(--fg2);
}
.foot::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: var(--gutter);
  border-top: 1px solid var(--line);
}
.foot nav { display: flex; gap: 2px 18px; flex-wrap: wrap; }
.foot a { color: var(--fg2); text-decoration: none; }
.foot a:hover { color: var(--fg); }

@media (max-width: 860px) {
  /* 五张截图横着滑，露出下一张的边 */
  .shots {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    padding-block: 8px 56px;
  }
  .shots::-webkit-scrollbar { display: none; }
  .shots::after { content: ""; flex: 0 0 1px; }
  .shots figure { flex: 0 0 min(34%, 240px); scroll-snap-align: center; }
  .shots figure:first-child { scroll-snap-align: start; }
  .shots figure:last-of-type { scroll-snap-align: end; }
}

@media (max-width: 760px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
}

@media (max-width: 600px) {
  .top nav { font-size: 13px; }
  .top nav a { padding: 5px 11px; }
  .top { padding-top: 10px; }
  .hero { padding-block: 44px 52px; --icon: 112px; }
  .hero .icon { margin-bottom: 26px; }
  .hero h1 { font-size: 42px; }
  .hero .lead { font-size: 19px; margin-top: 12px; }
  .badge { margin-top: 24px; }

  .shots figure { flex-basis: 58%; }

  .features { grid-template-columns: minmax(0, 1fr); padding-bottom: 64px; }
  .features > div { padding-block: 18px 22px; }

  .doc { padding-block: 32px 72px; }
  .doc h1 { font-size: 30px; }
  .doc .meta { margin-bottom: 32px; }
  .doc h2 { margin-top: 40px; font-size: 20px; }
  .card { padding: 18px 20px 16px; border-radius: 22px; }
  .card .big { font-size: 18px; }
}

@media (max-width: 360px) {
  .brand { font-size: 16px; gap: 8px; }
  .top nav a { padding: 5px 9px; }
}