:root{--ink:#16171a;--mute:#5d6068;--line:#e6e7ea;--bg:#fff;--life:#f2f4ef;font-synthesis:none}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{background:var(--bg);color:var(--ink);font-family:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px}
.topbar{position:fixed;inset:0 0 auto 0;height:72px;display:flex;align-items:center;gap:28px;padding:0 clamp(18px,3vw,40px);z-index:40;background:linear-gradient(#fff 55%,rgba(255,255,255,0))}
.logo{font-size:24px;letter-spacing:.02em;white-space:nowrap}.logo b{font-weight:800;font-size:26px}
.nav{margin-left:auto;display:flex;gap:clamp(18px,3vw,40px);font-size:14px}
.nav a:hover,.nav a:focus-visible{color:#000;text-decoration:underline;text-underline-offset:6px}
.join{border:1.5px solid var(--ink);border-radius:999px;padding:8px 20px;font-size:14px;white-space:nowrap;background:#fff}
.join:hover{background:var(--ink);color:#fff}
.stage{position:relative;height:760vh}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#fff}
#seq,#fx,.poster{position:absolute;inset:0;width:100%;height:100%}
.poster{object-fit:cover;object-position:62% 50%;opacity:0;transition:opacity .3s}
.no-seq .poster{opacity:1}
#fx{pointer-events:none;z-index:6}
.hero-copy{position:absolute;left:clamp(20px,3.2vw,44px);top:34vh;z-index:5;max-width:min(520px,44vw)}
.eyebrow{font-size:12px;letter-spacing:.32em;color:#333;margin-bottom:22px}
.hero-copy h1{font-size:clamp(44px,6.1vw,84px);line-height:1.12;font-weight:800;letter-spacing:.02em}
.hero-copy .sub{font-size:clamp(16px,1.5vw,20px);color:#3b3d42;margin-top:22px}
.cta{display:flex;gap:28px;align-items:center;margin-top:40px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}
.btn.primary{background:var(--ink);color:#fff;border-radius:999px;padding:13px 26px}
.btn.primary:hover{background:#000}
.btn.link{border-bottom:1px solid var(--ink);padding:4px 0}
.shards{position:absolute;inset:0;z-index:7;pointer-events:none}
.shard{position:absolute;overflow:hidden;will-change:transform,opacity;backface-visibility:hidden;contain:strict}
.shard .glass{position:absolute;inset:0;background:rgba(255,255,255,.16)}
.shard .hero-copy{pointer-events:none}
.cards{position:absolute;left:50%;top:40vh;transform:translateX(-50%);width:min(1060px,92vw);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);z-index:8;pointer-events:none}
.cards.live{pointer-events:auto}
.card{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:10px;min-height:190px;padding:22px 22px 18px;border-radius:20px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 50px rgba(20,22,30,.16),inset 0 1px 0 #fff;opacity:0;transition:box-shadow .2s}
.card:hover,.card:focus-visible{box-shadow:0 22px 60px rgba(20,22,30,.26),0 0 0 2px var(--ink)}
.card .tag{font-size:12px;letter-spacing:.12em;color:var(--mute)}
.card strong{font-size:clamp(17px,1.6vw,21px);line-height:1.35}
.card em{font-style:normal;font-size:13px;color:var(--mute)}
.card .go{margin-top:auto;font-size:13px}
.life-wipe{position:absolute;inset:0;z-index:12;background:var(--life);clip-path:circle(0px at 50% 45%);display:flex;align-items:center;justify-content:center;text-align:center}
.life-inner{max-width:640px;padding:0 24px;opacity:0}
.life-inner h2{font-size:clamp(46px,7vw,92px);font-weight:800;margin:6px 0 18px}
.life-inner p{font-size:clamp(16px,1.6vw,20px);color:#3b3d42;line-height:1.7}
.chips{list-style:none;display:flex;gap:12px;justify-content:center;margin-top:28px}
.chips li{border:1.5px solid var(--ink);border-radius:999px;padding:8px 18px;font-size:14px}
.chips .hot{background:var(--ink);color:#fff}
.hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:12px;letter-spacing:.2em;color:#777;z-index:9}
.status{position:absolute;right:16px;bottom:14px;font-size:12px;color:#888;z-index:9}
.sec{padding:120px clamp(20px,6vw,96px);max-width:1200px;margin:0 auto;border-top:1px solid var(--line)}
.sec h2{font-size:clamp(32px,4vw,52px);margin-bottom:20px}
.lead{color:var(--mute);max-width:640px;line-height:1.8;margin-bottom:28px}
.list{list-style:none;display:grid;gap:12px}.list li{padding:16px 0;border-bottom:1px solid var(--line)}
.list b{font-size:12px;border:1px solid #bbb;border-radius:4px;padding:1px 6px;margin-right:10px;font-weight:500;color:var(--mute)}
.life{background:var(--life);max-width:none}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px;max-width:1100px}
.grid3 article{background:#fff;border-radius:18px;padding:26px;line-height:1.7}
.grid3 h3{margin-bottom:8px}.grid3 small{color:var(--mute)}
.grid3 .feature{outline:2px solid var(--ink)}
.foot{padding:40px;text-align:center;color:#888;font-size:12px}
dialog{border:none;border-radius:20px;padding:34px;max-width:min(560px,92vw);box-shadow:0 30px 80px rgba(0,0,0,.25);line-height:1.75}
dialog::backdrop{background:rgba(20,22,26,.35);backdrop-filter:blur(3px)}
dialog .tag{font-size:12px;letter-spacing:.12em;color:var(--mute)}dialog h3{font-size:22px;margin:6px 0 12px}
dialog ol{padding-left:20px;margin:10px 0}.close{position:absolute;right:16px;top:12px;border:none;background:none;font-size:26px;cursor:pointer}
/* static fallback (no GSAP / reduced motion) */
.static .stage{height:auto}.static .pin{position:relative;height:auto;min-height:100vh;padding-bottom:40px}
.static .cards{position:relative;left:auto;top:auto;transform:none;margin:calc(100vh + 20px) auto 0;pointer-events:auto}.static .card{opacity:1}
.static .life-wipe{display:none}.static #seq{height:100vh}.static .hint{display:none}
@media (max-width:760px){
  .topbar{height:60px;gap:12px}.logo{font-size:18px}.logo b{font-size:20px}
  .nav{display:none}.join{margin-left:auto;padding:6px 14px;font-size:13px}
  .hero-copy{top:86px;max-width:none;right:20px}
  .eyebrow{margin-bottom:12px;font-size:11px}
  .hero-copy h1{font-size:44px}.hero-copy .sub{margin-top:12px;font-size:15px}
  .cta{margin-top:20px;gap:18px}.btn.primary{padding:11px 20px;font-size:14px}.btn.link{font-size:14px}
  .cards{top:96px;grid-template-columns:1fr;gap:10px;width:calc(100vw - 32px)}
  .card{min-height:0;padding:14px 16px;gap:4px;border-radius:16px}.card em{display:none}
  .grid3{grid-template-columns:1fr}.sec{padding:80px 20px}
  .chips{flex-wrap:wrap}
}

/* Local review fixes: poster-first progressive enhancement and safe controls. */
.no-seq #seq{visibility:hidden}
.static .poster{opacity:1;height:100vh;height:100svh;object-position:62% 50%}
.static .cards{visibility:visible}
.noscript-note{padding:24px;line-height:1.7;color:var(--mute)}
.cards[aria-hidden=true]{visibility:hidden}
dialog{margin:auto;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain}
dialog .close{position:sticky;float:right;top:0;right:auto;z-index:2;background:#fff;border-radius:50%;width:32px;height:32px;line-height:1}
a:focus-visible,button:focus-visible{outline:3px solid #4455a5;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.poster,.card,.join{transition:none}}

.poster,.static .poster{object-position:50% 50%}
@media(max-width:760px){
  .poster,.static .poster{inset:auto;left:-25vw;top:calc(100svh - 70.3125vw - max(56px,7svh));width:125vw;height:70.3125vw;object-fit:fill}
}

/* ===== v8-r2：下方栏目与卡片统一为首屏视觉语言（白底 · 大号黑字 · 细线 · 银铬细节） ===== */
:root{--life:#fff;--line:#e8e8ea;--chrome:linear-gradient(135deg,#fdfdfd 0%,#c9cbd0 22%,#f7f7f8 45%,#a9acb3 62%,#eceef0 80%,#cfd1d6 100%)}
.btn.outline{border:1.5px solid var(--ink);border-radius:999px;padding:12px 24px}
.btn.outline:hover{background:var(--ink);color:#fff}
/* 三张碎片重组卡片：浅灰白 + 银铬细描边，不用毛玻璃和大阴影 */
.card{background:#fafafb;backdrop-filter:none;border:1px solid transparent;border-radius:18px;
  background-image:linear-gradient(#fafafb,#fafafb),var(--chrome);background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 1px 0 #fff inset,0 6px 18px rgba(20,22,30,.06);transition:box-shadow .2s,background .2s}
.card:hover,.card:focus-visible{box-shadow:0 0 0 1.5px var(--ink),0 8px 22px rgba(20,22,30,.08)}
.card .tag,.tile-k,.sec-no,.row-tag{font-size:11px;letter-spacing:.28em;color:#6b6e75;text-transform:uppercase}
.card strong{font-weight:700;letter-spacing:.01em}
.card .go{display:inline-flex;align-self:flex-start;border-bottom:1px solid var(--ink);padding-bottom:2px}
/* 合掌后的生活实践过场：白底 */
.life-wipe{background:#fff}
.life-inner .eyebrow{letter-spacing:.32em}
.chips li{border-width:1px}
/* 栏目 */
.sec{max-width:1240px;padding:clamp(80px,11vw,150px) clamp(20px,5vw,64px);border-top:0;position:relative}
.sec::before{content:"";position:absolute;left:clamp(20px,5vw,64px);right:clamp(20px,5vw,64px);top:0;height:1px;background:var(--line)}
.life{background:#fff}
.sec-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.sec-flip .sec-media{order:-1}
.sec-no{margin-bottom:28px}
.sec .eyebrow{font-size:12px;letter-spacing:.32em;color:#333;margin-bottom:18px}
.sec h2{font-size:clamp(40px,5.2vw,72px);line-height:1.12;font-weight:800;letter-spacing:.02em;margin-bottom:22px}
.lead{font-size:clamp(15px,1.3vw,18px);color:#3b3d42;line-height:1.8;max-width:520px;margin:0}
.sec-media{margin:0;aspect-ratio:5/4;border-radius:22px;overflow:hidden;background:#fff;position:relative;
  border:1px solid transparent;background-image:linear-gradient(#fff,#fff),var(--chrome);background-origin:border-box;background-clip:padding-box,border-box}
.sec-media img{width:100%;height:100%;object-fit:cover;display:block}
/* 列表行：细线分隔 */
.rows{list-style:none;margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--ink)}
.rows li{display:grid;grid-template-columns:72px minmax(0,1fr) auto 32px;gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);font-size:clamp(17px,1.6vw,22px);font-weight:600}
.row-tag{font-weight:400}
.row-d{font-size:13px;font-weight:400;color:#6b6e75;letter-spacing:.04em}
.row-go{font-weight:400;text-align:right}
/* 生活实践三格 */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(40px,5vw,64px)}
.tile{border-radius:18px;padding:28px 26px 24px;line-height:1.75;color:#3b3d42;display:flex;flex-direction:column;gap:8px;
  border:1px solid transparent;background-image:linear-gradient(#fafafb,#fafafb),var(--chrome);background-origin:border-box;background-clip:padding-box,border-box}
.tile h3{font-size:24px;color:var(--ink);font-weight:800}
.tile small{margin-top:auto;color:#6b6e75;padding-top:10px}
.tile-feature{background-image:linear-gradient(var(--ink),var(--ink)),var(--chrome);color:#d9dadd}
.tile-feature h3{color:#fff}.tile-feature .tile-k,.tile-feature small{color:#a9acb3}
/* 社群 */
.club{text-align:left}.club h2{font-size:clamp(48px,7vw,96px)}
.club-cta{margin-top:36px}
/* 页脚 */
.foot{max-width:1240px;margin:0 auto;padding:36px clamp(20px,5vw,64px) 48px;text-align:left;color:#6b6e75;border-top:1px solid var(--ink)}
.foot-in{display:flex;align-items:center;gap:28px;flex-wrap:wrap}.foot .logo{color:var(--ink);font-size:20px}.foot .logo b{font-size:22px}
.foot-nav{margin-left:auto;display:flex;gap:28px;font-size:14px;color:var(--ink)}
.foot-note{margin-top:18px;font-size:12px;letter-spacing:.04em}
@media (max-width:760px){
  .sec-grid{grid-template-columns:1fr}.sec-flip .sec-media{order:0}
  .sec h2{font-size:40px}.club h2{font-size:48px}
  .tiles{grid-template-columns:1fr}
  .rows li{grid-template-columns:56px minmax(0,1fr) 20px;gap:12px;font-size:17px}.row-d{display:none}
  .foot-nav{margin-left:0;gap:18px}
  .card{box-shadow:0 4px 12px rgba(20,22,30,.06)}
}
/* 生活实践过场：左文右图，呼应首屏 */
.life-wipe{background:#fff;display:block;text-align:left}
.life-inner{max-width:none;padding:0;position:absolute;inset:0}
.life-copy{position:absolute;left:clamp(20px,3.2vw,44px);top:34vh;max-width:min(560px,46vw);z-index:2}
.life-inner h2{font-size:clamp(44px,6.1vw,84px);line-height:1.12;font-weight:800;letter-spacing:.02em;color:var(--ink);margin:0}
.life-inner .sub{font-size:clamp(16px,1.5vw,20px);color:#3b3d42;margin-top:22px;line-height:1.7}
.chips{justify-content:flex-start;margin-top:40px;gap:14px}
.chips li{border:1.5px solid var(--ink);border-radius:999px;padding:8px 20px;font-size:14px;background:#fff}
.chips .hot{background:var(--ink);color:#fff}
.life-media{position:absolute;right:clamp(20px,4vw,64px);top:50%;transform:translateY(-46%);width:min(46vw,620px);aspect-ratio:5/4;margin:0;border-radius:22px;overflow:hidden;
  border:1px solid transparent;background-image:linear-gradient(#fff,#fff),var(--chrome);background-origin:border-box;background-clip:padding-box,border-box}
.life-media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){
  .life-copy{top:96px;right:20px;max-width:none}.life-inner h2{font-size:44px}
  .life-media{left:20px;right:20px;width:auto;top:auto;bottom:max(56px,7svh);transform:none}
  .chips{flex-wrap:wrap;margin-top:24px}
}
.shard-page{position:absolute}

/* Static mode must not retain the last impact drawing. */
.static #fx{display:none}
/* Short phones: leave a real gap between life copy and the silver panel. */
@media(max-width:760px) and (max-height:640px){
  .life-copy{top:80px}
  .life-inner h2{font-size:38px}
  .life-inner .sub{font-size:14px;margin-top:14px}
  .life-inner .eyebrow{margin-bottom:12px}
  .chips{margin-top:16px;gap:8px}
  .chips li{padding:6px 14px;font-size:12px}
}

.waiting-phase #fx,.waiting-phase #shards,.waiting-phase #cards,.waiting-phase #lifeWipe{visibility:hidden}

/* r4 / round A: static image integration in this pinned screen only. */
#lifeWipe .life-media{
  border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;
  isolation:isolate;
}
#lifeWipe .life-media::before{
  content:"";position:absolute;inset:-12%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%,rgba(207,215,225,.12) 0%,rgba(235,240,246,.07) 45%,rgba(255,255,255,0) 72%);
}
#lifeWipe .life-media img{
  position:relative;z-index:1;top:6%;width:100%;height:94%;display:block;
  filter:contrast(1.04) brightness(1.01);
  object-fit:cover;object-position:50% 50%;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 90%,transparent 100%);
  mask-composite:intersect;
}

/* r4 / round C: static silver surfaces on existing shards; no new motion. */
.shard .glass{
  background:linear-gradient(128deg,rgba(237,243,249,.58) 0%,rgba(255,255,255,.28) 35%,rgba(169,185,204,.15) 53%,rgba(255,255,255,.06) 77%,rgba(213,224,237,.28) 100%);
}
.shard .glass-edges{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}