/* css/story.css：演示条、旁白、虚拟指针。演示外壳，不属于产品界面。 */
#demo-bar { display: grid; gap: var(--b-sp-2); justify-items: center; max-width: min(720px, calc(100vw - 48px)); }
.tt-st-pill { height: 34px; padding: 0 var(--b-sp-4); border-radius: var(--b-radius-pill); font-size: var(--b-fs-13); font-weight: 500; color: var(--b-text-1); }
.tt-st-bar { display: flex; align-items: center; gap: var(--b-sp-1); padding: 4px; border-radius: var(--b-radius-pill); font-size: var(--b-fs-13); color: var(--b-text-2); }
.tt-st-bar .icon-btn { width: 32px; height: 32px; font-size: 13px; }
.tt-st-bar select { height: 32px; max-width: 200px; padding: 0 var(--b-sp-2); border: 0; border-radius: var(--b-radius-pill); color: var(--b-text-1); background: transparent; font: inherit; }
.tt-st-rate, .tt-st-part, .tt-st-exit { height: 32px; padding: 0 var(--b-sp-3); border-radius: var(--b-radius-pill); color: var(--b-text-2); }
.tt-st-rate:hover, .tt-st-part:hover, .tt-st-exit:hover { color: var(--b-text-1); background: var(--b-neutral-tint); }
.tt-st-rule { display: grid; gap: 2px; width: max-content; max-width: min(440px, calc(100vw - 48px)); margin: 0; padding: var(--b-sp-2) var(--b-sp-4); border-radius: 14px; font-size: var(--b-fs-13); line-height: 1.5; color: var(--b-text-2); background: var(--b-bg-card); box-shadow: inset 0 0 0 1px var(--b-line), 0 8px 24px -16px var(--b-card-shadow-far); }
.tt-st-rule b { font-weight: 600; color: var(--b-text-1); }
.tt-st-settings { display: grid; gap: var(--b-sp-2); padding: var(--b-sp-3) var(--b-sp-4); border-radius: 18px; font-size: var(--b-fs-13); color: var(--b-text-2); }
.tt-st-row { display: flex; align-items: center; justify-content: space-between; gap: var(--b-sp-4); }
.tt-st-row .seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--b-radius-pill); background: var(--b-neutral-tint); }
.tt-st-row button[aria-pressed] { height: 28px; padding: 0 var(--b-sp-3); border-radius: var(--b-radius-pill); color: var(--b-text-2); }
.tt-st-row button[aria-pressed="true"] { color: var(--b-text-1); background: var(--b-bg-card); box-shadow: 0 1px 2px var(--b-card-shadow); }
.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: transform 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; } }
@media (prefers-reduced-motion: reduce) { .tt-cursor { transition: opacity 200ms; } .tt-cursor.is-tap::before { animation: none; } }