/* 演示层样式（不是产品界面）：底部播放条（上一行时间轴，下一行控制、旁白、倍速、退出）、虚拟光标、聚光圈、开场卡、「看演示」。
   深色底、黄色强调，照旧定稿原型（样板间原型-评审改版/player.css）的观感；手机宽（≤ 760）收成一行，点「展开」再出时间轴与倍速。
   播放条的高度写进 --pl-h，产品里贴底的东西（提示条、详情层、手机吸底的采用条）按它让开。 */
:root { --pl-bg: #15191B; --pl-bg2: #20262A; --pl-bg3: #2B3237; --pl-fg: #EEF2F0; --pl-fg2: #A9B3AF; --pl-acc: #F2C94C; --pl-acc-ink: #1C1A12; --pl-h: 0px; }
html.pl-on body { padding-bottom: var(--pl-h); }
html.pl-on .toasts { bottom: calc(18px + var(--pl-h)); }
html.pl-on .layer { max-height: calc(100vh - var(--rb-h) - var(--hdr-h) - 44px - var(--pl-h)); }
html.pl-on .dlg { bottom: var(--pl-h); max-height: calc(100vh - var(--rb-h) - var(--pl-h) - 32px); }
html.pl-on .scrim { bottom: var(--pl-h); }

.pl { position: fixed; z-index: 320; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; background: var(--pl-bg); color: var(--pl-fg); font: 14px/1.45 var(--font-sans); box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .35); }
.pl[hidden] { display: none; }
.pl button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.pl svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl :focus-visible { outline: 2px solid var(--pl-acc); outline-offset: 1px; }
.pl-tl { display: flex; gap: 3px; padding: 8px 14px 0; }
.pl-seg { position: relative; min-width: 0; height: 22px; padding: 0 !important; border-radius: 5px; background: var(--pl-bg3) !important; overflow: hidden; text-align: left; }
.pl-seg i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(242, 201, 76, .30); transition: width .4s ease; }
.pl-seg.cur i { background: rgba(242, 201, 76, .55); }
.pl-seg span { position: relative; display: block; padding: 0 8px; line-height: 22px; font-size: 12px; color: var(--pl-fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-seg.cur span, .pl-seg:hover span { color: var(--pl-fg); font-weight: 600; }
.pl-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 6px 14px 8px; }
.pl-ctrls { display: flex; align-items: center; gap: 4px; flex: none; }
.pl-ib { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: var(--pl-fg2) !important; }
.pl-ib:hover { background: var(--pl-bg3) !important; color: var(--pl-fg) !important; }
.pl-main { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 96px; padding: 0 14px !important; border-radius: 12px; background: var(--pl-acc) !important; color: var(--pl-acc-ink) !important; font-weight: 700 !important; }
.pl-say { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.pl-ch { font-size: 12px; font-weight: 600; color: var(--pl-acc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-text { font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.pl-right { display: flex; align-items: center; gap: 8px; flex: none; }
.pl-speed { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--pl-bg2); }
.pl-speed button { height: 28px; padding: 0 10px !important; border-radius: 7px; font-size: 13px; color: var(--pl-fg2) !important; }
.pl-speed button.on { background: var(--pl-bg3) !important; color: var(--pl-fg) !important; font-weight: 600; }
.pl-tb { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px !important; border-radius: 9px; font-size: 13px; color: var(--pl-fg2) !important; white-space: nowrap; }
.pl-tb:hover { background: var(--pl-bg3) !important; color: var(--pl-fg) !important; }
.pl-endbtns button { height: 34px; padding: 0 14px !important; border-radius: 9px; background: var(--pl-bg3) !important; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pl-more { display: none; }

/* 虚拟光标与聚光圈 */
.pl-hand { position: fixed; left: 0; top: 0; z-index: 330; width: 28px; height: 28px; margin: -3px 0 0 -5px; pointer-events: none; opacity: 0; transition-property: transform, opacity; transition-timing-function: cubic-bezier(.3, .7, .2, 1); }
.pl-hand.on { opacity: 1; }
.pl-hand svg { width: 28px; height: 28px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); }
.pl-hand::after { content: ""; position: absolute; left: 2px; top: 0; width: 14px; height: 14px; border-radius: 50%; }
.pl-hand.press::after { animation: pl-tap .42s ease-out; }
@keyframes pl-tap { 0% { background: rgba(242, 201, 76, .8); transform: scale(.4); } 100% { background: rgba(242, 201, 76, 0); transform: scale(3); } }
.pl-spot { position: fixed; z-index: 325; pointer-events: none; border-radius: 14px; box-shadow: 0 0 0 2px rgba(242, 201, 76, .95), 0 0 0 7px rgba(242, 201, 76, .22); opacity: 0; transition: opacity .25s ease, left .35s ease, top .35s ease, width .35s ease, height .35s ease; }
.pl-spot.on { opacity: 1; }

/* 开场卡 */
.pl-curtain { position: fixed; inset: 0; z-index: 340; display: none; place-items: center; padding: 16px; background: rgba(14, 18, 17, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pl-curtain.on { display: grid; }
.pl-card { width: min(520px, 100%); padding: 28px 28px 22px; border-radius: 20px; background: var(--pl-bg); color: var(--pl-fg); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); font-family: var(--font-sans); }
.pl-k { font-size: 12px; font-weight: 600; color: var(--pl-acc); letter-spacing: .04em; }
.pl-card h1 { margin: 6px 0 10px; font-size: 30px; line-height: 1.2; }
.pl-card p { margin: 0 0 20px; font-size: 15px; line-height: 1.65; color: var(--pl-fg2); }
.pl-cbtns { display: flex; flex-wrap: wrap; gap: 10px; }
.pl-cbtns button { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border: 0; border-radius: 12px; font: 700 15px var(--font-sans); cursor: pointer; }
.pl-go { background: var(--pl-acc); color: var(--pl-acc-ink); }
.pl-skip { background: var(--pl-bg3); color: var(--pl-fg); }
.pl-cbtns button:focus-visible { outline: 2px solid var(--pl-fg); outline-offset: 2px; }
.pl-ring { --p: 1; position: relative; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--pl-acc-ink) calc(var(--p) * 360deg), rgba(0, 0, 0, .15) 0); }
.pl-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--pl-acc); }
.pl-hint { display: block; margin-top: 12px; font-size: 12px; color: var(--pl-fg2); }

/* 退出演示后：左下角「看演示」 */
.pl-again { position: fixed; left: 14px; bottom: 14px; z-index: 320; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--pl-bg); color: var(--pl-fg); font: 600 13px var(--font-sans); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .5); cursor: pointer; }
.pl-again[hidden] { display: none; }
.pl-again svg { width: 14px; height: 14px; fill: var(--pl-acc); stroke: none; }

@media (max-width: 760px) {
  .pl-tl, .pl-right, .pl-ctrls .pl-ib { display: none; }
  .pl-row { gap: 10px; min-height: 0; padding: 8px 10px; }
  .pl-main { min-width: 40px; width: 40px; padding: 0 !important; }
  .pl-main span { display: none; }
  .pl-text { font-size: 14px; line-height: 1.45; }
  .pl-more { display: inline-flex; flex-direction: column; align-items: center; flex: none; gap: 0; font-size: 12px; color: var(--pl-fg2) !important; }
  .pl.open { flex-direction: column-reverse; }
  .pl.open .pl-tl { display: flex; flex-wrap: wrap; padding: 4px 10px 10px; }
  .pl.open .pl-seg { flex: 1 1 calc(50% - 3px) !important; }
  .pl.open .pl-ctrls .pl-ib { display: grid; }
  .pl.open .pl-row { flex-wrap: wrap; }
  .pl.open .pl-right { display: flex; order: 9; width: 100%; justify-content: space-between; }
  .pl.ended .pl-row { flex-wrap: wrap; }
  .pl-endbtns { order: 8; }
  .pl-card { padding: 22px 20px 18px; }
  .pl-card h1 { font-size: 24px; }
  html.pl-on .ab-sticky { bottom: calc(8px + var(--pl-h)); }
  html.pl-on .layer { bottom: var(--pl-h); }
}
@media (prefers-reduced-motion: reduce) {
  .pl-hand, .pl-spot, .pl-seg i { transition: none; }
}

/* 退出演示后左下角的「看演示」：页面底部留出它的位置，滚到底时不压住内容；提示条、手机吸底的采用条都在它上面 */
html.pl-pill body { padding-bottom: 56px; }
html.pl-pill .toasts { bottom: 62px; }
.pl-again { height: 32px; padding: 0 12px; font-size: 12px; opacity: .92; }
.pl-again:hover { opacity: 1; }
html.pl-pill .np { bottom: 58px; }   /* 随手记面板底边让到「播放演示」上面，底部说明那行不被压住 */
@media (max-width: 760px) {
  html.pl-pill .ab-sticky { bottom: 56px; }
  html.pl-pill .np { bottom: 0; }
  html.pl-pill .np-f { padding-bottom: 54px; }
}
/* 剧本在点按钮（el.click() 不是真的点按），浏览器会把随后还回去的焦点当成键盘焦点画框；播放中不画，接手或退出后照常 */
html.pl-playing #app :focus-visible, html.pl-playing #pop :focus-visible { outline: none; }

/* 剧本 v2 的演示层：字幕上的「新设计」小标、时间牌、桌面拖进助手的文件、结束卡 */
.pl-new { display: inline-flex; align-items: center; height: 20px; margin-left: 10px; padding: 0 8px; border-radius: 999px; background: var(--pl-bg3); color: var(--pl-fg2); font-size: 12px; font-weight: 600; vertical-align: 2px; white-space: nowrap; }
.pl-tc { position: fixed; z-index: 335; left: 50%; top: 22vh; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 26px 12px; border-radius: 18px; background: rgba(21, 25, 27, .92); color: var(--pl-fg); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55); font-family: var(--font-sans); pointer-events: none; opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s ease, transform .2s ease; }
.pl-tc.on { opacity: 1; transform: translate(-50%, 0); }
.pl-tc-t { display: flex; align-items: baseline; gap: 12px; font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pl-tc-t span:first-child { color: var(--pl-fg2); font-size: 22px; }
.pl-tc-t i { font-style: normal; font-size: 20px; color: var(--pl-acc); }
.pl-tc-l { font-size: 13px; color: var(--pl-fg2); }
.pl-file { position: fixed; left: 0; top: 0; z-index: 330; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border-radius: 12px; background: var(--surface-raised, #fff); color: var(--ink, #1F1E1B); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .4); font: 600 13px var(--font-sans); white-space: nowrap; pointer-events: none; }
.pl-file svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.ms-facts.pl-hover + .ms-tip { display: block; }
.tl-row.pl-hover .pin-btn { opacity: 1; }   /* 钉住那一拍：光标指到这行，空心钉像真的悬停一样露出来 */
.pl-endwrap { position: fixed; z-index: 318; left: 0; right: 0; top: 0; bottom: var(--pl-h); display: grid; place-items: center; padding: 16px; background: rgba(14, 18, 17, .6); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); overflow: auto; }
.pl-endwrap[hidden] { display: none; }
.pl-end { width: min(680px, 100%); padding: 26px 28px 22px; border-radius: 20px; background: var(--pl-bg); color: var(--pl-fg); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); font-family: var(--font-sans); }
.pl-end h2 { margin: 6px 0 16px; font-size: 26px; line-height: 1.3; }
.pl-cmp { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.pl-cmp th { padding: 0 12px 6px 0; text-align: left; font-size: 12px; font-weight: 600; color: var(--pl-fg2); }
.pl-cmp td { padding: 9px 12px 9px 0; border-top: 1px solid var(--pl-bg3); vertical-align: top; }
.pl-cmp td:first-child { width: 42%; color: var(--pl-fg2); }
.pl-cmp td:last-child { color: var(--pl-fg); font-weight: 600; }
.pl-facts { margin: 14px 0 18px; padding: 10px 12px; border-radius: 12px; background: var(--pl-bg2); font-size: 13px; line-height: 1.6; color: var(--pl-fg); }
.pl-facts .pl-nw { white-space: nowrap; }
.pl-end .pl-cbtns button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-sub { margin: -4px 0 12px !important; color: var(--pl-fg) !important; font-weight: 600; }
.pl-fine { margin-top: -10px !important; font-size: 12px !important; line-height: 1.6 !important; }
@media (max-width: 760px) {
  .pl-tc { top: 18vh; padding: 10px 18px 9px; }
  .pl-tc-t { font-size: 26px; }
  .pl-end { padding: 20px 18px 16px; }
  .pl-end h2 { font-size: 20px; }
  .pl-cmp { font-size: 13px; }
  .pl-new { height: 18px; margin-left: 6px; padding: 0 6px; font-size: 11px; }
}