/* ============================================================
   数字芯片物理设计 · 翻页版课件框架样式 deck.css
   配套 deck.js / demos.js / qa.js
   ============================================================ */
:root{
  --ink:#18212f; --muted:#647084; --line:#d9e0ea; --paper:#eef2f7;
  --panel:#ffffff; --brand:#245c8f; --brand-dark:#173d61; --accent:#b45f2a;
  --soft:#e9f1f8; --good:#2f7d4f; --warn:#b45f2a; --bad:#b23b3b;
  --slide-w:1240px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:#0d1b2a;
  color:var(--ink);
  font-family:"Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
  line-height:1.7;
  overflow:hidden;
}
a{color:inherit}
button{font-family:inherit}

/* ---------- 整体布局 ---------- */
.deck{display:flex;flex-direction:column;height:100vh;width:100vw}
.deck-top{
  flex:0 0 auto;display:flex;align-items:center;gap:16px;
  padding:8px 18px;background:rgba(23,61,97,.96);color:#fff;
  border-bottom:1px solid #0d2b47;backdrop-filter:blur(6px);z-index:20;
}
.deck-top .brand{font-weight:800;white-space:nowrap;font-size:15px}
.series-nav{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;margin-left:4px}
.series-nav a{padding:4px 9px;border-radius:6px;text-decoration:none;color:#cfe0ef;border:1px solid transparent}
.series-nav a:hover{background:rgba(255,255,255,.12)}
.series-nav a.active{background:#fff;color:var(--brand-dark);font-weight:800}
.deck-tools{margin-left:auto;display:flex;gap:6px}
.deck-tools button{
  background:rgba(255,255,255,.10);color:#eaf2fa;border:1px solid rgba(255,255,255,.18);
  border-radius:7px;padding:6px 11px;font-size:13px;cursor:pointer;
}
.deck-tools button:hover{background:rgba(255,255,255,.22)}

/* ---------- 幻灯片舞台 ---------- */
.slides{position:relative;flex:1 1 auto;overflow:hidden;background:var(--paper)}
.slide{
  position:absolute;inset:0;overflow:auto;
  padding:26px clamp(20px,4vw,60px) 40px;
  display:flex;flex-direction:column;justify-content:safe center;
  opacity:0;visibility:hidden;transform:translateX(40px) scale(.99);
  transition:opacity .38s ease, transform .38s ease;
  scroll-behavior:smooth;
}
.slide.active{opacity:1;visibility:visible;transform:none;z-index:2}
.slide.prev{transform:translateX(-40px) scale(.99)}
.slide-inner{max-width:var(--slide-w);margin:0 auto;width:100%}
/* 内容块自然填充：标题区 + 主体区，主体可在短页时居中、长页时顶对齐滚动 */
.slide-inner>h1:first-child,.slide-inner>h2:first-child{margin-top:0}

/* 进度 / 底栏 */
.deck-bottom{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:7px 18px;background:#fff;border-top:1px solid var(--line);z-index:20;
}
.deck-bottom button.nav{
  width:38px;height:34px;border-radius:8px;border:1px solid var(--line);
  background:#fff;color:var(--brand-dark);font-size:20px;line-height:1;cursor:pointer;
}
.deck-bottom button.nav:hover{background:var(--soft)}
.progress{flex:1 1 auto;height:6px;background:#e3e9f1;border-radius:99px;overflow:hidden}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .3s ease}
.counter{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.hint-keys{font-size:12px;color:#9aa6b5;white-space:nowrap}

/* ---------- 幻灯片内的版式组件 ---------- */
.slide h1{font-size:clamp(26px,3.4vw,42px);color:var(--brand-dark);margin:.1em 0 .35em;line-height:1.18}
.slide h2{font-size:clamp(22px,2.6vw,30px);color:var(--brand-dark);margin:0 0 .5em;line-height:1.25}
.slide h3{font-size:20px;color:var(--brand-dark);margin:18px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.slide h4{font-size:16px;color:var(--brand-dark);margin:16px 0 8px}
.slide p{margin:10px 0}
.eyebrow{color:var(--accent);font-weight:800;letter-spacing:.04em;margin:0 0 6px}
.lead{font-size:18px;color:#33465c}
.kicker{display:inline-block;font-size:13px;color:#fff;background:var(--brand);padding:3px 10px;border-radius:99px;font-weight:700}

/* 封面 */
.cover{display:flex;flex-direction:column;justify-content:center;min-height:74vh}
.cover h1{font-size:clamp(34px,5vw,60px)}
.cover .sub{font-size:20px;color:#33465c;max-width:820px}
.cover .meta{margin-top:22px;color:var(--muted);font-size:15px}

/* 两栏 / 网格 */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.cols>*{min-width:0}
.cols.text-fig{grid-template-columns:1.02fr .98fr}
.cols.fig-text{grid-template-columns:.98fr 1.02fr}
.cols figure.fig{margin:0}
.cols>div>*:first-child{margin-top:0}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:stretch}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.grid-2>*,.grid-3>*{min-width:0}
@media(max-width:820px){.cols,.cols.text-fig,.cols.fig-text,.grid-2,.grid-3{grid-template-columns:1fr}}

/* 卡片/提示等（沿用 v1 视觉语言，slide 内更紧凑） */
.card{border:1px solid var(--line);border-radius:10px;background:#fbfdff;padding:14px 16px}
.card h4{margin:0 0 6px}
.note{border:1px solid var(--line);border-left:4px solid var(--accent);background:#fff8f3;color:#46382c;border-radius:8px;padding:12px 14px;margin:14px 0}
.note.good{border-left-color:var(--good);background:#f3faf5;color:#244e36}
.note.info{border-left-color:var(--brand);background:#f1f7fc;color:#23384d}
.concept-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:13px;margin:14px 0}
.concept-grid>div{border:1px solid var(--line);border-radius:9px;background:#fbfdff;padding:13px 15px}
.concept-grid h4{margin:0 0 6px;color:var(--brand-dark)}
.method-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px;margin:14px 0}
.method-flow>div{border:1px solid var(--line);border-radius:9px;background:#fbfdff;padding:12px 14px}
.method-flow strong{display:block;margin-bottom:5px;color:var(--brand-dark)}
.method-flow span{display:block;color:#42526a;font-size:13.5px}
.formula{margin:14px 0;padding:13px 15px;border:1px solid #d7e5c6;border-left:4px solid #6f9448;border-radius:9px;background:#f9fbf6}
.formula strong{display:block;margin-bottom:6px;color:#365c22}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.pill{padding:5px 12px;border-radius:99px;background:var(--soft);color:var(--brand-dark);font-size:13px;font-weight:700;border:1px solid #d2e3f1}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:14px 0}
.kpi{border:1px solid var(--line);border-radius:10px;background:#fff;padding:13px;text-align:center}
.kpi strong{display:block;font-size:24px;color:var(--brand-dark)}
.kpi span{color:var(--muted);font-size:13px}

/* 表格 */
.table-wrap{overflow:auto;margin:14px 0;border-radius:8px}
table{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
th,td{border:1px solid var(--line);padding:8px 11px;vertical-align:top;text-align:left}
th{background:#eef4fa;color:var(--brand-dark);font-weight:800}

/* 代码 */
.codeblock{margin:14px 0;background:#0f2438;color:#e7eef6;border-radius:9px;padding:13px 15px;overflow:auto}
.codeblock pre{margin:0;font-family:Consolas,"SF Mono",monospace;font-size:13px;line-height:1.55;white-space:pre}
.codeblock .cmt{color:#7fa8c9}.codeblock .kw{color:#9ad0ff}

/* ---------- 图片（按视觉需要约束尺寸） ---------- */
figure.fig{margin:12px 0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 1px 4px rgba(20,40,70,.06)}
figure.fig img{width:100%;max-height:38vh;height:auto;display:block;margin:0 auto;border-radius:6px;object-fit:contain;background:#f4f8fc}
figure.fig.sm img{max-height:24vh}
figure.fig.lg img{max-height:52vh}
figure.fig figcaption{margin-top:7px;color:#42526a;font-size:12.5px;text-align:center;width:100%}
figure.fig .src{display:block;color:#9aa6b5;font-size:11px;margin-top:2px}
.src{display:inline-block;color:#8a97a8;font-size:11.5px;margin-top:6px;font-style:italic}
.fig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0;align-items:stretch}
.fig-grid figure.fig{margin:0;height:100%}
.fig-grid figure.fig img{max-height:28vh}
/* 列内配图：比独立图更克制，避免压住文字 */
.cols figure.fig img{max-height:34vh}
.cols.text-fig figure.fig img,.cols.fig-text figure.fig img{max-height:36vh}
/* 独立整幅图：限制最大宽高并居中，避免小图被拉成大片留白 */
.slide-inner>figure.fig{max-width:780px;margin-left:auto;margin-right:auto}
.slide-inner>figure.fig.lg{max-width:960px}
.slide-inner>figure.fig.lg img{max-height:56vh}
.slide-inner>figure.fig.sm{max-width:560px}

/* ---------- 自测 ---------- */
.self-check{margin:16px 0;border:1px solid #d7e5c6;background:#f9fbf6;border-radius:9px;padding:13px 15px}
.self-check h4{margin:0 0 6px;color:var(--brand-dark)}
.self-check ol{margin:6px 0 0;padding-left:20px}

/* ---------- 总览 overview ---------- */
.overview{position:fixed;inset:0;background:rgba(13,27,42,.96);z-index:60;display:none;padding:24px;overflow:auto}
.overview.open{display:block}
.overview h3{color:#fff;margin:0 0 16px;font-size:18px}
.ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.ov-card{background:#fff;border-radius:10px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:transform .15s}
.ov-card:hover{transform:translateY(-3px)}
.ov-card.current{border-color:var(--accent)}
.ov-thumb{height:130px;padding:10px;overflow:hidden;font-size:9px;line-height:1.25;color:#33465c;background:#f6f9fc;position:relative}
.ov-thumb .num{position:absolute;top:6px;right:8px;font-size:11px;font-weight:800;color:var(--brand)}
.ov-cap{padding:8px 10px;font-size:12.5px;color:var(--brand-dark);font-weight:700;border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 目录 TOC ---------- */
.toc-panel{position:fixed;top:0;right:0;height:100vh;width:320px;max-width:86vw;background:#fff;z-index:55;
  box-shadow:-8px 0 28px rgba(0,0,0,.25);transform:translateX(105%);transition:transform .3s;overflow:auto;padding:18px}
.toc-panel.open{transform:none}
.toc-panel h3{margin:0 0 12px;color:var(--brand-dark)}
.toc-panel ol{margin:0;padding-left:0;list-style:none;counter-reset:t}
.toc-panel li{counter-increment:t;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:14px;color:#33465c;border:1px solid transparent}
.toc-panel li::before{content:counter(t)"  ";color:var(--brand);font-weight:800}
.toc-panel li:hover{background:var(--soft)}
.toc-panel li.current{background:#eef4fa;color:var(--brand-dark);font-weight:700;border-color:#d2e3f1}

/* ---------- 演示动画通用 ---------- */
.demo{border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px;margin:14px 0}
.demo .demo-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.demo .demo-title{font-weight:800;color:var(--brand-dark);font-size:14px}
.demo .demo-ctrl{margin-left:auto;display:flex;gap:6px}
.demo .demo-ctrl button{border:1px solid var(--line);background:#f6f9fc;border-radius:7px;padding:5px 11px;font-size:12.5px;cursor:pointer;color:var(--brand-dark)}
.demo .demo-ctrl button:hover{background:var(--soft)}
.demo .demo-stage{width:100%;overflow:hidden;border-radius:8px;background:#fbfdff}
.demo svg{display:block;width:100%;height:auto}
.demo .demo-read{font-size:13px;color:#42526a;margin-top:8px;min-height:1.4em}
.demo .demo-read b{color:var(--brand-dark)}

/* ---------- QA 悬浮组件 ---------- */
#qa-fab{position:fixed;right:20px;bottom:74px;z-index:70;display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border:none;cursor:pointer;
  padding:11px 16px;border-radius:99px;box-shadow:0 8px 22px rgba(13,61,97,.4);font-size:14px;font-weight:700}
#qa-fab:hover{filter:brightness(1.08)}
#qa-fab .dot{width:8px;height:8px;border-radius:50%;background:#7CFFB2;box-shadow:0 0 0 0 rgba(124,255,178,.7);animation:qapulse 2s infinite}
@keyframes qapulse{0%{box-shadow:0 0 0 0 rgba(124,255,178,.6)}70%{box-shadow:0 0 0 8px rgba(124,255,178,0)}100%{box-shadow:0 0 0 0 rgba(124,255,178,0)}}
#qa-panel{position:fixed;right:20px;bottom:74px;z-index:71;width:390px;max-width:92vw;height:560px;max-height:78vh;
  background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.32);display:none;flex-direction:column;overflow:hidden}
#qa-panel.open{display:flex}
.qa-head{background:var(--brand-dark);color:#fff;padding:11px 14px;display:flex;align-items:center;gap:9px}
.qa-head .t{font-weight:800;font-size:15px}
.qa-head .mode{font-size:11px;background:rgba(255,255,255,.18);padding:2px 8px;border-radius:99px}
.qa-head .sp{margin-left:auto;display:flex;gap:6px}
.qa-head button{background:rgba(255,255,255,.14);border:none;color:#fff;border-radius:7px;width:28px;height:28px;cursor:pointer;font-size:14px}
.qa-head button:hover{background:rgba(255,255,255,.28)}
.qa-body{flex:1 1 auto;overflow:auto;padding:14px;background:#f6f9fc}
.qa-msg{margin:10px 0;display:flex;gap:8px}
.qa-msg .av{width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:13px;color:#fff}
.qa-msg.bot .av{background:var(--brand)}
.qa-msg.me{flex-direction:row-reverse}
.qa-msg.me .av{background:var(--accent)}
.qa-bubble{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13.5px;max-width:84%;color:#26384d}
.qa-msg.me .qa-bubble{background:var(--brand);color:#fff;border-color:var(--brand)}
.qa-bubble .ref{display:inline-block;margin:5px 5px 0 0;font-size:12px;background:var(--soft);color:var(--brand-dark);
  border:1px solid #d2e3f1;border-radius:7px;padding:3px 9px;cursor:pointer}
.qa-bubble .ref:hover{background:#dbe9f6}
.qa-foot{flex:0 0 auto;border-top:1px solid var(--line);padding:9px;background:#fff}
.qa-suggest{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.qa-suggest button{font-size:12px;border:1px solid var(--line);background:#f6f9fc;border-radius:99px;padding:4px 10px;cursor:pointer;color:#33465c}
.qa-suggest button:hover{background:var(--soft)}
.qa-input{display:flex;gap:8px}
.qa-input textarea{flex:1;resize:none;height:40px;border:1px solid var(--line);border-radius:9px;padding:9px;font-family:inherit;font-size:13.5px}
.qa-input button{background:var(--brand);color:#fff;border:none;border-radius:9px;padding:0 16px;cursor:pointer;font-weight:700}
.qa-input button:hover{background:var(--brand-dark)}
.qa-settings{position:absolute;inset:0;background:#fff;display:none;flex-direction:column;z-index:5}
.qa-settings.open{display:flex}
.qa-settings .sbody{padding:16px;overflow:auto;font-size:13.5px}
.qa-settings label{display:block;margin:10px 0 4px;font-weight:700;color:var(--brand-dark)}
.qa-settings input,.qa-settings select{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px;font-size:13px}
.qa-settings .row{display:flex;gap:8px;margin-top:14px}
.qa-settings .row button{flex:1;border-radius:8px;padding:9px;border:1px solid var(--line);cursor:pointer;font-weight:700}
.qa-settings .row .save{background:var(--brand);color:#fff;border-color:var(--brand)}
.qa-typing{font-size:12px;color:var(--muted);padding:4px 4px 0}

@media(max-width:620px){
  .deck-top{gap:8px;flex-wrap:wrap}
  .series-nav{order:3;width:100%}
  #qa-panel{right:8px;left:8px;width:auto}
}