/* 官网首页：整页是一天。没有 html.day-on 时（减少动态、不支持 3D、旧手机）用下面的静态天空图，内容一样完整。 */
@font-face { font-family: Nunito; font-weight: 500; src: url(/fonts/nunito-500.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Nunito; font-weight: 700; src: url(/fonts/nunito-700.woff2) format("woff2"); font-display: swap; }

:root {
  --ink: #062A2D;
  --ink-soft: #0B3B40;
  --paper: #FFFFFF;
  --paper-soft: #DDF3F0;
  --seafoam: #48D3CF;
  --night: #03222A;
  --edge: max(8vw, calc((100vw - 1400px) / 2));
  --ph: min(86vh, 800px);
  --pw: calc(var(--ph) * .462);
  --pr: calc(var(--edge) + 3.5vw);
  --day-font: Nunito, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

html { background: #003C41; scroll-behavior: auto; }
body.day-page { background: var(--night); font-family: var(--day-font); color: var(--paper); }

#sea { display: none; }
.day-on #sea { display: block; position: fixed; inset: 0; width: 100%; height: 100%; }

.say h1, .say h2, .say p { margin: 0; }
.say h1 { font-size: clamp(36px, min(8.6vw, 15vh), 128px); font-weight: 700; letter-spacing: -.015em; line-height: 1.06; white-space: nowrap; color: var(--paper); }
.say .mark { display: block; width: 72px; height: 72px; margin: 0 0 4px -8px; }
.say .slogan { margin-top: 16px; font-size: clamp(20px, 2.1vw, 28px); font-weight: 500; line-height: 1.4; color: var(--paper-soft); }
.say h2 { font-size: clamp(30px, 4.2vw, 60px); font-weight: 700; line-height: 1.16; letter-spacing: -.01em; }
.say h2, .say p { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.say h2 { font-feature-settings: "palt"; }
.chapter .lead { margin-top: 20px; max-width: 24em; font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; line-height: 1.6; }
.chapter .note { margin-top: 12px; max-width: 26em; font-size: 16px; font-weight: 500; line-height: 1.5; }
.chapter.day-ink h2 { color: var(--ink); }
.chapter.day-ink p { color: var(--ink-soft); }
.chapter.night-ink h2 { color: var(--paper); }
.chapter.night-ink p { color: var(--paper-soft); }

.day-page .buttons { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 32px; max-width: 560px; }
.day-page .btn { width: auto; flex: 0 0 auto; min-height: 48px; padding: 0 24px; border-radius: 16px; font-weight: 700; font-size: 17px; box-shadow: none; }
.day-page .btn-primary { background: var(--seafoam); color: var(--ink); }
.day-page .btn-primary:hover { background: #63DEDA; color: var(--ink); }
.day-page .btn-secondary, .day-page #btn-android.btn-secondary { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .72); }
.hero .btn-secondary { background: rgba(0, 44, 49, .42); }
.day-page .btn-secondary:hover { background: rgba(255, 255, 255, .12); color: var(--paper); }
.day-page .btn:focus-visible, .day-page a:focus-visible, .day-page summary:focus-visible, .day-page .tab:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.day-page .web-hint { display: none; flex-basis: 100%; margin: 0; font-size: 16px; line-height: 1.5; color: var(--paper-soft); }
body[data-device="ios"] .web-hint { display: block; }
.day-page .soon-notice { margin-top: 20px; max-width: 34em; padding: 0; background: none; border: 0; font-size: 16px; line-height: 1.5; color: var(--paper); }
.day-page .soon-notice[hidden] { display: none; }
.day-page .version { margin-top: 12px; font-size: 16px; color: var(--paper-soft); }
.day-nav { position: absolute; z-index: 3; top: 12px; right: var(--edge); display: flex; gap: 4px; }
html:not(.day-on) .day-nav { position: static; justify-content: flex-end; padding: 12px var(--edge) 0; background: #003C41; }
.day-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 16px; font-weight: 700; color: var(--paper); text-decoration: none; }
.day-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.day-phone { display: none; }
.still { display: block; width: min(66vw, 280px); margin: 32px auto 0; aspect-ratio: 390 / 844; border-radius: 34px; border: 6px solid #082124; overflow: hidden; background: #F2F5F6; }
.still img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 静态版：每段一张天空图，文字在上面的天空部分 */
html:not(.day-on) .say { padding: 12vh 8vw 8vh; min-height: 100vh; background-size: cover; background-position: center bottom; }
html:not(.day-on) .hero { background-image: url(/images/sky/dawn.webp); }
html:not(.day-on) #s1 { background-image: url(/images/sky/morning.webp); }
html:not(.day-on) #s2 { background-image: url(/images/sky/noon.webp); }
html:not(.day-on) #s3 { background-image: url(/images/sky/dusk.webp); }
html:not(.day-on) #s4 { background-image: url(/images/sky/nightfall.webp); }
html:not(.day-on) #s5 { background-image: url(/images/sky/night.webp); }
@media (max-width: 760px) {
  html:not(.day-on) .hero { background-image: url(/images/sky/dawn-tall.webp); }
  html:not(.day-on) #s1 { background-image: url(/images/sky/morning-tall.webp); }
  html:not(.day-on) #s2 { background-image: url(/images/sky/noon-tall.webp); }
  html:not(.day-on) #s3 { background-image: url(/images/sky/dusk-tall.webp); }
  html:not(.day-on) #s4 { background-image: url(/images/sky/nightfall-tall.webp); }
  html:not(.day-on) #s5 { background-image: url(/images/sky/night-tall.webp); }
}

/* 动画版：整段黏在画面上，字固定在天空区域，绝不进入海面 */
.day-on .track { position: relative; z-index: 1; height: 1050vh; }
.day-on .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.day-on .say { position: absolute; left: var(--edge); right: var(--edge); padding: 0; min-height: 0; background: none; }
.day-on .hero { top: 13vh; }
.day-on .chapter { top: 26vh; right: calc(var(--pr) + var(--pw) + 4vw); }
.day-on .still { display: none; }
.day-on #s5 { right: var(--edge); top: 20vh; }
.day-on .day-phone { display: block; position: absolute; right: var(--pr); top: 50%; height: var(--ph); margin-top: calc(var(--ph) / -2); aspect-ratio: 390 / 844; border-radius: 46px; padding: 9px; background: #082124; box-shadow: 0 40px 80px -30px rgba(3, 40, 44, .55), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.day-phone .screen { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: #F2F5F6; }
.day-phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 看完一天之后：静静的夜色，方便阅读 */
.after::before { content: ""; position: absolute; left: 0; right: 0; top: -140px; height: 140px; background: linear-gradient(rgba(3, 34, 42, 0), var(--night)); pointer-events: none; }
.after { position: relative; z-index: 2; background: var(--night); color: var(--paper); --text: #EAF6F4; --muted: #A9C7C6; --line: rgba(255, 255, 255, .14); }
.after .section { padding: 72px 0; background: transparent; }
.after h2 { color: var(--paper); font-size: clamp(28px, 3.4vw, 40px); }
.after .wrap { width: min(680px, calc(100vw - 40px)); }
.after .tabs { display: flex; width: 100%; background: rgba(255, 255, 255, .08); }
.after .tab { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; }
.after .tab { color: #CBE4E2; background: transparent; }
.after .tab[aria-selected="true"] { background: var(--seafoam); color: var(--ink); }
.after .steps li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); box-shadow: none; }
.after .steps li::before { background: var(--seafoam); color: var(--ink); }
.after .steps strong { color: var(--paper); }
.after .steps span, .after .panel-note { color: #CBE4E2; }
#ios-web-note:not([hidden]) + .steps { display: none; }
.after .footer .brand span, .after .footer .copy { white-space: nowrap; }
.after .panel-note { background: rgba(255, 255, 255, .06); border: 0; }
.after .callout { background: rgba(72, 211, 207, .12); color: #DDF3F0; border: 0; }
.after .callout svg { stroke: var(--seafoam); }
.after .faq details { border-color: rgba(255, 255, 255, .14); }
.after .faq summary { color: var(--paper); }
.after .faq summary::after { color: var(--seafoam); background: none; }
.after .faq details p { color: #CBE4E2; }
.after a { color: var(--seafoam); }
.after .footer { background: transparent; border-top: 1px solid rgba(255, 255, 255, .14); color: #CBE4E2; }
.after .footer .brand { color: var(--paper); }
.after .footer .copy, .after .footer .copy a, .after .contact { color: #CBE4E2; }
.after .contact a { color: var(--seafoam); font-weight: 700; }

/* 电脑版说明小字至少 16px（项目负责人 2026-11-09） */
@media (min-width: 761px) {
  .after .steps span, .after .panel-note, .after .callout span, .after .contact, .after .footer .copy { font-size: 16px; }
}

/* 静态图的月亮可能在按钮后面，字要有底 */
html:not(.day-on) #s5 .btn-secondary { background: rgba(3, 34, 42, .86); }

/* 静态版在宽屏：手机放右边，和动画版同一个位置 */
@media (min-width: 1024px) {
  html:not(.day-on) .chapter { position: relative; }
  html:not(.day-on) .chapter .still { position: absolute; right: var(--pr); top: 50%; width: min(var(--pw), 320px); margin: 0; transform: translateY(-50%); }
  html:not(.day-on) .chapter h2, html:not(.day-on) .chapter p { max-width: min(52vw, 24em); }
}

@media (max-width: 760px) {
  :root { --edge: 20px; --ph: min(60vh, 500px); }
  .say h1 { font-size: min(11.4vw, 56px); }
  html:not(.day-on) .say { padding: 9vh 20px 6vh; }
  .chapter h2 { font-size: clamp(25px, 7.2vw, 34px); }
  .chapter .lead { margin-top: 10px; font-size: 16px; line-height: 1.5; }
  .chapter .note { margin-top: 6px; font-size: 13px; }
  .day-page .btn { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
  .day-page .buttons > .btn:first-of-type { flex-basis: 100%; }
  .day-on .track { height: 980vh; }
  .day-on .say { left: 20px; right: 20px; }
  .day-on .hero { top: 11vh; }
  .day-on .chapter { top: 7vh; right: 20px; }
  .day-on #s5 { top: 12vh; right: 20px; }
  .day-on .day-phone { right: auto; left: 50%; top: auto; bottom: 3vh; margin: 0 0 0 calc(var(--pw) / -2); border-radius: 34px; padding: 6px; }
  .day-phone .screen { border-radius: 28px; }
}
@media (max-width: 760px) and (max-height: 760px) {
  :root { --ph: 50vh; }
}
@media (max-width: 760px) and (max-height: 620px) {
  :root { --ph: 44vh; }
  .say .mark { display: none; }
  .day-on .hero { top: 58px; }
  .day-on .chapter { top: 5vh; }
  .day-page .buttons { margin-top: 20px; }
}