/* 簡化的產品畫面（仿 Slack 的做法）：用 HTML/CSS 畫出重點，不用截圖。
   每個 .mock 放在有色的 .stage 裡；顏色全走變數，深色模式自動跟上。 */
:root {
  --stage-slate: rgb(222, 229, 238);
  --stage-moss: rgb(222, 236, 226);
  --stage-amber: rgb(246, 232, 208);
  --stage-paper: var(--paper-3);
  --mock-line: rgba(23, 23, 21, 0.1);
  --mock-muted: var(--fg-3);
  --slate: rgb(58, 92, 128);
  --amber: rgb(176, 108, 20);
  --violet: rgb(104, 84, 160);
}
@media (prefers-color-scheme: dark) {
  :root { --stage-slate: rgb(36, 44, 54); --stage-moss: rgb(34, 48, 40); --stage-amber: rgb(56, 44, 28); --stage-paper: rgb(34, 34, 31); --mock-line: rgba(250, 249, 246, 0.12); --slate: rgb(140, 176, 214); --amber: rgb(222, 160, 60); --violet: rgb(160, 130, 220); }
}

.stage { position: relative; padding: clamp(20px, 3vw, 40px); border-radius: 16px; background: var(--stage-paper); overflow: hidden; }
.stage-slate { background: var(--stage-slate); }
.stage-moss { background: var(--stage-moss); }
.stage-amber { background: var(--stage-amber); }
.stage > .mock { margin: 0 auto; }

.mock { box-sizing: border-box; width: 100%; max-width: 560px; padding: 18px 20px; border-radius: 12px; background: var(--bg-card); color: var(--fg); box-shadow: 0 1px 2px rgba(23, 23, 21, 0.06), 0 12px 32px rgba(23, 23, 21, 0.1); font-family: var(--font); font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.mock * { box-sizing: border-box; }
.mock .hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.mock .hd b { font-size: 16px; }
.mock .hd .sub { color: var(--mock-muted); font-size: 12px; }
.mock .hd .pill { margin-left: auto; }
.mock .sec { margin-top: 12px; }
.mock .sec > b { display: block; font-size: 12px; color: var(--mock-muted); margin-bottom: 4px; letter-spacing: 0.04em; }
.mock .ln { display: block; height: 8px; border-radius: 4px; background: var(--mock-line); margin: 7px 0; }
.mock .ln.w60 { width: 60%; } .mock .ln.w80 { width: 80%; } .mock .ln.w45 { width: 45%; }
.mock .row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--mock-line); }
.mock .row:first-child { border-top: 0; }
.mock .row .t { font-weight: 600; }
.mock .row .m { color: var(--mock-muted); font-size: 12px; }
.mock .row .r { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.mock .chk { width: 16px; height: 16px; border-radius: 3px; border: 1.5px solid var(--fg-3); flex: none; display: grid; place-items: center; font-size: 11px; }
.mock .chk.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mock .av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--paper); flex: none; }
.mock .av.a { background: var(--slate); } .mock .av.b { background: var(--moss); } .mock .av.c { background: var(--violet); }
.mock .pill { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1.5px solid currentColor; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.mock .pill.amber { color: var(--amber); } .mock .pill.slate { color: var(--slate); } .mock .pill.moss { color: var(--moss); }
.mock .pill.solid { background: var(--vermilion); border-color: var(--vermilion); color: var(--paper); }
.mock .btn-s { display: inline-block; padding: 3px 10px; border-radius: 4px; border: 1px solid var(--mock-line); font-size: 12px; font-weight: 600; }
.mock .btn-s.primary { background: var(--vermilion); border-color: var(--vermilion); color: var(--paper); }
.mock .seal { position: absolute; width: 64px; height: 64px; border-radius: 14px; background: var(--vermilion); color: var(--paper); display: grid; place-items: center; font-weight: 700; font-size: 15px; rotate: -8deg; box-shadow: 0 6px 18px rgba(194, 64, 42, 0.35); }

/* 看板 */
.mock-kanban { max-width: 640px; }
.mock-kanban .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mock-kanban .col > b { display: block; font-size: 12px; color: var(--mock-muted); margin-bottom: 8px; }
.mock-kanban .card { padding: 8px 10px; border: 1px solid var(--mock-line); border-radius: 8px; margin-bottom: 8px; font-size: 13px; }
.mock-kanban .card .m { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--mock-muted); font-size: 11px; }

/* 甘特 */
.mock-gantt { max-width: 620px; position: relative; }
.mock-gantt .grid { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); row-gap: 10px; }
.mock-gantt .lbl { font-size: 13px; font-weight: 600; padding-top: 2px; }
.mock-gantt .track { position: relative; height: 22px; background: repeating-linear-gradient(90deg, var(--mock-line) 0 1px, transparent 1px 12.5%); border-radius: 3px; }
.mock-gantt .bar { position: absolute; top: 2px; height: 18px; border-radius: 4px; border: 1.5px solid var(--slate); background: color-mix(in srgb, var(--slate) 18%, transparent); }
.mock-gantt .bar.done { border-color: var(--moss); background: color-mix(in srgb, var(--moss) 22%, transparent); }
.mock-gantt .bar.ai { border-style: dashed; border-color: var(--amber); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--amber) 35%, transparent) 0 5px, transparent 5px 10px); }
.mock-gantt .tag { position: absolute; top: 1px; left: calc(100% + 8px); white-space: nowrap; }
.mock-gantt .today { position: absolute; top: -6px; bottom: -6px; left: 37.5%; width: 2px; background: var(--vermilion); }
.mock-gantt .days { display: grid; grid-template-columns: repeat(8, 1fr); margin: 0 0 6px 120px; font-size: 11px; color: var(--mock-muted); }

/* 知識庫 */
.mock-knowledge .fact { padding: 8px 0; border-top: 1px solid var(--mock-line); }
.mock-knowledge .fact:first-of-type { border-top: 0; }
.mock-knowledge .src { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--slate); border-left: 2px solid var(--slate); padding-left: 6px; }

/* 對話框 */
.mock-ask .q { align-self: flex-end; max-width: 80%; margin-left: auto; padding: 8px 12px; border-radius: 12px 12px 2px 12px; background: var(--paper-3); font-size: 13px; }
.mock-ask .a { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--mock-line); border-radius: 12px; font-size: 13px; }
.mock-ask .a b { display: block; font-size: 11px; color: var(--mock-muted); margin-bottom: 4px; }
.mock-ask .cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mock-ask .bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--mock-line); border-radius: 999px; color: var(--mock-muted); font-size: 13px; }
.mock-ask .bar .send { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--vermilion); color: var(--paper); display: grid; place-items: center; font-size: 13px; }

/* 流程 */
.mock-pipeline { max-width: 640px; position: relative; }
.mock-pipeline .line { position: relative; display: flex; justify-content: space-between; align-items: flex-start; margin: 14px 0 6px; }
.mock-pipeline .line::before { content: ''; position: absolute; left: 16px; right: 16px; top: 16px; height: 2px; background: var(--mock-line); }
.mock-pipeline .node { position: relative; width: 72px; text-align: center; font-size: 11px; }
.mock-pipeline .dot { width: 32px; height: 32px; margin: 0 auto 6px; border-radius: 50%; border: 2.5px solid var(--mock-muted); background: var(--bg-card); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.mock-pipeline .dot.ai { border-color: var(--slate); color: var(--slate); }
.mock-pipeline .dot.code { border-color: var(--violet); color: var(--violet); }
.mock-pipeline .dot.tool { border-color: var(--moss); color: var(--moss); }
.mock-pipeline .dot.human { border-color: var(--amber); color: var(--amber); box-shadow: 0 0 0 6px color-mix(in srgb, var(--amber) 22%, transparent); }
.mock-pipeline .dot.done { background: var(--moss); border-color: var(--moss); color: var(--paper); }
.mock-pipeline .node small { display: block; color: var(--mock-muted); font-size: 10px; }
.mock-pipeline .wait { margin-top: 14px; padding: 10px 12px; border-left: 3px solid var(--amber); background: color-mix(in srgb, var(--amber) 10%, transparent); border-radius: 6px; font-size: 13px; display: flex; align-items: center; gap: 10px; }

/* 核准卡／成果／排程 */
.mock-approve .body { margin: 6px 0 12px; font-size: 13px; color: var(--fg-2); }
.mock-approve .acts { display: flex; gap: 8px; }
.mock-result .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.mock-result .tile { padding: 10px; border: 1px solid var(--mock-line); border-radius: 8px; }
.mock-result .tile b { display: block; font-size: 20px; }
.mock-result .tile span { font-size: 11px; color: var(--mock-muted); }
.mock-result .file { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--mock-line); border-radius: 8px; font-size: 12px; }
.mock-schedule .opt { display: inline-flex; gap: 6px; margin: 4px 0 8px; }
.mock-schedule .opt span { padding: 3px 10px; border: 1px solid var(--mock-line); border-radius: 4px; font-size: 12px; }
.mock-schedule .opt span.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* 管理後台 */
.mock-admin { max-width: 620px; }
.mock-admin .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mock-admin .tile { padding: 10px; border: 1px solid var(--mock-line); border-radius: 8px; }
.mock-admin .tile span { display: block; font-size: 11px; color: var(--mock-muted); }
.mock-admin .tile b { font-size: 22px; }
.mock-admin .meter { height: 6px; border-radius: 3px; background: var(--mock-line); margin-top: 8px; }
.mock-admin .meter i { display: block; height: 100%; width: 45%; border-radius: 3px; background: var(--vermilion); }
.mock-scope .toggle { display: inline-flex; border: 1px solid var(--mock-line); border-radius: 6px; overflow: hidden; margin: 6px 0 10px; }
.mock-scope .toggle span { padding: 4px 12px; font-size: 12px; }
.mock-scope .toggle span.on { background: var(--ink); color: var(--paper); }
.mock-scope .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.mock-audit .row { font-size: 12px; }
.mock-audit .row .ok { color: var(--moss); font-weight: 700; margin-left: auto; }
.mock-usage .u { display: grid; grid-template-columns: 70px 1fr 48px; gap: 10px; align-items: center; padding: 6px 0; font-size: 12px; }
.mock-usage .u i { display: block; height: 8px; border-radius: 4px; background: var(--mock-line); position: relative; }
.mock-usage .u i::after { content: ''; position: absolute; inset: 0; width: var(--w); border-radius: 4px; background: var(--slate); }
.mock-switch .sw { margin-left: auto; width: 34px; height: 20px; border-radius: 999px; background: var(--vermilion); position: relative; flex: none; }
.mock-switch .sw::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); }
.mock-switch .sw.off { background: var(--mock-line); } .mock-switch .sw.off::after { right: auto; left: 2px; }
.mock-ocr .steps { display: flex; gap: 6px; margin-bottom: 12px; }
.mock-ocr .steps span { flex: 1; text-align: center; padding: 6px 0; border-radius: 6px; border: 1px solid var(--mock-line); font-size: 12px; }
.mock-ocr .steps span.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mock-inbox .grp { margin-top: 10px; }
.mock-inbox .grp > b { display: block; font-size: 12px; margin-bottom: 4px; }
.mock-inbox .grp > b.red { color: var(--vermilion-ink); }

@media (max-width: 520px) {
  .mock { padding: 14px; font-size: 13px; }
  .mock .row .r .btn-s + .btn-s { display: none; }
  .mock-admin .tiles, .mock-result .tiles { grid-template-columns: repeat(2, 1fr); }
  .mock-kanban .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock-kanban .col:nth-child(3) { display: none; }
  .mock-pipeline .node { width: 54px; }
  .mock-gantt .grid { grid-template-columns: 88px minmax(0, 1fr); }
  .mock-gantt .days { margin-left: 88px; }
}

/* ---- 簡化動畫（仿 Slack）：進入視窗時加上 .play，每 8 秒循環；減少動態時全部靜止在完成狀態 ---- */
@keyframes mk-in-1 { 0%, 4% { opacity: 0; translate: 0 8px; } 9%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes mk-in-2 { 0%, 12% { opacity: 0; translate: 0 8px; } 17%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes mk-in-3 { 0%, 20% { opacity: 0; translate: 0 8px; } 25%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes mk-in-4 { 0%, 30% { opacity: 0; translate: 0 8px; } 35%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes mk-pop-5 { 0%, 42% { opacity: 0; scale: 0.6; } 47%, 96% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes mk-pop-6 { 0%, 62% { opacity: 0; scale: 1.6; } 68%, 96% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes mk-fade-6 { 0%, 62% { opacity: 1; } 66%, 100% { opacity: 0.35; } }
@keyframes mk-slide-right { 0%, 30% { translate: 0 0; } 40%, 100% { translate: var(--dx, 0) 0; } }
@keyframes mk-fill { 0%, 14% { width: 0; } 40%, 100% { width: var(--w, 45%); } }
@keyframes mk-tick-2 { 0%, 14% { background: var(--bg-card); color: transparent; } 18%, 100% { background: var(--moss); border-color: var(--moss); color: var(--paper); } }
@keyframes mk-tick-3 { 0%, 26% { background: var(--bg-card); color: transparent; } 30%, 100% { background: var(--moss); border-color: var(--moss); color: var(--paper); } }
@keyframes mk-tick-4 { 0%, 38% { background: var(--bg-card); color: transparent; } 42%, 100% { background: var(--moss); border-color: var(--moss); color: var(--paper); } }
@keyframes mk-glow { 0%, 50% { box-shadow: 0 0 0 0 transparent; } 56%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--amber) 22%, transparent); } }

.mock.play .a1 { animation: mk-in-1 8s infinite; }
.mock.play .a2 { animation: mk-in-2 8s infinite; }
.mock.play .a3 { animation: mk-in-3 8s infinite; }
.mock.play .a4 { animation: mk-in-4 8s infinite; }
.mock.play .a5 { animation: mk-pop-5 8s infinite; }
.mock.play .a6 { animation: mk-pop-6 8s infinite; transform-origin: center; }
.mock.play .dim6 { animation: mk-fade-6 8s infinite; }

/* 會議紀錄：列逐一出現 → 請確認彈出 */
.mock-meeting.play .row:nth-child(1) { animation: mk-in-1 8s infinite; }
.mock-meeting.play .row:nth-child(2) { animation: mk-in-2 8s infinite; }
.mock-meeting.play .row:nth-child(3) { animation: mk-in-3 8s infinite; }
.mock-meeting.play .row:nth-child(3) .r { animation: mk-pop-5 8s infinite; transform-origin: right center; }
/* 看板：三欄卡片依序落下 */
.mock-kanban.play .col:nth-child(1) .card { animation: mk-in-1 8s infinite; }
.mock-kanban.play .col:nth-child(2) .card { animation: mk-in-2 8s infinite; }
.mock-kanban.play .col:nth-child(3) .card { animation: mk-in-3 8s infinite; }
/* 甘特：AI 長條往後滑、請確認出現、朱印落下 */
.mock-gantt.play .bar.ai { animation: mk-slide-right 8s infinite; --dx: 18%; }
.mock-gantt.play .tag { animation: mk-pop-5 8s infinite; --dx: 18%; transform-origin: left center; }
.mock-gantt.play .seal { animation: mk-pop-6 8s infinite; }
/* 對話框：問 → 答 → 出處 */
.mock-ask.play .q { animation: mk-in-1 8s infinite; }
.mock-ask.play .a { animation: mk-in-3 8s infinite; }
.mock-ask.play .cites .pill { animation: mk-pop-5 8s infinite; transform-origin: left center; }
.mock-compose.play .q { animation: mk-in-1 8s infinite; }
.mock-compose.play .a { animation: mk-in-3 8s infinite; }
.mock-compose.play .bar .pill { animation: mk-pop-5 8s infinite; }
/* 流程：節點依序打勾，停在人工確認 */
.mock-pipeline.play .node:nth-child(1) .dot { animation: mk-tick-2 8s infinite; }
.mock-pipeline.play .node:nth-child(2) .dot { animation: mk-tick-3 8s infinite; }
.mock-pipeline.play .node:nth-child(3) .dot { animation: mk-tick-4 8s infinite; }
.mock-pipeline.play .node:nth-child(4) .dot { animation: mk-glow 8s infinite; }
.mock-pipeline.play .wait { animation: mk-pop-5 8s infinite; transform-origin: left center; }
/* 後台：四格依序出現，用量條填滿，需要注意的清單滑入 */
.mock-admin.play .tile:nth-child(1) { animation: mk-in-1 8s infinite; }
.mock-admin.play .tile:nth-child(2) { animation: mk-in-1 8s infinite; animation-delay: 0.15s; }
.mock-admin.play .tile:nth-child(3) { animation: mk-in-1 8s infinite; animation-delay: 0.3s; }
.mock-admin.play .tile:nth-child(4) { animation: mk-in-1 8s infinite; animation-delay: 0.45s; }
.mock-admin.play .meter i { animation: mk-fill 8s infinite; --w: 45%; }
.mock-admin.play .sec:last-child .row { animation: mk-in-4 8s infinite; }
/* 可見範圍：切到指定對象，部門逐一加入 */
.mock-scope.play .chips .pill:nth-child(1) { animation: mk-in-3 8s infinite; }
.mock-scope.play .chips .pill:nth-child(2) { animation: mk-in-4 8s infinite; }
.mock-scope.play .btn-s.primary { animation: mk-pop-5 8s infinite; transform-origin: left center; }
/* 稽核：逐筆新增 */
.mock-audit.play .row:nth-child(2) { animation: mk-in-1 8s infinite; }
.mock-audit.play .row:nth-child(3) { animation: mk-in-2 8s infinite; }
.mock-audit.play .row:nth-child(4) { animation: mk-in-3 8s infinite; }
.mock-audit.play .row:nth-child(5) { animation: mk-in-4 8s infinite; }
/* 用量條 */
.mock-usage.play .u i::after { animation: mk-fill 8s infinite; }
.mock-usage.play .u:nth-child(2) i::after { --w: 64%; } .mock-usage.play .u:nth-child(3) i::after { --w: 53%; } .mock-usage.play .u:nth-child(4) i::after { --w: 38%; } .mock-usage.play .u:nth-child(5) i::after { --w: 21%; }

@media (prefers-reduced-motion: reduce) { .mock.play * { animation: none !important; } }

/* ---- 三段式故事畫面：.sc 場景依序出現，12 秒一輪；元素時間點以百分比表示 ---- */
.mock-story { position: relative; min-height: 250px; }
.mock-storymeeting { min-height: 352px; }
.mock-storyadmin { min-height: 300px; }
@media (max-width: 520px) { .mock-story { min-height: 300px; } .mock-storymeeting { min-height: 380px; } .mock-storyadmin { min-height: 360px; } }
.mock-story .sc { display: none; }
.mock-story .sc:last-child { display: block; }
.mock-story.play .sc { display: block; position: absolute; inset: 18px 20px; opacity: 0; }
.mock-story .cap { display: inline-block; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; background: var(--paper-3); color: var(--fg-2); font-size: 11px; font-weight: 600; }
.mock-story .q { margin-left: auto; max-width: 80%; padding: 8px 12px; border-radius: 12px 12px 2px 12px; background: var(--paper-3); font-size: 13px; width: fit-content; }
.mock-story .a { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--mock-line); border-radius: 12px; font-size: 13px; }
.mock-story .a b { display: block; font-size: 11px; color: var(--mock-muted); }
.mock-story .bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 12px; border: 1px solid var(--mock-line); border-radius: 999px; color: var(--mock-muted); font-size: 13px; }
.mock-story .line { position: relative; display: flex; justify-content: space-between; margin: 12px 0 4px; }
.mock-story .line::before { content: ""; position: absolute; left: 16px; right: 16px; top: 16px; height: 2px; background: var(--mock-line); }
.mock-story .node { position: relative; width: 64px; text-align: center; font-size: 11px; }
.mock-story .dot { width: 32px; height: 32px; margin: 0 auto 6px; border-radius: 50%; border: 2.5px solid var(--mock-muted); background: var(--bg-card); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: transparent; }
.mock-story .dot.ai { border-color: var(--slate); } .mock-story .dot.code { border-color: var(--violet); } .mock-story .dot.tool { border-color: var(--moss); } .mock-story .dot.human { border-color: var(--amber); }
.mock-story .node small { display: block; color: var(--mock-muted); font-size: 10px; }
.mock-story .wait { margin-top: 12px; padding: 8px 12px; border-left: 3px solid var(--amber); background: color-mix(in srgb, var(--amber) 10%, transparent); border-radius: 6px; font-size: 13px; display: flex; align-items: center; gap: 10px; }
.mock-story .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mock-story .col > b { display: block; font-size: 12px; color: var(--mock-muted); margin-bottom: 8px; }
.mock-story .card { padding: 8px 10px; border: 1px solid var(--mock-line); border-radius: 8px; margin-bottom: 8px; font-size: 13px; }
.mock-story .card .m { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--mock-muted); font-size: 11px; }
.mock-story .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mock-story .tile { padding: 8px 10px; border: 1px solid var(--mock-line); border-radius: 8px; } .mock-story .tile span { display: block; font-size: 11px; color: var(--mock-muted); } .mock-story .tile b { font-size: 20px; }
.mock-story .meter { height: 6px; border-radius: 3px; background: var(--mock-line); margin-top: 8px; } .mock-story .meter i { display: block; height: 100%; border-radius: 3px; background: var(--vermilion); }
.mock-story .ok { color: var(--moss); font-weight: 700; margin-left: auto; }
@media (max-width: 520px) { .mock-story .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mock-story .col:nth-child(3) { display: none; } .mock-story .node { width: 48px; } }
@keyframes sc-1 { 0% {opacity:0} 2%,32% {opacity:1} 34%,100% {opacity:0} }
@keyframes sc-2 { 0%,33% {opacity:0} 35%,65% {opacity:1} 67%,100% {opacity:0} }
@keyframes sc-3 { 0%,66% {opacity:0} 68%,98% {opacity:1} 100% {opacity:0} }
.mock-story.play .sc[data-step="1"] { animation: sc-1 12s infinite; }
.mock-story.play .sc[data-step="2"] { animation: sc-2 12s infinite; }
.mock-story.play .sc[data-step="3"] { animation: sc-3 12s infinite; }
@keyframes kf-storyflow-s-a { 0%,3% {opacity:0;translate:0 8px} 4%,33% {opacity:1;translate:0 0} 34%,100% {opacity:0} }
.mock-storyflow.play .s-a { animation: kf-storyflow-s-a 12s infinite; }
@keyframes kf-storyflow-s-b { 0%,11% {opacity:0;translate:0 8px} 12%,33% {opacity:1;translate:0 0} 34%,100% {opacity:0} }
.mock-storyflow.play .s-b { animation: kf-storyflow-s-b 12s infinite; }
@keyframes kf-storyflow-s-c { 0%,3% {opacity:0;translate:0 8px} 4%,33% {opacity:1;translate:0 0} 34%,100% {opacity:0} }
.mock-storyflow.play .s-c { animation: kf-storyflow-s-c 12s infinite; }
@keyframes kf-storyflow-s-d { 0%,19% {opacity:0;scale:0.6} 20%,33% {opacity:1;scale:1} 34%,100% {opacity:0} }
.mock-storyflow.play .s-d { animation: kf-storyflow-s-d 12s infinite; transform-origin: center; }
@keyframes kf-storyflow-s-e { 0%,36% {opacity:0;translate:0 8px} 37%,66% {opacity:1;translate:0 0} 67%,100% {opacity:0} }
.mock-storyflow.play .s-e { animation: kf-storyflow-s-e 12s infinite; }
@keyframes kf-storyflow-s-f { 0%,39% {opacity:0;translate:0 8px} 40%,66% {opacity:1;translate:0 0} 67%,100% {opacity:0} }
.mock-storyflow.play .s-f { animation: kf-storyflow-s-f 12s infinite; }
@keyframes kf-storyflow-s-g { 0%,42% {opacity:0;translate:0 8px} 43%,66% {opacity:1;translate:0 0} 67%,100% {opacity:0} }
.mock-storyflow.play .s-g { animation: kf-storyflow-s-g 12s infinite; }
@keyframes kf-storyflow-s-h { 0%,45% {opacity:0;translate:0 8px} 46%,66% {opacity:1;translate:0 0} 67%,100% {opacity:0} }
.mock-storyflow.play .s-h { animation: kf-storyflow-s-h 12s infinite; }
@keyframes kf-storyflow-s-i { 0%,48% {opacity:0;translate:0 8px} 49%,66% {opacity:1;translate:0 0} 67%,100% {opacity:0} }
.mock-storyflow.play .s-i { animation: kf-storyflow-s-i 12s infinite; }
@keyframes kf-storyflow-s-j { 0%,51% {opacity:0;translate:0 8px} 52%,66% {opacity:1;translate:0 0} 67%,100% {opacity:0} }
.mock-storyflow.play .s-j { animation: kf-storyflow-s-j 12s infinite; }
@keyframes kf-storyflow-s-k { 0%,55% {opacity:0;scale:0.6} 56%,66% {opacity:1;scale:1} 67%,100% {opacity:0} }
.mock-storyflow.play .s-k { animation: kf-storyflow-s-k 12s infinite; transform-origin: center; }
@keyframes kf-storyflow-t-1 { 0%,69% {background:var(--bg-card);color:transparent} 70%,100% {background:var(--moss);border-color:var(--moss);color:var(--paper)} }
.mock-storyflow.play .t-1 { animation: kf-storyflow-t-1 12s infinite; }
@keyframes kf-storyflow-t-2 { 0%,72% {background:var(--bg-card);color:transparent} 73%,100% {background:var(--moss);border-color:var(--moss);color:var(--paper)} }
.mock-storyflow.play .t-2 { animation: kf-storyflow-t-2 12s infinite; }
@keyframes kf-storyflow-t-3 { 0%,75% {background:var(--bg-card);color:transparent} 76%,100% {background:var(--moss);border-color:var(--moss);color:var(--paper)} }
.mock-storyflow.play .t-3 { animation: kf-storyflow-t-3 12s infinite; }
@keyframes kf-storyflow-s-l { 0%,78% {opacity:0;translate:0 8px} 79%,97% {opacity:1;translate:0 0} 98%,100% {opacity:0} }
.mock-storyflow.play .s-l { animation: kf-storyflow-s-l 12s infinite; }
@keyframes kf-storyflow-s-m { 0%,85% {scale:1;filter:brightness(1)} 86%,87% {scale:0.92;filter:brightness(0.85)} 88%,100% {scale:1;filter:brightness(1)} }
.mock-storyflow.play .s-m { animation: kf-storyflow-s-m 12s infinite; transform-origin: center; }
@keyframes kf-storyflow-t-5 { 0%,87% {background:var(--bg-card);color:transparent} 88%,100% {background:var(--moss);border-color:var(--moss);color:var(--paper)} }
.mock-storyflow.play .t-5 { animation: kf-storyflow-t-5 12s infinite; }
@keyframes kf-storyflow-t-6 { 0%,90% {background:var(--bg-card);color:transparent} 91%,100% {background:var(--moss);border-color:var(--moss);color:var(--paper)} }
.mock-storyflow.play .t-6 { animation: kf-storyflow-t-6 12s infinite; }
@keyframes kf-storyflow-t-7 { 0%,92% {background:var(--bg-card);color:transparent} 93%,100% {background:var(--moss);border-color:var(--moss);color:var(--paper)} }
.mock-storyflow.play .t-7 { animation: kf-storyflow-t-7 12s infinite; }
@keyframes kf-storyflow-s-n { 0%,94% {opacity:0;translate:0 8px} 95%,97% {opacity:1;translate:0 0} 98%,100% {opacity:0} }
.mock-storyflow.play .s-n { animation: kf-storyflow-s-n 12s infinite; }
@keyframes kf-storymeeting-s-a { 0%,1% {opacity:0;translate:0 8px} 2%,33% {opacity:1;translate:0 0} 34%,100% {opacity:0} }
.mock-storymeeting.play .s-a { animation: kf-storymeeting-s-a 12s infinite; }
@keyframes kf-storymeeting-s-b { 0%,11% {opacity:0;translate:0 8px} 12%,33% {opacity:1;translate:0 0} 34%,100% {opacity:0} }
.mock-storymeeting.play .s-b { animation: kf-storymeeting-s-b 12s infinite; }
@keyframes kf-storymeeting-s-c { 0%,17% {opacity:0;translate:0 8px} 18%,33% {opacity:1;translate:0 0} 34%,100% {opacity:0} }
.mock-storymeeting.play .s-c { animation: kf-storymeeting-s-c 12s infinite; }
@keyframes kf-storymeeting-s-d { 0%,35% {opacity:0;translate:0 8px} 36%,66% {opacity:1;translate:0 0} 67%,100% {opacity:0} }
.mock-storymeeting.play .s-d { animation: kf-storymeeting-s-d 12s infinite; }
@keyframes kf-storymeeting-s-e { 0%,41% {opacity:0;translate:0 8px} 42%,66% {opacity:1;translate:0 0} 67%,100% {opacity:0} }
.mock-storymeeting.play .s-e { animation: kf-storymeeting-s-e 12s infinite; }
@keyframes kf-storymeeting-s-f { 0%,45% {opacity:0;translate:0 8px} 46%,66% {opacity:1;translate:0 0} 67%,100% {opacity:0} }
.mock-storymeeting.play .s-f { animation: kf-storymeeting-s-f 12s infinite; }
@keyframes kf-storymeeting-s-g { 0%,49% {opacity:0;translate:0 8px} 50%,66% {opacity:1;translate:0 0} 67%,100% {opacity:0} }
.mock-storymeeting.play .s-g { animation: kf-storymeeting-s-g 12s infinite; }
@keyframes kf-storymeeting-s-h { 0%,54% {opacity:0;scale:0.6} 55%,66% {opacity:1;scale:1} 67%,100% {opacity:0} }
.mock-storymeeting.play .s-h { animation: kf-storymeeting-s-h 12s infinite; transform-origin: center; }
@keyframes kf-storymeeting-s-i { 0%,61% {background:transparent;color:transparent} 62%,100% {background:var(--ink);border-color:var(--ink);color:var(--paper)} }
.mock-storymeeting.play .s-i { animation: kf-storymeeting-s-i 12s infinite; }
@keyframes kf-storymeeting-s-j { 0%,69% {opacity:0;translate:0 8px} 70%,97% {opacity:1;translate:0 0} 98%,100% {opacity:0} }
.mock-storymeeting.play .s-j { animation: kf-storymeeting-s-j 12s infinite; }
@keyframes kf-storymeeting-s-k { 0%,73% {opacity:0;translate:0 8px} 74%,97% {opacity:1;translate:0 0} 98%,100% {opacity:0} }
.mock-storymeeting.play .s-k { animation: kf-storymeeting-s-k 12s infinite; }
@keyframes kf-storymeeting-s-l { 0%,77% {opacity:0;translate:0 8px} 78%,97% {opacity:1;translate:0 0} 98%,100% {opacity:0} }
.mock-storymeeting.play .s-l { animation: kf-storymeeting-s-l 12s infinite; }
@keyframes kf-storyadmin-s-a { 0%,5% {opacity:0;translate:0 8px} 6%,33% {opacity:1;translate:0 0} 34%,100% {opacity:0} }
.mock-storyadmin.play .s-a { animation: kf-storyadmin-s-a 12s infinite; }
@keyframes kf-storyadmin-s-b { 0%,13% {opacity:0;scale:0.6} 14%,33% {opacity:1;scale:1} 34%,100% {opacity:0} }
.mock-storyadmin.play .s-b { animation: kf-storyadmin-s-b 12s infinite; transform-origin: center; }
@keyframes kf-storyadmin-s-c { 0%,36% {opacity:0;translate:0 8px} 37%,66% {opacity:1;translate:0 0} 67%,100% {opacity:0} }
.mock-storyadmin.play .s-c { animation: kf-storyadmin-s-c 12s infinite; }
@keyframes kf-storyadmin-s-d { 0%,40% {opacity:0;translate:0 8px} 41%,66% {opacity:1;translate:0 0} 67%,100% {opacity:0} }
.mock-storyadmin.play .s-d { animation: kf-storyadmin-s-d 12s infinite; }
@keyframes kf-storyadmin-s-e { 0%,44% {opacity:0;translate:0 8px} 45%,66% {opacity:1;translate:0 0} 67%,100% {opacity:0} }
.mock-storyadmin.play .s-e { animation: kf-storyadmin-s-e 12s infinite; }
@keyframes kf-storyadmin-s-f { 0%,49% {opacity:0;translate:0 8px} 50%,66% {opacity:1;translate:0 0} 67%,100% {opacity:0} }
.mock-storyadmin.play .s-f { animation: kf-storyadmin-s-f 12s infinite; }
@keyframes kf-storyadmin-s-g { 0%,57% {scale:1;filter:brightness(1)} 58%,59% {scale:0.92;filter:brightness(0.85)} 60%,100% {scale:1;filter:brightness(1)} }
.mock-storyadmin.play .s-g { animation: kf-storyadmin-s-g 12s infinite; transform-origin: center; }
@keyframes kf-storyadmin-s-h { 0%,71% {opacity:0;translate:0 8px} 72%,97% {opacity:1;translate:0 0} 98%,100% {opacity:0} }
.mock-storyadmin.play .s-h { animation: kf-storyadmin-s-h 12s infinite; }
@keyframes kf-storyadmin-s-i { 0%,79% {opacity:0;translate:0 8px} 80%,97% {opacity:1;translate:0 0} 98%,100% {opacity:0} }
.mock-storyadmin.play .s-i { animation: kf-storyadmin-s-i 12s infinite; }
@media (prefers-reduced-motion: reduce) { .mock-story.play .sc { display: none; position: static; animation: none; } .mock-story.play .sc:last-child { display: block; opacity: 1; } .mock-story.play * { animation: none !important; } }