/* Process story, brand system v2.0. All scene content is illustrative. Motion runs once when a chapter becomes active. */
.story-sticky.workflow-stage{height:min(560px,calc(100svh - 150px));min-height:400px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-panel);color:var(--text);isolation:isolate;overflow:hidden}
.workflow-top{position:absolute;inset:20px 24px auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.workflow-steps{display:flex;align-items:center;gap:10px}.workflow-steps>span{display:flex;gap:8px;align-items:center;color:var(--text-3);transition:color .3s}
.workflow-steps svg{width:20px;height:20px}.workflow-steps b{font:400 13px/1 var(--font-mono)}.workflow-steps>i{width:24px;height:1px;background:var(--line)}
.workflow-stage[data-step="0"] [data-stage-marker="0"],.workflow-stage[data-step="1"] [data-stage-marker="1"],.workflow-stage[data-step="2"] [data-stage-marker="2"]{color:var(--accent)}
.workflow-example{font:400 12px/1.3 var(--font-mono);color:var(--text-3);text-align:right}
.workflow-scenes{position:absolute;inset:66px 24px 92px}
.workflow-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s;pointer-events:none}
.workflow-scene.is-active{opacity:1;visibility:visible;transform:none}
.capture-window,.annotation-window,.dataset-window{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
.media-heading{height:44px;min-height:44px;padding:0 16px;display:flex;align-items:center;gap:10px;font:400 12px/1 var(--font-mono);color:var(--text-2);border-bottom:1px solid var(--line)}
.media-heading>svg{width:18px;height:18px;color:var(--text-3)}.capture-window .media-heading>svg{margin-left:auto}
.recording-dot{width:8px;height:8px;background:var(--record);border-radius:50%}
@media (prefers-reduced-motion:no-preference){.recording-dot{animation:rec 2.4s ease-in-out infinite}@keyframes rec{50%{opacity:.35}}}
.workflow-film{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--ink-deep)}
.workflow-film>img{width:100%;height:100%;object-fit:cover;object-position:72% 45%}
.viewfinder{position:absolute;inset:16px;opacity:.7}.viewfinder i{position:absolute;width:18px;height:18px;border:1.5px solid var(--paper)}
.viewfinder i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}.viewfinder i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.viewfinder i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}.viewfinder i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.film-caption{position:absolute;bottom:14px;left:16px;z-index:1;font:400 12px/1.3 var(--font-mono);color:var(--paper);background:var(--ink-deep);padding:4px 8px;border-radius:4px}
.capture-focus{position:absolute;width:34px;height:34px;border:1.5px solid var(--straw);border-radius:50%;left:68%;top:53%}
.capture-focus::before,.capture-focus::after{content:'';position:absolute;background:var(--straw);width:10px;height:1.5px;left:11px;top:16px}.capture-focus::after{transform:rotate(90deg)}
.capture-controls{display:flex;align-items:center;gap:14px;min-height:46px;padding:0 16px;border-top:1px solid var(--line)}
.capture-controls>svg{width:14px;height:14px;fill:var(--text-2);stroke:none}
.capture-wave{display:flex;align-items:center;justify-content:space-between;flex:1;height:22px;gap:3px}
.capture-wave i{display:block;flex:1;max-width:3px;min-height:3px;background:var(--text-3);border-radius:2px}.capture-wave i:nth-child(-n+14){background:var(--straw)}
.capture-time{font:400 12px/1 var(--font-mono);color:var(--text-2);font-variant-numeric:tabular-nums}
.capture-wave i:nth-child(1){height:22%}.capture-wave i:nth-child(2){height:40%}.capture-wave i:nth-child(3){height:26%}.capture-wave i:nth-child(4){height:60%}.capture-wave i:nth-child(5){height:85%}.capture-wave i:nth-child(6){height:45%}.capture-wave i:nth-child(7){height:32%}.capture-wave i:nth-child(8){height:74%}.capture-wave i:nth-child(9){height:98%}.capture-wave i:nth-child(10){height:54%}.capture-wave i:nth-child(11){height:38%}.capture-wave i:nth-child(12){height:67%}.capture-wave i:nth-child(13){height:89%}.capture-wave i:nth-child(14){height:44%}.capture-wave i:nth-child(15){height:31%}.capture-wave i:nth-child(16){height:62%}.capture-wave i:nth-child(17){height:80%}.capture-wave i:nth-child(18){height:22%}.capture-wave i:nth-child(19){height:40%}.capture-wave i:nth-child(20){height:26%}.capture-wave i:nth-child(21){height:60%}.capture-wave i:nth-child(22){height:85%}.capture-wave i:nth-child(23){height:45%}.capture-wave i:nth-child(24){height:32%}.capture-wave i:nth-child(25){height:74%}.capture-wave i:nth-child(26){height:98%}.capture-wave i:nth-child(27){height:54%}.capture-wave i:nth-child(28){height:38%}.capture-wave i:nth-child(29){height:67%}.capture-wave i:nth-child(30){height:89%}.capture-wave i:nth-child(31){height:44%}.capture-wave i:nth-child(32){height:31%}.capture-wave i:nth-child(33){height:62%}.capture-wave i:nth-child(34){height:80%}
.annotation-window{bottom:74px}.annotation-status{height:8px;width:8px;border-radius:50%;background:var(--straw);margin-left:auto}
.tracking-box{position:absolute;border:2px solid currentColor;border-radius:4px;z-index:2}
.tracking-box>span{position:absolute;left:-2px;bottom:calc(100% + 4px);padding:3px 8px;border-radius:4px;font:400 12px/1.2 var(--font-mono);background:currentColor;white-space:nowrap}
.tracking-box>span{color:var(--ink)}
.hand-track{color:var(--straw);left:51%;top:13%;width:26%;height:44%}.object-track{color:var(--amber);left:66%;top:36%;width:18%;height:29%}
.tracking-box>i{position:absolute;width:6px;height:6px;background:currentColor;border-radius:50%;top:50%;left:50%}
.action-path{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.action-path path{fill:none;stroke:var(--paper);stroke-opacity:.75;stroke-width:1.5;stroke-dasharray:5 5}.action-path circle{fill:var(--paper)}
.annotation-timeline{position:absolute;bottom:0;left:0;right:0}.annotation-timeline>span{display:block;font:400 12px/1 var(--font-mono);color:var(--text-2);margin-bottom:8px}
.action-segments{position:relative;display:flex;gap:6px;height:32px}
.action-segments>span{flex:1;border:1px solid var(--line);border-radius:4px;font-size:13px;display:grid;place-items:center;color:var(--ink)}
.action-segments>span:nth-child(1){background:var(--straw)}.action-segments>span:nth-child(2){background:var(--amber)}.action-segments>span:nth-child(3){background:var(--vermilion);color:var(--paper)}
.timeline-playhead{position:absolute;left:5%;top:-6px;bottom:-6px;width:2px;background:var(--record);transition:left 1.6s var(--ease)}
.label-scene.is-active .timeline-playhead{left:62%}
.deliver-scene .dataset-window{padding:20px}.dataset-shadow{display:none}
.dataset-heading{display:flex;align-items:center;gap:14px}.dataset-icon{background:var(--surface-2);color:var(--accent);border:1px solid var(--line);border-radius:var(--r-control);width:44px;height:44px;flex-shrink:0;display:grid;place-items:center}.dataset-icon svg{width:22px;height:22px}
.dataset-heading small{display:block;color:var(--text-3);font:400 12px/1 var(--font-mono);margin-bottom:4px}.dataset-heading strong{font-size:17px;font-weight:500;line-height:1.25;display:block;letter-spacing:-.015em}
.dataset-preview{display:flex;gap:8px;margin:16px 0 8px;height:72px;min-height:44px}
.dataset-preview>div{position:relative;flex:1;border-radius:4px;background:var(--ink-deep);overflow:hidden}.dataset-preview img{width:100%;height:100%;object-fit:cover;object-position:80% 45%}
.dataset-preview>div:nth-child(2) img{object-position:100% 35%;transform:scale(1.2)}
.mini-track{position:absolute;left:40%;top:25%;width:42%;height:50%;border:1.5px solid var(--straw);border-radius:3px}
.data-preview-lines{padding:11px;display:flex;flex-direction:column;gap:6px;justify-content:center}.data-preview-lines i{width:77%;height:2px;flex-shrink:0;background:var(--text-3);border-radius:2px}
.data-preview-lines i:nth-child(2n){width:53%;margin-left:13%;background:var(--line)}.data-preview-lines i:nth-child(3n){width:66%;background:var(--amber)}
.dataset-files{flex:1;display:flex;flex-direction:column;justify-content:center}
.dataset-files>div{padding:10px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;font-size:15px;opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.deliver-scene.is-active .dataset-files>div{opacity:1;transform:none;transition-delay:.15s}.deliver-scene.is-active .dataset-files>div:nth-child(2){transition-delay:.25s}.deliver-scene.is-active .dataset-files>div:nth-child(3){transition-delay:.35s}
.dataset-files>div>svg{width:18px;height:18px;color:var(--text-3)}.dataset-files b{margin-left:auto;display:grid;place-items:center}.dataset-files b svg{width:16px;height:16px;color:var(--straw)}
.dataset-ready{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--straw);border-radius:var(--r-control);margin-top:12px;color:var(--ink);font-size:15px;font-weight:500}
.dataset-ready svg{width:18px;height:18px;flex-shrink:0}.dataset-ready>svg:last-child{margin-left:auto}
.workflow-stage .story-glass{position:absolute;bottom:20px;left:24px;right:24px;border-top:1px solid var(--line);padding:16px 0 0;display:flex;align-items:center;gap:14px}
.story-glass .chapter-number{font:400 13px/1 var(--font-mono);color:var(--accent)}.story-glass .chapter-name{font-size:20px;line-height:1.25;letter-spacing:-.015em}.workflow-forward{display:none}
.workflow-stage.workflow-paused .recording-dot{animation-play-state:paused}
@media (max-width:1100px) and (min-width:821px){.workflow-top{inset-inline:18px}.workflow-scenes{left:18px;right:18px}.workflow-steps{gap:6px}.workflow-steps>i{width:12px}.workflow-example{max-width:110px}}
@media (max-width:820px){
  .story-sticky.workflow-stage{position:sticky;top:86px;height:clamp(340px,46svh,400px);min-height:0;z-index:2}
  .workflow-top{inset:14px 16px auto}.workflow-example{display:none}
  .workflow-scenes{inset:52px 14px 70px}.media-heading{height:36px;min-height:36px;padding:0 12px}
  .capture-controls{min-height:38px;padding:0 12px}.capture-wave{height:16px}.capture-wave i:nth-child(2n){display:none}
  .viewfinder{inset:12px}.annotation-window{bottom:60px}.action-segments{height:28px}
  .dataset-window{padding:14px!important}.dataset-heading strong{font-size:15px}.dataset-preview{height:44px;margin:10px 0 4px}.dataset-files>div{padding:6px 0;font-size:14px}
  .workflow-stage .story-glass{bottom:14px;left:16px;right:16px;padding-top:12px}.story-glass .chapter-name{font-size:17px}
}
@media (max-height:560px) and (min-width:821px){.story-sticky.workflow-stage{top:90px;min-height:280px;height:calc(100svh - 110px)}}
