/* ============================================================================
   TiDB 内核解剖室 · 信息图海报系列 · 共享视觉语法  (poster.css)
   ----------------------------------------------------------------------------
   为什么要有这个文件：
     把「一套视觉语言」变成可执行的东西，而不是靠每张图各画各的。
     系列海报的可信度来自统一 —— 观众刷到第二张时就该认出是第一张的兄弟。

   画布：1080 x 1440（3:4 竖版，帖子里顺眼、手机上不小）
   基调：沿用站点的暗色解剖台（#080B11 + 青蓝强调），但把信息密度降下来、
         把字号提上去 —— 网页是"读"的，海报是"扫一眼就记住"的。
   ========================================================================= */

:root{
  --bg:#080B11;
  --panel:#121A29;
  --line:#22304A;
  --line2:#2E3D55;
  --tx:#EDF3FC;
  --tx2:#8FA0BC;
  --tx3:#5E6E88;
  --blue:#4C8DFF;
  --cyan:#22D3EE;
  --green:#2FBF71;
  --amber:#F0B429;
  --purple:#A78BFA;
  --mono:"Consolas","SF Mono",Menlo,"DejaVu Sans Mono",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}

/* 导出画布规格：1080 x 1440 —— dev/shoot-posters.py 用该视口做 headless 逐像素截图。
   注意：这是"截图视口"的规格，不是"网页"的规格 —— 浏览模式见下方舞台层。 */
html,body{width:1080px;height:1440px;overflow:hidden}

/* ---- 舞台层（浏览模式）----------------------------------------------------
   为什么加：直接把它当网页打开时，只要视口不是恰好 1080x1440，就会
   ① 内容固定 1080 宽靠左，宽屏右侧空一大截；② overflow:hidden 把画布
   下方裁掉且滚不动 —— 海报永远看不全。
   处理：默认把页面变成"舞台"—— 海报居中、四周留白、可滚动看全图；
   再用 poster-fit.js 把舞台按视口等比缩放（整张一屏可见，点击切 1:1 原尺寸）；
   并用媒体查询把"恰好 1080x1440"的视口还原成精确导出画布，
   保证导出路径（shoot-posters.py）逐像素不受影响。 */
html{width:auto;height:auto;overflow:auto;
  display:flex;justify-content:center;align-items:flex-start;
  background:radial-gradient(1100px 640px at 50% -6%, #101A2C 0%, #05070B 60%);
  padding:28px 0 44px}
body{flex:none;box-shadow:0 0 0 1px rgba(90,114,152,.34),0 28px 90px rgba(0,0,0,.62)}
@media (width:1080px) and (height:1440px){
  html{width:1080px;height:1440px;overflow:hidden;display:block;padding:0;background:var(--bg)}
  /* zoom/cursor 兜底：poster-fit.js 的浏览缩放不得进入导出画布
     （即便脚本异常残留内联样式，!important 也会赢过它） */
  body{box-shadow:none;zoom:1 !important;cursor:auto !important}
}
/* 舞台浮动入口（仅浏览模式可见）：返回系列页 / 下载 2x 高清图 */
.vc{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;gap:10px}
.vc a{display:inline-flex;align-items:center;font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:13px;letter-spacing:.2px;color:#BBD4FF;text-decoration:none;
  border:1px solid rgba(90,114,152,.5);border-radius:999px;padding:8px 15px;
  background:rgba(15,21,34,.80);
  -webkit-backdrop-filter:saturate(1.35) blur(12px);backdrop-filter:saturate(1.35) blur(12px);
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  opacity:.85;transition:opacity .16s,border-color .16s,color .16s}
.vc a:hover{opacity:1;border-color:#4C8DFF;color:#DCE9FF}
.vc a.dl{color:#9BE3BC;border-color:rgba(46,107,76,.6)}
.vc a.dl:hover{border-color:#2FBF71;color:#C8F0DA}
/* 注意：此块必须排在 .vc 基础规则之后 —— display:none 与 display:flex 同特异性，
   靠层叠顺序决定胜负；此前写在前面被覆盖，导出图里也带上了按钮。 */
@media (width:1080px) and (height:1440px){
  .vc{display:none}
}

body{
  background:var(--bg);
  color:var(--tx);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

/* ---- 背景层：光晕 + 细网格 ---------------------------------------------- */
.bg,.grid{position:absolute;inset:0;pointer-events:none}
.bg{
  background:
    radial-gradient(760px 460px at 12% -6%, rgba(76,141,255,.20) 0%, transparent 62%),
    radial-gradient(680px 420px at 96% 104%, rgba(34,211,238,.13) 0%, transparent 64%),
    radial-gradient(520px 320px at 88% 8%, rgba(167,139,250,.09) 0%, transparent 66%);
}
.grid{
  background-image:
    linear-gradient(rgba(46,61,85,.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,61,85,.34) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(900px 700px at 50% 42%, #000 12%, transparent 88%);
  -webkit-mask-image:radial-gradient(900px 700px at 50% 42%, #000 12%, transparent 88%);
}
.scan{position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.5),transparent)}

/* ---- 版面骨架 ----------------------------------------------------------- */
.sheet{position:relative;height:100%;display:flex;flex-direction:column;
  padding:56px 68px 48px;gap:0}

.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-bottom:20px;border-bottom:1px solid var(--line);flex:none}
.brand{font-size:16px;font-weight:600;letter-spacing:.6px;color:var(--tx)}
.brand i{font-style:normal;color:var(--cyan)}
.event{font-family:var(--mono);font-size:12px;letter-spacing:.6px;color:var(--tx3)}

/* ---- 标题区 ------------------------------------------------------------- */
.hero{position:relative;padding:44px 0 30px;flex:none}
.hero .no{position:absolute;right:-6px;top:14px;font-family:var(--mono);
  font-size:150px;font-weight:700;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px rgba(76,141,255,.26);letter-spacing:-6px}
.tag{display:inline-block;font-family:var(--mono);font-size:12.5px;letter-spacing:1.2px;
  color:#8FE9F8;border:1px solid #1E5C6B;background:rgba(34,211,238,.10);
  border-radius:7px;padding:6px 12px;margin-bottom:22px}
h1{font-size:66px;font-weight:700;line-height:1.16;letter-spacing:.5px;position:relative;z-index:1}
h1 em{font-style:normal;background:linear-gradient(96deg,#7FB2FF,#4C8DFF 52%,#22D3EE);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:22px;line-height:1.62;color:var(--tx2);margin-top:20px;max-width:760px;
  position:relative;z-index:1}
.sub b{color:var(--tx);font-weight:600}

/* ---- 图示区（占剩余高度，SVG 自适应） ----------------------------------- */
.art{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:6px 0 22px}
.art svg{width:100%;height:100%;display:block}

/* ---- 要点区 ------------------------------------------------------------- */
.pts{flex:none;display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.pt{display:flex;gap:16px;align-items:flex-start;background:linear-gradient(180deg,
  rgba(18,26,41,.92),rgba(13,19,30,.92));border:1px solid var(--line);
  border-radius:12px;padding:15px 18px}
.pt .k{flex:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.6px;
  color:#9FC0F0;border:1px solid #35619F;background:rgba(76,141,255,.13);
  border-radius:6px;padding:4px 9px;margin-top:3px;white-space:nowrap}
.pt .k.g{color:#9BE3BC;border-color:#2E6B4C;background:rgba(47,191,113,.12)}
.pt .k.a{color:#E8C778;border-color:#6E5320;background:rgba(240,180,41,.12)}
.pt .t{font-size:19px;line-height:1.6;color:var(--tx2)}
.pt .t b{color:var(--tx);font-weight:600}
.pt .t code{font-family:var(--mono);font-size:16.5px;color:#9FC0F0;
  background:#182234;border:1px solid var(--line2);border-radius:5px;padding:1px 7px}

/* ---- 核验角标（本系列的签名） ------------------------------------------- */
.verify{flex:none;border-left:3px solid #6E5320;background:rgba(240,180,41,.07);
  border-radius:0 11px 11px 0;padding:14px 18px;margin-bottom:20px}
.verify .vh{font-family:var(--mono);font-size:11.5px;letter-spacing:.9px;color:#E8C778;
  margin-bottom:6px}
.verify .vt{font-size:16.5px;line-height:1.66;color:#DFC48A}
.verify .vt b{color:#F2D9A0;font-weight:600}

.foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12px;color:var(--tx3);letter-spacing:.4px}
.foot b{color:var(--tx2);font-weight:500}

/* ---- SVG 通用元素（海报内图形复用） ------------------------------------- */
.nlab{font-family:"Consolas",monospace;font-size:13px;letter-spacing:.5px}
.nlabb{font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px}
.tick{font-family:"Consolas",monospace;font-size:12px;fill:#5E6E88;letter-spacing:.4px}