/* ============================================================
   一品一IP — 演示幻灯片样式 (v2.0 - 与 theme.css 变量对齐)
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* 仅在演示幻灯片 .frame 容器内生效 — 不污染主应用 */
.frame, .frame body{min-height:100%;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;cursor:default}

/* 使用 theme.css 中的变量，作用域限定在 .frame 内避免全局污染 */
.frame{
  --p:#D81018;--ph:#C40E16;--s:#34c759;--w:#ff9f0a;--e:#ff453a;
  --r:#E85D3A;--a:#D4940A;--t:#FF6030;--i:#FFD070;
  --g-p:linear-gradient(135deg,#D81018,#E85D3A);
  --g-r:linear-gradient(135deg,#E85D3A,#FFD070);
  --g-a:linear-gradient(135deg,#D4940A,#FFD070);
  --g-i:linear-gradient(135deg,#FF6030,#FFD070);
  --g-ac:linear-gradient(135deg,#D81018,#FF6030);
}

/* 每个场景的专属底色 */
.scene-warm{background:linear-gradient(135deg,#fef9f4,#fdf2e8)}
.scene-ai{background:linear-gradient(135deg,#f5f0ff,#ede5ff)}
.scene-green{background:linear-gradient(135deg,#f0faf4,#e3f5eb)}
.scene-gold{background:linear-gradient(135deg,#fffbf0,#fef5d8)}
.scene-blue{background:linear-gradient(135deg,#f0f5ff,#e5efff)}
.scene-indigo{background:linear-gradient(135deg,#eef2ff,#e0e7ff)}
.scene-teal{background:linear-gradient(135deg,#f0fafb,#dceef0)}
.scene-violet{background:linear-gradient(135deg,#f8f0ff,#efe5ff)}
.scene-slate{background:linear-gradient(135deg,#f1f3f5,#e8eaed)}

.frame{position:fixed;inset:0;overflow:hidden;perspective:2000px;background:#fff}
.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:6vh 6vw;
  opacity:0;pointer-events:none;transform-style:preserve-3d;will-change:transform}
.scene.active{opacity:1;pointer-events:auto;z-index:10}
.scene-dark{background:var(--g-p);color:#fff}
.scene::before{content:'';position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(rgba(74,134,254,0.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(74,134,254,0.04) 1px,transparent 1px);
  background-size:64px 64px;opacity:0}
.scene.active::before{opacity:1;transition:opacity 0.6s}
.scene::after{content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity 0.8s}
.scene.active::after{opacity:1}
.s-overlay-0::after{background:radial-gradient(ellipse 70% 50% at 50% 30%,rgba(255,255,255,0.15),transparent 70%)}
.s-overlay-1::after{background:radial-gradient(ellipse 60% 50% at 30% 80%,rgba(232,93,58,0.015),transparent 70%)}
.s-overlay-2::after{background:radial-gradient(ellipse 60% 50% at 50% 30%,rgba(139,92,246,0.015),transparent 70%)}
.s-overlay-3::after{background:radial-gradient(ellipse 60% 50% at 20% 40%,rgba(52,199,89,0.01),transparent 70%)}
.s-overlay-4::after{background:radial-gradient(ellipse 60% 50% at 80% 60%,rgba(255,159,10,0.01),transparent 70%)}
.s-overlay-5::after{background:radial-gradient(ellipse 60% 50% at 50% 30%,rgba(74,134,254,0.01),transparent 70%)}
.s-overlay-6::after{background:radial-gradient(ellipse 60% 50% at 50% 30%,rgba(74,134,254,0.01),transparent 70%)}
.s-overlay-7::after{background:radial-gradient(ellipse 60% 50% at 50% 30%,rgba(74,134,254,0.01),transparent 70%)}
.s-overlay-8::after{background:radial-gradient(ellipse 60% 50% at 50% 30%,rgba(74,134,254,0.01),transparent 70%)}
.s-overlay-9::after{background:radial-gradient(ellipse 60% 50% at 50% 30%,rgba(74,134,254,0.01),transparent 70%)}

.h0{font-size:clamp(60px,10vw,130px);font-weight:800;letter-spacing:-0.04em;line-height:0.92;color:var(--text-primary)}
.h0-light{font-size:clamp(60px,10vw,130px);font-weight:800;letter-spacing:-0.04em;line-height:0.92;
  color:#fff;background:linear-gradient(180deg,#fff 65%,rgba(255,255,255,0.3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.h1{font-size:clamp(36px,5.5vw,72px);font-weight:700;letter-spacing:-0.03em;line-height:1.05;color:var(--text-primary)}
.h1-grad{background:var(--g-p);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.h2{font-size:clamp(24px,3.5vw,48px);font-weight:700;letter-spacing:-0.02em;line-height:1.1;color:var(--text-primary)}
.h3{font-size:clamp(18px,2vw,32px);font-weight:700;letter-spacing:-0.02em;line-height:1.15;color:var(--text-primary)}
.eyebrow{font-size:clamp(10px,0.7vw,13px);font-weight:600;letter-spacing:0.3em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:1.2em}
.eyebrow-light{font-size:clamp(10px,0.7vw,13px);font-weight:600;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:1.2em}
.body{font-size:clamp(13px,1.1vw,17px);font-weight:400;line-height:1.7;color:var(--text-secondary);max-width:55ch}
.body-light{font-size:clamp(13px,1.1vw,17px);font-weight:400;line-height:1.7;color:rgba(255,255,255,0.6);max-width:55ch}
.index{position:absolute;top:4vh;right:5vw;font-size:clamp(48px,6vw,100px);font-weight:800;
  color:rgba(74,134,254,0.06);letter-spacing:-0.04em;line-height:1;pointer-events:none}

/* 卡片 - 使用 theme.css 变量 */
.card{background:#fff;border:none;border-radius:20px;padding:clamp(16px,1.6vw,28px);
  box-shadow:var(--shadow-card);transition:transform 0.5s cubic-bezier(.22,1,.36,1),box-shadow 0.3s}
.card:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-hover)}
.card-icon{font-size:clamp(20px,1.8vw,28px);color:var(--p);margin-bottom:0.6em;display:block}
.card h3{font-size:clamp(13px,1vw,16px);font-weight:600;margin-bottom:0.3em;letter-spacing:-0.01em;color:var(--text-primary)}
.card p{font-size:clamp(11px,0.8vw,13px);color:var(--text-secondary);line-height:1.6}
.card-compact{padding:clamp(12px,1.2vw,20px)}

/* FLOW NODES */
.fnode{background:#fff;border:none;border-radius:14px;padding:10px 16px;
  text-align:center;min-width:100px;cursor:default;box-shadow:var(--shadow-card);
  transition:all 0.4s cubic-bezier(.22,1,.36,1)}
.fnode:hover{transform:scale(1.08) translateY(-3px);box-shadow:var(--shadow-hover)}
.fnode .fi{font-size:18px;display:block;margin-bottom:3px}
.fnode .fl{font-size:12px;font-weight:600;color:var(--text-primary)}
.fnode .fd{font-size:10px;color:var(--text-tertiary);margin-top:2px}
.fnode-sm{min-width:80px;padding:8px 12px}.fnode-sm .fi{font-size:14px}.fnode-sm .fl{font-size:10px}

/* STAT */
.stat-grid{display:flex;gap:clamp(24px,4vw,64px)}
.stat-num{font-size:clamp(40px,5vw,72px);font-weight:800;letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat-num-grad{background:var(--g-p);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-lbl{font-size:clamp(11px,0.8vw,14px);font-weight:500;letter-spacing:0.05em;color:var(--text-tertiary);margin-top:0.5em;text-transform:uppercase}

/* ROADMAP */
.rm{flex:1;background:#fff;border:none;border-radius:24px;padding:clamp(20px,2vw,32px);box-shadow:var(--shadow-card);transition:all 0.5s cubic-bezier(.22,1,.36,1)}
.rm:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover)}
.rv{font-size:clamp(22px,2.5vw,36px);font-weight:800;letter-spacing:-0.03em;margin-bottom:0.2em}
.rl{font-size:clamp(11px,0.7vw,13px);text-transform:uppercase;letter-spacing:0.15em;color:var(--text-tertiary);margin-bottom:1.2em}
.rm ul{list-style:none;padding:0}
.rm ul li{font-size:clamp(12px,0.8vw,14px);color:var(--text-secondary);padding:0.4em 0;display:flex;align-items:center;gap:0.6em}
.rm-ft{margin-top:1.2em;padding-top:1em;border-top:1px solid var(--border-default);font-size:clamp(10px,0.6vw,12px);color:var(--text-tertiary)}

/* SWIMLANE */
.lane{flex:1;border-radius:16px;padding:clamp(10px,1vw,18px);min-height:280px;display:flex;flex-direction:column;gap:6px;border:1px solid transparent}
.lane-h{font-size:clamp(11px,0.8vw,14px);font-weight:700;letter-spacing:0.05em;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.lane-item{font-size:clamp(10px,0.65vw,12px);padding:6px 10px;border-radius:8px;background:rgba(255,255,255,0.8);color:var(--text-secondary);font-weight:500;line-height:1.3}

/* TIMELINE */
.tl{display:flex;align-items:flex-start;justify-content:space-between;position:relative;padding:clamp(20px,3vh,40px) 0;}
.tl-line{position:absolute;top:clamp(28px,3.5vh,44px);left:0;right:0;height:3px;background:var(--border-default);border-radius:2px;z-index:0}
.tl-fill{height:100%;background:var(--g-p);border-radius:2px;transform-origin:left;width:0}
.tl-node{display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1;cursor:pointer;transition:all 0.3s;min-width:0;flex:1}
.tl-dot{width:clamp(12px,1.2vh,18px);height:clamp(12px,1.2vh,18px);border-radius:50%;background:#fff;border:3px solid var(--border-default);transition:all 0.4s}
.tl-dot.on{background:var(--p);border-color:var(--p);box-shadow:0 0 20px rgba(74,134,254,0.25)}
.tl-label{font-size:clamp(8px,0.55vw,11px);font-weight:600;color:var(--text-secondary);text-align:center;white-space:nowrap;transition:color 0.3s}
.tl-node:hover .tl-label{color:var(--p)}

/* NAV */
.bar{position:fixed;bottom:clamp(16px,3vh,40px);left:50%;transform:translateX(-50%);z-index:200;
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.5vw,24px);
  background:rgba(255,255,255,0.9);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  padding:clamp(8px,0.8vw,12px) clamp(16px,1.8vw,24px);
  border-radius:60px;border:1px solid var(--border-default);box-shadow:0 10px 50px rgba(0,0,0,0.12);
  width:fit-content;max-width:92vw;touch-action:manipulation}
.dots{display:flex;gap:5px}
.dt{width:5px;height:5px;border-radius:50%;background:var(--border-default);cursor:pointer;transition:all 0.5s}
.dt.on{background:var(--p);width:20px;border-radius:3px}
.nb{background:transparent;border:none;color:var(--text-primary);width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all 0.3s;opacity:0.4}
.nb:hover{background:var(--bg-elevated);opacity:1}
.nb:disabled{opacity:0.08;cursor:default}
.nct{font-size:11px;color:var(--text-tertiary);font-variant-numeric:tabular-nums;min-width:36px;text-align:center}
.track{position:fixed;top:0;left:0;right:0;height:3px;z-index:200}
.track-fill{height:100%;background:var(--g-p);transform-origin:left;scaleX:0}

/* ORBIT */
.orbit-container{position:relative;width:100%;max-width:600px;margin:0 auto;height:clamp(200px,30vh,380px)}
.orbit-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(60px,6vw,100px);height:clamp(60px,6vw,100px);border-radius:50%;background:var(--g-p);display:flex;align-items:center;justify-content:center;color:#fff;font-size:clamp(20px,2vw,32px);box-shadow:0 0 40px rgba(74,134,254,0.2);z-index:2}
.orbit-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(160px,20vw,320px);height:clamp(160px,20vw,320px);border-radius:50%;border:1px solid rgba(74,134,254,0.12);z-index:1}
.orbit-ring-2{width:clamp(260px,32vw,480px);height:clamp(260px,32vw,480px);border-color:rgba(74,134,254,0.06)}
.orbit-card{position:absolute;background:#fff;border:none;border-radius:14px;padding:8px 12px;text-align:center;min-width:100px;box-shadow:var(--shadow-card);z-index:3;cursor:default;transition:all 0.3s}
.orbit-card:hover{transform:scale(1.1)!important;box-shadow:var(--shadow-hover)}
.orbit-card .fi{font-size:16px;display:block;margin-bottom:2px}
.orbit-card .fl{font-size:10px;font-weight:600;color:var(--text-primary)}

/* COMP TABLE */
.comp-table{width:100%;border-collapse:separate;border-spacing:0;font-size:clamp(11px,0.75vw,14px)}
.comp-table th{padding:10px 14px;text-align:left;font-weight:700;color:var(--text-primary);background:var(--bg-elevated);border-bottom:2px solid var(--border-default)}
.comp-table th:first-child{border-radius:12px 0 0 0}
.comp-table th:last-child{border-radius:0 12px 0 0}
.comp-table td{padding:8px 14px;border-bottom:1px solid var(--border-default);color:var(--text-secondary)}
.comp-table tr:hover td{background:rgba(74,134,254,0.03)}
.comp-tag{display:inline-block;padding:1px 8px;border-radius:20px;font-size:10px;font-weight:600}
.pill{display:inline-block;font-size:clamp(9px,0.55vw,11px);font-weight:600;padding:3px 10px;border-radius:20px;border:1px solid}
.flow-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
.flow-svg path{stroke-dasharray:6 4;animation:dashFlow 1.2s linear infinite}
@keyframes dashFlow{to{stroke-dashoffset:-10}}
.cta{display:inline-flex;align-items:center;gap:8px;padding:10px 32px;background:var(--g-p);border:none;border-radius:60px;color:#fff;text-decoration:none;font-size:clamp(12px,0.8vw,14px);font-weight:600;cursor:pointer;transition:all 0.3s;box-shadow:0 4px 16px rgba(74,134,254,0.2)}
.cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(74,134,254,0.3);color:#fff}
.cta-outline{background:transparent;border:1px solid var(--border-default);color:var(--text-primary);box-shadow:none}
.cta-outline:hover{background:var(--bg-elevated);box-shadow:var(--shadow-card);color:var(--text-primary)}

/* S7 Pipeline */
.pipeline{display:flex;flex-direction:column;gap:6px;width:100%;max-width:700px;margin:0 auto}
.pipe-row{display:flex;align-items:center;gap:clamp(4px,0.5vw,10px);justify-content:center}
.pipe-card{flex:1;background:#fff;border:none;border-radius:16px;padding:clamp(8px,1vw,16px);text-align:center;box-shadow:var(--shadow-card);cursor:default;transition:all 0.4s;position:relative;max-width:160px}
.pipe-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.pipe-icon{font-size:clamp(16px,1.4vw,24px);display:block;margin-bottom:4px}
.pipe-title{font-size:clamp(9px,0.65vw,12px);font-weight:600;color:var(--text-primary)}
.pipe-sub{font-size:clamp(7px,0.5vw,9px);color:var(--text-tertiary);margin-top:2px;font-weight:500}
.pipe-badge{position:absolute;top:-6px;right:-6px;background:var(--p);color:#fff;font-size:8px;font-weight:700;padding:2px 6px;border-radius:10px;line-height:1}
.pipe-arrow{font-size:clamp(10px,0.8vw,14px);color:var(--text-tertiary);flex-shrink:0}
.pipe-divider{width:100%;height:1px;background:var(--border-default);margin:2px 0;position:relative}
.pipe-divider::after{content:'\002B9E';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;padding:0 8px;font-size:10px;color:var(--text-tertiary)}

/* S8 Device panels */
.device-row{display:flex;gap:clamp(8px,1.2vw,20px);justify-content:center;flex-wrap:nowrap}
.device-panel{flex:1;background:#fff;border:none;border-radius:20px;padding:clamp(14px,1.4vw,24px);min-width:0;box-shadow:var(--shadow-card);cursor:default;position:relative;transition:all 0.4s;max-width:280px}
.device-panel:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.device-header{display:flex;align-items:center;gap:8px;margin-bottom:clamp(8px,0.8vh,14px);padding-bottom:clamp(8px,0.8vh,14px);border-bottom:1px solid var(--border-default)}
.device-avatar{width:clamp(28px,2.5vw,40px);height:clamp(28px,2.5vw,40px);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:clamp(12px,1.2vw,18px);flex-shrink:0}
.device-name{font-size:clamp(11px,0.8vw,15px);font-weight:700;color:var(--text-primary)}
.device-sub{font-size:clamp(8px,0.55vw,10px);color:var(--text-tertiary);font-weight:500}
.device-body{display:flex;flex-direction:column;gap:clamp(4px,0.4vh,8px)}
.device-row-item{display:flex;justify-content:space-between;align-items:center;padding:clamp(4px,0.4vh,8px) 0;border-bottom:1px solid rgba(0,0,0,0.04)}
.device-row-item:last-child{border-bottom:none}
.device-row-label{font-size:clamp(9px,0.55vw,11px);color:var(--text-secondary);font-weight:500}
.device-row-value{font-size:clamp(9px,0.55vw,11px);font-weight:600;color:var(--text-primary)}
.device-row-value.green{color:var(--s)}.device-row-value.orange{color:var(--w)}.device-row-value.blue{color:var(--p)}
.device-arrow{position:absolute;top:50%;right:clamp(-14px,-1.2vw,-8px);transform:translateY(-50%);font-size:clamp(10px,0.8vw,14px);color:var(--p);opacity:0.3;z-index:5}

/* S9 Matrix */
.matrix-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:clamp(8px,1vh,16px)}
.matrix-cell{padding:clamp(6px,0.5vh,10px) clamp(4px,0.3vw,8px);border-radius:8px;text-align:center;font-size:clamp(8px,0.45vw,10px);font-weight:500;transition:all 0.3s;cursor:default}
.matrix-cell.full{background:rgba(74,134,254,0.1);color:var(--p)}
.matrix-cell.partial{background:rgba(255,159,10,0.08);color:var(--w)}
.matrix-cell.empty{background:var(--bg-elevated);color:var(--text-tertiary)}
.matrix-cell:hover{transform:scale(1.12)}
.matrix-label{font-size:clamp(7px,0.4vw,9px);color:var(--text-tertiary);font-weight:600;text-align:center;padding-bottom:4px;text-transform:uppercase;letter-spacing:0.05em}
.matrix-header-label{font-size:clamp(8px,0.45vw,10px);color:var(--text-tertiary);font-weight:600;text-align:center;padding-bottom:4px;text-transform:uppercase;letter-spacing:0.05em}

/* S10 Evolution Timeline */
.evo-track{position:relative;padding:clamp(16px,2vh,28px) 0;display:flex;align-items:flex-start;justify-content:space-between}
.evo-line{position:absolute;top:clamp(18px,2.2vh,28px);left:0;right:0;height:3px;background:var(--border-default);border-radius:2px;z-index:0}
.evo-fill{height:100%;background:var(--g-p);border-radius:2px;transform-origin:left;width:0}
.evo-node{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,0.8vh,12px);z-index:1;flex:1;cursor:default}
.evo-dot{width:clamp(14px,1.4vh,22px);height:clamp(14px,1.4vh,22px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(6px,0.5vw,9px);color:#fff;font-weight:800;transition:all 0.4s}
.evo-dot.done{background:var(--s);box-shadow:0 0 16px rgba(52,199,89,0.25)}
.evo-dot.current{background:var(--w);box-shadow:0 0 16px rgba(255,159,10,0.3)}
.evo-dot.future{background:var(--border-default);color:var(--text-tertiary)}
.evo-card{width:100%;max-width:clamp(120px,14vw,200px);background:#fff;border:none;border-radius:14px;padding:clamp(10px,1vw,18px);box-shadow:var(--shadow-card);text-align:center;transition:all 0.3s}
.evo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.evo-version{font-size:clamp(16px,1.4vw,24px);font-weight:800;letter-spacing:-0.02em}
.evo-label{font-size:clamp(9px,0.55vw,11px);font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.1em;margin:4px 0}
.evo-features{list-style:none;padding:0;margin-top:clamp(6px,0.6vh,10px)}
.evo-features li{font-size:clamp(8px,0.5vw,10px);color:var(--text-secondary);padding:clamp(2px,0.2vh,4px) 0;display:flex;align-items:center;gap:4px;justify-content:center}
.evo-status{font-size:clamp(8px,0.5vw,10px);font-weight:600;padding:2px 10px;border-radius:10px;display:inline-block;margin-top:clamp(4px,0.4vh,8px)}
.evo-status.done{background:rgba(52,199,89,0.1);color:var(--s)}
.evo-status.current{background:rgba(255,159,10,0.1);color:var(--w)}
.evo-status.future{background:var(--bg-elevated);color:var(--text-tertiary)}

/* 返回主应用按钮 */
.bar-link { display:inline-flex; align-items:center; gap:4px; background:transparent; border:none; color:var(--text-tertiary); font-size:12px; cursor:pointer; padding:4px 8px; border-radius:20px; transition:all 0.2s; text-decoration:none; }
.bar-link:hover { background:var(--bg-elevated); color:var(--p); }

/* 卡片微悬浮 (替代 GSAP mousemove 减轻主线程压力) */
.card, .pipe-card, .device-panel, .fnode, .rm, .evo-card, .nb {
  will-change: transform;
}

/* 响应式 */
@media(max-width:768px){
.scene{padding:10vh 5vw 14vh}
.flow-svg{display:none}
.bar{padding:8px 14px;gap:10px;bottom:16px;max-width:96vw}
.dt{width:10px;height:10px;margin:0 2px}
.dt.on{width:26px}
.nb{width:48px;height:48px;font-size:18px;opacity:0.55}
.nct{font-size:13px;min-width:44px}
.card{padding:14px}
.pipe-card{max-width:100px;padding:6px}
.device-row{flex-direction:column;align-items:center}
.device-panel{max-width:100%}
.matrix-grid{grid-template-columns:repeat(3,1fr)}
.evo-card{max-width:100%}
.evo-features li{font-size:7px}
}

@media(max-width:576px){
.pipe-card{max-width:80px;padding:4px}
.pipe-title{font-size:7px}
.pipe-sub{display:none}
.pipe-icon{font-size:12px}
.pipe-arrow{font-size:8px}
}

/* ============================================================
   演示端增强 — 独立于 APP 的叙事性设计语言
   ============================================================ */

/* 场景激活时的戏剧化光晕 */
.scene.active.scene-dark::after {
  background: radial-gradient(ellipse 80% 40% at 50% 20%, rgba(255,255,255,0.08), transparent 70%);
}
.scene.active::after {
  transition: opacity 1.2s ease;
}

/* 标题更大胆的间距 */
.h0, .h0-light, .h1 {
  text-rendering: optimizeLegibility;
}
.h0-light {
  text-shadow: 0 2px 40px rgba(74,134,254,0.15);
}

/* 索引数字更通透 */
.index {
  opacity: 1;
  color: rgba(74,134,254,0.04);
  font-feature-settings: "ss01" on;
}

/* 卡片在演示场景中更突出 — 更高悬停 */
.card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 20px 60px rgba(0,0,0,0.06);
}

/* 导航指示器更细腻 */
.dt.on {
  background: var(--p);
  box-shadow: 0 0 8px rgba(74,134,254,0.3);
  width: 24px;
}

/* 场景切换的网格线更明显 */
.scene.active::before {
  opacity: 0.6;
  transition: opacity 0.8s ease;
}