/* ============================================================
   ISODE ATLAS — additive layer on top of style.css
   新增组件：库卡缩略图 / 代码查看器 / 五格式徽章 / 子页 hero
   ============================================================ */

/* ---- 顶部页签（画廊间切换）---- */
.nav-links a.active{color:var(--amber)}
.nav-links a.active::after{width:100%}

/* ---- 子页紧凑 hero ---- */
.subhero{position:relative;min-height:62svh;display:flex;flex-direction:column;justify-content:center;
  padding:120px 7vw 60px;overflow:hidden}
.subhero #flow{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.subhero-inner{position:relative;z-index:2;max-width:1100px}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--muted);
  display:flex;align-items:center;gap:12px;margin-bottom:28px}
.crumb a{color:var(--muted);transition:color .3s}.crumb a:hover{color:var(--amber)}
.crumb .tick{width:30px;height:1px;background:var(--amber);display:inline-block}
.subhero h1{font-family:var(--serif);font-weight:900;line-height:1.05;
  font-size:clamp(44px,7vw,104px);letter-spacing:.01em}
.subhero h1 em{color:transparent;background:linear-gradient(120deg,var(--amber),var(--rose));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% 100%;animation:shine 6s ease-in-out infinite}
.subhero .lead{margin-top:26px;font-size:clamp(15px,1.4vw,18px);color:var(--muted);line-height:2;max-width:760px}
.subhero .mini-stats{display:flex;gap:clamp(24px,5vw,64px);margin-top:44px;flex-wrap:wrap}
.subhero .mini-stats .stat b{font-size:clamp(28px,3vw,42px)}

/* ---- 库卡片（首页 bento，带缩略图，可点）---- */
.sys-card.lib{display:flex;flex-direction:column;text-decoration:none}
.sys-card.lib .sys-thumbs{display:flex;gap:8px;margin:18px 0 6px}
.sys-card.lib .sys-thumbs span{flex:1;aspect-ratio:4/3;border-radius:7px;overflow:hidden;
  background:#fff;border:1px solid var(--faint)}
.sys-card.lib .sys-thumbs img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.sys-card.lib:hover .sys-thumbs img{transform:scale(1.07)}
.sys-card.lib p{flex:1}
.sys-go{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--muted);
  margin-top:14px;transition:color .35s}
.sys-card.lib:hover .sys-go{color:var(--amber)}
.sys-go .arr{display:inline-block;transition:transform .35s}
.sys-card.lib:hover .sys-go .arr{transform:translateX(5px)}
.sys-card.lib .sys-num{bottom:auto;top:24px;right:22px;font-size:84px}
.sys-card.lib:hover .sys-num{transform:none}

/* ---- 五格式徽章 ---- */
.fmt-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.fmt-badges span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--teal);
  border:1px solid rgba(95,196,184,.32);padding:3px 9px;border-radius:99px}

/* ---- 代码查看器 ---- */
.code{background:rgba(11,11,16,.45)}
.code-pick{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px}
.code-pick button{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;padding:9px 18px;
  border-radius:99px;cursor:pointer;border:1px solid var(--faint);color:var(--muted);
  background:transparent;transition:.3s}
.code-pick button:hover{color:var(--ink);border-color:rgba(237,235,228,.3)}
.code-pick button.on{background:var(--amber);border-color:var(--amber);color:#15110a;font-weight:500}
.code-card{background:#0c0d14;border:1px solid var(--faint);border-radius:14px;overflow:hidden;
  max-width:1100px;box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.code-bar{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--faint);
  background:rgba(255,255,255,.02)}
.code-dots{display:flex;gap:7px}
.code-dots i{width:11px;height:11px;border-radius:50%;display:inline-block}
.code-dots i:nth-child(1){background:#e5635b}.code-dots i:nth-child(2){background:#e3b341}
.code-dots i:nth-child(3){background:#3fb950}
.code-langs{display:flex;gap:6px;margin-left:6px}
.code-langs button{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;padding:5px 13px;
  border-radius:7px;cursor:pointer;border:1px solid var(--faint);color:var(--muted);
  background:transparent;transition:.25s}
.code-langs button.on{color:var(--ink);border-color:rgba(233,181,88,.5);background:rgba(233,181,88,.08)}
.code-file{margin-left:auto;font-family:var(--mono);font-size:11px;color:#5a5a64;letter-spacing:.06em}
.code-body{margin:0;max-height:560px;overflow:auto}
.code-body pre{margin:0}
.code-body code{font-family:var(--mono);font-size:13px;line-height:1.7;padding:22px 24px;display:block;
  background:transparent!important;color:#cdd3e0}
.code-body::-webkit-scrollbar{width:10px;height:10px}
.code-body::-webkit-scrollbar-thumb{background:#23252f;border-radius:8px}
.code-note{margin-top:22px;font-size:13px;color:#6b6b75;letter-spacing:.03em;max-width:760px;line-height:1.9}

/* hljs 背景透明，配合卡片底色 */
.hljs{background:transparent!important}

/* ---- 通用画廊：语言脚注随库变化 ---- */
.g-lang.flow{color:var(--teal)}

/* ---- 灯箱内代码（流程图/算法可展示）---- */
.lb-extra{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.lb-extra span{font-family:var(--mono);font-size:10.5px;color:var(--teal);
  border:1px solid rgba(95,196,184,.3);padding:3px 9px;border-radius:99px}

/* ---- 首页两段式大标题（不再断词、无句号）---- */
.hero-title.atlas{letter-spacing:.004em;line-height:1}
.hero-title.atlas .t-kick{display:block;font-family:var(--serif);font-weight:700;
  font-size:clamp(26px,4.4vw,58px);line-height:1.12;letter-spacing:.07em;
  color:rgba(237,235,228,.58);margin-bottom:.18em;white-space:nowrap}
.hero-title.atlas .t-kick i{font-style:normal;color:var(--amber);padding:0 .14em;font-weight:400}
.hero-title.atlas .t-main{display:block;font-size:clamp(64px,12vw,168px);line-height:.96;
  font-weight:900;white-space:nowrap}
.hero-title.atlas .t-main em{color:transparent;
  background:linear-gradient(120deg,var(--amber),var(--rose) 70%,var(--blue));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:220% 100%;animation:shine 7s ease-in-out infinite}

/* ---- 小标题：关键词渐变描金 ---- */
.sec-head h2 em,.foot-cta h2 em,.subhero h1 em{font-style:normal;color:transparent;
  background:linear-gradient(120deg,var(--amber),var(--rose));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% 100%;animation:shine 6s ease-in-out infinite}
.sec-no{position:relative}
.sec-head h2{letter-spacing:.005em}

/* ---- 首页技术栈副标题 ---- */
.hero-sub.hero-stack{font-family:var(--mono);font-size:clamp(16px,1.7vw,23px);
  letter-spacing:.06em;color:rgba(237,235,228,.84);margin-top:30px}
.hero-sub.hero-stack i{font-style:normal;color:var(--amber);padding:0 .5em;font-weight:700}

@media(max-width:560px){
  .hero-title.atlas .t-kick{white-space:normal;font-size:clamp(22px,7vw,34px)}
  .hero-title.atlas .t-main{font-size:clamp(52px,16vw,72px)}
}

/* ---- 响应式微调 ---- */
@media(max-width:760px){
  .subhero{min-height:54svh;padding:104px 6vw 48px}
  .code-file{display:none}
  .code-body code{font-size:12px}
}