/* ===================================================================
   Playful 版项目页的共用部分（2026-10-21）：kohler-play / finra-play / fabricare-orders-play 都加载。
   这里先放像素流水底；页面各自的小游戏在 kohler-play.css 等文件里。
   =================================================================== */

/* 像素流水底（js/play-fluid.js 生成的 canvas）。固定在视口后面，只透过"底色"那几段（非灰带、页尾）。 */
.play-fluid {
  position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; pointer-events: none;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.has-fluid .v2band:not(.is-tint), .has-fluid .v2end { background: transparent; }

body { --pl-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- 开屏下面那一行 ---------- */
.vxp-meta.pl-intro {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto;
  align-items: end; gap: 18px clamp(24px, 5vw, 80px);
}
.pl-intro .pl-big { grid-row: 1 / 3; align-self: start; }
.pl-intro .pl-chips { margin: 0; justify-content: flex-end; }
.pl-intro .pl-jump { margin: 0; justify-content: flex-end; }
@media (max-width: 860px) {
  .vxp-meta.pl-intro { grid-template-columns: 1fr; }
  .pl-intro .pl-big { grid-row: auto; }
  .pl-intro .pl-chips, .pl-intro .pl-jump { justify-content: flex-start; }
}
.pl-big {
  max-width: 24ch; font-family: var(--f-display); font-weight: 500;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.22; letter-spacing: -.02em; color: var(--ink);
}
.pl-big span { color: var(--flag); }
.pl-chips { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pl-chips li {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ink-12);
  font-family: var(--f-ui); font-size: 14px; color: var(--ink-60);
}
.pl-chips b { color: var(--ink); font-weight: 500; }
.pl-jump { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--f-ui); font-size: 15px; font-weight: 500; }
.pl-jump a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink-12); padding-bottom: 2px; transition: border-color .2s var(--ease), color .2s var(--ease); }
.pl-jump a:hover { color: var(--flag); border-color: var(--flag); }
.pl-jump span { display: inline-block; transition: transform .3s var(--pl-spring); }
.pl-jump a:hover span { transform: translateY(3px); }

/* ---------- 每节的抬头：编号 + 一句（+ 演完才出现的 Replay） ----------
   原来右边是一枚"怎么玩"的小签（.pl-try："Turn a few" "Flip a card"…），2026-10-23 全部撤掉：
   用户说"但凡主体内容一多就不会看这些字，一定要默认小字等于没人看"。别再用小字教人怎么互动，
   要么东西自己演一遍（Kohler 的 scene()），要么滚到就自己动（FINRA / 跨店的 plScene）。 */
.pl-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "n try" "h try"; align-items: end; gap: 8px 24px;
  margin-bottom: clamp(26px, 3.4vw, 44px);
}
.pl-n {
  grid-area: n; font-family: var(--f-ui); font-size: 12.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--flag);
}
.pl-h {
  grid-area: h; margin: 0; max-width: 22ch; font-family: var(--f-display); font-weight: 520;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -.022em; color: var(--ink);
}
.pl-head .pl-replay { grid-area: try; margin-bottom: 8px; }
.pl-hand { position: relative; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.pl-hand::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid currentColor;
  animation: kp-tap 1.8s var(--ease) infinite;
}
.pl-hand.is-drag { animation: kp-drag 2.2s var(--ease) infinite; }
@keyframes kp-tap { 0% { transform: scale(.4); opacity: 1; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
@keyframes kp-drag { 0%, 15% { transform: translateX(-4px); } 60%, 100% { transform: translateX(8px); } }
@media (max-width: 760px) {
  .pl-head { grid-template-columns: 1fr; grid-template-areas: "n" "h" "try"; }
  .pl-head .pl-replay { justify-self: start; margin: 4px 0 0; }
}


/* 来源小字 */
.pl-src { margin-top: 14px; font-family: var(--f-ui); font-size: 12.5px; color: var(--ink-45); }

/* 白底页的通用面板：灰带里自动变白（--paper-warm 跟着色带翻） */
.pl-panel { padding: clamp(20px, 2.6vw, 32px); border-radius: 24px; background: var(--paper-warm); }

/* 分段开关（Before / After 之类） */
.pl-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--paper-warm); border: 1px solid var(--ink-12); }
.pl-seg button {
  padding: 9px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-60);
  font: 500 14.5px/1 var(--f-ui); cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease);
}
.pl-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pl-seg button:focus-visible { outline: 2px solid var(--flag); outline-offset: 2px; }

/* 点着走的流程播放器：一块屏幕 + 底下的步骤点。屏幕上有一个呼吸的热点提示"点这里继续" */
.pl-flow { display: grid; gap: 16px; }
.pl-screen {
  position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; overflow: hidden;
  background: var(--paper-warm); cursor: pointer; box-shadow: 0 0 0 1px var(--ink-12), 0 24px 50px -24px rgba(0, 0, 0, .35);
}
.pl-screen img { display: block; width: 100%; height: auto; transition: opacity .35s var(--ease), transform .5s var(--pl-spring); }
.pl-screen img.is-swap { opacity: 0; transform: scale(.985); }
.pl-screen:focus-visible { outline: 2px solid var(--flag); outline-offset: 3px; }
.pl-tapme {
  position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 500 14px/1 var(--f-ui); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
}
.pl-tapme .pl-hand { color: var(--flag); }
.pl-steps { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pl-dots { display: flex; gap: 6px; }
.pl-dots button {
  width: 28px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: var(--ink-12); cursor: pointer;
  transition: background .3s var(--ease), width .4s var(--pl-spring);
}
.pl-dots button[aria-current="step"] { width: 44px; background: var(--flag); }
.pl-dots button.is-past { background: color-mix(in srgb, var(--flag) 45%, transparent); }
.pl-cap { font-family: var(--f-ui); font-size: 15px; color: var(--ink-60); }
.pl-cap b { color: var(--ink); font-weight: 500; margin-right: 6px; }
.pl-step-n { margin-right: 10px; font-variant-numeric: tabular-nums; color: var(--flag); font-weight: 500; }

/* 大数字 */
.pl-num { font-family: var(--f-display); font-weight: 520; font-size: clamp(48px, 5.6vw, 80px); line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-pop { animation: pl-pop .5s var(--pl-spring); }
@keyframes pl-pop { 0% { transform: scale(.6); } }
.pl-shake { animation: pl-shake .4s var(--ease); }
@keyframes pl-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) {
  .pl-hand::after, .pl-hand.is-drag, .pl-pop, .pl-shake { animation: none !important; }
}

/* 自动播放的流程：当前刻度是一根进度条，填满就翻下一帧；不再需要"点这里"的胶囊 */
.pl-flow.is-auto .pl-tapme { display: none; }
.pl-flow.is-auto .pl-dots button { position: relative; overflow: hidden; }
.pl-flow.is-auto .pl-dots button[aria-current="step"] { background: var(--ink-12); }
.pl-flow.is-auto .pl-dots button::after { content: ''; position: absolute; inset: 0; background: var(--flag); transform: scaleX(0); transform-origin: left; }
.pl-flow.is-auto .pl-dots button.is-run::after { animation: pl-fill var(--auto, 2600ms) linear forwards; }
@keyframes pl-fill { to { transform: scaleX(1); } }
.pl-flow.is-auto .pl-screen { cursor: default; }

/* 只做指示的分段条（自动演示时显示"现在是哪一边"，不能点） */
.pl-seg.is-show span { padding: 9px 18px; border-radius: 999px; color: var(--ink-60); font: 500 14.5px/1 var(--f-ui); transition: background .35s var(--ease), color .35s var(--ease); }
.pl-seg.is-show span.is-on { background: var(--ink); color: var(--paper); }

/* ---------- 图标（2026-10-23 用户："可以使用一些 icon 辅助 keypoints"）：描边图标，currentColor 着色 ---------- */
.pl-ic { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -4px; }
.i-door { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%2021V4h12v17M3.5%2021h17M14.5%2012.5h.5'/%3E%3C/svg%3E"); }
.i-lock { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='11'%20width='14'%20height='9'%20rx='2'/%3E%3Cpath%20d='M8%2011V8a4%204%200%200%201%208%200v3'/%3E%3C/svg%3E"); }
.i-book { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%205.5c3-1%206-1%209%201%203-2%206-2%209-1V19c-3-1-6-1-9%201-3-2-6-2-9-1zM12%206.5V20'/%3E%3C/svg%3E"); }
.i-users { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='9'%20r='3.2'/%3E%3Ccircle%20cx='17'%20cy='10'%20r='2.6'/%3E%3Cpath%20d='M3.5%2019c.8-3%203-4.6%205.5-4.6s4.7%201.6%205.5%204.6M14.5%2015c2.4-.4%204.8.8%206%204'/%3E%3C/svg%3E"); }
.i-layers { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l9%205-9%205-9-5zM3%2013l9%205%209-5'/%3E%3C/svg%3E"); }
.i-refresh { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2011a8%208%200%201%200-2.3%205.7M20%205v6h-6'/%3E%3C/svg%3E"); }
.i-dollar { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203v18M16.5%207.5c0-1.9-2-3-4.5-3S7.5%205.7%207.5%207.7s2%202.8%204.5%203.3%204.5%201.4%204.5%203.4-2%203.1-4.5%203.1-4.5-1.1-4.5-3'/%3E%3C/svg%3E"); }
.i-monitor { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='12'%20rx='2'/%3E%3Cpath%20d='M8%2020h8M12%2016v4'/%3E%3C/svg%3E"); }
.i-eyeoff { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%203l18%2018M10.6%206.1A9.7%209.7%200%200%201%2012%206c5%200%209%206%209%206a16%2016%200%200%201-3%203.5M6.6%207.6C4.4%209.1%203%2012%203%2012s4%206%209%206c1.5%200%202.9-.4%204.1-1'/%3E%3C/svg%3E"); }
.i-key { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='8'%20cy='15'%20r='4'/%3E%3Cpath%20d='M11%2012l9-9M17%206l3%203'/%3E%3C/svg%3E"); }
.i-sidebar { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='16'%20rx='2'/%3E%3Cpath%20d='M15%204v16'/%3E%3C/svg%3E"); }
.i-toggle { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='7'%20width='20'%20height='10'%20rx='5'/%3E%3Ccircle%20cx='16'%20cy='12'%20r='2.5'/%3E%3C/svg%3E"); }
.i-listcheck { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%206l1.5%201.5L8%205M4%2013l1.5%201.5L8%2012M11%206h9M11%2013h9M11%2019h9'/%3E%3C/svg%3E"); }
.i-phone { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%204h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%206a2%202%200%200%201%202-2'/%3E%3C/svg%3E"); }
.i-board { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='16'%20rx='2'/%3E%3Cpath%20d='M9%204v16M15%204v16'/%3E%3C/svg%3E"); }
.i-check { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M8%2012.5l2.8%202.8L16%209.5'/%3E%3C/svg%3E"); }
.i-alert { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.5l9%2016H3zM12%2010v4M12%2017v.5'/%3E%3C/svg%3E"); }
.i-pencil { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2020l4-1%2011-11-3-3L5%2016zM14%206l3%203'/%3E%3C/svg%3E"); }
.i-arrow { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14M13%206l6%206-6%206'/%3E%3C/svg%3E"); }
.i-usercheck { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='8'%20r='4'/%3E%3Cpath%20d='M2.5%2020c1-3.5%203.6-5%206.5-5%201.6%200%203%20.4%204%201.2M16%2011l2%202%204-4'/%3E%3C/svg%3E"); }
.i-undo { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2014L4%209l5-5M4%209h10a6%206%200%200%201%200%2012h-3'/%3E%3C/svg%3E"); }
.i-tablet { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='3'%20width='14'%20height='18'%20rx='2'/%3E%3Cpath%20d='M11%2018h2'/%3E%3C/svg%3E"); }
.i-flag { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2021V4M5%204h11l-2%204%202%204H5'/%3E%3C/svg%3E"); }
.i-upload { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2016V4M7%209l5-5%205%205M4%2016v4h16v-4'/%3E%3C/svg%3E"); }
.i-shield { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l8%203v6c0%205-3.5%208-8%209-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E"); }
.i-db { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cellipse%20cx='12'%20cy='5'%20rx='8'%20ry='3'/%3E%3Cpath%20d='M4%205v14c0%201.7%203.6%203%208%203s8-1.3%208-3V5M4%2012c0%201.7%203.6%203%208%203s8-1.3%208-3'/%3E%3C/svg%3E"); }
.i-replay { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012a8%208%200%201%200%202.3-5.7M4%204v5h5'/%3E%3C/svg%3E"); }
.i-camera { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%208h3l2-3h6l2%203h3v11H4z'/%3E%3Ccircle%20cx='12'%20cy='13'%20r='3.5'/%3E%3C/svg%3E"); }
.i-scan { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%208V4h4M16%204h4v4M20%2016v4h-4M8%2020H4v-4M7%2012h10'/%3E%3C/svg%3E"); }
.i-cloud { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2018a4.5%204.5%200%200%201-.5-9A6%206%200%200%201%2018%208.5a4.8%204.8%200%200%201-.5%209.5z'/%3E%3C/svg%3E"); }
.i-pause { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%205v14M15%205v14'/%3E%3C/svg%3E"); }

/* 图标 + 一句话的要点行 */
.pl-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pl-points li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; font: 400 15px/1.45 var(--f-ui); color: var(--ink-60); transition: color .35s var(--ease), opacity .35s var(--ease); }
/* 图标小方块：<span class="pl-chip"><i class="pl-ic i-door"></i></span> */
.pl-chip { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--flag) 12%, transparent); color: var(--flag); }
.pl-chip .pl-ic { vertical-align: 0; }
.pl-points b { display: block; color: var(--ink); font-weight: 500; }
.pl-points.is-steps li { opacity: .45; }
.pl-points.is-steps li.is-on, .pl-points.is-steps li.is-past { opacity: 1; }
.pl-points.is-steps li.is-on b { color: var(--flag); }

/* 重看一遍：演完才出现的小链接 */
.pl-replay { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink-60); font: 500 13.5px/1 var(--f-ui); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease), color .2s var(--ease); }
.pl-replay .pl-ic { width: 16px; height: 16px; vertical-align: 0; }
.pl-replay:hover { color: var(--ink); }
.pl-replay:focus-visible { outline: 2px solid var(--flag); outline-offset: 3px; }
.is-played .pl-replay, .pl-replay.is-shown { opacity: 1; pointer-events: auto; }

/* 自动流程的步骤清单：所有字一直在，当前那条高亮、顶上一根进度条；悬停整块就暂停 */
.pl-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.pl-list button {
  position: relative; display: grid; gap: 3px; align-content: start; width: 100%; height: 100%; padding: 14px 14px 12px; border: 0; border-radius: 14px;
  background: var(--paper-warm); color: var(--ink-60); text-align: left; cursor: pointer; overflow: hidden;
  font: 400 13.5px/1.4 var(--f-ui); transition: background .3s var(--ease), color .3s var(--ease);
}
.pl-list button:hover { color: var(--ink); }
.pl-list button:focus-visible { outline: 2px solid var(--flag); outline-offset: 2px; }
.pl-list .pl-li-n { font: 500 12px/1 var(--f-ui); color: var(--flag); font-variant-numeric: tabular-nums; }
.pl-list b { font: 500 15px/1.25 var(--f-ui); color: var(--ink); }
.pl-list li[aria-current] button { background: var(--ink); color: color-mix(in srgb, var(--paper) 75%, transparent); }
.pl-list li[aria-current] b { color: var(--paper); }
.pl-list li[aria-current] .pl-li-n { color: color-mix(in srgb, var(--flag) 55%, var(--paper)); }
.pl-li-bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--flag); transform: scaleX(0); transform-origin: left; }
.pl-flow.is-auto li[aria-current] .pl-li-bar.is-run { animation: pl-fill var(--auto, 4500ms) linear forwards; }
.pl-flow.is-paused li[aria-current] .pl-li-bar.is-run { animation-play-state: paused; }
.pl-paused { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: 999px; background: rgba(0, 0, 0, .72); color: #ffffff; font: 500 12.5px/1 var(--f-ui); opacity: 0; transition: opacity .25s var(--ease); pointer-events: none; }
.pl-paused .pl-ic { width: 14px; height: 14px; vertical-align: 0; }
.pl-flow.is-paused .pl-paused { opacity: 1; }
@media (max-width: 620px) { .pl-list { grid-template-columns: 1fr 1fr; } }


/* ---------- 演示手指（js/play.js 的 plAct.scene，2026-10-24） ----------
   和 Kohler 的 .kp-ptr 同一个动作；Kohler 是黑底所以是白圈，这里默认是浅色页，用墨色圈。深色页翻回白圈。 */
.pl-sec { position: relative; }
.pl-ptr {
  position: absolute; left: 0; top: 0; z-index: 6; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: 50%; background: rgba(0, 0, 0, .14);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .78), 0 8px 22px rgba(0, 0, 0, .18);
  pointer-events: none; opacity: 0;
  transition: transform .7s cubic-bezier(.45, 0, .2, 1), opacity .3s var(--ease), scale .2s var(--ease);
}
.is-dark .pl-ptr { background: rgba(255, 255, 255, .3); box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 8px 22px rgba(0, 0, 0, .55); }
.pl-ptr.is-on { opacity: 1; }
.pl-ptr.is-jump { transition: opacity .3s var(--ease); }
.pl-ptr.is-press { scale: .8; }
.pl-ptr::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; color: rgba(0, 0, 0, .7); opacity: 0; }
.is-dark .pl-ptr::after { color: #ffffff; }
.pl-ptr.is-tap { animation: pl-ptr-tap .36s var(--ease); }
.pl-ptr.is-tap::after { animation: pl-ptr-ring .7s var(--ease); }
@keyframes pl-ptr-tap { 45% { scale: .74; } }
@keyframes pl-ptr-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
@media (prefers-reduced-motion: reduce) { .pl-ptr { display: none; } }

/* 白底页的通用卡片底（灰带里自动翻白） */
.pl-card { padding: clamp(20px, 2.4vw, 30px); border-radius: 24px; background: var(--paper-warm); }
.pl-lead { max-width: 30ch; font-family: var(--f-display); font-weight: 520; font-size: clamp(20px, 2vw, 26px); line-height: 1.22; letter-spacing: -.015em; color: var(--ink); }
.pl-lead b { font-weight: inherit; color: var(--flag); }

/* 更多描边图标（2026-10-24，FitFido / Brilliant 的 playful 草稿用） */
.i-clock { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.5'/%3E%3Cpath%20d='M12%207.5V12l3%202'/%3E%3C/svg%3E"); }
.i-kit { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3.5'%20y='7'%20width='17'%20height='12'%20rx='2'/%3E%3Cpath%20d='M9%207V5h6v2M12%2010v6M9%2013h6'/%3E%3C/svg%3E"); }
.i-bark { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2016c0-5%203-9%207-9h2l3-3v4c2%201%203%203%203%205v1h-5l-2%202H8'/%3E%3Cpath%20d='M7%2020l1-4'/%3E%3C/svg%3E"); }
.i-bone { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7.5%2013.5l6-6M6%209.5a2%202%200%201%201%201.5-3.5%202%202%200%201%201%203.5-1.5c.6%201.1.2%202.3-.8%203L7%2010.7c-.7.6-1.8.6-2.5%200M18%2014.5a2%202%200%201%201-1.5%203.5%202%202%200%201%201-3.5%201.5c-.6-1.1-.2-2.3.8-3l3.2-3.2c.7-.6%201.8-.6%202.5%200'/%3E%3C/svg%3E"); }
.i-scale { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='4'%20width='16'%20height='16'%20rx='3'/%3E%3Cpath%20d='M8%209.5a6%206%200%200%201%208%200L13.4%2012h-2.8zM12%2012l1.2-2.6'/%3E%3C/svg%3E"); }
.i-bowl { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012h18a9%206%200%200%201-18%200zM8%2019h8'/%3E%3Cpath%20d='M9%209c0-1.5%201-2%201-3.5M13%209c0-1.5%201-2%201-3.5'/%3E%3C/svg%3E"); }
.i-chart { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%204v16h16'/%3E%3Cpath%20d='M7.5%2015l3.5-4%203%202.5%204.5-6'/%3E%3C/svg%3E"); }
.i-dog { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%209l1-5%203%203h6l3-3%201%205c0%205-3%209-7%209s-7-4-7-9z'/%3E%3Cpath%20d='M10%2012v.5M14%2012v.5M11%2015h2'/%3E%3C/svg%3E"); }
.i-link { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10%2014a4%204%200%200%200%205.7%200l3-3a4%204%200%200%200-5.7-5.7l-1%201M14%2010a4%204%200%200%200-5.7%200l-3%203a4%204%200%200%200%205.7%205.7l1-1'/%3E%3C/svg%3E"); }
.i-bell { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%2016V11a6%206%200%200%201%2012%200v5l1.5%202h-15zM10%2020.5h4'/%3E%3C/svg%3E"); }
.i-calendar { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='5'%20width='16'%20height='15'%20rx='2'/%3E%3Cpath%20d='M4%2010h16M9%203v4M15%203v4M8%2014h3'/%3E%3C/svg%3E"); }
.i-compass { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.5'/%3E%3Cpath%20d='M15.5%208.5l-2%205-5%202%202-5z'/%3E%3C/svg%3E"); }
.i-chat { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%205h16v11H9l-5%204z'/%3E%3Cpath%20d='M8.5%209.5h7M8.5%2012.5h4'/%3E%3C/svg%3E"); }
.i-notes { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203.5h9l3%203v14H6z'/%3E%3Cpath%20d='M9%2010h6M9%2013.5h6M9%2017h4'/%3E%3C/svg%3E"); }
.i-search { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='6.5'/%3E%3Cpath%20d='M16%2016l4%204'/%3E%3C/svg%3E"); }
.i-streak { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M13%203L6%2013.5h5L10%2021l8-11h-5z'/%3E%3C/svg%3E"); }

/* 一屏看全（2026-10-26）：标题放宽成一行（右边本来就空着），标题和主体之间收紧。各页自己的字体覆盖不动，只覆盖宽度。 */
.pl-head { margin-bottom: clamp(18px, 2.2vw, 30px); }
.v2sec .pl-head .pl-h { max-width: 32ch; }
.is-brilliant .v2sec .pl-head .pl-h, .is-swift .v2sec .pl-head .pl-h { font-size: clamp(32px, 3.6vw, 52px); }
/* 矮屏（13 寸笔记本、窗口没拉满）：标题和它下面的间距再收一档，主体还是一屏看全 */
@media (min-width: 981px) and (max-height: 780px) {
  .pl-head { margin-bottom: 14px; gap: 4px 24px; }
  .v2sec .pl-head .pl-h { font-size: clamp(26px, 2.6vw, 36px); }
  .is-brilliant .v2sec .pl-head .pl-h, .is-swift .v2sec .pl-head .pl-h { font-size: clamp(28px, 3vw, 42px); }
  .is-reco .v2sec .pl-head .pl-h { font-size: clamp(26px, 2.6vw, 38px); }
}