/* InspectHub 藍圖視覺覆蓋層（DESIGN.md §7 blog 落地）——掛在各頁 inline style 之後，只調外觀不動內容 */
/* 亮色 token 值＝改版前的寫死值（亮色外觀不變）；暗色照 DESIGN.md §1 暗欄，規則本體一律引用變數 */
:root{
  color-scheme:light dark;
  --bp-ink:#16335E;--bp-dim:#7A8CA8;
  --bp-paper:#F9FAFD;--bp-grid:rgba(211,222,240,.5);
  --bp-sheet:#fff;--bp-sheet-line:rgba(22,51,94,.18);
  --bp-line:rgba(22,51,94,.22);--bp-line-hover:rgba(22,51,94,.55);
  --bp-title:#101D33;--bp-nav:#fffffff2;
  --bp-shadow:0 1px 2px rgba(16,29,51,.04),0 12px 34px rgba(16,29,51,.06);
  --bp-shadow-hover:0 12px 34px rgba(16,29,51,.09);
  --bp-cta:linear-gradient(160deg,#0E1A2B,#132743)
}
@media(prefers-color-scheme:dark){:root{
  --bp-ink:#8FB0F0;--bp-dim:#6B7E9C;
  --bp-paper:#0A121E;--bp-grid:#182842;
  --bp-sheet:#111E31;--bp-sheet-line:color-mix(in srgb,var(--bp-ink) 24%,transparent);
  --bp-line:color-mix(in srgb,var(--bp-ink) 26%,transparent);--bp-line-hover:color-mix(in srgb,var(--bp-ink) 55%,transparent);
  --bp-title:#EAF0FA;--bp-nav:rgba(10,18,30,.92);
  --bp-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 40px rgba(0,0,0,.4);
  --bp-shadow-hover:0 14px 40px rgba(0,0,0,.45);
  --bp-cta:linear-gradient(160deg,#14263D,#1B3355);
  /* 各頁 inline style 的亮色變數改指暗色（值同 index.html 暗色 palette），p/strong/li/.qa/.ft/連結自動跟上 */
  --bg:#0A121E;--ink:#EAF0FA;--body:#B9C6DC;--muted:#93A3BE;--line:#233850;
  --navy:#8FB0F0;--navy-deep:#EAF0FA;--amber:#F0AE49
}}
body{background-color:var(--bp-paper);background-image:linear-gradient(var(--bp-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bp-grid) 1px,transparent 1px);background-size:28px 28px}
.nav{background:var(--bp-nav)}
.nav .mk{background:none;border:1.7px solid var(--bp-ink);color:var(--bp-ink);border-radius:7px;font-family:Consolas,monospace}
.wrap{background:var(--bp-sheet);border:1px solid var(--bp-sheet-line);border-radius:12px;margin-top:26px;margin-bottom:10px;padding:34px 30px 44px;box-shadow:var(--bp-shadow)}
@media(max-width:720px){.wrap{margin-top:14px;padding:26px 20px 34px;border-radius:0;border-left:none;border-right:none}}
.crumb{font-family:Consolas,monospace;font-size:.74rem;letter-spacing:1.5px;color:var(--bp-dim)}
h1{font-family:"Noto Serif TC","PMingLiU",serif;font-weight:900;letter-spacing:.5px;color:var(--bp-title)}
h2{font-family:"Noto Serif TC","PMingLiU",serif;font-weight:900;letter-spacing:.5px}
.lead{background:var(--bp-sheet);border:1px solid var(--bp-line);border-left:3px solid var(--amber);border-radius:10px}
.rel{background:var(--bp-sheet);border:1px solid var(--bp-line);border-radius:10px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.rel:hover{transform:translateY(-3px);border-color:var(--bp-line-hover);box-shadow:var(--bp-shadow-hover)}
.rel span{font-family:Consolas,monospace;color:var(--bp-ink);letter-spacing:2px}
/* .cta 是夜間藍圖面板，亮暗兩色都是深底，內部格網／內框沿用同一組淺色 */
.cta{position:relative;overflow:hidden;background:var(--bp-cta);border-radius:14px}
.cta::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
.cta::after{content:"";position:absolute;inset:10px;border:1px solid rgba(143,176,240,.28);border-radius:10px;pointer-events:none}
.cta h3,.cta p,.cta a{position:relative;z-index:1}
.ft{font-size:.8rem}
/* 暗色補正：--bp-dim 在深底上小字對比不足，往 ink 混亮（DESIGN.md §1 衍生色規則） */
@media(prefers-color-scheme:dark){
  .crumb{color:color-mix(in srgb,var(--bp-dim) 60%,var(--bp-ink) 40%)}
}