/* 听雨官网。颜色取自 App 的 Palette.swift：白天是雨幕的雾灰（day），夜里是水月的池面（pondNight）；
   金色只用在月光上，跟 App 图标的月影一个颜色。 */

/* 思源宋体 Medium 的子集，只含标题里用到的字，site/tools/font.py 生成 */
@font-face {
  font-family: "Tingyu Serif";
  src: url("/assets/tingyu-serif.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --bg: #e7ebec;
  --glow: rgba(255, 255, 255, 0.75);
  --fg: #2b2a28;
  --fg2: rgba(43, 42, 40, 0.7);
  --line: rgba(43, 42, 40, 0.13);
  --accent: #4f6576;
  --sheet: rgba(244, 240, 232, 0.74);
  --seg: rgba(43, 42, 40, 0.07);
  --sel-bg: #2b2a28;
  --sel-fg: #f3eee4;
  --rain: rgba(60, 68, 76, 0.4);
  --moon: rgba(243, 196, 106, 0.3);
  --shade: rgba(52, 65, 75, 0.24);
  --serif: "Tingyu Serif", "Source Han Serif SC", "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", Georgia, serif;
  --sans: -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");
  /* 雨丝：和图标里的笔触一样，向右下斜 0.2，落笔处最实，往尾巴淡下去 */
  --drops: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='240'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='.22'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='url(%23g)' stroke-width='1.2' stroke-linecap='round' fill='none'%3E%3Cpath d='M7 107l5.3 27'/%3E%3Cpath d='M145 6l4.1 21'/%3E%3Cpath d='M144 127l4.3 22'/%3E%3Cpath d='M75 116l4.4 22'/%3E%3Cpath d='M30 17l7.4 37'/%3E%3Cpath d='M126 195l7.5 38'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0d14;
    --glow: rgba(105, 130, 165, 0.17);
    --fg: #f3efe6;
    --fg2: rgba(243, 239, 230, 0.68);
    --line: rgba(243, 239, 230, 0.12);
    --accent: #a9bdd6;
    --sheet: rgba(30, 31, 40, 0.56);
    --seg: rgba(255, 255, 255, 0.08);
    --sel-bg: #f3efe6;
    --sel-fg: #15171c;
    --rain: rgba(205, 216, 232, 0.42);
    --moon: rgba(243, 196, 106, 0.2);
    --shade: rgba(0, 0, 0, 0.55);
    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;
}
:lang(en) body, body:lang(en) { line-height: 1.6; }

::selection { background: rgba(243, 196, 106, 0.4); }

a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.22em;
}
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); 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-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0.14em;
}
.brand:lang(en) { letter-spacing: 0.02em; }
.brand img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  -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;
  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); }

/* 首页：和 App 打开时一样，图标、名字居中；月光从图标里漫出来，后面下着雨 */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: 64px 72px;
  text-align: center;
  --icon: 136px;
  --icon-y: calc(64px + var(--icon) / 2);
}
.rain {
  position: absolute;
  z-index: -1;
  top: -80px;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% calc(var(--icon-y) + 80px), var(--moon), transparent 190px),
    radial-gradient(ellipse 620px 420px at 50% calc(var(--icon-y) + 80px), var(--glow), transparent 75%);
  /* 雨从顶栏下面开始，往四周淡出 */
  -webkit-mask:
    radial-gradient(ellipse 600px 480px at 50% calc(var(--icon-y) + 80px), #000 35%, transparent 100%),
    linear-gradient(transparent 70px, #000 170px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(ellipse 600px 480px at 50% calc(var(--icon-y) + 80px), #000 35%, transparent 100%),
    linear-gradient(transparent 70px, #000 170px);
  mask-composite: intersect;
}
.rain::before,
.rain::after {
  content: "";
  position: absolute;
  inset: -240px 0 0 -48px;
  background: var(--rain);
  -webkit-mask: var(--drops) 0 0 / 180px 240px repeat;
  mask: var(--drops) 0 0 / 180px 240px repeat;
  animation: fall 1.4s linear infinite;
  opacity: 0.55;
  will-change: transform;
}
/* 近处一层：雨丝大一些、落得快一些 */
.rain::after {
  inset: -384px 0 0 -77px;
  -webkit-mask-size: 288px 384px;
  mask-size: 288px 384px;
  -webkit-mask-position: 97px 61px;
  mask-position: 97px 61px;
  animation: fall-near 1.5s linear infinite;
  opacity: 0.9;
}
@keyframes fall { to { transform: translate(48px, 240px); } }
@keyframes fall-near { to { transform: translate(77px, 384px); } }
@media (prefers-reduced-motion: reduce) {
  .rain::before, .rain::after { animation: none; }
}

.hero .icon {
  width: var(--icon);
  height: var(--icon);
  margin: 0 auto 36px;
  border-radius: 22.5%;
  -webkit-mask: var(--squircle) center / 100% 100% no-repeat;
  mask: var(--squircle) center / 100% 100% no-repeat;
}
.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 60px;
  line-height: 1.15;
  letter-spacing: 0.4em;
  padding-left: 0.4em;
}
.hero h1:lang(en) { letter-spacing: 0.04em; padding-left: 0.04em; }
.hero .lead {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.14em;
}
.hero .lead:lang(en) { letter-spacing: 0.01em; }
.hero .sub {
  margin: 12px auto 0;
  max-width: 32em;
  color: var(--fg2);
}
/* 中文导语只在标点处换行，免得把「一幅」拆开 */
.hero .sub:lang(zh) { word-break: keep-all; overflow-wrap: anywhere; }
.badge {
  display: inline-block;
  margin-top: 32px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--seg);
  font-size: 14px;
  line-height: 1.4;
  color: var(--fg);
}

/* 截图：按 iPhone 屏幕的圆角切 */
.shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 4vw, 40px);
  padding-block: 8px 72px;
}
.shots figure { margin: 0; text-align: center; min-width: 0; }
.shots img {
  width: 100%;
  height: auto;
  aspect-ratio: 598 / 1300;
  object-fit: cover;
  border-radius: 15% / 6.9%;
  background: var(--seg);
  box-shadow: 0 0 0 1px var(--line), 0 28px 56px -24px var(--shade);
}
.shots figcaption {
  margin-top: 18px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--fg2);
}
.shots figcaption:lang(en) { letter-spacing: 0.02em; }

.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-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.features h3:lang(en) { letter-spacing: 0; }
.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-family: var(--serif);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.3;
  letter-spacing: 0.12em;
}
.doc h1:lang(en) { letter-spacing: 0.01em; }
.doc .meta { margin: 0 0 40px; color: var(--fg2); font-size: 15px; }
.doc h2 {
  margin: 52px 0 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.45;
  letter-spacing: 0.08em;
}
.doc h2:lang(en) { letter-spacing: 0; }
.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-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0.04em;
}
.doc dt:lang(en) { letter-spacing: 0; }
.doc dd { margin: 4px 0 0; color: var(--fg2); }

/* 支持页的邮箱：App 面板那样的一张纸 */
.card {
  margin: 0 0 16px;
  padding: 22px 26px 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--sheet);
}
.card .big { font-size: 20px; font-weight: 500; 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: 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; }
  .hero { padding-block: 44px 52px; --icon: 112px; --icon-y: calc(44px + var(--icon) / 2); }
  .hero .icon { margin-bottom: 28px; }
  .hero h1 { font-size: 48px; }
  .hero .lead { font-size: 20px; margin-top: 18px; }
  .badge { margin-top: 26px; }

  /* 窄屏上三张截图横着滑，露出下一张的边 */
  .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 64%; scroll-snap-align: center; }
  .shots figure:first-child { scroll-snap-align: start; }
  .shots figure:last-of-type { scroll-snap-align: end; }

  .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: 32px; }
  .doc .meta { margin-bottom: 32px; }
  .doc h2 { margin-top: 44px; font-size: 20px; }
  .card { padding: 18px 20px 16px; border-radius: 20px; }
  .card .big { font-size: 18px; }
}

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