:root{
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --hy:HY,"PingFang SC","Heiti SC",sans-serif;
  --num:Barlow,HY,"PingFang SC",sans-serif;
  --ink:#17140A;--yellow:#FFDD33;--red:#F0372B;
  --mk:#fff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:56px}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--ink);background:var(--yellow);overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 20px}

/* ───── 左边的目录：电脑上竖在左边，手机上收进左下角的「目录」按钮 ───── */
.chip{position:fixed;z-index:40;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:6px;max-width:calc(100vw - 130px);padding:5px 12px;border:0;border-radius:99px;background:rgba(20,18,10,.82);color:#fff;font:600 12px/1.6 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chip::before{content:"";flex:none;width:12px;height:9px;background:linear-gradient(currentColor 0 0) 0 0/100% 1.5px,linear-gradient(currentColor 0 0) 0 50%/100% 1.5px,linear-gradient(currentColor 0 0) 0 100%/100% 1.5px;background-repeat:no-repeat}
.pnav{position:fixed;z-index:40;display:flex;flex-direction:column;gap:6px;color:var(--nav-c,var(--ink));transition:color .3s}
.pnav::before{content:"";position:absolute;left:4px;top:14px;bottom:14px;border-left:1.5px dashed currentColor;opacity:.35}
.pnav a{position:relative;display:flex;align-items:center;gap:10px;padding:4px 0;font-size:12px;font-weight:600;line-height:1.4;color:inherit;text-decoration:none;white-space:nowrap}
.pnav i{flex:none;width:9px;height:9px;border-radius:50%;border:1.5px solid color-mix(in srgb,currentColor 50%,transparent);background:var(--nav-bg,var(--yellow));transition:transform .25s,background .25s,border-color .25s}
.pnav a span{opacity:.45;transition:opacity .25s}
.pnav a:hover span{opacity:.85}
.pnav a:hover i{border-color:currentColor}
.pnav a.on i{background:var(--nav-on,var(--red));border-color:var(--nav-on,var(--red));transform:scale(1.35)}
.pnav a.on span{opacity:1;font-weight:700}
@media (max-width:819px){
  .pnav{left:12px;bottom:calc(52px + env(safe-area-inset-bottom));gap:4px;padding:12px 18px 12px 14px;border-radius:14px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 6px 24px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
  .pnav::before{left:18px;top:26px;bottom:26px}
  .pnav a{padding:7px 0;font-size:14px}
  .pnav i{background:#fff}
  .pnav.open{opacity:1;visibility:visible;transform:none}
}
@media (min-width:820px){
  .chip{display:none}
  .pnav{left:18px;top:50%;transform:translateY(-50%)}
  .pnav a span{position:absolute;left:16px;padding:1px 6px;border-radius:6px;background:var(--nav-bg,var(--yellow));opacity:0;pointer-events:none;transition:opacity .2s}
  .pnav a.on span{opacity:0}
  .pnav a:hover span{opacity:1}
}
@media (min-width:1280px){
  .pnav{left:28px}
  .pnav a span{position:static;padding:0;background:none;opacity:.45;pointer-events:auto}
  .pnav a.on span{opacity:1}
}

/* ───── 首页 ───── */
.home{--ul:var(--red);padding:28px 0 64px;border-bottom:3px solid var(--ink)}
.hero{display:grid;gap:30px}
.cover{position:relative;width:min(68vw,290px);aspect-ratio:3/4;border-radius:16px;overflow:hidden;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:#222;container-type:inline-size}
.cover img{position:absolute;left:0;top:0;width:100%;height:124%;object-fit:cover;object-position:60% 50%}
.hi h1{font-family:var(--hy);font-weight:400;font-size:clamp(40px,11.5vw,76px);line-height:1.1;letter-spacing:-.01em}
.hi-lead{margin-top:16px;font-family:var(--hy);font-size:clamp(21px,5.6vw,34px);line-height:1.45}
.hi-lead span{color:var(--red)}
.hi-p{margin-top:16px;font-size:16px;font-weight:600;line-height:1.75;color:#4A4535}
.hi-q{width:fit-content;max-width:100%;margin-top:20px;padding:14px 18px;border-radius:14px;background:var(--ink);color:#FFF6CC;font-size:14px;line-height:1.7;box-shadow:5px 5px 0 var(--red)}
.hi-q b{display:block;color:var(--yellow);font-size:16px}
.home-h{font-family:var(--hy);font-weight:400;font-size:clamp(32px,8.6vw,52px);line-height:1.1}

/* 工作经历：一条时间线，每张卡底下标去哪个 Part 看；整张卡都能点（有两个 Part 的，点卡片去第一个） */
.exp{margin-top:56px}
.path-lead{margin-top:8px;font-size:14.5px;font-weight:700;line-height:1.55;color:#4A4535}
.path{position:relative;display:grid;gap:12px;margin-top:18px;padding-left:22px}
.path::before{content:"";position:absolute;left:6px;top:14px;bottom:14px;border-left:2.5px solid var(--ink)}
.path>li{position:relative}
.path>li::before{content:"";position:absolute;left:-22px;top:16px;width:15px;height:15px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink)}
.path>li:last-child::before{background:var(--red)}
.pc,.path-edu>div{position:relative;display:flex;flex-direction:column;height:100%;padding:12px 14px;border-radius:14px;background:#fff;border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.pc:has(a:active){transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.path-edu>div{background:transparent;border-style:dashed;box-shadow:none}
.path time{align-self:flex-start;white-space:nowrap;font-size:12px;font-weight:700;line-height:1.5;padding:0 8px;border-radius:6px;background:var(--ink);color:var(--yellow)}
.path b{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;margin-top:6px;font-size:16px;line-height:1.4}
.path b small{white-space:nowrap;font-size:12px;font-weight:700;color:#8A8270}
.path-role{display:block;margin-top:1px;font-size:13px;line-height:1.5;color:#4A4535;text-wrap:pretty}
.path-edu span{display:block;font-size:13.5px;line-height:1.5;color:#4A4535}
.path p{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(23,20,10,.22);font-size:13.5px;font-weight:700;line-height:1.55;text-wrap:pretty}
.to{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:auto;padding-top:10px}
.to a{font-size:12px;font-weight:800;line-height:1.5;color:var(--red);text-decoration:none}
.to a::after{content:" ↓"}
.to a:first-child::before{content:"";position:absolute;inset:0;border-radius:12px}
.to a+a{position:relative;z-index:1}
.to a:hover{text-decoration:underline}

/* 我能为你解决什么问题：三个模块，点了跳到对应的 Part。Part 几放在右下角箭头旁边 */
.mods{margin-top:56px}
.mods-k{margin-top:6px;font-size:15px;font-weight:700;color:#4A4535}
.mod-list{display:grid;gap:14px;margin-top:18px}
.mod-list a{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;height:100%;padding:16px 16px 16px 18px;border:3px solid var(--ink);border-radius:16px;background:#fff;box-shadow:6px 6px 0 var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.mod-list a::after{content:"↓";position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--yellow);font-size:16px;font-weight:700;line-height:1}
.mod-list a:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.mod-list .pn{align-self:flex-end;margin:auto 38px 4px 0;font-size:12px;font-weight:800;line-height:1.5;padding:0 10px}
.mod-list strong{font-family:var(--hy);font-weight:400;font-size:22px;line-height:1.3;text-decoration:underline 3px var(--red);text-underline-offset:6px;text-decoration-skip-ink:none}
.mod-list small{margin-top:4px;font-size:13px;line-height:1.5;color:#6A6350}

/* ───── 右下角的小人（从主页搬来），点一下回到首页 ───── */
.mascot{position:fixed;right:6px;bottom:calc(6px + env(safe-area-inset-bottom));z-index:40;width:84px;pointer-events:none}
.mascot-body{display:flex;flex-direction:column;align-items:center;width:100%;padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;animation:bob 3s ease-in-out infinite;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 6px 10px rgba(0,0,0,.28))}
.mascot-img{display:grid;width:100%}
.mascot-img img{grid-area:1/1;width:100%;height:auto;opacity:0}
.mascot-img img.on{opacity:1}
.mascot-tip{order:1;display:block;width:max-content;margin:-6px auto 0;padding:2px 8px;border-radius:99px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;line-height:1.5;pointer-events:none;transition:opacity .25s}
.mascot.home .mascot-tip{opacity:0}
.mascot.pop .mascot-img{animation:mpop .45s cubic-bezier(.2,1.6,.4,1)}
.mascot.jump .mascot-body{animation:mjump .3s ease-in-out 6 alternate}
.mascot-say{position:absolute;right:78%;bottom:70%;width:max-content;max-width:min(58vw,220px);background:#fff;color:var(--ink);border:2.5px solid var(--ink);border-radius:14px 14px 4px 14px;padding:6px 12px;font-size:13px;font-weight:600;line-height:1.4;box-shadow:3px 3px 0 var(--ink);animation:mpop .3s cubic-bezier(.2,1.6,.4,1)}
.mascot-x{position:absolute;right:0;top:2px;z-index:1;width:22px;height:22px;border-radius:50%;border:0;padding:0;background:rgba(20,20,20,.55);color:#fff;font-size:14px;line-height:1;pointer-events:auto;cursor:pointer}
.mascot i{position:absolute;top:8%;font-style:normal;font-size:20px;animation:heart 1.6s ease-out both;pointer-events:none}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes mpop{from{transform:scale(.6) rotate(-12deg)}}
@keyframes mjump{to{transform:translateY(-14px)}}
@keyframes heart{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:1;transform:translate(0,-20px) scale(1.1)}100%{transform:translate(var(--dx),-230px) scale(.8);opacity:0}}
@media (min-width:820px){.mascot{width:136px;right:18px;bottom:12px}}
@media (prefers-reduced-motion:reduce){.mascot-body,.mascot.pop .mascot-img{animation:none}}

/* ───── 写在最后 + 联系我 ───── */
.outro{--ul:var(--red);padding:64px 0 110px;background:var(--yellow)}
.wrapup{margin-bottom:56px;padding-bottom:48px;border-bottom:2.5px solid var(--ink)}
.wrapup-k{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;line-height:1.6;padding:1px 10px;border-radius:99px;background:var(--ink);color:var(--yellow)}
.wrapup-h{margin-top:14px;font-family:var(--hy);font-weight:400;font-size:clamp(26px,6.8vw,40px);line-height:1.3;text-wrap:balance}
.wrapup-steps{display:grid;gap:10px;margin-top:24px;counter-reset:wu}
.wrapup-steps li{display:grid;grid-template-columns:28px 1fr;gap:6px 12px;align-items:baseline;align-content:start;counter-increment:wu;padding:14px 16px 15px;border-radius:12px;background:rgba(255,255,255,.4);border:1.5px solid rgba(23,20,10,.75)}
.wrapup-steps li::before{content:counter(wu,decimal-leading-zero);font-family:var(--hy);font-size:20px;line-height:1;color:var(--red)}
/* 名字列定宽（按最长的「媒体（品牌星球）」），四个「懂X」上下对成一列 */
.wrapup-steps b{display:grid;grid-template-columns:8.25em auto;justify-content:start;align-items:center;gap:4px 8px;font-size:16px;line-height:1.4}
.wrapup-steps b small{font-size:11px;font-weight:800;letter-spacing:.06em;line-height:1.6;padding:0 8px;border-radius:99px;background:var(--red);color:#fff}
.wrapup-steps p{grid-column:2;font-size:13.5px;line-height:1.7;color:#3A3526;text-wrap:pretty}
.wrapup-now{margin-top:20px;padding:18px 20px;border-radius:14px;background:var(--ink);color:#FFF6CC;font-size:15px;font-weight:700;line-height:1.8;text-wrap:pretty}
@media (max-width:819px){.wrapup-now br{display:none}}
.wrapup-en{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:22px;text-wrap:balance;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;font-size:20px;line-height:1.35;letter-spacing:.01em}
.wrapup-en::before{content:"";flex:none;width:32px;height:2px;background:var(--red)}
.thx{font-family:var(--hy);font-weight:400;font-size:clamp(32px,8.6vw,52px);line-height:1.15}
.contact{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin-top:28px}
.tel{display:inline-flex;flex-direction:column;padding:9px 20px 10px;border-radius:15px;background:var(--ink);color:var(--yellow);font-size:20px;font-weight:700;line-height:1.3;letter-spacing:.02em;text-decoration:none;white-space:nowrap;box-shadow:5px 5px 0 var(--red)}
.tel small{font-size:11px;font-weight:600;letter-spacing:0;color:#fff;opacity:.75}
.resume{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:15px;background:var(--red);color:#fff;font-family:var(--hy);font-size:21px;line-height:1.2;text-decoration:none;box-shadow:5px 5px 0 var(--ink)}
.resume::before{content:"";flex:none;width:16px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M10 1v14M4 9l6 6 6-6M2 20h16' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M10 1v14M4 9l6 6 6-6M2 20h16' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.tel:active,.resume:active{transform:translate(2px,2px)}
.legal{margin-top:40px;font-size:11px;opacity:.6}

@media (min-width:820px){
  .home{padding:56px 0 96px}
  .hero{grid-template-columns:330px minmax(0,1fr);gap:64px;align-items:center}
  .cover{width:330px}
  .cover img{translate:0 -6.6%}
  .hi-lead{margin-top:20px}
  .hi-p{margin-top:20px;font-size:18px}
  .hi-q{margin-top:26px;padding:16px 22px;font-size:15px}
  .hi-q b{font-size:18px}
  .hi-q b br{display:none}
  .exp,.mods{margin-top:88px}
  .path-lead{font-size:16px}
  .path{grid-template-columns:minmax(122px,.74fr) repeat(4,minmax(0,1fr));gap:14px;padding:22px 0 0}
  .path::before{left:8px;right:8px;top:7px;bottom:auto;border-left:0;border-top:2.5px solid var(--ink)}
  .path::after{content:"";position:absolute;right:0;top:1px;border:7px solid transparent;border-left:11px solid var(--ink);border-right:0}
  .path>li::before{left:14px;top:-22px}
  .path-edu{align-self:start}
  .mods-k{font-size:16px}
  .mod-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px}
  .mod-list a{padding:20px 20px 18px}
  .mod-list a::after{right:20px;bottom:18px}
  .mod-list strong{font-size:24px}
  .mod-list small{font-size:13.5px}
  .outro{padding:96px 0 120px}
  .wrapup{margin-bottom:64px;padding-bottom:56px}
  .wrapup-steps{gap:12px;margin-top:28px}
  .wrapup-steps li{grid-template-columns:28px 200px minmax(0,1fr);align-items:center;gap:16px;padding:16px 22px}
  .wrapup-steps p{grid-column:3;font-size:15px}
  .wrapup-now{margin-top:24px;padding:22px 28px;font-size:16px}
  .wrapup-en{flex-direction:row;align-items:center;margin-top:26px;font-size:28px;gap:18px}
  .wrapup-en::before{width:48px}
}
@media (hover:hover) and (min-width:820px){
  .pc:has(.to a:hover),.mod-list a:hover{transform:translate(-2px,-2px)}
  .pc:has(.to a:hover){box-shadow:6px 6px 0 var(--ink)}
  .mod-list a:hover{box-shadow:8px 8px 0 var(--ink)}
}

/* ───── 总览 ───── */
.intro{padding:36px 0 64px}
.part{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:14px;font-weight:700;margin-bottom:18px}
.pn{padding:2px 12px;border-radius:99px;border:2px solid currentColor}
.pt{font-family:var(--hy);font-weight:400;font-size:20px}
.pw{font-size:12px;padding:2px 10px;border-radius:99px;background:var(--ink);color:var(--yellow)}
.platforms{display:flex;gap:6px}
.platforms img{width:28px;height:28px;border-radius:7px}
.p1-h{font-family:var(--hy);font-weight:400;font-size:clamp(40px,11vw,84px);line-height:1.08;letter-spacing:-.01em}
.p1-h span{display:block;overflow:hidden}
.p1-h span:last-child{color:var(--red)}
.p1-note{margin-top:14px;font-size:13px;color:color-mix(in srgb,var(--ink) 55%,var(--yellow))}
.lede{max-width:34em;margin-top:18px;font-size:17px;font-weight:500}
.road{display:grid;gap:14px;margin-top:34px;counter-reset:r}
.road a{position:relative;display:grid;gap:2px;padding:16px 18px 16px 64px;border:3px solid var(--ink);border-radius:14px;background:#fff;box-shadow:6px 6px 0 var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.road a:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.rd-n{position:absolute;left:16px;top:14px;font-family:var(--num);font-size:30px;line-height:1;color:var(--red)}
.road strong{font-family:var(--hy);font-weight:400;font-size:22px;line-height:1.3}
.road small{font-size:12.5px;opacity:.7}
.rd-x{margin-top:8px;font-size:15px}
.rd-x>span{white-space:nowrap}
.rd-x em{margin:0 .1em;font-family:var(--num);font-style:normal;font-size:32px;line-height:1;color:var(--red);white-space:nowrap}
.road li{opacity:0;transform:translateY(24px);transition:opacity .5s,transform .6s cubic-bezier(.2,1.2,.4,1)}
.road.in li{opacity:1;transform:none}
.road.in li:nth-child(2){transition-delay:.12s}
.road.in li:nth-child(3){transition-delay:.24s}

/* ───── 阶段导航 ───── */
.sbar{position:sticky;top:0;z-index:30;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;padding:10px 20px;background:var(--sb-bg,#FFF3E2);color:var(--sb-fg,#3A2A20);transition:background .35s,color .35s;font-size:12px;font-weight:700}
.sbar a{display:grid;gap:5px;text-decoration:none;opacity:.55;transition:opacity .2s}
.sbar a.on{opacity:1}
.sbar i{display:block;height:4px;border-radius:2px;background:color-mix(in srgb,currentColor 22%,transparent);overflow:hidden}
.sbar i::before{content:"";display:block;height:100%;width:calc(var(--p,0)*100%);background:var(--sb-ac,#FF2442)}

/* ───── 阶段：共用组件 ───── */
.stage{position:relative;padding:56px 0 80px;background:var(--bg);color:var(--fg);overflow:clip}
.sl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;font-weight:600;color:var(--muted)}
.sl-n{padding:2px 12px;border-radius:99px;background:var(--ac);color:var(--on-ac);font-weight:700}
.st-h{margin-top:14px;font-size:clamp(32px,8.6vw,60px);line-height:1.15;font-weight:400}
.st-h{clip-path:inset(0 0 100% 0);transform:translateY(16px);transition:clip-path .8s cubic-bezier(.2,.9,.3,1),transform .8s cubic-bezier(.2,.9,.3,1)}
.st-h.in{clip-path:inset(0 0 -10% 0);transform:none}
.bridge{max-width:36em;margin-top:16px;padding-left:12px;border-left:3px solid var(--ac);font-size:15px;color:var(--muted)}
.acct{display:grid;grid-template-columns:52px 1fr;gap:4px 12px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.acct-ava{width:52px;height:52px;border-radius:50%;object-fit:cover}
.acct-name{font-weight:700;font-size:17px;text-decoration:underline;text-decoration-thickness:1.5px}
.acct small{display:block;font-size:13px;color:var(--muted)}
.acct-bio{grid-column:1/-1;font-size:13px;line-height:1.6;color:var(--muted);margin-top:6px}
.accts{display:grid;gap:10px;align-content:start}
.own{position:relative;padding:20px 18px 16px;border:1.5px dashed var(--ac);border-radius:14px;font-size:14.5px}
.own-k{position:absolute;top:-11px;left:14px;padding:0 10px;border-radius:99px;background:var(--ac);color:var(--on-ac);font-size:12px;font-weight:700;line-height:22px}
.own p+p{margin-top:6px}
.own b{color:var(--ac2,var(--ac))}
.from{margin-top:12px!important;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);text-wrap:pretty}
.from span{display:inline-block;margin-right:8px;padding:0 8px;border-radius:5px;background:var(--line);color:var(--fg);font-size:12px;font-weight:700}

.nums{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}
.num{padding:14px 14px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.num b{display:block;font-family:var(--num);font-size:34px;line-height:1.1;color:var(--ac2,var(--ac));white-space:nowrap}
.num small{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.nums.two{grid-template-columns:1fr}
.ng{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ng-k{grid-column:1/-1;font-size:12px;font-weight:700;color:var(--muted)}
.ng-k::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--ac)}
.team .ng-k::before{background:transparent;border:1.5px solid var(--muted)}
.team .num b{color:var(--fg)}

.case{margin-top:60px}
.case-h{text-wrap:balance;display:flex;gap:10px;align-items:baseline;font-size:20px;line-height:1.4;font-weight:700}
.case-h span{flex:none;font-family:var(--num);font-size:22px;color:var(--ac)}
.case-p{text-wrap:pretty;max-width:38em;margin-top:10px;font-size:15.5px}
.more-k{margin-top:22px;font-size:13px;font-weight:700;color:var(--muted)}
.learn{position:relative;margin-top:72px;padding:28px 20px 18px;border-radius:14px;background:var(--fg);color:var(--bg);font-size:16px;font-weight:600;line-height:1.6}
/* 「能力沉淀」是贴在卡片上沿的标签，和「我负责」同一种做法，字更大 */
.learn>span:first-child{position:absolute;top:-17px;left:16px;display:inline-flex;align-items:center;gap:6px;padding:0 16px;border-radius:99px;background:var(--lk-bg,var(--ac));color:var(--lk-fg,var(--on-ac));font-size:15px;font-weight:800;line-height:34px;letter-spacing:.06em;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.learn>span:first-child::before{content:"✦";font-size:13px}

/* ───── 荧光笔：默认画满；动效下先收起，进入视口或所在 beat 亮起时再扫开 ───── */
mark{--mk-h:.64em;padding:0 .1em;margin:0 -.1em;color:var(--fg,var(--ink));font-weight:700;background:linear-gradient(var(--mk),var(--mk)) 0 84%/100% var(--mk-h) no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.learn mark{color:inherit}
u{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-skip-ink:none;text-decoration-color:var(--ul,var(--ac2,var(--ac)))}
.learn{--ul:var(--lk-bg,currentColor)}
@media (prefers-reduced-motion:no-preference){
  html:not(.mk-off) mark{background-size:0 var(--mk-h);transition:background-size .2s}
  html:not(.mk-off) mark.in,html:not(.mk-off) .reel.player li.on mark{background-size:100% var(--mk-h);transition:background-size .7s cubic-bezier(.3,.7,.2,1) .3s}
  html:not(.mk-off) .reel.player li.on mark:nth-of-type(2){transition-delay:.75s}
  html:not(.mk-off) .reel.player li.on mark:nth-of-type(n+3){transition-delay:1.2s}
}

/* ───── 播放框的章节条和控制键 ───── */
.tabs{display:flex;align-items:stretch;gap:8px;max-width:38em;margin-top:14px}
.tab{flex:1 1 0;min-width:0;display:grid;grid-template-rows:1fr auto;gap:6px;padding:8px 0 6px;border:0;background:none;color:var(--muted);font:700 13px/1.35 var(--sans);text-align:left;cursor:pointer;transition:color .25s}
.tab span{text-wrap:balance}
.tab[aria-current],.tab.done{color:var(--fg)}
.trk{display:block;height:4px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,currentColor 20%,transparent);transition:background .25s}
/* 折叠的次要内容 */
.more{max-width:38em;margin-top:16px}
.more summary{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;border:1.5px solid color-mix(in srgb,currentColor 40%,transparent);color:var(--muted);font-size:13px;font-weight:700;line-height:1.3;list-style:none;cursor:pointer;transition:color .2s,border-color .2s}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";font-size:17px;line-height:1;transition:rotate .3s}
.more summary:hover,.more[open] summary{color:var(--fg);border-color:var(--fg)}
.more[open] summary::after{rotate:45deg}
@supports (interpolate-size:allow-keywords){
  .more{interpolate-size:allow-keywords}
  .more::details-content{block-size:0;overflow:clip;transition:block-size .35s cubic-bezier(.2,.9,.3,1),content-visibility .35s allow-discrete}
  .more[open]::details-content{block-size:auto}
}

/* 改标题：划掉旧的，打出新的 */
.rw{display:grid;gap:6px;margin-top:18px;max-width:560px}
.rw-old,.rw-new{position:relative;padding:12px 14px;border-radius:12px}
.rw-old{background:var(--line);color:var(--muted)}
.rw-new{background:var(--card);border:2px solid var(--ac)}
.rw-k{display:block;font-size:11.5px;font-weight:700;margin-bottom:2px;color:var(--muted)}
/* 删除线用背景画，折成两行时每行各画一条 */
.rw-old s{text-decoration:none;font-size:15px;background:linear-gradient(var(--ac),var(--ac)) 0 58%/0 2px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .5s .2s}
.rw.in .rw-old s{background-size:100% 2px}
.rw-new strong{display:block;font-family:NB,var(--sans);font-weight:900;font-size:20px;line-height:1.4}
.rw em{display:block;margin-top:4px;font-style:normal;font-size:13px;font-weight:700}
.rw-old em{color:var(--muted)}
.rw em b{font-family:var(--num);font-size:1.4em;font-weight:400;line-height:1}
.rw-new em{color:var(--ac2,var(--ac));opacity:0;transition:opacity .4s}
.rw.in .rw-new em{opacity:1;transition-delay:var(--done,1.6s)}
.rw-ar{justify-self:center;font-weight:700;color:var(--ac);line-height:1}
.type .ch{opacity:0}
.rw.in .type .ch{animation:ch .01s calc(.75s + var(--i)*55ms) both}
@keyframes ch{to{opacity:1}}

/* ───── 缩短页面的几种折法：滑动卡片、关键词、折叠行、分页签、图片位 ───── */
.blk-h{margin-top:48px;font-size:19px;line-height:1.4;font-weight:700;text-wrap:balance}
.blk-h+.reel,.blk-h+.own{margin-top:24px}
.blk-h+.deck,.blk-h+.covers{margin-top:14px}
.dots{display:grid;gap:8px}
.dots li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.65}
.dots li::before{content:"";position:absolute;left:2px;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--ac)}
.dots b{color:var(--ac2,var(--ac))}
.more .dots,.more>p{margin-top:12px}
.more>p+p{margin-top:6px}

/* 关键词：核心页面只放这些，细节折起来 */
.kw{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.kw li{padding:3px 10px;border-radius:8px;background:color-mix(in srgb,var(--ac) 16%,transparent);font-size:13px;font-weight:600;line-height:1.5}
.own .kw{margin-top:2px}
.own .kw+p{margin-top:12px}
.own .more{margin-top:12px}
.own .more p{font-size:14px}

/* 滑动卡片：基础态（编辑、没脚本）一张张往下排；.live 时横着滑，一次看一张 */
.deck{display:grid;gap:14px;margin-top:16px}
.card{position:relative;min-width:0;padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line);color:var(--fg)}
.card-k{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--muted)}
.card-k span{padding:0 9px;border-radius:99px;background:var(--ac);color:var(--on-ac);font-family:var(--num);font-size:13px;line-height:21px}
.card-h{margin-top:6px;font-size:18px;line-height:1.4;font-weight:700;text-wrap:balance}
.card-p{margin-top:12px;font-size:14.5px;line-height:1.7;text-wrap:pretty}
.viz{position:relative;margin-top:12px}
.card .more{margin-top:12px}
.deck.live{position:relative;display:flex;align-items:flex-start;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin:16px -20px 0;padding:2px 20px 4px;scroll-padding:0 20px;scrollbar-width:none}
.deck.live::-webkit-scrollbar{display:none}
.deck.live .card{flex:0 0 min(86%,430px);scroll-snap-align:start;transition:opacity .35s}
.deck.live:not(.fits) .card:not(.on){opacity:.5}
.dnav{display:flex;align-items:center;gap:8px;margin-top:12px}
.deck.fits+.dnav{display:none}
.dnav>button{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1.5px solid currentColor;border-radius:50%;background:none;color:var(--fg);cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.dnav>button:hover:not(:disabled){background:var(--fg);color:var(--bg)}
.dnav>button:disabled{opacity:.25;cursor:default}
.dnav svg{width:14px;height:14px;fill:currentColor}
.dts{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.dts::-webkit-scrollbar{display:none}
.dt{flex:none;padding:5px 11px;border-radius:99px;border:1.5px solid color-mix(in srgb,currentColor 30%,transparent);background:none;color:var(--muted);font:700 12.5px/1.3 var(--sans);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.dt.on{background:var(--ac);border-color:var(--ac);color:var(--on-ac)}

/* 步骤：带序号的一排 */
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;margin-top:16px;counter-reset:st}
.steps li{position:relative;display:grid;align-content:start;gap:2px;padding-top:32px;font-size:13.5px;font-weight:700;line-height:1.35}
.steps li::before{counter-increment:st;content:counter(st);position:absolute;top:0;left:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ac);color:var(--on-ac);font-family:var(--num);font-size:13px}
.steps li:not(:last-child)::after{content:"";position:absolute;top:11px;left:30px;right:-4px;height:2px;border-radius:1px;background:color-mix(in srgb,var(--ac) 45%,transparent)}
.steps small{font-size:11.5px;font-weight:500;line-height:1.45;color:var(--muted)}
/* 说明长的时候竖着排 */
.steps.v{grid-auto-flow:row;gap:14px}
.steps.v li{padding:2px 0 0 34px;min-height:24px;font-size:14px}
.steps.v li:not(:last-child)::after{top:30px;bottom:-10px;left:11px;right:auto;width:2px;height:auto}
.steps.v small{font-size:12.5px}

/* 折叠行：一行关键词，点开看全文 */
.acc{margin-top:48px}
.acc .blk-h{margin:0 0 4px}
.acc-r{margin-top:8px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.acc-r summary{position:relative;display:flex;align-items:baseline;gap:10px;padding:12px 40px 12px 14px;font-size:15px;font-weight:700;line-height:1.45;list-style:none;cursor:pointer}
.acc-r summary::-webkit-details-marker{display:none}
.acc-r summary b{flex:none;padding:0 8px;border-radius:6px;background:color-mix(in srgb,var(--ac) 22%,transparent);font-size:12px;line-height:21px}
.acc-r summary::after{content:"+";position:absolute;right:14px;top:10px;font-size:20px;font-weight:400;line-height:1;color:var(--muted);transition:rotate .3s}
.acc-r[open] summary::after{rotate:45deg}
.acc-r>:not(summary){margin:0 14px 14px;font-size:14.5px;line-height:1.7}
.acc-r.no summary b{background:#FF5C7A;color:#fff}
.acc-r.why summary b{background:#FFD166;color:#2A1A00}
.acc-r.fix summary b{background:#3DDC84;color:#062A14}
/* 卡片里的折叠行：去掉外框，用分隔线 */
.card .acc-r{margin:0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
.card .acc-r summary{padding:10px 30px 10px 0;font-size:14.5px}
.card .acc-r summary::after{right:2px;top:8px}
.card .acc-r>:not(summary){margin:0 0 12px;font-size:13.5px}
.card-k+.acc-r,.cmp-lead+.acc-r{margin-top:10px}
@supports (interpolate-size:allow-keywords){
  .acc-r{interpolate-size:allow-keywords}
  .acc-r::details-content{block-size:0;overflow:clip;transition:block-size .35s cubic-bezier(.2,.9,.3,1),content-visibility .35s allow-discrete}
  .acc-r[open]::details-content{block-size:auto}
}

/* 分页签：几组图只露一组 */
.segbar{display:inline-flex;gap:4px;margin-top:18px;padding:4px;border-radius:99px;background:color-mix(in srgb,var(--fg) 10%,transparent)}
.segbar button{padding:7px 16px;border:0;border-radius:99px;background:none;color:var(--muted);font:700 13.5px/1.2 var(--sans);cursor:pointer;transition:background .25s,color .25s}
.segbar button[aria-selected="true"]{background:var(--ac);color:var(--on-ac)}
.seg.live .pane:not(.on){display:none}

/* 预留的图片位：上传前显示占位图和「待补充」 */
.slot{margin-top:12px}
.slot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.slot figcaption{margin-top:6px;font-size:12px;color:var(--muted)}
.slot.empty img{border:1.5px dashed color-mix(in srgb,var(--fg) 30%,transparent)}
.slot.empty figcaption::after{content:"（图片位 · 待补充）"}

/* ───── 阶段一 氧心力 ───── */
.s1{--bg:#FFF3E2;--fg:#3A2A20;--muted:#7B6556;--ac:#FF2442;--on-ac:#fff;--card:#fff;--line:#F0DFCB;--mk:#FFB8C4}
.s1 .learn{--mk:rgba(255,36,66,.62)}
.s1::before,.s1::after{content:"";position:absolute;z-index:0;border-radius:50%;pointer-events:none}
.s1::before{width:260px;height:260px;right:-90px;top:40px;background:#BFE3F5}
.s1::after{width:200px;height:200px;left:-120px;top:52%;background:#FFC9D6}
.s1 .wrap{position:relative;z-index:1}
.s1 .st-h{font-family:KL,var(--sans)}
.ly-note{margin-top:12px;font-size:14px;font-weight:700;opacity:.3;transition:opacity .5s,color .5s}
.ly-note.in{opacity:1;color:var(--ac)}

.duel{display:grid;gap:12px;margin-top:18px}
.dl{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.dl img,.noimg{width:72px;height:72px;border-radius:10px;object-fit:cover}
.noimg{display:grid;place-items:center;background:#F3ECE4;color:#9A8676;font-weight:700;font-size:12px}
.dl a{display:block;font-size:14.5px;font-weight:600;line-height:1.45;text-decoration:none}
.dbar{display:block;height:12px;margin:8px 0 4px;border-radius:6px;width:max(2.5%,calc(var(--v)/var(--max,8000)*100%));background:var(--ac);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.9,.3,1) .2s}
.lose .dbar{background:#C9B8A8}
.duel.in .dbar{transform:none}
.dl b{font-family:var(--num);font-size:20px;color:var(--ac);margin-right:8px}
.lose b{color:var(--muted)}
.dl small{font-size:12px;color:var(--muted)}
/* 先占着位置、调暗去色，读者看得到后面有什么，亮起时下面的内容也不会被推开 */
.picks{margin-top:4px;opacity:.3;filter:grayscale(1);transform:translateY(8px);pointer-events:none;transition:opacity .5s,filter .5s,transform .6s cubic-bezier(.2,.9,.3,1)}
.picks.in{opacity:1;filter:none;transform:none;pointer-events:auto}

.formula{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px}
.formula span{padding:6px 12px;border-radius:10px;background:var(--card);border:1.5px solid var(--fg);font-weight:700;font-size:14px;line-height:1.3;text-align:center;transition:background .4s,color .4s,border-color .4s,transform .5s cubic-bezier(.2,1.6,.4,1)}
.formula span.in{background:var(--ac);border-color:var(--ac);color:var(--on-ac);transform:scale(1.05)}
.formula span.in small{color:inherit;opacity:.85}
.formula small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.formula i{font-style:normal;font-weight:700;color:var(--ac)}

.mm{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:18px;max-width:560px}
.mm>div{padding:14px;border-radius:12px;text-align:center;background:var(--card);border:1px solid var(--line)}
.mm small{display:block;font-size:12px;color:var(--muted)}
.mm b{display:block;margin-top:2px;font-size:16px;line-height:1.35}
.mm-b{border:2px solid var(--ac)!important}
.mm-x{font-family:var(--num);font-size:34px;color:var(--ac);transform:scale(0);transition:transform .5s cubic-bezier(.2,1.6,.4,1) .3s}
.mm.in .mm-x{transform:none}
.mm-to{max-width:560px;margin-top:12px;padding:14px 16px;border-radius:12px;background:var(--fg);color:var(--bg);opacity:.26;filter:grayscale(1);transform:translateY(8px);pointer-events:none;transition:opacity .5s,filter .5s,transform .6s cubic-bezier(.2,.9,.3,1)}
.mm-to.in{opacity:1;filter:none;transform:none;pointer-events:auto}
.mm-tk{display:block;font-size:12px;font-weight:700;color:#FF8C99;margin-bottom:6px}
.mm-to p{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.mm-to p+p{margin-top:6px}
.mm-to img{width:22px;height:22px;border-radius:6px}

/* ───── 动画播放框（.reel）：一个阶段的案例合成一段分章节的动画 ───── */
/* 基础态（编辑、减少动效）：每一幕的标题、说明和画面依次平铺，画面都是最终状态 */
.reel{margin-top:36px}
.reel .ch+.ch{margin-top:48px}
.scenes>li{margin-top:16px}
.cap{max-width:38em;font-size:16px;line-height:1.75;text-wrap:pretty}
.cap>b{display:inline-block;margin-right:8px;padding:0 10px;border-radius:99px;background:var(--ac);color:var(--on-ac);font-size:12px;line-height:22px;vertical-align:1px}
.art{position:relative;margin-top:12px;padding:18px 16px;border-radius:14px;background:var(--bg);overflow:hidden}
/* 更多爆款：没有原图，先用文字封面；编辑时点封面换成真图，换上的图盖住文字封面 */
.yx .segbar{margin-top:14px}
.covers .tc{position:relative;display:flex;flex-direction:column;justify-content:center;aspect-ratio:3/4;margin:0;padding:28px 10px 10px;border-radius:10px;background:var(--tb);color:var(--tf);overflow:hidden;container-type:inline-size}
.tc::after{content:"";position:absolute;right:-28%;bottom:-22%;width:80%;aspect-ratio:1;border-radius:50%;background:currentColor;opacity:.12}
.tc img{position:absolute;inset:0;z-index:1;height:100%}
.tc img[src*="img/slot.svg"]{opacity:0}
.covers .tc small{position:absolute;top:9px;left:10px;font-size:11px;font-weight:700;color:inherit;opacity:.8}
.tc-t{position:relative;font-family:KL,var(--sans);font-weight:400;font-size:clamp(22px,25cqi,44px);line-height:1.2;text-wrap:balance}
.editing .tc:has(img[src*="img/slot.svg"]){outline:1.5px dashed var(--fg);outline-offset:3px}
.yx .covers em{color:var(--ac)}

/* 播放态：说明叠在一格、画面叠在一格，框的高度 = 最高的那一幕，换幕时页面不跳 */
.reel.player{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "h" "c" "a" "n";padding:14px 16px 16px;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px rgba(58,42,32,.08)}
.reel.player .ch,.reel.player .scenes,.reel.player .scenes>li{display:contents}
.reel.player .ch+.ch{margin:0}
.reel.player .tabs{grid-area:k;max-width:none;margin:0 0 12px}
.reel.player .case-h{grid-area:h;align-self:end;font-size:16px}
.reel.player .case-h span{font-size:18px}
.reel.player .cap{grid-area:c;margin-top:8px;font-size:16px}
.reel.player .art{grid-area:a;margin-top:14px;min-height:240px;display:grid;grid-template-columns:minmax(0,1fr);align-content:center}
.reel.player .case-h,.reel.player .cap,.reel.player .art{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.reel.player li.on>.case-h,.reel.player li.on>.cap,.reel.player li.on>.art{opacity:1;visibility:visible;transition:opacity .4s .1s}
.reel.player:not(:has(li.on)) .ch:first-child li:first-child>*{opacity:.55;visibility:visible}

/* 前后箭头 + 第几页 */
.reel.player .rnav{grid-area:n;display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.rnav button{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1.5px solid currentColor;border-radius:50%;background:none;color:var(--fg);cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.rnav button:hover:not(:disabled){background:var(--fg);color:var(--bg)}
.rnav button:disabled{opacity:.25;cursor:default}
.rnav svg{width:16px;height:16px;fill:currentColor}
.rc{min-width:4em;font-family:var(--num);font-size:14px;color:var(--muted)}

/* 章节：名字 + 按页切开的进度条；点名字跳到这一章第一页。看过的页画浅色，当前页画满 */
.tabs.chs{gap:6px;align-items:end}
.tabs.chs .tab{flex:var(--n,1) 1 0;min-width:max-content;grid-template-rows:auto auto;font-size:12px;white-space:nowrap}
.tabs.chs .tab:hover{color:var(--fg)}
.tabs.chs .tab:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:4px}
.trks{display:flex;gap:3px}
.trks .trk{flex:1}
.tabs.chs .tab.cur,.tabs.chs .tab.done{color:var(--fg)}
.tabs.chs .trk.done{background:color-mix(in srgb,var(--ac) 45%,transparent)}
.tabs.chs .trk.cur{background:var(--ac)}

/* 每一幕的动画：只写起始帧，结束帧就是元素本来的样子，所以平铺态直接是最终画面 */
@keyframes pop{from{opacity:0;transform:scale(.5)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes drop{from{opacity:0;transform:translateY(-36px)}}
@keyframes slide{from{opacity:0;transform:translateX(48px)}}
@keyframes growX{from{transform:scaleX(0)}}
@keyframes growY{from{transform:scaleY(0)}}
@keyframes stamp{from{opacity:0;transform:scale(2.6) rotate(-14deg)}}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes ring{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--ac) 55%,transparent)}to{box-shadow:0 0 0 16px transparent}}
@keyframes fall{from{opacity:0;transform:translateY(-110px)}70%{opacity:1}}
@keyframes deal{from{opacity:0;transform:translate(var(--dx,0),30px) rotate(var(--dr,0deg))}}
@keyframes bounce{0%{opacity:0;transform:translateY(-60px) scale(.6)}60%{opacity:1;transform:translateY(6px) scale(1.08)}80%{transform:translateY(-3px) rotate(8deg)}100%{transform:none}}
.reel.player li.on .art *{animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.9,.3,1.15)}

/* 现有增长点：左边青年文化系列的笔记，右边能爆的原因、没解决的问题；手机上问题挪到下面一整行 */
.a-judge,.reel.player .a-judge{grid-template-columns:minmax(0,38%) minmax(0,1fr);grid-template-areas:"shot why" "no no";align-items:center;gap:14px}
.a-judge{display:grid}
.aj-shot{grid-area:shot;width:100%;height:auto;border-radius:10px;background:#fff;box-shadow:0 6px 18px rgba(58,42,32,.14)}
.aj-why{grid-area:why}
.aj-k{font-size:13px;font-weight:700;color:var(--muted)}
.aj-ok{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.aj-ok li{padding:6px 12px;border-radius:99px;background:#E5F4E8;color:#1F7A3A;font-size:14px;font-weight:700}
.aj-ok li::before{content:"✓ "}
.aj-no{grid-area:no;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px;border-radius:12px;border:2px dashed var(--ac);font-size:17px;font-weight:700}
.aj-no em{flex:none;padding:3px 10px;border-radius:6px;background:var(--ac);color:#fff;font-size:13px;font-style:normal;transform:rotate(-5deg)}
.reel.player li.on .aj-shot{animation-name:rise;animation-duration:.5s;animation-delay:.1s}
.reel.player li.on .aj-ok li{animation-name:pop;animation-duration:.45s;animation-delay:.4s}
.reel.player li.on .aj-ok li+li{animation-delay:.65s}
.reel.player li.on .aj-no{animation:rise .5s 1.1s both,shake .5s 1.8s}
.reel.player li.on .aj-no em{animation:stamp .45s 2.1s both}

/* 内容矩阵：漏斗一层层落下 */
.a-funnel{justify-items:center;gap:6px}
.a-funnel p{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;color:#fff;font-size:15px;font-weight:700;clip-path:polygon(0 0,100% 0,93% 100%,7% 100%)}
.a-funnel p:nth-of-type(1){width:100%;background:var(--ac)}
.a-funnel p:nth-of-type(2){width:80%;background:#FF5C70}
.a-funnel p:nth-of-type(3){width:60%;background:#FF95A1}
.a-funnel p b{padding:0 8px;border-radius:99px;background:rgba(255,255,255,.28);font-size:12px}
.af-n{font-size:13px;font-weight:700;color:var(--muted)}
.reel.player li.on .a-funnel p{animation-name:drop;animation-duration:.55s}
.reel.player li.on .a-funnel p:nth-of-type(1){animation-delay:.15s}
.reel.player li.on .a-funnel p:nth-of-type(2){animation-delay:.45s}
.reel.player li.on .a-funnel p:nth-of-type(3){animation-delay:.75s}
.reel.player li.on .af-n{animation-name:rise;animation-duration:.5s;animation-delay:1.2s}
.reel.player li.on .af-n:last-child{animation-delay:1.6s}

/* 执行：同一套图文模板发出一排笔记 */
.at-k{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.at-k span{padding:2px 10px;border-radius:99px;background:var(--ac);color:#fff}
.a-tpl ul{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.a-tpl li{display:grid;align-content:start;gap:6px;font-size:12px;font-weight:600;line-height:1.4}
.a-tpl li i{position:relative;display:block;aspect-ratio:3/4;border-radius:8px;background:linear-gradient(160deg,#FFE3E7,#FF8C99)}
.a-tpl li i::before,.a-tpl li i::after{content:"";position:absolute;left:12%;height:9%;border-radius:3px;background:#fff}
.a-tpl li i::before{top:16%;width:76%}
.a-tpl li i::after{top:30%;width:52%}
.reel.player li.on .at-k span{animation-name:pop;animation-duration:.4s;animation-delay:.1s}
.reel.player li.on .at-k span+span{animation-delay:.3s}
.reel.player li.on .a-tpl li{animation-name:deal;animation-duration:.6s}
.reel.player li.on .a-tpl li:nth-child(1){--dx:100%;--dr:-8deg;animation-delay:.6s}
.reel.player li.on .a-tpl li:nth-child(2){--dr:4deg;animation-delay:.85s}
.reel.player li.on .a-tpl li:nth-child(3){--dx:-100%;--dr:10deg;animation-delay:1.1s}

/* 数据：三层的最高赞藏，条越往下越短 */
.a-lv{gap:14px}
.a-lv p{display:grid;grid-template-columns:3em minmax(0,1fr) 6.6em;align-items:center;gap:10px;font-size:13px}
.a-lv p b{color:var(--ac)}
.a-lv i{height:16px;border-radius:8px;background:linear-gradient(90deg,#FF7A8A,var(--ac));width:max(3%,calc(var(--v)/4000*100%));transform-origin:left}
.a-lv em{font-style:normal;font-size:12px;font-weight:700;text-align:right;white-space:nowrap}
.a-lv em span{font-family:var(--num);font-size:18px}
.a-lv .weak b,.a-lv .weak em{color:var(--muted)}
.a-lv .weak i{background:#C9B8A8}
.a-lv small{font-size:12px;color:var(--muted)}
.reel.player li.on .a-lv i{animation-name:growX;animation-duration:1s;animation-delay:.2s}
.reel.player li.on .a-lv p:nth-of-type(2) i{animation-delay:.45s}
.reel.player li.on .a-lv p:nth-of-type(3) i{animation-delay:.7s}
.reel.player li.on .a-lv .weak{animation:shake .5s 1.6s}

/* 现象：两篇笔记的赞藏比高低 */
.a-race,.reel.player .a-race{grid-template-columns:1fr 1fr;gap:14px;align-items:end}
.ar{display:grid;gap:8px}
.ar a{display:grid;gap:6px;font-size:12.5px;font-weight:600;line-height:1.4;text-decoration:none}
.ar img,.ar .noimg{width:52px;height:52px;border-radius:10px;object-fit:cover}
.ar .noimg{font-size:10px}
.ar-bar{position:relative;display:block;height:120px;border-bottom:2px solid var(--line)}
.ar-bar i{position:absolute;left:18%;right:18%;bottom:0;height:100%;border-radius:8px 8px 0 0;background:var(--ac);transform-origin:bottom}
.lose .ar-bar i{height:5%;min-height:6px;background:#C9B8A8}
.ar em{font-style:normal;font-size:13px;font-weight:700;color:var(--ac)}
.ar em span{font-family:var(--num);font-size:24px}
.lose em{color:var(--muted)}
.reel.player li.on .ar-bar i{animation-name:growY;animation-duration:1.1s;animation-delay:.3s}

/* 选题差异：两篇并排，同一行比受众、比标题；受众条一宽一窄 */
.a-gap,.reel.player .a-gap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 10px;align-content:center}
.ag{display:grid;grid-row:span 7;grid-template-rows:subgrid;align-content:start;padding:12px;border-radius:12px;background:var(--card);border:1.5px solid var(--line)}
.ag.win{border:2px solid var(--ac)}
.ag-h{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;line-height:1.2}
.ag-h img,.ag-h .noimg{flex:none;width:30px;height:30px;border-radius:7px;object-fit:cover;font-size:7px}
.ag-k{margin-top:10px;font-size:11.5px;font-weight:700;color:var(--muted)}
.ag-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.ag-bar i{position:relative;height:10px;border-radius:99px;background:color-mix(in srgb,var(--muted) 16%,transparent);overflow:hidden}
.ag-bar i::before{content:"";position:absolute;inset:0 auto 0 0;width:100%;border-radius:inherit;background:var(--ac);transform-origin:left}
.lose .ag-bar i::before{width:30%;background:var(--muted)}
.ag-bar b{font-size:15px;color:var(--ac)}
.lose .ag-bar b{color:var(--muted)}
.ag-t{font-size:12.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.ag-q{align-self:start;justify-self:start;padding:3px 8px;border-radius:6px;background:color-mix(in srgb,var(--ac) 12%,transparent);font-size:14px;font-weight:800;line-height:1.45}
.lose .ag-q{background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--muted);font-weight:700}
.ag-r{margin-top:6px;font-size:13px;font-weight:700;line-height:1.5;color:var(--ac);text-wrap:pretty}
.ag-r::before{content:"✓ "}
.lose .ag-r{color:var(--fg)}
.lose .ag-r::before{content:"✗ ";color:var(--ac)}
.reel.player li.on .ag{animation-name:rise;animation-duration:.5s;animation-delay:.1s}
.reel.player li.on .ag.lose{animation-delay:.3s}
.reel.player li.on .ag-bar i::before{animation:growX .9s .6s both}
.reel.player li.on .ag-r{animation-name:pop;animation-duration:.45s;animation-delay:1.4s}
.reel.player li.on .lose .ag-r{animation:pop .45s 1.7s both,shake .5s 2.2s}


/* 策略和动作：换选题后的三篇一张张滑进来 */
.ap-k{font-size:13px;font-weight:700;color:var(--muted)}
.a-picks ul{display:grid;gap:8px;margin-top:8px}
.a-picks li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--card);font-size:13.5px;line-height:1.4}
.a-picks a{text-decoration:none}
.a-picks em{flex:none;font-style:normal;font-size:12px;font-weight:700;color:var(--ac)}
.a-picks em span{font-family:var(--num);font-size:18px}
.reel.player li.on .a-picks li{animation-name:slide;animation-duration:.55s;animation-delay:.2s}
.reel.player li.on .a-picks li:nth-child(2){animation-delay:.5s}
.reel.player li.on .a-picks li:nth-child(3){animation-delay:.8s}

/* 问题：原标题 + 一个跳出来的问号 */
.a-q{justify-items:center}
.aq-card{width:100%;max-width:340px;padding:14px;border-radius:12px;background:var(--card)}
.aq-card small{font-size:11.5px;font-weight:700;color:var(--muted)}
.aq-card p{font-size:16px;font-weight:700}
.aq-card em{font-style:normal;font-size:13px;font-weight:700;color:var(--muted)}
.aq-mark{margin-top:6px;font-family:var(--hy);font-size:76px;line-height:1;color:var(--ac)}
.reel.player li.on .aq-card{animation-name:rise;animation-duration:.5s;animation-delay:.1s}
.reel.player li.on .aq-mark{animation:bounce .9s .7s both}

/* 钩子：公式前两块亮起，拍照被放大，喝咖啡被划掉 */
.art .formula{margin-top:0;gap:4px;flex-wrap:nowrap}
.art .formula span{padding:5px 8px;font-size:13px}
.art .formula small{font-size:10.5px}
.a-rw .rw{gap:4px}
.a-rw .rw-old,.a-rw .rw-new{padding:9px 12px}
.a-rw .rw-new strong{font-size:17px}
.formula span.lit{background:var(--ac);border-color:var(--ac);color:var(--on-ac)}
.formula span.lit small{color:inherit;opacity:.85}
.ah-vs{display:flex;align-items:center;gap:14px;margin-top:18px}
.ah-vs p{display:grid;justify-items:center;gap:4px;font-weight:700}
.ah-vs .yes{font-size:17px}
.ah-vs .yes span{font-size:46px;line-height:1}
.ah-vs .no{position:relative;font-size:14px;color:var(--muted)}
.ah-vs .no span{font-size:28px;line-height:1;filter:grayscale(1)}
.ah-vs .no::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:3px;border-radius:2px;background:var(--ac);transform:rotate(-20deg)}
.reel.player li.on .a-hook .formula span.lit{animation-name:pop;animation-duration:.45s;animation-delay:.15s}
.reel.player li.on .a-hook .formula span.lit:nth-of-type(2){animation-delay:.45s}
.reel.player li.on .ah-vs .yes{animation-name:pop;animation-duration:.6s;animation-delay:1s}
.reel.player li.on .ah-vs .no{animation-name:rise;animation-duration:.5s;animation-delay:1.5s}
.reel.player li.on .ah-vs .no::after{animation:growX .35s 2s both}

/* 拆解：公式第三块亮起，旧标题划掉、新标题打出来 */
.a-rw .rw{margin-top:14px}
.reel.player li.on .a-rw .formula span:nth-of-type(3){animation:pop .45s .15s both}

/* 发现：线索一颗颗掉进两个桶，大多落在低预算 */
.al-k{display:flex;align-items:baseline;gap:6px;font-size:14px;font-weight:700}
.al-k b{font-family:var(--num);font-size:26px;color:var(--ac)}
.al-k small{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted)}
.al-bins{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:8px;margin-top:12px}
.al-bin{display:grid;gap:8px}
.al-dots{display:flex;flex-wrap:wrap;align-content:flex-end;gap:6px;min-height:62px;padding:10px;border:2px solid var(--line);border-top:0;border-radius:0 0 14px 14px}
.al-dots i{width:14px;height:14px;border-radius:50%;background:#C9B8A8}
.goal .al-dots{border-color:var(--ac)}
.goal .al-dots i{background:var(--ac)}
.al-bin>p:last-child{font-size:12px;color:var(--muted);text-align:center;line-height:1.4}
.al-bin>p:last-child b{display:block;font-size:14px;color:var(--fg)}
.al-x{align-self:center;font-family:var(--num);font-size:32px;font-weight:700;color:var(--ac)}
.reel.player li.on .al-dots i{animation-name:fall;animation-duration:.6s;animation-timing-function:cubic-bezier(.5,0,.7,1.4)}
.reel.player li.on .al-dots i:nth-child(2n){animation-delay:.1s}
.reel.player li.on .al-dots i:nth-child(3n){animation-delay:.22s}
.reel.player li.on .al-dots i:nth-child(4n+1){animation-delay:.34s}
.reel.player li.on .al-dots i:nth-child(5n){animation-delay:.46s}
.reel.player li.on .al-dots i:nth-child(n+8){animation-delay:.58s}
.reel.player li.on .al-dots i:nth-child(n+11){animation-delay:.7s}
.reel.player li.on .goal .al-dots i{animation-delay:.9s}
.reel.player li.on .goal .al-dots i+i{animation-delay:1.1s}
.reel.player li.on .al-x{animation:stamp .45s 1.6s both}

/* 动作：两条渠道各走各的路 */
.a-lanes{gap:16px}
.a-lanes p{display:grid;grid-template-columns:28px auto minmax(16px,1fr) auto;align-items:center;gap:8px;font-size:13.5px;font-weight:700}
.a-lanes img{width:28px;height:28px;border-radius:7px}
.a-lanes i{position:relative;height:2px;background:var(--fg);transform-origin:left}
.a-lanes i::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--fg);border-right:0}
.a-lanes b{padding:6px 12px;border-radius:10px;background:var(--ac);color:#fff;font-size:14px}
.a-lanes p+p b{background:var(--fg);color:var(--bg)}
.reel.player li.on .a-lanes p{animation-name:rise;animation-duration:.45s;animation-delay:.15s}
.reel.player li.on .a-lanes p+p{animation-delay:.4s}
.reel.player li.on .a-lanes i{animation:growX .6s .8s both}
.reel.player li.on .a-lanes p+p i{animation-delay:1.1s}
.reel.player li.on .a-lanes b{animation:pop .45s 1.3s both}
.reel.player li.on .a-lanes p+p b{animation-delay:1.6s}

@media (min-width:820px){
  .reel.player{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:"k k" "h a" "c a" "n a";column-gap:36px;padding:20px 24px 24px}
  .reel.player .rnav{justify-content:flex-start;margin-top:0}
  .reel.player .art{margin-top:0;min-height:300px}
  .reel.player .cap{font-size:17px}
  .reel.player .case-h{font-size:19px}
  .reel.player .case-h span{font-size:22px}
  .a-judge,.reel.player .a-judge{grid-template-columns:minmax(0,190px) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:"shot ." "shot why" "shot no" "shot .";gap:18px 22px}
  .a-tpl ul{max-width:400px}
  .tabs.chs .tab{font-size:13px}
}

/* ───── 阶段二 刀法 ───── */
.s2{--bg:#0A0A0A;--fg:#F5F2E8;--muted:#A9A396;--ac:#C8A24A;--ac2:#E9C46A;--on-ac:#0A0A0A;--card:#17150F;--line:#2E2A20;--ac-on-fg:#8A6A1C;padding-top:84px}
.s2 .st-h{font-family:var(--hy);color:var(--fg)}
.tape{position:absolute;top:18px;left:-20px;right:-20px;padding:4px 0;background:var(--ac);color:#0A0A0A;font-family:Pirata,var(--hy);font-size:22px;text-align:center;transform:rotate(-1.5deg);white-space:nowrap;overflow:hidden}
.s2{--mk:rgba(200,162,74,.55)}
.s2 .learn{background:var(--ac);color:#0A0A0A;--mk:rgba(255,255,255,.55);--lk-bg:#0A0A0A;--lk-fg:#E9C46A}

.gauge{max-width:560px;margin-top:20px}
/* 数据参考：三段色条，两个分界值标在段与段之间 */
.g-k{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13.5px;font-weight:700}
.g-k b{padding:0 8px;border-radius:6px;background:color-mix(in srgb,var(--ac) 24%,transparent);font-size:12px;line-height:21px}
.g-track{display:grid;grid-template-columns:1fr 2fr 1fr;height:30px;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.9,.3,1) .2s}
.gauge.in .g-track{transform:none}
.z{display:flex;align-items:center;padding:0 8px;font-size:12px;font-weight:700;white-space:nowrap}
.z:first-child{border-radius:8px 0 0 8px}
.z:last-child{justify-content:flex-end;border-radius:0 8px 8px 0}
.z.bad{background:#3A1A16;color:#FF8C7F}
.z.mid{background:#2B2718}
.z.good{background:#2E3A1C;color:#B9DD7E}
.g-scale{position:relative;height:20px;margin-top:4px;font-family:var(--num);font-size:13px;color:var(--muted)}
.g-scale span{position:absolute;left:25%;translate:-50% 0}
.g-scale span+span{left:75%}
.g-note{margin-top:4px;font-size:11.5px;line-height:1.5;color:var(--muted)}

.ab{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start;margin-top:26px}
.shot img{width:100%;border-radius:12px}
.shot figcaption{margin-top:6px;font-size:11.5px;line-height:1.45;color:var(--muted);text-align:center}
.shot figcaption a{color:var(--ac2,var(--ac));font-weight:700;text-decoration:none}
.shot figcaption a:hover{text-decoration:underline}
.ab .rw{margin-top:10px}

/* 跨平台：两版开头并排，行对齐（画面 / 标题 / 算法和偏好 / 开头文案） */
.pf2{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:10px 12px;margin-top:16px}
.pf2 figure{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
.frame{position:relative;display:block;border-radius:12px;overflow:hidden;background:#000}
.frame img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover}
.dy-prog{position:absolute;left:10px;right:10px;top:10px;display:grid;gap:4px}
.dy-prog i{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.dy-prog i::before{content:"";display:block;width:28%;height:100%;background:#FE2C55;transform:scaleX(0);transform-origin:left;transition:transform 2.4s linear .3s}
.pf2.in .dy-prog i::before{transform:none}
.dy-prog span{font-size:11px;color:#fff;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.6)}
/* 算法逻辑、用户偏好：放在最下面做补充说明 */
.pfx{display:grid;gap:6px;align-content:start;padding-top:8px;border-top:1px dashed color-mix(in srgb,var(--fg) 22%,transparent)}
.pfx li{font-size:12px;line-height:1.5;color:var(--muted)}
.pfx b{display:block;font-size:11.5px;color:var(--ac2,var(--ac))}
.hook{padding:10px;border-radius:10px;background:color-mix(in srgb,var(--fg) 7%,transparent);font-size:12.5px;line-height:1.65;color:var(--muted)}
.hook-k{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:13.5px;font-weight:800;line-height:1.2;color:var(--fg)}
.hook-k img{width:20px;height:20px;border-radius:5px}
.hook-d{display:flex;align-items:baseline;gap:6px;margin-bottom:6px;font-size:12.5px;font-weight:700;color:var(--fg)}
.hook-d b{font-family:var(--num);font-size:26px;font-weight:400;line-height:1;color:var(--ac2,var(--ac))}
.hook-t{display:block}
.hook u{color:var(--fg);font-weight:700;text-decoration-color:var(--ac2,var(--ac));text-decoration-thickness:2px;text-underline-offset:3px}


.cost{display:grid;gap:10px;max-width:560px;margin-top:22px}
.c-row{display:grid;grid-template-columns:7em 1fr 4.5em;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.c-row i{position:relative;height:14px;border-radius:7px;background:#3A3426;width:calc(var(--v)/3*100%);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.9,.3,1)}
.c-row i.range::after{content:"";position:absolute;left:100%;top:0;bottom:0;width:calc(var(--w)/var(--v)*100%);border-radius:0 7px 7px 0;background:repeating-linear-gradient(-45deg,#3A3426 0 4px,transparent 4px 8px)}
.c-row.me i{background:var(--ac2)}
.c-row b{font-family:var(--num);font-size:17px;color:var(--fg);white-space:nowrap}
.c-row.me b{color:var(--ac2)}
.cost.in i{transform:none}

.covers{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:10px -20px 0;padding:0 20px 8px;scroll-padding:0 20px;scrollbar-width:none}
.covers::-webkit-scrollbar{display:none}
.covers li{flex:0 0 40%;max-width:200px;scroll-snap-align:start}
.covers a{display:block;text-decoration:none}
.covers img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px}
.covers span{display:block;margin-top:8px;font-size:12.5px;line-height:1.45}
.covers em{display:block;font-style:normal;font-size:13px;font-weight:700;color:#FF5A4F}
.covers small{display:block;font-size:12px;color:var(--muted)}

/* ───── 阶段三 视频播客 ───── */
.s3{--bg:#F4F1EC;--fg:#1A1A1A;--muted:#6E6A63;--ac:#E3342B;--on-ac:#fff;--card:#fff;--line:#E2DCD2;--mk:rgba(227,52,43,.24)}
.s3 .st-h{font-family:NB,var(--sans);font-weight:900}
.s3 .st-h::first-line{color:var(--fg)}

.ln{stroke-width:3;vector-effect:non-scaling-stroke;fill:none;stroke-linecap:round}
.ln.gray{stroke:#BDB7AD}
.ln.red{stroke:var(--ac);stroke-width:4}
/* 卡片里的反转图去掉外框 */
/* 关键动作 1 的对比：左边一期解释性内容，右边两期情绪叙事，每期带封面、标题、链接和数据 */
.bump{display:grid;grid-template-columns:1fr minmax(48px,22%) 1fr;grid-template-rows:auto 120px;gap:8px 0;max-width:640px;margin-top:20px;padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.bp-k{font-size:12px;font-weight:700;color:var(--muted)}
.bp-k.l{grid-column:1;text-align:right;padding-right:10px}
.bp-k.r{grid-column:3;padding-left:10px}
.bp-l,.bp-r{display:grid;grid-template-rows:1fr 1fr;font-size:12.5px;line-height:1.35}
.bp-l{text-align:right;padding-right:10px}
.bp-r{padding-left:10px}
.bp-l,.bp-r{opacity:0;transition:opacity .6s,transform .7s cubic-bezier(.2,.9,.3,1)}
.bp-l{transform:translateX(-10px)}
.bp-r{transform:translateX(10px)}
.bump.in .bp-l,.bump.in .bp-r{opacity:1;transform:none}
.bump.in .bp-r{transition-delay:1.5s}
.bump:not(.in) .bp-k.r{opacity:.3}
.bump.in .bp-k.r{transition-delay:1.5s}
.bp-k{transition:opacity .5s}
.bp-l p,.bp-r p{display:grid;align-content:center}
.bump b{font-family:var(--num);font-size:24px;line-height:1.1}
.bump small{display:block;font-size:11.5px;color:var(--muted)}
.bump .red{color:var(--ac)}
.bump .gray{color:#8C877F}
.bp-svg{width:100%;height:100%;overflow:visible}
.bp-svg{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.4,0,.2,1) .2s}
.bump.in .bp-svg{clip-path:inset(0 0 0 0);transition-delay:.5s}
/* 卡片里的交叉图：去掉外框；手机上在标题下面，电脑上在标题右边 */
.card .bump{grid-template-columns:1fr 40px 1fr;margin-top:14px;padding:14px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
.card .bump .bp-k{white-space:nowrap;font-size:11.5px}
/* 宽卡片（阶段三关键动作）：电脑上一张约 720px，看一张露半张，左右滑；两张拉成一样高 */
.deck.even{align-items:stretch}
.deck.even .card{display:flex;flex-direction:column}
.deck.even .duo{margin-block:auto}
/* 关键动作 1：左边欧莱雅，右边于冬琪&酸奶哥，中间 VS */
.vs2{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,2fr);gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.vs2-g{display:grid;gap:6px;align-content:start}
.vs2-k{font-size:14px;font-weight:800;line-height:1.4}
.vs2-g:first-child .vs2-k{color:var(--ac)}
.vs2-p{font-size:12.5px;line-height:1.65}
.vs2-x{align-self:start;margin-top:2px;padding:0 7px;border-radius:99px;background:var(--fg);color:var(--bg);font-family:var(--num);font-size:13px;line-height:20px}
.eps2{display:grid;gap:10px;margin-top:4px}
.vs2-g:last-child .eps2{grid-template-columns:1fr 1fr;gap:8px}
.eps2 a{display:grid;gap:3px;text-decoration:none}
.eps2 img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.eps2 a>span{font-size:12px;line-height:1.45;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eps2 em{display:grid;font-style:normal;font-size:11.5px;line-height:1.45;color:var(--muted)}
.eps2 em i{font-style:normal;margin-right:4px}
.eps2 em span+span{white-space:nowrap}
.vs2-p b{white-space:nowrap}
.eps2 em b{font-family:var(--num);font-size:14px;color:var(--ac)}
.vs2-g:last-child .eps2 em b{color:#8C877F}
.vs2 .eps2 li{opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s cubic-bezier(.2,.9,.3,1)}
.vs2.in .eps2 li{opacity:1;transform:none}
.vs2.in .vs2-g:last-child .eps2 li{transition-delay:.25s}
.vs2.in .vs2-g:last-child .eps2 li+li{transition-delay:.4s}
/* 首发抖音：一期节目，两个平台的播放 */
.duo{display:grid;gap:12px;padding-top:12px}
.vp-one{display:block;text-decoration:none}
.vp-one img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.vp-one span{display:block;margin-top:6px;font-size:13px;line-height:1.45;font-weight:600}
.plays{display:grid;gap:12px;align-content:center}
.pl{display:grid;grid-template-columns:3.6em minmax(0,1fr) auto;gap:4px 10px;align-items:center}
.pl p{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.pl p b{font-size:14px}
.pl p small{padding:0 6px;border-radius:5px;background:var(--ac);color:#fff;font-size:11px;font-weight:700;line-height:18px}
.pl i{height:14px;border-radius:7px;background:#C9C3B8;width:calc(var(--v)/10*100%);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.9,.3,1) .2s}
.pl.dy i{background:var(--ac)}
.pl em{font-style:normal;font-family:var(--num);font-size:18px;white-space:nowrap}
.pl.dy em{color:var(--ac)}
.pl-s{grid-column:2/-1;font-size:11.5px;color:var(--muted)}
.plays.in .pl i{transform:none}
.plays.in .pl+.pl i{transition-delay:.5s}
.s3 .learn{background:var(--ac);color:#fff;--mk:rgba(26,26,26,.4);--lk-bg:#1A1A1A;--lk-fg:#fff}

/* 阶段二：两个账号并排；卡片里的图缩小 */
.accts{grid-template-columns:1fr 1fr;gap:8px}
.accts .acct{grid-template-columns:36px minmax(0,1fr);gap:2px 8px;padding:10px}
.accts .acct-ava{width:36px;height:36px}
.accts .acct-name{font-size:14.5px}
.accts .acct small{font-size:11.5px}
.card .gauge{margin-top:14px}
.card .ab{grid-template-columns:96px minmax(0,1fr);gap:12px;margin-top:12px}
.card .ab .rw{margin-top:0}
.card .rw-new strong{font-size:17px}
.card .pf2{margin-top:12px}
.card .cost{margin-top:16px}
/* 我负责：一句定位 + 两条流程链 */
.own-lead{font-size:16px;font-weight:800;color:var(--fg)}
.flow{display:grid;gap:4px;margin-top:10px}
.flow>b{font-size:12.5px;line-height:1.4}
.flow ol{display:flex;flex-wrap:wrap;gap:6px 0}
.flow li{position:relative;padding:0 6px;border-radius:7px;background:color-mix(in srgb,var(--ac) 18%,transparent);font-size:12.5px;font-weight:700;line-height:26px;opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s}
.flow li+li{margin-left:15px}
.flow li+li::before{content:"→";position:absolute;left:-13px;color:var(--muted);font-weight:400}
.flow.in li{opacity:1;transform:none}
.flow.in li:nth-child(2){transition-delay:.15s}
.flow.in li:nth-child(3){transition-delay:.3s}
.flow.in li:nth-child(4){transition-delay:.45s}
.flow+.from{margin-top:14px!important}
/* 卡片里的案例：虚线隔开，挂在方法下面 */
.eg{margin-top:16px;padding-top:14px;border-top:1px dashed color-mix(in srgb,var(--fg) 25%,transparent)}
.eg-k{display:inline-block;padding:0 8px;border-radius:6px;background:color-mix(in srgb,var(--ac) 24%,transparent);font-size:12px;font-weight:700;line-height:21px}
.eg-h{margin-top:6px;font-size:15.5px;font-weight:700;line-height:1.4}
.eg-h b{font-family:var(--num);font-size:24px;font-weight:400;line-height:1;color:var(--ac2,var(--ac));white-space:nowrap}
.card .eg .ab{margin-top:10px}
/* 阶段二：账号情况和我负责并列在同一张卡里，各挂一个标签 */
.own.pair{display:grid;padding:0}
.pair .oc{position:relative;min-width:0;padding:22px 18px 22px}
.pair .oc+.oc{border-top:1.5px dashed var(--ac)}
.accts .acct:only-child{grid-column:1/-1}
.own .own-p{margin-top:12px;font-size:14px;line-height:1.75}
/* 阶段二的卡片：顶上那句是标题，下面一句是做法，各块之间留出空 */
.s2 .card-k{flex-wrap:nowrap;align-items:baseline;gap:10px;font-size:15px;line-height:1.5;color:var(--fg);text-wrap:balance;word-break:keep-all}
.s2 .card-k span{flex:none}
.s2 .card .gauge{margin-top:20px}
.s2 .card .pf2,.s2 .card .cost{margin-top:20px}
.s2 .eg{margin-top:22px;padding-top:18px}
.card .rw em{text-wrap:balance}

/* ───── Part 2 阶段一 品牌星球直播 ───── */
.b1{--bg:#15101F;--fg:#F4F0FA;--muted:#ADA2C4;--ac:#FA9D3B;--ac2:#FFB866;--on-ac:#1A1206;--card:#221A33;--line:#382D50;--mk:rgba(250,157,59,.5);background:radial-gradient(110% 40% at 85% 0,#3A2360 0,var(--bg) 70%)}
.b1 .st-h{font-family:var(--hy)}
.b1 .acct-name{text-decoration:none}
.onair{grid-column:1/-1;display:inline-flex;align-items:center;gap:8px;justify-self:start;margin-top:8px;padding:3px 12px;border-radius:99px;background:rgba(0,0,0,.35);font-size:13px;font-weight:700}
.onair i,.vr-live i{width:8px;height:8px;border-radius:50%;background:#FF3B5C;animation:blink 1.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.b1 .learn{background:var(--ac);color:#1A1206;--mk:rgba(255,255,255,.6);--lk-bg:#15101F;--lk-fg:#FFB866}

/* 预热：两张预告海报发进来，右边是内容模板 */
.v-posters{height:196px}
.v-posters a{position:absolute;top:6px;width:100px;border-radius:8px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.v-posters img{width:100%}
.v-posters .vp1{left:0;transform:rotate(-6deg)}
.v-posters .vp2{left:58px;top:16px;transform:rotate(5deg)}
.v-tpl{position:absolute;right:0;top:4px;left:172px;display:grid;justify-items:start;gap:4px}
.v-tpl span{padding:5px 10px;border-radius:8px;background:var(--ac);color:var(--on-ac);font-size:13px;font-weight:700;line-height:1.3}
.v-tpl i{margin-left:10px;font-style:normal;font-weight:700;line-height:1;color:var(--ac)}
.deck.live .card.in .v-posters a{animation:deal .6s cubic-bezier(.2,.9,.3,1.15) both}
.deck.live .card.in .v-posters .vp1{--dx:-40%;--dr:-14deg;animation-delay:.1s}
.deck.live .card.in .v-posters .vp2{--dx:40%;--dr:14deg;animation-delay:.3s}
.deck.live .card.in .v-tpl>*{animation:pop .4s cubic-bezier(.2,.9,.3,1.15) both}
.deck.live .card.in .v-tpl>:nth-child(1){animation-delay:.7s}
.deck.live .card.in .v-tpl>:nth-child(2){animation-delay:.85s}
.deck.live .card.in .v-tpl>:nth-child(3){animation-delay:1s}
.deck.live .card.in .v-tpl>:nth-child(4){animation-delay:1.15s}
.deck.live .card.in .v-tpl>:nth-child(5){animation-delay:1.3s}

/* 开播：画面一层层加上去 */
.vs-tv{position:relative;aspect-ratio:16/9;border-radius:10px;background:#0C0814;border:1px solid var(--line);overflow:hidden;font-size:11px;font-weight:700;line-height:1.2}
.vs-tv>span{position:absolute;display:flex;align-items:center;padding:0 8px;border-radius:6px}
.vs-title{left:4%;right:4%;top:6%;height:13%;background:rgba(250,157,59,.18);color:var(--ac2)}
.vs-cam{left:4%;top:24%;bottom:24%;width:44%;align-items:flex-end!important;padding:6px 8px!important;background:linear-gradient(160deg,#3A2E52,#241B36);color:var(--muted)}
.vs-cam i{position:absolute;left:50%;top:18%;width:26%;aspect-ratio:1;margin-left:-13%;border-radius:50%;background:#5A4A78;box-shadow:0 30px 0 12px #5A4A78}
.vs-ppt{right:4%;top:24%;bottom:24%;width:44%;align-items:flex-start!important;padding:7px 8px!important;background:#F4F0FA;color:#15101F}
.vs-ppt::after{content:"";position:absolute;left:8px;right:22%;top:44%;height:30%;background:repeating-linear-gradient(#C9C0DA 0 3px,transparent 3px 9px)}
.vs-guide{left:4%;right:4%;bottom:6%;height:13%;background:var(--ac);color:var(--on-ac)}
.vs-push{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;font-weight:700}
.vs-push b{padding:3px 10px;border-radius:8px;background:var(--line)}
.vs-push i{flex:0 0 28px;height:2px;background:var(--ac);position:relative}
.vs-push i::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--ac);border-right:0}
.vs-push small{font-size:12px;color:var(--muted)}
.deck.live .card.in .vs-cam{animation:pop .45s .1s both}
.deck.live .card.in .vs-title{animation:drop .5s .6s both}
.deck.live .card.in .vs-ppt{animation:slide .5s .9s both}
.deck.live .card.in .vs-guide{animation:rise .5s 1.2s both}
.deck.live .card.in .vs-push i{transform-origin:left;animation:growX .5s 1.6s both}

/* 场控：弹幕往上冒，商品链接弹出来 */
.v-room{height:180px;padding:12px;border-radius:12px;background:linear-gradient(180deg,#2C2142,#120D1B);overflow:hidden}
.vr-live{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;background:rgba(0,0,0,.45);font-size:12.5px;font-weight:700}
.vr-live span{font-family:var(--num);font-size:15px}
.vr-dm{position:absolute;left:12px;bottom:12px;display:grid;gap:6px;width:52%}
.vr-dm li{display:flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:11px;width:var(--w);background:rgba(255,255,255,.13)}
.vr-dm li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--ac2)}
.vr-dm li::after{content:"";flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.3)}
.vr-buy{position:absolute;right:12px;bottom:12px;display:grid;gap:2px;width:42%;padding:10px;border-radius:10px;background:#fff;color:#15101F;font-size:13.5px;line-height:1.3;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.vr-buy small{font-size:11px;font-weight:600;color:#7A6F8A}
.deck.live .card.in .vr-dm li{animation:rise .5s both}
.deck.live .card.in .vr-dm li:nth-child(1){animation-delay:.2s}
.deck.live .card.in .vr-dm li:nth-child(2){animation-delay:.5s}
.deck.live .card.in .vr-dm li:nth-child(3){animation-delay:.8s}
.deck.live .card.in .vr-dm li:nth-child(4){animation-delay:1.1s}
.deck.live .card.in .vr-buy{animation:stamp .5s 1.5s both}

/* 复盘：单期长文一排，合集一大张 */
.v-assets{display:grid;gap:8px}
.va-k{font-size:12px;font-weight:700;color:var(--muted)}
.va-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.va-row img{width:100%;aspect-ratio:720/509;object-fit:cover;border-radius:6px}
.va-big{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;align-items:center;padding:8px;border-radius:10px;background:color-mix(in srgb,var(--ac) 16%,transparent);font-size:13px;font-weight:700;line-height:1.45;text-decoration:none}
.va-big img{width:100%;border-radius:6px}
.deck.live .card.in .va-row li{animation:pop .4s both}
.deck.live .card.in .va-row li:nth-child(2){animation-delay:.15s}
.deck.live .card.in .va-row li:nth-child(3){animation-delay:.3s}
.deck.live .card.in .va-row li:nth-child(4){animation-delay:.45s}
.deck.live .card.in .va-big{animation:rise .5s 1s both}
.deck.live .card.in .va-k:nth-of-type(2){animation:rise .5s .8s both}

/* ───── Part 2 阶段二 辉途智能 ───── */
.b2{--bg:#14268F;--fg:#fff;--muted:#BCC6F7;--ac:#3DDC84;--ac2:#3DDC84;--on-ac:#062A14;--card:#1C30A0;--line:rgba(255,255,255,.17);--mk:rgba(61,220,132,.42);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px}
.b2 .st-h{font-family:var(--hy)}
.scan{position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(transparent,rgba(61,220,132,.14) 85%,var(--ac));animation:scan 6s linear infinite;pointer-events:none}
@keyframes scan{from{transform:translateY(-120px)}to{transform:translateY(100vh)}}
.wt-acct,.accts .wt-acct{grid-template-columns:1fr}
.wt-logo{height:40px;width:auto;padding:7px 10px;border-radius:8px;background:#fff}
.b2 .learn{background:#FFD21F;color:#14268F;--mk:rgba(255,255,255,.7);--lk-bg:#14268F;--lk-fg:#fff}

/* 展会卡片：两张现场照片 + 取得结果 */
.v-duo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.v-duo figure{position:relative;margin:0}
.v-duo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px}
.v-duo figcaption{position:absolute;left:6px;bottom:6px;padding:1px 8px;border-radius:99px;background:var(--ac);color:var(--on-ac);font-size:11.5px;font-weight:700}
.deck.live .card.in .v-duo figcaption{animation:pop .45s .4s both}
.deck.live .card.in .v-duo figure+figure figcaption{animation-delay:.55s}
.res{margin-top:14px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--ac) 12%,transparent)}
.res-k{font-size:12.5px;font-weight:800;color:var(--ac)}
.res ul{display:grid;gap:6px;margin-top:6px}
.res li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.6}
.res li::before{content:"✓";position:absolute;left:0;font-weight:800;color:var(--ac)}
.res b{color:var(--ac);white-space:nowrap}

.retro-k{margin-top:14px;font-size:13px;font-weight:700;color:#FFD21F}

/* 更多品牌物料：三个数字、手册翻页、两栏传播成果 */
.blk-p{max-width:36em;margin-top:8px;font-size:15px;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.tile{display:block;min-width:0;padding:12px 10px;border-radius:12px;background:var(--card);border:1px solid var(--line);text-decoration:none}
.tile small{display:block;font-size:12px;color:var(--muted)}
.tile b{display:block;font-family:var(--hy);font-weight:400;font-size:20px;line-height:1.3;color:var(--ac);white-space:nowrap}
.tile span{display:block;font-size:12px;line-height:1.45}
.bro-v{margin:14px 0 0}
.bro-pages{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 8px;scroll-padding:0 20px;scrollbar-width:none}
.bro-pages::-webkit-scrollbar{display:none}
.bro-pages img{flex:0 0 72%;max-width:320px;height:auto;scroll-snap-align:start;border-radius:6px;border:1px solid var(--line);background:#fff}
.bro-v figcaption{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:13px;color:var(--muted)}
.bro-no{font-family:var(--num);font-size:15px}
.bro-v figcaption a{color:var(--ac);font-weight:700}
.routes{display:grid;gap:30px;margin-top:30px}
.route-h{font-family:var(--hy);font-weight:400;font-size:22px;line-height:1.25}
.gain{display:grid;gap:8px;margin-top:12px}
.gain li{position:relative;padding:10px 12px 10px 36px;border-left:3px solid var(--ac);background:rgba(255,255,255,.07);font-size:14px;line-height:1.65}
.gain li::before{content:"";position:absolute;left:13px;top:15px;width:11px;height:6px;border-left:2.5px solid var(--ac);border-bottom:2.5px solid var(--ac);transform:rotate(-45deg)}
.gain strong{color:var(--ac);font-weight:800;white-space:nowrap}
.route{position:relative;margin-top:16px;padding-left:28px}
.route::before{content:"";position:absolute;left:6px;top:8px;bottom:14px;border-left:2px dashed color-mix(in srgb,var(--ac) 60%,transparent)}
.route li{position:relative;padding-bottom:14px;font-size:14.5px;line-height:1.45}
.route li::before{content:"";position:absolute;left:-28px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--ac)}
.route b{display:block;font-size:16px}
.route a{color:var(--muted);text-underline-offset:3px}

/* ───── Part 3 果小酒 ───── */
.wine{--bg:#3B1030;--fg:#F5EAD6;--muted:#D2B8C6;--ac:#D2416F;--ac2:#F27BA2;--on-ac:#fff;--card:#4C1A3F;--line:rgba(245,234,214,.2);--mk:rgba(210,65,111,.6)}
.wine .st-h,.wine .card-k{font-family:NS,"Songti SC","STSong",serif;font-weight:900}
.wine .pw{background:var(--fg);color:var(--bg)}
.wn-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center;margin-top:22px}
.wn-side .nums{margin-top:0}
.bottle-box{position:relative;width:150px;height:340px;transform:scale(.62);transform-origin:0 50%;margin:-64px 0}
.bottle{position:absolute;left:15px;top:0;width:120px;height:330px;clip-path:path("M46 0 H74 V86 C74 112 112 122 112 160 V306 Q112 330 88 330 H32 Q8 330 8 306 V160 C8 122 46 112 46 86 Z");background:rgba(245,234,214,.13)}
.liquid{position:absolute;left:0;right:0;bottom:0;height:88%;background:linear-gradient(#E65C8A,#A8204E);transition:height 1.4s cubic-bezier(.3,.7,.2,1)}
.liquid::before{content:"";position:absolute;left:-40%;top:-9px;width:180%;height:18px;border-radius:50%;background:#E65C8A;animation:slosh 3s ease-in-out infinite}
@keyframes slosh{50%{transform:translateX(18%) rotate(2deg)}}
.shine{position:absolute;left:22px;top:150px;width:9px;height:150px;border-radius:9px;background:rgba(255,255,255,.3)}
.label{position:absolute;left:8px;right:8px;top:176px;height:118px;background:var(--fg);color:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;font-family:NS,"Songti SC",serif}
.label b{font-size:38px;line-height:1.05;font-weight:900;letter-spacing:.08em;margin-right:-.08em}
.label small{font-family:var(--sans);font-size:10px;letter-spacing:.1em}
.bub{position:absolute;bottom:20px;width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(245,234,214,.55);animation:bub 4s ease-in infinite}
.bq1{left:30px}.bq2{left:100px;animation-delay:1.3s}.bq3{left:62px;animation-delay:2.6s}
@keyframes bub{from{transform:translateY(0);opacity:0}20%{opacity:1}to{transform:translateY(-300px);opacity:0}}
/* 滑到 After 酒才倒满 */
.wine:has(.deck.ba.live[data-at="0"]) .liquid{height:26%}

.cmp-before{border:1.5px dashed var(--line);background:rgba(0,0,0,.2)}
.cmp-after{--fg:#3B1030;--muted:#6B4A5E;--card:#F5EAD6;--line:rgba(59,16,48,.16);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.wine .card-k span{font-family:Barlow,var(--sans);font-style:italic;letter-spacing:.06em;text-transform:uppercase}
.wine .card-k{font-size:20px;color:var(--fg)}
.cmp-lead{margin-top:8px;padding-left:10px;border-left:3px solid var(--ac);font-size:14px;font-weight:700;line-height:1.55}
.skus{display:flex;align-items:flex-end;gap:12px;margin-top:12px}
.skus img{width:46%;max-width:180px;border-radius:4px;background:#fff;filter:saturate(.75)}
.skus figcaption{padding:6px 10px;border:1.5px solid rgba(210,65,111,.7);border-radius:4px;color:#F2A7BF;font-size:12.5px;line-height:1.7;transform:rotate(-4deg)}
.covers.docs li{flex-basis:62%;max-width:260px}
.covers.docs img{aspect-ratio:16/9;background:#fff}
.covers.docs em{display:inline-block;margin-top:8px;padding:0 8px;border-radius:99px;background:var(--ac);color:#fff;font-size:11px}
.covers.docs span{margin-top:4px;font-weight:700}
.covers.gal li{flex-basis:46%}
.covers.gal img{box-shadow:0 10px 22px rgba(0,0,0,.35)}
.gxj{margin-top:20px;padding:18px 16px 8px;border-radius:20px;background:rgba(245,234,214,.06);border:1.5px solid var(--line)}
.gxj .acct{padding:0 0 14px;border:0;border-bottom:1.5px dashed var(--line);border-radius:0;background:none}
.gxj .acct-name{font-family:var(--hy);font-weight:400;font-size:22px;text-decoration:none}
.gxj .covers{margin:10px -16px 0;padding:0 16px 10px;scroll-padding:0 16px}

/* ───── 电脑 ───── */
@media (min-width:820px){
  .wrap{padding:0 40px}
  .intro{padding:56px 0 88px}
  .road{grid-template-columns:repeat(3,1fr);gap:18px}
  .road.two{grid-template-columns:repeat(2,1fr)}
  .road a{padding:18px 18px 18px 64px;min-height:100%}
  .rd-x{font-size:14px}
  .rd-x em{font-size:29px}
  .sbar{padding:10px max(40px,calc((100% - 1040px)/2 + 40px));font-size:13px}
  .stage{padding:80px 0 104px}
  .s2{padding-top:110px}
  .nums{grid-template-columns:repeat(4,1fr)}
  .nums.two{grid-template-columns:1fr 1fr;gap:18px}
  .num b{font-size:40px}
  /* 左列最多 5 个条目，最后一行 1fr 吃掉右列视觉多出来的高度，左列不会被撑开 */
  .case{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:repeat(5,auto) 1fr;gap:0 40px;align-items:start}
  .case>*{grid-column:1}
  .case>.duel,.case>.rw,.case>.mm,.case>.gauge,.case>.pf2,.case>.cost{grid-column:2;grid-row:1/-1;margin-top:0}
  .case>.ab{grid-column:1/-1;grid-row:auto;margin-top:26px}
  .ab{grid-template-columns:180px minmax(0,560px)}
  .covers{display:grid;grid-template-columns:repeat(6,1fr);overflow:visible;margin:10px 0 0;padding:0}
  .covers li{max-width:none}
  /* 卡片：电脑上一次露出两张多，箭头翻 */
  .deck.live{margin:16px 0 0;padding:2px 0 4px;scroll-padding:0}
  .deck.live .card{flex-basis:420px}
  .deck.ba.live .card{flex-basis:calc(50% - 6px)}
  .card{padding:20px}
  .blk-h{font-size:22px}
  .accts{grid-template-columns:1fr}
  .own.pair{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .pair .oc+.oc{border-top:0;border-left:1.5px dashed var(--ac)}
  .s2 .card-k{font-size:17.5px}
  .wn-row{grid-template-columns:150px minmax(0,1fr);gap:40px}
  .bottle-box{transform:none;margin:0}
  .wn-side .nums{grid-template-columns:repeat(2,minmax(0,220px))}
  .covers.docs{grid-template-columns:repeat(6,1fr)}
  .covers.gal{grid-template-columns:repeat(6,1fr)}
  .tiles{gap:14px}
  .tile{padding:14px 16px}
  .tile b{font-size:28px}
  .bro-pages{margin:0;padding:0 0 10px;scroll-padding:0}
  .bro-pages img{flex:0 0 300px}
  .routes{grid-template-columns:1fr 1fr;gap:44px}
  .gxj{padding:24px 24px 12px}
  .gxj .covers{margin:12px 0 0;padding:0 0 10px}
  .flow{grid-template-columns:4.8em minmax(0,1fr);gap:8px;align-items:start}
  .flow>b{line-height:26px}
  .deck.wide.live .card{flex-basis:min(86%,720px)}
  .c1-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:center}
  .card .c1-top .bump{margin:0;padding:0 0 0 24px;border-top:0;border-left:1px solid var(--line)}
  .vs2{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
  .vs2-g:last-child .eps2{grid-template-columns:1fr}
  .vs2-x{align-self:center;margin:0;padding:2px 10px;font-size:15px;line-height:22px}
  .vs2-p{font-size:13.5px}
  .eps2 a{grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:3px 10px}
  .eps2 img{grid-row:1/-1}
  .eps2 em b{font-size:16px}
  .duo{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:center;padding-top:16px}
}

/* ───── 编辑模式 ───── */
.editing [data-tk]{outline:1.5px dashed rgba(128,128,128,.75);outline-offset:3px;border-radius:3px;cursor:text;min-width:1em;-webkit-user-select:text;user-select:text}
.editing [data-tk]:focus{outline:2px solid #2F7BFF;background:rgba(47,123,255,.14)}
.editing img[data-ik]{outline:2px dashed rgba(47,123,255,.85);outline-offset:2px;cursor:pointer}
.editing .sbar{position:static}
.editing .stage{padding-bottom:120px}
.editing .covers{overflow-x:auto}
.editing .scan{display:none}
.editing .more summary{cursor:text}
.editing .pnav,.editing .chip{display:none}
.editing .to a::before{content:none}
.ebar{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:flex;gap:6px;padding:6px;border-radius:99px;background:rgba(20,20,20,.94);box-shadow:0 8px 30px rgba(0,0,0,.4);font:600 14px/1 var(--sans);white-space:nowrap;max-width:96vw;overflow-x:auto;scrollbar-width:none}
.ebar::-webkit-scrollbar{display:none}
.ebar button{flex:none;border:0;border-radius:99px;padding:10px 14px;background:#3a3a3a;color:#fff;font:inherit;cursor:pointer}
.ebar button.pri{background:#2F7BFF}
.ebar button[hidden]{display:none}
.eframe{position:fixed;z-index:55;border:1.5px solid #2F7BFF;border-radius:4px;pointer-events:none}
.eframe .sz{position:absolute;right:-17px;top:50%;margin-top:-16px;width:32px;height:32px;padding:0;border-radius:50%;border:2px solid #fff;background:#2F7BFF;color:#fff;font:700 15px/1 var(--sans);box-shadow:0 2px 10px rgba(0,0,0,.35);cursor:ew-resize;pointer-events:auto;touch-action:none}
.ectx{position:fixed;left:50%;bottom:calc(66px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:flex;gap:6px;padding:6px;border-radius:99px;background:rgba(20,20,20,.94);box-shadow:0 8px 30px rgba(0,0,0,.4);font:600 14px/1 var(--sans);white-space:nowrap}
.ectx button{flex:none;border:0;border-radius:99px;padding:10px 14px;background:#3a3a3a;color:#fff;font:inherit;cursor:pointer}
.ectx[hidden],.ectx button[hidden],.eframe[hidden],.etoast[hidden]{display:none}
.epen{position:fixed;left:12px;bottom:calc(52px + env(safe-area-inset-bottom));z-index:60;border:0;border-radius:99px;padding:10px 16px;background:rgba(20,20,20,.94);color:#fff;font:600 14px/1 var(--sans);box-shadow:0 8px 30px rgba(0,0,0,.4);cursor:pointer}
.etoast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translateX(-50%);z-index:70;max-width:86vw;padding:10px 16px;border-radius:12px;background:rgba(20,20,20,.94);color:#fff;font:600 14px/1.4 var(--sans);text-align:center}

/* 没开动效时直接显示最终状态 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .st-h{clip-path:none;transform:none}
  .road li{opacity:1;transform:none}
  .type .ch{opacity:1}
  .rw-new em{opacity:1}
  .bp-svg{clip-path:none}
  .ly-note,.picks,.mm-to,.bp-l,.bp-r{opacity:1;transform:none;filter:none;pointer-events:auto}
  .more::details-content{transition:none!important}
}