/* 教程与课程（2026-10-23 方案 B + C 的两套系列）。只作用于 .v3-tutorials。颜色只用外壳令牌。 */
.v3-tutorials .tu-h{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--sv-line)}
.v3-tutorials .tu-h .v3-h1 em{font-style:normal;color:var(--sv-rose)}
.v3-tutorials .tu-h .v3-lede b{color:var(--sv-ink);font-weight:600;font-variant-numeric:tabular-nums}
.v3-tutorials .tu-n{display:flex;gap:30px}
.v3-tutorials .tu-n div{display:grid}
.v3-tutorials .tu-n b{font-size:34px;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.v3-tutorials .tu-n span{font-size:12.5px;color:var(--sv-ink-3);margin-top:8px}
.v3-tutorials .tu-lab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:44px 0 16px}
.v3-tutorials .tu-lab h2{font-size:22px;letter-spacing:-.02em;font-weight:700;margin:0}
.v3-tutorials .tu-lab span{font-size:13px;color:var(--sv-ink-3)}
.v3-tutorials svg{width:15px;height:15px;flex:none}
/* 封面占位（没封面的文章） */
.v3-tutorials .tu-nopic{display:flex;align-items:center;justify-content:center;width:100%;background:var(--sv-bg-3);color:var(--sv-ink-3)}
.v3-tutorials .tu-nopic svg{width:20px;height:20px}

/* 小互的课：两张系列卡 */
.v3-tutorials .tu-series{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.v3-tutorials .tu-sr{min-width:0;border-radius:24px;overflow:hidden;background:var(--sv-bg-2);box-shadow:inset 0 0 0 1px var(--sv-line);display:flex;flex-direction:column;transition:box-shadow .15s}
.v3-tutorials .tu-sr.on{box-shadow:inset 0 0 0 2px var(--sv-rose)}
.v3-tutorials .tu-mos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--sv-line)}
.v3-tutorials .tu-mos a{display:block;overflow:hidden}
.v3-tutorials .tu-mos img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .3s}
.v3-tutorials .tu-mos a:hover img{transform:scale(1.04)}
.v3-tutorials .tu-bd{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;min-width:0}
.v3-tutorials .tu-bd small{font-size:12px;color:var(--sv-ink-3)}
.v3-tutorials .tu-bd h3{font-size:24px;letter-spacing:-.025em;line-height:1.25;font-weight:700;margin:6px 0 0}
.v3-tutorials .tu-bd p{font-size:14px;color:var(--sv-ink-2);margin:6px 0 0;line-height:1.65}
.v3-tutorials .tu-st{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px;font-size:12px;color:var(--sv-ink-3)}
.v3-tutorials .tu-st b{display:block;font-size:19px;color:var(--sv-ink);letter-spacing:-.02em;line-height:1.25;font-variant-numeric:tabular-nums}
.v3-tutorials .tu-ls{margin-top:16px}
.v3-tutorials .tu-ls>span{display:block;font-size:11.5px;font-weight:600;color:var(--sv-ink-3);margin-bottom:4px}
.v3-tutorials .tu-ls a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:baseline;font-size:13.5px;padding:8px 0;border-top:1px solid var(--sv-line)}
.v3-tutorials .tu-ls a b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3-tutorials .tu-ls a:hover b{color:var(--sv-rose)}
.v3-tutorials em{font-style:normal}
.v3-tutorials .tu-ls em,.v3-tutorials .tu-it em,.v3-tutorials .tu-li em{font-size:11.5px;color:var(--sv-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.v3-tutorials .tu-all{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px;font-size:13px;font-weight:600;color:var(--sv-rose)}
.v3-tutorials .tu-all svg{transition:transform .15s}
.v3-tutorials .tu-all:hover svg{transform:translateX(3px)}

/* 你想做什么：6 格 + 问小互 */
.v3-tutorials .tu-goals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.v3-tutorials .tu-g{min-width:0;padding:18px;border-radius:22px;background:var(--sv-raise);box-shadow:var(--sv-sh-1),0 0 0 1px var(--sv-line);display:flex;flex-direction:column;transition:box-shadow .15s}
.v3-tutorials .tu-g.big{grid-column:span 2;background:linear-gradient(160deg,color-mix(in srgb,var(--sv-rose) 9%,var(--sv-raise)),var(--sv-raise) 55%)}
.v3-tutorials .tu-g.on{box-shadow:var(--sv-sh-1),0 0 0 2px var(--sv-rose)}
.v3-tutorials .tu-hd{display:flex;align-items:baseline;gap:8px;text-align:left;width:100%}
.v3-tutorials .tu-hd b{font-size:19px;letter-spacing:-.02em;font-weight:700}
.v3-tutorials .tu-hd span{font-size:12.5px;color:var(--sv-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.v3-tutorials .tu-hd svg{margin-left:auto;align-self:center;color:var(--sv-ink-3);transition:transform .15s,color .15s}
.v3-tutorials .tu-hd:hover svg{transform:translateX(3px);color:var(--sv-rose)}
.v3-tutorials .tu-g.on .tu-hd svg{transform:rotate(90deg);color:var(--sv-rose)}
.v3-tutorials .tu-cov{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 6px}
.v3-tutorials .tu-g.big .tu-cov{grid-template-columns:repeat(4,minmax(0,1fr))}
.v3-tutorials .tu-cov a{display:block;border-radius:9px;overflow:hidden;box-shadow:0 0 0 1px var(--sv-line)}
.v3-tutorials .tu-cov img,.v3-tutorials .tu-cov .tu-nopic{width:100%;aspect-ratio:1200/630;object-fit:cover;transition:transform .3s}
.v3-tutorials .tu-cov a:hover img{transform:scale(1.05)}
.v3-tutorials .tu-it{display:flex;gap:10px;align-items:baseline;font-size:13.5px;padding:7px 0;border-top:1px solid var(--sv-line)}
.v3-tutorials .tu-it b{font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3-tutorials .tu-it:hover b{color:var(--sv-rose)}
.v3-tutorials .tu-up{margin-top:auto;padding-top:10px;font-size:13px;color:var(--sv-ink-2)}
.v3-tutorials .tu-up button{font-weight:600;color:var(--sv-rose)}
.v3-tutorials .tu-up button:hover{text-decoration:underline;text-underline-offset:3px}
.v3-tutorials .tu-sep{color:var(--sv-ink-3);margin:0 6px}
.v3-tutorials .tu-ask{grid-column:span 2;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--sv-bg-2),color-mix(in srgb,var(--sv-rose) 10%,var(--sv-bg-2)));box-shadow:inset 0 0 0 1px var(--sv-line)}
.v3-tutorials .tu-ask:hover{box-shadow:inset 0 0 0 1px var(--sv-line-2),var(--sv-sh-1)}
.v3-tutorials .tu-ask .orb{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--sv-rose) 14%,var(--sv-raise));box-shadow:0 0 0 1px color-mix(in srgb,var(--sv-rose) 22%,transparent);color:var(--sv-rose)}
.v3-tutorials .tu-ask .orb svg{width:21px;height:21px}
.v3-tutorials .tu-ask b{font-size:19px;letter-spacing:-.02em}
.v3-tutorials .tu-ask p{font-size:14px;color:var(--sv-ink-2);max-width:32em;line-height:1.65;margin:0}
.v3-tutorials .tu-go{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--sv-rose)}
.v3-tutorials .tu-ask:hover .tu-go svg{transform:translateX(3px)}
.v3-tutorials .tu-go svg{transition:transform .15s}

/* 展开的文章列表（脚本插在被点那一行的下面，占满整行） */
.v3-tutorials .tu-det{grid-column:1/-1;min-width:0;padding:20px 22px;border-radius:22px;background:var(--sv-bg-2);box-shadow:inset 0 0 0 1px var(--sv-line);scroll-margin-top:84px;scroll-margin-bottom:24px}
.v3-tutorials .tu-dh{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.v3-tutorials .tu-dh b{font-size:19px;letter-spacing:-.02em}
.v3-tutorials .tu-dh span{font-size:12.5px;color:var(--sv-ink-3)}
.v3-tutorials .tu-dh button{margin-left:auto;font-size:22px;line-height:1;color:var(--sv-ink-3);padding:2px 9px 4px;border-radius:8px}
.v3-tutorials .tu-dh button:hover{background:var(--sv-bg-3);color:var(--sv-ink)}
.v3-tutorials .tu-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.v3-tutorials .tu-li{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--sv-line);min-width:0}
.v3-tutorials .tu-li img,.v3-tutorials .tu-li .tu-nopic{width:104px;aspect-ratio:1200/630;object-fit:cover;border-radius:9px;box-shadow:0 0 0 1px var(--sv-line)}
.v3-tutorials .tu-li b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;line-height:1.45;font-weight:600}
.v3-tutorials .tu-li:hover b{color:var(--sv-rose)}
.v3-tutorials .tu-li small{display:block;font-size:11.5px;color:var(--sv-ink-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3-tutorials .tu-dm{margin-top:14px}

/* 再往前一步 */
.v3-tutorials .tu-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.v3-tutorials .tu-more a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:start;padding:20px;border-radius:20px;background:var(--sv-bg-2);box-shadow:inset 0 0 0 1px var(--sv-line);transition:box-shadow .15s}
.v3-tutorials .tu-more a:hover{box-shadow:inset 0 0 0 1px var(--sv-line-2),var(--sv-sh-1)}
.v3-tutorials .tu-more .ic{grid-row:span 3;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--sv-raise);box-shadow:0 0 0 1px var(--sv-line);color:var(--sv-rose)}
.v3-tutorials .tu-more .ic svg{width:21px;height:21px}
.v3-tutorials .tu-more b{font-size:17px}
.v3-tutorials .tu-more span{font-size:13px;color:var(--sv-ink-2)}
.v3-tutorials .tu-more em{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--sv-rose);margin-top:4px}
.v3-tutorials .tu-more a:hover em svg{transform:translateX(3px)}
.v3-tutorials .tu-more em svg{width:13px;height:13px;transition:transform .15s}

/* 栏宽按内容区算（侧栏在不在都一样）：内容区窄于 900 就 6 格改两列，窄于 720 系列卡改一列 */
.v3-tutorials .v3-ph{container-type:inline-size;container-name:tu}
@container tu (max-width:900px){
  .v3-tutorials .tu-goals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v3-tutorials .tu-ask{grid-column:auto}
  .v3-tutorials .tu-dl{grid-template-columns:1fr}
}
@container tu (max-width:720px){
  .v3-tutorials .tu-series{grid-template-columns:1fr}
}
@media (max-width:640px){
  .v3-tutorials .tu-h{padding-bottom:20px}
  .v3-tutorials .tu-n{gap:20px}
  .v3-tutorials .tu-n b{font-size:26px}
  .v3-tutorials .tu-lab{margin:34px 0 12px}
  .v3-tutorials .tu-lab h2{font-size:19px}
  .v3-tutorials .tu-bd{padding:16px 16px 18px}
  .v3-tutorials .tu-bd h3{font-size:21px}
  .v3-tutorials .tu-goals{grid-template-columns:1fr;gap:12px}
  .v3-tutorials .tu-g{padding:16px}
  .v3-tutorials .tu-g.big{grid-column:auto}
  .v3-tutorials .tu-g.big .tu-cov{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v3-tutorials .tu-g.big .tu-cov a:nth-child(4){display:none}
  .v3-tutorials .tu-more{grid-template-columns:1fr}
  .v3-tutorials .tu-det{padding:14px 14px 16px;border-radius:18px}
  .v3-tutorials .tu-li{grid-template-columns:84px minmax(0,1fr);gap:10px}
  .v3-tutorials .tu-li img,.v3-tutorials .tu-li .tu-nopic{width:84px}
  .v3-tutorials .tu-li em{display:none}
}