/* 自建页(教程/FAQ)在 obs.css 之上的增量样式。只用 obs 的 token,保证与快照页同一套视觉。 */

.mk-article{max-width:780px;margin:0 auto;padding:96px 28px 96px}
.mk-crumb{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:var(--ink-faint);margin-bottom:24px;display:flex;gap:8px}
.mk-crumb a:hover{color:var(--ink-muted)}
.mk-eyebrow{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-quiet);margin-bottom:12px}
.mk-article h1{font-size:clamp(30px,4.4vw,46px);line-height:1.18;letter-spacing:-.014em;margin:0 0 14px;font-weight:800}
.mk-lede{color:var(--ink-muted);font-size:16.5px;line-height:1.8;margin:0 0 44px}
.mk-article h2{font-size:22px;margin:46px 0 14px;letter-spacing:-.008em;font-weight:700}
.mk-article p{color:var(--ink-muted);margin:12px 0;line-height:1.85}
.mk-article ol,.mk-article ul{color:var(--ink-muted);padding-left:22px;margin:12px 0;display:grid;gap:7px;line-height:1.8}
.mk-article a[href]:not(.obs-btn){color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.mk-article code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.88em;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.mk-article kbd{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.82em;background:var(--surface-3);border:1px solid var(--line-strong);border-radius:5px;padding:1px 6px}

.mk-code{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin:18px 0}
.mk-code-head{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:var(--ink-quiet)}
.mk-code-head::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);opacity:.65}
.mk-code pre{margin:0;padding:18px 20px;overflow-x:auto;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;line-height:1.75;color:var(--ink-muted)}
.mk-code code{background:none;border:0;padding:0;font-size:inherit}
.mk-code .k{color:var(--cyan)}.mk-code .s{color:#9fd4a8}.mk-code .c{color:var(--ink-faint)}

.mk-note{border-left:2px solid var(--line-strong);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;padding:14px 18px;font-size:14px;color:var(--ink-quiet);margin:20px 0;line-height:1.8}
.mk-note b{color:var(--ink-muted)}

.mk-migrate{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;margin:18px 0}
.mk-migrate span{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;color:var(--ink-faint);text-transform:uppercase}
.mk-migrate code{display:block;margin-top:6px;font-size:13px;color:var(--ink);word-break:break-all;background:none;border:0;padding:0}
.mk-migrate .arr{color:var(--ink-quiet);font-size:18px}

/* FAQ */
.mk-faq-list{max-width:780px;margin:0 auto;display:grid;gap:10px}
details.mk-faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:0 20px;transition:.25s}
details.mk-faq[open]{border-color:var(--line-strong);background:var(--surface-2)}
details.mk-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 0;font-weight:600;font-size:15px}
details.mk-faq summary::-webkit-details-marker{display:none}
details.mk-faq summary::after{content:"+";font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--ink-quiet);font-size:17px;transition:transform .25s}
details.mk-faq[open] summary::after{transform:rotate(45deg)}
details.mk-faq .a{padding:0 0 18px;font-size:14px;color:var(--ink-muted);line-height:1.85}
details.mk-faq .a p+p{margin-top:10px}

/* 指南索引卡 */
.mk-guide-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:880px;margin:0 auto}
.mk-guide-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;transition:.3s cubic-bezier(.16,1,.3,1)}
.mk-guide-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.mk-guide-card .tag{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;color:var(--ink-faint);text-transform:uppercase}
.mk-guide-card h3{font-size:16.5px;margin:8px 0 6px}
.mk-guide-card p{font-size:13.5px;color:var(--ink-quiet);margin:0}
.mk-guide-card .go{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:var(--cyan);margin-top:14px;display:inline-block}

/* 页面级 hero(自建页共用) */
.mk-hero{text-align:center;padding:96px 28px 8px;position:relative}
.mk-hero h1{font-size:clamp(32px,4.6vw,52px);line-height:1.16;letter-spacing:-.014em;font-weight:800;margin:14px 0 14px}
.mk-hero p{color:var(--ink-muted);font-size:16.5px;max-width:600px;margin:0 auto}
.mk-sec{padding:44px 0 96px}

/* 语言切换:静态链接版,复刻 obs-lang 的外观 */
.obs-lang a{display:inline-flex;align-items:center;justify-content:center;padding:5px 11px;border-radius:100px;font-size:12px;font-weight:600;color:var(--ink-quiet);position:relative;z-index:1;transition:color .2s}
.obs-lang a.on{color:var(--ink-dark);background:var(--ink);}
.obs-lang a:hover{color:var(--ink)}

@media (max-width:820px){
  .mk-guide-grid{grid-template-columns:1fr}
  .mk-migrate{grid-template-columns:1fr}
  .mk-migrate .arr{transform:rotate(90deg);justify-self:center}
  .mk-article{padding-top:72px}
  .mk-hero{padding-top:72px}
}