/* css/story.css：底部演示控制带与虚拟指针。演示外壳，不属于产品界面。
   控制带与团团对话流样张（../2026-10-28-团团对话流样张/css/sample.css 的 .pl 一族）同一套：深色底、品牌黄，数值逐项照抄，类名加 tt- 前缀；
   上面一行进度条（v2 按 15 段打节点，段内拍板处另有小菱形），下面一行上一段／播放／下一段、旁白、倍速、演示设置。 */
:root { --tt-band-h: 92px; }
#demo-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; }
.tt-pl { height: var(--tt-band-h); display: grid; grid-template-rows: 26px 1fr; padding: 0 20px; background: #1d1c19; color: #f3efe6; font-size: 13px; box-shadow: 0 -10px 30px -16px rgb(0 0 0 / .5); }
.tt-pl button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.tt-pl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tt-pl :focus-visible { outline: 2px solid #FEBA0A; outline-offset: 2px; }
.tt-pl-track { position: relative; align-self: end; height: 18px; cursor: pointer; }
.tt-pl-rail, .tt-pl-fill { position: absolute; left: 0; top: 8px; height: 3px; border-radius: 2px; }
.tt-pl-rail { right: 0; background: rgb(255 255 255 / .16); }
.tt-pl-fill { width: 0; background: #FEBA0A; }
.tt-pl-node { position: absolute; top: 3px; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: #1d1c19 !important; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .5); }
.tt-pl-node.is-past { box-shadow: inset 0 0 0 2px #FEBA0A; background: #3a2f12 !important; }
.tt-pl-node:hover, .tt-pl-node:focus-visible { transform: scale(1.25); box-shadow: inset 0 0 0 2px #fff; }
/* 段内拍板：轨道上方的小菱形（样张没有，v2 加） */
.tt-pl-tick { position: absolute; top: -5px; width: 12px; height: 10px; margin-left: -6px; display: grid; place-items: center; }
.tt-pl-tick::before { content: ''; width: 6px; height: 6px; rotate: 45deg; border-radius: 1px; background: #FEBA0A; }
.tt-pl-tick:hover::before { background: #fff; scale: 1.3; }
.tt-pl-tip { position: absolute; bottom: 20px; transform: translateX(-50%); padding: 3px 8px; border-radius: 6px; background: #f3efe6; color: #1d1c19; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.tt-pl-tip[hidden] { display: none; }
.tt-pl-row { display: flex; align-items: center; gap: 16px; min-width: 0; }
.tt-pl-ctrls { display: flex; align-items: center; gap: 4px; flex: none; }
.tt-pl-ib { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: rgb(243 239 230 / .75) !important; }
.tt-pl-ib:hover { background: rgb(255 255 255 / .1) !important; color: #fff !important; }
.tt-pl-ib svg, .tt-pl-main svg { fill: currentColor; }
.tt-pl-main { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #FEBA0A !important; color: #1d1c19 !important; }
.tt-pl-main svg { width: 20px; height: 20px; }
.tt-pl-say { flex: 1; min-width: 0; display: grid; gap: 1px; }
.tt-pl-say[hidden], .tt-pl-decide[hidden] { display: none; }
.tt-pl-kl { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tt-pl-n { flex: none; font-size: 12px; color: rgb(243 239 230 / .5); font-variant-numeric: tabular-nums; }
.tt-pl-k { font-size: 12.5px; font-weight: 700; color: #FEBA0A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-pl-text { font-size: 14px; font-weight: 500; line-height: 1.4; color: #f3efe6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tt-pl-decide { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
.tt-pl-q { flex: 1; min-width: 0; display: grid; gap: 1px; }
.tt-pl-q b { font-size: 15px; color: #FEBA0A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-pl-q span { font-size: 12.5px; color: rgb(243 239 230 / .75); }
.tt-pl-ring { --p: 100; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 700; color: #FEBA0A; background: radial-gradient(#2a2414 58%, transparent 60%), conic-gradient(#FEBA0A calc(var(--p) * 1%), rgb(255 255 255 / .15) 0); }
.tt-pl-go { flex: none; height: 34px; padding: 0 14px; border-radius: 10px; background: #FEBA0A !important; color: #1d1c19 !important; font-weight: 700; }
.tt-pl.is-deciding { background: #2a2414; }
.tt-pl-right { flex: none; display: flex; align-items: center; gap: 8px; }
.tt-pl-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgb(255 255 255 / .08); }
.tt-pl-seg button { height: 26px; padding: 0 9px; border-radius: 8px; font-size: 12.5px; color: rgb(243 239 230 / .7) !important; }
.tt-pl-seg button.on { background: rgb(255 255 255 / .16) !important; color: #fff !important; font-weight: 600; }
.tt-pl-set { position: relative; }
.tt-pl-tb { height: 32px; padding: 0 10px; border-radius: 10px; font-size: 12.5px; color: rgb(243 239 230 / .8) !important; }
.tt-pl-tb:hover, .tt-pl-tb[aria-expanded="true"] { background: rgb(255 255 255 / .1) !important; color: #fff !important; }
.tt-pl-pop { position: absolute; right: 0; bottom: calc(100% + 10px); display: grid; gap: 10px; width: 300px; padding: 12px 14px; border-radius: 14px; background: #2a2925; color: #f3efe6; box-shadow: 0 16px 40px -12px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(255 255 255 / .1); }
.tt-pl-pop[hidden] { display: none; }
.tt-pl-pop label { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; cursor: pointer; }
.tt-pl-pop input { margin-top: 2px; accent-color: #FEBA0A; }
.tt-pl-pop-h { font-size: 12px; font-weight: 600; color: rgb(243 239 230 / .5); }
.tt-pl-pop-note { font-size: 12px; color: rgb(243 239 230 / .5); }
.tt-pl-pop hr { margin: 0; border: 0; border-top: 1px solid rgb(255 255 255 / .1); }
.tt-cursor { position: fixed; left: 0; top: 0; z-index: 95; width: 22px; height: 26px; margin: -2px 0 0 -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='26' viewBox='0 0 22 26'%3E%3Cpath d='M2 1.5v19.2l4.9-4.6 3.1 7.2 3.3-1.4-3.1-7.1H17L2 1.5z' fill='%23161513' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / 22px 26px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .28)); opacity: 0; pointer-events: none; transition: translate 460ms cubic-bezier(.2,.8,.2,1), opacity 200ms, scale 110ms ease-out; transform-origin: 2px 2px; }
.tt-cursor.is-on { opacity: 1; }
.tt-cursor.is-press { scale: .88; }
/* 点下去时在指尖处扩散一圈，表示「点了」 */
.tt-cursor::before { content: ''; position: absolute; left: 2px; top: 2px; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: color-mix(in srgb, var(--b-text-1) 22%, transparent); opacity: 0; scale: .3; pointer-events: none; }
.tt-cursor.is-tap::before { animation: tt-cursor-ripple 520ms cubic-bezier(.2,.8,.2,1); }
@keyframes tt-cursor-ripple { from { opacity: .9; scale: .3; } to { opacity: 0; scale: 1.5; } }