.drag-cursor{position:fixed;left:0;top:0;width:48px;height:48px;border:1px solid #17151b;border-radius:50%;background:#fff;display:none;align-items:center;justify-content:center;gap:0;pointer-events:none;z-index:100;box-shadow:0 2px 14px #17151b14;transform:translate(-100px,-100px)}.drag-cursor img{width:17px;height:17px}.drag-cursor img:first-child{transform:rotate(180deg)}.drag-cursor.active{display:flex}.drag-cursor.grabbing{background:#ff388d;border-color:#ff388d}.diagram-scroll.dragging{user-select:none}.diagram-scroll.dragging .unit{pointer-events:none}.unit.cursor-target{border-left-color:#ff388d}.graph .unit.cursor-target{border-color:#ff388d}.signal .unit.cursor-target strong{color:#ff70b0}
.direction .rail{min-width:1360px}
@media(hover:hover) and (pointer:fine){.diagram-scroll{cursor:none}.diagram-scroll:focus-visible{outline:2px solid #5b2ee5;outline-offset:4px}}
@media(hover:none),(pointer:coarse){.drag-cursor{display:none!important}}
.diagram{margin-bottom:38px}.node-graph{position:relative;width:1220px;height:570px;isolation:isolate}.node-graph>svg{position:absolute;inset:0;width:1220px;height:570px;pointer-events:none}.graph-edge{fill:none;stroke:#827b87;stroke-width:1.35}.edge-arrow{fill:#827b87}.graph-edge.human-edge{stroke:#648477;stroke-dasharray:5 5}.graph-edge.loop-edge{stroke:#ff388d;stroke-width:1.4}.graph-node.unit{position:absolute;width:172px;margin:0;padding:0;border:0;background:none;min-height:0;text-align:center;transform:translate(-50%,-29px);z-index:2}.node-disc{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 12px;border:1px solid #918895;border-radius:50%;background:#fff;box-shadow:0 2px 8px #17151b08;transition:border-color .16s,box-shadow .16s}.node-disc img{width:25px;height:25px}.graph-node strong{font-size:16px;font-weight:600;line-height:1.35;display:block}.graph-node small{font-size:12px;line-height:1.5;margin-top:4px;color:#6b6570;display:block}.graph-node.primary .node-disc{background:#5b2ee5;border-color:#5b2ee5}.graph-node.primary .node-disc img{filter:invert(1)}.graph-node.accent .node-disc{border:2px solid #ff388d}.graph-node.human .node-disc{background:#edf5f0;border-color:#6f8b7c}.graph-node.cursor-target .node-disc{box-shadow:0 0 0 6px #ff388d1c;border-color:#ff388d}.graph-loop-label{position:absolute;bottom:10px;left:570px;font:11px Plex,sans-serif;background:white;padding:5px 10px}.graph .diagram{padding-bottom:10px;background-size:26px 26px}.graph .graph-node.unit{padding:0;border:0;box-shadow:none;background:none}.graph .graph-node.unit:before{display:none}.graph .node-disc{border-radius:50%;box-shadow:3px 3px 0 #e7e0ed}.graph .graph-node.primary .node-disc{box-shadow:3px 3px 0 #d9cbed}.graph .graph-edge{stroke:#726b78;stroke-width:1.4}.graph .graph-edge.loop-edge{stroke:#ff388d}.graph .graph-node.accent .node-disc{background:#fff1f8}.graph .graph-loop-label{font-size:11px}
.signal .graph-edge{stroke:#827889;stroke-width:1.5}.signal .edge-arrow{fill:#a99cae}.signal .graph-edge.loop-edge{stroke:#ff70b0}.signal .graph-edge.human-edge{stroke:#8cb59c}.signal .node-disc{background:#2c2732;border-color:#8e8197;box-shadow:none}.signal .node-disc img{filter:invert(1)}.signal .graph-node.primary .node-disc{background:#5b2ee5;border-color:#9377ff}.signal .graph-node.accent .node-disc{background:#40233b;border-color:#ff70b0}.signal .graph-node.human .node-disc{background:#20392d;border-color:#8cb59c}.signal .graph-node small{color:#c3b7ca}.signal .graph-loop-label{background:#17151b;color:#d7c7df}.signal .graph-node.cursor-target .node-disc{border-color:#ff70b0;box-shadow:0 0 0 6px #ff70b01e}
.diagram-scroll{scrollbar-width:thin;scrollbar-color:#a89eae transparent;touch-action:pan-x pan-y}.graph .diagram-scroll{margin:0 18px}.graph .diagram-title{margin-bottom:4px}
@media(max-width:767px){.node-graph,.node-graph>svg{width:1220px}.node-graph{height:570px}.diagram-title{margin-bottom:0}.graph .diagram-scroll{margin:0 8px}}
.family-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px}.family-choice{font:700 27px Schibsted,sans-serif;background:none;border:0;color:inherit;cursor:pointer;padding:8px 0;min-height:44px;border-bottom:2px solid transparent}.family-choice[aria-pressed=true]{border-bottom-color:#ff388d}.simulation-label{font:10px Plex,sans-serif;color:#746b7c}.comparison-controls{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:16px 0 28px}.pattern-tabs{display:flex;gap:24px}.pattern-tabs button{font:600 19px Hanken,sans-serif;border:0;border-bottom:1px solid transparent;background:none;color:inherit;text-align:left;padding:8px 0;cursor:pointer;min-height:56px}.pattern-tabs button small{display:block;font-size:12px;font-weight:400;margin-top:6px;color:#6b6570}.pattern-tabs button[aria-selected=true]{border-bottom:2px solid #5b2ee5}.motion-tools{display:flex;gap:10px}.motion-tools button{width:44px;height:44px;border:1px solid #c8bfce;background:white;border-radius:50%;display:grid;place-items:center;cursor:pointer}.motion-tools img{width:20px;height:20px}.comparison-viewport{position:relative;overflow-x:auto;overflow-y:hidden;border-top:1px solid #e5e0e8;border-bottom:1px solid #e5e0e8;scrollbar-width:thin;touch-action:pan-x pan-y}.comparison-content{position:relative;width:1220px;height:580px;--position:100%}.comparison-content .diagram{position:absolute;inset:0;margin:0!important;padding:0!important;background:white;border:0!important}.comparison-content .diagram-title{display:none}.comparison-content .diagram-scroll{overflow:visible;pointer-events:none;margin:0!important;padding:0}.comparison-content .diagram-scroll .unit{pointer-events:auto}.comparison-content .diagram.ask-pattern{clip-path:inset(0 0 0 calc(100% - var(--position)));z-index:2}.comparison-content .diagram.xos-pattern{clip-path:inset(0 var(--position) 0 0);z-index:3}.comparison-content .diagram[hidden]{display:none}.reveal-seam{position:absolute;top:0;bottom:0;left:calc(100% - var(--position));border-left:1px solid #aea3b6;pointer-events:none;z-index:4}.family-position{display:flex;align-items:center;gap:20px;font:12px Plex,sans-serif;margin:18px 0}.family-range{flex:1;min-width:80px;min-height:44px;accent-color:#17151b;cursor:ew-resize}.live-status{font:13px/1.6 Plex,sans-serif;min-height:25px;margin:8px 0 0}.activity-packet{fill:#ff388d;stroke:white;stroke-width:1.3;pointer-events:none}.graph-edge.edge-active{stroke:#5b2ee5;stroke-width:2.1}.graph-node.node-active .node-disc{box-shadow:0 0 0 5px #5b2ee51b;border-color:#5b2ee5}.graph-node.human.node-active .node-disc{border-color:#648477;box-shadow:0 0 0 5px #64847724}.graph .comparison-content .diagram{background-color:#fff;background-image:linear-gradient(#bdb6c014 1px,transparent 1px),linear-gradient(90deg,#bdb6c014 1px,transparent 1px);background-size:26px 26px}.signal .comparison-content .diagram{background:#17151b}.signal .simulation-label,.signal .pattern-tabs button small{color:#c8bdd0}.signal .graph-edge.edge-active{stroke:#b498ff}.signal .activity-packet{fill:#ff70b0;stroke:#17151b}.signal .live-status{color:#e5d8ec}.signal .comparison-viewport{border-color:#514759}.signal .motion-tools button{background:#2c2732;border-color:#6c5d78}.signal .motion-tools img{filter:invert(1)}.signal .family-range{accent-color:#ff70b0}.signal .pattern-tabs button[aria-selected=true]{border-color:#b498ff}
.comparison-content .diagram.ask-pattern{clip-path:inset(0 calc(100% - var(--seam,1220px)) 0 0)}
.comparison-content .diagram.xos-pattern{clip-path:inset(0 0 0 var(--seam,1220px))}
.reveal-seam{left:var(--seam,1220px)}
.comparison-viewport{max-width:none;margin:auto}
.family-comparison .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.comparison-content{width:100%;min-width:1000px;height:620px;overflow:hidden;--graph-scale:1;--graph-offset:0px;--lane-height:310px;--xos-scale:1;--xos-offset:0px;--xos-top:0px}
.comparison-content .node-graph{left:var(--graph-offset);transform:scale(var(--graph-scale));transform-origin:top left}
.comparison-content .diagram.ask-pattern{height:var(--lane-height);bottom:auto}
.comparison-content .diagram.ask-pattern:nth-child(2){top:var(--lane-height)}
.comparison-content .diagram.xos-pattern .node-graph{left:var(--xos-offset);top:var(--xos-top);height:470px;transform:scale(var(--xos-scale))}
.comparison-content .diagram.xos-pattern .node-graph>svg{height:470px}
.comparison-content .diagram.ask-pattern .node-graph,.comparison-content .diagram.ask-pattern .node-graph>svg{height:310px}
.comparison-content .diagram.ask-pattern:nth-child(2){border-top:0!important}
.lane-heading{position:absolute;top:10px;left:24px;display:flex;align-items:baseline;gap:14px;z-index:2}
.lane-heading h2{font:700 23px/1.2 Schibsted,sans-serif;margin:0}
.lane-heading span{font:12px Hanken,sans-serif;color:#6b6570}
.comparison-content .diagram.ask-pattern .graph-node{width:172px;transform:translate(-50%,-20px)}
.comparison-content .diagram.ask-pattern .node-disc{width:40px;height:40px;margin-bottom:6px}
.comparison-content .diagram.ask-pattern .node-disc img{width:21px;height:21px}
.comparison-content .diagram.ask-pattern .graph-node strong{font-size:16px}
.comparison-content .diagram.ask-pattern .graph-node small{font-size:14px;margin-top:3px}
.comparison-content .diagram.ask-pattern .graph-loop-label{bottom:3px;left:560px;font-size:12px}
.signal .lane-heading span{color:#c8bdd0}
.signal .comparison-content .diagram.ask-pattern:nth-child(2){border-top:0!important}
.motion-legend{display:flex;gap:22px;align-items:center;flex-wrap:wrap;font-size:12px}
.motion-legend span{display:flex;align-items:center;gap:7px}
.motion-legend i{width:7px;height:7px;border-radius:50%;background:#ff388d}
.motion-legend .action-key{background:#5b2ee5}.motion-legend .judgement-key{background:#287960}
.activity-packet.packet-action{fill:#5b2ee5}.activity-packet.packet-judgement{fill:#287960}
.signal .activity-packet.packet-action{fill:#b498ff}.signal .activity-packet.packet-judgement{fill:#88cfab}
.signal .motion-legend .action-key{background:#b498ff}.signal .motion-legend .judgement-key{background:#88cfab}
.activity-summary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;font-size:12px;margin-top:10px}
.activity-summary strong{display:block;font-weight:600;margin-bottom:4px}
.comparison-content .node-disc{transition:border-color .45s ease,background-color .45s ease;box-shadow:none}
.comparison-content .graph-node.review-pending .node-disc{border-color:#287960;background:#e7f2ed}
.signal .comparison-content .graph-node.review-pending .node-disc{border-color:#88cfab;background:#254435}
.comparison-content .graph-edge.loop-edge{stroke-linecap:round;stroke-linejoin:round}
.feedback-arrow{fill:#ff388d}.signal .feedback-arrow{fill:#ff70b0}
.family-position{margin-bottom:8px}
@media(max-width:767px){.lane-heading h2{font-size:22px}.motion-legend{gap:12px}.activity-summary{grid-template-columns:1fr;gap:12px}.comparison-controls{margin-bottom:16px}}
 .family-comparison button:focus-visible,.family-comparison input:focus-visible,.comparison-viewport:focus-visible{outline:2px solid #5b2ee5;outline-offset:5px}
@media(hover:hover) and (pointer:fine){.comparison-viewport{cursor:none}}
@media(max-width:767px){.family-heading{gap:10px}.family-choice{font-size:22px}.simulation-label{font-size:9px;max-width:95px;text-align:center}.comparison-controls{gap:14px;flex-wrap:wrap}.pattern-tabs{gap:22px}.pattern-tabs button{font-size:18px}.family-position{gap:10px;font-size:10px}.family-position>span:last-child{max-width:110px}.live-status{font-size:12px}}

.signal-flow{background:#17151b;color:#fff;width:100vw;margin-left:calc(-1 * var(--edge));padding:28px 0 30px;text-align:left}
.signal-flow button:hover{color:#b498ff}.signal-flow .diagrams{width:100%;max-width:none}
.signal-flow .comparison-viewport{margin:0;width:100%;max-width:none}
.signal-flow .family-heading{margin-bottom:16px}.signal-flow .live-status{color:#c8bdd0}
.signal-flow :is(.family-heading,.comparison-controls,.family-position,.activity-summary,.live-status){margin-left:var(--gutter);margin-right:var(--gutter)}
.drag-cursor{display:flex;opacity:0;visibility:hidden;transition:opacity .14s ease,visibility .14s ease}
.drag-cursor.active{opacity:1;visibility:visible}
.signal-flow{margin-top:28px;scroll-margin-top:0}
.family-comparison .comparison-viewport{border:0}
.family-comparison .family-choice{border-bottom:0}
.family-choice[data-family-choice=askjary]{opacity:var(--ask-opacity,1)}
.family-choice[data-family-choice=xos]{opacity:var(--xos-opacity,0)}
.family-choice:focus-visible{opacity:1}
.comparison-content .diagram.ask-pattern{opacity:var(--ask-opacity,1)}
.comparison-content .diagram.xos-pattern{opacity:var(--xos-opacity,0)}
@media(hover:none){.family-comparison .family-choice{opacity:.52}.family-comparison .family-choice:is([aria-pressed=true],:focus-visible){opacity:1;box-shadow:inset 0 -2px #ff388d}}
@media(max-width:767px){.signal-flow{margin-top:24px;padding:20px 0 24px}.signal-flow .family-heading{align-items:flex-start}.signal-flow .family-choice:first-child{max-width:160px;text-align:left}.signal-flow .simulation-label{font-size:9px}.signal-flow .activity-summary{grid-template-columns:1fr}.signal-flow .family-choice{font-size:22px}}