/* Homepage · lake light held in glass. No new backdrop layers or animation loop. */
body.home {
  --lh-fill:color-mix(in srgb,var(--surface) 46%,transparent);
  --lh-tint:color-mix(in srgb,var(--accent-pale) 52%,transparent);
  --lh-heading:color-mix(in srgb,var(--accent) 35%,var(--surface));
  --lh-heading-ink:color-mix(in srgb,var(--accent) 70%,var(--text));
  --lh-heading-light:linear-gradient(140deg,var(--lg-sheen),transparent 54%),linear-gradient(178deg,transparent 68%,var(--lg-sheen));
  --lh-rim:inset 0 1px 1px var(--lg-edge),inset 1px 0 0 var(--lg-panel-rim),inset 0 -1px 1px var(--lg-low-edge),0 12px 32px -28px rgba(25,49,70,.38);
  --lh-light:linear-gradient(135deg,var(--lg-glint),transparent 28%),linear-gradient(175deg,var(--lg-sheen),transparent 46%,var(--lh-tint));
}
/* A brighter action well, with the status line kept outside the controls. */
html body.home .actions-hero {
  border:1px solid var(--lg-edge);
  background:var(--lh-light),var(--lh-fill);
  box-shadow:var(--lh-rim);
}
html body.home .live-line {
  width:fit-content;max-width:100%;padding:10px 16px;border-radius:999px;
  background:linear-gradient(145deg,var(--lg-sheen),transparent 65%),var(--lh-fill);
  box-shadow:var(--lh-rim);
}
/* Questions float as separate pieces of clear glass; the existing marquee owns motion. */
html body.home .asks-h {margin-bottom:26px;}
html body.home .asks-h h2 {
  width:fit-content;padding:14px 22px;border-radius:22px;
  background:var(--lh-heading-light),var(--lh-heading);color:var(--lh-heading-ink);box-shadow:var(--lh-rim);
}
html body.home .marquee {padding:5px 0 12px;}
html body.home .marquee + .marquee {margin-top:0;}
html body.home .ask {
  margin-right:16px;padding:16px 26px;border-radius:999px;
  background:var(--lh-light),var(--lh-fill);box-shadow:var(--lh-rim);
  font-size:clamp(22px,2.1vw,30px);color:var(--text);
}
html body.home .ask::after {display:none;}
html body.home .marquee.rev .ask {
  color:var(--muted);background:linear-gradient(155deg,var(--lg-sheen),transparent 65%),var(--lh-fill);
}
/* Photo remains sharp. Tinted glass plates provide contrast without blurring a moving image. */
html body.home .lake-shot {border-radius:32px;}
html body.home .lake-shot :is(h2,.live,.big) {
  border:1px solid rgba(255,255,255,.4);
  background:linear-gradient(145deg,rgba(255,255,255,.24),transparent 52%),rgba(15,34,49,.57);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -1px 1px rgba(0,0,0,.18);
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25);
}
html body.home .lake-shot h2 {padding:12px 22px;border-radius:999px;top:26px;}
html body.home .lake-shot .live {padding:12px 16px;border-radius:999px;top:30px;}
html body.home .lake-shot .big {
  bottom:26px;padding:30px 32px 24px;gap:24px;border-radius:32px;
  min-width:min(380px,calc(100% - var(--m) * 2));max-width:calc(100% - var(--m) * 2);
}
html body.home .big b {font-size:clamp(120px,17vw,270px);}
html body.home .facts-row {gap:18px;padding-top:24px;}
html body.home .fact {
  min-width:0;align-items:flex-start;gap:12px;padding:28px 32px;border-radius:28px;
  background:var(--lh-light),var(--lh-fill);box-shadow:var(--lh-rim);
}
html body.home .fact > span {color:var(--muted);line-height:1.5;}
/* The photo stack keeps its proportions and transitions, now in clear rounded frames. */
html body.home .reel {
  border:1px solid var(--lg-edge);border-radius:36px;
  background:var(--lh-light),var(--lh-tint);box-shadow:var(--lh-rim);
}
html body.home .reel-cap {
  padding:20px 24px;border-radius:22px;
  background:linear-gradient(140deg,var(--lg-sheen),transparent 62%),var(--lh-fill);
  box-shadow:var(--lh-rim);
}
html body.home .reel-count {padding:12px;border-radius:999px;background:var(--lh-fill);box-shadow:var(--lh-rim);}
html body.home .print {
  padding:12px 12px 32px;border-radius:24px;
  background:var(--lh-light),color-mix(in srgb,var(--surface) 88%,transparent);
  box-shadow:var(--lh-rim),0 18px 44px -28px rgba(18,40,58,.35);
}
html body.home .print img {border-radius:14px;}
/* Generous optical rims unify the large doors with the first-screen controls. */
html body.home .doors-head h2 {
  width:fit-content;padding:16px 28px 20px;border-radius:28px;
  background:var(--lh-heading-light),var(--lh-heading);color:var(--lh-heading-ink);box-shadow:var(--lh-rim);
}
html body.home .door {
  border:1px solid var(--lg-edge);border-radius:28px;
  background:var(--lh-light),var(--lh-fill);box-shadow:var(--lh-rim);
}
html body.home .door-chat {background:var(--lh-light),var(--lh-tint);}
html body.home .door::before {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(112deg,transparent 25%,var(--lg-sheen) 43%,transparent 62%);
  transform:translateX(-65%);opacity:0;
  transition:transform 750ms var(--lg-motion),opacity 350ms ease;
}
html body.home .door :is(.say,.mine-note,.d-go) {
  background:var(--lh-light),var(--lh-fill);box-shadow:var(--lh-rim);
}
html body.home .door .say {border-radius:22px 22px 22px 7px;}
html body.home .mine-note {width:fit-content;max-width:100%;padding:10px 16px;border-radius:999px;flex-wrap:wrap;}
html body.home .door .d-go {color:var(--accent);}
html body.home .door-moments .d-img {border:6px solid var(--lg-edge);border-radius:18px;}
html body.home .door-inbox {background:linear-gradient(150deg,var(--lg-sheen),transparent 55%),var(--lh-fill);}
@media(hover:hover) and (pointer:fine) {
  html body.home .door:is(a,button):hover {background-color:var(--surface);}
  html body.home .door:hover::before {opacity:1;transform:translateX(45%);}
  html body.home .door:is(a,button):focus-visible {outline:3px solid var(--accent);outline-offset:4px;}
  html body.home .door:is(.door-moments,.door-wall):hover .d-go {background:var(--primary);color:var(--primary-ink);}
}
/* The same pale lake material continues to the very end. Tokens follow dark mode too. */
html body.home .h-foot {
  margin:0 var(--m) var(--m);padding:clamp(28px,4vw,64px) clamp(22px,4vw,64px) calc(28px + env(safe-area-inset-bottom));
  border:1px solid var(--lg-edge);border-radius:36px;color:var(--text);
  background:var(--lh-light),var(--lh-tint);box-shadow:var(--lh-rim);
  container-type:inline-size;
}
html body.home .foot-row {
  align-items:center;padding:28px 32px;border-radius:26px;
  background:linear-gradient(140deg,var(--lg-sheen),transparent 65%),var(--lh-fill);
  box-shadow:var(--lh-rim);
}
html body.home .foot-row h2 {color:var(--text);text-shadow:0 1px 1px var(--lg-edge);}
html body.home .foot-row p {opacity:1;color:var(--muted);line-height:1.8;}
html body.home .foot-contact a {
  display:inline-flex;align-items:center;min-height:40px;margin-top:8px;padding:5px 14px;
  border-radius:999px;background:var(--lh-light),var(--lh-fill);box-shadow:var(--lh-rim);
  color:var(--accent);text-decoration:none;transition:transform 240ms var(--lg-motion);
}
html body.home .foot-contact a:hover {transform:translateY(-2px);text-decoration:underline;}
html body.home .foot-contact a:focus-visible {outline:3px solid var(--accent);outline-offset:4px;}
html body.home .qr {flex:none;opacity:1;padding:12px 12px 10px;border-radius:22px;color:var(--muted);background:var(--lh-light),var(--lh-fill);box-shadow:var(--lh-rim);}
html body.home .qr svg {color:#000;background:#fff;border-radius:12px;}
html body.home .foot-name {
  font-size:18.1vw;font-size:22cqw;margin-top:54px;color:color-mix(in srgb,var(--accent) 82%,var(--text));
  text-shadow:0 1px 0 var(--lg-edge),0 -1px 0 var(--lg-low-edge);
}
html body.home .foot-meta {line-height:1.8;opacity:1;color:var(--muted);}
@media(min-width:681px) and (max-width:1000px) {
  html body.home .reel-stage {min-height:0;grid-template-columns:1fr;padding:36px;gap:24px;}
  html body.home .reel-text {display:contents;}
  html body.home .reel-text h2 {order:1;font-size:56px;}
  html body.home .reel-frame {order:2;grid-column:1;height:clamp(300px,49vw,440px);}
  html body.home .print img {max-width:min(64vw,520px);max-height:340px;}
  html body.home .reel-cap {order:3;min-height:0;max-width:none;}
  html body.home .reel-ctl {order:4;justify-content:space-between;}
  html body.home .reel-text .go {order:5;justify-self:start;}
}
@media(max-width:680px) {
  html body.home .live-line {padding:9px 12px;border-radius:20px;font-size:13px;gap:6px 10px;}
  html body.home .asks-h h2 {padding:12px 16px;font-size:24px;border-radius:20px;}
  html body.home .ask {font-size:22px;padding:13px 20px;margin-right:12px;}
  html body.home .lake-shot {border-radius:24px;}
  html body.home .lake-shot h2 {font-size:20px;padding:10px 14px;top:20px;}
  html body.home .lake-shot .live {font-size:13px;padding:10px 12px;top:24px;gap:6px;}
  html body.home .lake-shot .big {min-width:200px;padding:22px 24px 18px;bottom:20px;gap:12px;border-radius:26px;}
  html body.home .big b {font-size:28vw;}
  html body.home .facts-row {gap:12px;padding-top:18px;}
  html body.home .fact {flex-direction:row;align-items:center;padding:20px 24px;gap:18px;border-radius:24px;}
  html body.home .fact b {font-size:56px;}
  html body.home .fact > span {font-size:15px;}
  html body.home .reel {border-radius:28px;}
  html body.home .reel-frame {height:42svh;min-height:260px;max-height:380px;}
  html body.home .reel-cap {padding:16px 18px;margin-bottom:10px;}
  html body.home .print {padding:9px 9px 24px;border-radius:20px;}
  html body.home .print img {border-radius:12px;}
  html body.home .doors-head h2 {font-size:38px;padding:14px 20px 18px;border-radius:24px;}
  html body.home .door {border-radius:24px;}
  html body.home .h-foot {border-radius:28px;padding:20px 18px calc(24px + env(safe-area-inset-bottom));}
  html body.home .foot-row {padding:24px 20px;gap:26px;border-radius:22px;}
  html body.home .foot-row h2 {font-size:28px;}
  html body.home .foot-row p {font-size:14px;}
  html body.home .foot-name {font-size:18vw;font-size:22cqw;margin-top:40px;}
  html body.home .foot-meta {font-size:13px;}
}
@media(prefers-reduced-motion:reduce) {
  html body.home .door::before {display:none;}
  html body.home .foot-contact a {transition:none;transform:none;}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  html body.home {--lh-fill:var(--surface);--lh-tint:var(--accent-pale);--lh-light:none;}
  html body.home .lake-shot :is(h2,.live,.big) {background:#203544;}
  html body.home .h-foot {background:var(--surface);}
  html body.home .door::before {display:none;}
}
@media print {
  html body.home :is(.ask,.fact,.reel,.print,.door,.doors-head h2,.asks-h h2,.h-foot,.foot-row,.qr) {box-shadow:none;background:transparent;color:#000;}
}

/* ───── 2026-11 主页质感：去掉标题底板、照片未到时的湖色底、页脚名字渐变墨色 ───── */
/* 标题不再装在色块里：只靠字号、衬线和一条会画出来的短线，像杂志的栏目名 */
html body.home :is(.asks-h h2,.doors-head h2) {
  position:relative;width:fit-content;padding:0;border-radius:0;background:none;box-shadow:none;
  color:color-mix(in srgb,var(--accent) 72%,var(--text));text-shadow:none;letter-spacing:.02em;
}
html body.home .asks-h h2 {font-size:clamp(30px,3.4vw,48px);}
html body.home .doors-head h2 {font-size:clamp(44px,6vw,96px);padding-bottom:6px;}
html body.home :is(.asks-h h2,.doors-head h2)::after {display:none;}
html body.home :is(.asks-h h2,.doors-head h2,.reel-text h2)::before {
  content:"";position:absolute;left:2px;bottom:-12px;width:64px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 20%,transparent));transform-origin:0 50%;
}
@supports (animation-timeline:view()) {
  html body.home .doors-head h2::before {animation:h-rule linear both;animation-timeline:view();animation-range:entry 30% cover 40%;}
  html body.home .asks-h h2::before {animation:h-rule linear both;animation-timeline:--asks;animation-range:entry 30% cover 38%;}
  html body.home .reel-text h2::before {animation:h-rule linear both;animation-timeline:--reel;animation-range:entry 15% cover 28%;}
  @keyframes h-rule {from{scale:0 1}to{scale:1 1}}
}
html body.home .asks-h {margin-bottom:34px;}
html body.home .doors-head {margin-bottom:44px;}
/* 大照片还没下好时，先是一片由浅到深的湖色，而不是一块黑板 */
html body.home .lake-shot {background:linear-gradient(180deg,#a9c0d4,#6f8ea9 55%,#3c5a74);}
:root[data-theme="dark"] body.home .lake-shot {background:linear-gradient(180deg,#2a3b4b,#1b2a38 60%,#121c26);}
@media(prefers-color-scheme:dark) {:root:not([data-theme="light"]) body.home .lake-shot {background:linear-gradient(180deg,#2a3b4b,#1b2a38 60%,#121c26);}}
/* 页脚的大名字：从上到下由浅湖蓝过渡到深湖蓝，像光照在字的顶面上 */
html body.home .foot-name {text-shadow:none;}
html body.home .foot-name span {
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 45%,var(--surface)) 0%,var(--accent) 48%,color-mix(in srgb,var(--accent) 72%,var(--text)) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@media(max-width:680px) {
  html body.home .asks-h h2 {padding:0;font-size:28px;border-radius:0;}
  html body.home .doors-head h2 {padding:0 0 4px;font-size:42px;border-radius:0;}
}
@media(prefers-reduced-motion:reduce) {html body.home :is(.asks-h h2,.doors-head h2,.reel-text h2)::before {animation:none;}}
@media print {html body.home .foot-name span {color:#000;background:none;}}

/* 首屏状态灯：一颗带高光的翠绿小珠，外面两圈细环交替荡开（只用 transform 和透明度，合成器就能画） */
html body.home .live-line {gap:10px;padding:10px 18px 10px 14px;}
html body.home .live-sig {position:relative;display:inline-grid;place-items:center;flex:none;width:16px;height:16px;}
html body.home .live-sig b {position:relative;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#c9f5dc,#38b877 55%,#1d7a4b);
  box-shadow:0 0 0 2.5px color-mix(in srgb,#38b877 18%,transparent),0 0 10px rgba(56,184,119,.55);}
html body.home .live-sig i {position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(56,184,119,.6);opacity:0;animation:live-sig 2.8s cubic-bezier(.2,.6,.3,1) infinite;}
html body.home .live-sig i + i {animation-delay:1.4s;}
@keyframes live-sig {0%{transform:scale(.5);opacity:.85}100%{transform:scale(2.2);opacity:0}}
html body.home .live-sig.off b {background:radial-gradient(circle at 35% 30%,#f1e3c4,#c79a3e 60%,#94702a);box-shadow:0 0 0 2.5px rgba(199,154,62,.18);}
html body.home .live-sig.off i {display:none;}
:root[data-theme="dark"] body.home .live-sig b {box-shadow:0 0 0 2.5px rgba(108,198,154,.2),0 0 12px rgba(108,198,154,.6);}
@media(prefers-color-scheme:dark) {:root:not([data-theme="light"]) body.home .live-sig b {box-shadow:0 0 0 2.5px rgba(108,198,154,.2),0 0 12px rgba(108,198,154,.6);}}
@media(prefers-reduced-motion:reduce) {html body.home .live-sig i {animation:none;opacity:0;}}

/* ───── 首屏去处（2026-11 重做）─────
   保留原来“文字胶囊 + 玻璃托盘”的样子，只理顺：字去掉“打开、入口”，图标统一粗细，简历换成名片图标、锁靠在字后面。
   手机：两列两行 + 一整条简历；电脑：五颗排成一条居中的胶囊。 */
html body.home .actions-hero .go {min-width:0;gap:10px;justify-content:flex-start;font-size:16px;font-weight:600;letter-spacing:.02em;white-space:nowrap;}
html body.home .actions-hero .go svg {width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
html body.home .actions-hero .go .go-lock {width:15px;height:15px;margin-left:2px;stroke-width:2.2;opacity:.75;}
html body.home .actions-hero .go-main {font-size:17px;}
@media(max-width:680px) {
  html body.home .actions-hero {display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px;border-radius:32px;}
  html body.home .actions-hero .go {height:52px;padding:0 16px;}
  html body.home .actions-hero .go-cv {grid-column:1/-1;justify-content:center;}
}
@media(max-width:350px) {html body.home .actions-hero .go {padding:0 12px;gap:8px;font-size:15px;}}
@media(min-width:681px) {
  html body.home .actions-hero {display:flex;align-items:center;gap:8px;padding:7px;border-radius:999px;}
  html body.home .actions-hero .go {height:54px;padding:0 22px;}
}
html body.home .actions-hero .go-soft:not([href="/footprints"]) svg {color:var(--accent);}

/* ───── 首页画面 · 第一批（2026-11）：动效规则、湖色墨、命名的滚动时间线 ─────
   规则：600ms 以上的入场用 --m-surface；500ms 以内的界面小动作用 --m-settle；所有倒放用 --m-sink（400–480ms，不错开）；
   跟着滚动走的一律线性。名字里那道阳光是全页唯一会反复扫过的光。滚动驱动的位移不放在本身还有循环位移动画的元素上（用外层包一层）。
   .asks / .marquee / .reel / .lake-shot / .door 都是 overflow:hidden 的滚动容器，里面的元素一律用下面这些命名时间线，不用裸的 view()。 */
body.home {
  --m-surface:cubic-bezier(.16,1,.3,1);--m-settle:cubic-bezier(.22,1,.36,1);--m-sink:cubic-bezier(.4,0,.7,.2);
  --m-t-rise:900ms;--m-t-open:1100ms;--m-t-ui:480ms;--m-t-sink:440ms;--m-st-item:70ms;--m-st-line:90ms;--m-st-ch:24ms;
  --lake-ink:linear-gradient(180deg,color-mix(in srgb,var(--accent) 45%,var(--surface)) 0%,var(--accent) 48%,color-mix(in srgb,var(--accent) 72%,var(--text)) 100%);
  /* 名字字母上的一层湖色：亮照片（雪、天空）下沿有湖蓝的边，暗照片不至于沉进底色；倒影是更深一点的湖水 */
  --lake-veil:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 34%,rgba(20,48,74,0) 46%,rgba(20,48,74,.34) 100%);
  --lake-veil-r:linear-gradient(180deg,rgba(46,92,130,.16),rgba(46,92,130,.34));
}
:root[data-theme="dark"] body.home {
  --lake-ink:linear-gradient(180deg,color-mix(in srgb,var(--accent) 50%,#fff) 0%,var(--accent) 50%,color-mix(in srgb,var(--accent) 70%,#0f1113) 100%);
  --lake-veil:linear-gradient(180deg,rgba(214,232,250,.2),rgba(214,232,250,.08) 55%,rgba(214,232,250,.03));
  --lake-veil-r:linear-gradient(180deg,rgba(8,18,30,.3),rgba(8,18,30,.55));
}
@media(prefers-color-scheme:dark) {:root:not([data-theme="light"]) body.home {
  --lake-ink:linear-gradient(180deg,color-mix(in srgb,var(--accent) 50%,#fff) 0%,var(--accent) 50%,color-mix(in srgb,var(--accent) 70%,#0f1113) 100%);
  --lake-veil:linear-gradient(180deg,rgba(214,232,250,.2),rgba(214,232,250,.08) 55%,rgba(214,232,250,.03));
  --lake-veil-r:linear-gradient(180deg,rgba(8,18,30,.3),rgba(8,18,30,.55));
}}
html body.home .asks {view-timeline-name:--asks;}
html body.home .reel {view-timeline-name:--reel;}
html body.home .lake-shot {view-timeline-name:--lake;}
html body.home .door {view-timeline-name:--door;}
/* 手机上顶栏两块毛玻璃的高光边不再跟着滚动转圈：每转一点都要把背后重新模糊一遍，1px 的转动看不出来。电脑上照旧 */
@media(hover:none),(pointer:coarse) {html body.home :is(.h-top>.brand,.h-top nav)::before {animation:none;}}

/* 首屏离场：名字沉回湖里（跟着滚动，往回滚就原样浮上来）。名字整体微缩、下沉、变淡；倒影先淡掉；
   标语和按钮托盘往上让开一点（托盘只平移，不变淡、不缩放，按钮一直清楚可点）。电脑上字母从两头往中间依次沉到水面下。 */
@supports (animation-timeline:scroll()) {@media (prefers-reduced-motion:no-preference) {
  html body.home .monument {animation:name-recede linear both;animation-timeline:scroll(root);animation-range:0px 60vh;}
  @keyframes name-recede {to{scale:.94;translate:0 5vh;opacity:.55}}
  html body.home .reflection .word {will-change:opacity;animation:refl-fade linear both;animation-timeline:scroll(root);animation-range:0px 28vh;}
  @keyframes refl-fade {to{opacity:0}}
  html body.home .hero .lead {will-change:transform,opacity;animation:hero-lift-a linear both;animation-timeline:scroll(root);animation-range:0px 60vh;}
  html body.home .hero-foot {will-change:transform;animation:hero-lift-b linear both;animation-timeline:scroll(root);animation-range:0px 60vh;}
  html body.home .home-down-hint {will-change:transform,opacity;animation:hero-hint-out linear both;animation-timeline:scroll(root);animation-range:0px 16vh;}
  @keyframes hero-lift-a {to{translate:0 -14px;opacity:.6}}
  @keyframes hero-lift-b {to{translate:0 -24px}}
  @keyframes hero-hint-out {to{translate:0 10px;opacity:0}}
  @media (min-width:681px) and (hover:hover) and (pointer:fine) {
    html body.home .monument .word span {animation:name-sink linear both;animation-timeline:scroll(root);animation-range:calc(var(--near,0) * 4vh) calc(30vh + var(--near,0) * 4vh);}
    @keyframes name-sink {to{translate:0 105%}}
  }
  @media (max-width:680px) {
    html body.home .monument {animation-range:0px 40vh;}
    html body.home .reflection .word {animation-range:0px 16vh;}
    html body.home :is(.hero .lead,.hero-foot) {animation-range:0px 45vh;}
  }
}}

/* 开站以来：照片窗口跟着滚动从 94%（电脑 90%）打开到满幅；照片缓缓平移；三块玻璃牌依次浮现。全部跟着滚动，往回滚原样倒回去。
   玻璃牌统一从上方打光、不加外阴影（滚动中的图层保持小）。 */
html body.home .lake-shot {clip-path:none;}
html body.home .lake-shot :is(h2,.live,.big) {border:0;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 44%),linear-gradient(180deg,rgba(16,34,50,.40),rgba(10,24,38,.66));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.2);}
@supports (animation-timeline:view()) {@media (prefers-reduced-motion:no-preference) {
  html body.home .lake-shot {will-change:transform;animation:lake-open linear both;animation-timeline:view();animation-range:entry 0% entry 90%;}
  @keyframes lake-open {from{scale:.9}}
  @keyframes lake-open-m {from{scale:.94}}
  @media (max-width:680px) {html body.home .lake-shot {animation-name:lake-open-m;}}
  html body.home .lake-shot img {--zoom:1.08;animation:lake-pan linear both;animation-timeline:--lake;animation-range:cover 0% cover 100%;}
  html body.home .lake-shot img.on {animation:drift-in 9s cubic-bezier(.2,.6,.2,1) both,lake-wash 1700ms cubic-bezier(.45,0,.2,1) both,lake-pan linear both;animation-timeline:auto,auto,--lake;animation-range:normal,normal,cover 0% cover 100%;}
  @keyframes lake-pan {from{translate:0 24px}to{translate:0 -24px}}
  html body.home .lake-shot :is(h2,.live,.big) {will-change:transform,opacity;}
  html body.home .lake-shot h2 {animation:plate-in linear both;animation-timeline:--lake;animation-range:entry 35% entry 75%;}
  html body.home .lake-shot .live {animation:plate-in linear both;animation-timeline:--lake;animation-range:entry 45% entry 85%;}
  html body.home .lake-shot .big {animation:plate-fade linear both,big-par linear both;animation-timeline:--lake,--lake;animation-range:entry 55% entry 100%,cover 0% cover 100%;}
  @keyframes plate-in {from{opacity:0;translate:0 10px}}
  @keyframes plate-fade {from{opacity:0}}
  @keyframes big-par {from{translate:0 46px}to{translate:0 -46px}}
  @media (hover:none),(pointer:coarse) {
    html body.home .lake-shot img.on {-webkit-mask-image:none;mask-image:none;animation:lake-pan linear both;animation-timeline:--lake;animation-range:cover 0% cover 100%;}
    html body.home .lake-shot .big {animation:plate-in linear both;animation-timeline:--lake;animation-range:entry 55% entry 100%;}
  }
}}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {html body.home .lake-shot :is(h2,.live,.big) {background:#203544;}}

/* 三个数字合成一整块玻璃，中间用细线隔开；数字是和页脚大名字同一种湖色墨（上亮下深），整串只铺一次，不再每个数字各装一张照片慢慢漂 */
html body.home .facts-row {position:relative;gap:0;margin:24px var(--m) 0;padding:0;border-radius:28px;overflow:clip;background:var(--lh-light),var(--lh-fill);box-shadow:var(--lh-rim);}
html body.home .fact {background:none;box-shadow:none;border-radius:0;padding:34px 40px;}
html body.home .fact::before {display:none;}
html body.home .fact + .fact {border-left:1px solid color-mix(in srgb,var(--text) 9%,transparent);}
html body.home :is(.fact b,.fact b .odo-c) {background:var(--lake-ink);-webkit-background-clip:text;background-clip:text;color:transparent;animation:none;}
html body.home .fact b:has(.odo) {background:none;}
html body.home .fact b .odo-s {background:var(--lake-ink) 0 0/100% 1em repeat-y;-webkit-background-clip:text;background-clip:text;color:transparent;}
html body.home .fact b .odo-s > span {background:none;animation:none;}
@media (max-width:680px) {
  html body.home .facts-row {margin-top:18px;}
  html body.home .fact {padding:16px 24px;gap:18px;align-items:center;}
  html body.home .fact + .fact {border-left:0;border-top:1px solid color-mix(in srgb,var(--text) 9%,transparent);}
  html body.home .fact b {font-size:52px;min-width:calc(var(--fact-ch,3) * 1ch);}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {html body.home .facts-row {background:var(--surface);}}

/* 大家都在问：两行问题自己流（手机上在合成器上流）；滚过这一段时，上一行往左、下一行往右各漂一点，从屏幕底部进来时由淡变实。
   漂移放在外面一层 .drift 上，和里面一直在流的 .track 分开（同一个元素上叠两种位移，WebKit 会把两种都退回主线程） */
html body.home .marquee .drift {display:block;}
@supports (animation-timeline:view()) {@media (prefers-reduced-motion:no-preference) {
  html body.home .marquee .drift {will-change:transform,opacity;animation:ask-drift linear both;animation-timeline:--asks;animation-range:entry 0% exit 100%;}
  html body.home .marquee.rev .drift {animation-name:ask-drift-r;}
  @keyframes ask-drift {from{translate:-2vw 0;opacity:0}22%{opacity:1}to{translate:-12vw 0}}
  @keyframes ask-drift-r {from{translate:-12vw 0;opacity:0}22%{opacity:1}to{translate:-2vw 0}}
}}

/* ───── 首页画面 · 第二批（2026-11）：手机首屏海报、开场、标题、页脚 ─────
   手机：名字排成 CAO / JIALE 两行、居中铺满，首屏是一张海报（标记直接写在 HTML 里，脚本没跑起来时也是两行）；
   倒影只照 JIALE（只有它贴着水面）。标语、按钮、状态灯都在同一条中轴上，状态灯挪到按钮下面（和电脑上一样）。 */
@media(max-width:680px) {
  html body.home .monument.stack {font-size:35.6vw;line-height:.8;text-align:center;white-space:normal;}
  html body.home .monument.stack .word {display:flex;flex-wrap:wrap;justify-content:center;padding-right:0;}
  html body.home .monument.stack .word::after {content:"";flex-basis:100%;height:0;order:2;}
  html body.home .monument.stack .word span:nth-child(-n+3) {order:1;}
  html body.home .monument.stack .word span:nth-child(n+4) {order:3;}
  html body.home .reflection.stack {font-size:35.6vw;text-align:center;height:.24em;}
  html body.home .reflection.stack .word span:nth-child(-n+3) {display:none;}
  html body.home .reflection.stack .word:not(:has(span)) {visibility:hidden;}
  html body.home .hero .lead {align-self:center;text-align:center;font-size:19px;margin-top:14px;}
  html body.home .hero-foot {flex-direction:column-reverse;gap:12px;margin-top:20px;}
  html body.home .hero-meta {justify-items:center;}
  html body.home .home-down-hint {margin-top:16px;}
}
/* 问题行在脚本填进去之前先占好高度：下面那块大照片不会先露出来、再被推下去 */
html body.home .marquee {min-height:calc(clamp(22px,2.1vw,30px) * 1.3 + 49px);}
@media(max-width:680px) {html body.home .marquee {min-height:calc(22px * 1.3 + 43px);}}
/* 开场后首屏按钮的图标只醒一遍（悬停时别处仍是两遍） */
html body.home .actions-hero .lg-wake :is(.i-d1,.i-d2,.i-d3,.i-fl,.i-fr,.i-l1,.i-l2,.i-l3,.i-rays) {animation-iteration-count:1;}

/* 一套标题：三个段落大标题（大家都在问 / 最近的日常 / 想去哪儿？）同一个字号、同一种湖色墨，下面都有一道会跟着滚动画出来的短线；
   门的标题和页脚那句话同一级。去掉标题下面那层发蓝的浮雕光 */
html body.home :is(.asks-h h2,.reel-text h2,.doors-head h2) {font-size:clamp(42px,6vw,96px);line-height:1.12;letter-spacing:.02em;color:color-mix(in srgb,var(--accent) 72%,var(--text));text-shadow:none;text-wrap:balance;}
html body.home .reel-text h2 {position:relative;width:fit-content;}
html body.home :is(.door-chat,.door-moments,.door-wall) h3, html body.home .foot-row h2 {font-size:clamp(30px,3.6vw,52px);line-height:1.18;}
html body.home :is(.door h3,.foot-row h2) {text-shadow:none;}
@media(max-width:680px) {html body.home .reel-text h2 {margin-bottom:14px;}}

/* 页脚：一整块玻璃收尾（里面不再套一层卡片），只留邮箱和二维码两块小玻璃；手机上所有东西排在和首屏同一条中轴上。
   页脚的大名字是和数字同一种湖色墨 */
html body.home .foot-row {background:none;box-shadow:none;padding:8px 4px 0;}
@media(max-width:680px) {
  html body.home .foot-row {align-items:center;text-align:center;padding:8px 2px 0;}
  html body.home .foot-meta {justify-content:center;text-align:center;}
}
html body.home .foot-name span {background-image:var(--lake-ink);} /* 只换图，不用 background 简写（会把“只填进字里”的设置也重置掉） */

/* ───── 首页画面 · 第三批（2026-11）：去处、相纸、统一光源 ───── */
/* 聊天那扇门：头像在“进行聊天”旁边说话，气泡的尖角指向它；后面是细细的水波圈（画好最终大小再从小放大，线一直是清楚的） */
@media(max-width:1000px) {
  html body.home .door-chat {grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:18px;align-items:center;min-height:0;}
  html body.home .door-chat > div:first-child {grid-column:2;grid-row:1;}
  html body.home .door-chat .chat-stage {grid-column:1;grid-row:1;order:0;width:64px;height:64px;min-height:0;--av:64px;}
  html body.home .door-chat > div:last-child {grid-column:1/-1;grid-row:2;}
  html body.home .door-chat .say {border-radius:7px 22px 22px 22px;}
}
@media(min-width:1001px) {
  html body.home .door-chat {grid-template-rows:auto auto;align-content:center;row-gap:36px;}
  html body.home .door-chat > div:last-child {align-self:start;}
  html body.home .door-chat .chat-stage {--av:144px;}
  html body.home .door-chat .say {border-radius:22px 7px 22px 22px;}
}
html body.home .door-chat h3 svg {display:none;}
html body.home .chat-stage .avatar {width:var(--av,96px);height:var(--av,96px);box-shadow:0 0 0 .5px var(--g-hair),0 20px 40px -18px rgba(24,54,82,.5);}
:root[data-theme="dark"] body.home .chat-stage .avatar {box-shadow:0 0 0 .5px var(--g-hair),0 20px 40px -18px rgba(0,0,0,.7);}
@media(prefers-color-scheme:dark) {:root:not([data-theme="light"]) body.home .chat-stage .avatar {box-shadow:0 0 0 .5px var(--g-hair),0 20px 40px -18px rgba(0,0,0,.7);}}
html body.home .ripple {--ring:calc(var(--av,96px) * 3.4);width:var(--ring);height:var(--ring);left:50%;top:50%;margin:calc(var(--ring) / -2) 0 0 calc(var(--ring) / -2);z-index:-1;background:none;border:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);animation-name:ripple-ring;}
@keyframes ripple-ring {0%{transform:scale(.29);opacity:.32}100%{transform:scale(1);opacity:0}}
/* 动态、回答墙右边的箭头放在一颗玻璃小珠正中 */
html body.home .door .d-go {display:flex;align-items:center;justify-content:center;line-height:0;background:var(--g-btn-sheen),linear-gradient(var(--g-btn-fill),var(--g-btn-fill));box-shadow:0 6px 16px -10px rgba(24,54,82,.28),var(--g-btn-inner),0 0 0 .5px var(--g-hair);}
:root[data-theme="dark"] body.home .door .d-go {box-shadow:0 6px 16px -10px rgba(0,0,0,.5),var(--g-btn-inner),0 0 0 .5px var(--g-hair);}
@media(prefers-color-scheme:dark) {:root:not([data-theme="light"]) body.home .door .d-go {box-shadow:0 6px 16px -10px rgba(0,0,0,.5),var(--g-btn-inner),0 0 0 .5px var(--g-hair);}}
html body.home .door-moments .d-sub {font-family:var(--serif);}
@media(min-width:681px) {html body.home .door-moments .d-sub {font-size:clamp(20px,1.8vw,26px);line-height:1.5;}}
html body.home .door-inbox h3 {color:var(--text);}
/* 每扇门里：标题、头像、按钮随门一起进来，正文晚半拍浮上来（跟着滚动，往回滚倒回去） */
@supports (animation-timeline:view()) {@media (prefers-reduced-motion:no-preference) {
  html body.home .door :is(.say,.d-sub,.d-q,.mine-note) {will-change:transform,opacity;animation:door-part linear both;animation-timeline:--door;animation-range:cover 10% cover 32%;}
  @keyframes door-part {from{opacity:0;translate:0 10px}}
}}
/* 相纸：手机上只散开、缩放、淡入，不从下面飞上来（不会穿过说明文字）；说明文字的玻璃牌和照片、按钮一样宽 */
@media(max-width:680px) {
  html body.home .reel.wait .print {translate:0 0;}
  html body.home .reel-cap {justify-self:stretch;max-width:none;}
}
html body.home .reel-cap > span {display:block;}

/* 一盏灯：首屏以下每一块玻璃都从正上方打光（顶上一道亮边、往下慢慢透出湖色），不再有左上角那块斜着的反光；
   深色模式是夜里的湖：一道亮边 + 一点湖蓝。首屏的按钮托盘保持原样 */
html body.home :is(.asks,.facts-row,.reel,.doors,.h-foot) {--lh-light:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0) 40%),linear-gradient(0deg,var(--lh-tint),transparent 45%);}
html body.home .reel-cap {background:var(--lh-light),var(--lh-fill);}
html body.home .marquee.rev .ask {background:var(--lh-light),var(--lh-fill);}
html body.home .door-inbox {background:var(--lh-light),var(--lh-fill);}
html body.home .live-line {background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 55%),var(--lh-fill);}
:root[data-theme="dark"] body.home .live-line {background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 55%),var(--lh-fill);}
:root[data-theme="dark"] body.home :is(.asks,.facts-row,.reel,.doors,.h-foot) {--lh-fill:rgba(148,188,222,.05);--lh-tint:rgba(110,160,205,.075);--lh-light:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,0) 40%),linear-gradient(0deg,rgba(147,188,220,.05),transparent 45%);--lh-rim:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.4),0 0 0 .5px rgba(147,188,220,.16),0 26px 50px -30px rgba(0,0,0,.9);--lg-edge:rgba(170,205,235,.16);--g-rim:rgba(220,236,250,.24);--g-rim-soft:rgba(255,255,255,.03);}
:root[data-theme="dark"] body.home :is(.asks,.facts-row,.reel,.doors,.h-foot) .print {background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04)),#1c232b;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 .5px rgba(147,188,220,.18),0 30px 60px -28px rgba(0,0,0,.85);}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) body.home .live-line {background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 55%),var(--lh-fill);}
  :root:not([data-theme="light"]) body.home :is(.asks,.facts-row,.reel,.doors,.h-foot) {--lh-fill:rgba(148,188,222,.05);--lh-tint:rgba(110,160,205,.075);--lh-light:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,0) 40%),linear-gradient(0deg,rgba(147,188,220,.05),transparent 45%);--lh-rim:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.4),0 0 0 .5px rgba(147,188,220,.16),0 26px 50px -30px rgba(0,0,0,.9);--lg-edge:rgba(170,205,235,.16);--g-rim:rgba(220,236,250,.24);--g-rim-soft:rgba(255,255,255,.03);}
  :root:not([data-theme="light"]) body.home :is(.asks,.facts-row,.reel,.doors,.h-foot) .print {background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04)),#1c232b;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 .5px rgba(147,188,220,.18),0 30px 60px -28px rgba(0,0,0,.85);}
}
/* 降低透明度 / 提高对比度：上面这些都换回不透明的面 */
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  html body.home :is(.asks,.facts-row,.reel,.doors,.h-foot),
  :root[data-theme="dark"] body.home :is(.asks,.facts-row,.reel,.doors,.h-foot),
  :root:not([data-theme="light"]) body.home :is(.asks,.facts-row,.reel,.doors,.h-foot) {--lh-fill:var(--surface);--lh-tint:var(--accent-pale);--lh-light:none;}
  :root[data-theme="dark"] body.home :is(.asks,.facts-row,.reel,.doors,.h-foot) .print,
  :root:not([data-theme="light"]) body.home :is(.asks,.facts-row,.reel,.doors,.h-foot) .print {background:var(--surface);}
  html body.home .live-line {background:var(--surface);}
  html body.home .door .d-go {background:var(--surface);}
}