
.motion-scene{padding:22px 28px 20px;animation:none;border-radius:16px;isolation:isolate}
.hero-copy,.panel-heading{animation:none}.price{font-variant-numeric:tabular-nums}
.motion-scene .scene-top{min-height:44px;color:var(--muted);font-size:11px;gap:8px}
.motion-controls{display:flex;flex-shrink:0}.motion-controls[hidden]{display:none}
.motion-controls button{width:44px;height:44px;display:grid;place-items:center;border-radius:6px;padding:0;transition:background-color .15s}
.motion-controls button:hover{background:var(--soft);opacity:1}.motion-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.motion-controls .play-icon{display:none}.motion-scene.user-paused .pause-icon{display:none}.motion-scene.user-paused .play-icon{display:block}
.flow-sources{display:flex;gap:12px;margin-top:17px}.flow-sources>div{flex:1;min-width:0;position:relative;background:var(--card);border-radius:7px;padding:14px 4px;text-align:center;overflow:hidden;border:1px solid var(--line)}
.flow-sources strong{position:relative;z-index:1;font-size:12px;font-weight:500}.source-phase,.row-phase,.output-phase{position:absolute;inset:0;background:var(--soft);opacity:0;pointer-events:none}
.flow-routes{height:76px}.flow-routes svg,.output-route svg{display:block;width:100%;height:100%;overflow:visible}
.flow-track{fill:none;stroke:var(--line);stroke-width:1.2}.flow-draw,.output-draw{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-dasharray:1 1;opacity:0;stroke-linecap:round}.flow-packet,.output-packet{fill:var(--ink);opacity:0;transform-box:view-box}
.flow-sheet{background:var(--card);border:1px solid var(--line);border-radius:9px;overflow:hidden;max-width:430px;margin:auto;box-shadow:0 12px 26px #00000005}
.sheet-bar{height:50px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 18px;gap:12px}.sheet-title{display:flex;align-items:center;gap:9px;font-size:12px}.sheet-title svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}.sheet-bar>span:last-child{font-size:10px;color:var(--muted)}
.sheet-columns,.sheet-row{display:grid;grid-template-columns:1.2fr .85fr 1fr;gap:10px;align-items:center;padding:0 18px}.sheet-columns{height:32px;font-size:9px;color:var(--muted)}.sheet-row{min-height:40px;position:relative;font-size:10px;border-top:1px solid var(--line)}.sheet-row>strong,.sheet-row>span:not(.row-phase){position:relative;z-index:1}.sheet-row strong{font-weight:500}.sheet-row>span:not(.row-phase){color:var(--muted)}.row-status{display:flex;gap:5px;align-items:center;white-space:nowrap}.row-status svg{width:13px;height:13px;flex-shrink:0;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.row-status path{stroke-dasharray:1 1}
.output-route{height:38px}.flow-output{position:relative;max-width:430px;margin:auto;min-height:70px;display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--card);border:1px solid var(--line);border-radius:9px;overflow:hidden}.flow-output>*:not(.output-phase){position:relative;z-index:1}.output-icon{height:30px;width:30px;border-radius:50%;background:var(--soft);display:grid;place-items:center;flex-shrink:0}.output-icon svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.output-icon path{stroke-dasharray:1 1}.flow-output strong{font-size:12px;font-weight:500}.flow-output div>span{display:block;font-size:10px;color:var(--muted);margin-top:6px}.output-label{margin-left:auto;font-size:10px;color:var(--muted)}
.flow-footer{display:flex;justify-content:space-between;position:relative;margin:24px auto 0;max-width:430px;font-size:9px;color:var(--muted);padding-top:12px}.flow-progress{position:absolute;top:0;width:100%;height:2px;background:var(--line);overflow:hidden}.flow-progress span{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(1)}.flow-note{display:block;text-align:center;margin-top:18px;font-size:9px;color:var(--muted)}
.motion-scene.motion-static .flow-draw,.motion-scene.motion-static .output-draw{opacity:.35;stroke-dashoffset:0}.motion-scene.motion-static .flow-packet,.motion-scene.motion-static .output-packet{opacity:0!important}
@media(max-width:1050px){.motion-scene{padding:18px}.sheet-columns,.sheet-row{padding:0 13px;gap:7px}.sheet-row{font-size:9px}}
@media(max-width:760px){.motion-scene{padding:16px 18px}.motion-scene .scene-top{font-size:10px}.flow-sources{margin-top:10px}.flow-sources strong{font-size:11px}.flow-routes{height:68px}.sheet-columns,.sheet-row{padding:0 12px;gap:6px}.sheet-row{grid-template-columns:1.1fr .85fr 1fr;font-size:9px}.row-status{gap:3px}.flow-output{padding:14px}.flow-output strong{font-size:11px}.flow-output div>span{font-size:9px}}
@media(max-width:360px){.motion-scene{padding:13px}.motion-scene .scene-top{flex-wrap:nowrap;font-size:9px}.motion-controls button{width:40px;height:44px}.flow-sources{gap:8px}.sheet-columns,.sheet-row{padding:0 9px;gap:4px}.sheet-row{font-size:8px}.row-status svg{width:11px}.sheet-bar{padding:0 12px}.output-label{display:none}.flow-output{gap:9px}.flow-output strong{font-size:10px}}
@media(prefers-reduced-motion:reduce){.flow-draw,.output-draw{opacity:.35;stroke-dashoffset:0}.flow-progress span{transform:none}}
.motion-scene{border-radius:18px;padding:26px;background:var(--panel)}
.flow-sources>div{transition:border-color 180ms}.flow-sources>div:hover{border-color:var(--muted)}
.motion-scene.motion-complete .row-status path,.motion-scene.motion-complete .output-icon path{stroke-dashoffset:0}
.motion-scene.motion-complete .flow-track{stroke:var(--muted);opacity:.45}
.motion-scene.motion-complete .flow-progress span{transform:scaleX(1);opacity:1}
.motion-scene.motion-complete .flow-output{border-color:var(--muted)}
@media(max-width:760px){.motion-scene{padding:18px}}

/* Reference-inspired flow illustration: crisp source marks, readable rows, quiet depth. */
.motion-scene{background:var(--panel);padding:26px;border:1px solid var(--line);border-radius:22px}
.flow-sources{gap:16px}.flow-sources>div{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 10px;border-radius:14px;box-shadow:0 10px 24px #00000008;text-align:left;min-height:76px}
.source-logo{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;color:#fff;font:700 21px/1 Inter,sans-serif}.logo-hh{background:#dc1236;border-radius:50%;font-size:18px}.logo-rabota{background:#df1930;border-radius:50%}.logo-avito{display:block}.logo-avito i{position:absolute;width:15px;height:15px;border-radius:50%}.logo-avito i:nth-child(1){background:#13c7a1;left:0;top:18px}.logo-avito i:nth-child(2){background:#00aaff;left:8px;top:4px}.logo-avito i:nth-child(3){background:#965eeb;left:23px;top:0}.logo-avito i:nth-child(4){background:#ffd43c;left:19px;top:18px}
.source-copy{position:relative;z-index:1}.source-copy strong{font-size:12px;font-weight:600}.source-copy small{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:10px;color:var(--muted)}.source-copy small i,.sheet-live i{width:5px;height:5px;border-radius:50%;background:var(--flow-green)}
.flow-track{stroke:var(--line);stroke-width:1.5}.flow-draw,.output-draw{stroke:var(--flow-green);stroke-width:1.8}.flow-packet,.output-packet{fill:var(--flow-green)}
.flow-sheet{max-width:520px;border-radius:18px;box-shadow:0 18px 40px #00000009}.sheet-bar{height:60px;padding:0 20px}.sheet-title{font-size:14px;font-weight:600}.sheet-title svg{stroke:var(--flow-green);width:24px;height:24px}.sheet-live{display:flex;align-items:center;gap:5px;border-radius:14px;padding:5px 9px;background:var(--flow-tint);color:var(--flow-green)!important}
.sheet-columns,.sheet-row{grid-template-columns:1.35fr .85fr 1fr .85fr;padding:0 18px;gap:10px}.sheet-columns{height:38px;font-size:10px}.sheet-row{min-height:52px;font-size:11px}.candidate-name{display:flex;align-items:center;gap:8px;white-space:nowrap}.candidate-avatar{display:grid;place-items:center;flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--soft);color:var(--ink);font-size:9px}.row-status{color:var(--flow-green)!important;font-size:10px}.row-status svg{stroke:var(--flow-green)}.sheet-time{font-size:10px;white-space:nowrap}
.flow-output{max-width:520px;border-color:var(--flow-green);border-radius:15px;background:var(--card);min-height:82px;box-shadow:0 10px 24px #00000005}.output-icon{width:38px;height:38px;background:var(--flow-green)}.output-icon svg{stroke:#fff}.output-label{padding:7px 10px;border-radius:16px;color:var(--flow-green);background:var(--flow-tint);font-weight:600}.motion-scene.motion-complete .flow-output{border-color:var(--flow-green)}

@media(max-width:760px){.flow-sources{gap:8px}.flow-sources>div{padding:12px 6px;gap:6px}.source-logo{width:28px;height:28px;font-size:18px}.logo-avito{transform:scale(.8)}.source-copy strong{font-size:10px}.sheet-columns,.sheet-row{grid-template-columns:1.25fr .8fr 1fr;gap:6px;padding:0 12px}.sheet-time{display:none}.candidate-avatar{width:22px;height:22px;font-size:8px}.candidate-name{gap:5px}.sheet-row{font-size:10px}.sheet-bar{padding:0 14px}.sheet-title{font-size:12px}}
