*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#050510;color:#eef8ff;font-family:"Noto Sans SC",sans-serif;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='10' fill='none' stroke='rgba(0,243,255,.5)' stroke-width='1'/%3E%3Ccircle cx='16' cy='16' r='2' fill='rgba(0,243,255,.8)'/%3E%3Cline x1='16' y1='2' x2='16' y2='8' stroke='rgba(0,243,255,.4)' stroke-width='1'/%3E%3Cline x1='16' y1='24' x2='16' y2='30' stroke='rgba(0,243,255,.4)' stroke-width='1'/%3E%3Cline x1='2' y1='16' x2='8' y2='16' stroke='rgba(0,243,255,.4)' stroke-width='1'/%3E%3Cline x1='24' y1='16' x2='30' y2='16' stroke='rgba(0,243,255,.4)' stroke-width='1'/%3E%3C/svg%3E") 16 16, crosshair}
#globeViz{position:absolute;inset:0;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='10' fill='none' stroke='rgba(0,243,255,.5)' stroke-width='1'/%3E%3Ccircle cx='16' cy='16' r='2' fill='rgba(0,243,255,.8)'/%3E%3Cline x1='16' y1='2' x2='16' y2='8' stroke='rgba(0,243,255,.4)' stroke-width='1'/%3E%3Cline x1='16' y1='24' x2='16' y2='30' stroke='rgba(0,243,255,.4)' stroke-width='1'/%3E%3Cline x1='2' y1='16' x2='8' y2='16' stroke='rgba(0,243,255,.4)' stroke-width='1'/%3E%3Cline x1='24' y1='16' x2='30' y2='16' stroke='rgba(0,243,255,.4)' stroke-width='1'/%3E%3C/svg%3E") 16 16, crosshair}

/* ── 科技光标跟随光圈 ── */
#cursorGlow{position:fixed;width:28px;height:28px;border-radius:50%;pointer-events:none;z-index:9999;
  border:1.5px solid rgba(0,243,255,.35);
  box-shadow:0 0 12px rgba(0,243,255,.15),inset 0 0 8px rgba(0,243,255,.06);
  transform:translate(-50%,-50%);transition:width .2s,height .2s,border-color .2s,box-shadow .2s,opacity .15s;
  opacity:0}
#cursorGlow.visible{opacity:1}
#cursorGlow.hover{width:40px;height:40px;
  border-color:rgba(0,243,255,.6);
  box-shadow:0 0 20px rgba(0,243,255,.3),inset 0 0 12px rgba(0,243,255,.1)}
#cursorGlow.click{width:18px;height:18px;border-color:rgba(255,200,80,.7);
  box-shadow:0 0 24px rgba(255,200,80,.35)}
#cursorDot{position:fixed;width:4px;height:4px;border-radius:50%;pointer-events:none;z-index:10000;
  background:rgba(0,243,255,.9);box-shadow:0 0 6px rgba(0,243,255,.6);
  transform:translate(-50%,-50%);opacity:0;transition:opacity .15s}
#cursorDot.visible{opacity:1}

/* ── HUD 左上（导航 + 数据卡 + 图表） ── */
.hud{position:absolute;left:20px;top:16px;z-index:20;width:320px;
  padding:0;border:none;background:none;backdrop-filter:none;
  display:flex;flex-direction:column;gap:14px;
  max-height:calc(100vh - 120px);overflow-y:auto;scrollbar-width:none}
.hud::-webkit-scrollbar{display:none}
.hud-header{padding:14px 16px;border:1px solid rgba(100,200,255,.15);
  background:linear-gradient(180deg,rgba(6,14,30,.82),rgba(4,8,18,.5));
  backdrop-filter:blur(16px);border-radius:10px}
.hud .eyebrow{font-family:Orbitron,sans-serif;font-size:10px;letter-spacing:.22em;color:rgba(0,243,255,.8);text-transform:uppercase}
.hud .title{margin-top:5px;font-size:16px;font-weight:700;line-height:1.2}
.hud .desc{margin-top:4px;font-size:11px;line-height:1.5;color:rgba(210,230,255,.55)}

/* ── 导航按钮 ── */
.nav-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nav-btn{display:flex;align-items:center;gap:8px;padding:11px 14px;
  border:1px solid rgba(100,200,255,.22);
  background:linear-gradient(135deg,rgba(8,18,38,.85),rgba(6,14,30,.75));
  backdrop-filter:blur(14px);border-radius:10px;cursor:inherit;
  transition:all .25s ease;color:rgba(200,225,255,.8);font-size:12px;font-weight:600;
  box-shadow:0 2px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04)}
.nav-btn:hover{border-color:rgba(0,243,255,.5);background:linear-gradient(135deg,rgba(10,25,55,.9),rgba(0,60,120,.15));
  color:#fff;box-shadow:0 4px 20px rgba(0,200,255,.1),inset 0 1px 0 rgba(255,255,255,.06)}
.nav-btn.active{border-color:rgba(0,243,255,.7);
  background:linear-gradient(135deg,rgba(0,80,180,.25),rgba(0,200,255,.12));
  color:#eafaff;box-shadow:0 0 24px rgba(0,200,255,.15),inset 0 1px 0 rgba(255,255,255,.08)}
.nav-btn.active::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;
  border-radius:0 3px 3px 0;background:linear-gradient(180deg,#00f3ff,#0070ff)}
.nav-btn{position:relative;overflow:hidden}
.nav-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,200,255,.06);font-size:16px;flex-shrink:0;
  border:1px solid rgba(0,200,255,.08);transition:all .25s}
.nav-btn:hover .nav-icon{background:rgba(0,200,255,.12);border-color:rgba(0,200,255,.2)}
.nav-btn.active .nav-icon{background:rgba(0,200,255,.18);border-color:rgba(0,200,255,.3);
  box-shadow:0 0 10px rgba(0,200,255,.12)}
.nav-label{display:flex;flex-direction:column;gap:2px}
.nav-label b{font-size:12px}
.nav-label small{font-size:9px;color:rgba(140,180,210,.5);font-family:Orbitron,sans-serif;letter-spacing:.08em}

/* ── 统计卡片 ── */
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stat-card{padding:10px 12px;border:1px solid rgba(100,200,255,.1);
  background:linear-gradient(135deg,rgba(6,14,30,.72),rgba(8,16,35,.5));
  backdrop-filter:blur(12px);border-radius:8px;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.stat-card .stat-label{font-size:9px;color:rgba(140,180,210,.5);letter-spacing:.05em;text-transform:uppercase}
.stat-card .stat-val{font-family:Orbitron,sans-serif;font-size:20px;color:#eafaff;margin-top:4px;
  text-shadow:0 0 20px var(--accent-glow,rgba(0,200,255,.15))}
.stat-card .stat-unit{font-size:10px;color:rgba(160,200,220,.5);margin-left:2px;font-family:'Noto Sans SC',sans-serif}
.stat-card .stat-change{font-size:9px;margin-top:3px;font-family:Orbitron,sans-serif}
.stat-card .stat-change.up{color:rgba(80,232,208,.7)}
.stat-card .stat-change.down{color:rgba(255,120,100,.7)}

/* ── 可视化图表区 ── */
.chart-box{padding:14px;border:1px solid rgba(100,200,255,.1);
  background:linear-gradient(180deg,rgba(6,14,30,.72),rgba(4,8,18,.5));
  backdrop-filter:blur(14px);border-radius:10px}
.chart-title{font-size:11px;font-weight:600;color:rgba(200,230,255,.75);margin-bottom:10px;
  display:flex;align-items:center;gap:6px}
.chart-title::before{content:'';width:3px;height:12px;border-radius:2px;background:linear-gradient(180deg,#00f3ff,#0070ff)}
.chart-country{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.03);
  cursor:inherit;transition:background .15s}
.chart-country:hover{background:rgba(255,255,255,.02);border-radius:4px}
.chart-country:last-child{border-bottom:none}
.chart-rank{width:16px;height:16px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-family:Orbitron,sans-serif;flex-shrink:0}
.chart-rank.r1{background:rgba(232,168,50,.2);color:#e8a832}
.chart-rank.r2{background:rgba(184,126,230,.15);color:#b87ee6}
.chart-rank.r3{background:rgba(92,158,245,.15);color:#5c9ef5}
.chart-rank.rn{background:rgba(255,255,255,.05);color:rgba(200,220,240,.5)}
.chart-cn{flex:1;font-size:11px;color:rgba(220,240,255,.8)}
.chart-val{font-family:Orbitron,sans-serif;font-size:11px;color:rgba(200,230,255,.7)}
.chart-bar-wrap{flex:1;display:flex;flex-direction:column;gap:2px}
.chart-bar-bg{height:6px;background:rgba(255,255,255,.03);border-radius:3px;overflow:hidden}
.chart-bar-exp{height:100%;border-radius:3px;background:linear-gradient(90deg,#e8a832,rgba(232,168,50,.3));transition:width .5s ease}
.chart-bar-imp{height:100%;border-radius:3px;background:linear-gradient(90deg,#5c9ef5,rgba(92,158,245,.3));transition:width .5s ease}
.chart-total{font-family:Orbitron,sans-serif;font-size:9px;color:rgba(160,200,220,.45);text-align:right;min-width:48px}
.chart-legend-row{display:flex;gap:14px;margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.04);
  font-size:9px;color:rgba(160,200,220,.5)}
.chart-legend-row i{display:inline-block;width:8px;height:3px;border-radius:2px;margin-right:4px;vertical-align:middle}

/* ── 贸易总览迷你卡 ── */
.trade-summary{padding:12px 14px;border:1px solid rgba(100,200,255,.1);
  background:linear-gradient(135deg,rgba(6,14,30,.72),rgba(8,16,35,.5));
  backdrop-filter:blur(12px);border-radius:10px}
.trade-summary .ts-title{font-size:10px;color:rgba(140,180,210,.5);margin-bottom:8px;
  display:flex;align-items:center;gap:6px}
.trade-summary .ts-title::before{content:'';width:3px;height:10px;border-radius:2px;background:linear-gradient(180deg,#e8a832,#d48c3a)}
.ts-meters{display:flex;gap:8px}
.ts-meter{flex:1;text-align:center}
.ts-ring{width:52px;height:52px;margin:0 auto;position:relative}
.ts-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ts-ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.ts-ring .bg{stroke:rgba(255,255,255,.04)}
.ts-ring .fg{transition:stroke-dashoffset .6s ease}
.ts-ring .ts-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:Orbitron,sans-serif;font-size:11px;color:#eafaff}
.ts-meter-label{font-size:9px;color:rgba(160,200,220,.45);margin-top:4px}

/* ── 右侧图例面板 ── */
.right-panel{position:absolute;right:18px;top:16px;z-index:20;width:200px;
  display:flex;flex-direction:column;gap:6px}
.legend{display:flex;flex-direction:column;gap:4px}
.legend-card{padding:7px 10px;border:1px solid rgba(255,255,255,.06);background:rgba(6,14,30,.6);
  backdrop-filter:blur(12px);border-radius:6px;cursor:inherit;transition:all .2s ease;user-select:none}
.legend-card:hover{border-color:rgba(255,255,255,.15);background:rgba(10,20,40,.7)}
.legend-card.off{opacity:.3;border-color:rgba(255,255,255,.02)}
.legend-card.off b{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)}
.legend-card b{display:flex;align-items:center;gap:5px;font-size:10px;margin:0}
.legend-card span{display:none}
.dot{width:6px;height:6px;border-radius:50%;box-shadow:0 0 6px currentColor}
.clear-btn{width:100%;padding:7px 0;border:1px solid rgba(255,100,100,.2);background:rgba(255,80,80,.05);
  backdrop-filter:blur(10px);border-radius:6px;color:rgba(255,150,140,.8);font-size:10px;
  font-weight:600;cursor:inherit;transition:all .2s;text-align:center;letter-spacing:.06em}
.clear-btn:hover{background:rgba(255,80,80,.12);border-color:rgba(255,100,100,.4)}

/* ── 右侧贸易详情面板 ── */
.detail-panel{position:absolute;right:18px;top:220px;z-index:21;width:340px;
  border:1px solid rgba(100,200,255,.15);border-radius:14px;
  background:linear-gradient(180deg,rgba(6,14,30,.88),rgba(4,8,18,.72));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 12px 48px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;opacity:0;transform:translateX(30px);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease}
.detail-panel.show{opacity:1;transform:translateX(0);pointer-events:auto}
.dp-header{padding:14px 16px 10px;border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between}
.dp-header h3{margin:0;font-size:14px;font-weight:700;color:#eafaff;display:flex;align-items:center;gap:6px}
.dp-header h3 .dp-flag{font-size:16px}
.dp-close{width:24px;height:24px;border:1px solid rgba(255,255,255,.1);border-radius:6px;
  background:rgba(255,255,255,.04);color:rgba(200,220,255,.6);font-size:14px;
  cursor:inherit;display:flex;align-items:center;justify-content:center;transition:all .2s}
.dp-close:hover{background:rgba(255,80,80,.15);border-color:rgba(255,100,100,.3);color:#ff8888}
.dp-sub{padding:4px 16px 8px;font-size:10px;color:rgba(140,180,210,.5);letter-spacing:.05em}
.dp-chart{padding:8px 16px 4px}
.dp-chart svg{width:100%;display:block}
.dp-goods{padding:10px 16px 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dp-goods-card{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.04);
  background:rgba(255,255,255,.02)}
.dp-goods-card .dp-gc-label{font-size:9px;color:rgba(140,180,210,.5);margin-bottom:4px;
  display:flex;align-items:center;gap:4px}
.dp-goods-card .dp-gc-label i{display:inline-block;width:6px;height:6px;border-radius:50%}
.dp-goods-card .dp-gc-items{font-size:11px;color:rgba(220,240,255,.85);line-height:1.5}
.dp-stats{padding:0 16px 14px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dp-stat{text-align:center;padding:8px 4px;border-radius:8px;background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.03)}
.dp-stat .dp-st-val{font-family:Orbitron,sans-serif;font-size:14px;color:#b8f0ff}
.dp-stat .dp-st-label{font-size:9px;color:rgba(140,180,210,.45);margin-top:2px}
.dp-legend-row{display:flex;gap:12px;padding:0 16px 10px;font-size:9px;color:rgba(160,200,220,.5)}
.dp-legend-row i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:3px;vertical-align:middle}

/* ── 右侧能源详情面板 ── */
.energy-panel{position:absolute;right:18px;top:220px;z-index:21;width:340px;
  border:1px solid rgba(80,232,208,.18);border-radius:14px;
  background:linear-gradient(180deg,rgba(6,14,30,.9),rgba(4,8,18,.75));
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:0 12px 48px rgba(0,0,0,.5),0 0 40px rgba(80,232,208,.04),inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;opacity:0;transform:translateX(30px);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease}
.energy-panel.show{opacity:1;transform:translateX(0);pointer-events:auto}
.ep-header{padding:14px 16px 10px;border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between}
.ep-header h3{margin:0;font-size:14px;font-weight:700;color:#eafaff;display:flex;align-items:center;gap:8px}
.ep-type-badge{padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;letter-spacing:.06em}
.ep-type-badge.coal{background:rgba(212,140,58,.15);color:#d48c3a;border:1px solid rgba(212,140,58,.2)}
.ep-type-badge.green{background:rgba(80,232,208,.1);color:#50e8d0;border:1px solid rgba(80,232,208,.18)}
.ep-close{width:24px;height:24px;border:1px solid rgba(255,255,255,.1);border-radius:6px;
  background:rgba(255,255,255,.04);color:rgba(200,220,255,.6);font-size:14px;
  cursor:inherit;display:flex;align-items:center;justify-content:center;transition:all .2s}
.ep-close:hover{background:rgba(255,80,80,.15);border-color:rgba(255,100,100,.3);color:#ff8888}
.ep-sub{padding:4px 16px 10px;font-size:10px;color:rgba(140,180,210,.5);letter-spacing:.05em}
.ep-gauges{padding:0 16px 12px;display:flex;gap:12px;justify-content:center}
.ep-gauge{position:relative;width:88px;height:88px;cursor:inherit;transition:transform .2s}
.ep-gauge:hover{transform:scale(1.08)}
.ep-gauge svg{width:100%;height:100%}
.ep-gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ep-gauge-val{font-family:Orbitron,sans-serif;font-size:15px;color:#eafaff;line-height:1}
.ep-gauge-unit{font-size:8px;color:rgba(160,200,220,.5);margin-top:2px}
.ep-gauge-label{font-size:8px;color:rgba(160,200,220,.45);margin-top:1px}
.ep-bars{padding:0 16px 12px}
.ep-bar-row{display:flex;align-items:center;gap:8px;padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.03);cursor:inherit;transition:background .15s}
.ep-bar-row:hover{background:rgba(255,255,255,.03);border-radius:6px;padding-left:4px;padding-right:4px}
.ep-bar-row:last-child{border-bottom:none}
.ep-bar-year{font-family:Orbitron,sans-serif;font-size:10px;color:rgba(200,222,248,.6);width:34px;flex-shrink:0}
.ep-bar-year.active{color:#50e8d0}
.ep-bar-track{flex:1;height:20px;background:rgba(255,255,255,.03);border-radius:4px;overflow:hidden;position:relative}
.ep-bar-fill{height:100%;border-radius:4px;transition:width .6s ease;position:relative}
.ep-bar-fill::after{content:'';position:absolute;right:0;top:0;bottom:0;width:2px;
  background:rgba(255,255,255,.3);border-radius:1px}
.ep-bar-val{font-family:Orbitron,sans-serif;font-size:10px;color:rgba(200,230,255,.7);width:52px;text-align:right;flex-shrink:0}
.ep-bar-chg{font-size:9px;width:38px;text-align:right;flex-shrink:0;font-family:Orbitron,sans-serif}
.ep-bar-chg.up{color:rgba(80,232,208,.7)}
.ep-bar-chg.down{color:rgba(255,120,100,.7)}
.ep-info{padding:0 16px 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ep-info-card{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.04);
  background:rgba(255,255,255,.02);transition:border-color .2s,background .2s}
.ep-info-card:hover{border-color:rgba(80,232,208,.12);background:rgba(80,232,208,.03)}
.ep-info-card .ep-ic-label{font-size:9px;color:rgba(140,180,210,.5);margin-bottom:3px;
  display:flex;align-items:center;gap:4px}
.ep-info-card .ep-ic-val{font-size:12px;color:rgba(220,240,255,.85);line-height:1.4}
.ep-spark{padding:4px 16px 10px}
.ep-spark svg{width:100%;display:block}

/* ── 右上提示 ── */
.hint{display:none}

/* ── 视角切换 ── */
.view-switch{position:absolute;right:24px;bottom:100px;z-index:25;
  display:flex;border-radius:12px;overflow:hidden;
  border:1px solid rgba(110,175,255,.22);
  background:linear-gradient(135deg,rgba(6,14,30,.82),rgba(4,8,18,.6));
  backdrop-filter:blur(16px);box-shadow:0 4px 24px rgba(0,0,0,.35)}
.view-switch-label{position:absolute;top:-22px;left:0;right:0;text-align:center;
  font-family:Orbitron,sans-serif;font-size:9px;letter-spacing:.18em;
  color:rgba(160,200,230,.5);pointer-events:none}
.view-btn{padding:10px 20px;font-size:12px;font-weight:700;cursor:inherit;
  border:none;background:transparent;color:rgba(180,210,240,.6);
  transition:all .3s ease;position:relative;letter-spacing:.06em;
  font-family:inherit;user-select:none}
.view-btn:hover{color:rgba(220,240,255,.9)}
.view-btn.active{color:#fff;
  background:linear-gradient(135deg,rgba(0,160,255,.2),rgba(0,243,255,.08));
  text-shadow:0 0 12px rgba(0,243,255,.5)}
.view-btn.active::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;
  border-radius:2px;background:linear-gradient(90deg,transparent,#00f3ff,transparent)}
.view-btn+.view-btn{border-left:1px solid rgba(110,175,255,.12)}

/* ── 底部时间轴 ── */
.timeline{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:20;
  width:min(780px,calc(100vw - 24px));padding:14px 22px 14px;
  border:1px solid rgba(110,175,255,.18);border-radius:16px;
  background:linear-gradient(180deg,rgba(6,14,30,.82),rgba(4,8,18,.55));
  backdrop-filter:blur(18px)}
.tl-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.tl-label{font-family:Orbitron,sans-serif;font-size:10px;letter-spacing:.22em;color:rgba(190,220,255,.6)}
#yearValue{font-family:Orbitron,sans-serif;font-size:clamp(28px,3.8vw,44px);color:#fff;
  text-shadow:0 0 20px rgba(0,243,255,.35);font-weight:700;letter-spacing:-.02em}
#yearNote{margin-top:5px;font-size:10.5px;line-height:1.55;color:rgba(200,220,245,.65)}
.rng{position:relative;padding:6px 0 4px;height:36px;display:flex;align-items:center}
.rng-track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:6px;border-radius:99px;
  background:rgba(255,255,255,.06);overflow:hidden}
.rng-track::after{content:'';position:absolute;left:0;top:0;bottom:0;border-radius:99px;
  width:var(--slider-pct,0%);transition:width .15s ease;
  background:linear-gradient(90deg,rgba(255,140,0,.6),rgba(255,215,0,.5),rgba(0,255,157,.7),rgba(0,243,255,.9))}
#yearSlider{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;outline:none;
  position:relative;z-index:1;cursor:inherit}
#yearSlider::-webkit-slider-runnable-track{height:6px;background:transparent;border-radius:99px}
#yearSlider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.9);background:radial-gradient(circle at 35% 35%,#fff,#53ebff 55%,#00a9ff);
  box-shadow:0 0 0 6px rgba(80,230,255,.1),0 0 20px rgba(0,243,255,.55),0 2px 8px rgba(0,0,0,.3);
  cursor:inherit;transition:box-shadow .2s,transform .15s}
#yearSlider::-webkit-slider-thumb:active{transform:scale(1.15);cursor:inherit;
  box-shadow:0 0 0 8px rgba(80,230,255,.18),0 0 30px rgba(0,243,255,.7),0 2px 12px rgba(0,0,0,.4)}
#yearSlider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.9);
  background:radial-gradient(circle at 35% 35%,#fff,#53ebff 55%,#00a9ff);
  box-shadow:0 0 0 6px rgba(80,230,255,.1),0 0 20px rgba(0,243,255,.55),0 2px 8px rgba(0,0,0,.3);cursor:inherit}
#yearSlider::-moz-range-track{height:6px;background:transparent;border:none;border-radius:99px}
.ticks{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2px;font-family:Orbitron,sans-serif;font-size:11px;color:rgba(200,222,248,.55)}
.ticks span{transition:color .25s,text-shadow .25s}
.ticks span.tick-active{color:#fff;text-shadow:0 0 8px rgba(0,243,255,.5)}

/* ── Tooltip 毛玻璃弹窗 ── */
#tip{position:fixed;z-index:30;min-width:280px;max-width:380px;padding:0;
  border:1px solid rgba(255,255,255,.12);border-radius:16px;
  background:rgba(12,18,35,.55);
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 1px rgba(255,255,255,.15),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(28px) saturate(1.3);-webkit-backdrop-filter:blur(28px) saturate(1.3);
  pointer-events:none;opacity:0;transition:opacity .2s ease;overflow:hidden}
#tip.on{opacity:1}
.tip-head{padding:14px 16px 10px;border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(135deg,rgba(0,200,255,.06),rgba(120,80,255,.04))}
.tip-head h4{margin:0;font-size:14px;font-weight:700;line-height:1.4;color:#eafaff}
.tip-head .tip-sub{margin-top:4px;font-size:11px;color:rgba(160,200,220,.7)}
.tip-body{padding:12px 16px 14px}
.tip-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.04)}
.tip-row:last-child{border-bottom:none}
.tip-row .tip-k{font-size:11px;color:rgba(160,200,215,.65)}
.tip-row .tip-v{font-family:Orbitron,sans-serif;font-size:13px;color:#b8f0ff;text-shadow:0 0 8px rgba(0,200,255,.12)}
.tip-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.tip-card{padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04)}
.tip-card .tip-k{font-size:10px;color:rgba(140,180,200,.6);display:block}
.tip-card .tip-v{font-size:14px;margin-top:4px;display:block}

@media(max-width:900px){
  .hud{left:8px;top:8px;width:calc(100vw - 16px)}
  .nav-btns{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:1fr 1fr}
  .right-panel{display:none}
  .info-card{display:none}
  .hint{display:none}
}

/* ── 画布辉光滤镜（伪Bloom） ── */
#globeViz canvas{filter:contrast(1.05) brightness(1.02) saturate(1.12)}

/* ── 星空背景 ── */
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 8% 14%,rgba(200,220,255,.55),transparent),
    radial-gradient(1px 1px at 82% 11%,rgba(180,200,255,.45),transparent),
    radial-gradient(1.2px 1.2px at 22% 72%,rgba(160,190,255,.38),transparent),
    radial-gradient(1px 1px at 67% 58%,rgba(200,210,255,.28),transparent),
    radial-gradient(1.5px 1.5px at 43% 32%,rgba(180,200,255,.48),transparent),
    radial-gradient(1px 1px at 53% 88%,rgba(190,210,255,.38),transparent),
    radial-gradient(1.3px 1.3px at 90% 42%,rgba(170,195,255,.45),transparent),
    radial-gradient(1px 1px at 12% 48%,rgba(200,215,255,.32),transparent),
    radial-gradient(1.4px 1.4px at 33% 8%,rgba(210,220,255,.38),transparent),
    radial-gradient(1px 1px at 58% 26%,rgba(185,200,255,.42),transparent),
    radial-gradient(1.2px 1.2px at 76% 78%,rgba(175,195,255,.32),transparent),
    radial-gradient(1px 1px at 3% 92%,rgba(195,210,255,.28),transparent),
    radial-gradient(0.8px 0.8px at 48% 65%,rgba(200,220,255,.3),transparent),
    radial-gradient(1.1px 1.1px at 18% 30%,rgba(190,210,255,.35),transparent),
    radial-gradient(0.9px 0.9px at 72% 4%,rgba(180,200,255,.4),transparent),
    radial-gradient(1px 1px at 95% 72%,rgba(200,215,255,.3),transparent)}

/* ══ 产业重塑页面 ══ */

/* ── 产业页左侧HUD ── */
.ind-title-card{padding:14px 16px;border:1px solid rgba(0,255,255,.18);
  background:linear-gradient(135deg,rgba(0,30,50,.85),rgba(0,80,110,.25));
  backdrop-filter:blur(16px);border-radius:10px;position:relative;overflow:hidden}
.ind-title-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#00ffff,transparent)}
.ind-title-card .itc-eyebrow{font-family:Orbitron,sans-serif;font-size:9px;letter-spacing:.22em;
  color:rgba(0,255,255,.7);text-transform:uppercase}
.ind-title-card .itc-title{margin-top:6px;font-size:15px;font-weight:700;line-height:1.35;
  color:#eafaff;text-shadow:0 0 18px rgba(0,255,255,.15)}
.ind-title-card .itc-desc{margin-top:5px;font-size:10.5px;line-height:1.6;color:rgba(200,230,255,.45)}

.ind-compare-row{display:flex;align-items:flex-end;gap:6px;padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.03)}
.ind-compare-row:last-child{border-bottom:none}
.ind-compare-city{font-size:11px;color:rgba(220,240,255,.8);width:68px;flex-shrink:0}
.ind-compare-bars{flex:1;display:flex;flex-direction:column;gap:3px}
.ind-bar-line{height:5px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.03)}
.ind-bar-fill-trad{height:100%;border-radius:3px;
  background:linear-gradient(90deg,#8B0000,rgba(255,69,0,.4));transition:width .6s ease}
.ind-bar-fill-tech{height:100%;border-radius:3px;
  background:linear-gradient(90deg,#00ffff,rgba(0,255,255,.25));transition:width .6s ease;
  box-shadow:0 0 6px rgba(0,255,255,.3)}
.ind-compare-val{font-family:Orbitron,sans-serif;font-size:9px;color:rgba(200,230,255,.6);width:42px;text-align:right;flex-shrink:0}

/* ── 产业页时间轴拇指特殊色 ── */
.industry-active .rng-track::after{background:linear-gradient(90deg,rgba(139,0,0,.7),rgba(255,69,0,.5),rgba(0,255,255,.6),rgba(0,255,255,.9))!important}

/* ── 城市产业详情面板 ── */
.city-panel{position:absolute;right:18px;top:16px;z-index:21;width:340px;
  border:1px solid rgba(0,255,255,.2);border-radius:14px;
  background:linear-gradient(180deg,rgba(6,14,30,.9),rgba(4,8,18,.75));
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:0 12px 48px rgba(0,0,0,.5),0 0 40px rgba(0,255,255,.04),inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;opacity:0;transform:translateX(30px);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease}
.city-panel.show{opacity:1;transform:translateX(0);pointer-events:auto}
.cp-header{padding:14px 16px 10px;border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between}
.cp-header h3{margin:0;font-size:15px;font-weight:700;color:#eafaff;display:flex;align-items:center;gap:8px}
.cp-close{width:24px;height:24px;border:1px solid rgba(255,255,255,.1);border-radius:6px;
  background:rgba(255,255,255,.04);color:rgba(200,220,255,.6);font-size:14px;
  cursor:inherit;display:flex;align-items:center;justify-content:center;transition:all .2s}
.cp-close:hover{background:rgba(255,80,80,.15);border-color:rgba(255,100,100,.3);color:#ff8888}
.cp-sub{padding:4px 16px 10px;font-size:10px;color:rgba(140,180,210,.5);letter-spacing:.05em}
.cp-stats{padding:0 16px 12px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.cp-stat{padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.04);transition:border-color .2s}
.cp-stat:hover{border-color:rgba(0,255,255,.15)}
.cp-stat .cp-st-label{font-size:9px;color:rgba(140,180,210,.5);margin-bottom:4px;
  display:flex;align-items:center;gap:4px}
.cp-stat .cp-st-val{font-family:Orbitron,sans-serif;font-size:16px;line-height:1}
.cp-stat .cp-st-unit{font-size:10px;color:rgba(160,200,220,.5);font-family:'Noto Sans SC',sans-serif}
.cp-stat .cp-st-chg{font-size:9px;margin-top:3px;font-family:Orbitron,sans-serif}
.cp-bars{padding:0 16px 14px}
.cp-bar-row{display:flex;align-items:center;gap:8px;padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.03)}
.cp-bar-row:last-child{border-bottom:none}
.cp-bar-year{font-family:Orbitron,sans-serif;font-size:10px;color:rgba(200,222,248,.6);width:34px;flex-shrink:0}
.cp-bar-year.active{color:#00ffff}
.cp-bar-track{flex:1;height:18px;background:rgba(255,255,255,.03);border-radius:4px;overflow:hidden;
  display:flex;position:relative}
.cp-bar-trad{height:100%;transition:width .6s ease;
  background:linear-gradient(90deg,#8B0000,#FF4500)}
.cp-bar-tech{height:100%;transition:width .6s ease;
  background:linear-gradient(90deg,#008B8B,#00FFFF);
  box-shadow:inset 0 0 8px rgba(0,255,255,.3)}
.cp-bar-val{font-family:Orbitron,sans-serif;font-size:10px;color:rgba(200,230,255,.7);width:52px;text-align:right;flex-shrink:0}
.cp-desc{padding:0 16px 14px;font-size:11px;color:rgba(200,220,255,.5);line-height:1.6;
  border-top:1px solid rgba(255,255,255,.04);padding-top:10px}
.cp-legend{display:flex;gap:14px;padding:0 16px 12px;font-size:9px;color:rgba(160,200,220,.5)}
.cp-legend i{display:inline-block;width:8px;height:4px;border-radius:2px;margin-right:4px;vertical-align:middle}
/* ══ 产业重塑场景 ══ */
#industryViz{position:absolute;inset:0;z-index:5;display:none;background:#050510}
#indCanvas{width:100%;height:100%;display:block}
#transOverlay{position:absolute;inset:0;z-index:12;pointer-events:none;display:none}

/* ══ 民生温度页面 ══ */
#livelihoodViz{position:absolute;inset:0;z-index:5;display:none;background:#0b0c12;overflow:hidden}
#livelihoodViz::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 45% at 50% 48%,rgba(30,40,60,.12),transparent 70%);pointer-events:none}
#lh-bg-canvas{position:absolute;inset:0;width:100%;height:100%}
.lh-container{position:relative;z-index:2;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:0 60px;opacity:0;transition:opacity .7s ease}
.lh-container.visible{opacity:1}
.lh-orbit-row{display:flex;align-items:center;width:100%;max-width:960px;position:relative;padding:14px 16px;
  border:1px solid rgba(255,255,255,.045);border-radius:10px;
  background:rgba(18,22,32,.55);
  transition:border-color .35s,background .35s}
.lh-orbit-row:hover{border-color:rgba(255,255,255,.1);background:rgba(22,28,42,.65)}
.lh-orbit-row:hover .lh-consume{opacity:1;transform:translateX(0)}
.lh-city-label{width:100px;text-align:right;font-size:13px;font-weight:600;color:rgba(220,225,235,.8);letter-spacing:.06em;flex-shrink:0;padding-right:14px}
.lh-track-area{flex:1;position:relative;height:52px}
.lh-node{position:absolute;border-radius:50%;top:50%;will-change:left;
  transition:left .7s cubic-bezier(.25,1,.5,1)}
.lh-node.urban{width:22px;height:22px;margin-top:-11px;margin-left:-11px;
  background:radial-gradient(circle at 40% 36%,#a8d8ea,#5ba4cf 60%,#3a7db8);
  box-shadow:0 2px 8px rgba(91,164,207,.35)}
.lh-node.rural{width:16px;height:16px;margin-top:-8px;margin-left:-8px;
  background:radial-gradient(circle at 40% 36%,#f0d9b5,#d4a574 60%,#b8845a);
  box-shadow:0 2px 6px rgba(212,165,116,.3)}
.lh-node::after{content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px solid currentColor;opacity:0;
  animation:lhNodePulse 3s ease-in-out infinite}
.lh-node.urban::after{border-color:rgba(91,164,207,.2)}
.lh-node.rural::after{border-color:rgba(212,165,116,.2)}
@keyframes lhNodePulse{0%,100%{transform:scale(1);opacity:0}50%{transform:scale(1.6);opacity:.15}}
.lh-ribbon-line{position:absolute;top:50%;height:1.5px;margin-top:-.75px;
  background:linear-gradient(90deg,rgba(212,165,116,.5),rgba(91,164,207,.5));border-radius:1px;
  transition:left .7s cubic-bezier(.25,1,.5,1),width .7s cubic-bezier(.25,1,.5,1)}
.lh-track-dash{position:absolute;top:50%;left:2%;right:2%;height:1px;margin-top:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 6px,transparent 6px,transparent 14px)}
.lh-label-float{position:absolute;font-family:'Roboto Mono',monospace;font-size:10px;pointer-events:none;
  transition:left .7s cubic-bezier(.25,1,.5,1),opacity .3s}
.lh-label-float.urban-label{color:rgba(140,190,220,.85);top:2px}
.lh-label-float.rural-label{color:rgba(210,170,120,.85);bottom:2px}
.lh-ratio-tag{position:absolute;right:-76px;top:50%;transform:translateY(-50%);font-family:'Roboto Mono',monospace;font-size:11px;color:rgba(180,195,215,.6);white-space:nowrap}
.lh-consume{position:absolute;right:-76px;bottom:4px;font-size:9px;color:rgba(160,140,180,.7);white-space:nowrap;opacity:0;transform:translateX(6px);transition:all .3s ease}
.lh-consume .lh-arrow{color:rgba(130,190,170,.7);font-size:9px;margin-right:2px}
.lh-hover-card{position:fixed;z-index:50;padding:12px 16px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(16,20,30,.82);box-shadow:0 6px 24px rgba(0,0,0,.4);pointer-events:none;display:none;font-size:12px;color:rgba(210,220,235,.9);line-height:1.8;white-space:nowrap}

/* ══ Page3 右侧 GDP 增长图 ══ */
.p3-right{position:absolute;right:18px;top:16px;z-index:20;width:240px;display:none;flex-direction:column;gap:10px}
.gdp-box{padding:14px;border:1px solid rgba(255,255,255,.05);background:rgba(18,22,32,.7);
  border-radius:10px}
.gdp-box-title{font-size:11px;font-weight:600;color:rgba(200,210,225,.7);margin-bottom:4px;
  display:flex;align-items:center;gap:6px}
.gdp-box-title::before{content:'';width:2px;height:11px;border-radius:1px;background:rgba(140,190,220,.5)}
.gdp-box-sub{font-size:9px;color:rgba(140,150,170,.35);margin-bottom:12px;padding-left:8px}
.gdp-vbars{display:flex;align-items:flex-end;justify-content:center;gap:10px;height:130px;padding:0 6px;position:relative}
.gdp-vbars::before{content:'';position:absolute;bottom:0;left:6px;right:6px;height:1px;background:rgba(255,255,255,.04)}
.gdp-vbar-col{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1}
.gdp-vbar-val{font-family:'Roboto Mono',monospace;font-size:9px;color:rgba(180,190,210,.55);white-space:nowrap}
.gdp-vbar-wrap{width:100%;border-radius:4px 4px 0 0;overflow:hidden;position:relative;min-height:4px;
  transition:height .7s cubic-bezier(.25,1,.5,1)}
.gdp-vbar-fill{width:100%;height:100%;border-radius:4px 4px 0 0;
  background:rgba(100,140,170,.35);transition:background .35s}
.gdp-vbar-col.active .gdp-vbar-fill{background:rgba(140,190,220,.55)}
.gdp-vbar-col.active .gdp-vbar-val{color:rgba(160,200,230,.85)}
.gdp-vbar-col.active .gdp-vbar-yr{color:rgba(160,200,230,.85)}
.gdp-vbar-yr{font-family:'Roboto Mono',monospace;font-size:9px;color:rgba(140,155,175,.35);margin-top:5px}
.gdp-growth-badge{display:inline-block;font-family:'Roboto Mono',monospace;font-size:8px;padding:1px 5px;border-radius:3px;
  background:rgba(130,190,170,.1);color:rgba(130,190,170,.7);margin-top:2px}
.gdp-growth-badge.high{background:rgba(140,190,220,.1);color:rgba(140,190,220,.7)}
/* 行业分解 */
.gdp-ind-group{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.gdp-ind-row{display:flex;align-items:center;gap:8px}
.gdp-ind-name{width:50px;font-size:10px;color:rgba(180,190,210,.5);text-align:right;flex-shrink:0}
.gdp-ind-bar-bg{flex:1;height:6px;background:rgba(255,255,255,.025);border-radius:3px;overflow:hidden}
.gdp-ind-bar{height:100%;border-radius:3px;transition:width .7s cubic-bezier(.25,1,.5,1)}
.gdp-ind-val{font-family:'Roboto Mono',monospace;font-size:9px;color:rgba(180,190,210,.45);min-width:42px;text-align:right}
/* 指标行 */
.gdp-metric-row{display:flex;justify-content:space-between;margin-top:10px;padding-top:8px;
  border-top:1px solid rgba(255,255,255,.03)}
.gdp-metric{text-align:center}
.gdp-metric-label{font-size:8px;color:rgba(140,150,170,.35);margin-bottom:3px}
.gdp-metric-val{font-family:'Roboto Mono',monospace;font-size:12px;font-weight:600}
.gdp-metric-val.up{color:rgba(130,190,170,.75)}
.gdp-metric-val.neutral{color:rgba(180,190,210,.55)}
.lh-legend-bar{display:flex;gap:20px;font-size:10px;color:rgba(150,160,180,.4);align-items:center}
.lh-legend-bar i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}

/* ══ Page 4: 人才着陆点 ══ */
#talentViz{position:absolute;inset:0;z-index:5;display:none;background:#0b0c12;overflow:hidden}
#t4EntranceCanvas{position:absolute;inset:0;z-index:25;pointer-events:none}
#talentChart{width:100%;height:100%;opacity:0;transition:opacity .8s ease}
#talentChart.t4-visible{opacity:1}
.t4-search,.t4-timeline,.t4-legend{opacity:0;transition:opacity .7s ease .1s}
.t4-ui-visible .t4-search,.t4-ui-visible .t4-timeline,.t4-ui-visible .t4-legend{opacity:1}
.t4-search{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:22;
  padding:10px 18px 10px 18px;border:1px solid rgba(255,255,255,.06);border-radius:10px;
  background:rgba(16,20,30,.85);display:flex;flex-direction:column;gap:6px;
  max-width:calc(100vw - 380px);min-width:520px}
.t4-search-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.t4-search-title{font-size:12px;color:rgba(190,205,225,.65);letter-spacing:.03em;white-space:nowrap;flex-shrink:0;font-weight:600}
.t4-search-hint{font-size:9px;color:rgba(150,165,185,.35);line-height:1.4}
.t4-search-input{width:180px;padding:6px 10px;border:1px solid rgba(255,255,255,.07);border-radius:5px;flex-shrink:0;
  background:rgba(255,255,255,.03);color:rgba(220,230,245,.9);font-size:12px;outline:none;
  font-family:'Noto Sans SC',sans-serif;transition:border-color .25s}
.t4-search-input:focus{border-color:rgba(140,190,220,.3)}
.t4-search-input::placeholder{color:rgba(140,155,175,.3)}
.t4-search-tags{display:flex;flex-wrap:wrap;gap:4px}
.t4-tag{padding:2px 7px;border:1px solid rgba(255,255,255,.05);border-radius:3px;font-size:9px;
  color:rgba(170,185,205,.45);cursor:inherit;transition:all .2s;user-select:none}
.t4-tag:hover{border-color:rgba(140,190,220,.2);color:rgba(200,215,230,.65)}
.t4-tag.active{border-color:rgba(140,190,220,.3);color:rgba(180,210,235,.8);background:rgba(140,190,220,.07)}
.t4-clear{font-size:9px;color:rgba(180,130,130,.45);cursor:inherit;text-align:right;display:none}
.t4-clear:hover{color:rgba(200,140,140,.65)}
.t4-timeline{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:22;
  display:flex;align-items:center;gap:12px;padding:8px 20px;
  border:1px solid rgba(255,255,255,.04);border-radius:7px;background:rgba(16,20,30,.7)}
.t4-timeline label{font-size:9px;color:rgba(150,165,185,.35);white-space:nowrap}
.t4-tl-year{font-family:'Roboto Mono',monospace;font-size:13px;font-weight:600;color:rgba(200,215,235,.75);min-width:36px}
.t4-tl-range{-webkit-appearance:none;appearance:none;width:280px;height:2px;border-radius:1px;outline:none;
  background:rgba(255,255,255,.05);cursor:inherit}
.t4-tl-range::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:rgba(140,190,220,.65);border:2px solid rgba(20,25,35,.9);cursor:inherit}
.t4-tl-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;
  background:rgba(140,190,220,.65);border:2px solid rgba(20,25,35,.9);cursor:inherit}
.t4-legend{position:absolute;right:18px;bottom:24px;z-index:22;
  padding:12px 18px;border:1px solid rgba(255,255,255,.06);border-radius:8px;
  background:rgba(16,20,30,.82);font-size:11px;color:rgba(190,200,215,.65)}
.t4-legend-head{font-size:10px;color:rgba(160,175,195,.45);margin-bottom:8px;letter-spacing:.03em}
.t4-legend-cats{display:flex;gap:16px;margin-bottom:10px}
.t4-legend-cats span{display:flex;align-items:center;gap:5px}
.t4-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}
.t4-legend-axes{border-top:1px solid rgba(255,255,255,.04);padding-top:8px;
  font-size:9px;color:rgba(150,165,185,.4);line-height:1.7}
.t4-legend-axes span{color:rgba(180,200,220,.55)}
.t4-card{position:absolute;top:80px;left:50%;transform:translateX(-50%);z-index:30;
  padding:8px 14px;border:1px solid rgba(255,255,255,.05);border-radius:6px;
  background:rgba(16,20,30,.88);pointer-events:none;display:none;
  font-size:10px;color:rgba(210,220,235,.85);line-height:1.6;white-space:nowrap}
.t4-card b{font-size:11px;display:block;margin-bottom:2px}

/* ══════════════════════════════════════════
   ██  Landing — Brutalist Typography        ██
   ══════════════════════════════════════════ */
#landingPage{position:fixed;inset:0;z-index:9000;
  background:#050505;
  display:flex;align-items:center;justify-content:center;overflow:hidden}

/* ── 噪点纹理 ── */
.land-noise{position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:128px 128px;opacity:.5}

/* ── 水平扫描线 ── */
.land-scanline{position:absolute;left:0;right:0;height:1px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.04) 30%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.04) 70%,transparent 95%);
  top:0;animation:scanDown 7s linear infinite;opacity:.6}
@keyframes scanDown{from{top:-2%}to{top:102%}}

/* ── 巨型散落文字背景 ── */
.land-typo-bg{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.typo-word{position:absolute;font-weight:900;line-height:.85;
  color:rgba(255,255,255,.07);white-space:nowrap;
  user-select:none;-webkit-user-select:none}
/* w1 草原 — 左上角巨字，高于问题区 */
.typo-w1{font-size:clamp(130px,24vw,360px);top:-6%;left:-4%;
  font-family:'Noto Sans SC',sans-serif;letter-spacing:-.04em;
  color:rgba(255,255,255,.06)}
/* w2 WIND — 右上角 */
.typo-w2{font-size:clamp(80px,13vw,200px);top:6%;right:4%;
  font-family:Orbitron,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.04)}
/* w3 绿电 — 右侧中下 */
.typo-w3{font-size:clamp(70px,11vw,160px);bottom:22%;right:2%;
  font-family:'Noto Sans SC',sans-serif;
  color:rgba(255,255,255,.05)}
/* w4 煤炭 — 左下角，低于问题区 */
.typo-w4{font-size:clamp(90px,15vw,220px);bottom:-4%;left:2%;
  font-family:'Noto Sans SC',sans-serif;letter-spacing:-.02em;
  color:rgba(255,255,255,.05)}
/* w5 GREEN — 右侧中偏上，竖排 */
.typo-w5{font-size:clamp(60px,9vw,130px);top:38%;right:32%;
  font-family:Orbitron,sans-serif;letter-spacing:.15em;text-transform:uppercase;
  writing-mode:vertical-lr;
  color:rgba(255,255,255,.03)}

/* ── 天空渐变光晕 ── */
.land-sky-glow{position:absolute;top:0;right:0;width:55%;height:45%;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 80% 70% at 85% 10%, rgba(30,80,160,.08) 0%, transparent 70%);
  animation:glowPulse 8s ease-in-out infinite alternate}
/* ── 草原渐变光晕 ── */
.land-grass-glow{position:absolute;bottom:0;left:0;width:50%;height:35%;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 90% 80% at 20% 90%, rgba(34,120,60,.06) 0%, transparent 65%);
  animation:glowPulse 10s ease-in-out 2s infinite alternate}
@keyframes glowPulse{0%{opacity:.6}100%{opacity:1}}

/* ── 蒙古回纹竖线分割 ── */
.land-vert-divide{position:absolute;left:52%;top:clamp(70px,10vh,120px);bottom:clamp(70px,10vh,120px);
  z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:center;
  opacity:0;animation:landFadeIn 1s 1s forwards}
.vd-line{flex:1;width:1px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.08),transparent)}
.vd-knot{width:24px;height:24px;flex-shrink:0;color:rgba(255,255,255,.1);margin:12px 0}

/* ── 蒙古云纹装饰带 ── */
.land-mongol-deco{position:absolute;bottom:clamp(54px,7.5vh,84px);left:clamp(28px,4vw,56px);
  z-index:10;pointer-events:none;
  opacity:0;animation:landFadeIn 1s 1.2s forwards}
.mongol-cloud{width:clamp(100px,14vw,220px);height:auto;display:block;
  color:rgba(255,255,255,.06);filter:drop-shadow(0 0 4px rgba(90,200,250,.04))}

/* ── 四角花纹 ── */
.land-corner{position:absolute;z-index:4;pointer-events:none;
  opacity:0;animation:landFadeIn 1s .7s forwards}
.land-corner svg{width:clamp(28px,3.5vw,48px);height:auto;color:rgba(255,255,255,.1)}
.land-corner--tl{top:clamp(18px,2.5vh,36px);left:clamp(18px,2.5vw,36px)}
.land-corner--tr{top:clamp(18px,2.5vh,36px);right:clamp(18px,2.5vw,36px)}
.land-corner--bl{bottom:clamp(18px,2.5vh,36px);left:clamp(18px,2.5vw,36px)}
.land-corner--br{bottom:clamp(18px,2.5vh,36px);right:clamp(18px,2.5vw,36px)}

/* ── 哈木尔纹（卷草纹）顶部 ── */
.land-khamr{position:absolute;top:clamp(60px,9vh,100px);left:50%;transform:translateX(-50%);
  z-index:4;pointer-events:none;width:clamp(200px,30vw,440px);
  opacity:0;animation:landFadeIn 1s .9s forwards}
.land-khamr svg{width:100%;height:auto;color:rgba(255,255,255,.07)}

/* ── 底部回纹边框 ── */
.land-hee-border{position:absolute;bottom:clamp(48px,6.6vh,76px);
  left:clamp(28px,4vw,56px);right:clamp(28px,4vw,56px);
  z-index:10;pointer-events:none;height:12px;
  opacity:0;animation:landFadeIn .6s .6s forwards}
.land-hee-border svg{width:100%;height:100%;color:rgba(255,255,255,.06)}

/* ── 右侧信息面板 ── */
.land-right-info{position:absolute;right:clamp(32px,5vw,72px);top:50%;transform:translateY(-50%);
  z-index:10;pointer-events:none;
  display:flex;flex-direction:column;gap:0;
  opacity:0;animation:landFadeIn 1s 1.1s forwards}
.ri-label{font-family:Orbitron,sans-serif;font-size:8px;font-weight:600;
  letter-spacing:.25em;color:rgba(255,255,255,.15);text-transform:uppercase;
  margin-bottom:6px}
.ri-data{font-family:Orbitron,sans-serif;font-size:clamp(11px,1vw,14px);font-weight:400;
  letter-spacing:.08em;color:rgba(255,255,255,.25);line-height:1.6}
.ri-data--lg{font-size:clamp(22px,2.4vw,36px);font-weight:700;
  color:rgba(255,255,255,.18);letter-spacing:-.01em}
.ri-data--lg span{font-size:11px;font-weight:400;letter-spacing:.1em;
  color:rgba(255,255,255,.1);margin-left:4px}
.ri-gap{height:clamp(16px,2vh,28px)}
.ri-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.ri-tag{padding:3px 10px;border-radius:20px;font-size:10px;font-weight:500;
  letter-spacing:.06em;
  color:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.06);
  font-family:'Noto Sans SC',sans-serif}

/* ── 左上 Logo ── */
.land-logo{position:absolute;top:clamp(28px,4vh,48px);left:clamp(28px,4vw,56px);
  z-index:10;font-family:Orbitron,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;color:rgba(255,255,255,.6);line-height:1.6;
  text-transform:uppercase;
  opacity:0;animation:landFadeIn .8s .2s forwards}
.land-logo span{font-weight:400;font-size:9px;letter-spacing:.25em;
  color:rgba(255,255,255,.25);display:block}

/* ── 右上编号 ── */
.land-idx{position:absolute;top:clamp(28px,4vh,48px);right:clamp(28px,4vw,56px);
  z-index:10;font-family:Orbitron,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.2em;color:rgba(255,255,255,.25);
  opacity:0;animation:landFadeIn .8s .35s forwards}

/* ── 底部线 + 提示 ── */
.land-bottom-line{position:absolute;bottom:clamp(52px,7vh,80px);left:clamp(28px,4vw,56px);right:clamp(28px,4vw,56px);
  height:1px;background:rgba(255,255,255,.08);z-index:10;
  opacity:0;animation:landFadeIn .6s .6s forwards}
.land-bottom-hint{position:absolute;bottom:clamp(22px,3.5vh,44px);left:50%;transform:translateX(-50%);
  z-index:10;font-family:Orbitron,sans-serif;font-size:9px;font-weight:500;
  letter-spacing:.35em;color:rgba(255,255,255,.18);text-transform:uppercase;
  opacity:0;animation:landFadeIn .6s .8s forwards}

/* ── 自由探索入口按钮 ── */
.land-free-explore{position:absolute;bottom:clamp(60px,8vh,100px);right:clamp(32px,4vw,64px);
  z-index:12;display:flex;align-items:center;gap:14px;
  padding:14px 28px 14px 20px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:6px;cursor:pointer;
  opacity:0;animation:landFadeIn .8s 1.2s forwards;
  transition:all .4s cubic-bezier(.25,1,.5,1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.land-free-explore:hover{background:rgba(90,200,250,.08);border-color:rgba(90,200,250,.25);
  transform:translateX(-4px);box-shadow:0 0 30px rgba(90,200,250,.08)}
.lfe-icon{width:28px;height:28px;color:rgba(90,200,250,.5);flex-shrink:0;transition:color .4s}
.lfe-icon svg{width:100%;height:100%}
.land-free-explore:hover .lfe-icon{color:rgba(90,200,250,.9)}
.lfe-text{display:flex;flex-direction:column;gap:3px}
.lfe-label{font-family:Orbitron,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.2em;color:rgba(255,255,255,.6);transition:color .4s}
.lfe-desc{font-size:11px;color:rgba(255,255,255,.25);letter-spacing:.04em;transition:color .4s}
.land-free-explore:hover .lfe-label{color:#fff}
.land-free-explore:hover .lfe-desc{color:rgba(255,255,255,.5)}
.lfe-arrow{font-size:20px;color:rgba(90,200,250,.4);margin-left:6px;
  transition:all .4s;transform:translateX(0)}
.land-free-explore:hover .lfe-arrow{color:rgba(90,200,250,.9);transform:translateX(6px)}

/* ── 问题列表容器 ── */
.land-questions{position:absolute;left:clamp(32px,6vw,100px);
  top:0;bottom:0;z-index:10;
  display:flex;flex-direction:column;width:clamp(340px,38vw,600px);
  opacity:0;animation:landSlideIn 1s cubic-bezier(.25,1,.5,1) .5s forwards}

/* 内部滚动容器 — 贯穿全页 */
.land-q-scroll{flex:1;overflow-y:auto;overflow-x:hidden;
  padding:max(18vh,120px) 0 max(12vh,80px);
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}
.land-q-scroll::-webkit-scrollbar{width:3px}
.land-q-scroll::-webkit-scrollbar-track{background:transparent}
.land-q-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.land-q-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}

@keyframes landSlideIn{to{opacity:1}}

/* ── 单个问题条 ── */
.land-q{position:relative;display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);
  padding:clamp(18px,2.2vh,28px) 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  cursor:default;transition:all .4s cubic-bezier(.25,1,.5,1)}

/* 编号 */
.land-q-num{font-family:Orbitron,sans-serif;font-size:clamp(28px,3.2vw,48px);
  font-weight:700;letter-spacing:-.02em;line-height:1;
  color:rgba(255,255,255,.07);transition:color .4s;flex-shrink:0;
  min-width:clamp(50px,5.5vw,80px)}

/* 问题文字 */
.land-q-text{font-size:clamp(16px,1.6vw,24px);font-weight:600;line-height:1.4;
  color:rgba(255,255,255,.5);transition:color .4s;letter-spacing:-.01em;
  word-break:keep-all;overflow-wrap:break-word}
.land-q-text em{font-style:normal;color:rgba(255,255,255,.5);transition:color .4s}

/* 副标题 */
.land-q-sub{position:absolute;left:clamp(64px,7.3vw,108px);bottom:clamp(4px,.6vh,8px);
  font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.12);
  transition:all .4s;opacity:0;transform:translateY(4px)}

/* CTA */
.land-q-cta{margin-left:auto;display:flex;align-items:center;gap:10px;
  font-family:Orbitron,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.15em;color:rgba(255,255,255,.5);text-transform:uppercase;
  opacity:0;transform:translateX(-10px);transition:all .4s cubic-bezier(.25,1,.5,1);
  white-space:nowrap}
.land-q-arrow{display:inline-block;transition:transform .3s;font-size:18px}

/* ── 活跃问题交互 ── */
.land-q--active{cursor:pointer}
.land-q--active .land-q-num{color:rgba(255,255,255,.2)}
.land-q--active .land-q-text{color:rgba(255,255,255,.85)}
.land-q--active .land-q-text em{
  background:linear-gradient(90deg,#5ac8fa,#30d158);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.land-q--active .land-q-sub{opacity:1;transform:translateY(0)}

.land-q--active:hover .land-q-num{color:rgba(255,255,255,.4)}
.land-q--active:hover .land-q-text{color:#fff}
.land-q--active:hover .land-q-cta{opacity:1;transform:translateX(0)}
.land-q--active:hover .land-q-arrow{transform:translateX(6px)}

/* ── 待开发问题 — 敬请期待 ── */
.land-q--pending{cursor:default;transition:all .4s}
.land-q--pending .land-q-num{color:rgba(255,255,255,.1)}
.land-q--pending .land-q-text{color:rgba(255,255,255,.35)}
.land-q--pending .land-q-text em{font-style:normal;color:rgba(255,255,255,.3)}
.land-q--pending:hover{background:rgba(255,255,255,.03)}
.land-q--pending:hover .land-q-num{color:rgba(255,255,255,.06)}
.land-q--pending:hover .land-q-text{color:rgba(255,255,255,.2)}
.land-q--pending:hover .land-q-text em{color:rgba(255,255,255,.18)}
.land-q--pending:hover .land-q-badge{color:rgba(255,255,255,.25);border-color:rgba(255,255,255,.08)}
.land-q-badge{margin-left:auto;font-size:11px;letter-spacing:.15em;
  color:rgba(255,255,255,.18);
  padding:4px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.06);
  white-space:nowrap;flex-shrink:0;transition:all .4s}

/* ── 通用动画 ── */
@keyframes landFadeIn{to{opacity:1}}
@keyframes landFadeUp{to{opacity:1;transform:translateY(0)}}
#landingPage.landing-exit{transition:opacity .9s cubic-bezier(.25,1,.5,1);opacity:0;pointer-events:none}

/* ── 响应式 ── */
@media(max-width:700px){
  .land-questions{left:20px;right:20px;width:auto}
  .land-q-cta{display:none}
  .land-q-sub{display:none}
  .typo-w2,.typo-w5{display:none}
  .land-vert-divide{display:none}
  .land-right-info{display:none}
  .land-corner{display:none}
  .land-khamr{display:none}
  .land-hee-border{display:none}
}

/* ══════════════════════════════════════════
   ██  引导模式 — 标题卡 + 洞察面板 + 浮动条 ██
   ══════════════════════════════════════════ */
/* 全屏标题卡 */
.gd-titlecard{position:fixed;inset:0;z-index:200;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .6s ease}
.gd-titlecard.show{opacity:1;pointer-events:auto}
.gd-tc-num{font-family:Orbitron,monospace;font-size:clamp(13px,1.4vw,18px);letter-spacing:.2em;color:rgba(41,151,255,.55);margin-bottom:18px}
.gd-tc-title{font-size:clamp(36px,5.5vw,72px);font-weight:700;line-height:1.1;color:#f5f5f7;letter-spacing:-.03em;text-align:center;max-width:900px;
  opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.22,1,.36,1) .15s}
.gd-titlecard.show .gd-tc-title{opacity:1;transform:translateY(0)}
.gd-tc-sub{font-size:clamp(14px,1.6vw,20px);color:#6e6e73;margin-top:16px;font-weight:400;text-align:center;
  opacity:0;transform:translateY(16px);transition:all .7s cubic-bezier(.22,1,.36,1) .4s}
.gd-titlecard.show .gd-tc-sub{opacity:1;transform:translateY(0)}
/* 浮动洞察卡 */
.gd-insight{position:fixed;z-index:160;pointer-events:none;
  right:48px;top:50%;transform:translateY(-50%) translateX(30px);
  width:clamp(260px,22vw,360px);padding:28px 28px 24px;
  background:rgba(20,20,22,.88);backdrop-filter:blur(36px);-webkit-backdrop-filter:blur(36px);
  border:1px solid rgba(255,255,255,.06);border-radius:16px;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  opacity:0;transition:all .5s cubic-bezier(.22,1,.36,1)}
.gd-insight.show{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto}
.gd-insight-num{font-family:Orbitron,monospace;font-size:42px;font-weight:700;line-height:1;color:#2997ff;margin-bottom:6px}
.gd-insight-label{font-size:14px;font-weight:600;color:#f5f5f7;margin-bottom:10px}
.gd-insight-body{font-size:13px;line-height:1.7;color:rgba(255,255,255,.45)}
.gd-insight .gd-kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.gd-insight .gd-kv-k{color:rgba(255,255,255,.35);font-size:12px}
.gd-insight .gd-kv-v{color:#f5f5f7;font-size:13px;font-weight:600}
/* 引导覆盖层 + 底部浮动条 */
#guidedOverlay{position:fixed;inset:0;z-index:150;pointer-events:none;display:none}
#guidedOverlay.active{display:block}
.gn-bar{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);z-index:160;pointer-events:auto;
  display:flex;align-items:center;gap:20px;padding:14px 28px;
  background:rgba(28,28,30,.82);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border:1px solid rgba(255,255,255,.06);border-radius:18px;
  box-shadow:0 4px 24px rgba(0,0,0,.5);
  opacity:0;transform:translateX(-50%) translateY(16px);transition:all .45s cubic-bezier(.22,1,.36,1)}
#guidedOverlay.active .gn-bar{opacity:1;transform:translateX(-50%) translateY(0)}
.gn-bar-text{display:flex;flex-direction:column;gap:1px;min-width:200px;max-width:380px}
.gn-bar-step{font-family:Orbitron,sans-serif;font-size:10px;letter-spacing:.15em;color:rgba(255,255,255,.25)}
.gn-bar-title{font-size:15px;font-weight:700;color:#f5f5f7;line-height:1.3}
.gn-bar-hint{font-size:11px;color:rgba(255,255,255,.3);margin-top:1px}
.gn-dots{display:flex;gap:5px;margin-left:6px}
.gn-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.12);transition:all .3s ease;cursor:pointer}
.gn-dot.done{background:rgba(41,151,255,.45)}
.gn-dot.current{background:#2997ff;box-shadow:0 0 6px rgba(41,151,255,.4)}
.gn-btns{display:flex;gap:6px;margin-left:10px}
.gn-arrow{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:17px;cursor:pointer;transition:all .2s;color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.gn-arrow:hover{background:rgba(255,255,255,.08);color:#fff}
.gn-arrow.disabled{opacity:.15;pointer-events:none}
.gn-exit-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;cursor:pointer;transition:all .2s;color:rgba(255,255,255,.25);
  border:1px solid rgba(255,255,255,.05);background:transparent;margin-left:4px}
.gn-exit-btn:hover{color:rgba(255,120,120,.7);border-color:rgba(255,120,120,.2)}
/* ══ Home 按钮 ══ */
#homeBtn{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:9999;
  padding:8px 24px;border:1px solid rgba(255,255,255,.1);border-radius:980px;
  background:rgba(28,28,30,.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  color:rgba(255,255,255,.7);font-size:13px;font-weight:600;font-family:'Noto Sans SC',sans-serif;
  cursor:pointer;transition:all .25s ease;display:none;letter-spacing:.03em;
  box-shadow:0 2px 12px rgba(0,0,0,.3)}
#homeBtn:hover{background:rgba(41,151,255,.15);border-color:rgba(41,151,255,.3);color:#fff}

/* ══ 引导画布容器 ══ */
#guidedViz{position:absolute;inset:0;z-index:5;display:none;background:#000}
#guidedCanvas{width:100%;height:100%;display:block}

/* ══════════════════════════════════════════════════════════════
   ██  Landing 粒子球体 + Cinematic Director Mode CSS       ██
   ══════════════════════════════════════════════════════════════ */

/* ── Landing 粒子球体画布 ── */
#landingSphere{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ── 遮幅黑条 (16:9 Letterbox) ── */
.letterbox{position:fixed;left:0;right:0;z-index:102;background:#000;height:0;pointer-events:none;
  transition:height .6s cubic-bezier(.22,1,.36,1)}
.letterbox-top{top:0}
.letterbox-bottom{bottom:0}
.letterbox.active{height:clamp(48px,6vh,72px)}

/* ── 电影模式容器 ── */
#cinematicMode{position:fixed;inset:0;z-index:100;pointer-events:none}
#cinematicMode>*{pointer-events:auto}
#cinematicMode .letterbox{pointer-events:none}

/* ── 叙事文字区 ── */
.cm-narration{position:fixed;z-index:110;left:clamp(48px,6vw,96px);top:50%;transform:translateY(-50%);
  max-width:clamp(320px,30vw,480px);opacity:0;pointer-events:none;
  transition:opacity .6s ease,transform .6s ease;
  padding:28px 32px;border-radius:20px;
  background:linear-gradient(135deg,rgba(5,5,16,.72) 0%,rgba(8,12,28,.55) 100%);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(255,255,255,.04);
  box-shadow:0 12px 48px rgba(0,0,0,.5)}
.cm-narration.show{opacity:1;pointer-events:auto}
.cm-act-label{font-family:Orbitron,sans-serif;font-size:clamp(10px,1vw,13px);
  letter-spacing:.3em;color:rgba(41,151,255,.6);text-transform:uppercase;margin-bottom:12px}
.cm-act-title{font-size:clamp(28px,3.8vw,52px);font-weight:700;line-height:1.15;
  color:#f5f5f7;letter-spacing:-.025em;margin-bottom:16px}
.cm-act-text{font-size:clamp(13px,1.4vw,16px);line-height:1.8;color:rgba(255,255,255,.45);
  max-height:45vh;overflow-y:auto;scrollbar-width:none}
.cm-act-text::-webkit-scrollbar{display:none}
.cm-act-text .cm-highlight{color:#2997ff;font-weight:600}
.cm-act-text .cm-stat{font-family:Orbitron,sans-serif;color:rgba(80,232,208,.85);font-weight:700;font-size:1.1em}

/* ── 玻璃拟态面板 ── */
.cm-glass-panel{position:fixed;z-index:108;right:clamp(48px,5vw,80px);top:50%;transform:translateY(-50%) translateX(40px);
  width:clamp(360px,32vw,520px);max-height:calc(100vh - 200px);
  padding:28px;overflow:hidden;
  background:rgba(12,18,35,.55);
  backdrop-filter:blur(32px) saturate(1.3);-webkit-backdrop-filter:blur(32px) saturate(1.3);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  box-shadow:0 20px 80px rgba(0,0,0,.5),0 0 1px rgba(255,255,255,.15),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;pointer-events:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.cm-glass-panel.show{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto}
.cm-panel-header{font-size:14px;font-weight:700;color:#eafaff;margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:8px}
.cm-panel-header::before{content:'';width:3px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,#2997ff,#00f3ff)}
.cm-chart{width:100%;height:280px}
.cm-panel-insight{font-size:12px;line-height:1.7;color:rgba(255,255,255,.4);margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.04)}
.cm-panel-insight .cm-ins-key{color:#2997ff;font-weight:600}

/* ── Act4 Canvas ── */
#cmCanvas{position:fixed;inset:0;z-index:106;width:100%;height:100%;display:none;pointer-events:none}
#q2Canvas{position:fixed;inset:0;z-index:2;width:100%;height:100%;display:none;pointer-events:none}

/* ── Q2 产品大图 — Apple PPT 伪3D ── */
.q2-product-hero{
  position:fixed;z-index:3;pointer-events:none;
  display:none;opacity:0;
  height:70vh;width:auto;max-width:38vw;
  object-fit:contain;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55)) drop-shadow(0 8px 20px rgba(0,0,0,.4));
  will-change:transform,opacity;
}
.q2-product--left{
  left:5vw;top:50%;
  transform:translateY(-50%) perspective(1200px) rotateY(18deg) rotateX(-2deg) scale(0.92);
  transform-origin:center left;
}
.q2-product--right{
  right:5vw;top:50%;
  transform:translateY(-50%) perspective(1200px) rotateY(-18deg) rotateX(-2deg) scale(0.92);
  transform-origin:center right;
}

/* ── 进度条 + 导航 ── */
.cm-progress{position:fixed;bottom:clamp(24px,4vh,48px);left:50%;transform:translateX(-50%);z-index:120;
  display:flex;align-items:center;gap:20px;padding:12px 24px;
  background:rgba(20,20,22,.72);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border:1px solid rgba(255,255,255,.06);border-radius:980px;
  box-shadow:0 4px 24px rgba(0,0,0,.4);
  opacity:0;transform:translateX(-50%) translateY(20px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.cm-progress.show{opacity:1;transform:translateX(-50%) translateY(0)}
.cm-prog-dots{display:flex;gap:6px;align-items:center}
.cm-prog-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:Orbitron,sans-serif;font-size:9px;letter-spacing:.05em;
  color:rgba(255,255,255,.2);background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .3s ease}
.cm-prog-dot.done{color:rgba(41,151,255,.6);background:rgba(41,151,255,.08);border-color:rgba(41,151,255,.2)}
.cm-prog-dot.active{color:#fff;background:rgba(41,151,255,.2);border-color:rgba(41,151,255,.5);
  box-shadow:0 0 12px rgba(41,151,255,.25)}
.cm-prog-dot span{line-height:1}
.cm-prog-next{padding:8px 20px;border-radius:980px;font-size:13px;font-weight:600;
  color:#fff;background:rgba(41,151,255,.25);border:1px solid rgba(41,151,255,.35);
  cursor:pointer;transition:all .25s ease;font-family:'Noto Sans SC',sans-serif;white-space:nowrap}
.cm-prog-next:hover{background:rgba(41,151,255,.4);border-color:rgba(41,151,255,.5)}
.cm-exit{padding:8px 16px;border-radius:980px;font-size:11px;
  color:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.06);background:transparent;
  cursor:pointer;transition:all .2s ease;font-family:'Noto Sans SC',sans-serif;white-space:nowrap}
.cm-exit:hover{color:rgba(255,120,120,.7);border-color:rgba(255,120,120,.2)}

/* ── 电影模式下Globe滤镜 + 左移 ── */
#globeViz.cm-blur canvas{filter:blur(3px) brightness(.5) saturate(.6);transition:filter 1s ease;will-change:filter}
#globeViz.cm-focus canvas{filter:contrast(1.05) brightness(.62) saturate(.9);
  transition:filter 1s cubic-bezier(.25,1,.5,1);will-change:filter}
#globeViz canvas{will-change:transform}
#globeViz{transition:transform 1.2s cubic-bezier(.4,0,.2,1)}
#globeViz.shift-left{transform:translateX(-18vw)}

/* ── 打字光标 ── */
.cm-cursor{display:inline-block;width:2px;height:1em;background:#2997ff;margin-left:2px;
  animation:cmBlink .8s step-end infinite;vertical-align:text-bottom}
@keyframes cmBlink{0%,100%{opacity:1}50%{opacity:0}}

/* ── 电影全屏黑幕 ── */
.cm-blackout{position:fixed;inset:0;z-index:105;background:#000;opacity:0;pointer-events:none;
  transition:opacity .8s ease}
.cm-blackout.active{opacity:1}

/* ══════════ 通用电影叙事叠层 ══════════ */
.cm-act-ov{position:fixed;inset:0;z-index:109;pointer-events:none}
/* 居中标题卡 */
.ao-title{position:absolute;left:28%;top:50%;transform:translate(-50%,-50%);text-align:center;opacity:0;
  max-width:52vw;z-index:2}
.ao-label{font-family:Orbitron,sans-serif;font-size:clamp(12px,1.2vw,16px);letter-spacing:.4em;
  color:rgba(41,151,255,.5);margin-bottom:16px;text-transform:uppercase}
.ao-heading{font-size:clamp(36px,5vw,72px);font-weight:700;color:#f5f5f7;letter-spacing:-.03em;
  text-shadow:0 4px 30px rgba(0,0,0,.6)}
/* Q2标题：移至左上避免遮挡canvas */
#q2CinematicMode .ao-title{left:clamp(40px,5vw,80px);top:clamp(60px,10vh,120px);
  transform:none;text-align:left;max-width:40vw}
#q2CinematicMode .ao-label{color:rgba(120,200,255,.6)}
#q2CinematicMode .ao-heading{font-size:clamp(32px,4.5vw,64px);
  background:linear-gradient(135deg,#fff 40%,rgba(120,200,255,.7));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-shadow:none;filter:drop-shadow(0 4px 20px rgba(0,0,0,.5))}
/* Q2 chart玻璃面板 */
#q2CinematicMode .ao-chart-wrap{
  background:rgba(8,14,28,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(120,200,255,.1);border-radius:16px;padding:12px;
  box-shadow:0 0 40px rgba(60,140,255,.06),0 0 80px rgba(60,140,255,.03),inset 0 1px 0 rgba(255,255,255,.04)}
/* 底部HUD区 */
.ao-hud{position:absolute;bottom:clamp(100px,13vh,180px);left:50%;transform:translateX(-50%);
  text-align:center;white-space:nowrap;transition:left 1.2s cubic-bezier(.4,0,.2,1)}
.ao-hud.hud-left{left:calc(50% - 18vw)}
.ao-counter{font-family:Orbitron,sans-serif;font-size:clamp(11px,1.1vw,14px);
  color:rgba(80,232,208,.6);letter-spacing:.15em;margin-bottom:24px;opacity:0}
.ao-kpi-row{display:flex;align-items:center;gap:32px;opacity:0;justify-content:center}
.ao-kpi{text-align:center}
.ao-kpi-val{font-family:Orbitron,sans-serif;font-size:clamp(28px,3.5vw,52px);font-weight:700;
  color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.ao-kpi-lbl{font-size:12px;color:rgba(255,255,255,.3);margin-top:4px;letter-spacing:.05em}
.ao-kpi-sep{width:1px;height:40px;background:rgba(255,255,255,.08)}
.ao-insight{font-size:clamp(13px,1.3vw,16px);color:rgba(255,255,255,.4);margin-top:20px;opacity:0;
  letter-spacing:.02em;max-width:min(480px,40vw);white-space:normal}
/* KPI颜色修饰 */
.ao-kpi-gold .ao-kpi-val{color:rgba(255,200,80,.85)}
.ao-kpi-blue .ao-kpi-val{color:rgba(92,158,245,.85)}
.ao-kpi-red .ao-kpi-val{color:rgba(255,110,90,.85)}
.ao-kpi-green .ao-kpi-val{color:rgba(80,232,208,.85)}
.ao-kpi-purple .ao-kpi-val{color:rgba(180,140,240,.85)}
/* 打字机区 */
.ao-typewriter{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  text-align:center;max-width:640px;font-size:clamp(16px,2vw,24px);line-height:1.8;
  color:rgba(255,255,255,.65);letter-spacing:.03em;opacity:0}
/* ── FINAL结束后双按钮 ── */
.ao-end-btns{position:absolute;left:50%;bottom:clamp(80px,12vh,160px);transform:translateX(-50%);
  display:flex;gap:16px;opacity:0;transition:opacity .8s ease;pointer-events:none}
.ao-end-btns.show{opacity:1;pointer-events:auto}
.ao-end-btn{position:relative;padding:14px 36px;border-radius:980px;font-size:15px;font-weight:600;
  cursor:pointer;transition:all .35s cubic-bezier(.25,1,.5,1);
  font-family:'Noto Sans SC',sans-serif;letter-spacing:.01em;user-select:none;
  display:flex;align-items:center;gap:8px;overflow:hidden}
.ao-end-btn .btn-icon{font-size:11px;opacity:.6;transition:transform .3s}
.ao-end-btn:hover .btn-icon{transform:scale(1.15)}
.ao-end-explore{border:none;color:#fff;background:#0071e3;
  box-shadow:0 2px 16px rgba(0,113,227,.3)}
.ao-end-explore:hover{transform:scale(1.04);background:#0077ed;
  box-shadow:0 6px 30px rgba(0,113,227,.4)}
.ao-end-more{border:1.5px solid rgba(255,255,255,.18);color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.04);backdrop-filter:blur(16px);
  box-shadow:0 1px 12px rgba(0,0,0,.3)}
.ao-end-more:hover{border-color:rgba(255,255,255,.35);color:#fff;
  background:rgba(255,255,255,.08);transform:scale(1.04);
  box-shadow:0 4px 24px rgba(0,0,0,.4)}
/* 内嵌可视化图表区 */
.ao-chart-wrap{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:clamp(380px,56vw,820px);height:clamp(220px,32vh,400px);
  opacity:0;pointer-events:none;transition:opacity .6s ease}
.ao-chart-wrap.show{opacity:1;pointer-events:auto}
.ao-chart-wrap.large{height:clamp(300px,45vh,520px)}
.ao-chart-wrap.glow{
  box-shadow:0 0 40px rgba(0,200,255,.1),0 0 100px rgba(0,200,255,.06),inset 0 0 30px rgba(0,200,255,.03);
  border:1px solid rgba(0,200,255,.15);border-radius:12px;
  animation:aoGlowPulse 2.5s ease-in-out infinite}
@keyframes aoGlowPulse{
  0%,100%{box-shadow:0 0 40px rgba(0,200,255,.08),0 0 80px rgba(0,200,255,.04),inset 0 0 20px rgba(0,200,255,.02);border-color:rgba(0,200,255,.1)}
  50%{box-shadow:0 0 60px rgba(0,200,255,.18),0 0 140px rgba(0,200,255,.08),inset 0 0 40px rgba(0,200,255,.04);border-color:rgba(0,200,255,.25)}}
/* ── 图表移至右侧面板 ── */
.ao-chart-wrap.side{left:auto;right:2vw;top:50%;transform:translateY(-50%);
  width:clamp(340px,44vw,680px);height:clamp(260px,42vh,500px);
  background:rgba(8,14,28,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:16px}
.ao-chart-wrap.side.large{height:clamp(320px,52vh,580px)}