.motion-diagram { margin:0; padding:17px 17px 15px; border:1px solid var(--story-line); border-radius:10px; background:#f8f7f2; color:var(--story-ink); }
.motion-diagram figcaption { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px; font-size:12px; line-height:1.7; }
.motion-diagram .cap-icon { width:18px; height:18px; flex:none; color:var(--story-accent); }
.motion-toggle { display:inline-flex; align-items:center; gap:4px; min-height:30px; border:0; padding:3px 0 3px 5px; font-size:11px; background:transparent; color:var(--story-muted); white-space:nowrap; }
.motion-toggle[hidden],.chapter-row[hidden] { display:none!important; }
.motion-toggle .toggle-icon { width:15px; height:15px; }
.motion-toggle .toggle-start { display:none; }
.motion-diagram[data-paused="true"] .toggle-stop { display:none; }
.motion-diagram[data-paused="true"] .toggle-start { display:block; }
.motion-toggle:hover { color:var(--story-ink); }
.motion-toggle:disabled { cursor:default; }
.motion-toggle:disabled .toggle-icon { display:none; }
.command-line { display:flex; align-items:flex-start; gap:9px; padding:12px; background:var(--story-surface); border-radius:6px; }
.command-line .cap-icon { margin-top:2px; }
.command-line p { margin:0; font-size:12px; line-height:1.8; }
.flow-stem { position:relative; width:1px; height:23px; margin-inline:auto; background:var(--story-line); overflow:hidden; }
.flow-dot { position:absolute; top:-6px; left:0; height:7px; width:1px; background:var(--story-accent); }
.track-bundle { position:relative; display:grid; gap:11px; padding:2px 0; overflow:hidden; }
.track-row { display:grid; grid-template-columns:84px minmax(0,1fr); align-items:center; gap:10px; }
.track-name { display:flex; align-items:center; gap:6px; font-size:12px; white-space:nowrap; }
.track-name .cap-icon { width:15px; height:15px; }
.track-lane { min-width:0; height:23px; position:relative; }
.clip-lane { display:flex; gap:4px; }
.clip-lane i { display:block; flex:1; background:#a9b39d; border-radius:2px; }
.clip-lane i:nth-child(2) { flex:.55; background:#7e906d; }
.clip-lane i:nth-child(3) { flex:1.5; background:#c1c9b6; }
.clip-lane i:nth-child(4) { flex:.7; background:#718260; }
.beat-lane { color:var(--story-accent); border-bottom:1px solid var(--story-line); }
.beat-lane svg { width:100%; height:23px; }
.grade-lane { display:flex; gap:4px; }
.grade-lane i { display:block; flex:1; background:#c7c8b4; border-radius:2px; }
.grade-lane i:nth-child(2) { background:#929d87; }
.grade-lane i:nth-child(3) { background:#63755b; }
.type-lane { display:flex; gap:10px; }
.type-lane i { min-width:0; flex:1; font-style:normal; font-size:11px; line-height:21px; text-align:center; border:1px solid var(--story-line); border-radius:3px; }
.track-scan { position:absolute; inset:0 0 0 94px; pointer-events:none; }
.track-scan::before { content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--story-accent); opacity:.6; }
.flow-live { opacity:0; }
.cap-note { font-size:12px; line-height:1.8; color:var(--story-muted); margin:15px 0 0; }
.cap-note>span { padding-inline:4px; }
.cap-note>strong { font-size:16px; font-weight:500; color:var(--story-accent); }
.handoff-input { display:flex; justify-content:center; align-items:center; gap:9px; font-size:13px; line-height:1.7; padding:11px; background:var(--story-surface); border-radius:6px; }
.handoff-branch { display:block; width:100%; height:30px; color:var(--story-line); }
.branch-flow { color:var(--story-accent); }
.capability-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; margin:0; gap:9px; }
.capability-group { min-width:0; padding:12px 8px; border:1px solid var(--story-line); border-radius:5px; }
.capability-group>.cap-icon { display:block; margin-bottom:9px; }
.capability-group>strong { display:block; font-size:12px; font-weight:500; line-height:1.8; white-space:nowrap; }
.capability-group>ul { list-style:none; padding:0; margin:8px 0 0; font-size:12px; line-height:1.9; color:var(--story-muted); }
.set-source { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; line-height:1.8; }
.set-source>span:first-child { display:flex; align-items:center; gap:6px; }
.set-source strong { font-size:23px; font-weight:500; color:var(--story-accent); }
.set-source>.set-flow { width:24px; }
.role-cloud { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; list-style:none; padding:0; margin:16px 0 0; }
.role-chip { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:11px 5px; border:1px solid var(--story-line); border-radius:5px; font-size:12px; line-height:1.5; }
.role-chip>.cap-icon { width:19px; height:19px; }
.set-range { display:flex; align-items:baseline; justify-content:center; gap:10px; margin-top:15px; }
.set-range>strong { font-size:21px; color:var(--story-accent); font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.set-range>span { font-size:12px; color:var(--story-muted); }
.asset-scale { display:grid; grid-template-columns:1fr 1.3fr; gap:22px; border-top:1px solid var(--story-line); margin:17px 0 0; padding-top:14px; }
.asset-scale>div { display:flex; flex-direction:column-reverse; gap:5px; }
.asset-scale dt { font-size:12px; color:var(--story-muted); }
.asset-scale dd { margin:0; font-size:31px; line-height:1.2; letter-spacing:-.03em; font-weight:500; font-variant-numeric:tabular-nums; }
.chapter-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:13px; font-size:11px; color:var(--story-muted); }
.chapter-row>span { padding-right:2px; }
.chapter-row>button { display:flex; align-items:center; gap:7px; min-height:32px; padding:5px 9px; border:1px solid var(--story-line); border-radius:5px; color:var(--story-muted); background:transparent; font-size:11px; }
.chapter-row>button:hover { color:var(--story-ink); background:var(--story-surface); }
.chapter-row time { font-variant-numeric:tabular-nums; }
.motion-ready .flow-live { opacity:1; }
.motion-ready .flow-dot { animation:command-flow 9s linear infinite; }
.motion-ready .track-scan { animation:track-sweep 9s cubic-bezier(.16,1,.3,1) infinite; }
.motion-ready .branch-flow { animation:branch-flow 7s linear infinite; }
.motion-ready .capability-group { animation:group-echo 9s ease-in-out infinite; animation-delay:calc(var(--phase) * -3s); }
.motion-ready .role-chip { animation:role-echo 12s ease-in-out infinite; animation-delay:calc(var(--phase) * -1.5s); }
.motion-ready .set-flow { animation:arrow-drift 6s ease-in-out infinite; }
.motion-ready .motion-diagram .motion-anim { animation-play-state:paused; }
.motion-ready .motion-diagram.is-running .motion-anim { animation-play-state:running; }
@keyframes command-flow { 0%,10%{transform:translateY(0);opacity:0} 16%{opacity:1} 29%{transform:translateY(32px);opacity:1} 32%,100%{transform:translateY(32px);opacity:0} }
@keyframes track-sweep { 0%,28%{transform:translateX(0);opacity:0} 31%{opacity:1} 78%{transform:translateX(100%);opacity:1} 83%,100%{transform:translateX(100%);opacity:0} }
@keyframes branch-flow { to { stroke-dashoffset:-148; } }
@keyframes group-echo { 0%,14%{background:#e8e3ef;border-color:#a497b1} 32%,100%{background:transparent;border-color:#d7cddd} }
@keyframes role-echo { 0%,8%{background:#e3e8da;border-color:#7d8d63} 20%,100%{background:transparent;border-color:#ced4c2} }
@keyframes arrow-drift { 0%,100%{transform:translateX(-2px)} 50%{transform:translateX(3px)} }
@media(min-width:761px) and (max-width:1050px) {
 .motion-diagram { padding:14px 12px; }
 .motion-diagram figcaption { gap:8px; font-size:12px; }
 .motion-toggle { font-size:11px; gap:2px; }
 .motion-toggle .toggle-icon { width:12px; }
 .track-row { grid-template-columns:74px minmax(0,1fr); gap:7px; }
 .track-name { gap:4px; }
 .track-name .cap-icon { width:13px; height:13px; }
 .track-scan { left:81px; }
 .capability-group { padding:10px 5px; }
 .handoff-branch { height:25px; }
 .role-cloud { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
 .set-source { gap:5px; flex-wrap:wrap; }
 .set-source>span { white-space:nowrap; }
 .set-source>.set-flow { width:20px; }
 .asset-scale { gap:14px; }
 .asset-scale dd { font-size:27px; }
}
@media(max-width:760px) {
 .motion-diagram { padding:16px; }
 .chapter-row { margin-top:12px; }
 .capability-group { padding:11px 8px; }
 .capability-group>strong { font-size:12px; }
 .cap-note { font-size:12px; }
}
@media(max-width:350px) {
 .motion-diagram { padding:13px 11px; }
 .motion-diagram figcaption { gap:7px; }
 .capability-groups { gap:6px; }
 .capability-group { padding:10px 5px; }
 .capability-group>strong { white-space:normal; }
 .track-row { grid-template-columns:78px minmax(0,1fr); gap:6px; }
 .track-scan { left:84px; }
 .role-cloud { gap:6px; }
 .set-source { gap:7px; }
 .set-source>span:last-child { font-size:12px; }
 .chapter-row { gap:6px; }
 .chapter-row>button { padding:5px 7px; gap:5px; }
}
@media(prefers-reduced-motion:reduce) {
 .motion-diagram .motion-anim { animation:none!important; transition:none!important; }
 .motion-diagram .flow-live { display:none; }
}