/* ============================================================
   VAULTBREAKERS GUIDE — site skin v1 (2026-10-11)
   设计令牌抽自官方美术（见 DESIGN-BRIEF.md）：
   深林青底 #0b2430 / 钢板蓝灰面板 / 魔法青 #62b7c7 / 暖金 #e0a44b / 苔绿 #6d7350。
   字体：Cinzel（display）+ Manrope（正文），本地自托管。
   ============================================================ */
@font-face{font-family:Cinzel;font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/cinzel-700.woff2) format("woff2")}
@font-face{font-family:Cinzel;font-style:normal;font-weight:900;font-display:swap;src:url(assets/fonts/cinzel-900.woff2) format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/manrope-400.woff2) format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/manrope-600.woff2) format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/manrope-800.woff2) format("woff2")}

:root{
  --bg:#0b2430;
  --bg-deep:#071821;
  --panel:#101f28;
  --panel-2:#16292f;
  --panel-3:#1d3540;
  --ink:#e9f2ee;
  --muted:#9db3ae;
  --accent:#62b7c7;        /* 魔法青 */
  --accent-2:#e0a44b;      /* 暖金（地牢灯窗/掉落） */
  --moss:#6d7350;          /* 苔原橄榄 */
  --danger:#c65a44;        /* 敌意红（血条语义） */
  --good:#7fb069;
  --line:rgba(98,183,199,.28);
  --line-soft:rgba(98,183,199,.14);
  --hard:#04121a;
  --radius:12px;
  --radius-sm:8px;
  --maxw:1200px;
  --font:Manrope,system-ui,"Segoe UI",Roboto,sans-serif;
  --display:Cinzel,"Times New Roman",serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;color:var(--ink);font:16px/1.7 var(--font);
  background-color:var(--bg);
  background-image:
    radial-gradient(900px 420px at 12% -4%, rgba(98,183,199,.14), transparent 62%),
    radial-gradient(760px 420px at 88% 8%, rgba(109,115,80,.16), transparent 60%),
    radial-gradient(1000px 560px at 50% 108%, rgba(224,164,75,.07), transparent 66%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;color:#8fd3df}
a:focus-visible{outline:2px dashed var(--accent-2);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:var(--panel-3);padding:8px 12px;z-index:60;border-radius:6px}
.muted{color:var(--muted)}

/* ---------- top ribbon（官方动态 banner） ---------- */
.ribbon{background:linear-gradient(90deg,#e0a44b,#f2cd8b 55%,#e0a44b);color:#132015;font-weight:800;font-size:13px;letter-spacing:.05em;padding:8px 0;border-bottom:2px solid var(--hard)}
.ribbon .wrap::before{content:"◆ ";color:#3c2c10}

/* ---------- topbar / nav ---------- */
.topbar{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,rgba(13,32,41,.97),rgba(10,26,34,.97));border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.topbar .bar{display:flex;align-items:center;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--display);font-weight:900;letter-spacing:.04em;font-size:19px;text-transform:uppercase}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand img{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);box-shadow:0 0 12px rgba(98,183,199,.35)}
.nav{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav > ul{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.nav > ul > li{position:relative}
.nav > ul > li > a{display:inline-block;color:var(--ink);font-weight:600;font-size:14.5px;padding:8px 10px;border-radius:8px}
.nav > ul > li > a:hover{background:var(--panel-2);text-decoration:none}
.nav li.has-kids > a::after{content:" ▾";opacity:.7;color:var(--accent)}
.nav .active > a{color:var(--accent);background:var(--panel-2)}
.nav .kids{display:none;position:absolute;top:100%;left:0;min-width:230px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 30px rgba(0,0,0,.5),0 0 0 1px rgba(4,18,26,.6) inset;padding:8px;margin:0;list-style:none;z-index:50}
.nav .kids li a{display:block;padding:7px 10px;border-radius:7px;color:var(--ink);font-size:14px;font-weight:600}
.nav .kids li a:hover{background:var(--panel-3);color:#9bd7e2;text-decoration:none}
/* 下拉死区桥：面板与父项之间禁止留不可达空隙（用户多次打回的血线，勿删） */
.nav li.has-kids::after{content:"";position:absolute;left:-8px;right:-8px;top:100%;height:10px;z-index:39}
.nav li.has-kids:hover .kids,.nav li.has-kids:focus-within .kids{display:block}
.nav .cta{border:1px solid var(--accent);padding:8px 14px;border-radius:9px;font-weight:800;color:#06181f;background:linear-gradient(180deg,#7cc9d8,#4ea6b8);box-shadow:0 3px 0 var(--hard)}
.nav .cta:hover{filter:brightness(1.08);text-decoration:none;color:#06181f}

/* ---------- hero ---------- */
.hero{position:relative;background-color:var(--bg-deep);border-bottom:1px solid var(--line);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--hero);background-size:cover;background-position:center 30%;opacity:.96}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(5,17,24,.95) 0%,rgba(6,22,30,.82) 30%,rgba(8,28,38,.45) 56%,rgba(9,31,42,.06) 82%)}
.hero-in{position:relative;z-index:2;min-height:470px;display:flex;flex-direction:column;justify-content:flex-end;padding:64px 20px 54px;max-width:var(--maxw);margin:0 auto}
.hero .eyebrow{display:inline-block;margin:0 0 14px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--accent-2);border:1px solid rgba(224,164,75,.5);background:rgba(8,24,32,.75);padding:5px 12px;border-radius:999px;width:max-content}
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(44px,8.6vw,92px);line-height:.98;margin:0 0 14px;letter-spacing:.015em;text-transform:uppercase;text-shadow:0 2px 0 var(--hard),0 10px 34px rgba(0,0,0,.6)}
.h1-line2{display:block;font-size:.42em;letter-spacing:.34em;color:var(--accent);margin-top:10px;text-shadow:0 0 18px rgba(98,183,199,.45)}
.hero .lead{color:#cfe3de;font-size:19px;max-width:56ch;margin:0;text-shadow:0 1px 8px rgba(0,0,0,.65)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-block;background:linear-gradient(180deg,#e8b662,#d99a3f);color:#1d1503;border:1px solid #8a5f1d;padding:11px 18px;font-weight:800;font-size:15px;border-radius:9px;box-shadow:0 4px 0 var(--hard);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn:hover{filter:brightness(1.07);text-decoration:none;color:#1d1503}
.btn.ghost{background:rgba(9,28,37,.78);color:var(--ink);border:1px solid var(--line);box-shadow:0 4px 0 var(--hard)}
.btn.ghost:hover{color:#fff;border-color:var(--accent)}
/* hero 贴纸（唯一旋转贴纸件） */
.hero-in::after{content:"DEMO LIVE";position:absolute;right:26px;top:64px;transform:rotate(8deg);background:#c65a44;color:#fff;font-weight:800;font-size:12px;letter-spacing:.16em;padding:8px 14px;border-radius:6px;border:2px solid var(--hard);box-shadow:4px 4px 0 rgba(0,0,0,.45);z-index:3}

/* ---------- facts strip（HUD 读数条） ---------- */
.facts-strip{background:linear-gradient(180deg,var(--panel),var(--bg-deep));border-bottom:1px solid var(--line)}
.facts{display:flex;flex-wrap:wrap;gap:10px;padding:16px 20px}
.fact{flex:1 1 150px;background:rgba(22,41,47,.72);border:1px solid var(--line-soft);border-radius:10px;padding:9px 13px;position:relative}
.fact::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--accent),transparent)}
.fact-k{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:800}
.fact-v{display:block;font-weight:800;font-size:17.5px;line-height:1.3;color:#dff0ea;margin-top:2px}
.fact-v b{color:var(--accent-2)}

/* ---------- section heads / cards ---------- */
.section-head{display:flex;align-items:baseline;gap:12px;margin:34px 0 6px;flex-wrap:wrap}
.section-head h2{margin:0;font-family:var(--display);font-size:26px;letter-spacing:.03em}
.overline{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);font-weight:800}
.overline::before{content:"◆ ";color:var(--accent)}
.count-pill{margin-left:10px;background:rgba(98,183,199,.16);border:1px solid var(--line);color:var(--accent);font-size:13px;font-weight:800;padding:1px 10px;border-radius:999px;vertical-align:middle}
.grid{display:flex;flex-wrap:wrap;gap:18px;margin:18px 0 34px}
.grid[data-n="2"] .card{flex:1 1 46%}
.card{flex:1 1 300px;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;color:var(--ink);box-shadow:0 6px 0 rgba(3,12,17,.55);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:0 10px 0 rgba(3,12,17,.55),0 0 22px rgba(98,183,199,.18);text-decoration:none}
.card .thumb{position:relative;display:block;border-bottom:1px solid var(--line-soft)}
.card .thumb img{aspect-ratio:16/9;object-fit:cover;width:100%;display:block}
.pill-tag{position:absolute;left:10px;bottom:10px;background:rgba(8,25,33,.92);color:var(--accent);border:1px solid var(--line);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:6px}
.card-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.card h3{margin:2px 0 8px;font-size:19px;font-family:var(--display);font-weight:700;letter-spacing:.02em}
.card p{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.6;flex:1}
.card .go{color:var(--accent-2);font-weight:800;font-size:13.5px;letter-spacing:.06em}
.card .stamp{display:block;color:var(--muted);font-size:11.5px;margin-top:8px;letter-spacing:.04em}
.card.sm{flex:1 1 220px}
.card.sm h3{font-size:16px}

/* ---------- article ---------- */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:30px;align-items:start}
.article-grid > div{min-width:0}
article{padding:26px 0 40px;min-width:0}
.crumb{font-size:13px;color:var(--muted);margin:16px 0 0}
.crumb a{color:#c7dcd6}
.crumb .sep{opacity:.45;margin:0 6px}
.crumb .here{color:#fff;font-weight:700}
article h1{font-family:var(--display);font-size:clamp(28px,4.6vw,42px);line-height:1.12;margin:10px 0 14px;letter-spacing:.02em}
article h2{font-family:var(--display);font-size:24px;letter-spacing:.02em;margin:40px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
article h2::before{content:"◆ ";color:var(--accent);font-size:.72em;vertical-align:2px}
article h3{margin:26px 0 8px;font-size:19px;color:#d5e7e1}
article p{margin:0 0 14px}
article strong{color:#fff}
article ul,article ol{margin:0 0 16px;padding-left:22px}
article li{margin:5px 0}
article img.zoom{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:zoom-in;display:block;margin:16px 0 6px;box-shadow:0 6px 0 rgba(3,12,17,.5)}
article img.zoom:hover{border-color:var(--accent)}
article em{color:var(--muted)}
.tbl-wrap{overflow-x:auto;margin:16px 0;border:1px solid var(--line-soft);border-radius:10px;background:rgba(9,24,32,.5)}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);padding:9px 12px;text-align:left;vertical-align:top}
th:last-child,td:last-child{border-right:0}
tr:last-child td{border-bottom:0}
th{background:var(--panel-3);color:#dff0ea;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
tbody tr:nth-child(odd){background:rgba(255,255,255,.022)}
.tbl-wrap td:first-child{color:#fff;font-weight:600}
table strong,table b{color:inherit}
.callout{border-left:4px solid var(--accent);background:linear-gradient(90deg,rgba(98,183,199,.1),rgba(22,41,47,.6) 40%);padding:13px 16px;margin:18px 0;border-radius:0 10px 10px 0}
.callout p{margin:0}
blockquote{border-left:3px solid var(--accent-2);margin:18px 0;padding:10px 16px;background:rgba(224,164,75,.07);border-radius:0 10px 10px 0;color:#e6d9c2;font-style:italic}
blockquote::before{content:"✦ Field note — ";color:var(--accent-2);font-style:normal;font-weight:800;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
code{background:var(--panel-3);padding:1px 6px;border-radius:5px;font-size:13.5px}

/* quick answer */
.quick-answer{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-left:4px solid var(--accent-2);border-radius:0 10px 10px 0;padding:13px 16px;margin:16px 0 20px}
.qa-stamp{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--accent-2);margin-bottom:6px}
.quick-answer p{margin:4px 0}
.quick-answer p:first-of-type{font-weight:600}

/* toc */
.toc{position:sticky;top:86px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:12px;padding:14px 14px 10px;margin-top:26px}
.toc .overline{display:block;margin-bottom:10px}
.toc-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0}
.toc-list a{font-size:13.5px;color:#c7dcd6;padding:5px 8px;border-radius:7px;border-left:2px solid transparent}
.toc-list a:hover{background:var(--panel-3);color:#fff;text-decoration:none;border-left-color:var(--accent)}

/* all guides */
.all-guides{margin-top:38px;border-top:1px solid var(--line-soft);padding-top:10px}
.all-guides .section-head{margin-top:22px}

/* ad slot */
.ad-slot{margin:28px auto;max-width:var(--maxw)}
.ad-inner{min-height:90px;border:1px dashed var(--line-soft);border-radius:10px;background:var(--panel);overflow:hidden}
@media (hover: hover) and (pointer: fine){
  .ad-slot{display:block}
}
@media not all and (hover: hover) and (pointer: fine){
  .ad-slot{display:none}
}

/* footer */
.foot{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--bg-deep),#04121a);padding:26px 0;margin-top:26px;position:relative}
.foot::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.7}
.foot .muted{color:var(--muted);font-size:13px}
.foot-links a{color:#d7e8e2;font-weight:600}
.disclaimer{color:var(--muted);font-size:13px;max-width:88ch}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(3,10,15,.95);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lightbox img{max-width:min(1500px,96vw);max-height:92vh;width:auto;height:auto;border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 60px rgba(0,0,0,.7)}

/* responsive */
@media (max-width:1080px){
  .article-grid{grid-template-columns:1fr}
  .toc{position:static;margin-top:10px}
}
@media (max-width:860px){
  .topbar .bar{flex-wrap:wrap;padding-top:10px;padding-bottom:10px;row-gap:6px}
  .brand{font-size:16px}
  .nav{margin-left:0;width:100%;min-width:0}
  .nav > ul{overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .nav .kids{display:none !important}
  .nav li.has-kids > a::after{display:none}
  .nav li.has-kids::after{display:none}
  .hero-in{min-height:400px;padding:52px 20px 40px}
  .hero-in::after{top:22px;right:16px}
}
@media (max-width:640px){
  .hero-in{min-height:360px}
  .hero .lead{font-size:17px}
  .grid{gap:14px}
  .card{flex:1 1 100%}
  .grid[data-n="2"] .card{flex:1 1 100%}
  .facts{padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}