/* 人类3.0 · 演讲大屏动效幻灯片。舞台固定 1920×1080，按窗口等比缩放（黑边留白），所有尺寸按 1080p 设计 */
@font-face { font-family: "QS Sans"; src: url(fonts/sans.woff2) format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "QS Serif"; src: url(fonts/serif.woff2) format("woff2"); font-weight: 200 900; font-display: block; }
:root {
  --cream: #f6efe0; --dim: #b9d0cc; --gold: #e9b866; --amber: #ffcf7a; --teal: #2fd0c0; --cyan: #7ff3e6; --red: #ff6b5a; --rose: #ff9a8a;
  --accent: var(--cyan); --ease: cubic-bezier(.16, .84, .24, 1);
}
* { box-sizing: border-box; }
.slide { line-break: strict; word-break: keep-all; overflow-wrap: anywhere; }
html, body { margin: 0; height: 100%; background: #020c0e; color: var(--cream); overflow: hidden; font-family: "QS Sans", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
body.idle, body.idle * { cursor: none !important; }
#bg { position: fixed; inset: 0; width: 100%; height: 100%; }
#frame { position: fixed; inset: 0; overflow: hidden; }
#stage { position: absolute; left: 50%; top: 50%; width: var(--sw, 1920px); height: var(--sh, 1080px); transform: translate(-50%, -50%) scale(var(--s, 1)); }

/* —— 幻灯片切换：进场从放大+模糊收回，离场缩小+模糊 —— */
.slide { position: absolute; inset: 0; padding: 140px 170px 150px; display: flex; flex-direction: column; justify-content: center; gap: 30px;
  opacity: 0; visibility: hidden; transform: scale(1.06); filter: blur(14px);
  transition: opacity .7s var(--ease), transform 1.1s var(--ease), filter .8s var(--ease), visibility 0s .9s; }
.slide.active { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 0s; }
.slide.leave { opacity: 0; visibility: visible; transform: scale(.94); filter: blur(10px); }
.slide.leave.back { transform: scale(1.06); }
.center { align-items: center; text-align: center; }

/* —— 逐字入场：.st 元素被点亮(.shown)时，里面的 .c 依次浮现 —— */
.c { display: inline-block; white-space: pre; opacity: 0; transform: translateY(.42em) scale(.96); filter: blur(10px);
  transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease);
  transition-delay: calc(var(--d, 0ms) + var(--i) * var(--sp, 26ms)); }
.shown .c { opacity: 1; transform: none; filter: none; }
.nw { white-space: nowrap; }
.fade { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease) var(--d, 0ms), transform 1s var(--ease) var(--d, 0ms); }
.fade.shown { opacity: 1; transform: none; }
.rule { height: 5px; width: 260px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), transparent); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease) .2s; }
.center .rule { margin: 0 auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform-origin: center; }
.shown .rule { transform: none; }

/* —— 字号层级（投影仪上最小 26px）—— */
.eyebrow { font: 600 30px/1.2 Consolas, "QS Sans", monospace; letter-spacing: .32em; color: var(--gold); }
.k-mega { font-size: 300px; font-weight: 900; line-height: 1; letter-spacing: -.01em; }
.k-huge { font-size: 190px; font-weight: 900; line-height: 1.08; }
.k-big { font-size: 112px; font-weight: 900; line-height: 1.28; }
.k-mid { font-size: 72px; font-weight: 700; line-height: 1.4; }
.k-sm { font-size: 46px; font-weight: 500; line-height: 1.55; color: var(--dim); }
.serif { font-family: "QS Serif", "Noto Serif SC", serif; }
.hl { color: var(--amber); text-shadow: 0 0 .45em rgba(255, 207, 122, .4); }
.ac { color: var(--accent); text-shadow: 0 0 .45em rgba(127, 243, 230, .35); }
.dim { color: var(--dim); }
.red { color: var(--rose); text-shadow: 0 0 .45em rgba(255, 107, 90, .4); }
.src { position: absolute; left: 170px; bottom: 56px; font-size: 30px; color: #d3e3e0; letter-spacing: .03em; }
.center .src { left: 0; right: 0; }
.qmark { position: absolute; left: 110px; top: 30px; font: 900 460px/1 "QS Serif", serif; color: rgba(233, 184, 102, .13); }
.secnum { position: absolute; right: 90px; bottom: -40px; font: 900 700px/1 "QS Sans", sans-serif; color: transparent; -webkit-text-stroke: 3px rgba(233, 184, 102, .22); }

/* —— 组件 —— */
.tone-red { --accent: var(--rose); }
.row { display: flex; gap: 60px; align-items: stretch; justify-content: center; }
.num { font-variant-numeric: tabular-nums; }
.stat .k-mega { display: flex; align-items: baseline; gap: 20px; }
.stat .unit { font-size: 130px; color: var(--amber); font-weight: 700; }
.card { flex: 1; border-radius: 28px; padding: 54px 50px; background: linear-gradient(160deg, rgba(47,208,192,.14), rgba(47,208,192,.03)); border: 2px solid rgba(127,243,230,.28); box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 0 60px rgba(47,208,192,.06); }
.card.hl { background: linear-gradient(160deg, rgba(255,207,122,.18), rgba(255,207,122,.03)); border-color: rgba(255,207,122,.45); }
.card.red { background: linear-gradient(160deg, rgba(255,107,90,.2), rgba(255,107,90,.03)); border-color: rgba(255,138,122,.5); }
.card.dim { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.card h3 { margin: 0 0 22px; font-size: 46px; font-weight: 700; }
.card .v { font-size: 130px; font-weight: 900; line-height: 1.1; }
.card p { margin: 18px 0 0; font-size: 36px; color: var(--dim); }
.card.hl .v { color: var(--amber); } .card.red .v { color: var(--rose); } .card.ac .v, .card:not(.hl):not(.red):not(.dim) .v { color: var(--cyan); } .card.dim .v { color: var(--dim); }
.caption { font-size: 58px; font-weight: 700; line-height: 1.4; }

/* 三列：1.0 / 2.0 / 3.0 */
.col { flex: 1; text-align: center; padding: 50px 30px; border-radius: 28px; border: 2px solid rgba(233,184,102,.25); background: rgba(4,22,26,.5); }
.col .ver { font: 700 60px Consolas, monospace; color: var(--gold); }
.col .name { font-size: 120px; font-weight: 900; margin: 18px 0; }
.col p { font-size: 40px; color: var(--dim); margin: 0; line-height: 1.5; }
.col.top { border-color: rgba(127,243,230,.6); box-shadow: 0 0 80px rgba(47,208,192,.25); } .col.top .name { color: var(--cyan); } .col.top .ver { color: var(--amber); }

/* 横条 */
.bars { display: flex; flex-direction: column; gap: 46px; }
.bar { display: grid; grid-template-columns: 380px 1fr; align-items: center; gap: 40px; font-size: 48px; font-weight: 700; }
.bar i { display: block; height: 96px; border-radius: 14px; width: calc(var(--w) * 100%); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) var(--d, 0ms); background: rgba(255,255,255,.3); }
.shown .bar i, .bar.shown i { transform: none; }
.bar.ac i { background: linear-gradient(90deg, var(--teal), var(--cyan)); box-shadow: 0 0 50px rgba(47,208,192,.5); }
.bar.hl i { background: linear-gradient(90deg, var(--gold), var(--amber)); }

/* 点阵（950 个智能体）*/
.dots { display: grid; grid-template-columns: repeat(50, 22px); gap: 9px; justify-content: center; }
.dots b { width: 22px; height: 22px; border-radius: 50%; background: rgba(127,243,230,.12); transition: background .5s, box-shadow .5s, transform .5s; transition-delay: var(--d); }
.shown .dots b { background: var(--cyan); box-shadow: 0 0 12px rgba(127,243,230,.8); }
.shown .dots b.g { background: var(--amber); box-shadow: 0 0 14px rgba(255,207,122,.9); }

/* 三层沉淀 */
.layer { display: grid; grid-template-columns: 170px 380px 1fr; align-items: center; gap: 30px; padding: 34px 50px; border-radius: 22px; background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.1); font-size: 44px; }
.layer .ver { font: 700 54px Consolas, monospace; color: var(--gold); } .layer b { font-size: 72px; font-weight: 900; } .layer span { color: var(--dim); text-align: right; }
.layer.top { background: linear-gradient(90deg, rgba(47,208,192,.25), rgba(47,208,192,.05)); border-color: var(--cyan); box-shadow: 0 0 70px rgba(47,208,192,.3); } .layer.top b { color: var(--cyan); } .layer.top .ver { color: var(--amber); } .layer.top span { color: var(--cream); }

/* 第一法则 */
.law { display: grid; grid-template-columns: auto 6px auto; justify-content: center; gap: 70px; align-items: center; text-align: center; }
.law .k-huge { font-size: 170px; }
.law .sep { height: 300px; background: linear-gradient(transparent, var(--gold), transparent); }

/* 30 个智能体 */
.g30 { display: grid; grid-template-columns: repeat(10, 148px); gap: 20px; justify-content: center; }
.g30 div { height: 148px; border-radius: 20px; background: rgba(47,208,192,.16); border: 2px solid rgba(127,243,230,.3); display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 30px Consolas, monospace; color: var(--dim); transition: all .5s var(--ease); transition-delay: var(--d); }
.g30 div em { font-style: normal; font-size: 26px; margin-top: 6px; }
.g30.shown div.same { background: #b8382b; border-color: var(--rose); color: #fff; box-shadow: 0 0 30px rgba(255,107,90,.5); }

/* SVG 图表通用 */
svg text { font-family: "QS Sans", sans-serif; }
.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 2.4s var(--ease) var(--d, 0ms); }
.shown .draw, .draw.shown { stroke-dashoffset: 0; }

/* 封面 / 结尾 */
.title { font-size: 300px; font-weight: 900; line-height: 1; letter-spacing: .02em; }
.title .v3 { color: var(--amber); text-shadow: 0 0 .25em rgba(255,207,122,.55); }

/* —— 全局 UI：进度条 / 页码 / 黑屏 / 总览 —— */
#progress { position: fixed; left: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--teal), var(--amber)); transition: width .8s var(--ease); z-index: 3; opacity: .8; }
#pageno { position: fixed; right: 26px; bottom: 16px; font: 18px Consolas, monospace; color: rgba(185,208,204,.75); z-index: 3; }
#brand { position: absolute; left: 170px; top: 70px; font: 600 24px Consolas, "QS Sans", monospace; letter-spacing: .25em; color: rgba(240,200,130,.9); }
#black { position: fixed; inset: 0; background: #000; z-index: 9; opacity: 0; pointer-events: none; transition: opacity .6s; }
body.blank #black { opacity: 1; }
#overview { position: fixed; inset: 0; z-index: 8; background: rgba(2,12,14,.96); display: none; overflow: auto; padding: 40px; }
body.ov #overview { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; align-content: start; }
#overview button { all: unset; cursor: pointer; aspect-ratio: 16/9; border-radius: 10px; padding: 14px; background: #0a2a30; border: 1px solid #1d4a50; color: var(--cream); font-size: 15px; line-height: 1.4; overflow: hidden; }
#overview button.cur { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber); }
#overview button i { display: block; font: 12px Consolas, monospace; color: var(--gold); font-style: normal; margin-bottom: 6px; }
#help { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 7; background: rgba(4,22,26,.92); border: 1px solid #1d4a50; border-radius: 12px; padding: 14px 24px; font-size: 15px; color: var(--dim); transition: opacity .8s 3s; }
#help { animation: helpOut .8s 4s forwards; } @keyframes helpOut { to { opacity: 0; visibility: hidden; } }
body.started #help { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .slide, .c, .fade, .bar i, .draw { transition-duration: .01s !important; transition-delay: 0s !important; } }
.ratio { align-items: flex-end; gap: 220px; }
.bar-v { width: 240px; height: var(--hh); border-radius: 18px 18px 6px 6px; background: rgba(255,255,255,.28); transform: scaleY(0); transform-origin: bottom; transition: transform 1.5s var(--ease) .2s; }
.bar-v.hl { background: linear-gradient(var(--amber), var(--gold)); box-shadow: 0 0 80px rgba(255,207,122,.45); }
.shown .bar-v { transform: none; }
.ring .draw { transition-duration: 2.2s; transition-delay: .3s; }
.shown .ring .draw, .ring.shown .draw { stroke-dashoffset: var(--off); }
.pnode i { display: block; width: 46px; height: 46px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 12px rgba(127,243,230,.15), 0 0 60px var(--cyan); }
.pnode b { font-size: 72px; font-weight: 900; white-space: nowrap; }
.pcore { width: 260px; height: 260px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 54px; font-weight: 900; line-height: 1.2; color: var(--bg, #04161a); background: radial-gradient(circle, var(--amber), var(--gold)); box-shadow: 0 0 120px rgba(255,207,122,.6); }

/* —— 竖屏（手机 / 竖放 Pad）：舞台 1080 宽，内容改为纵向排布 —— */
.portrait .slide { padding: 200px 90px 220px; gap: 36px; }
.portrait #brand { left: 90px; top: 90px; font-size: 38px; }
.portrait .src, .portrait .curvebox ~ .src { position: static !important; margin-top: 20px; font-size: 38px; line-height: 1.45; text-align: center; }
.portrait .eyebrow { font-size: 42px; letter-spacing: .2em; line-height: 1.5; }
.portrait .title { font-size: 230px; }
.portrait .k-mega { font-size: 230px; }
.portrait .stat .unit { font-size: 100px; }
.portrait .k-huge { font-size: 140px; }
.portrait .k-big { font-size: 80px; }
.portrait .k-mid { font-size: 64px; }
.portrait .k-sm { font-size: 46px; }
.portrait .caption { font-size: 58px; }
.portrait .qmark { left: 40px; top: 120px; font-size: 380px; }
.portrait .secnum { right: 30px; bottom: 40px; font-size: 560px; }
.portrait .row { flex-direction: column; gap: 40px; }
.portrait .row.ratio { flex-direction: row; gap: 140px; }
.portrait .row.k-big { flex-direction: row; flex-wrap: wrap; gap: 20px 60px; justify-content: center; }
.portrait .card { padding: 44px 46px; } .portrait .card p { font-size: 42px; } .portrait .card .v { font-size: 120px; }
.portrait .col { padding: 34px 30px; } .portrait .col .name { font-size: 110px; margin: 6px 0; } .portrait .col .ver { font-size: 50px; } .portrait .col p { font-size: 40px; }
.portrait .col p br { display: none; }
.portrait .layer { grid-template-columns: 120px 1fr; gap: 10px 26px; padding: 34px 40px; }
.portrait .layer span { grid-column: 2; text-align: left; font-size: 40px; }
.portrait .bar { grid-template-columns: 1fr; gap: 16px; }
.portrait .dots { grid-template-columns: repeat(38, 16px); gap: 7px; }
.portrait .dots b { width: 16px; height: 16px; }
.portrait .g30 { grid-template-columns: repeat(5, 176px); gap: 18px; }
.portrait .g30 div { height: 116px; font-size: 0; } .portrait .g30 div em { font-size: 40px; font-weight: 700; }
.portrait .law { grid-template-columns: auto; gap: 40px; }
.portrait .law .k-huge { font-size: 170px; }
.portrait .law .sep { height: 6px; width: 420px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.portrait .curvebox { zoom: .62; } .portrait .curvebox text { font-size: 66px; font-weight: 700; }
.portrait .pentbox { zoom: .62; }
.portrait .ring { zoom: .85; }

/* —— 触屏：底部翻页按钮；关掉逐字模糊（手机 GPU 吃力）—— */
.navbtn { display: none; }
#help .tc { display: none; }
@media (hover: none) {
  #help .kb { display: none; } #help .tc { display: inline; }
  .c { filter: none !important; }
  .slide { filter: none !important; }
  .navbtn { display: flex; position: fixed; bottom: 18px; z-index: 6; width: 52px; height: 52px; border-radius: 50%; align-items: center; justify-content: center;
    background: rgba(4,22,26,.55); border: 1px solid rgba(127,243,230,.35); color: var(--cream); font-size: 24px; -webkit-tap-highlight-color: transparent; }
  #prevBtn { left: 18px; } #nextBtn { right: 18px; }
  #pageno { bottom: auto; top: 12px; right: 16px; }
  .src { bottom: 150px !important; }

  .portrait .secnum { bottom: 260px; }
  #overview { padding: 16px; }
  body.ov #overview { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}