/* 首页七屏：天是固定在后面的一张画布，内容都透明地放在上面。 */
.phone{position:relative;width:var(--pw,300px);aspect-ratio:750/1624;padding:6px;border-radius:calc(var(--pw,300px)*.148);background:#1d1b18;box-shadow:0 44px 90px -38px rgba(38,36,31,.5),0 12px 30px -16px rgba(38,36,31,.28)}
.phone img,.phone picture{width:100%;height:100%;border-radius:calc(var(--pw,300px)*.128);object-fit:cover;overflow:hidden}
.on-night .phone,.s4 .phone{box-shadow:0 44px 90px -30px rgba(0,0,0,.6),0 0 0 1px rgba(239,232,216,.07)}
.narrative-art{position:absolute;pointer-events:none;user-select:none;height:auto;max-width:none}
@media (prefers-color-scheme:dark){.phone{box-shadow:0 44px 90px -30px rgba(0,0,0,.6),0 0 0 1px rgba(239,232,216,.07)}}

/* 1 这是什么、点哪里 */
.s1{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(24px,4vw,64px);padding-block:clamp(96px,11vh,120px) clamp(40px,7vh,72px);--pw:min(25vw,37svh,340px)}
.s1 h1{max-width:13.5em}
.s1 .lede{margin-top:clamp(18px,1.8vw,24px)}
.s1 .cta{margin-top:clamp(26px,2.6vw,36px)}
.s1-phone{position:relative;isolation:isolate;display:grid;place-items:center}
.s1-phone .phone{z-index:1}
.hero-hands{width:min(calc(var(--pw)*2.35),calc(100% + var(--g)*2));left:50%;bottom:calc(var(--pw)*-.3);translate:-50% 0;z-index:0}
.js .s1 .phone{animation:rise 1.5s var(--ease) both}
@keyframes rise{from{translate:0 44px}to{translate:0 0}}

/* 2 能问什么 */
.s2{padding-block:clamp(90px,10vw,150px) clamp(70px,9vw,130px)}
.s2 .lede{margin-top:clamp(12px,1.2vw,18px);margin-bottom:clamp(40px,4.4vw,70px)}
.ways{display:grid;grid-template-columns:5fr 3.4fr 4.4fr;grid-template-rows:auto auto;column-gap:clamp(24px,4.5vw,72px)}
.way{display:grid;grid-row:span 2;grid-template-rows:subgrid}
.way-art{align-self:end;display:block}
.way canvas{width:100%;height:auto}
.way-blocks .way-art{max-width:381px}
.way-tube .way-art{max-width:300px}
.way-coins .way-art{max-width:354px}
.way-text{padding-top:clamp(18px,2vw,30px)}
.way-text p{color:var(--ink2);margin-top:8px;max-width:26ch}
.way-text .tl{display:inline-flex;align-items:center;min-height:44px;margin-top:6px}

/* 3 你会得到什么：斜体是答案的声音 */
.s3{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);padding-block:clamp(70px,9vw,130px);--pw:min(23vw,36svh,320px)}
.answers{margin-bottom:clamp(56px,7vw,110px)}
.ans{--p:1;opacity:var(--p);margin-bottom:clamp(44px,5.4vw,84px)}
.ans-q{color:var(--ink3);font-size:clamp(16px,1.2vw,17px);margin-bottom:6px}
.ans-a{font:italic 350 clamp(30px,3.4vw,48px)/1.16 var(--serif);letter-spacing:-.006em;color:var(--ink);text-wrap:balance}
.s3 .lede{margin-top:clamp(14px,1.4vw,20px)}
.s3-phone{position:sticky;top:max(32px,calc(50svh - var(--pw)*1.25));align-self:start;justify-self:center;isolation:isolate;width:100%;min-height:calc(var(--pw)*2.6);display:grid;justify-items:center;padding-top:12px}
.s3-phone .phone{z-index:1}
.reading-folio{width:min(calc(var(--pw)*2.05),calc(100% + var(--g)*2));left:50%;bottom:calc(var(--pw)*-.03);translate:-50% 0;z-index:0}

/* 4 每天：这一屏钉住，天从白天喷到夜里 */
.s4{height:260lvh}
.s4-pin{position:sticky;top:0;height:100lvh;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,88px);--pw:min(23vw,38svh,330px)}
.s4 h2{font-size:clamp(28px,2.7vw,38px);margin-bottom:clamp(12px,1.2vw,18px)}
.s4-night{justify-self:end;max-width:380px}
.s4-day{max-width:400px}
.stack{isolation:isolate}
.stack .shot-night{--w:0;position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);-webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--w)*120% - 20%),transparent calc(var(--w)*120%));mask-image:linear-gradient(to bottom,#000 calc(var(--w)*120% - 20%),transparent calc(var(--w)*120%))}
.s4-phone{position:relative}

/* 5 关于你 */
.s5{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,88px);padding-block:clamp(90px,11vw,170px);--pw:min(22vw,35svh,310px)}
.duo{position:relative;isolation:isolate;height:calc(var(--pw)*2.8);max-width:calc(var(--pw)*2.1);margin-top:calc(var(--pw)*.24)}
.memory-letters{width:min(calc(var(--pw)*2.65),calc(100% + var(--g)*2));left:50%;top:calc(var(--pw)*-.4);translate:-50% 0;z-index:-1}
.duo .phone{position:absolute}
.duo-front{left:calc(var(--pw)*.16);top:calc(var(--pw)*.16)}
.duo-back{right:0;bottom:calc(var(--pw)*.12);--pw:calc(min(22vw,35svh,310px)*.86)}
.s5 .lede{margin-top:clamp(14px,1.4vw,20px)}

/* 6 器物 */
.s6{display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:clamp(70px,9vw,130px)}
.device{width:min(460px,72vw);margin-bottom:clamp(8px,1.5vw,24px)}
.s6 .lede{margin-top:clamp(12px,1.2vw,18px);max-width:52ch}
.wl{margin-top:clamp(28px,3vw,40px);width:min(520px,100%)}
.wl-row{display:flex;gap:12px}
.wl input{flex:1;min-width:0;min-height:52px;padding:8px 24px;border:0;border-radius:27px;background:rgba(239,232,216,.1);color:var(--ink);font:400 16px/1.2 var(--sans);transition:background-color .25s}
.wl input::placeholder{color:var(--ink3)}
.wl input:hover{background:rgba(239,232,216,.14)}
.wl input:focus{background:rgba(239,232,216,.17);outline:2px solid var(--accent);outline-offset:2px}
.wl input[aria-invalid=true]{background:rgba(229,143,114,.16)}
.wl input:disabled{opacity:.6}
.wl.done .btn{display:none}
.wl-note{margin-top:14px;color:var(--ink3);font-size:15px;min-height:1.5em}
.wl-note.bad{color:#efb29c}
.wl.done .wl-note{color:var(--ink)}

/* 7 为什么 */
.s7{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center;gap:clamp(32px,5vw,80px);padding-block:clamp(90px,11vw,150px) clamp(40px,5vw,80px)}
.s7-text{max-width:600px}
.story-art{position:relative;min-width:0;pointer-events:none;user-select:none}
.story-art img{width:115%;max-width:none;margin-left:-6%;height:auto}
.s7-lead{font-size:clamp(24px,2.2vw,32px);line-height:1.32;letter-spacing:-.004em;text-wrap:pretty}
.s7 .lede{margin-top:clamp(22px,2.4vw,32px)}
.s7-sign{margin-top:14px;color:var(--ink3);font-size:16px}
.s7 .cta{margin-top:clamp(32px,3.4vw,46px)}

/* 手机 */
@media (max-width:820px){
  .s1{grid-template-columns:1fr;min-height:0;padding-top:104px;padding-bottom:64px;gap:52px;--pw:min(66vw,290px)}
  .s1-phone{margin-bottom:calc(var(--pw)*.25)}
  .hero-hands{width:min(calc(var(--pw)*1.75),calc(100% + var(--g)*2));bottom:calc(var(--pw)*-.24)}
  .s2{padding-top:120px}
  .ways{grid-template-columns:1fr;grid-template-rows:none;row-gap:60px}
  .way{grid-row:auto;grid-template-rows:auto auto}
  .way-blocks .way-art{max-width:320px}
  .way-tube .way-art{max-width:224px}
  .way-coins .way-art{max-width:290px}
  .s3{grid-template-columns:1fr;gap:64px;--pw:min(66vw,290px)}
  .s3-phone{position:relative;top:auto;justify-self:center;min-height:calc(var(--pw)*2.65)}
  .reading-folio{width:min(calc(var(--pw)*1.7),calc(100% + var(--g)*2))}
  .s4{height:290lvh}
  .s4-pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;justify-items:center;padding-top:clamp(36px,8svh,76px);gap:clamp(20px,3svh,32px);--pw:min(58vw,33svh)}
  .s4-day,.s4-night{grid-row:1;grid-column:1;justify-self:stretch;max-width:none}
  .s4-phone{grid-row:2;grid-column:1}
  .s5{grid-template-columns:1fr;gap:56px;--pw:min(50vw,250px)}
  .s5-text{order:-1}
  .duo{height:calc(var(--pw)*2.9);max-width:none;width:100%;margin-top:calc(var(--pw)*.18)}
  .memory-letters{width:min(calc(var(--pw)*2.3),calc(100% + var(--g)*2));top:calc(var(--pw)*-.3)}
  .duo-back{--pw:calc(min(50vw,250px)*.9)}
  .s7{grid-template-columns:1fr;min-height:0;padding-top:48px;gap:32px}
  .story-art{grid-row:1;margin-inline:calc(var(--g)*-1)}
  .story-art img{width:100%;margin-left:0}
  .s7-text{max-width:none}
}
@media (max-width:480px){
  .wl-row{flex-direction:column}
  .wl .btn{width:100%}
}

/* 不用脚本、不用动效、没有 WebGL：不钉，前后两段照顺序放，夜里的部分自带底色 */
html:not(.js) .on-night,html.no-gl .on-night{background:#24211d}
html:not(.js) .foot.on-night,html.no-gl .foot.on-night{background:#24211d;max-width:none}
html:not(.js) .s4{height:auto}
html:not(.js) .s4-pin{position:static;height:auto;grid-template-columns:1fr auto;padding-block:80px}
html:not(.js) .s4-night{display:none}
html:not(.js) .ans{opacity:1}
@media (prefers-reduced-motion:reduce){
  .s4{height:auto;background:#24211d;box-shadow:0 0 0 100vmax #24211d;clip-path:inset(0 -100vmax)}
  .s4-pin{position:static;height:auto;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding-block:80px}
  .s4-day,.s4-night{--ink:#efe8d8;--ink2:#cfc7b6;color:var(--ink)}
  .stack .shot-night{--w:1}
  .s3-phone{position:relative;top:auto}
  .ans{--p:1!important}
}
@media (prefers-reduced-motion:reduce) and (max-width:820px){
  .s4-pin{grid-template-columns:1fr;grid-template-rows:none;gap:40px;padding-block:72px}
  .s4-day,.s4-night,.s4-phone{grid-row:auto}
  .s4-day{order:1}.s4-phone{order:2}.s4-night{order:3}
}

/* ═══ 2026-11-04 从 prototypes/home4/preview/composite.css 搬进来：七屏的新画面（D41、D42、D44）。body 上有 home-composite。 ═══ */
/* 落地页钉在白天：系统深色模式下字色、底色仍是白天的，夜里只靠往下滚（2026-11-03 用户定） */
@media (prefers-color-scheme:dark){:root{--bg:#f4eee1;--card:#fbf8f1;--ink:#26241f;--ink2:#57524a;--ink3:#6e685b;--accent:#3e4f7b;--on-accent:#fbf8f1;color-scheme:light}}

/* Selected imagery is the ground; these shared washes join it to the existing paper and night. */
.composite-surface{position:relative;isolation:isolate;overflow:clip;width:100%;max-width:none;margin:0}
.composite-surface:not(.on-night){background:#f4eee1}
.composite-surface.on-night{background:#24211d}
/* 颗粒不再按屏贴（屏与屏之间会留一条横线），改成整页一层固定在视口上，见 finish.js */
.composite-grain{display:none}
body.home-composite::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;background:var(--finish-grain) repeat;background-size:160px 160px}
.home-composite .btn.m{background-color:var(--accent)}
.paint-wash{position:absolute;pointer-events:none;max-width:none;width:100%;height:100%;inset:0;filter:blur(5px)}

/* A large close-up with clear near relief and space behind its outer edge. */
.home-composite .s1{display:block;padding:0;min-height:max(680px,100svh)}
.hero-inner{position:relative;z-index:3;min-height:inherit;display:flex;align-items:center;padding-block:160px 120px}
.home-composite .s1-text{width:47%;max-width:560px}
.home-composite .s1 h1{max-width:10.7em}
.hero-art{position:absolute;inset:0;pointer-events:none}
/* 首屏：远山与月，hero-mountains.js 一层一层现画；每层画好就淡进来，雾慢慢飘，鼠标视差走 transform */
.hero-scene{position:absolute;inset:0;overflow:hidden;mask-image:linear-gradient(to bottom,#000 74%,transparent 100%)}   /* 最近的山到底边化进纸色，接第 2 屏 */
.hero-scene canvas.hm{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;display:block;opacity:0;translate:0 18px;transition:opacity 1.8s ease,translate 2.6s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.hero-scene canvas.hm.in{opacity:1;translate:0 0}
.hero-scene canvas.fog{animation:hm-drift 90s ease-in-out infinite alternate}
.hero-scene canvas.fog.b{animation-duration:120s;animation-direction:alternate-reverse}
@keyframes hm-drift{from{margin-left:-34px}to{margin-left:34px}}
@media(prefers-reduced-motion:reduce){.hero-scene canvas.hm{transition:opacity .6s ease;translate:0 0}.hero-scene canvas.fog{animation:none}}
.home-composite .nav-links{color:#26241f}
.home-composite .nav-links a{color:var(--accent)}
.home-composite .nav-links a.btn{color:var(--on-accent)}
.home-composite .nav-links a.nav-lang{color:var(--ink2)}

/* Three instruments on a shared surface; their identical source frame supplies the reflection. */
.home-composite .s2{padding:90px 0 110px;min-height:820px;mask-image:linear-gradient(to bottom,#000 calc(100% - 120px),transparent)}   /* 底边化进后面的天，不和第 3 屏的纸色起一条阶 */
.lake-art{position:absolute;inset:0;z-index:0;pointer-events:none}
.lake-paint{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;opacity:0;transition:opacity 1.2s ease}   /* 水面由 water.js 现画，地平线在器物脚下 */
.lake-paint.in{opacity:1}
.methods-inner{position:relative;z-index:3}
.home-composite .s2 h2{max-width:22ch}
.home-composite .s2 .lede{max-width:48ch;margin:18px 0 56px}
/* 三栏一组：器物、名字、一句话、链接都居中对齐，链接在一条线上 */
.home-composite .ways{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:5vw;grid-template-rows:250px auto}
.home-composite .way{grid-row:span 2;grid-template-rows:subgrid;min-width:0;text-align:center}
.home-composite .way-art{position:relative;display:flex;justify-content:center;align-items:flex-end;width:100%;height:250px;max-width:none;overflow:visible}
.home-composite .way-art>canvas[data-kit]{position:relative;z-index:2;object-fit:contain;max-width:100%;width:280px;height:auto;filter:saturate(.78)}
.home-composite .way-tube canvas[data-kit]{width:205px}
.home-composite .way-coins canvas[data-kit]{width:255px}
.object-ground{display:none}   /* 水面上没有地上的影子，只有倒影 */
.home-composite .way-art .water-reflection{position:absolute;top:100%;left:50%;translate:-50% 0;scale:1 -1;width:280px;height:auto;max-width:100%;opacity:.3;filter:blur(1.6px) saturate(.7);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 22%,transparent 58%);pointer-events:none}   /* 倒影贴着脚，往下很快淡掉，不加条纹 */
.home-composite .way-tube .water-reflection{width:205px}
.home-composite .way-coins .water-reflection{width:255px}
.home-composite .way-text{padding-top:44px;position:relative;z-index:4}
.home-composite .way-text h3{margin:0}
.home-composite .way-text h3 small{font:400 14px/1.4 var(--sans);color:var(--ink3);margin-left:6px;white-space:nowrap}
.home-composite .way-text p{max-width:30ch;margin:8px auto 0;min-height:3.2em}   /* 留两行的高，三个链接才齐 */
.home-composite .way-text .btn.soft{margin-top:12px}
html[lang^="zh"] .home-composite .live .ans-a{font-style:normal;letter-spacing:.02em}
html[lang^="zh"] .home-composite .s1 h1{max-width:14em}
.lake-wash{top:48%;height:32%;opacity:.6}

/* The new artwork has its own dark ground; it fades before the copy. */
.home-composite .s5{display:block;padding:0;min-height:820px}
.chart-scene{position:absolute;inset:0;pointer-events:none}
/* 五行画成五团颜料，和 App 命盘一样，放大到一屏；画在左边 56% 的台面上 */
.element-stage{position:absolute;left:0;top:10%;width:57%;height:66%}
.element-paint{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0;transition:opacity 1.4s ease}
.element-paint.in{opacity:1}
.chart-inner{position:relative;z-index:3;min-height:820px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:6vw;align-items:center;padding-block:110px}
.home-composite .s5-text{grid-column:2;order:initial;max-width:470px}
.element-legend{position:absolute;bottom:27%;left:5.7%;width:45.6%;display:grid;grid-template-columns:repeat(5,1fr);list-style:none;padding:0;margin:0;font-size:15px;line-height:1.4;color:#cfc7b6;z-index:1;text-align:center}
.element-legend span{display:block;color:#8e877a;font-size:14px}
.element-wood{color:#a3c09b}.element-fire{color:#f0a383}.element-earth{color:#d8bf88}.element-metal{color:#dfe2e6}.element-water{color:#a6b9e2}

/* Photograph, wide glossy bezel and real active screen; no replacement housing. */
.home-composite .s6{display:block;padding:0;text-align:left;min-height:800px}
.device-scene{position:absolute;inset:0;pointer-events:none;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 89%,transparent)}
.device-scene svg{width:100%;height:100%;max-width:none;object-fit:cover}
.device-scene .real-device-screen{filter:brightness(.8) saturate(.8)}
.device-inner{position:relative;z-index:3;min-height:800px;display:flex;align-items:center;padding-block:120px}
.device-copy{width:46%;max-width:520px}
.home-composite .s6 .lede{max-width:43ch}
.home-composite .s6 .wl{max-width:520px}

/* The light reaches from the actual sprayed phase down to the roof and window. */
.home-composite .s7{display:block;padding:0;min-height:880px}
.home-landscape{position:absolute;inset:0;pointer-events:none;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 92%,transparent)}
/* 第 7 屏的夜景由 house.js 用首屏同一支喷枪画（天和远山、飘的雾、近地和房子、窗里的灯四层） */
.home-landscape canvas.ls{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;display:block;opacity:0;transition:opacity 1.6s ease}
.home-landscape canvas.ls.in{opacity:1}
.home-landscape canvas.fog.in{animation:hm-drift 110s ease-in-out infinite alternate-reverse}
.home-landscape canvas.lamp.in{animation:lamp-breathe 7s ease-in-out 1.6s infinite alternate}
@keyframes lamp-breathe{from{opacity:.78}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.home-landscape canvas.ls{transition:opacity .6s ease}.home-landscape canvas.fog,.home-landscape canvas.lamp{animation:none}}
.story-inner{position:relative;z-index:3;min-height:880px;padding-top:110px;padding-bottom:200px}
.home-composite .s7-text{max-width:700px;width:62%}
.home-composite .s7-lead{font-size:clamp(26px,2.45vw,35px);line-height:1.34}
.home-composite .s7 .lede{max-width:50ch}
.story-moon{position:absolute;left:73%;top:12%;width:205px;height:205px;max-width:22vw;z-index:1;pointer-events:none;opacity:.85;mask-image:radial-gradient(circle closest-side,#000 52%,transparent 100%)}
.home-composite .foot{background:#24211d}

@media(min-width:1800px){.hero-art img{object-position:center}.home-composite .s1-text{width:43%}.home-composite .s5,.chart-inner{min-height:980px}.home-composite .s7,.story-inner{min-height:1050px}}
@media(max-width:1000px) and (min-width:821px){.home-composite .s1-text{width:51%}.hero-inner{padding-top:140px}.home-composite .ways{column-gap:4vw}.home-composite .s2{min-height:900px}.element-legend{font-size:13px;gap:9px}.device-copy{width:48%}.device-scene svg{width:118%;margin-left:-9%}}

@media(max-width:820px){
  .home-composite .s1{min-height:980px}
  .hero-inner{padding-top:128px;padding-bottom:480px;align-items:flex-start;min-height:980px}
  .home-composite .s1-text{width:100%;max-width:520px}
  .home-composite .s1 h1{max-width:12em}
  .hero-art{top:400px;bottom:0;left:0;right:0;mask-image:linear-gradient(to bottom,transparent,#000 22%)}
  .home-composite .s2{padding-block:80px 56px;min-height:0}
  /* 手机上图和字别隔太远：第 2 屏底、第 3 屏手机下面原来各空了一两百像素 */
  .home-composite .s3{padding-bottom:36px}
  .home-composite .s3-phone{min-height:0}
  .home-composite .s2 h2{max-width:18em}
  .home-composite .s2 .lede{margin-bottom:65px}
  .lake-art{max-height:760px;mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 67%,transparent)}
  .home-composite .ways{grid-template-columns:1fr;grid-template-rows:none;row-gap:65px}
  .home-composite .way{grid-row:auto;display:grid;grid-template-columns:40% minmax(0,1fr);grid-template-rows:auto;gap:24px;align-items:center}
  .home-composite .way-art{height:230px}
  .home-composite .way-art>canvas[data-kit]{width:230px}
  .home-composite .way-tube canvas[data-kit]{width:156px}
  .home-composite .way{text-align:left}
  .home-composite .way-text{padding-top:0}
  .home-composite .way-text p{margin-left:0}
  .home-composite .way-art .water-reflection{opacity:.09;max-height:100px;object-fit:cover;object-position:bottom}
  .home-composite .s5{padding-bottom:80px;min-height:0}
  .chart-scene{position:relative;height:82vw;min-height:350px;max-height:650px;overflow:hidden}
  .element-stage{left:0;top:4%;width:100%;height:78%}
  .element-legend{width:80%;left:10%;bottom:10px;font-size:13px}
  .chart-inner{display:block;min-height:0;padding-top:45px;padding-bottom:0}
  .home-composite .s5-text{max-width:560px}
  .home-composite .s6{min-height:0;padding-bottom:90px}
  .device-scene{position:relative;width:100%;height:95vw;max-height:700px;overflow:hidden}
  .device-scene svg{width:188%;height:100%;max-width:none;position:absolute;right:0}
  .device-inner{min-height:0;padding-block:35px 0}
  .device-copy{width:100%;max-width:560px}
  .home-composite .s6 .wl{max-width:100%}
  .home-composite .s7{min-height:1000px}
  .story-inner{min-height:1000px;padding-top:60px;padding-bottom:380px}
  .home-composite .s7-text{width:100%;max-width:560px}
  .home-composite .s7-lead{font-size:clamp(26px,4vw,34px)}
  .home-landscape{top:33%;mask-image:linear-gradient(to bottom,transparent,#000 19%,#000 92%,transparent)}
  .story-moon{left:auto;right:9%;top:auto;bottom:280px;width:155px;height:155px;max-width:none}
}
@media(max-width:480px){
  .home-composite .s1,.hero-inner{min-height:900px}.hero-inner{padding-top:116px;padding-bottom:430px}.hero-art{top:400px}
  .home-composite .way{grid-template-columns:42% minmax(0,1fr);gap:20px}.home-composite .way-art{height:200px}.home-composite .way-tube canvas[data-kit]{width:140px}.home-composite .way-text p{font-size:15px}.home-composite .way-text h3{font-size:23px}.home-composite .way-text .tl{font-size:15px}
  .element-legend{font-size:12px;gap:7px}.home-composite .s7,.story-inner{min-height:1040px}.story-moon{bottom:290px;right:6%}
}
@media(prefers-reduced-motion:reduce){.hero-art{transform:none!important}.hero-object{transform:none!important}}

/* 第 3 屏：标题先说事，下面一组"问 → 答"轮着演（demo.js），整屏背后一层随滚动变亮的傍晚暖光 */
.home-composite .s3{position:relative;isolation:isolate;--dusk:.15}
.home-composite .s3 .s3-text{display:flex;flex-direction:column}
/* 两栏时，左边这一组字在手机旁边上下居中（手机画面比它的盒子矮一截，padding-bottom 把这一截让出来），左下角不再空着一大片 */
@media(min-width:821px){.home-composite .s3 .s3-text{justify-content:center;padding-bottom:calc(var(--pw)*.43 - 24px)}}
.home-composite .s3 h2{order:0}
.home-composite .s3 .lede{order:1;max-width:46ch}
.home-composite .demo{order:2;position:relative;margin:clamp(40px,5vw,64px) 0 0;min-height:7.4em}
.home-composite .demo.live-on .ans{display:none}
.home-composite .demo.static .ans{--p:1!important;margin-bottom:26px}
.home-composite .live{transition:opacity .45s ease}
.home-composite .live.out{opacity:0}
.home-composite .live .ans-q{font-size:17px;color:var(--ink2);margin-bottom:10px;min-height:1.5em}
.home-composite .live .lbl{color:var(--ink3)}
.home-composite .live .cur{display:inline-block;width:1.5px;height:1em;margin-left:3px;vertical-align:-.15em;background:var(--ink2);animation:cur-blink 1s steps(2,start) infinite}
.home-composite .live.answered .cur{display:none}
@keyframes cur-blink{to{visibility:hidden}}
.home-composite .live .ans-a{font:italic 350 clamp(26px,2.6vw,34px)/1.2 var(--serif);letter-spacing:-.006em;color:var(--ink);opacity:0;translate:0 6px;transition:opacity .6s ease,translate .6s ease}
.home-composite .live.answered .ans-a{opacity:1;translate:0 0}
.dusk-wash{position:absolute;left:50%;top:0;width:100vw;height:100%;translate:-50% 0;z-index:-1;opacity:var(--dusk);transition:opacity .2s linear;mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 68%,transparent 100%)}   /* 上下都化进纸色，和第 2、4 屏接得上，不留硬边 */
@media(prefers-reduced-motion:reduce){.dusk-wash{opacity:.7}}