/* ============================================================
   VPNCZ — tutorial.css
   quickstart.html 专属：步骤条、步骤标签、示例代码块、
   验证清单、后续阅读网格。所有颜色引用 :root 设计令牌。
   ============================================================ */

/* ---------- 1. 首屏（非 hero 装置形态，保持轻量） ---------- */
.tut-hero{padding-top:56px;padding-bottom:8px}
.tut-hero .lede{max-width:46em}
.tut-hero h1{max-width:16em}
.tut-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* ---------- 2. 五步流程条 ---------- */
.tut-flow{
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  margin-top:32px;
}
.tut-flow>*{min-width:0}
.tut-flow a{
  display:flex;flex-direction:column;gap:6px;min-width:0;
  padding:14px 16px;border-radius:var(--r-md);
  background:var(--panel);border:1px solid var(--border);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.tut-flow a:hover{
  border-color:var(--accent);box-shadow:var(--sh-soft);transform:translateY(-2px);
}
.tut-flow b{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.08em;line-height:1;color:var(--accent-dark);
}
.tut-flow span{
  font-family:var(--font-display);font-size:14px;font-weight:700;
  line-height:1.35;color:var(--ink);
}

/* ---------- 3. 步骤标签（.prose 内需要压过 .prose p） ---------- */
.prose .step-label{
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.08em;line-height:1.4;color:var(--accent-dark);
  margin:0 0 8px;
}
.prose .step-label + h2{margin-top:0}

/* ---------- 4. 示例代码块（订阅链接一律假值） ---------- */
.prose .tut-code{
  margin:18px 0;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--r-md);
  overflow:hidden;max-width:100%;min-width:0;
}
.prose .tut-code .cap{
  display:block;padding:10px 16px;
  border-bottom:1px solid var(--border);background:var(--panel-2);
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.06em;line-height:1.4;color:var(--muted);
}
.prose .tut-code pre{margin:0;padding:14px 16px;max-width:100%}
.prose .tut-code code{font-size:13px;color:var(--ink)}

/* ---------- 5. 验证清单 ---------- */
.prose .tut-check{
  display:flex;flex-direction:column;gap:10px;
  margin:20px 0;padding-left:0;
}
.prose .tut-check li{
  display:flex;align-items:flex-start;gap:10px;
  list-style:none;margin-bottom:0;padding-left:0;
  font-size:15px;line-height:1.75;color:var(--muted);
}
.prose .tut-check svg{width:16px;height:16px;flex:none;margin-top:5px;color:var(--ok)}
.prose .tut-check strong{color:var(--ink)}

/* ---------- 6. 后续阅读网格 ---------- */
.tut-next{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;margin:22px 0 8px;
}
.tut-next>*{min-width:0}
.tut-next a{
  display:flex;flex-direction:column;gap:6px;min-width:0;
  padding:18px 20px;border-radius:var(--r-md);
  background:var(--panel);border:1px solid var(--border);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.tut-next a:hover{border-color:var(--ink);box-shadow:var(--sh-soft);transform:translateY(-2px)}
.tut-next b{
  font-family:var(--font-display);font-size:16px;font-weight:800;
  line-height:1.3;color:var(--ink);
}
.tut-next span{font-size:13px;line-height:1.6;color:var(--muted)}

/* ---------- 7. 响应式 ---------- */
@media (max-width:1100px){
  .tut-flow{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .tut-hero{padding-top:36px}
  .tut-flow{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .tut-flow{grid-template-columns:1fr}
  .tut-next{grid-template-columns:1fr}
  .tut-flow a:hover,.tut-next a:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .tut-flow a,.tut-next a{transition:none}
  .tut-flow a:hover,.tut-next a:hover{transform:none}
}