:root{
  --bg:#0B0F0C;
  --bg-soft:#10160F;
  --card:#141B15;
  --card-2:#1A231B;
  --line:#243026;
  --text:#F2F5EF;
  --text-2:#A9B7A9;
  --text-3:#6E7E70;
  --green:#4ADE80;
  --green-deep:#22C55E;
  --green-dim:rgba(74,222,128,.14);
  --gold:#D9A84E;
  --gold-dim:rgba(217,168,78,.14);
  --blue:#4FA8E0;
  --gray:#c9d2c9;
  --radius:18px;
  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:var(--green)}
button{font-family:inherit}

/* ---------- 滚动进场动效 ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- Hero ---------- */
header.hero{padding:88px 0 64px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5}
.hero-glow.g1{width:420px;height:420px;background:rgba(74,222,128,.13);top:-160px;right:-80px;animation:drift 14s ease-in-out infinite alternate}
.hero-glow.g2{width:340px;height:340px;background:rgba(217,168,78,.09);bottom:-180px;left:-100px;animation:drift 18s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,30px) scale(1.12)}}
.hero .wrap{position:relative;z-index:1}
.hero .kicker{color:var(--green);font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;margin-bottom:18px}
.hero h1{font-size:clamp(34px,5.4vw,56px);line-height:1.12;letter-spacing:-.015em;font-weight:800;margin-bottom:18px;max-width:780px}
.hero h1 em{font-style:normal;background:linear-gradient(180deg,#A7E163 15%,#3FA0E0 88%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero p.def{color:var(--text-2);font-size:17px;max-width:620px}

/* ---------- Section ---------- */
section.block{padding:72px 0;border-bottom:1px solid var(--line)}
.blk-head{margin-bottom:30px}
.blk-head h2{font-size:clamp(26px,3.6vw,36px);font-weight:800;letter-spacing:-.01em}
.blk-head .sub{color:var(--text-3);font-size:15px;margin-top:8px}
.viz{background:linear-gradient(160deg,var(--card) 0%,var(--card-2) 100%);border:1px solid var(--line);border-radius:var(--radius);padding:36px 34px;overflow:hidden;position:relative}
.lede{font-size:16.5px;color:var(--text-2);max-width:720px;margin-top:20px}
.lede b{color:var(--text)}

/* ---------- Section 1 · 3D 晶体 ---------- */
.crystal-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:center}
.scene{perspective:1100px;height:380px;display:flex;align-items:center;justify-content:center;position:relative;border-radius:14px;background:radial-gradient(ellipse at center,rgba(74,222,128,.07),transparent 65%)}
.rotor{position:relative;width:0;height:0;transform-style:preserve-3d;animation:spin 24s linear infinite;transform:rotateX(-16deg) rotateY(0deg)}
@keyframes spin{from{transform:rotateX(-16deg) rotateY(0deg)}to{transform:rotateX(-16deg) rotateY(360deg)}}
.rotor.paused{animation-play-state:paused}
.scene:hover .rotor{animation-play-state:paused}
.bond{position:absolute;left:0;top:0;width:180px;height:2px;margin-left:-90px;margin-top:-1px;transform-style:preserve-3d;background:linear-gradient(90deg,transparent,rgba(74,222,128,.4),transparent);border-radius:2px}
.bond.edge{background:rgba(170,190,175,.16);height:1px}
.atom{position:absolute;left:0;top:0;border:none;padding:0;background:none;cursor:pointer;transform-style:preserve-3d;-webkit-appearance:none;transition:opacity .25s ease}
.atom.a{width:22px;height:22px}
.atom.x{width:26px;height:26px}
.atom.b{width:38px;height:38px}
.ball{position:absolute;inset:0;border-radius:50%;animation:atomCounterSpin 24s linear infinite}
.atom.a .ball{background:radial-gradient(circle at 32% 28%,#fff3d4,#f2d28c 24%,#D9A84E 62%,#8f6a27);box-shadow:0 0 16px rgba(217,168,78,.6)}
.atom.x .ball{background:radial-gradient(circle at 32% 28%,#ffffff,#f0f5f0 24%,#cfd8cf 62%,#8b968d);box-shadow:0 0 16px rgba(207,216,207,.45)}
.atom.b .ball{background:radial-gradient(circle at 32% 28%,#e8ffef,#a7f3c5 22%,#4ADE80 55%,#15803d);box-shadow:0 0 30px rgba(74,222,128,.75)}
@keyframes atomCounterSpin{from{transform:rotateY(0deg) rotateX(16deg)}to{transform:rotateY(-360deg) rotateX(16deg)}}
.rotor.paused .ball,.scene:hover .ball{animation-play-state:paused}
.rotor.has-sel .atom:not(.sel){opacity:.4}
.atom.sel .ball{outline:2.5px solid #fff;outline-offset:4px;animation:atomCounterSpin 24s linear infinite,atomPulse 1.6s ease-in-out infinite}
@keyframes atomPulse{0%,100%{box-shadow:0 0 16px rgba(255,255,255,.35)}50%{box-shadow:0 0 30px rgba(255,255,255,.75)}}
.atom.b.sel .ball{box-shadow:0 0 34px rgba(74,222,128,.9)}
.scene-hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:12.5px;color:var(--text-3);pointer-events:none}
.scene-hint b{color:var(--green);font-weight:700}
.spin-btn{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text-2);font-size:12px;padding:5px 12px;border-radius:999px;cursor:pointer;transition:opacity .25s;z-index:5}
.scene:hover .spin-btn,.spin-btn.show{opacity:1}
.spin-btn:hover{border-color:var(--green);color:var(--green)}
.sun-tag{position:absolute;top:12px;left:14px;font-size:12px;color:var(--gold);font-weight:700;letter-spacing:.08em;pointer-events:none}

.site-chips,.layer-chips{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.site-chip,.layer-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 9px;color:var(--text-2);font-size:12.5px;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.site-chip .cd,.layer-chip .cd{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800}
.site-chip .cd.a{background:var(--gold);color:#1a1408}
.site-chip .cd.b{background:var(--green);color:#08140b}
.site-chip .cd.x{background:#cfd8cf;color:#1c2a22}
.layer-chip .cd{color:#0b0f0c}
.layer-chip .cd.l1{background:#E8B547}
.layer-chip .cd.l2{background:var(--blue)}
.layer-chip .cd.l3{background:var(--green)}
.layer-chip .cd.l4{background:#A78BFA;color:#fff}
.layer-chip .cd.l5{background:#E8853D;color:#fff}
.site-chip[aria-pressed="true"],.layer-chip[aria-pressed="true"]{border-color:var(--green);color:var(--text);background:var(--green-dim)}

.site-panel{min-height:250px;display:flex;flex-direction:column;justify-content:center}
.site-card{display:none}
.site-card.active{display:block;animation:fadeUp .4s cubic-bezier(.22,.61,.36,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.site-card .sc-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 13px;border-radius:999px;margin-bottom:14px}
.sc-tag.a{background:var(--gold-dim);color:var(--gold);border:1px solid rgba(217,168,78,.4)}
.sc-tag.b{background:var(--green-dim);color:var(--green);border:1px solid rgba(74,222,128,.4)}
.sc-tag.x{background:rgba(207,216,207,.12);color:#cfd8cf;border:1px solid rgba(207,216,207,.3)}
.sc-tag.l1{background:rgba(232,181,71,.13);color:#f0c877;border:1px solid rgba(232,181,71,.4)}
.sc-tag.l2{background:rgba(79,168,224,.14);color:#7cc4f0;border:1px solid rgba(79,168,224,.4)}
.sc-tag.l4{background:rgba(167,139,250,.15);color:#c4b0fc;border:1px solid rgba(167,139,250,.4)}
.sc-tag.l5{background:rgba(232,133,61,.15);color:#f5a86a;border:1px solid rgba(232,133,61,.4)}
.sc-tag .sc-dot{width:10px;height:10px;border-radius:50%}
.sc-tag.a .sc-dot{background:var(--gold)}
.sc-tag.b .sc-dot{background:var(--green)}
.sc-tag.x .sc-dot{background:#cfd8cf}
.sc-tag.l1 .sc-dot{background:#E8B547}
.sc-tag.l2 .sc-dot{background:var(--blue)}
.sc-tag.l4 .sc-dot{background:#A78BFA}
.sc-tag.l5 .sc-dot{background:#E8853D}
.site-card h3{font-size:21px;font-weight:800;margin-bottom:10px;letter-spacing:-.01em}
.site-card p{font-size:14.5px;color:var(--text-2)}
.site-card .tap-hint{font-size:13px;color:var(--text-3);margin-top:14px}
.site-card.default .formula{font-size:54px;font-weight:800;letter-spacing:.02em;margin-bottom:14px;line-height:1}
.site-card.default .formula .a{color:var(--gold)}
.site-card.default .formula .b{color:var(--green)}
.site-card.default .formula .x{color:#cfd8cf}
.site-card.default .formula sub{font-size:.45em;color:var(--text-3)}
.site-card.default p{font-size:15.5px;color:var(--text-2);max-width:440px}
.site-card.default p b{color:var(--text)}

/* ---------- Section 1 · 五层爆炸图 ---------- */
.viz-h3{font-size:18px;font-weight:800;letter-spacing:-.005em;margin:38px 0 22px;padding-top:28px;border-top:1px dashed var(--line);color:var(--text)}
.layer-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:center}
.stack-scene{perspective:1400px;height:430px;background:radial-gradient(ellipse at center,rgba(74,222,128,.06),transparent 65%)}
.stack-rotor{position:relative;width:0;height:0;transform-style:preserve-3d;animation:spin2 32s linear infinite}
@keyframes spin2{from{transform:rotateX(-24deg) rotateY(0deg)}to{transform:rotateX(-24deg) rotateY(360deg)}}
.stack-rotor.paused{animation-play-state:paused}
.stack-scene:hover .stack-rotor{animation-play-state:paused}
.rod{position:absolute;left:0;top:0;width:2px;height:200px;margin:-100px 0 0 -1px;border-radius:2px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.28) 0 6px,transparent 6px 13px);transform-style:preserve-3d}
.lbox{position:absolute;left:0;top:0;width:0;height:0;padding:0;border:none;background:none;-webkit-appearance:none;cursor:pointer;transform-style:preserve-3d;animation:floatY 4.6s ease-in-out infinite;animation-delay:var(--fdl,0s)}
@keyframes floatY{0%,100%{transform:translate3d(0,calc(var(--ly) + var(--fy,2px)),0)}50%{transform:translate3d(0,calc(var(--ly) - var(--fy,2px)),0)}}
.face{position:absolute;left:50%;top:50%;border-radius:16px;transition:opacity .25s ease,box-shadow .25s ease}
.face.top,.face.bottom{width:240px;height:160px;margin:-80px 0 0 -120px;background:var(--fc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 14px 26px rgba(255,255,255,.13)}
.face.top{transform:rotateX(90deg) translateZ(calc(var(--th)/2));backface-visibility:hidden}
.face.bottom{transform:rotateX(-90deg) translateZ(calc(var(--th)/2))}
.face.front,.face.back{width:240px;height:var(--th);margin:calc(var(--th)/-2) 0 0 -120px;background:var(--ec);box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
.face.front{transform:translateZ(80px)}
.face.back{transform:rotateY(180deg) translateZ(80px)}
.face.left,.face.right{width:160px;height:var(--th);margin:calc(var(--th)/-2) 0 0 -80px;background:var(--ec);box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
.face.left{transform:rotateY(-90deg) translateZ(120px)}
.face.right{transform:rotateY(90deg) translateZ(120px)}
.lbox[data-layer="3"] .face.top{box-shadow:0 0 28px rgba(74,222,128,.7),inset 0 0 0 1px rgba(255,255,255,.25),inset 0 14px 26px rgba(255,255,255,.18)}
.stack-rotor.has-sel .lbox:not(.sel) .face{opacity:.22}
.lbox.sel .face{box-shadow:inset 0 0 0 2px rgba(255,255,255,.92)}
.lbox.sel[data-layer="3"] .face.top{box-shadow:0 0 34px rgba(74,222,128,.9),inset 0 0 0 2px rgba(255,255,255,.95)}
.ln-badges{position:absolute;left:50%;top:50%;width:0;height:0;z-index:6;pointer-events:none}
.ln-badge{position:absolute;left:var(--bx);top:var(--by);width:30px;height:30px;margin-top:-15px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.35);transition:opacity .25s ease,box-shadow .25s ease;opacity:.92}
.stack-rotor.has-sel ~ .ln-badges .ln-badge{opacity:.22}
.stack-rotor.has-sel ~ .ln-badges .ln-badge.sel{opacity:1;box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 20px rgba(74,222,128,.65),0 4px 14px rgba(0,0,0,.45)}

/* ---------- Section 2 · 三代 Tab 切换 ---------- */
.gen-box{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.02)}
.gen-panels{padding:26px 30px 22px;min-height:340px;display:flex;flex-direction:column;justify-content:center}
.gen-panel{display:none}
.gen-panel.active{display:grid;grid-template-columns:.7fr 1.3fr;gap:30px;align-items:stretch;animation:panelIn .45s cubic-bezier(.22,.61,.36,1)}
.gen-panel.active .gen-visual{grid-column:1;grid-row:1;align-self:center}
.gen-panel.active .gen-body{grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center}
.gen-panel.active .gtags,.gen-panel.active .feat-pills{grid-column:1/-1;grid-row:2}
.gen-panel.active .ceff{grid-column:1/-1;grid-row:3}
.gen-panel.active .ieff{grid-column:1/-1;grid-row:4}
@media screen and (max-width:860px){
  .gen-panel.active{grid-template-columns:1fr}
  .gen-panel.active .gen-visual{grid-column:1;grid-row:1}
  .gen-panel.active .gen-body{grid-column:1;grid-row:2}
  .gen-panel.active .gtags,.gen-panel.active .feat-pills{grid-column:1;grid-row:3}
  .gen-panel.active .ceff{grid-column:1;grid-row:4}
  .gen-panel.active .ieff{grid-column:1;grid-row:5}
}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.gen-visual{display:flex;align-items:center;justify-content:center}
.gen-visual svg{width:100%;max-width:200px;height:auto;filter:drop-shadow(0 12px 28px rgba(0,0,0,.45))}
.gen-visual img{width:100%;max-width:200px;height:auto;border-radius:14px;display:block;filter:drop-shadow(0 12px 28px rgba(0,0,0,.45))}
.gen-panel[data-gen="3"] .gen-visual img{max-width:300px;width:100%;height:auto;aspect-ratio:39/25;object-fit:cover;border-radius:14px}
.gen-body .ge{font-size:14.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gen-panel[data-gen="1"] .ge{color:var(--gold)}
.gen-panel[data-gen="2"] .ge{color:var(--gray)}
.gen-panel[data-gen="2"] .gtags{flex-wrap:nowrap;gap:6px;margin-top:22px;margin-bottom:8px}
.gen-panel[data-gen="2"] .gtag{padding:6px 9px;font-size:11.5px;white-space:nowrap}
.gen-panel[data-gen="2"] .gtag svg{width:12px;height:12px}

.gen-panel[data-gen="2"] .gstatus{white-space:nowrap;font-size:11.5px;max-width:none;margin-top:10px}

/* Gen2：四个图例强制一排 + Efficiency 加粗 */
.gen-panel[data-gen="2"] .clegend{flex-wrap:nowrap;gap:5px 12px}
.gen-panel[data-gen="2"] .cleg{font-size:13.5px;white-space:nowrap;font-weight:600;color:var(--text-2)}
.gen-panel[data-gen="2"] .cleg b{font-weight:800}
.gen-panel[data-gen="2"] .ceff{max-width:none;margin-bottom:30px}
.gen-panel[data-gen="2"] .ceff .ct{font-size:15.5px;font-weight:700;color:var(--text-2)}
.gen-panel[data-gen="2"] .ceff .ct b{font-size:15.5px;font-weight:800;color:var(--text)}
@media screen and (max-width:860px){.gen-panel[data-gen="2"] .clegend{flex-wrap:wrap}.gen-panel[data-gen="2"] .gtags{flex-wrap:wrap}.gen-panel[data-gen="2"] .ceff{margin-bottom:16px}}
/* Gen1：图例强制一排，逻辑同 Gen2 */
.gen-panel[data-gen="1"] .clegend{flex-wrap:nowrap;gap:5px 12px}
.gen-panel[data-gen="1"] .cleg{white-space:nowrap}
.gen-panel[data-gen="1"] .ceff{max-width:none;margin-bottom:30px}
@media screen and (max-width:860px){.gen-panel[data-gen="1"] .clegend{flex-wrap:wrap}.gen-panel[data-gen="1"] .gtags{flex-wrap:wrap}.gen-panel[data-gen="1"] .ceff{margin-bottom:16px}}
/* Gen3：特性一排；图例一排 */
.gen-panel[data-gen="3"] .feat-pills{display:flex;flex-wrap:nowrap;gap:6px;margin-top:22px;margin-bottom:0}
.gen-panel[data-gen="3"] .feat-pill{padding:8px 13px;font-size:13.5px;white-space:nowrap;gap:7px}
.gen-panel[data-gen="3"] .feat-pill .fi{flex:0 0 auto}
.gen-panel[data-gen="3"] .clegend{flex-wrap:nowrap;gap:5px 12px}
.gen-panel[data-gen="3"] .cleg{white-space:nowrap}
.gen-panel[data-gen="3"] .ceff{max-width:none;margin-bottom:0}
.gen-panel[data-gen="3"] .gbig{margin-bottom:16px}
.gen-panel[data-gen="3"] .ge{color:var(--green)}
@media screen and (max-width:860px){.gen-panel[data-gen="3"] .feat-pills{flex-wrap:wrap;margin-top:18px}.gen-panel[data-gen="3"] .clegend{flex-wrap:wrap}.gen-panel[data-gen="3"] .ceff{margin-bottom:16px}}
.gen-body h3{font-size:23px;font-weight:800;letter-spacing:-.01em;margin-bottom:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gen-badge{font-size:10px;font-weight:800;letter-spacing:.08em;padding:3px 10px;border-radius:999px;background:var(--green-dim);color:var(--green);border:1px solid rgba(74,222,128,.4);text-transform:uppercase}
.gbig{display:flex;gap:30px;flex-wrap:wrap;margin-bottom:14px}
.gbig .gb .n{font-size:26px;font-weight:800;letter-spacing:-.015em;line-height:1.05;font-variant-numeric:tabular-nums}
.gbig .gb .l{font-size:11.5px;color:var(--text-3);margin-top:3px}
.gen-panel[data-gen="1"] .gbig .n{color:var(--gold)}
.gen-panel[data-gen="3"] .gbig .n{background:linear-gradient(180deg,#A7E163 15%,#3FA0E0 88%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.gtags{display:flex;flex-wrap:wrap;gap:8px}
.gen-panel[data-gen="1"] .gtags{flex-wrap:nowrap;margin-top:22px;margin-bottom:8px}
.gtag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-2);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.gtag.muted{color:var(--text-3)}
.gtag svg{flex:none}
.share{margin-top:14px;max-width:380px}
.share .sl{display:flex;justify-content:space-between;font-size:12px;color:var(--text-3);margin-bottom:6px}
.share .sl b{color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums}
.share .sb{height:7px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.share .sf{height:100%;width:95%;border-radius:99px;background:linear-gradient(90deg,#8f6a27,#D9A84E);transition:width 1.1s cubic-bezier(.22,.61,.36,1) .35s}
.js .share .sf{width:0}
.js .in .share .sf{width:95%}
.feat-pills{display:flex;flex-wrap:wrap;gap:8px}
.feat-pill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13px;transition:border-color .25s}
.feat-pill:hover{border-color:rgba(74,222,128,.5)}
.feat-pill .fi{display:flex;align-items:center}
.feat-pill b{font-weight:700}
.feat-pill .fv{color:var(--text-3);font-size:12px;font-variant-numeric:tabular-nums}

/* 效率标尺 · 标注全部下沉为图例 */
.ceff{margin-top:5px;max-width:470px}
.ceff .ct{display:flex;justify-content:space-between;gap:10px;font-size:15.5px;font-weight:700;color:var(--text-2);letter-spacing:.03em;margin-bottom:2px}
.ceff .ct b{color:var(--text-2);font-weight:700;text-align:right}
/* indoor low-light efficiency */
.ieff{margin-top:24px;margin-bottom:30px}
.ieff .ih{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ieff .ih .it{font-size:15.5px;font-weight:700;color:var(--text-2)}
.ieff .ih .is{font-size:12.5px;color:var(--text-3)}
.ieff .irow{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.ieff .irow:last-child{margin-bottom:0}
.ieff .ilab{flex:0 0 190px;font-size:13px;color:var(--text-2);text-align:right}
.ieff .ilab b{color:var(--text);font-weight:800;margin-left:5px}
.ieff .ibar{flex:1;height:9px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.ieff .ifill{display:block;height:100%;border-radius:6px}
.ieff .ifill.si{background:linear-gradient(90deg,#c9a24b,#e8c063)}
.ieff .ifill.tf{background:linear-gradient(90deg,#7d8a82,#a9b4ab)}
.ieff .ifill.pv{background:linear-gradient(90deg,#A7E163,#3FA0E0)}
@media screen and (max-width:860px){
  .ieff{margin-top:18px;margin-bottom:16px}
  .ieff .irow{flex-direction:column;align-items:stretch;gap:5px;margin-bottom:13px}
  .ieff .ilab{flex:none;text-align:left;font-size:12.5px}
  .ieff .ibar{flex:none;height:9px}
}
.ctrack{position:relative;height:9px;border-radius:99px;background:rgba(255,255,255,.07);margin:14px 0 6px}
.cfill{position:absolute;left:0;top:0;bottom:0;border-radius:99px}
.ctandem{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(74,222,128,.14) 0 5px,transparent 5px 10px);border-left:1px dashed rgba(74,222,128,.55)}
.cmark{position:absolute;top:-4px;width:2px;height:17px;background:rgba(242,245,239,.85)}
.cmark.tk{background:var(--green)}
.clim{position:absolute;top:-4px;width:0;height:17px;border-left:2px dashed var(--text-3)}
.clim.tk{border-left-color:rgba(74,222,128,.7)}
/* 条下图例：色点 + 标签 + 数值 */
.clegend{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:8px}
.cleg{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--text-2)}
.cleg b{color:var(--text-2);font-weight:800;font-variant-numeric:tabular-nums}
.cleg .cdot{width:8px;height:8px;border-radius:50%;flex:none}
.cleg .cdot.fill{border-radius:3px;width:12px;height:8px}
.cleg .cdot.line{width:0;height:11px;border-left:2px solid var(--text-3);border-radius:0;background:none}
.cleg .cdot.ring{border:1.5px dashed var(--text-3);background:none;width:8px;height:8px;border-radius:3px}
.gstatus{font-size:12.5px;color:var(--text-3);margin:14px 0 0;max-width:470px;line-height:1.6}

.gen-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);background:rgba(0,0,0,.25)}
.gen-tab{border:none;background:transparent;color:var(--text-3);padding:15px 10px;cursor:pointer;text-align:center;border-right:1px solid var(--line);transition:background .25s,color .25s;position:relative}
.gen-tab:last-child{border-right:none}
.gen-tab .gt-n{display:block;font-size:14px;font-weight:800}
.gen-tab .gt-y{display:block;font-size:12px;margin-top:2px;opacity:.8}
.gen-tab:hover{color:var(--text-2);background:rgba(255,255,255,.03)}
.gen-tab[aria-selected="true"]{color:var(--text);background:rgba(74,222,128,.08)}
.gen-tab[aria-selected="true"]::after{content:"";position:absolute;top:-1px;left:20%;right:20%;height:2px;background:var(--green);border-radius:2px;box-shadow:0 0 12px rgba(74,222,128,.7)}
.gen-tab[data-tab="3"][aria-selected="true"] .gt-n{color:var(--green)}
.gen-tab[data-tab="1"][aria-selected="true"] .gt-n{color:var(--gold)}

/* ---------- Section 3 · 厚度 ---------- */
.thick-stack{display:flex;align-items:flex-end;gap:44px;margin:10px 0 8px;min-height:190px}
.thick-item{text-align:center;flex:1}
.thick-bar{margin:0 auto 14px;border-radius:8px 8px 4px 4px;height:0;transition:height 1.1s cubic-bezier(.22,.61,.36,1)}
.thick-bar.film{height:8px;background:linear-gradient(90deg,#A7E163,#3FA0E0);box-shadow:0 0 24px rgba(167,225,99,.45);transition-delay:.15s}
.thick-bar.hair{height:42px;background:repeating-linear-gradient(45deg,#9aa59c,#9aa59c 6px,#828d84 6px,#828d84 12px);transition-delay:.35s}
.thick-bar.wafer{height:160px;background:linear-gradient(180deg,#c9d2c9,#8e9a90);transition-delay:.55s}
.js .thick-bar{height:0;background:none}
.js .in .thick-bar.film{height:8px;background:linear-gradient(90deg,#A7E163,#3FA0E0);box-shadow:0 0 24px rgba(167,225,99,.45)}
.js .in .thick-bar.hair{height:42px;background:repeating-linear-gradient(45deg,#9aa59c,#9aa59c 6px,#828d84 6px,#828d84 12px)}
.js .in .thick-bar.wafer{height:160px;background:linear-gradient(180deg,#c9d2c9,#8e9a90)}
.thick-item .tn{font-size:13.5px;font-weight:700}
.thick-item .tv{font-size:12.5px;color:var(--text-3)}
.thick-note{font-size:12px;color:var(--text-3);margin-top:14px}
.quote{border-left:3px solid var(--gold);background:var(--gold-dim);border-radius:0 12px 12px 0;padding:14px 18px;font-size:14.5px;color:var(--text);margin-top:22px;max-width:720px}
.quote .src{display:block;margin-top:8px;font-size:12px;color:var(--text-3)}

/* ---------- Section 4 · 时间线 ---------- */
.timeline{position:relative;margin:6px 0 0}
.tl-item{display:grid;grid-template-columns:150px 1fr;gap:22px;padding:17px 0;border-bottom:1px solid rgba(36,48,38,.6);align-items:baseline;transition:opacity .6s ease,transform .6s ease}
.js .tl-item{opacity:0;transform:translateX(-18px)}
.js .in .tl-item{opacity:1;transform:none}
.tl-item.in{opacity:1;transform:none}
.tl-item:last-child{border-bottom:none}
.tl-year{font-size:14.5px;font-weight:800;color:var(--green);font-variant-numeric:tabular-nums}
.tl-body b{font-size:15.5px;display:block;margin-bottom:2px}
.tl-body span{font-size:13.5px;color:var(--text-2)}

/* ---------- Section 5 · 收口 ---------- */
.closing{text-align:center;padding:56px 24px}
.closing h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.01em;margin-bottom:12px}
.closing p{color:var(--text-2);font-size:16.5px}
.closing p b{color:var(--green)}
.closing .down{margin-top:22px;color:var(--text-3);font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

footer{padding:40px 0 60px;color:var(--text-3);font-size:13px;text-align:center}

/* 响应式 */
@media screen and (max-width:860px){
  .crystal-grid,.layer-grid{grid-template-columns:1fr;gap:24px}
  .gen-panel.active{grid-template-columns:1fr;gap:16px}
  .gen-panels{min-height:0;padding:22px 18px 20px}
  .gen-visual svg{max-width:150px}
  .gen-visual img{max-width:150px;border-radius:11px}
  .gen-panel[data-gen="3"] .gen-visual img{max-width:320px;aspect-ratio:39/25;border-radius:12px}
  .viz{padding:24px 18px}
  .tl-item{grid-template-columns:96px 1fr;gap:14px}
  .thick-stack{gap:18px}
  .gen-tab .gt-n{font-size:15.5px}
  .scene{height:320px}
  .stack-scene{height:340px}
  .face.top,.face.bottom{width:200px;height:132px;margin:-66px 0 0 -100px}
  .face.front,.face.back{width:200px;margin-left:-100px}
  .face.left,.face.right{width:132px;margin-left:-66px}
  .face.front{transform:translateZ(66px)}
  .face.back{transform:rotateY(180deg) translateZ(66px)}
  .face.left{transform:rotateY(-90deg) translateZ(100px)}
  .face.right{transform:rotateY(90deg) translateZ(100px)}
  .ln-badge{--bx:116px;width:26px;height:26px;margin-top:-13px;font-size:12.5px}
}
@media print{
  html,body{background:#0B0F0C!important;color:#F2F5EF!important}
  .viz,.gen-box{border:1px solid var(--line)!important;background:rgba(255,255,255,.02)!important}
  section.block{break-inside:avoid}
  .js .reveal,.js .tl-item,.reveal,.tl-item{opacity:1!important;transform:none!important}
  .gen-panels{padding:20px 22px 18px!important}
  .gen-panel.active{gap:20px!important}
  .feat-pills{gap:6px!important;margin-bottom:12px!important}
  .feat-pill{padding:5px 8px!important;font-size:11px!important}
  .feat-pill .fv{font-size:10px!important}
  .feat-pill .fi{display:none!important}
  .clegend{gap:4px 9px!important}
  .cleg{font-size:11.5px!important}
  .cleg .cdot{display:none!important}
  .ceff{margin-bottom:22px!important}
  .gen-body h3{font-size:20px!important;margin-bottom:10px!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.tl-item{opacity:1;transform:none}
  .thick-bar{height:auto}
  .thick-bar.film{height:8px}
  .thick-bar.hair{height:42px}
  .thick-bar.wafer{height:160px}
  .share .sf{width:95%}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

/* --- VI gradient accents (spring green #A7E163 -> sky blue #3FA0E0), text only / fills --- */
.gtext-v{background:linear-gradient(180deg,#A7E163 15%,#3FA0E0 88%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.gtext-h{background:linear-gradient(90deg,#A7E163,#3FA0E0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.gfill-h{background:linear-gradient(90deg,#A7E163,#3FA0E0)!important}
.hero .kicker{background:linear-gradient(180deg,#A7E163 15%,#3FA0E0 88%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.tl-year{background:linear-gradient(180deg,#A7E163 15%,#3FA0E0 88%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.closing p b{background:linear-gradient(180deg,#A7E163 15%,#3FA0E0 88%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.gen-panel[data-gen="3"] .ge{background:linear-gradient(180deg,#A7E163 15%,#3FA0E0 88%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.gen-panel[data-gen="3"] .gen-badge{position:relative;border-color:transparent;background:linear-gradient(180deg,#A7E163 15%,#3FA0E0 88%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.gen-panel[data-gen="3"] .gen-badge::before{content:"";position:absolute;inset:0;border-radius:99px;background:rgba(167,225,99,.10);border:1px solid rgba(167,225,99,.45);z-index:-1}
.gen-tab[data-tab="3"][aria-selected="true"] .gt-n{background:linear-gradient(180deg,#A7E163 15%,#3FA0E0 88%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.gen-tab[aria-selected="true"]::after{background:linear-gradient(90deg,#A7E163,#3FA0E0);box-shadow:0 0 12px rgba(167,225,99,.55)}
.cmark.tk::after{background:linear-gradient(180deg,#A7E163 15%,#3FA0E0 88%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}