/* Eternhour 全站样式。首页、应用页、文件页共用这一份。 */
@font-face { font-family: 'Jost'; src: url(fonts/jost-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'Newsreader'; src: url(fonts/newsreader-latin-opsz-normal.woff2) format('woff2'); font-weight: 200 800; font-display: block; }
@font-face { font-family: 'Newsreader'; src: url(fonts/newsreader-latin-opsz-italic.woff2) format('woff2'); font-weight: 200 800; font-style: italic; font-display: block; }
@font-face { font-family: 'Greek Sub'; src: url(fonts/eb-garamond-greek-wght-normal.woff2) format('woff2'); font-weight: 400 800; unicode-range: U+0370-03FF, U+1F00-1FFF; font-display: swap; }
@font-face { font-family: 'Song Sub'; src: url(fonts/noto-serif-sc-zh.woff2) format('woff2'); font-weight: 200 900; font-display: block; }
@font-face { font-family: 'Hei Sub'; src: url(fonts/noto-sans-sc-zh.woff2) format('woff2'); font-weight: 100 900; font-display: block; }

:root {
  --night: #0c0f17;
  --grain: #eadcc3;
  --glow: #fff4e2;
  --dim: rgba(234, 220, 195, .6);
  --faint: rgba(234, 220, 195, .34);
  --sand: #ebe2d0;
  --ink: #14161d;
  --body: #46443e;
  --soft: #857d6c;
  --line: #d6ccb8;
  --serif: 'Newsreader', 'Greek Sub', Georgia, serif;
  --ui: 'Jost', system-ui, sans-serif;
  --pad: clamp(22px, 5.6vw, 96px);
  --bar: 88px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { background: var(--sand); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.45; -webkit-font-smoothing: antialiased; font-optical-sizing: auto; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
::selection { background: var(--ink); color: var(--sand); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 3px; }
[id] { scroll-margin-top: 84px; }
.eyebrow { margin: 0; font-family: var(--ui); font-weight: 500; font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--soft); }
.skip { position: absolute; left: var(--pad); top: -60px; z-index: 20; padding: 10px 16px; background: var(--ink); color: var(--sand); font: 500 14px var(--ui); border-radius: 0 0 8px 8px; transition: top .2s; }
.skip:focus { top: 0; }
.arrow { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.16em; transition: transform .35s var(--ease); }
[dir=rtl] .arrow { transform: scaleX(-1); }

/* 标志：字标里的 O 是一只环，尺寸按 Jost 500 量好写死（tools/wordmark-metrics.mjs） */
.wm { font-family: 'Jost', sans-serif; font-weight: 500; letter-spacing: .15em; white-space: nowrap; }
.wm .o { display: inline-block; width: .7751em; height: .7751em; margin: 0 .1634em 0 .0134em; vertical-align: -.036em; }
.wm .o svg, .mk svg, .dial svg { width: 100%; height: 100%; overflow: visible; }
.brand { display: inline-flex; align-items: center; gap: .62em; font-family: var(--ui); font-weight: 500; font-size: 19px; white-space: nowrap; }
.brand .mk { width: 1.5em; height: 1.5em; flex: none; }
.navs { display: flex; gap: clamp(18px, 2.6vw, 42px); font-family: var(--ui); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
.navs a { position: relative; padding: 6px 0; transition: color .25s; }
.navs a::after { content: ''; position: absolute; left: 0; right: .2em; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.navs a:hover::after, .navs a[aria-current]::after { transform: scaleX(1); }

/* 普通页面的页眉（沙色底） */
.bar { display: flex; justify-content: space-between; align-items: center; height: var(--bar); padding: 0 var(--pad); color: var(--ink); }
.bar .navs { color: var(--soft); }
.bar .navs a:hover, .bar .navs a[aria-current] { color: var(--ink); }
/* 首页往下滑以后贴在顶上的那一条 */
.stick { position: fixed; z-index: 30; left: 0; right: 0; top: 0; height: 64px; background: rgba(235, 226, 208, .86); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgba(20, 22, 29, .08); transform: translateY(-101%); transition: transform .45s var(--ease); }
.stick.show { transform: none; }
.stick .brand { font-size: 17px; }

/* —— 首页首屏：标志上的那只环放大到天边，一粒沙沿着它走，一小时走完 —— */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; background: var(--night); color: var(--grain); overflow: hidden; touch-action: pan-y; }
#sky, #globe { position: absolute; inset: 0; width: 100%; height: 100%; }
.top { position: absolute; z-index: 4; left: var(--pad); right: var(--pad); top: 0; height: var(--bar); display: flex; justify-content: space-between; align-items: center; }
.top .navs { color: var(--dim); }
.top .navs a:hover { color: var(--grain); }
.copy { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--bar) + (var(--top, 61.5vh) - var(--bar)) * .45); transform: translateY(-50%); padding: 0 var(--pad); text-align: center; }
.pre { margin: 0 0 clamp(12px, min(1.7vw, 2.4vh), 26px); font-style: italic; font-weight: 300; color: var(--dim); font-size: clamp(16.5px, 1.42vw, 21px); line-height: 1.5; }
.pre span { display: block; }
.hero h1 { margin: 0; font-weight: 300; font-style: italic; font-size: clamp(52px, min(7.7vw, 14vh), 132px); line-height: 1; letter-spacing: -.022em; }
.by { margin: clamp(18px, min(2.6vw, 3.8vh), 40px) 0 0; font-family: var(--ui); color: var(--dim); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; }
.by i { font-style: normal; padding: 0 .7em; opacity: .5; }
.sun { position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .7s; will-change: transform; }
.sun.show { opacity: 1; }
/* 往下滚的时候（脚本把滚了多少写进 --p），那粒发光的沙跟着天边的沙一起淡出 */
.hero.on > .sun.show { opacity: calc(1 - var(--p, 0) * 3.2); transition: opacity .2s; }
.sun i { position: absolute; left: -5.5px; top: -5.5px; width: 11px; height: 11px; border-radius: 50%; background: var(--glow);
  box-shadow: 0 0 0 1px rgba(255, 244, 226, .25), 0 0 14px 4px rgba(255, 240, 214, .7), 0 0 60px 20px rgba(255, 236, 205, .26), 0 0 180px 60px rgba(255, 236, 205, .1); transition: transform 1.1s var(--ease), box-shadow 1.1s; }
/* 整点：沙粒跑回起点的那几秒，它自己更亮一些；表盘的刻度和页脚的整环也跟着亮一下 */
.hero.turn > .sun i { transform: scale(1.5); box-shadow: 0 0 0 1px rgba(255, 244, 226, .3), 0 0 22px 8px rgba(255, 240, 214, .85), 0 0 90px 34px rgba(255, 236, 205, .4), 0 0 260px 90px rgba(255, 236, 205, .18); }
.turn .dial .ticks { animation: turn-ticks 3.4s ease-out; }
.turn .whole { animation: turn-ring 3.4s ease-out; }
@keyframes turn-ticks { 14% { opacity: 1; } }
@keyframes turn-ring { 16% { filter: brightness(1.6) drop-shadow(0 0 22px rgba(255, 236, 205, .45)); } }
.hero > .sun::before { content: ''; position: absolute; left: -380px; top: -124px; width: 760px; height: 180px; background: radial-gradient(ellipse closest-side, var(--halo, rgba(255, 236, 205, .16)), rgba(255, 236, 205, 0)); opacity: 0; transition: opacity 1.6s; pointer-events: none; }
.hero.on > .sun::before { opacity: 1; }
.sun b { position: absolute; left: 0; bottom: 13px; width: 1px; height: 13px; margin-left: -.5px; background: linear-gradient(to top, var(--dim), transparent); opacity: 0; transition: opacity 1s .2s; }
.sun span { position: absolute; left: 0; bottom: 32px; transform: translateX(-50%); font: 400 11.5px/1 'Jost', sans-serif; letter-spacing: .2em; padding-left: .2em; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transition: opacity 1s .2s; }
.hero.on .sun b, .hero.on .sun span { opacity: 1; }
.fall { position: absolute; z-index: 3; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(110px, 17vh, 170px); display: block; }

/* —— 沙色的各段 —— */
section.band { padding: clamp(64px, 8.4vw, 132px) var(--pad) 0; }
.lead { margin-top: clamp(22px, 2.8vw, 40px); max-width: 17.5em; font-weight: 300; font-size: clamp(31px, 4.3vw, 66px); line-height: 1.1; letter-spacing: -.018em; }
.lead p { margin: 0; }
.lead p + p { margin-top: .42em; }
.about .lead p:first-child { color: var(--soft); font-style: italic; }

.ways ol { list-style: none; margin: clamp(22px, 2.6vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(20px, 2.6vw, 44px); counter-reset: way; }
.ways.two ol { grid-template-columns: repeat(2, 1fr); row-gap: clamp(30px, 3.6vw, 56px); }
.ways li { border-top: 1px solid var(--line); padding-top: 18px; counter-increment: way; }
.ways li::before { content: counter(way, decimal-leading-zero); font: 400 12.5px 'Jost', sans-serif; letter-spacing: .2em; color: var(--soft); }
.ways h3 { margin: clamp(24px, 3.4vw, 54px) 0 10px; font-weight: 400; font-size: clamp(23px, 1.95vw, 30px); line-height: 1.15; letter-spacing: -.012em; }
.ways.two h3 { margin-top: clamp(16px, 1.6vw, 26px); }
.ways li p { margin: 0; color: var(--body); font-size: 17.5px; line-height: 1.5; max-width: 30em; }

.work .head { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 22px; margin-bottom: clamp(22px, 2.6vw, 36px); }
.work .note { font-style: italic; color: var(--soft); font-size: 17px; }
.cards { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; height: clamp(400px, 34vw, 500px); }
.cards li { flex: 1 1 0; min-width: 0; transition: flex-grow .6s cubic-bezier(.3, .9, .2, 1); }
.cards li.open { flex-grow: 2.45; }
.card { position: relative; display: block; height: 100%; border-radius: 16px; overflow: hidden; background: var(--bg); color: #f3ecdf; }
.card img { position: absolute; left: 50%; top: 40%; width: 170px; height: 170px; max-width: none; transform: translate(-50%, -50%) scale(.82); transition: transform .6s cubic-bezier(.3, .9, .2, 1);
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); }
.open .card img { transform: translate(-50%, -50%) scale(1.1); }
.card .txt { position: absolute; left: 16px; right: 10px; bottom: 16px; }
.card .nm { display: block; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.15; letter-spacing: -.005em; white-space: nowrap; }
.card .ln { display: block; margin-top: 3px; font-style: italic; font-size: 16px; line-height: 1.25; color: rgba(243, 236, 223, .72); white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s; }
.open .card .ln { opacity: 1; transform: none; transition-delay: .18s; }
.card .no { position: absolute; left: 16px; top: 15px; font: 400 12px 'Jost', sans-serif; letter-spacing: .2em; color: rgba(243, 236, 223, .5); }
.card .arrow { position: absolute; right: 15px; top: 14px; width: 18px; height: 18px; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--ease); }
.open .card .arrow { opacity: .85; transform: none; transition-delay: .18s; }
.cards .next { position: relative; flex: .42 1 0; border: 1.5px dashed #c9bea7; border-radius: 16px; }
.cards .next::before, .cards .next::after { content: ''; position: absolute; left: 50%; top: 40%; width: 15px; height: 1.5px; margin: -.75px 0 0 -7.5px; background: #b3a78e; }
.cards .next::after { transform: rotate(90deg); }

.index { margin: clamp(26px, 3vw, 44px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.index a { display: grid; grid-template-columns: 3.4em minmax(7.5em, 1fr) 2.7fr minmax(7em, 1fr) 1.3em; align-items: baseline; column-gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); transition: padding .35s var(--ease); }
.index .no, .index .sp { font-family: 'Jost', sans-serif; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--soft); }
.index .nm { font-size: clamp(20px, 1.7vw, 25px); letter-spacing: -.008em; }
.index .ln { color: var(--body); font-size: 17.5px; }
.index .arrow { color: var(--soft); align-self: center; }
.index a:hover { padding-left: 12px; }
.index a:hover .arrow { transform: translateX(5px); color: var(--ink); }

.name { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(30px, 5vw, 96px); align-items: center; }
.name .lead { max-width: 12em; }
.name .say { margin: clamp(18px, 2vw, 30px) 0 0; max-width: 30em; color: var(--body); font-size: clamp(18.5px, 1.5vw, 22px); line-height: 1.5; }
.name .say p { margin: 0; }
.name .say p + p { margin-top: .5em; }
.dialbox { justify-self: center; text-align: center; }
.dial { width: clamp(210px, 23vw, 330px); aspect-ratio: 1; margin: 0 auto; color: var(--ink); }
.dial .ticks { opacity: .42; }
.now { margin: clamp(16px, 1.8vw, 26px) 0 0; font-family: var(--ui); font-size: 12.5px; letter-spacing: .14em; color: var(--soft); font-variant-numeric: tabular-nums; }
.now span { display: block; }
.now .t { color: var(--ink); min-height: 1.5em; }

.contact { padding-bottom: clamp(64px, 8.4vw, 132px) !important; }
.mail { display: inline-block; margin-top: clamp(16px, 2vw, 28px); font-weight: 300; font-style: italic; font-size: clamp(29px, 5.6vw, 88px); line-height: 1.05; letter-spacing: -.02em; padding-bottom: .06em; background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 100% / 100% 1px; transition: background-size .35s; }
.mail:hover { background-size: 100% 3px; }
.helps { margin: clamp(28px, 3.2vw, 46px) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; color: var(--body); font-size: 17.5px; }
.helps span { flex: 0 0 100%; }
.helps a { font-family: var(--ui); font-size: 14px; letter-spacing: .06em; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color .25s; }
.helps a:hover { border-color: var(--ink); }

/* —— 页脚 —— */
.rise { display: block; width: 100%; height: clamp(110px, 17vh, 170px); margin-bottom: -1px; }
footer { position: relative; background: var(--night); color: var(--dim); font-family: var(--ui); padding: clamp(30px, 3.4vw, 50px) var(--pad) clamp(26px, 3vw, 40px); }
.whole { position: relative; width: clamp(230px, 25vw, 340px); aspect-ratio: 1; margin: 0 auto clamp(46px, 5.4vw, 84px); }
.whole canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.whole .sun { opacity: 1; }
.whole .sun i { left: -4px; top: -4px; width: 8px; height: 8px; box-shadow: 0 0 0 1px rgba(255, 244, 226, .22), 0 0 10px 2px rgba(255, 240, 214, .6), 0 0 40px 12px rgba(255, 236, 205, .2); }
.fcols { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 34px clamp(20px, 3vw, 50px); }
.fcols .brand { color: var(--grain); font-size: 18px; }
.fcols .where { margin: 14px 0 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.fcols h2 { margin: 3px 0 14px; font: 500 11.5px 'Jost', sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--faint); }
.fcols ul { list-style: none; margin: 0; padding: 0; }
.fcols li + li { margin-top: 7px; }
.fcols li a { font-size: 14.5px; letter-spacing: .03em; transition: color .25s; }
.fcols li a:hover, .fcols li a[aria-current] { color: var(--grain); }
.fine { display: flex; justify-content: space-between; gap: 20px; margin-top: clamp(30px, 3.4vw, 50px); padding-top: clamp(16px, 1.6vw, 22px); border-top: 1px solid rgba(234, 220, 195, .14); color: var(--faint); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
footer.min { padding-top: clamp(22px, 2.4vw, 34px); }
footer.min .fine { margin-top: 0; padding-top: 0; border: 0; align-items: center; }
footer.min .brand { color: var(--grain); font-size: 16px; }

/* —— 应用页 —— */
.apphero { position: relative; margin: 0 var(--pad); min-height: clamp(430px, 64vh, 660px); border-radius: clamp(18px, 2vw, 30px); overflow: hidden; background: var(--bg); color: #f3ecdf; display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; }
.apphero .in { padding: clamp(26px, 4vw, 64px); align-self: stretch; display: flex; flex-direction: column; }
.apphero .eyebrow { color: rgba(243, 236, 223, .62); }
.apphero h1 { margin: auto 0 0; padding-top: 40px; font-weight: 300; font-size: clamp(54px, 8.4vw, 136px); line-height: .98; letter-spacing: -.028em; }
.apphero .line { margin: clamp(10px, 1.2vw, 18px) 0 0; font-style: italic; font-weight: 300; font-size: clamp(22px, 2.5vw, 36px); line-height: 1.15; color: rgba(243, 236, 223, .86); }
.apphero .status { margin: clamp(22px, 2.6vw, 38px) 0 0; display: flex; align-items: center; gap: 10px; font: 400 12.5px 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 236, 223, .66); }
.apphero .status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.apphero .pic { align-self: center; justify-self: center; width: clamp(200px, 27vw, 400px); height: auto; aspect-ratio: 1; -webkit-mask-image: radial-gradient(closest-side, #000 76%, transparent 100%); mask-image: radial-gradient(closest-side, #000 76%, transparent 100%); }
.intro { max-width: 21em; font-weight: 300; font-size: clamp(25px, 3vw, 44px); line-height: 1.16; letter-spacing: -.014em; }
.intro p { margin: 0; }
.facts { margin: clamp(22px, 2.6vw, 36px) 0 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: minmax(8em, 1fr) 3.4fr; column-gap: 20px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--ui); font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
.facts dd { margin: 0; font-size: clamp(19px, 1.55vw, 23px); line-height: 1.35; }
.fnote { margin: clamp(20px, 2.2vw, 32px) 0 0; max-width: 40em; font-style: italic; color: var(--soft); font-size: 17px; }
.doclist { list-style: none; margin: clamp(22px, 2.6vw, 36px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.doclist li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.doclist .dn { font-size: clamp(20px, 1.7vw, 25px); letter-spacing: -.008em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; padding: 7px 16px 8px; border: 1px solid #c4b9a2; border-radius: 99px; font: 400 13.5px/1.2 'Jost', 'Greek Sub', system-ui, sans-serif; letter-spacing: .04em; transition: background .25s, color .25s, border-color .25s; }
.chip:hover, .chip[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.docsnote { margin: 16px 0 0; color: var(--soft); font-size: 16px; }
.nextapp { display: grid; grid-template-columns: 1fr auto; align-items: center; margin: clamp(64px, 8.4vw, 132px) var(--pad) clamp(40px, 5vw, 80px); padding: clamp(24px, 3vw, 44px) clamp(26px, 4vw, 64px); border-radius: clamp(18px, 2vw, 30px); background: var(--bg); color: #f3ecdf; overflow: hidden; position: relative; min-height: 190px; }
.nextapp .eyebrow { color: rgba(243, 236, 223, .62); }
.nextapp b { display: block; margin-top: 8px; font-weight: 300; font-size: clamp(36px, 5vw, 76px); line-height: 1; letter-spacing: -.024em; }
.nextapp b .arrow { width: .62em; height: .62em; margin-left: .2em; vertical-align: -.02em; }
.nextapp:hover b .arrow { transform: translateX(.18em); }
.nextapp img { width: clamp(110px, 12vw, 170px); height: auto; aspect-ratio: 1; -webkit-mask-image: radial-gradient(closest-side, #000 76%, transparent 100%); mask-image: radial-gradient(closest-side, #000 76%, transparent 100%); transition: transform .6s var(--ease); }
.nextapp:hover img { transform: scale(1.08); }
.backall { display: inline-flex; gap: .5em; align-items: center; margin: 0 var(--pad) clamp(54px, 7vw, 110px); font: 400 13px 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
:lang(zh) .backall { font-family: var(--ui); }
.backall:hover { color: var(--ink); }
.backall .arrow { transform: scaleX(-1); }
.backall:hover .arrow { transform: scaleX(-1) translateX(4px); }

/* —— 文件页、支持页 —— */
.docwrap { max-width: 47rem; margin: 0 auto; padding: clamp(8px, 2vw, 30px) 22px clamp(70px, 9vw, 130px); }
.crumb { display: inline-flex; align-items: center; gap: 12px; font-size: 21px; }
.crumb img { width: 34px; height: 34px; border-radius: 9px; }
.crumb:hover span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.docnav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin: 22px 0 clamp(34px, 4.4vw, 60px); padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px 26px; font: 400 14.5px 'Jost', 'Greek Sub', system-ui, sans-serif; letter-spacing: .05em; color: var(--soft); }
.tabs a { padding: 4px 0; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.tabs a:hover, .tabs a[aria-current] { color: var(--ink); border-color: var(--ink); }
.prose { font-size: 18.5px; line-height: 1.62; color: #24252b; overflow-wrap: break-word; }
.prose h1 { margin: 0 0 .7em; font-weight: 300; font-size: clamp(36px, 5vw, 60px); line-height: 1.04; letter-spacing: -.02em; color: var(--ink); }
.prose h2 { margin: 2.1em 0 .55em; font-weight: 400; font-size: clamp(23px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.prose h3 { margin: 1.7em 0 .45em; font-weight: 500; font-size: 19.5px; color: var(--ink); }
.prose p { margin: 0 0 1em; }
.prose ul, .prose ol { margin: 0 0 1em; padding-inline-start: 1.25em; }
.prose li { margin: .32em 0; }
.prose li > p { margin: 0; }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: #a89d87; transition: text-decoration-color .2s; }
.prose a:hover { text-decoration-color: var(--ink); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose blockquote { margin: 0 0 1em; padding-inline-start: 1em; border-inline-start: 2px solid var(--line); color: var(--body); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose code { font: .86em ui-monospace, Consolas, monospace; background: rgba(20, 22, 29, .06); padding: .1em .35em; border-radius: 4px; }
.tw { overflow-x: auto; margin: 0 0 1.2em; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16.5px; line-height: 1.45; }
.prose th, .prose td { text-align: start; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); }
.prose th { font: 500 12px 'Jost', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); border-bottom-color: #b9ad95; white-space: nowrap; }
.bigmail { display: inline-block; margin: 6px 0 clamp(26px, 3vw, 44px); font-weight: 300; font-style: italic; font-size: clamp(27px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -.015em; background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 100% / 100% 1px; padding-bottom: .08em; }
.prose .bigmail { text-decoration: none; }
.qa { border-top: 1px solid var(--line); }
.qa div { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.qa h2 { margin: 0 0 6px; font-size: 22px; }
.qa p { margin: 0; color: var(--body); }
[dir=rtl] .prose, [dir=rtl] .crumb, [dir=rtl] .tabs, [dir=rtl] .chip { font-family: 'Geeza Pro', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif; letter-spacing: 0; }
[dir=rtl] .prose { font-size: 19.5px; line-height: 1.95; }
[dir=rtl] .prose h1, [dir=rtl] .prose h2, [dir=rtl] .prose h3 { letter-spacing: 0; line-height: 1.45; font-weight: 500; }
[dir=rtl] .prose th { letter-spacing: 0; font-size: 14px; }
[dir=rtl] .bigmail { font-style: normal; }
/* 希腊文整篇用的是备用字体，字面偏小，放大一号 */
:lang(el) .prose { font-size: 20px; }
:lang(el) .tabs, :lang(el) .chip { font-size: 16px; }

/* 全部文件 */
.legalhead { padding: clamp(20px, 4vw, 70px) var(--pad) 0; }
.legalhead h1 { margin: 14px 0 0; font-weight: 300; font-size: clamp(46px, 7vw, 112px); line-height: 1; letter-spacing: -.026em; }
.legalhead p:not(.eyebrow) { margin: clamp(16px, 2vw, 28px) 0 0; max-width: 34em; color: var(--body); font-size: clamp(18.5px, 1.5vw, 22px); }
.legaltable { margin: clamp(34px, 4.4vw, 64px) var(--pad) clamp(70px, 9vw, 130px); border-top: 1px solid var(--line); }
.legaltable .row { display: grid; grid-template-columns: minmax(9em, 1fr) 3.2fr; column-gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.legaltable .who { display: flex; align-items: center; gap: 12px; font-size: clamp(20px, 1.7vw, 25px); align-self: start; }
.legaltable .who img { width: 34px; height: 34px; border-radius: 9px; }
.legaltable dl { margin: 0; display: grid; grid-template-columns: 19em 1fr; gap: 10px 22px; align-items: center; }
.legaltable dt { font-size: 17.5px; color: var(--body); }
.legaltable dd { margin: 0; }

/* 找不到页面 */
.lost { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; background: var(--night); color: var(--grain); text-align: center; padding: 40px 22px; }
.lost .mk { width: clamp(120px, 16vw, 190px); height: clamp(120px, 16vw, 190px); margin: 0 auto clamp(30px, 4vw, 54px); }
.lost h1 { margin: 0; font-weight: 300; font-style: italic; font-size: clamp(40px, 6vw, 84px); line-height: 1.05; letter-spacing: -.02em; }
.lost p { margin: 16px 0 0; color: var(--dim); font-size: 19px; }
.lost a { display: inline-flex; gap: .5em; align-items: center; margin-top: clamp(26px, 3vw, 40px); font: 400 13px 'Jost', sans-serif; letter-spacing: .22em; text-transform: uppercase; border-bottom: 1px solid var(--faint); padding-bottom: 6px; }
.lost a:hover { border-color: var(--grain); }
.lost .zh { font-family: 'Hei Sub', 'PingFang SC', 'Microsoft YaHei', sans-serif; }

/* —— 开屏与进场：环快落到天边时脚本给首屏加 near，字这时才出来；落定后加 on —— */
.live .copy > *, .live .top { opacity: 0; transform: translateY(16px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.live .top { transform: none; }
.live .near .copy > *, .live .near .top { opacity: 1; transform: none; }
.live .near .copy h1 { transition-delay: .15s; }
.live .near .copy .by { transition-delay: .5s; }
.live .near .top { transition-delay: .45s; }
.live .fall { opacity: 0; transition: opacity 1.5s .1s; }
.live .near .fall { opacity: 1; }
.live #sky { opacity: 0; transition: opacity 2.4s; }
.live .on #sky { opacity: 1; }
.live .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.live .rv.in { opacity: 1; transform: none; }
/* 从站内别的页面过来的（html 上有 came）：不重播开屏，首屏的字直接在 */
.came .copy > *, .came .top, .came .fall, .came #sky { opacity: 1 !important; transform: none !important; transition: none !important; }
.came .rv.at { transition: none; }

/* —— 页面之间的转场：点卡片，卡片的颜色铺开成应用页的大色块，图标和名字滑到新位置。
      不支持的浏览器照常跳转；系统设了“减少动态效果”也照常跳转 —— */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.card, .apphero, .nextapp { view-transition-class: vt-block; }
.card .nm, .apphero h1, .nextapp .nm { width: fit-content; view-transition-class: vt-name; }
::view-transition-group(*) { animation-duration: .62s; animation-timing-function: cubic-bezier(.3, .9, .2, 1); }
::view-transition-old(root) { animation: vt-out .26s ease both; }
::view-transition-new(root) { animation: vt-in .5s .12s ease both; }
::view-transition-group(.vt-block) { border-radius: 18px; overflow: clip; }
/* 色块在变大的过程中，旧的那张图淡出、新的那张淡入，两张都铺满色块，中间不露底 */
::view-transition-old(.vt-block), ::view-transition-new(.vt-block) { height: 100%; object-fit: cover; mix-blend-mode: plus-lighter; }
::view-transition-old(.vt-block) { animation: vt-out .25s .3s linear both; }
::view-transition-new(.vt-block) { animation: vt-in .25s .3s linear both; }
/* 离开这一页的那一刻（脚本给 html 加 leaving），色块上的小字先收起来：色块要被拉大，小字跟着拉大不好看 */
.leaving .card .ln, .leaving .card .no, .leaving .card .arrow, .leaving .apphero .eyebrow, .leaving .apphero .line, .leaving .apphero .status, .leaving .nextapp .eyebrow, .leaving .nextapp .arrow { visibility: hidden; }
::view-transition-old(.vt-name), ::view-transition-new(.vt-name) { height: 100%; object-fit: contain; object-position: 0 100%; }
/* 只在一边有的东西（别的卡片、别的图标）：走的快点走，来的等大色块差不多到位了再出来，不挡在它上面 */
::view-transition-old(*):only-child, ::view-transition-old(.vt-block):only-child, ::view-transition-old(.vt-name):only-child { animation: vt-out .16s linear both; }
::view-transition-new(*):only-child, ::view-transition-new(.vt-block):only-child, ::view-transition-new(.vt-name):only-child { animation: vt-in .3s .34s linear both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@media (max-width: 960px) {
  .ways ol { grid-template-columns: repeat(2, 1fr); row-gap: clamp(30px, 4vw, 50px); }
  .fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fcols > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  :root { --bar: 66px; }
  .brand { font-size: 16px; }
  .navs { font-size: 11.5px; letter-spacing: .16em; gap: 16px; }
  .stick { height: 56px; }
  .stick .brand { font-size: 15px; }
  .copy { top: calc(var(--bar) + (var(--top, 60vh) - var(--bar)) * .49); }
  .pre { font-size: 16px; margin-bottom: 12px; }
  .hero h1 { font-size: 15.2vw; }
  .hero h1 span { display: block; }
  .by { margin-top: 22px; font-size: 10.5px; letter-spacing: .2em; }
  .sun span { font-size: 10.5px; bottom: 30px; }
  .hero > .sun::before { left: -210px; top: -96px; width: 420px; height: 130px; }
  .live .copy > * { transform: translateY(12px); }
  .lead { font-size: 33px; }
  .ways ol, .ways.two ol { grid-template-columns: 1fr; row-gap: 28px; }
  .ways h3 { margin-top: 14px; }
  .cards { flex-direction: column; height: auto; gap: 8px; }
  .cards li, .cards li.open { flex: none; }
  .card { height: 116px; border-radius: 14px; }
  .card img, .open .card img { left: 58px; top: 50%; width: 118px; height: 118px; transform: translate(-50%, -50%); }
  .card .txt { left: 124px; right: 16px; bottom: auto; top: 50%; transform: translateY(-50%); }
  .card .nm { font-size: 23px; }
  .card .ln { opacity: 1; transform: none; white-space: normal; font-size: 15.5px; }
  .card .no, .card .arrow { display: none; }
  .cards .next, .index { display: none; }
  .name { grid-template-columns: 1fr; }
  .dialbox { margin-top: 10px; }
  .fine { flex-direction: column; gap: 8px; font-size: 11px; }
  footer.min .fine { flex-direction: row; }
  .apphero { grid-template-columns: 1fr; min-height: 0; }
  .apphero .pic { order: -1; width: 190px; margin-top: 28px; }
  .apphero h1 { padding-top: 6px; font-size: 16vw; }
  .intro { font-size: 27px; }
  .facts div { grid-template-columns: 1fr; row-gap: 5px; }
  .nextapp { grid-template-columns: 1fr; min-height: 0; }
  .nextapp img { position: absolute; right: -14px; bottom: -22px; width: 130px; opacity: .9; }
  .legaltable .row { grid-template-columns: 1fr; row-gap: 14px; }
  .legaltable dl { grid-template-columns: 1fr; gap: 6px; }
  .legaltable dd { margin-bottom: 10px; }
  .prose { font-size: 17.5px; }
}
/* 屏幕矮的时候（小笔记本、横着的手机）先让出前三行，保住大字和天边 */
@media (max-height: 700px) { .pre { display: none; } }

/* —— 中文版：字体换成宋体和黑体的子集，字距放开，不用斜体 —— */
:lang(zh) { --serif: 'Song Sub', 'Newsreader', 'Greek Sub', 'Songti SC', 'SimSun', serif; --ui: 'Hei Sub', 'Jost', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
:lang(zh) body { line-height: 1.6; }
:lang(zh) .eyebrow { font-size: 14px; letter-spacing: .5em; }
:lang(zh) .brand { letter-spacing: .34em; }
:lang(zh) .navs { font-size: 15px; letter-spacing: .34em; }
:lang(zh) .hero h1 { font-style: normal; font-size: clamp(60px, min(10.6vw, 20vh), 176px); letter-spacing: .2em; padding-left: .2em; line-height: 1.1; }
:lang(zh) .by { font-size: 14px; letter-spacing: .42em; padding-left: .42em; }
:lang(zh) .lead { font-size: clamp(27px, 3.5vw, 54px); line-height: 1.42; letter-spacing: .02em; max-width: 19em; }
:lang(zh) .about .lead p:first-child, :lang(zh) .work .note, :lang(zh) .card .ln, :lang(zh) .apphero .line, :lang(zh) .fnote, :lang(zh) .lost h1 { font-style: normal; }
:lang(zh) .work .note { font-family: var(--ui); font-size: 15px; letter-spacing: .12em; }
:lang(zh) .card .ln { font-family: var(--ui); font-size: 14.5px; letter-spacing: .04em; }
:lang(zh) .ways h3 { font-size: clamp(22px, 1.8vw, 27px); letter-spacing: .03em; }
:lang(zh) .ways li p, :lang(zh) .index .ln, :lang(zh) .helps, :lang(zh) .legaltable dt { font-family: var(--ui); font-size: 16px; line-height: 1.75; letter-spacing: .02em; }
:lang(zh) .index .sp { font-size: 13.5px; letter-spacing: .12em; }
:lang(zh) .name .lead { max-width: 10em; }
:lang(zh) .name .say { font-family: var(--ui); font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.85; letter-spacing: .02em; }
:lang(zh) .now { font-size: 13.5px; letter-spacing: .14em; }
:lang(zh) .helps a { font-size: 14px; }
:lang(zh) .fcols h2 { font-size: 13px; letter-spacing: .4em; }
:lang(zh) .fcols .where { font-size: 14px; letter-spacing: .3em; }
:lang(zh) .fine { font-size: 12.5px; letter-spacing: .16em; }
:lang(zh) .apphero h1 { font-weight: 300; }
:lang(zh) .apphero .line { font-size: clamp(21px, 2.2vw, 31px); letter-spacing: .04em; line-height: 1.35; }
:lang(zh) .apphero .status { font-family: var(--ui); font-size: 13.5px; }
:lang(zh) .intro { font-size: clamp(23px, 2.5vw, 37px); line-height: 1.5; letter-spacing: .02em; max-width: 23em; }
:lang(zh) .facts dt { font-size: 13.5px; letter-spacing: .3em; }
:lang(zh) .facts dd { font-family: var(--ui); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.7; }
:lang(zh) .fnote, :lang(zh) .docsnote, :lang(zh) .legalhead p:not(.eyebrow) { font-family: var(--ui); font-size: 15.5px; letter-spacing: .02em; }
:lang(zh) .doclist .dn { font-size: clamp(19px, 1.6vw, 23px); letter-spacing: .04em; }
:lang(zh) .legalhead h1 { letter-spacing: .1em; }
:lang(zh) .legalhead p:not(.eyebrow) { font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.85; }
/* 文件页上交代运营方的那一句：比上面那句小一号、淡一点 */
.legalhead p.op, :lang(zh) .legalhead p.op { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--soft); }
@media (max-width: 720px) {
  :lang(zh) .navs { font-size: 13.5px; letter-spacing: .26em; gap: 14px; }
  :lang(zh) .hero h1 { font-size: 16.5vw; letter-spacing: .16em; padding-left: .16em; }
  :lang(zh) .by { font-size: 12px; letter-spacing: .3em; padding-left: .3em; }
  :lang(zh) .lead { font-size: 27px; }
  :lang(zh) .intro { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition-duration: .01s !important; } }
@media print {
  html { background: #fff; }
  .bar, footer, .docnav, .skip, .stick { display: none !important; }
  .docwrap { max-width: none; padding: 0; }
  .prose { font-size: 11.5pt; color: #000; }
  .prose a { text-decoration: none; }
}