.canvas{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-y}.canvas.fitted{overflow:visible}.canvas.fitted.pans{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:thin}.canvas.pans .node{touch-action:pan-x pan-y}.canvas.pans:after{content:"Листайте холст вбок";position:sticky;left:0;display:block;margin-top:8px;font-size:12px;color:var(--on-dark2)}.canvas .sizer{position:relative}.canvas.fitted .sizer{overflow:hidden}.canvas .stage{position:relative;transform-origin:0 0}.canvas .wires{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:1}.canvas .wire{fill:none;stroke:var(--c);stroke-width:3;stroke-linecap:round}.canvas .wire.pending{stroke-dasharray:7 9}.canvas .wire.flow{stroke-dasharray:2 14;animation:flow .7s linear infinite;opacity:.85}@keyframes flow{to{stroke-dashoffset:-16}}.canvas .dot{fill:var(--c);stroke:var(--canvas);stroke-width:2.5;transition:opacity .3s}.canvas .node{position:absolute;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}.canvas .node.drag{cursor:grabbing;z-index:5;transition:none}.canvas .node.drag .body{box-shadow:0 30px 60px -20px #000c}.canvas .node:focus-visible{outline:2px solid var(--on-dark);outline-offset:6px;border-radius:12px}.canvas .cap{display:flex;justify-content:space-between;gap:10px;height:calc(16px * var(--k, 1));margin-bottom:8px;font-size:calc(12px * var(--k, 1));line-height:calc(16px * var(--k, 1));color:#d0d1cd;white-space:nowrap}.canvas .cap i{display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--c);margin-right:7px;vertical-align:1px}.canvas .cap .model{color:#7e8286}.canvas .body{border-radius:12px;box-shadow:0 18px 40px -18px #000000bf;transition:box-shadow .3s}.canvas .media{position:relative;overflow:hidden;background:#1c1f22}.canvas .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:opacity .5s var(--ease-out),filter .6s var(--ease-out)}.canvas .media.running img{opacity:.35;filter:blur(10px) saturate(.6)}.canvas .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .4s var(--ease-out)}.canvas .media video.live{opacity:1}.canvas .media.running video{opacity:0}@media(prefers-reduced-motion:reduce){.canvas .media video{display:none}}.canvas .media img.cool{filter:saturate(.75) hue-rotate(-10deg) brightness(.97)}.canvas .state{position:absolute;left:10px;top:10px;font-size:calc(12px * var(--k, 1));color:#ecebe6eb;background:#0c0d0f8c;backdrop-filter:blur(6px);border-radius:6px;padding:3px 8px;font-variant-numeric:tabular-nums}.canvas .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--c);transition:width .12s linear}.canvas .text{background:#1e2124f0;padding:13px 14px;font-size:calc(13px * var(--k, 1));line-height:calc(19px * var(--k, 1));color:#d8d9d5}.canvas .typed{white-space:pre-wrap}.canvas .caret{display:inline-block;width:1.5px;height:15px;margin-left:1px;vertical-align:-3px;background:var(--word);opacity:0}.canvas .caret.on{animation:caret 1.05s steps(1) infinite}@keyframes caret{0%{opacity:1}50%{opacity:0}}.canvas .check{background:#1e2124f0;box-shadow:inset 0 0 0 1px #ff74668c,0 18px 40px -18px #000000bf;padding:13px 14px;display:grid;gap:8px;font-size:calc(12.5px * var(--k, 1));line-height:calc(17px * var(--k, 1));color:#d8d9d5}.canvas .check .st{display:flex;align-items:center;gap:7px;font-size:calc(12px * var(--k, 1));font-weight:500;color:#f0c2bc}.canvas .check .st:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hand);animation:breathe 2.4s var(--ease-inout) infinite}@keyframes breathe{50%{box-shadow:0 0 0 5px #ff74662e}}.canvas .check div{display:flex;justify-content:space-between;gap:10px}.canvas .check div span:last-child{color:var(--on-dark2)}.canvas .origin{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:calc(12px * var(--k, 1));color:#9fa1a3}.canvas .origin span{display:inline-flex;align-items:center;gap:6px;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}.canvas .origin span:before{content:"";width:12px;height:3px;border-radius:2px;background:var(--c)}@media(prefers-reduced-motion:no-preference){.js .canvas:is([data-motion=build],[data-motion=steps],[data-motion=agent]):not(.played) .node{opacity:0;transform:translateY(8px)}.js .canvas:is([data-motion=build],[data-motion=steps],[data-motion=agent]):not(.played) .origin span{opacity:0;transform:translateY(4px)}.js .canvas:is([data-motion=build],[data-motion=steps],[data-motion=agent]):not(.played) .dot{opacity:0}.js .canvas:is([data-motion=build],[data-motion=steps],[data-motion=agent]):not(.played) .wire:not(.drawn):not(.flow){stroke-dasharray:var(--len, 2000);stroke-dashoffset:var(--len, 2000)}}.canvas.stepping .node.on:not(.lit){opacity:.38!important}.canvas .node.on{opacity:1!important;transform:none!important}.canvas .node.picked .body{box-shadow:0 0 0 2px var(--on-dark),0 18px 40px -18px #000000bf}.canvas .origin span.on{opacity:1!important;transform:none!important}.cursor{position:absolute;left:0;top:0;z-index:6;pointer-events:none;display:flex;align-items:flex-start;gap:2px;opacity:0;transition:opacity .35s var(--ease-out);will-change:transform;color:var(--c)}.cursor.on{opacity:1}.cursor svg{width:17px;height:19px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));transform-origin:2px 2px;transition:transform .12s var(--ease-out)}.cursor.press svg{transform:scale(.84)}.cursor span{margin-top:13px;font-size:calc(12px * var(--k, 1));line-height:16px;font-weight:500;padding:3px 8px;border-radius:6px 6px 6px 2px;background:var(--c);color:var(--canvas);white-space:nowrap}.bubble{position:absolute;z-index:5;width:calc(206px * var(--k, 1));background:var(--on-dark);color:var(--ink);border-radius:12px 12px 12px 4px;padding:10px 12px;font-size:calc(13px * var(--k, 1));line-height:18px;box-shadow:0 18px 40px -18px #000c;opacity:0;transform:translateY(6px) scale(.97);transform-origin:0 100%;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}.bubble.on{opacity:1;transform:none}.bubble small{display:flex;justify-content:space-between;gap:8px;font-size:calc(12px * var(--k, 1));color:var(--mute);margin-bottom:3px}.bubble small b{font-weight:500;color:var(--ink2);opacity:0;transition:opacity .3s}.bubble.done small b{opacity:1}