/* ===================================================================
   Reco（project/reco.html，2026-10-24）。照 Group Busy Bee 的 deck（BusyBee.pptx）：
     底    白 / 极浅暖灰 #f8f6f2 交替（2026-10-26 用户说整页奶油黄"一大片大片很扎眼"）；奶油 #ffe8bf 只留在开屏 BoKnee 背后那个圆
     红    #e63a2e 字标和大字（大字 3.5:1）；小字的红用 #c4291f（奶油底 4.8:1）
     黄    #f3b23a 吉祥物 BoKnee；蓝 #3f8fe3 角色 VITA 和数据点，蓝字用 #1561c9（4.9:1）
     字    标题 Alfa Slab One 大写（deck 是粗 slab 小型大写），正文 Inter
   =================================================================== */
@font-face { font-family: 'Alfa Slab One'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/alfa-slab-latin.woff2) format('woff2'); }
body.is-reco {
  --rc-cream: #ffe8bf; --rc-bg: #ffffff; --rc-tint: #f8f6f2; --rc-red: #e63a2e; --rc-red-t: #c4291f; --rc-yel: #f3b23a;
  --rc-blue: #3f8fe3; --rc-blue-t: #1561c9; --rc-ink: #333333;
  --rc-slab: 'Alfa Slab One', Rockwell, Georgia, serif;
  --flag: var(--rc-red-t); --chart: var(--rc-blue);
  background: var(--rc-bg);
}
.is-reco .v2main, .is-reco .v2band { background: var(--rc-bg); }
.is-reco .v2band.is-tint { --paper-warm: #ffffff; background: var(--rc-tint); }
.rc-head .pl-n { color: var(--rc-blue-t); }
.rc-head .pl-n::before { content: '✦ '; }
.is-reco .pl-h { font-family: var(--rc-slab); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1.08; font-size: clamp(28px, 3.4vw, 48px); color: var(--rc-ink); max-width: 20ch; }
.is-reco .pl-h em { font-style: normal; color: var(--rc-red); }
.rc-card { border-radius: 28px; background: #ffffff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 24px 48px -36px rgba(40, 30, 10, .35); }

/* ---------- 开屏 ---------- */
.vxp-hero.rc-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; aspect-ratio: auto; min-height: clamp(360px, 46vw, 620px);
  padding: 0 clamp(28px, 6vw, 96px); overflow: hidden; isolation: isolate; background: var(--rc-tint);
}
.rc-hero-l { display: grid; gap: 18px; justify-items: start; }
.vxp-hero .rc-logo { width: min(520px, 70%); height: auto; aspect-ratio: auto; }
.rc-tag { font: 600 clamp(18px, 1.8vw, 24px)/1.3 var(--f-ui); color: var(--rc-ink); }
.vxp-hero .bk-hero { align-self: end; width: clamp(150px, 18vw, 250px); margin: 64px 0 2px; cursor: pointer; }
.bk-hero::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 2%; width: 190%; aspect-ratio: 1; border-radius: 50%; background: var(--rc-cream); transform: translateX(-50%); }
.vxp-hero .rc-boknee { width: 100%; height: auto; }
@media (max-width: 760px) {
  .vxp-hero.rc-hero { grid-template-columns: 1fr; justify-items: center; gap: 12px; padding-top: 32px; min-height: 0; text-align: center; }
  .rc-hero-l { justify-items: center; }
  .vxp-hero .bk-hero { width: 128px; margin: 56px 0 2px; }
  .vxp-hero .rc-logo { width: min(100%, 300px); height: auto; }
}

/* ---------- 01 故事 ---------- */
.rc-story { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(16px, 2.6vw, 36px); align-items: center; }
.rc-frames { position: relative; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: #222; }
.rc-frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 6s linear; }
.rc-frames img.is-on { opacity: 1; transform: scale(1); }
.rc-frames::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(255, 140, 90, .35)); pointer-events: none; }
.rc-story-r { display: grid; gap: 10px; }
.rc-stage { position: relative; height: clamp(220px, 19vw, 280px); border-bottom: 3px solid #e9e4dc; }
.bk-story { position: absolute; left: 22%; bottom: -3px; width: clamp(92px, 8.2vw, 120px); }
.rc-caps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; counter-reset: rc; }
.rc-caps button {
  position: relative; width: 100%; padding: 16px 18px 16px 52px; border: 0; border-radius: 20px; background: transparent;
  color: #6b6b6b; text-align: left; cursor: pointer; font: 600 16px/1.4 var(--f-ui); transition: background .3s var(--ease), color .3s var(--ease);
}
.rc-caps button::before { counter-increment: rc; content: counter(rc); position: absolute; left: 16px; top: 15px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .08); font: 700 13px/1 var(--f-ui); }
.rc-caps button[aria-selected="true"] { background: #ffffff; color: var(--rc-ink); box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 16px 30px -22px rgba(40, 30, 10, .45); }
.rc-caps button[aria-selected="true"]::before { background: var(--rc-red); color: #ffffff; }
.rc-caps button:focus-visible { outline: 2px solid var(--rc-red-t); outline-offset: 2px; }
@media (max-width: 860px) { .rc-story { grid-template-columns: 1fr; } }

/* ---------- 02 真正的伤 ---------- */
.rc-mind { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); }
.rc-dots-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px); gap: 24px; align-items: center; padding: clamp(20px, 2.6vw, 32px); }
.rc-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; }
.rc-dot { display: block; transition: transform .45s var(--pl-spring); }
.rc-dot svg { display: block; width: 100%; height: auto; overflow: visible; }
.rc-dot .f { fill: var(--rc-yel); transition: fill .35s var(--ease); }
.rc-dot .hb { fill: none; stroke: var(--rc-red); stroke-width: 2.4; }
.rc-dot .e { fill: #ffffff; } .rc-dot .p { fill: #111111; transition: transform .35s var(--ease); }
.rc-dot .m { fill: none; stroke: #1d1d1d; stroke-width: 1.5; stroke-linecap: round; transition: opacity .3s var(--ease); }
.rc-dot .m2, .rc-dot .tear { opacity: 0; }
.rc-dot .tear { fill: #cfe6ff; transition: opacity .3s var(--ease) .15s; }
.rc-dot.is-b { transform: scale(1.06); }
.rc-dot.is-b .f { fill: var(--rc-blue); }
.rc-dot.is-b .p { transform: translate(.6px, 1.4px); }
.rc-dot.is-b .m1 { opacity: 0; } .rc-dot.is-b .m2, .rc-dot.is-b .tear { opacity: 1; }
.rc-stat b { display: block; font: 400 clamp(48px, 5vw, 72px)/1 var(--rc-slab); color: var(--rc-blue-t); font-variant-numeric: tabular-nums; }
.rc-stat span { display: block; margin-top: 8px; font: 600 15px/1.4 var(--f-ui); color: var(--rc-blue-t); }
.rc-adh { display: grid; grid-template-columns: minmax(0, 1fr) clamp(64px, 6vw, 88px); gap: 12px 18px; align-items: end; padding: clamp(20px, 2.6vw, 32px); }
.rc-adh .rc-adh-l, .rc-adh .rc-adh-t { grid-column: 1 / -1; }
.bk-adh { margin-top: 44px; }
.rc-adh svg { width: 100%; height: auto; }
.rc-ax, .rc-ax-h { fill: none; stroke: var(--rc-blue-t); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rc-ln { stroke: var(--rc-red); stroke-width: 4; stroke-linecap: round; }
.rc-pt { fill: var(--rc-red); stroke: #ffffff; stroke-width: 3; transition: cx .1s linear, cy .1s linear; }
.rc-adh-l { display: flex; align-items: center; gap: 12px; font: 700 14px/1 var(--f-ui); color: var(--rc-ink); }
.rc-adh-l::before { content: 'Home exercise ↓'; display: none; }
.rc-stress { flex: 1; accent-color: var(--rc-red); }
.rc-adh-t { font: 600 16px/1.45 var(--f-ui); color: var(--rc-ink); }
.rc-adh-t b { color: var(--rc-red-t); }
@media (max-width: 900px) { .rc-mind { grid-template-columns: 1fr; } .rc-dots-card { grid-template-columns: 1fr; } }

/* ---------- 03 问题 + SDT ---------- */
.rc-sdt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; gap: 18px clamp(20px, 4vw, 60px); align-items: center; }
.rc-prob { font: 600 clamp(20px, 1.9vw, 26px)/1.4 var(--f-ui); color: var(--rc-ink); }
.rc-prob b { color: var(--rc-red-t); }
.rc-bubbles { grid-row: span 2; position: relative; aspect-ratio: 5 / 4; width: min(100%, 560px); justify-self: center; }
.bk-sdt { position: absolute; left: 50%; top: 31%; width: 17%; transform: translateX(-50%); }
.rc-mot { position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: 22px 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 211, 77, .45), rgba(255, 211, 77, 0)); font: 600 clamp(20px, 2vw, 28px)/1 var(--f-ui); color: var(--rc-ink); }
.rc-bubbles button {
  position: absolute; padding: 18px 28px; border: 0; border-radius: 999px; background: #ffffff; color: var(--rc-ink); cursor: pointer;
  font: 600 clamp(16px, 1.6vw, 24px)/1 var(--f-ui); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 14px 28px -20px rgba(40, 30, 10, .5); transition: transform .4s var(--pl-spring), background .3s var(--ease), color .3s var(--ease);
}
.rc-bubbles .is-a { left: 0; top: 56%; } .rc-bubbles .is-r { right: 0; top: 56%; } .rc-bubbles .is-c { left: 50%; bottom: 4%; transform: translateX(-50%); }
.rc-bubbles .is-c:hover { transform: translateX(-50%) translateY(-3px); } .rc-bubbles .is-c[aria-pressed="true"] { transform: translateX(-50%) scale(1.06); }
.rc-bubbles button:hover { transform: translateY(-3px); }
.rc-bubbles button[aria-pressed="true"] { background: var(--rc-red); color: #ffffff; transform: scale(1.06); }
.rc-bubbles button:focus-visible { outline: 2px solid var(--rc-blue-t); outline-offset: 3px; }
.rc-answer { align-self: start; padding: 22px 24px; border-radius: 24px; background: #ffffff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 20px 40px -32px rgba(40, 30, 10, .4); transition: opacity .25s var(--ease); }
.rc-answer.is-swap { opacity: 0; }
.rc-ans-h { font: 400 20px/1.2 var(--rc-slab); text-transform: uppercase; color: var(--rc-red); margin-bottom: 8px; }
.rc-ans-t { font: 500 16.5px/1.5 var(--f-ui); color: var(--rc-ink); }
.rc-ans-t b { color: var(--rc-red-t); }
@media (max-width: 900px) { .rc-sdt { grid-template-columns: 1fr; } .rc-bubbles { grid-row: auto; max-width: 520px; width: 100%; justify-self: center; } }

/* ---------- 04 聊天 ---------- */
.rc-chat { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.rc-phone { position: relative; display: grid; gap: 10px; padding: 18px 18px 14px; border-radius: 40px; background: #f2f2f2; box-shadow: 0 0 0 10px #1d1d1f, 0 40px 80px -40px rgba(60, 30, 0, .6); min-height: 640px; align-content: start; overflow: hidden; }
.rc-ph-top { display: flex; justify-content: space-between; align-items: center; font: 700 14px/1 var(--f-ui); color: #444; }
.rc-days { display: grid; place-items: center; width: 44px; height: 46px; border-radius: 10px; background: #2a2a2a; color: #ffffff; font: 400 20px/1 var(--rc-slab); box-shadow: inset 0 6px 0 var(--rc-yel); }
.rc-days small { font: 700 9px/1 var(--f-ui); margin-bottom: -6px; }
.rc-ask { font: 400 26px/1.05 var(--rc-slab); text-transform: uppercase; color: #222; text-align: center; max-width: 12ch; justify-self: center; transform: rotate(-4deg); }
.bk-chat { justify-self: center; width: 86px; margin: 4px 0 6px; }
.rc-msgs { display: grid; gap: 8px; }
.rc-msgs p { max-width: 86%; padding: 12px 14px; border-radius: 18px; font: 400 14px/1.45 var(--f-ui); transition: opacity .35s var(--ease), transform .45s var(--pl-spring); }
.rc-bot { justify-self: start; background: #ffffff; color: #333; box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .3); }
.rc-me { justify-self: end; background: #2a2a2a; color: #ffffff; font-weight: 600 !important; }
.js .rc-chat:not(.is-sent) .rc-me, .js .rc-chat:not(.is-replied) .rc-reply { opacity: 0; transform: translateY(8px); }
.rc-typing { display: none; gap: 5px; padding: 14px 16px !important; }
.rc-chat.is-typing .rc-typing { display: inline-flex; }
.rc-chat.is-typing .rc-reply { display: none; }
.rc-typing i { width: 7px; height: 7px; border-radius: 50%; background: #333; animation: bk-dot 1s infinite; }
.rc-typing i:nth-child(2) { animation-delay: .15s; } .rc-typing i:nth-child(3) { animation-delay: .3s; }
.rc-reply.is-typing { position: relative; }
.rc-input { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 8px 8px 8px 8px; border-radius: 999px; background: #ffffff; font: 400 14px/1 var(--f-ui); color: #999; }
.rc-chip { padding: 8px 14px; border: 0; border-radius: 999px; background: #2a2a2a; color: #ffffff; cursor: pointer; font: 600 13px/1 var(--f-ui); }
.rc-chip:focus-visible { outline: 2px solid var(--rc-red-t); outline-offset: 2px; }
.rc-chat.is-sent .rc-chip { opacity: .35; }
.rc-why { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.rc-why li { padding: 18px 22px; border-radius: 22px; background: var(--rc-tint); font: 400 16px/1.45 var(--f-ui); color: #555; }
.rc-why b { display: block; margin-bottom: 4px; font: 400 18px/1.2 var(--rc-slab); text-transform: uppercase; color: var(--rc-red); }
@media (max-width: 860px) { .rc-chat { grid-template-columns: 1fr; } .rc-phone { max-width: 360px; width: 100%; justify-self: center; } }

/* ---------- 05 认识你的膝盖 ---------- */
.rc-knee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: center; }
.rc-3d { margin: 0; justify-self: center; width: min(100%, 360px); aspect-ratio: 600 / 1156; border-radius: 28px; overflow: hidden; background: #ffffff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 24px 48px -36px rgba(40, 30, 10, .35); }
.rc-3d video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-knee-r { display: grid; gap: 16px; justify-items: center; }
.rc-seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: #ffffff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.rc-seg button { padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; color: #666; cursor: pointer; font: 600 14.5px/1 var(--f-ui); transition: background .3s var(--ease), color .3s var(--ease); }
.rc-seg button[aria-selected="true"] { background: #2a2a2a; color: #ffffff; }
.rc-seg button:focus-visible { outline: 2px solid var(--rc-red-t); outline-offset: 2px; }
.rc-shots { position: relative; width: min(100%, 380px); aspect-ratio: 1200 / 1595; }
.rc-shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: rotate(4deg) scale(.96); transition: opacity .45s var(--ease), transform .6s var(--pl-spring); }
.rc-shots img.is-on { opacity: 1; transform: none; }
.rc-ctrl-row { display: flex; align-items: flex-end; gap: 18px; }
.bk-knee { flex: none; width: 84px; margin-top: 34px; }
.rc-ctrl { font: 700 clamp(18px, 1.8vw, 22px)/1.2 var(--f-ui); color: var(--rc-red-t); }
@media (max-width: 860px) { .rc-knee { grid-template-columns: 1fr; } }

/* ---------- 06 技术 ---------- */
.rc-tech { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.rc-tech::before { content: ''; position: absolute; left: 12%; right: 12%; top: 54px; height: 8px; border-radius: 4px; background: #ece7df; }
.rc-tech li { position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; }
.rc-node { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: #ffffff; font: 700 15px/1.2 var(--f-ui); color: #222; padding: 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 14px 28px -20px rgba(40, 30, 10, .5); transition: background .3s var(--ease), transform .4s var(--pl-spring); }
.rc-tech li.is-on .rc-node { transform: scale(1.08); box-shadow: 0 0 0 4px var(--rc-blue), 0 18px 34px -20px rgba(40, 30, 10, .55); }
.rc-tech b { font: 400 16px/1.2 var(--rc-slab); text-transform: uppercase; color: var(--rc-red); max-width: 14ch; }
.rc-pulse { position: absolute; z-index: 2; top: -16px; left: 12%; width: 50px; margin-left: -25px; opacity: 0; transition: left .8s cubic-bezier(.45, 0, .2, 1), opacity .3s var(--ease); }
.rc-tech.is-running .rc-pulse { opacity: 1; }
@media (max-width: 760px) { .rc-tech { grid-template-columns: 1fr 1fr; row-gap: 26px; } .rc-tech::before, .rc-pulse { display: none; } }

/* ---------- 07 下一步 ---------- */
.rc-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.rc-next figure { margin: 0; overflow: hidden; display: flex; flex-direction: column; }
.rc-next img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center top; display: block; background: var(--rc-tint); }
.rc-next figcaption { padding: 18px 20px 22px; font: 400 15px/1.45 var(--f-ui); color: #555; }
.rc-next figcaption b { display: block; margin-bottom: 6px; font: 600 18px/1.2 var(--f-ui); color: var(--rc-blue-t); }
@media (max-width: 860px) { .rc-next { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .bk *, .rc-typing i { animation: none !important; }
  .rc-frames img, .rc-dot, .rc-msgs p, .rc-shots img, .rc-node, .rc-pulse, .rc-answer { transition-duration: .01s !important; }
}
.rc-axt { font: 700 12px var(--f-ui); fill: var(--rc-blue-t); }
/* 开屏下面一行事实（取自首页 Experience 那条） */
.vxp-meta.rc-facts-wrap { display: block; }
.rc-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rc-facts li { padding: 10px 16px; border-radius: 999px; background: var(--rc-tint); font: 500 14.5px/1.2 var(--f-ui); color: #555; }
.rc-facts b { font-weight: 700; color: var(--rc-red-t); }

/* ===================================================================
   BoKnee（2026-10-26）：照 deck 原图重画的矢量，js/reco.js 的 bkSVG 生成。
   表情是 .bk 上的 data-mood，动作和特效是 .bk 上的类（no-brace / is-kick / is-ouch / is-reps / has-count / is-unsure /
   has-sweat / has-cloud / has-ring / has-bar / has-stars / has-heart / is-xray / is-hop）。眼珠位置、眼皮、歪头都是 css 变量。
   =================================================================== */
.bk { position: relative; display: block; --bk-y: #f3b23a; --lid: 0; --px: -8px; --py: -1px; --tilt: 0deg; }
.bk > svg { display: block; width: 100%; height: auto; overflow: visible; }
.bk-y { fill: var(--bk-y); }
.bk-band { fill: none; stroke: #e63a2e; stroke-width: 18; }
.bk-band2 { fill: none; stroke: #ffffff; stroke-width: 3; }
.bk-eye { transform-box: fill-box; transform-origin: 50% 50%; animation: bk-blink 5.2s var(--bd, 0s) infinite; }
.bk-eye ellipse { fill: #ffffff; }
.bk-pupil { fill: #111111; transform: translate(var(--px), var(--py)); transition: transform .35s var(--ease); }
.bk-lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(var(--lid)); transition: transform .35s var(--ease); }
.bk-head { transform-box: view-box; transform-origin: 100px 172px; transform: rotate(var(--tilt)); transition: transform .5s var(--pl-spring); }
.bk-body { transform-box: view-box; transform-origin: 100px 432px; animation: bk-bob 3.4s ease-in-out infinite; }
.bk-leg { transform-box: view-box; transition: transform .5s var(--pl-spring); }
.bk-legL { transform-origin: 70px 172px; } .bk-legR { transform-origin: 130px 172px; }
.bk-brace rect { fill: #121212; }
.bk-brace .bk-y { fill: var(--bk-y); }
.bk-brace .bk-pad { fill: #e9e6e1; stroke: #ffffff; stroke-width: 2; }
.bk-brace { transform-box: fill-box; transform-origin: 50% 50%; transition: opacity .45s var(--ease), transform .55s var(--pl-spring); }
.bk-acl { opacity: 0; transition: opacity .45s var(--ease); }
.bk-acl path { fill: none; stroke: #e63a2e; stroke-width: 5; stroke-linecap: round; }
.bk-blush { fill: #ff8a7a; opacity: 0; transition: opacity .35s var(--ease); }

/* 嘴：默认微笑，其他表情换一张嘴 */
.bk-m { fill: none; stroke: #1d1d1d; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s var(--ease); }
.bk-m-o { fill: #8a2416; stroke-width: 3.5; }
.bk:not([data-mood]) .bk-m-smile, .bk[data-mood="look"] .bk-m-smile, .bk[data-mood="care"] .bk-m-smile,
.bk[data-mood="joy"] .bk-m-o, .bk[data-mood="sad"] .bk-m-frown, .bk[data-mood="tired"] .bk-m-flat, .bk[data-mood="worried"] .bk-m-wob { opacity: 1; }
.bk[data-mood="sad"] { --lid: .42; --px: 0px; --py: 7px; --tilt: -7deg; }
.bk[data-mood="tired"] { --lid: .55; --px: -3px; --py: 5px; }
.bk[data-mood="worried"] { --lid: 0; --px: 3px; --py: -7px; --tilt: 4deg; }
.bk[data-mood="care"] { --tilt: -8deg; --px: -5px; --py: 2px; }
.bk[data-mood="look"] { --px: -6px; --py: 8px; --tilt: 7deg; }
.bk[data-mood="care"] .bk-blush, .bk[data-mood="joy"] .bk-blush { opacity: .55; }

/* 特效：默认都藏着 */
.bk-fx > *, .bk-ouch, .bk-ring { opacity: 0; transition: opacity .35s var(--ease); }
.bk-ball, .bk-ouch, .bk-sweat, .bk-q, .bk-cloud, .bk-stars path, .bk-ht { transform-box: fill-box; transform-origin: 50% 50%; }
.bk-ball circle { fill: #ffffff; stroke: #1d1d1d; stroke-width: 3; } .bk-ball path { fill: #1d1d1d; }
.bk-ouch { fill: none; stroke: #e63a2e; stroke-width: 5; }
.bk-ring { fill: none; stroke: var(--rc-blue); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(-90deg); transition: opacity .3s var(--ease), stroke-dashoffset 1.6s var(--ease) .15s; }
.bk-sweat { fill: #9fd2ff; stroke: #1d1d1d; stroke-width: 3; stroke-linejoin: round; }
.bk-q { font: 400 54px var(--rc-slab); fill: var(--rc-blue-t); }
.bk-cl { fill: #a7b1bc; }
.bk-rain { fill: none; stroke: #6aa7e8; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 6 10; animation: bk-rain .6s linear infinite; }
.bk-count { font: 400 54px var(--rc-slab); fill: var(--rc-red-t); }
.bk-bar-bg, .bk-bub { fill: #ffffff; stroke: #1d1d1d; stroke-width: 3; }
.bk-bar-fill { fill: var(--rc-blue); transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s var(--ease) .25s; }
.bk-stars path { fill: var(--bk-y); stroke: #1d1d1d; stroke-width: 2.5; stroke-linejoin: round; }
.bk-ht { fill: #e63a2e; }

.bk.no-brace .bk-brace { opacity: 0; transform: scale(.4); }
.bk.is-kick .bk-ball { opacity: 1; animation: bk-ball 2.6s var(--ease) infinite; }
.bk.is-kick .bk-legR { animation: bk-kick 2.6s infinite; }
.bk.is-ouch .bk-ouch { animation: bk-ping 1.3s ease-out infinite; }
.bk.is-reps .bk-legL { animation: bk-lift var(--rep, 1.4s) ease-in-out infinite; }
.bk.has-count .bk-count { opacity: 1; }
.bk.is-unsure .bk-q { opacity: 1; animation: bk-float 2.2s ease-in-out infinite; }
.bk.is-unsure .bk-q2 { animation-delay: -1.1s; }
.bk.is-unsure .bk-pupil { animation: bk-dart 2.4s infinite; }
.bk.has-sweat .bk-sweat { opacity: 1; animation: bk-drip 1.8s ease-in infinite; }
.bk.has-cloud .bk-cloud { opacity: 1; animation: bk-float 3s ease-in-out infinite; }
.bk.has-ring .bk-ring { opacity: 1; stroke-dashoffset: 0; }
.bk.has-bar .bk-bar { opacity: 1; } .bk.has-bar .bk-bar-fill { transform: scaleX(1); }
.bk.has-stars .bk-stars { opacity: 1; }
.bk.has-stars .bk-stars path { animation: bk-twinkle 1.6s ease-in-out infinite; }
.bk.has-stars .bk-stars path:nth-child(2) { animation-delay: -.5s; } .bk.has-stars .bk-stars path:nth-child(3) { animation-delay: -1s; }
.bk.has-heart .bk-heart { opacity: 1; } .bk.has-heart .bk-ht { animation: bk-beat 1s ease-in-out infinite; }
.bk.is-xray .bk-brace { opacity: .16; } .bk.is-xray .bk-acl { opacity: 1; }
.bk.is-hop .bk-body { animation: bk-hop .7s var(--ease); }
.bk-mini .bk-body { animation: none; }

@keyframes bk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes bk-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes bk-hop { 0%, 100% { transform: translateY(0); } 22% { transform: translateY(4px) scaleY(.94); } 55% { transform: translateY(-36px); } }
@keyframes bk-kick { 0%, 20% { transform: rotate(0); } 34% { transform: rotate(16deg); } 44% { transform: rotate(-36deg); } 58% { transform: rotate(-22deg); } 78%, 100% { transform: rotate(0); } }
@keyframes bk-ball { 0%, 43% { transform: none; opacity: 1; } 72% { transform: translate(230px, -230px) rotate(420deg); opacity: 1; } 80% { transform: translate(260px, -200px) rotate(480deg); opacity: 0; } 88% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes bk-lift { 0%, 100% { transform: rotate(0); } 45%, 60% { transform: rotate(30deg); } }
@keyframes bk-ping { 0% { transform: scale(.5); opacity: .95; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes bk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bk-dart { 0%, 40% { transform: translate(-8px, -2px); } 50%, 90% { transform: translate(8px, -2px); } }
@keyframes bk-drip { 0% { transform: translateY(-6px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes bk-rain { to { stroke-dashoffset: -16; } }
@keyframes bk-twinkle { 0%, 100% { transform: scale(.6) rotate(0); } 50% { transform: scale(1.1) rotate(20deg); } }
@keyframes bk-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.25); } }
@keyframes bk-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---------- 一屏看全（2026-10-26） ---------- */
@media (min-width: 861px) {
  /* 04 聊天：手机高度不超过可用高度，消息区从底下往上排，旧消息被顶出去 */
  .rc-phone { min-height: 0; height: min(640px, var(--fit)); grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
  .rc-msgs { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; overflow: hidden; min-height: 0; }
  .rc-msgs p { flex: none; }
  /* 05 认识膝盖：右边原来上下叠三样（开关、截图、BoKnee），改成截图在左、开关和 BoKnee 在右 */
  .rc-knee { grid-template-columns: auto minmax(0, 1fr); }
  /* 01 故事：右栏 BoKnee 的舞台按可用高度收 */
  .rc-stage { height: clamp(200px, min(19vw, var(--fit) - 320px), 280px); }
  .rc-3d { width: min(360px, calc(var(--fit) * .519)); }
  .rc-knee-r { grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: center; align-items: center; column-gap: clamp(16px, 2vw, 32px); }
  .rc-knee-r .rc-shots { grid-column: 1; grid-row: 1 / 3; width: min(380px, calc(var(--fit) * .752)); }
  .rc-knee-r .rc-seg { grid-column: 2; grid-row: 1; align-self: end; }
  .rc-knee-r .rc-ctrl-row { grid-column: 2; grid-row: 2; align-self: start; }
}

/* ---------- 字标动画（2026-11-05）：矢量 RECO，四个字母各一层 .rc-lg ----------
   进场：四个字母依次从上面掉下来，落地压扁一下（.rc-lg）。之后每 6 秒一轮（外层 .rc-lgp）：C+O（膝盖带着球）先收再往前踢、
   落地压扁，R+E 跟着点一下头。动的都是包在外面的 g，里面 potrace 的 transform 不受影响。 */
.vxp-hero svg.rc-logo { display: block; width: min(520px, 70%); height: auto; overflow: visible; }
.rc-lg { fill: var(--rc-red); transform-box: fill-box; transform-origin: 50% 100%; }
.rc-lg-r { --d: 0s; } .rc-lg-e { --d: .12s; } .rc-lg-c { --d: .24s; } .rc-lg-o { --d: .36s; }
/* 循环挂在外层：R+E、C+O 原本是连成一块的，切开后各作一整块动，交界的轮廓才不会出台阶 */
.rc-lgp { transform-box: fill-box; }
.rc-lgp-co { transform-origin: 8% 100%; }
.rc-lgp-re { transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .rc-lg { animation: rc-drop .9s cubic-bezier(.3, 0, .3, 1) var(--d) both; }
  .rc-lgp-co { animation: rc-kick 6s ease-in-out 2.2s infinite; }
  .rc-lgp-re { animation: rc-nod 6s ease-in-out 2.2s infinite; }
}
@keyframes rc-drop {
  0% { opacity: 0; transform: translateY(-70%); }
  45% { opacity: 1; transform: translateY(0) scale(1); }
  58% { transform: translateY(0) scale(1.08, .86); }
  74% { transform: translateY(-9%) scale(.97, 1.04); }
  88%, 100% { opacity: 1; transform: none; }
}
/* C+O（膝盖带着球）：往回收 → 往前一踢 → 落地压扁 → 回正，绕左下角转 */
@keyframes rc-kick {
  0%, 4% { transform: none; }
  9% { transform: rotate(3deg); }
  14% { transform: rotate(-5deg) translateY(-4%); }
  21% { transform: translateY(0) scale(1.03, .94); }
  26% { transform: scale(.99, 1.02); }
  30%, 100% { transform: none; }
}
@keyframes rc-nod {
  0%, 22% { transform: none; }
  26% { transform: translateY(-6%); }
  30% { transform: translateY(0) scale(1.03, .96); }
  34%, 100% { transform: none; }
}

/* 开屏 come back stronger（2026-11-05 第二版，js/reco.js 开屏那段）：不配字，BoKnee 在开屏里跑动。
   只挪 svg（--x / --xt），.bk-hero::before 那个圆不动。下面这些类只在开屏用，不在 bkSet 的 STATES 里。 */
.bk-hero > svg { transform: translateX(var(--x, 0)); transition: transform var(--xt, 0ms) cubic-bezier(.3, .1, .3, 1); }
.bk-hero .bk-ring { transition: opacity .2s var(--ease), stroke-dashoffset .4s var(--ease); }
.bk-hero.no-brace .bk-brace, .bk-hero .bk-ball { transition: none; }
/* 一瘸一拐：身子往戴护膝那边沉，护膝那条腿迈得小 */
.bk-hero.is-limp .bk-body { animation: bk-limp .5s ease-in-out infinite; }
.bk-hero.is-limp .bk-legL { animation: bk-limpleg .5s ease-in-out infinite; }
/* 跑：两条腿交替前后摆，身子快速上下 */
.bk-hero.is-run .bk-body { animation: bk-runbob .3s ease-in-out infinite; }
.bk-hero.is-run .bk-legL { animation: bk-runleg .3s ease-in-out infinite; }
.bk-hero.is-run .bk-legR { animation: bk-runleg .3s ease-in-out -.15s infinite; }
/* 大跳：先蹲，再高高跳起、身子撑大一点（stronger），落地压扁 */
.bk-hero.is-jump .bk-body { animation: bk-bigjump .7s cubic-bezier(.3, 0, .3, 1); }
/* 护膝飞出去 */
.bk-hero.brace-fly .bk-brace { animation: bk-bracefly .5s cubic-bezier(.4, 0, .9, .6) forwards; }
/* 球：先落到脚边，再一脚踢出画面 */
.bk-hero.has-ball .bk-ball { opacity: 1; animation: bk-balldrop .25s cubic-bezier(.5, 0, .8, .5); }
.bk-hero.is-kick1 .bk-legR { animation: bk-kick1 .5s cubic-bezier(.3, 0, .2, 1); }
.bk-hero.is-kick1 .bk-ball { opacity: 1; animation: bk-ballfly .8s cubic-bezier(.2, .6, .4, 1) .16s forwards; }
@keyframes bk-limp { 0%, 100% { transform: none; } 45% { transform: translateY(5px) rotate(-5deg); } 70% { transform: rotate(2deg); } }
@keyframes bk-limpleg { 0%, 100% { transform: none; } 45% { transform: rotate(8deg); } }
@keyframes bk-runbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes bk-runleg { 0%, 100% { transform: rotate(22deg); } 50% { transform: rotate(-22deg); } }
@keyframes bk-bigjump {
  0% { transform: none; } 18% { transform: translateY(8px) scale(1.06, .9); }
  55% { transform: translateY(-80px) scale(1.08); } 82% { transform: translateY(0) scale(1.1, .88); } 100% { transform: none; }
}
@keyframes bk-bracefly { to { transform: translate(-90px, -190px) rotate(-280deg) scale(.8); opacity: 0; } }
@keyframes bk-balldrop { from { transform: translateY(-120px); } to { transform: none; } }
@keyframes bk-kick1 { 0% { transform: none; } 30% { transform: rotate(18deg); } 55% { transform: rotate(-42deg); } 100% { transform: none; } }
@keyframes bk-ballfly { 0% { transform: none; opacity: 1; } 100% { transform: translate(420px, -330px) rotate(620deg); opacity: 1; } }