:root{
  --bg:#0c0c0e; --bg2:#141418; --bg3:#1b1b21; --bg4:#22222a;
  --line:#2c2c35; --line2:#3a3a45;
  --ink:#e9e9ee; --ink2:#b6b6c0; --muted:#8b8b96;
  --accent:#F5D547; --accent-dim:#c9ad2e; --accent-soft:#3a340f;
  /* цвета проводов (типов данных) - как в реальном ComfyUI */
  --w-model:#b58cf2; --w-clip:#ffd53d; --w-cond:#ff9a3c;
  --w-latent:#ff86d8; --w-vae:#ff6b6b; --w-image:#5bb0f6;
  --w-control:#4fd0a5; --w-mask:#c8d64f;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent); color:#111}

/* ---------- HERO ---------- */
.hero{
  padding:76px 24px 60px; text-align:center;
  background:
    radial-gradient(900px 380px at 50% -60px, rgba(245,213,71,.14), transparent 70%),
    linear-gradient(180deg,#0e0e12,#0c0c0e);
  border-bottom:1px solid var(--line);
}
.hero .kicker{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent); margin-bottom:22px;
}
.hero h1{
  font-family:'Unbounded',sans-serif; font-weight:800;
  font-size:clamp(30px,6vw,58px); line-height:1.04; margin:0 auto 20px;
  max-width:15ch; letter-spacing:-.01em;
}
.hero h1 em{color:var(--accent); font-style:normal}
.hero .sub{max-width:60ch; margin:0 auto; color:var(--ink2); font-size:18px}
.hero .meta{
  margin-top:30px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted);
}
.hero .meta span{border:1px solid var(--line); border-radius:100px; padding:6px 14px}

/* ---------- STICKY NAV ---------- */
.tocbar{
  position:sticky; top:0; z-index:50;
  background:rgba(12,12,14,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.tocbar .inner{
  max-width:1180px; margin:0 auto; padding:10px 16px;
  display:flex; flex-wrap:wrap; gap:7px; justify-content:center;
}
.tocbar a{
  flex:0 0 auto; text-decoration:none; color:var(--ink2);
  font-size:13px; font-weight:500; padding:6px 13px; border-radius:100px;
  border:1px solid var(--line); white-space:nowrap; transition:.15s;
}
.tocbar a:hover{color:#111; background:var(--accent); border-color:var(--accent)}

/* ---------- LAYOUT ---------- */
main{max-width:820px; margin:0 auto; padding:0 22px 120px}
section{padding:56px 0 8px; border-top:1px solid var(--line); scroll-margin-top:80px}
section:first-of-type{border-top:0}
.secnum{
  font-family:'JetBrains Mono',monospace; color:var(--accent);
  font-size:13px; letter-spacing:.15em; font-weight:600;
}
h2{
  font-family:'Unbounded',sans-serif; font-weight:700;
  font-size:clamp(24px,4.4vw,36px); line-height:1.12; margin:8px 0 8px; letter-spacing:-.01em;
}
h3{font-family:'Unbounded',sans-serif; font-weight:600; font-size:20px; margin:38px 0 6px}
h4{font-size:16px; font-weight:700; margin:26px 0 4px; color:var(--ink)}
p{margin:14px 0}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(245,213,71,.32)}
a:hover{border-bottom-color:var(--accent)}
strong{color:#fff; font-weight:600}
em{color:var(--accent); font-style:normal}
ul,ol{padding-left:22px} li{margin:7px 0}
.lead{font-size:19px; color:var(--ink2)}
code{
  font-family:'JetBrains Mono',monospace; font-size:.86em;
  background:var(--bg3); border:1px solid var(--line); border-radius:6px;
  padding:2px 6px; color:#f0e4a8;
}
kbd{
  font-family:'JetBrains Mono',monospace; font-size:.8em; background:var(--bg4);
  border:1px solid var(--line2); border-bottom-width:2px; border-radius:6px; padding:2px 7px;
}

/* ---------- CALLOUTS ---------- */
.box{
  border:1px solid var(--line); border-left-width:3px; border-radius:12px;
  padding:16px 18px; margin:22px 0; background:var(--bg2); font-size:15.5px;
}
.box .bt{font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:4px; display:flex; gap:8px; align-items:center}
.box p:first-of-type{margin-top:2px} .box p:last-child{margin-bottom:0}
.box.tip{border-left-color:var(--w-control)} .box.tip .bt{color:var(--w-control)}
.box.analogy{border-left-color:var(--w-model); background:linear-gradient(180deg,rgba(181,140,242,.07),transparent)} .box.analogy .bt{color:var(--w-model)}
.box.warn{border-left-color:var(--accent)} .box.warn .bt{color:var(--accent)}
.box.danger{border-left-color:var(--w-vae); background:linear-gradient(180deg,rgba(255,107,107,.08),transparent)} .box.danger .bt{color:var(--w-vae)}

/* ---------- NODE GRAPH ---------- */
.graphwrap{
  width:min(1300px,94vw); margin:28px 0; margin-left:50%; transform:translateX(-50%);
  border:1px solid var(--line); border-radius:var(--radius); background:
  linear-gradient(0deg,var(--bg2),var(--bg2)),
  repeating-linear-gradient(0deg,transparent,transparent 23px,rgba(255,255,255,.02) 23px,rgba(255,255,255,.02) 24px);
  padding:28px 24px}
.graph{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 0}
.node{
  flex:0 0 auto; width:158px; background:var(--bg3); border:1px solid var(--line2);
  border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.35); overflow:hidden;
}
.node .nh{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:600;
  padding:8px 10px; background:var(--bg4); border-bottom:1px solid var(--line2);
  border-top:2px solid var(--nc,var(--muted)); color:#fff;
}
.node .nb{padding:9px 10px; font-size:11px; color:var(--ink2); line-height:1.4}
.node .port{display:flex; align-items:center; gap:6px; margin:3px 0; font-family:'JetBrains Mono',monospace; font-size:10px}
.node .port.out{justify-content:flex-end; color:var(--ink)}
.dot{width:9px; height:9px; border-radius:50%; background:var(--c,#999); flex:0 0 auto; box-shadow:0 0 0 2px rgba(0,0,0,.3)}
.arrow{flex:0 0 auto; width:64px; display:flex; flex-direction:column; align-items:center; gap:3px; position:relative}
.arrow .line{width:100%; height:2px; background:var(--c,#666); border-radius:2px}
.arrow .chip{
  font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:600; letter-spacing:.03em;
  padding:2px 6px; border-radius:100px; color:#0c0c0e; background:var(--c,#666); white-space:nowrap;
}
.arrow::after{content:"▶"; position:absolute; right:-2px; top:50%; transform:translateY(-1px); color:var(--c,#666); font-size:9px}
/* skeleton IO: промпт и результат живут ВНЕ рамки с нодами */
.io-box{flex:0 0 auto; align-self:center; border-radius:10px; padding:10px 12px;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; text-align:center; line-height:1.45; width:150px}
.io-box b{display:block; margin-bottom:3px}
.io-box span{display:block; color:var(--muted); font-size:9px; margin-top:3px}
.io-prompt{background:var(--accent-soft); border:1px dashed var(--accent); color:var(--accent)}
.io-result{background:var(--bg3); border:1px dashed var(--w-image); color:var(--w-image)}
.nodeframe{flex:0 0 auto; position:relative; border:1.5px solid var(--line2); border-radius:14px;
  padding:26px 16px 16px; background:rgba(255,255,255,.015); overflow:visible}
.nodeframe .graph{gap:12px 0}
.nf-label{position:absolute; top:-10px; left:16px; white-space:nowrap;
  background:var(--bg2); padding:2px 12px; border:1px solid var(--line2); border-radius:100px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--muted); letter-spacing:.04em}
/* «твой промпт» - отдельный бокс НАД рамкой, стрелкой сверху заходит в CLIP */
.prompt-float{position:absolute; top:-70px; left:210px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:0}
.pf-line{width:2px; height:40px; background:var(--accent)}
.pf-head{color:var(--accent); font-size:13px; line-height:.6; margin-top:-2px}
.graphwrap.wide{width:min(1600px,95vw)}
/* «Сам граф»: один ряд, промпт - первый блок, дуга через верх в CLIP */
.samgraf{position:relative; width:max-content; max-width:100%; margin:0 auto; padding-top:46px}
.samgraf .io-prompt{margin-right:42px}
.samgraf .nodeframe{padding-bottom:200px}
.samgraf > .graph > .io-box{align-self:flex-start; margin-top:70px}
.samgraf > .graph > .arrow{align-self:flex-start; margin-top:92px}
.latent-node{position:absolute; left:452px; top:206px; z-index:3; display:flex; flex-direction:column; align-items:center; gap:0}
.latent-node .ln-head{color:var(--w-latent); font-size:13px; line-height:.55}
.latent-node .ln-line{width:2px; height:22px; background:var(--w-latent)}
.samgraf > .graph{flex-wrap:nowrap; gap:0; align-items:center}
.overarc{position:absolute; z-index:4; border:2px solid var(--accent); border-bottom:0; border-radius:13px 13px 0 0}
.overarc::after{content:""; position:absolute; right:-5px; bottom:-3px; width:0; height:0;
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:9px solid var(--accent)}
.overarc .lbl{position:absolute; top:-9px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--bg2); padding:1px 9px; border-radius:100px; font-family:'JetBrains Mono',monospace;
  font-size:9px; color:var(--accent)}
/* примеры нод в главе «Ноды» */
.nodeanat{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin:18px 0}
.na-side{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--accent); max-width:150px; line-height:1.4}
.na-side.na-r{text-align:right; color:var(--w-image)}
.na-side span{display:block; color:var(--muted); font-size:9.5px; margin-top:3px}
.na-widgets{background:var(--bg4); border:1px dashed var(--line2); border-radius:6px; padding:6px 8px; margin:7px 0; font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--ink2); line-height:1.55}
.noderow{display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items:flex-start; margin:18px 0; padding:22px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg2)}
.noderow figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:7px}
.noderow figcaption{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); text-align:center; max-width:170px}
.node .tag{font-family:'JetBrains Mono',monospace; font-size:8px; text-transform:uppercase; letter-spacing:.05em; padding:1px 6px; border-radius:100px; border:1px solid currentColor; margin-left:6px; vertical-align:middle; font-weight:400}
.node.missing{border-color:rgba(239,68,68,.6); box-shadow:0 0 0 1px rgba(239,68,68,.15) inset}
.node.missing .nh{color:#fda4a4; border-top-color:#ef4444; background:rgba(239,68,68,.08)}
/* узкий экран / мобилка: граф перестраивается в вертикаль */
@media(max-width:820px){
  .graphwrap{width:100%; margin-left:0; transform:none; padding:22px 14px}
  .graph{flex-direction:column; align-items:center; justify-content:flex-start; gap:0}
  .node{width:min(100%,300px)}
  .arrow{width:auto; height:48px; flex-direction:column; align-items:center; gap:4px}
  .arrow .line{width:2px; height:24px}
  .arrow::after{content:"▼"; right:auto; left:50%; top:auto; bottom:-4px; transform:translateX(-50%)}
  .nodeframe{width:min(100%,320px); padding:22px 12px 12px}
  .io-box{width:min(100%,300px)}
}
/* «Сам граф» шире прочих - в вертикаль уходит раньше, чтобы не было горизонтального скролла */
@media(max-width:1420px){
  .graphwrap.wide{width:100%; margin-left:0; transform:none}
  .samgraf{width:100%}
  .samgraf > .graph, .samgraf .nodeframe > .graph{flex-direction:column; align-items:center; gap:0}
  .samgraf .nodeframe{width:min(100%,340px); padding:20px 12px 12px}
  .samgraf .node{width:min(100%,300px)}
  .latent-node{position:static; left:auto; top:auto; margin:2px auto 0}
  .latent-node .ln-head{display:none}
  .samgraf .arrow{width:auto; height:42px; flex-direction:column; gap:4px}
  .samgraf .arrow .line{width:2px; height:22px}
  .samgraf .arrow::after{content:"▼"; right:auto; left:50%; top:auto; bottom:-3px; transform:translateX(-50%)}
  .overarc{display:none}
  .samgraf .io-prompt::after{content:"↓ заходит в CLIP Text Encode"; display:block; margin-top:6px; color:var(--accent); font-size:9px}
}

/* легенда проводов */
.legend{display:flex; flex-wrap:wrap; gap:10px 16px; margin:20px 0; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--bg2)}
.legend .li{display:flex; align-items:center; gap:8px; font-size:13px; font-family:'JetBrains Mono',monospace}
.legend .sw,.tbl td .sw{display:inline-block; width:28px; height:9px; border-radius:5px; vertical-align:middle}

/* ---------- TABLES ---------- */
.tblwrap{overflow-x:auto; margin:22px 0; border:1px solid var(--line); border-radius:12px}
table.tbl{border-collapse:collapse; width:100%; font-size:14px; min-width:520px}
.tbl th{
  text-align:left; background:var(--bg3); color:var(--accent); font-weight:600;
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.02em;
  padding:11px 13px; border-bottom:1px solid var(--line2); white-space:nowrap;
}
.tbl td{padding:11px 13px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink2)}
.tbl tr:last-child td{border-bottom:0}
.tbl td strong{color:#fff}
.tbl tr:hover td{background:rgba(255,255,255,.015)}

/* ---------- SHOTS (generated examples) ---------- */
.figrow{width:min(1120px,92vw); margin-left:50%; transform:translateX(-50%);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:26px}
.figrow.duo{width:min(720px,92vw)}
.figrow.trio{width:min(940px,92vw)}
.shot{margin:0}
.shot img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; border:1px solid var(--line2); display:block; background:var(--bg3)}
.shot figcaption{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink2); margin-top:8px; text-align:center}
.uishot{width:min(1200px,94vw); margin:22px auto; margin-left:50%; transform:translateX(-50%)}
.uishot img{aspect-ratio:auto; object-fit:contain; width:100%; height:auto; border:1px solid var(--line2); border-radius:10px}
@media(max-width:820px){.uishot{width:100%; margin-left:0; transform:none}}
.shot figcaption b{color:var(--accent); font-weight:600}
.figcap{max-width:660px; margin:14px auto 0; text-align:center; font-size:14px; color:var(--muted)}
.figcap b{color:var(--ink2); font-weight:600}
@media(max-width:820px){.figrow{width:100%; margin-left:0; transform:none}}
/* стили - простой список в 2 столбца с указанием модели */
.stylelist{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:780px; margin:22px auto 0}
.stylelist .shot img{aspect-ratio:1/1}
.stylelist figcaption{text-align:left; margin-top:7px}
.stylelist figcaption b{display:block; color:var(--ink); font-size:13px}
.stylelist figcaption span{color:var(--muted); font-size:11px}
@media(max-width:600px){.stylelist{grid-template-columns:1fr}}

/* ---------- PRODUCTION LOOP DIAGRAM ---------- */
.loopwrap{width:min(1000px,94vw); margin:28px auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg2); padding:26px 20px}
.loop-top{display:flex; justify-content:center}
.lbox{background:var(--bg3); border:1px solid var(--line2); border-top:3px solid var(--accent); border-radius:10px; padding:12px 18px; text-align:center; font-weight:600; font-size:15px; max-width:360px}
.lbox span{display:block; font-weight:400; font-size:12px; color:var(--muted); margin-top:3px}
.lbox.lbox-req{border-top-color:var(--w-cond)}
.lbox.lbox-art{border-top-color:var(--w-model)}
.loop-branch,.loop-merge,.loop-repeat{text-align:center; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); margin:12px 0}
.loop-repeat{color:var(--accent); font-weight:600; font-size:14px}
.loop-cols{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.loop-col{flex:1 1 150px; max-width:210px; display:flex; flex-direction:column; align-items:center; gap:6px}
.loop-col .lbox{width:100%; border-top-color:var(--w-image); font-size:13px}
.ldown{color:var(--line2); font-size:13px; line-height:1}
.lstep{background:var(--accent-soft); border:1px solid var(--accent-dim); color:var(--accent); border-radius:100px; padding:3px 14px; font-size:12px; font-family:'JetBrains Mono',monospace}

/* ---------- BAR CHART ---------- */
.chartwrap{width:min(1120px,94vw); margin:26px auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg2); padding:22px 18px 14px; overflow-x:auto}
.barchart{display:flex; align-items:flex-end; gap:9px; height:240px; min-width:min-content; border-bottom:1px solid var(--line2); padding-bottom:2px}
.bar{flex:0 0 auto; width:58px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center}
.bar .fill{width:62%; border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--accent),var(--accent-dim)); min-height:6px}
.bar .fill.few{background:linear-gradient(180deg,var(--w-image),#2b6ea3)}
.bar .eco{font-family:'JetBrains Mono',monospace; font-size:8.5px; color:var(--ink2); margin-bottom:3px; white-space:nowrap}
.barlabels{display:flex; gap:9px; min-width:min-content; margin-top:6px}
.barlabels .bl{flex:0 0 auto; width:58px; text-align:center; font-family:'JetBrains Mono',monospace}
.barlabels .bl .nm{font-size:10px; color:var(--ink); font-weight:600}
.barlabels .bl .yr{font-size:9px; color:var(--muted)}

/* ---------- DECISION ROUTES ---------- */
.routes{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin:22px 0}
.route{border:1px solid var(--line); border-left:3px solid var(--w-vae); border-radius:12px; background:var(--bg2); padding:14px 16px}
.route h4{margin:0 0 6px; font-size:15px}
.route .lever{font-size:14px; color:var(--ink2); line-height:1.5}
.route .lever b{color:var(--accent)}
.route .thumbs{display:flex; gap:8px; margin-top:11px}
.route .thumbs img{width:calc(50% - 4px); aspect-ratio:1/1; object-fit:cover; border-radius:8px; border:1px solid var(--line2); display:block; cursor:zoom-in}
.rednodes{display:flex; flex-direction:column; gap:7px; margin-top:11px}
.rednodes .rn{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border-radius:8px; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.55); box-shadow:0 0 0 1px rgba(239,68,68,.15) inset}
.rednodes .rn-t{font-family:'JetBrains Mono',monospace; font-size:13px; color:#fda4a4; font-weight:600}
.rednodes .rn-b{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:#ef4444; border:1px solid rgba(239,68,68,.5); border-radius:100px; padding:2px 9px}

/* ---------- CASE STUDY ---------- */
.casehead{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:22px 0}
.casehead .ch{border:1px solid var(--line); border-radius:12px; background:var(--bg2); padding:14px 16px}
.casehead .ch h4{margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); font-family:'JetBrains Mono',monospace}
.casehead .ch p{margin:0; font-size:15px; color:var(--ink2)}
.steps{display:flex; flex-direction:column; gap:14px; margin:22px 0}
.step{display:grid; grid-template-columns:210px 1fr; gap:20px; align-items:center; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px; background:var(--bg2); padding:14px}
.step img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; border:1px solid var(--line2); cursor:zoom-in; display:block}
.step .sc{font-size:16.5px; color:var(--ink); line-height:1.6}
.step .sc b{color:#fff}
.step .sc .v{display:inline-block; font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--accent); font-weight:600; margin-bottom:4px}
@media(max-width:620px){.step{grid-template-columns:1fr}}

/* ---------- DEEP DIVE ---------- */
details.deep{border:1px solid var(--line); border-radius:12px; margin:16px 0; background:var(--bg2); overflow:hidden}
details.deep>summary{
  cursor:pointer; padding:14px 18px; font-weight:600; list-style:none;
  display:flex; align-items:center; gap:10px; font-size:15px;
}
details.deep>summary::-webkit-details-marker{display:none}
details.deep>summary::before{content:"＋"; color:var(--accent); font-family:'JetBrains Mono',monospace; font-weight:700}
details.deep[open]>summary::before{content:"－"}
details.deep>summary:hover{background:var(--bg3)}
details.deep .dc{padding:2px 18px 16px; border-top:1px solid var(--line); font-size:15.5px}

/* utility */
.pill{display:inline-block; font-family:'JetBrains Mono',monospace; font-size:11px; padding:2px 9px; border-radius:100px; border:1px solid var(--line2); color:var(--ink2); margin:2px 3px 2px 0}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0}
@media(max-width:620px){.grid2{grid-template-columns:1fr}}
.card{border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:var(--bg2)}
.card h4{margin-top:0}
hr.soft{border:0; border-top:1px solid var(--line); margin:34px 0}

/* footer */
footer{border-top:1px solid var(--line); padding:44px 22px 80px; text-align:center; color:var(--muted); font-size:14px}
footer .big{font-family:'Unbounded',sans-serif; color:var(--ink); font-size:18px; margin-bottom:8px}

/* ---------- PAGER (multipage) ---------- */
.prevnext{display:flex; justify-content:space-between; align-items:center; gap:14px; margin:64px 0 0; padding-top:28px; border-top:1px solid var(--line)}
.pn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; border:1px solid var(--line2); border-radius:100px; padding:12px 22px; color:var(--ink); font-weight:600; font-size:15px; background:var(--bg2); transition:.15s}
.pn:hover{border-color:var(--accent); color:var(--accent); background:var(--bg3)}
.pn.next{margin-left:auto}
.pn .lbl{color:var(--muted); font-family:'JetBrains Mono',monospace; font-size:11px; margin-right:2px}
.prevnext > span{flex:0 0 auto; width:1px}
.tocbar a.active{color:#111; background:var(--accent); border-color:var(--accent)}

/* ---------- LIGHTBOX ---------- */
.shot img{cursor:zoom-in}
.lb{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:rgba(6,6,8,.95); backdrop-filter:blur(6px); padding:24px}
.lb.open{display:flex}
.lb img{max-width:94vw; max-height:84vh; width:auto; height:auto; border-radius:10px;
  border:1px solid var(--line2); box-shadow:0 24px 70px rgba(0,0,0,.65)}
.lb .lb-cap{position:absolute; bottom:20px; left:0; right:0; text-align:center;
  font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--ink); padding:0 20px; pointer-events:none}
.lb .lb-cap b{color:var(--accent)}
.lb .lb-count{position:absolute; top:20px; left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--muted)}
.lb button{position:absolute; background:rgba(28,28,34,.72); border:1px solid var(--line2);
  color:var(--ink); border-radius:50%; cursor:pointer; display:flex; align-items:center;
  justify-content:center; line-height:1; transition:.15s; -webkit-tap-highlight-color:transparent}
.lb button:hover{background:var(--accent); color:#111; border-color:var(--accent)}
.lb .lb-close{top:16px; right:16px; width:44px; height:44px; font-size:20px}
.lb .lb-prev,.lb .lb-next{top:50%; transform:translateY(-50%); width:54px; height:54px; font-size:30px; padding-bottom:4px}
.lb .lb-prev{left:16px} .lb .lb-next{right:16px}
.lb .lb-prev.hidden,.lb .lb-next.hidden{display:none}
@media(max-width:640px){.lb .lb-prev,.lb .lb-next{width:44px; height:44px; font-size:24px}}