@import"https://fonts.cdnfonts.com/css/opendyslexic";@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap";.react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.accept-reject-level{display:flex;flex-direction:row;height:100dvh;padding:0;overflow:hidden}.accept-reject-level .sheep-panel{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 18px;background:#f0faf0;border-right:2px solid #C8E6C9;width:76px;min-width:76px;overflow-y:hidden;flex-shrink:0}.accept-reject-level .home-btn{width:44px;height:44px;padding:0;border:none;border-radius:10px;background:#f5f5f5;color:#555;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s}.accept-reject-level .home-btn:hover{background:#e0e0e0}.accept-reject-level .prev-btn{width:44px;height:44px;padding:0;border:none;border-radius:10px;background:#4fc3f7;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;transition:background .2s}.accept-reject-level .prev-btn:hover{background:#29b6f6}.accept-reject-level .sheep-panel-label{background:#4fc3f7;color:#fff;font-size:13px;font-weight:800;font-family:Nunito,sans-serif;padding:4px 10px;border-radius:8px;white-space:nowrap;margin-top:6px}.accept-reject-level .sheep-list{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,.6vh,6px);margin-top:clamp(4px,1vh,10px);flex:1;min-height:0;overflow:hidden;width:100%;padding:4px 2px}.accept-reject-level .sheep-slot{transition:all .3s ease;display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:1 1 0;min-height:0;max-height:56px;border-radius:10px;position:relative}.accept-reject-level .sheep-slot img{max-width:100%;max-height:100%;width:auto!important;height:auto!important;object-fit:contain}.accept-reject-level .sheep-slot.status-future{filter:grayscale(100%) opacity(.25)}.accept-reject-level .sheep-slot.status-current{filter:grayscale(30%) opacity(.7);background:#fff9c4;box-shadow:0 0 0 2px #ffd54f;transform:scale(1.1)}.accept-reject-level .sheep-slot.status-correct{filter:none;background:#e8f5e9;animation:sheep-pop .4s ease}.accept-reject-level .sheep-slot.status-wrong{filter:none;background:#ffebee;animation:sheep-pop .4s ease}.accept-reject-level .sheep-badge{position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;border:2px solid white;line-height:1}.accept-reject-level .badge-correct{background:#43a047}.accept-reject-level .badge-wrong{background:#e53935}.accept-reject-level .main-content{display:flex;flex-direction:column;flex:1;min-width:0;padding:12px 16px}.accept-reject-level .header-compact{display:flex;align-items:center;padding:0 0 8px}.accept-reject-level .hint-button{height:38px;width:38px;padding:0;border-radius:50%;border:none;background:#e65100;color:#fff;font-size:18px;font-weight:700;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;outline:none;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #e6510066;flex-shrink:0}.accept-reject-level .hint-button:hover,.accept-reject-level .hint-button:active,.accept-reject-level .hint-button:focus,.accept-reject-level .hint-button:focus-visible{background:#bf360c;outline:none}.accept-reject-level .hint-button.nudge-pulse{animation:hint-nudge 1.1s ease-in-out 4;position:relative;z-index:100}.accept-reject-level .game-container{display:flex;flex:1;gap:16px;min-height:0}.accept-reject-level .graph-area{flex:1;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 12px #0000001a;min-height:350px;display:flex;flex-direction:column;position:relative}.accept-reject-level .graph-area .react-flow{flex:1;min-height:100%}.accept-reject-level .fit-view-btn{position:absolute;bottom:12px;left:12px;min-width:2.5em;min-height:2.5em;width:2.5em;height:2.5em;border-radius:8px;border:none;background:#fffffff2;color:#666;font-size:clamp(16px,1.25rem,24px);cursor:pointer;box-shadow:0 2px 8px #00000026;z-index:5;transition:all .2s;display:flex;align-items:center;justify-content:center}.accept-reject-level .fit-view-btn:hover{background:#fff;color:#333;transform:scale(1.05);box-shadow:0 4px 12px #0003}.accept-reject-level .fit-view-btn:active{transform:scale(.95)}.accept-reject-level .sidebar{width:var(--sidebar-width, 400px);display:flex;flex-direction:column;gap:10px;overflow-y:auto;max-height:100%;padding-bottom:8px}.question-card{background:#fff;border-radius:12px;padding:12px;box-shadow:0 2px 8px #0000001a}.question-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.question-card h3{margin:0;color:#333;font-size:.95rem}.score-display{font-size:.9rem;font-weight:600;color:#4caf50;background:#e8f5e9;padding:4px 10px;border-radius:8px}.test-pattern{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;background:#f5f5f5;border-radius:8px;flex-wrap:wrap}.test-pattern img{width:var(--sheep-img-md, 64px);height:var(--sheep-img-md, 64px)}.pattern-sheep{display:flex;align-items:center;gap:6px}.pattern-sheep .arrow{font-size:24px;color:#888}.result-section~.question-card .test-pattern img,.sidebar:has(.result-section) .question-card .test-pattern img{width:clamp(36px,6vw,52px);height:clamp(36px,6vw,52px)}.sidebar:has(.result-section) .question-card{padding:10px}.sidebar:has(.result-section) .test-pattern{padding:8px;gap:4px}.sidebar:has(.result-section) .pattern-sheep{gap:4px}.sidebar:has(.result-section) .pattern-sheep .arrow{font-size:20px}.answer-buttons{display:flex;flex-direction:column;gap:8px}.result-card{background:#fff;border-radius:12px;padding:10px 14px;text-align:center;box-shadow:0 2px 8px #0000001a}.result-card.correct{border:3px solid #4CAF50;background:linear-gradient(to bottom,#e8f5e9,#fff)}.result-card.incorrect{border:3px solid #FF9800;background:linear-gradient(to bottom,#fff3e0,#fff)}.result-card h3{margin:0 0 6px;font-size:1.15rem}.result-card.correct h3{color:#2e7d32}.result-card.incorrect h3{color:#e65100}.explanation{color:#555;font-size:.85rem;line-height:1.6;margin-bottom:10px}.explanation .inline-sheep{width:20px;height:20px;vertical-align:text-bottom;display:inline-block;margin:0 2px}.next-btn{padding:.8em 2em;border:none;border-radius:12px;background:linear-gradient(135deg,#4caf50,#2e7d32);color:#fff;font-size:1rem;font-weight:700;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;transition:transform .2s,box-shadow .2s;min-height:2.5em;box-shadow:0 4px 15px #4caf5080;animation:pulse-attention 1.5s ease-in-out 1.5s infinite;animation-fill-mode:backwards;position:relative}.next-btn:after{content:" →";display:inline-block;margin-left:8px;animation:bounce-arrow 1s ease-in-out infinite}@keyframes bounce-arrow{0%,to{transform:translate(0)}50%{transform:translate(5px)}}@keyframes pulse-attention{0%,to{transform:scale(1);box-shadow:0 4px 15px #4caf5080}50%{transform:scale(1.05);box-shadow:0 6px 25px #4caf50b3}}.next-btn:hover{transform:scale(1.08);box-shadow:0 6px 20px #4caf5099;animation:none}.next-btn:hover:after{animation:none}.next-btn.secondary{background:#f5f5f5;color:#333;margin-left:12px;animation:none}.next-btn.secondary:after{content:none}.next-btn.secondary:hover{background:#e0e0e0;box-shadow:0 4px 12px #0000001a}.final-score{margin-top:10px}.final-score p{font-size:.95rem;font-weight:600;color:#2e7d32;margin-bottom:12px}.final-score .star-display{justify-content:center;margin-bottom:10px}.final-buttons{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.final-buttons .next-btn{padding:.6em 1.2em;font-size:.9rem}.watch-again-btn{display:block;width:100%;padding:.55em 1em;margin-top:8px;border:none;border-radius:10px;background:#e8f0fe;color:#1a56c4;font-size:.9rem;font-weight:600;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;transition:background .15s}.watch-again-btn:hover{background:#d0e2ff}.watching-indicator{text-align:center;padding:.6em 1em;margin-bottom:10px;border-radius:8px;background:#e8f5e9;color:#2e7d32;font-size:.9rem;font-weight:600;font-family:Nunito,Segoe UI,sans-serif;animation:pulse-watch 1s ease-in-out infinite}@keyframes pulse-watch{0%,to{opacity:1}50%{opacity:.6}}.accept-reject-level .animation-result{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:16px 32px;border-radius:12px;font-size:1.25rem;font-weight:700;font-family:Nunito,sans-serif;z-index:25;animation:resultPopIn .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.accept-reject-level .animation-result.success{background:linear-gradient(135deg,#4caf50,#2e7d32);color:#fff;box-shadow:0 8px 30px #4caf5080}.accept-reject-level .animation-result.fail{background:linear-gradient(135deg,#f44336,#c62828);color:#fff;box-shadow:0 8px 30px #f4433680}.sheep-edge-label{position:absolute;background:#fffdf0;padding:3px;border-radius:8px;border:2px solid #c8a84b;box-shadow:0 1px 4px #0000001f;pointer-events:none;transition:none}.react-flow__attribution{display:none!important}.react-flow__edges{overflow:visible}.level-complete-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.level-complete-modal{background:#fff;border-radius:24px;padding:32px 40px;text-align:center;max-width:360px;width:90%;box-shadow:0 20px 60px #0000004d;animation:slideUp .4s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.level-complete-modal h2{font-size:1.8rem;color:#2e7d32;margin:0 0 16px}.level-complete-score{font-size:1.25rem;color:#555;margin-bottom:20px}.level-complete-buttons{display:flex;flex-direction:column;gap:12px;margin-top:24px}.level-complete-buttons .btn{padding:1em 2em;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s;min-height:3em}@media(max-width:1050px){.question-card{padding:10px}}@media(max-width:900px){.accept-reject-level{height:100dvh;overflow:hidden}.accept-reject-level .main-content{overflow:hidden;min-height:0}.accept-reject-level .game-container{flex-direction:column;flex:1;min-height:0;width:100%}.accept-reject-level .sidebar{width:100%;flex:1;min-height:0;max-height:none;overflow-y:auto}.accept-reject-level .graph-area{min-height:180px;height:38vh;max-height:380px;flex:none}.answer-buttons{flex-direction:row}.answer-btn{flex:1}.result-section~.question-card .test-pattern img,.sidebar:has(.result-section) .question-card .test-pattern img{width:var(--sheep-img-md, 44px);height:var(--sheep-img-md, 44px)}.sidebar:has(.result-section) .question-card{padding:12px}.sidebar:has(.result-section) .test-pattern{padding:10px;gap:6px}.sidebar:has(.result-section) .pattern-sheep{gap:6px}.sidebar:has(.result-section) .pattern-sheep .arrow{font-size:24px}}@media(max-width:768px){.accept-reject-level .sheep-panel{width:62px;min-width:62px;padding:10px 4px 16px}.accept-reject-level .sheep-slot{width:42px;height:42px}.accept-reject-level .sheep-slot img{width:32px!important;height:32px!important}.accept-reject-level .sheep-panel-label{font-size:11px;padding:3px 8px}.accept-reject-level .home-btn{width:34px;height:34px}.accept-reject-level .home-btn svg{width:18px;height:18px}.accept-reject-level .prev-btn{width:34px;height:34px;font-size:15px}.accept-reject-level .main-content{padding:8px 12px}.accept-reject-level .graph-area{flex:1;min-height:220px;height:auto;max-height:none}.accept-reject-level .sidebar{flex:none;max-height:45vh}.accept-reject-level .sidebar:has(.result-section){max-height:55vh}.accept-reject-level .game-container:has(.result-section) .graph-area{min-height:130px;max-height:180px}.level-complete-modal{padding:24px 28px;max-width:320px}.level-complete-modal h2{font-size:1.5rem}}@media(max-width:500px){.accept-reject-level .sheep-panel{width:48px;min-width:48px;padding:8px 3px 14px}.accept-reject-level .sheep-slot{width:34px;height:34px}.accept-reject-level .sheep-slot.status-current{transform:none}.accept-reject-level .sheep-slot img{width:24px!important;height:24px!important}.accept-reject-level .sheep-badge{width:16px;height:16px;font-size:10px}.accept-reject-level .main-content{padding:6px 8px}.accept-reject-level .game-container{gap:10px}.accept-reject-level .test-pattern{gap:3px;padding:8px}.accept-reject-level .pattern-sheep{gap:3px}.accept-reject-level .graph-area{flex:1;min-height:180px;height:auto;max-height:none;border-radius:12px}.accept-reject-level .game-container:has(.result-section) .graph-area{height:auto;min-height:180px;max-height:none}.accept-reject-level .sidebar{flex:none;max-height:48vh;overflow:hidden;display:flex;flex-direction:column}.accept-reject-level .question-card{flex-shrink:1;min-height:0;overflow-y:auto}.accept-reject-level .answer-buttons{flex-shrink:0}.accept-reject-level .result-section{flex:1;overflow-y:auto;min-height:0}.question-card{padding:8px;border-radius:10px}.question-card h3{font-size:.85rem}.result-card{padding:8px 10px;border-radius:10px}.result-card h3{font-size:1rem}.explanation{font-size:.8rem;line-height:1.5;margin-bottom:8px}.explanation .inline-sheep{width:18px;height:18px}.answer-btn{padding:.6em .8em;font-size:.9rem;border-radius:10px}.next-btn{padding:.6em 1.5em;font-size:.9rem}.final-buttons .next-btn{padding:.5em 1em;font-size:.85rem}.watch-path-btn{padding:.4em .8em;font-size:.8rem}.score-display{font-size:.8rem;padding:3px 8px}.level-complete-modal{padding:20px 24px;max-width:290px;border-radius:20px}.level-complete-modal h2{font-size:1.3rem}.level-complete-score{font-size:1.1rem}.level-complete-buttons .btn{padding:.8em 1.5em;font-size:1rem}}@media(max-width:360px){.accept-reject-level .sheep-panel{width:42px;min-width:42px;padding:6px 2px 12px}.accept-reject-level .sheep-slot{width:30px;height:30px}.accept-reject-level .sheep-slot img{width:22px!important;height:22px!important}.accept-reject-level .sheep-panel-label{font-size:9px;padding:2px 5px}.accept-reject-level .home-btn{width:30px;height:30px}.accept-reject-level .prev-btn{width:30px;height:30px;font-size:13px}.accept-reject-level .graph-area{min-height:180px;height:32vh}}@media(max-height:680px)and (min-width:900px){.accept-reject-level .test-pattern img{width:48px;height:48px}.accept-reject-level .answer-btn{padding:.5em .8em}}@media(max-height:500px)and (orientation:landscape){.accept-reject-level{height:100vh;overflow:hidden}.accept-reject-level .main-content{padding:4px 10px;overflow:hidden}.accept-reject-level .game-container{flex-direction:row;flex:1;width:auto;min-height:0}.accept-reject-level .sidebar{width:240px;min-width:240px;max-height:100vh;overflow-y:auto}.accept-reject-level .graph-area{flex:1;min-height:unset;height:auto;max-height:unset;min-height:0}.accept-reject-level .sheep-panel{width:44px;min-width:44px;padding:4px 2px}.accept-reject-level .sheep-slot{width:28px;height:28px}.accept-reject-level .sheep-slot img{width:20px!important;height:20px!important}.question-card{padding:6px 8px}.answer-buttons{flex-direction:row;gap:6px}.answer-btn{padding:.4em .8em;font-size:.85rem}.result-card{padding:6px 8px}.result-card h3{font-size:.95rem;margin-bottom:4px}.explanation{font-size:.78rem;margin-bottom:4px}}.level-complete-score .final-score{display:block;font-size:2rem;font-weight:700;color:#2e7d32}.dev-auto-btn{padding:8px 16px;border:2px dashed #9C27B0;border-radius:8px;background:#f3e5f5;color:#7b1fa2;font-size:.85rem;font-weight:600;font-family:Nunito,sans-serif;cursor:pointer;transition:all .2s}.dev-auto-btn:hover{background:#e1bee7;border-color:#7b1fa2}.state-node{position:relative;width:var(--node-size, 120px);height:var(--node-size, 120px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:8px;margin:0 auto}.fence{display:flex;align-items:flex-end;height:50%;width:100%}.fence-post{width:10%;height:100%;background:linear-gradient(to right,#8b4513,sienna,#8b4513);border-radius:2px;box-shadow:1px 2px 3px #0000004d}.fence-rails{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;height:75%;padding:6px 0}.rail{height:7px;background:linear-gradient(to bottom,sienna,#8b4513);border-radius:2px;box-shadow:0 1px 2px #0003}.sheep-area{position:absolute;top:4px;width:100%;height:58%;display:flex;align-items:center;justify-content:center}.sheep-placeholder{width:42%;height:42%;border:3px dashed #999;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#999;background:#fff9}.placed-sheep{font-size:2.5rem;filter:drop-shadow(2px 2px 3px rgba(0,0,0,.35))}.state-node.start:before{content:"→";position:absolute;left:-42%;top:50%;transform:translateY(-50%);font-size:calc(2rem * var(--canvas-font-scale, 1));color:#4caf50;font-weight:700}.state-node.start:after{content:"Start";position:absolute;left:-42%;top:calc(50% + 22px);font-size:calc(1.25rem * var(--canvas-font-scale, 1));color:#4caf50;font-weight:600}.accepting-indicator{position:absolute;top:-8px;right:-8px;font-size:16px}.state-node.accepting .fence-post{background:linear-gradient(to right,#2e7d32,#4caf50,#2e7d32)}.state-node.accepting .rail{background:linear-gradient(to bottom,#4caf50,#2e7d32)}.state-node .react-flow__handle{width:10px;height:10px;background:#4caf50;border:2px solid white}.accepting-bed{display:block;margin:0 auto;width:100%;height:auto}.node-label{position:absolute;bottom:-8px;left:50%;transform:translate(-50%);font-size:calc(.75rem * var(--canvas-font-scale, 1));font-weight:600;color:#666;background:#ffffffe6;padding:2px 8px;border-radius:10px;white-space:nowrap;box-shadow:0 1px 3px #0000001a}.sheep-animator-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;overflow:hidden}.animated-sheep{position:absolute;transform:translate(-50%,-50%);z-index:15;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.animated-sheep .sheep-sprite{width:64px;height:64px;display:block}.animated-sheep.jumping{animation:sheepJump 1.3s cubic-bezier(.22,.61,.36,1)}@keyframes sheepJump{0%{transform:translate(-50%,-50%) scale(1) rotate(0)}25%{transform:translate(-50%,-100%) scale(1.1) rotate(-10deg)}50%{transform:translate(-50%,-120%) scale(1.15) rotate(0)}75%{transform:translate(-50%,-80%) scale(1.1) rotate(10deg)}to{transform:translate(-50%,-50%) scale(1) rotate(0)}}.animated-sheep.jumping.self-loop{animation:sheepSelfLoop 1.3s cubic-bezier(.22,.61,.36,1)}@keyframes sheepSelfLoop{0%{transform:translate(-50%,-50%) scale(1) rotate(0)}30%{transform:translate(-50%,-150%) scale(1.15) rotate(-5deg)}50%{transform:translate(-50%,-180%) scale(1.2) rotate(0)}70%{transform:translate(-50%,-100%) scale(1.1) rotate(5deg)}to{transform:translate(-50%,-50%) scale(1) rotate(0)}}.animated-sheep.going-to-bed{animation:sheepWalk .3s steps(2) infinite}@keyframes sheepWalk{0%{transform:translate(-50%,-50%) rotate(-3deg)}50%{transform:translate(-50%,-50%) rotate(3deg)}to{transform:translate(-50%,-50%) rotate(-3deg)}}.animated-sheep.landed{animation:sheepLand .55s ease-out}@keyframes sheepLand{0%{transform:translate(-50%,-50%) scale(1.1)}50%{transform:translate(-50%,-45%) scale(.95,1.05)}to{transform:translate(-50%,-50%) scale(1)}}.animated-sheep.stuck{animation:sheepStuck .5s ease-in-out}@keyframes sheepStuck{0%,to{transform:translate(-50%,-50%) rotate(0)}20%{transform:translate(-45%,-50%) rotate(-5deg)}40%{transform:translate(-55%,-50%) rotate(5deg)}60%{transform:translate(-45%,-50%) rotate(-5deg)}80%{transform:translate(-55%,-50%) rotate(5deg)}}.animated-sheep.done{transform:translate(-50%,-50%)}.jump-trail{position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:30px;height:15px;background:radial-gradient(ellipse at center,rgba(139,195,74,.4) 0%,transparent 70%);border-radius:50%;animation:trailFade .4s ease-out forwards}@keyframes trailFade{0%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(2)}}.animation-progress{position:absolute;bottom:60px;left:50%;transform:translate(-50%);background:#000000bf;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:600;font-family:Nunito,sans-serif;pointer-events:none;z-index:20;animation:fadeInUp .3s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.node-highlight{animation:nodeGlow .5s ease-in-out}@keyframes nodeGlow{0%,to{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 15px rgba(76,175,80,.8))}}.edge-highlight{stroke:#4caf50!important;stroke-width:4px!important;animation:edgePulse .3s ease-out}@keyframes edgePulse{0%{stroke-width:2px}50%{stroke-width:6px}to{stroke-width:4px}}.animation-result{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:20px 40px;border-radius:16px;font-size:1.5rem;font-weight:700;font-family:Nunito,sans-serif;z-index:25;animation:resultPopIn .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.animation-result.success{background:linear-gradient(135deg,#4caf50,#2e7d32);color:#fff;box-shadow:0 8px 30px #4caf5080}.animation-result.fail{background:linear-gradient(135deg,#f44336,#c62828);color:#fff;box-shadow:0 8px 30px #f4433680}@media(max-width:768px){.animated-sheep .sheep-sprite{width:48px;height:48px}.animation-progress{bottom:50px;font-size:12px;padding:6px 12px}.animation-result{font-size:1.2rem;padding:16px 30px}}@media(prefers-reduced-motion:reduce){.animated-sheep,.animated-sheep.jumping,.animated-sheep.landed,.animated-sheep.stuck{animation:none;transition:left .5s ease,top .5s ease}.jump-trail{display:none}}.current-pattern-preview{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;gap:8px;background:#fffffff2;padding:8px 16px;border-radius:24px;box-shadow:0 2px 12px #00000026;z-index:20;pointer-events:none}.pattern-sheep-item{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#f5f5f5;border:2px solid #e0e0e0;transition:all .3s ease;opacity:.5}.pattern-sheep-item img{width:32px;height:32px}.pattern-sheep-item.completed{opacity:1;background:#e8f5e9;border-color:#4caf50}.pattern-sheep-item.current{opacity:1;background:#fff3e0;border-color:#ff9800;transform:scale(1.15);box-shadow:0 2px 8px #ff980066}.multi-pattern-progress{position:absolute;top:70px;left:50%;transform:translate(-50%);display:flex;gap:6px;z-index:20;pointer-events:none}.pattern-dot{width:12px;height:12px;border-radius:50%;background:#e0e0e0;transition:all .3s ease}.pattern-dot.active{background:#ff9800;transform:scale(1.2)}.pattern-dot.success{background:#4caf50}.pattern-dot.fail{background:#f44336}@media(max-width:768px){.current-pattern-preview{padding:6px 12px;gap:6px}.pattern-sheep-item{width:32px;height:32px}.pattern-sheep-item img{width:24px;height:24px}}.demo-overlay{position:fixed;inset:0;z-index:9999;background:#00000073;display:flex;align-items:center;justify-content:center;padding-bottom:env(safe-area-inset-bottom,0px);animation:demo-overlay-in .2s ease}@keyframes demo-overlay-in{0%{opacity:0}to{opacity:1}}.demo-scene{position:relative;width:660px;max-width:95vw;background:linear-gradient(145deg,#e8f5e9,#c8e6c9);border-radius:22px;box-shadow:0 8px 40px #00000040;overflow:hidden;border:3px solid #a5d6a7;display:flex;flex-direction:column}.demo-title-bar{padding:10px 16px 8px;background:#fff9;border-bottom:1px solid rgba(165,214,167,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center}.demo-title{font-size:22px;font-weight:700;color:#2e7d32;letter-spacing:.2px}.demo-anim-area{position:relative;width:100%;height:392px;overflow:hidden}.demo-scene-inner{position:relative;width:420px;height:280px;transform:scale(1.4);transform-origin:top left;margin-left:36px}.demo-bottom-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:#ffffff8c;border-top:1px solid rgba(165,214,167,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);gap:8px}.demo-bar-spacer{width:90px;flex-shrink:0}.demo-dismiss{min-height:38px;padding:5px 14px;border-radius:19px;border:2px solid #4CAF50;background:#fff;color:#4caf50;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:all .15s;box-shadow:0 2px 6px #4caf5026;flex-shrink:0}.demo-dismiss-icon{font-size:16px;line-height:1}.demo-btn-label{font-size:13px;font-weight:700;letter-spacing:.3px}@media(max-width:600px){.demo-scene-inner{transform:scale(1.15);margin-left:16px}.demo-anim-area{height:322px}.demo-step-dot{width:10px;height:10px}}@media(max-width:500px){.demo-scene-inner{transform:scale(.84);margin-left:8px}.demo-anim-area{height:236px}.demo-bottom-bar{padding:6px 10px}.demo-bar-spacer{width:70px}}@media(max-width:360px){.demo-scene-inner{transform:scale(.7);margin-left:4px}.demo-anim-area{height:196px}}.demo-dismiss:hover{background:#4caf50;color:#fff;transform:scale(1.05);box-shadow:0 4px 12px #4caf5059}.demo-anim-wrap{width:100%;height:100%;position:relative;transition:opacity .6s ease}.demo-anim-wrap *{animation-iteration-count:1!important;animation-fill-mode:forwards!important}.demo-anim-done{opacity:.12}.demo-replay-btn{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);min-width:56px;min-height:56px;padding:8px 20px;border-radius:28px;border:none;background:#fffffff2;color:#4caf50;cursor:pointer;box-shadow:0 4px 16px #0003;display:flex;align-items:center;justify-content:center;gap:6px;z-index:10;animation:replay-pop .3s ease-out}.demo-replay-icon{font-size:26px;line-height:1}.demo-replay-btn:hover{background:#4caf50;color:#fff;transform:translate(-50%,-50%) scale(1.05)}@keyframes replay-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.demo-step-dots{display:flex;gap:8px;padding:4px 10px;background:#ffffff80;border-radius:12px}.demo-step-dot{width:12px;height:12px;border-radius:50%;background:#ccc;border:2px solid #bbb;transition:all .35s ease}.demo-step-dot.demo-step-active{background:#66bb6a;border-color:#4caf50;transform:scale(1.25);box-shadow:0 0 8px #4caf5080;animation:step-pulse 1.2s ease-in-out infinite}.demo-step-dot.demo-step-done{background:#4caf50;border-color:#388e3c}@keyframes step-pulse{0%,to{box-shadow:0 0 4px #4caf504d}50%{box-shadow:0 0 12px #4caf5099}}.nudge-pulse{animation:nudge-glow 1.2s ease-in-out 3;border-radius:inherit}@keyframes nudge-glow{0%,to{box-shadow:0 0 #4caf5000}50%{box-shadow:0 0 0 6px #4caf5059}}.nudge-arrow{position:absolute;z-index:100;pointer-events:none;animation:nudge-bounce 1s ease-in-out infinite,nudge-fade-out 4.5s ease forwards}@keyframes nudge-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes nudge-fade-out{0%,70%{opacity:1}to{opacity:0}}.demo-el{position:absolute;pointer-events:none}.demo-sidebar-panel{left:0;top:0;width:88px;height:100%;background:#ffffff8c;border-right:2px solid #C8E6C9;z-index:0}.demo-cursor{z-index:5;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.3))}.demo-ripple{width:40px;height:40px;border-radius:50%;border:3px solid #4CAF50;opacity:0}.demo-check{width:48px;height:48px;border-radius:50%;background:#4caf50;color:#fff;font-size:26px;font-weight:700;display:flex;align-items:center;justify-content:center;opacity:0;z-index:6;box-shadow:0 2px 10px #4caf5066}.demo-connecting .demo-connect-btn,.demo-build-loop .demo-connect-btn{border-radius:100px;border:2px solid #e0e0e0;background:#fafafa;font-size:11px;font-weight:700;font-family:Nunito,sans-serif;display:flex;align-items:stretch;white-space:nowrap;overflow:hidden}.demo-connecting .demo-connect-btn{left:6px;top:8px;animation:c-connect-btn-fade 8.5s ease infinite}.demo-connecting .demo-c-from,.demo-connecting .demo-c-to,.demo-build-loop .demo-c-from,.demo-build-loop .demo-c-to{display:flex;flex-direction:row;align-items:center;gap:4px;padding:5px 8px;color:#555}.demo-connecting .demo-c-divider,.demo-build-loop .demo-c-divider{width:1px;background:#ccc;flex-shrink:0;align-self:stretch}.demo-connecting .demo-c-from{animation:c-from-half 8.5s ease infinite}.demo-connecting .demo-c-to{opacity:.35;animation:c-to-half 8.5s ease infinite}.demo-connecting .demo-fence-a{left:15px;top:95px}.demo-connecting .demo-fence-b{left:175px;top:95px}.demo-connecting .demo-fence-c{left:330px;top:95px}.demo-connecting .demo-start-arrow{left:-2px;top:112px}.demo-connecting .demo-start-arrow{animation:c-persist 8.5s ease infinite}.demo-connecting .demo-glow-a{left:25px;top:105px}.demo-connecting .demo-glow-b{left:185px;top:105px}.demo-connecting .demo-glow-c{left:340px;top:105px}.demo-connecting .demo-dotted-line-1{left:77px;top:122px;height:3px;background:repeating-linear-gradient(90deg,#4CAF50 0px,#4CAF50 6px,transparent 6px,transparent 12px);width:0;animation:c-dotted-1 8.5s ease infinite}.demo-connecting .demo-dotted-line-2{left:237px;top:122px;height:3px;background:repeating-linear-gradient(90deg,#4CAF50 0px,#4CAF50 6px,transparent 6px,transparent 12px);width:0;animation:c-dotted-2 8.5s ease infinite}.demo-connecting .demo-arrow-1{left:73px;top:110px;width:104px;height:28px;opacity:0;animation:c-arrow-1 8.5s ease infinite}.demo-connecting .demo-arrow-2{left:233px;top:110px;width:100px;height:28px;opacity:0;animation:c-arrow-2 8.5s ease infinite}.demo-connecting .demo-q-label-1{left:105px;top:76px;width:38px;height:38px;border-radius:8px;background:#fff;border:2px solid #ccc;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#888;opacity:0;animation:c-q-label-1 8.5s ease infinite}.demo-connecting .demo-q-label-2{left:265px;top:76px;width:38px;height:38px;border-radius:8px;background:#fff;border:2px solid #ccc;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#888;opacity:0;animation:c-q-label-2 8.5s ease infinite}.demo-connecting .demo-check{left:190px;top:170px;animation:c-check 8.5s ease infinite}.demo-connecting .demo-cursor{left:18px;top:28px;animation:c-cursor 8.5s ease infinite}.demo-connecting .demo-glow-a .demo-ripple{animation:c-ripple-a 8.5s ease infinite}.demo-connecting .demo-glow-b .demo-ripple{animation:c-ripple-b 8.5s ease infinite}.demo-connecting .demo-glow-c .demo-ripple{animation:c-ripple-c 8.5s ease infinite}@keyframes c-connect-btn-fade{0%{opacity:0}3%{opacity:1}86%{opacity:1}92%,to{opacity:0}}@keyframes c-from-half{0%{background:#fff;color:#555}3%{background:#fff;color:#555}9%{background:#4caf50;color:#fff}19%{background:#4caf50;color:#fff}22%{background:#c8e6c9;color:#2e7d32}40%{background:#c8e6c9;color:#2e7d32}43%{background:#4caf50;color:#fff}48%{background:#4caf50;color:#fff}51%{background:#c8e6c9;color:#2e7d32}to{background:#c8e6c9;color:#2e7d32}}@keyframes c-to-half{0%{opacity:.35;background:#fff;color:#555}19%{opacity:.35;background:#fff;color:#555}22%{opacity:1;background:#4caf50;color:#fff}35%{opacity:1;background:#4caf50;color:#fff}38%{opacity:.35;background:#fff;color:#555}48%{opacity:.35;background:#fff;color:#555}51%{opacity:1;background:#4caf50;color:#fff}to{opacity:1;background:#4caf50;color:#fff}}@keyframes c-cursor{0%{left:18px;top:22px;opacity:0}3%{left:18px;top:22px;opacity:1}7%{left:18px;top:26px}9%{left:18px;top:22px}17%{left:33px;top:118px}18%{left:33px;top:124px}19%{left:33px;top:118px}32%{left:193px;top:118px}33%{left:193px;top:124px}35%{left:193px;top:118px}43%{left:193px;top:118px}45%{left:193px;top:124px}48%{left:193px;top:118px}58%{left:348px;top:118px}59%{left:348px;top:124px}61%{left:348px;top:118px}82%{left:348px;top:118px;opacity:1}88%{opacity:0}to{left:18px;top:22px;opacity:0}}@keyframes c-ripple-a{0%,18%{opacity:0;transform:scale(.5)}19%{opacity:1;transform:scale(1)}28%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes c-ripple-b{0%,33%{opacity:0;transform:scale(.5)}35%{opacity:1;transform:scale(1)}42%{opacity:0;transform:scale(1.8)}43%{opacity:0;transform:scale(.5)}45%{opacity:1;transform:scale(1)}53%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes c-ripple-c{0%,59%{opacity:0;transform:scale(.5)}61%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes c-dotted-1{0%,19%{width:0;opacity:0}21%{width:0;opacity:1}32%{width:96px;opacity:1}35%{width:96px;opacity:0}to{opacity:0}}@keyframes c-dotted-2{0%,48%{width:0;opacity:0}50%{width:0;opacity:1}58%{width:92px;opacity:1}61%{width:92px;opacity:0}to{opacity:0}}@keyframes c-arrow-1{0%,34%{opacity:0}37%{opacity:1}86%{opacity:1}92%,to{opacity:0}}@keyframes c-arrow-2{0%,60%{opacity:0}63%{opacity:1}86%{opacity:1}92%,to{opacity:0}}@keyframes c-q-label-1{0%,35%{opacity:0;transform:scale(.5)}39%{opacity:1;transform:scale(1.1)}42%{transform:scale(1)}86%{opacity:1}92%,to{opacity:0}}@keyframes c-q-label-2{0%,61%{opacity:0;transform:scale(.5)}65%{opacity:1;transform:scale(1.1)}68%{transform:scale(1)}86%{opacity:1}92%,to{opacity:0}}@keyframes c-check{0%,68%{opacity:0;transform:scale(.3)}73%{opacity:1;transform:scale(1.1)}76%{transform:scale(1)}86%{opacity:1}92%,to{opacity:0;transform:scale(1)}}@keyframes c-persist{0%{opacity:0}3%{opacity:1}86%{opacity:1}92%,to{opacity:0}}.demo-build-loop .demo-connect-btn{left:6px;top:8px}.demo-build-loop .demo-fence-a{left:180px;top:90px}.demo-build-loop .demo-start-arrow{left:160px;top:108px;animation:bl-persist 5.5s ease infinite}.demo-build-loop .demo-glow-a1,.demo-build-loop .demo-glow-a2{left:190px;top:100px}.demo-build-loop .demo-loop-arrow{left:174px;top:38px;opacity:0;animation:bl-loop-arrow 5.5s ease infinite}.demo-build-loop .demo-q-label{left:193px;top:24px;width:38px;height:38px;border-radius:8px;background:#fff;border:2px solid #ccc;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#888;opacity:0;animation:bl-q-label 5.5s ease infinite}.demo-build-loop .demo-check{left:224px;top:170px;animation:bl-check 5.5s ease infinite}.demo-build-loop .demo-cursor{left:18px;top:22px;animation:bl-cursor 5.5s ease infinite}.demo-build-loop .demo-glow-a1 .demo-ripple{animation:bl-ripple-a1 5.5s ease infinite}.demo-build-loop .demo-glow-a2 .demo-ripple{animation:bl-ripple-a2 5.5s ease infinite}.demo-build-loop .demo-click-1,.demo-build-loop .demo-click-2{width:26px;height:26px;border-radius:50%;background:#1976d2;color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;opacity:0;box-shadow:0 1px 4px #0000004d}.demo-build-loop .demo-click-1{left:240px;top:96px;animation:bl-click-num-1 5.5s ease infinite}.demo-build-loop .demo-click-2{left:240px;top:96px;animation:bl-click-num-2 5.5s ease infinite}@keyframes bl-click-num-1{0%,28%{opacity:0;transform:scale(.5)}33%{opacity:1;transform:scale(1.2)}37%{transform:scale(1)}50%{opacity:1}56%{opacity:0}to{opacity:0}}@keyframes bl-click-num-2{0%,54%{opacity:0;transform:scale(.5)}59%{opacity:1;transform:scale(1.2)}63%{transform:scale(1)}75%{opacity:1}82%{opacity:0}to{opacity:0}}@keyframes bl-cursor{0%{left:18px;top:22px;opacity:0}4%{left:18px;top:22px;opacity:1}8%{left:18px;top:26px}11%{left:18px;top:22px}26%{left:198px;top:118px}29%{left:198px;top:124px}32%{left:198px;top:118px}52%{left:198px;top:118px}55%{left:198px;top:124px}58%{left:198px;top:118px}84%{left:198px;top:118px;opacity:1}90%{opacity:0}to{left:18px;top:22px;opacity:0}}@keyframes bl-ripple-a1{0%,29%{opacity:0;transform:scale(.5)}32%{opacity:1;transform:scale(1)}44%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes bl-ripple-a2{0%,55%{opacity:0;transform:scale(.5)}58%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes bl-loop-arrow{0%,57%{opacity:0;transform:scale(.3)}62%{opacity:1;transform:scale(1.15)}66%{transform:scale(1)}88%{opacity:1}94%,to{opacity:0}}@keyframes bl-q-label{0%,63%{opacity:0;transform:scale(.5)}68%{opacity:1;transform:scale(1.1)}71%{transform:scale(1)}88%{opacity:1}94%,to{opacity:0}}@keyframes bl-check{0%,72%{opacity:0;transform:scale(.3)}78%{opacity:1;transform:scale(1.1)}82%{transform:scale(1)}88%{opacity:1}94%,to{opacity:0;transform:scale(1)}}@keyframes bl-persist{0%{opacity:0}4%{opacity:1}88%{opacity:1}94%,to{opacity:0}}.demo-build-loop .demo-c-from{animation:c-from-half 5.5s ease infinite}.demo-build-loop .demo-c-to{opacity:.35;animation:c-to-half 5.5s ease infinite}.demo-build-loop .demo-connect-btn{animation:c-connect-btn-fade 5.5s ease infinite}.demo-set-accepting .demo-drop-zone{left:222px;top:72px;width:76px;height:76px;border:2px dashed #aaa;border-radius:12px;background:#ffffff40;animation:sa-dropzone 4.5s ease infinite}.demo-set-accepting .demo-bed-icon{left:18px;top:110px;animation:sa-bed-static 4.5s ease infinite}.demo-set-accepting .demo-bed-dragging{left:18px;top:110px;opacity:0;animation:sa-bed-drag 4.5s ease infinite}.demo-set-accepting .demo-new-fence{left:222px;top:72px;opacity:0;animation:sa-new-fence 4.5s ease infinite}.demo-set-accepting .demo-accepting-ring{left:210px;top:60px;width:100px;height:100px;border-radius:50%;border:3px solid #4CAF50;box-shadow:0 0 0 5px #4caf5033;opacity:0;animation:sa-accepting-ring 4.5s ease infinite}.demo-set-accepting .demo-bed-placed{left:234px;top:58px;opacity:0;animation:sa-bed-placed 4.5s ease infinite}.demo-set-accepting .demo-check{left:200px;top:175px;animation:sa-check 4.5s ease infinite}.demo-set-accepting .demo-cursor{left:26px;top:125px;animation:sa-cursor 4.5s ease infinite}@keyframes sa-dropzone{0%,5%{opacity:0}10%{opacity:1}58%{opacity:1}64%{opacity:0}to{opacity:0}}@keyframes sa-cursor{0%{left:26px;top:125px;opacity:0}5%{left:26px;top:125px;opacity:1}12%{left:28px;top:129px}15%{left:28px;top:125px}55%{left:258px;top:105px}60%{left:258px;top:110px}62%{left:258px;top:105px}80%{left:258px;top:105px;opacity:1}88%{opacity:0}to{left:26px;top:125px;opacity:0}}@keyframes sa-bed-static{0%,10%{opacity:1}16%{opacity:.3}to{opacity:.3}}@keyframes sa-bed-drag{0%,14%{left:18px;top:110px;opacity:0}16%{left:18px;top:110px;opacity:.85}55%{left:238px;top:97px;opacity:.85}60%{left:238px;top:97px;opacity:0}to{opacity:0}}@keyframes sa-new-fence{0%,58%{opacity:0;transform:scale(.7)}63%{opacity:1;transform:scale(1.05)}67%{transform:scale(1)}88%{opacity:1}94%,to{opacity:0}}@keyframes sa-accepting-ring{0%,62%{opacity:0;transform:scale(.6)}68%{opacity:1;transform:scale(1.08)}72%{transform:scale(1)}88%{opacity:1}94%,to{opacity:0}}@keyframes sa-bed-placed{0%,60%{opacity:0}67%{opacity:1}88%{opacity:1}94%,to{opacity:0}}@keyframes sa-check{0%,70%{opacity:0;transform:scale(.3)}76%{opacity:1;transform:scale(1.1)}80%{transform:scale(1)}88%{opacity:1}94%,to{opacity:0}}.demo-add-state .demo-ghost-fence{left:180px;top:95px;opacity:0;animation:as-ghost 4.5s ease infinite}.demo-add-state .demo-toolbar-fence{left:20px;top:110px;animation:as-toolbar 4.5s ease infinite}.demo-add-state .demo-fence-dragging{left:20px;top:100px;opacity:0;animation:as-drag 4.5s ease infinite}.demo-add-state .demo-fence-landed{left:180px;top:95px;opacity:0;animation:as-landed 4.5s ease infinite}.demo-add-state .demo-check{left:200px;top:175px;animation:as-check 4.5s ease infinite}.demo-add-state .demo-cursor{left:30px;top:125px;animation:as-cursor 4.5s ease infinite}@keyframes as-ghost{0%,5%{opacity:0}10%{opacity:.2}30%{opacity:.35}50%{opacity:.2}58%{opacity:0}to{opacity:0}}@keyframes as-toolbar{0%,10%{opacity:1}18%{opacity:.3}to{opacity:.3}}@keyframes as-drag{0%,15%{left:20px;top:100px;opacity:0}18%{left:20px;top:100px;opacity:.8}55%{left:180px;top:95px;opacity:.8}60%{left:180px;top:95px;opacity:0}to{opacity:0}}@keyframes as-landed{0%,57%{opacity:0;transform:scale(.85)}62%{opacity:1;transform:scale(1.05)}66%{transform:scale(1)}88%{opacity:1}94%,to{opacity:0}}@keyframes as-cursor{0%{left:30px;top:125px;opacity:0}5%{left:30px;top:125px;opacity:1}12%{left:32px;top:129px}15%{left:32px;top:125px}55%{left:200px;top:112px}60%{left:200px;top:116px}62%{left:200px;top:112px}80%{left:200px;top:112px;opacity:1}88%{opacity:0}to{left:52px;top:125px;opacity:0}}@keyframes as-check{0%,65%{opacity:0;transform:scale(.3)}72%{opacity:1;transform:scale(1.1)}76%{transform:scale(1)}88%{opacity:1}94%,to{opacity:0}}.demo-place-sheep .demo-fence-a{left:105px;top:85px}.demo-place-sheep .demo-fence-b{left:340px;top:85px}.demo-place-sheep .demo-arrow{left:165px;top:100px;width:167px;height:28px;animation:ps-persist 5s ease infinite}.demo-place-sheep .demo-toolbar-sheep{left:8px;top:115px;padding:5px;border-radius:10px;border:2px solid #ccc;background:#fafafa;animation:ps-toolbar-sheep 5s ease infinite}.demo-place-sheep .demo-sheep-placed{left:245px;top:68px;opacity:0;animation:ps-placed 5s ease infinite}.demo-place-sheep .demo-glow-sheep{left:8px;top:115px}.demo-place-sheep .demo-glow-sheep .demo-ripple{animation:ps-ripple-sheep 5s ease infinite}.demo-place-sheep .demo-glow-arrow{left:252px;top:102px}.demo-place-sheep .demo-glow-arrow .demo-ripple{animation:ps-ripple-arrow 5s ease infinite}.demo-place-sheep .demo-check{left:230px;top:165px;animation:ps-check 5s ease infinite}.demo-place-sheep .demo-cursor{left:16px;top:130px;animation:ps-cursor 5s ease infinite}@keyframes ps-toolbar-sheep{0%,4%{border-color:#ccc;box-shadow:none;opacity:1}14%{border-color:#4caf50;box-shadow:0 0 0 3px #4caf5059}80%{border-color:#4caf50;box-shadow:0 0 0 3px #4caf5059;opacity:1}88%{opacity:.5}94%,to{opacity:0;border-color:#ccc;box-shadow:none}}@keyframes ps-cursor{0%{left:16px;top:130px;opacity:0}4%{left:16px;top:130px;opacity:1}10%{left:18px;top:134px}13%{left:18px;top:130px}42%{left:252px;top:105px}46%{left:252px;top:110px}49%{left:252px;top:105px}76%{left:252px;top:105px;opacity:1}84%{opacity:0}to{left:16px;top:130px;opacity:0}}@keyframes ps-ripple-sheep{0%,10%{opacity:0;transform:scale(.5)}13%{opacity:1;transform:scale(1)}24%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes ps-ripple-arrow{0%,46%{opacity:0;transform:scale(.5)}49%{opacity:1;transform:scale(1)}62%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes ps-placed{0%,50%{opacity:0;transform:scale(.7)}56%{opacity:1;transform:scale(1.1)}60%{transform:scale(1)}82%{opacity:1}90%,to{opacity:0}}@keyframes ps-persist{0%{opacity:0}4%{opacity:1}82%{opacity:1}90%,to{opacity:0}}@keyframes ps-check{0%,62%{opacity:0;transform:scale(.3)}68%{opacity:1;transform:scale(1.1)}72%{transform:scale(1)}82%{opacity:1}90%,to{opacity:0;transform:scale(1)}}.demo-trace-path .demo-pattern-accept,.demo-trace-path .demo-pattern-reject{left:50%;top:10px;transform:translate(-50%);display:flex;align-items:center;gap:6px;background:#fff;padding:6px 14px;border-radius:10px;box-shadow:0 2px 8px #0000001f;white-space:nowrap}.demo-pattern-label{font-size:12px;font-weight:700;color:#666;font-family:Nunito,sans-serif}.demo-pattern-arrow{font-size:14px;color:#888}.demo-trace-path .demo-pattern-accept{animation:tp-pattern-accept 12s ease infinite}.demo-trace-path .demo-pattern-reject{animation:tp-pattern-reject 12s ease infinite}.demo-trace-path .demo-fence-a{left:48px;top:100px;animation:tp-scene 12s ease infinite}.demo-trace-path .demo-fence-b{left:185px;top:100px;animation:tp-scene 12s ease infinite}.demo-trace-path .demo-fence-c{left:322px;top:104px;animation:tp-scene 12s ease infinite}.demo-trace-path .demo-start-arrow{left:32px;top:116px;animation:tp-scene 12s ease infinite}.demo-trace-path .demo-arrow-1{left:96px;top:110px;width:92px;height:20px;animation:tp-scene 12s ease infinite}.demo-trace-path .demo-arrow-2{left:233px;top:110px;width:92px;height:20px;animation:tp-scene 12s ease infinite}.demo-trace-path .demo-sheep-label-1{left:126px;top:82px;animation:tp-scene 12s ease infinite}.demo-trace-path .demo-sheep-label-2{left:263px;top:82px;animation:tp-scene 12s ease infinite}.demo-trace-path .demo-accept-btn{left:70px;top:210px;padding:7px 14px;background:#4caf50;color:#fff;border-radius:10px;font-size:12px;font-weight:700;font-family:Nunito,sans-serif;animation:tp-accept-btn 12s ease infinite;white-space:nowrap}.demo-trace-path .demo-reject-btn{left:225px;top:210px;padding:7px 14px;background:#f44336;color:#fff;border-radius:10px;font-size:12px;font-weight:700;font-family:Nunito,sans-serif;animation:tp-reject-btn 12s ease infinite;white-space:nowrap}.demo-trace-path .demo-trace-accept{left:58px;top:72px;opacity:0;animation:tp-trace-accept 12s ease infinite}.demo-trace-path .demo-glow-a1{left:58px;top:110px}.demo-trace-path .demo-glow-b1{left:195px;top:110px}.demo-trace-path .demo-glow-c1{left:332px;top:110px}.demo-trace-path .demo-glow-a1 .demo-ripple{animation:tp-glow-a1 12s ease infinite}.demo-trace-path .demo-glow-b1 .demo-ripple{animation:tp-glow-b1 12s ease infinite}.demo-trace-path .demo-glow-c1 .demo-ripple{animation:tp-glow-c1 12s ease infinite}.demo-trace-path .demo-trace-reject{left:58px;top:72px;opacity:0;animation:tp-trace-reject 12s ease infinite}.demo-trace-path .demo-stuck-x{left:60px;top:68px;font-size:28px;font-weight:900;color:#f44336;opacity:0;animation:tp-stuck 12s ease infinite}.demo-trace-path .demo-check-1{left:200px;top:170px;animation:tp-check-1 12s ease infinite}.demo-trace-path .demo-check-2{left:200px;top:170px;animation:tp-check-2 12s ease infinite}.demo-trace-path .demo-cursor{left:58px;top:120px;animation:tp-cursor 12s ease infinite}@keyframes tp-scene{0%{opacity:0}3%{opacity:1}92%{opacity:1}96%,to{opacity:0}}@keyframes tp-pattern-accept{0%{opacity:0}3%{opacity:1}42%{opacity:1}46%{opacity:0}to{opacity:0}}@keyframes tp-pattern-reject{0%,46%{opacity:0}50%{opacity:1}90%{opacity:1}94%{opacity:0}to{opacity:0}}@keyframes tp-accept-btn{0%{opacity:0}3%{opacity:1}42%{opacity:1}46%{opacity:.4}90%{opacity:.4}96%,to{opacity:0}}@keyframes tp-reject-btn{0%{opacity:0}3%{opacity:.4}42%{opacity:.4}46%{opacity:1}90%{opacity:1}96%,to{opacity:0}}@keyframes tp-trace-accept{0%,5%{left:58px;top:72px;opacity:0}7%{left:58px;top:72px;opacity:1}16%{left:195px;top:64px;opacity:1}18%{left:195px;top:72px}27%{left:332px;top:64px;opacity:1}29%{left:332px;top:72px;opacity:1}33%{opacity:0}to{opacity:0}}@keyframes tp-glow-a1{0%,5%{opacity:0;transform:scale(.5)}7%{opacity:1;transform:scale(1)}13%{opacity:0;transform:scale(1.6)}to{opacity:0}}@keyframes tp-glow-b1{0%,16%{opacity:0;transform:scale(.5)}18%{opacity:1;transform:scale(1)}24%{opacity:0;transform:scale(1.6)}to{opacity:0}}@keyframes tp-glow-c1{0%,27%{opacity:0;transform:scale(.5)}29%{opacity:1;transform:scale(1)}35%{opacity:0;transform:scale(1.6)}to{opacity:0}}@keyframes tp-cursor{0%{left:58px;top:120px;opacity:0}5%{left:58px;top:120px;opacity:1}16%{left:195px;top:120px}27%{left:332px;top:120px}33%{left:110px;top:224px}35%{left:110px;top:230px}37%{left:110px;top:224px}42%{left:110px;top:224px;opacity:1}44%{opacity:0}50%{left:58px;top:120px;opacity:0}52%{left:58px;top:120px;opacity:1}64%{left:58px;top:120px}66%{left:68px;top:120px}68%{left:48px;top:120px}70%{left:58px;top:120px}76%{left:260px;top:224px}78%{left:260px;top:230px}80%{left:260px;top:224px}86%{left:260px;top:224px;opacity:1}88%{opacity:0}to{left:58px;top:120px;opacity:0}}@keyframes tp-trace-reject{0%,52%{left:58px;top:72px;opacity:0}54%{left:58px;top:72px;opacity:1}60%{left:78px;top:68px}62%{left:48px;top:76px}64%{left:58px;top:72px;opacity:1}74%{left:58px;top:72px;opacity:1}78%{opacity:0}to{opacity:0}}@keyframes tp-stuck{0%,63%{opacity:0;transform:scale(.3)}66%{opacity:1;transform:scale(1.2)}68%{transform:scale(1)}78%{opacity:1}82%{opacity:0}to{opacity:0}}@keyframes tp-check-1{0%,36%{opacity:0;transform:scale(.3)}39%{opacity:1;transform:scale(1.1)}41%{transform:scale(1)}44%{opacity:1}46%{opacity:0}to{opacity:0}}@keyframes tp-check-2{0%,80%{opacity:0;transform:scale(.3)}83%{opacity:1;transform:scale(1.1)}85%{transform:scale(1)}90%{opacity:1}94%{opacity:0}to{opacity:0}}.demo-click-edge .demo-fence-a{left:55px;top:72px}.demo-click-edge .demo-fence-b{left:295px;top:72px}.demo-click-edge .demo-arrow{left:110px;top:84px;width:190px;height:24px;animation:ce-persist 5.5s ease infinite}.demo-click-edge .demo-glow-arrow{left:195px;top:84px}.demo-click-edge .demo-glow-arrow .demo-ripple{animation:ce-ripple-drop 5.5s ease infinite}.demo-click-edge .demo-palette-1{left:140px;top:195px;border:2px solid #ccc;border-radius:10px;padding:4px;background:#fafafa;animation:ce-palette-1 5.5s ease infinite}.demo-click-edge .demo-palette-2{left:210px;top:195px;border:2px solid #ccc;border-radius:10px;padding:4px;background:#fafafa;animation:ce-persist 5.5s ease infinite}.demo-click-edge .demo-sheep-dragging{left:150px;top:200px;opacity:0;animation:ce-drag-sheep 5.5s ease infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));z-index:5}.demo-click-edge .demo-sheep-placed{left:185px;top:52px;opacity:0;animation:ce-placed 5.5s ease infinite}.demo-click-edge .demo-check{left:190px;top:140px;animation:ce-check 5.5s ease infinite}.demo-click-edge .demo-cursor{left:200px;top:100px;animation:ce-cursor 5.5s ease infinite;z-index:6}@keyframes ce-persist{0%{opacity:0}4%{opacity:1}86%{opacity:1}92%,to{opacity:0}}@keyframes ce-palette-1{0%{opacity:0}4%{opacity:1}24%{opacity:1}28%{opacity:.3}86%{opacity:.3}92%,to{opacity:0}}@keyframes ce-cursor{0%{left:200px;top:100px;opacity:0}4%{left:200px;top:100px;opacity:1}18%{left:155px;top:210px}22%{left:155px;top:214px}24%{left:155px;top:210px}36%{left:165px;top:170px}48%{left:185px;top:115px}56%{left:195px;top:80px}60%{left:200px;top:72px}70%{left:230px;top:60px;opacity:1}80%{opacity:0}to{left:200px;top:100px;opacity:0}}@keyframes ce-drag-sheep{0%,24%{left:150px;top:200px;opacity:0;transform:scale(1)}26%{left:150px;top:200px;opacity:1;transform:scale(1.1)}36%{left:160px;top:160px;opacity:1;transform:scale(1.1)}48%{left:180px;top:105px;transform:scale(1.1)}56%{left:190px;top:70px;transform:scale(1.1)}60%{left:185px;top:52px;opacity:1;transform:scale(1.05)}62%{opacity:0;transform:scale(1)}to{opacity:0}}@keyframes ce-ripple-drop{0%,58%{opacity:0;transform:scale(.5)}62%{opacity:1;transform:scale(1)}72%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes ce-placed{0%,59%{opacity:0;transform:scale(.7)}64%{opacity:1;transform:scale(1.1)}68%{transform:scale(1)}86%{opacity:1}92%,to{opacity:0}}@keyframes ce-check{0%,66%{opacity:0;transform:scale(.3)}72%{opacity:1;transform:scale(1.1)}76%{transform:scale(1)}86%{opacity:1}92%,to{opacity:0}}.demo-drag-single .demo-target-pattern{position:absolute;left:50%;top:10px;transform:translate(-50%);display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:5px 16px;box-shadow:0 1px 4px #0000001f;font-size:13px;font-weight:600;color:#555;animation:ds-persist 6.5s ease infinite}.demo-drag-single .demo-fence-a{left:80px;top:90px;animation:ds-persist 6.5s ease infinite}.demo-drag-single .demo-fence-b{left:290px;top:90px;animation:ds-persist 6.5s ease infinite}.demo-drag-single .demo-start-arrow{left:58px;top:106px;animation:ds-persist 6.5s ease infinite}.demo-drag-single .demo-arrow{left:132px;top:100px;width:160px;height:24px;animation:ds-persist 6.5s ease infinite}.demo-drag-single .demo-pal-1{left:150px;top:200px;border:2px solid #ccc;border-radius:10px;padding:4px;background:#fafafa;animation:ds-pal1 6.5s ease infinite}.demo-drag-single .demo-pal-2{left:230px;top:200px;border:2px solid #ccc;border-radius:10px;padding:4px;background:#fafafa;animation:ds-persist 6.5s ease infinite}.demo-drag-single .demo-drag-1{left:160px;top:205px;opacity:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));z-index:5;animation:ds-drag1 6.5s ease infinite}.demo-drag-single .demo-placed-1{left:195px;top:74px;opacity:0;animation:ds-placed1 6.5s ease infinite}.demo-drag-single .demo-glow-1{left:208px;top:100px}.demo-drag-single .demo-glow-1 .demo-ripple{animation:ds-ripple1 6.5s ease infinite}.demo-drag-single .demo-match-tick{position:absolute;left:50%;top:155px;transform:translate(-50%);background:#43a047;color:#fff;font-weight:700;padding:6px 18px;border-radius:20px;font-size:15px;box-shadow:0 2px 8px #43a04766;white-space:nowrap;animation:ds-match-tick 6.5s ease infinite}.demo-drag-single .demo-cursor{left:210px;top:140px;z-index:6;animation:ds-cursor 6.5s ease infinite}@keyframes ds-persist{0%{opacity:0}4%{opacity:1}88%{opacity:1}94%,to{opacity:0}}@keyframes ds-pal1{0%{opacity:0}4%{opacity:1}20%{opacity:1}24%{opacity:.3}88%{opacity:.3}94%,to{opacity:0}}@keyframes ds-cursor{0%{left:210px;top:140px;opacity:0}5%{left:210px;top:140px;opacity:1}16%{left:168px;top:218px}20%{left:168px;top:222px}22%{left:168px;top:218px}32%{left:190px;top:160px}42%{left:210px;top:104px}46%{left:215px;top:92px}52%{left:235px;top:80px;opacity:1}60%{opacity:0}to{left:210px;top:140px;opacity:0}}@keyframes ds-drag1{0%,21%{left:160px;top:205px;opacity:0;transform:scale(1)}23%{left:160px;top:205px;opacity:1;transform:scale(1.12)}32%{left:183px;top:148px;transform:scale(1.12)}42%{left:200px;top:90px;transform:scale(1.1)}46%{left:195px;top:74px;opacity:1;transform:scale(1.05)}48%{opacity:0;transform:scale(1)}to{opacity:0}}@keyframes ds-placed1{0%,46%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}54%{transform:scale(1)}88%{opacity:1}94%,to{opacity:0}}@keyframes ds-ripple1{0%,44%{opacity:0;transform:scale(.5)}48%{opacity:1;transform:scale(1)}56%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes ds-match-tick{0%,56%{opacity:0;transform:translate(-50%) scale(.4)}62%{opacity:1;transform:translate(-50%) scale(1.15)}66%{transform:translate(-50%) scale(1)}88%{opacity:1}94%,to{opacity:0;transform:translate(-50%) scale(1)}}.demo-drag-match .demo-target-pattern{position:absolute;left:50%;top:8px;transform:translate(-50%);display:flex;align-items:center;gap:6px;background:#fff;border-radius:10px;padding:4px 14px;box-shadow:0 1px 4px #0000001f;font-size:13px;font-weight:600;color:#555;animation:dm-persist 9s ease infinite}.demo-target-label{color:#888;font-size:12px}.demo-target-arrow{color:#999;font-size:16px}.demo-drag-match .demo-fence-a{left:35px;top:88px;animation:dm-persist 9s ease infinite}.demo-drag-match .demo-fence-b{left:180px;top:88px;animation:dm-persist 9s ease infinite}.demo-drag-match .demo-fence-c{left:325px;top:90px;animation:dm-persist 9s ease infinite}.demo-drag-match .demo-start-arrow{left:18px;top:104px;animation:dm-persist 9s ease infinite}.demo-drag-match .demo-arrow-1{left:82px;top:98px;width:90px;height:20px;animation:dm-persist 9s ease infinite}.demo-drag-match .demo-arrow-2{left:228px;top:98px;width:89px;height:20px;animation:dm-persist 9s ease infinite}.demo-drag-match .demo-pal-1{left:140px;top:215px;border:2px solid #ccc;border-radius:10px;padding:4px;background:#fafafa;animation:dm-pal1 9s ease infinite}.demo-drag-match .demo-pal-2{left:225px;top:215px;border:2px solid #ccc;border-radius:10px;padding:4px;background:#fafafa;animation:dm-pal2 9s ease infinite}.demo-drag-match .demo-drag-1{left:150px;top:220px;opacity:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));z-index:5;animation:dm-drag1 9s ease infinite}.demo-drag-match .demo-placed-1{left:118px;top:76px;opacity:0;animation:dm-placed1 9s ease infinite}.demo-drag-match .demo-drag-2{left:235px;top:220px;opacity:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));z-index:5;animation:dm-drag2 9s ease infinite}.demo-drag-match .demo-placed-2{left:264px;top:76px;opacity:0;animation:dm-placed2 9s ease infinite}.demo-drag-match .demo-glow-1{left:120px;top:96px}.demo-drag-match .demo-glow-1 .demo-ripple{animation:dm-ripple1 9s ease infinite}.demo-drag-match .demo-glow-2{left:266px;top:96px}.demo-drag-match .demo-glow-2 .demo-ripple{animation:dm-ripple2 9s ease infinite}.demo-drag-match .demo-match-tick{position:absolute;left:50%;top:155px;transform:translate(-50%);background:#43a047;color:#fff;font-weight:700;padding:6px 18px;border-radius:20px;font-size:15px;box-shadow:0 2px 8px #43a04766;white-space:nowrap;animation:dm-match-tick 9s ease infinite}.demo-drag-match .demo-cursor{left:210px;top:150px;z-index:6;animation:dm-cursor 9s ease infinite}@keyframes dm-persist{0%{opacity:0}3%{opacity:1}88%{opacity:1}94%,to{opacity:0}}@keyframes dm-pal1{0%{opacity:0}3%{opacity:1}16%{opacity:1}20%{opacity:.3}88%{opacity:.3}94%,to{opacity:0}}@keyframes dm-pal2{0%{opacity:0}3%{opacity:1}50%{opacity:1}54%{opacity:.3}88%{opacity:.3}94%,to{opacity:0}}@keyframes dm-cursor{0%{left:210px;top:150px;opacity:0}4%{left:210px;top:150px;opacity:1}14%{left:158px;top:232px}17%{left:158px;top:236px}18%{left:158px;top:232px}24%{left:145px;top:180px}30%{left:135px;top:120px}34%{left:130px;top:98px}37%{left:145px;top:85px;opacity:1}44%{left:240px;top:232px}48%{left:240px;top:236px}50%{left:240px;top:232px}56%{left:260px;top:180px}62%{left:272px;top:120px}66%{left:276px;top:98px}70%{left:290px;top:85px;opacity:1}78%{left:310px;top:75px;opacity:0}to{left:210px;top:150px;opacity:0}}@keyframes dm-drag1{0%,17%{left:150px;top:220px;opacity:0;transform:scale(1)}19%{left:150px;top:220px;opacity:1;transform:scale(1.12)}24%{left:138px;top:168px;opacity:1;transform:scale(1.12)}30%{left:126px;top:108px;transform:scale(1.12)}34%{left:118px;top:76px;opacity:1;transform:scale(1.05)}36%{opacity:0;transform:scale(1)}to{opacity:0}}@keyframes dm-placed1{0%,34%{opacity:0;transform:scale(.6)}37%{opacity:1;transform:scale(1.15)}40%{transform:scale(1)}88%{opacity:1}94%,to{opacity:0}}@keyframes dm-drag2{0%,49%{left:235px;top:220px;opacity:0;transform:scale(1)}51%{left:235px;top:220px;opacity:1;transform:scale(1.12)}56%{left:252px;top:168px;opacity:1;transform:scale(1.12)}62%{left:264px;top:108px;transform:scale(1.12)}66%{left:268px;top:76px;opacity:1;transform:scale(1.05)}68%{opacity:0;transform:scale(1)}to{opacity:0}}@keyframes dm-placed2{0%,66%{opacity:0;transform:scale(.6)}69%{opacity:1;transform:scale(1.15)}72%{transform:scale(1)}88%{opacity:1}94%,to{opacity:0}}@keyframes dm-ripple1{0%,33%{opacity:0;transform:scale(.5)}36%{opacity:1;transform:scale(1)}42%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes dm-ripple2{0%,65%{opacity:0;transform:scale(.5)}68%{opacity:1;transform:scale(1)}74%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes dm-match-tick{0%,72%{opacity:0;transform:translate(-50%) scale(.4)}76%{opacity:1;transform:translate(-50%) scale(1.15)}80%{transform:translate(-50%) scale(1)}88%{opacity:1}94%,to{opacity:0;transform:translate(-50%) scale(1)}}.demo-target-pattern{display:flex;align-items:center;gap:5px;background:#fff;border-radius:8px;padding:3px 10px;box-shadow:0 1px 3px #0000001a;font-size:12px}.demo-target-label{color:#888;font-size:11px}.demo-target-arrow{color:#999;font-size:14px}.demo-drag-branch .demo-target-1{left:70px;top:6px;animation:db-persist 11s ease infinite}.demo-drag-branch .demo-target-2{left:260px;top:6px;animation:db-persist 11s ease infinite}.demo-drag-branch .demo-fence-start{left:30px;top:110px;animation:db-persist 11s ease infinite}.demo-drag-branch .demo-fence-top{left:182px;top:38px;animation:db-persist 11s ease infinite}.demo-drag-branch .demo-fence-bot{left:182px;top:182px;animation:db-persist 11s ease infinite}.demo-drag-branch .demo-fence-end{left:335px;top:110px;animation:db-persist 11s ease infinite}.demo-drag-branch .demo-start-arrow{left:14px;top:126px;animation:db-persist 11s ease infinite}.demo-drag-branch .demo-arrow-st{left:74px;top:60px;width:108px;height:72px;animation:db-persist 11s ease infinite}.demo-drag-branch .demo-arrow-sb{left:74px;top:132px;width:108px;height:72px;animation:db-persist 11s ease infinite}.demo-drag-branch .demo-arrow-te{left:226px;top:60px;width:109px;height:68px;animation:db-persist 11s ease infinite}.demo-drag-branch .demo-arrow-be{left:226px;top:128px;width:109px;height:76px;animation:db-persist 11s ease infinite}.demo-drag-branch .demo-pal-1{left:100px;top:235px;border:2px solid #ccc;border-radius:8px;padding:3px;background:#fafafa;animation:db-pal1 11s ease infinite}.demo-drag-branch .demo-pal-2{left:155px;top:235px;border:2px solid #ccc;border-radius:8px;padding:3px;background:#fafafa;animation:db-pal2 11s ease infinite}.demo-drag-branch .demo-pal-3{left:210px;top:235px;border:2px solid #ccc;border-radius:8px;padding:3px;background:#fafafa;animation:db-pal3 11s ease infinite}.demo-drag-branch .demo-pal-4{left:265px;top:235px;border:2px solid #ccc;border-radius:8px;padding:3px;background:#fafafa;animation:db-pal4 11s ease infinite}.demo-drag-branch .demo-drag-1{left:110px;top:240px;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));z-index:5;animation:db-drag1 11s ease infinite}.demo-drag-branch .demo-placed-1{left:113px;top:82px;opacity:0;animation:db-placed1 11s ease infinite}.demo-drag-branch .demo-drag-2{left:220px;top:240px;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));z-index:5;animation:db-drag2 11s ease infinite}.demo-drag-branch .demo-placed-2{left:268px;top:72px;opacity:0;animation:db-placed2 11s ease infinite}.demo-drag-branch .demo-drag-3{left:165px;top:240px;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));z-index:5;animation:db-drag3 11s ease infinite}.demo-drag-branch .demo-placed-3{left:113px;top:150px;opacity:0;animation:db-placed3 11s ease infinite}.demo-drag-branch .demo-drag-4{left:275px;top:240px;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));z-index:5;animation:db-drag4 11s ease infinite}.demo-drag-branch .demo-placed-4{left:268px;top:156px;opacity:0;animation:db-placed4 11s ease infinite}.demo-drag-branch .demo-glow-1{left:120px;top:90px}.demo-drag-branch .demo-glow-1 .demo-ripple{animation:db-rip1 11s ease infinite}.demo-drag-branch .demo-glow-2{left:275px;top:80px}.demo-drag-branch .demo-glow-2 .demo-ripple{animation:db-rip2 11s ease infinite}.demo-drag-branch .demo-glow-3{left:120px;top:158px}.demo-drag-branch .demo-glow-3 .demo-ripple{animation:db-rip3 11s ease infinite}.demo-drag-branch .demo-glow-4{left:275px;top:164px}.demo-drag-branch .demo-glow-4 .demo-ripple{animation:db-rip4 11s ease infinite}.demo-drag-branch .demo-match-tick{position:absolute;left:50%;top:130px;transform:translate(-50%);background:#43a047;color:#fff;font-weight:700;padding:6px 18px;border-radius:20px;font-size:15px;box-shadow:0 2px 8px #43a04766;white-space:nowrap;animation:db-match-tick 11s ease infinite}.demo-drag-branch .demo-cursor{left:200px;top:150px;z-index:6;animation:db-cursor 11s ease infinite}@keyframes db-persist{0%{opacity:0}3%{opacity:1}90%{opacity:1}96%,to{opacity:0}}@keyframes db-pal1{0%{opacity:0}3%{opacity:1}14%{opacity:1}18%{opacity:.3}90%{opacity:.3}96%,to{opacity:0}}@keyframes db-pal2{0%{opacity:0}3%{opacity:1}54%{opacity:1}58%{opacity:.3}90%{opacity:.3}96%,to{opacity:0}}@keyframes db-pal3{0%{opacity:0}3%{opacity:1}34%{opacity:1}38%{opacity:.3}90%{opacity:.3}96%,to{opacity:0}}@keyframes db-pal4{0%{opacity:0}3%{opacity:1}74%{opacity:1}78%{opacity:.3}90%{opacity:.3}96%,to{opacity:0}}@keyframes db-cursor{0%{left:200px;top:150px;opacity:0}4%{left:200px;top:150px;opacity:1}10%{left:118px;top:252px}13%{left:118px;top:256px}14%{left:118px;top:252px}20%{left:125px;top:160px}24%{left:122px;top:100px}30%{left:228px;top:252px}33%{left:228px;top:256px}34%{left:228px;top:252px}40%{left:270px;top:160px}44%{left:278px;top:90px}50%{left:173px;top:252px}53%{left:173px;top:256px}54%{left:173px;top:252px}60%{left:125px;top:200px}64%{left:122px;top:166px}70%{left:283px;top:252px}73%{left:283px;top:256px}74%{left:283px;top:252px}80%{left:270px;top:210px}84%{left:278px;top:175px}88%{left:310px;top:160px;opacity:1}92%{opacity:0}to{left:200px;top:150px;opacity:0}}@keyframes db-drag1{0%,13%{left:110px;top:240px;opacity:0;transform:scale(1)}15%{left:110px;top:240px;opacity:1;transform:scale(1.1)}20%{left:118px;top:148px;transform:scale(1.1)}24%{left:113px;top:82px;opacity:1;transform:scale(1.05)}26%{opacity:0;transform:scale(1)}to{opacity:0}}@keyframes db-placed1{0%,24%{opacity:0;transform:scale(.6)}27%{opacity:1;transform:scale(1.15)}30%{transform:scale(1)}90%{opacity:1}96%,to{opacity:0}}@keyframes db-rip1{0%,23%{opacity:0;transform:scale(.5)}26%{opacity:1;transform:scale(1)}32%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes db-drag2{0%,33%{left:220px;top:240px;opacity:0;transform:scale(1)}35%{left:220px;top:240px;opacity:1;transform:scale(1.1)}40%{left:262px;top:148px;transform:scale(1.1)}44%{left:268px;top:72px;opacity:1;transform:scale(1.05)}46%{opacity:0;transform:scale(1)}to{opacity:0}}@keyframes db-placed2{0%,44%{opacity:0;transform:scale(.6)}47%{opacity:1;transform:scale(1.15)}50%{transform:scale(1)}90%{opacity:1}96%,to{opacity:0}}@keyframes db-rip2{0%,43%{opacity:0;transform:scale(.5)}46%{opacity:1;transform:scale(1)}52%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes db-drag3{0%,53%{left:165px;top:240px;opacity:0;transform:scale(1)}55%{left:165px;top:240px;opacity:1;transform:scale(1.1)}60%{left:118px;top:188px;transform:scale(1.1)}64%{left:113px;top:150px;opacity:1;transform:scale(1.05)}66%{opacity:0;transform:scale(1)}to{opacity:0}}@keyframes db-placed3{0%,64%{opacity:0;transform:scale(.6)}67%{opacity:1;transform:scale(1.15)}70%{transform:scale(1)}90%{opacity:1}96%,to{opacity:0}}@keyframes db-rip3{0%,63%{opacity:0;transform:scale(.5)}66%{opacity:1;transform:scale(1)}72%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes db-drag4{0%,73%{left:275px;top:240px;opacity:0;transform:scale(1)}75%{left:275px;top:240px;opacity:1;transform:scale(1.1)}80%{left:262px;top:200px;transform:scale(1.1)}84%{left:268px;top:156px;opacity:1;transform:scale(1.05)}86%{opacity:0;transform:scale(1)}to{opacity:0}}@keyframes db-placed4{0%,84%{opacity:0;transform:scale(.6)}86%{opacity:1;transform:scale(1.15)}88%{transform:scale(1)}90%{opacity:1}96%,to{opacity:0}}@keyframes db-rip4{0%,83%{opacity:0;transform:scale(.5)}85%{opacity:1;transform:scale(1)}89%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes db-match-tick{0%,86%{opacity:0;transform:translate(-50%) scale(.4)}88%{opacity:1;transform:translate(-50%) scale(1.15)}90%{transform:translate(-50%) scale(1)}94%{opacity:1}96%,to{opacity:0;transform:translate(-50%) scale(1)}}.demo-drag-loop .demo-target-1{left:50px;top:6px;animation:dl-persist 10s ease infinite}.demo-drag-loop .demo-target-2{left:215px;top:6px;animation:dl-persist 10s ease infinite}.demo-drag-loop .demo-fence-a{left:28px;top:105px;animation:dl-persist 10s ease infinite}.demo-drag-loop .demo-fence-b{left:185px;top:105px;animation:dl-persist 10s ease infinite}.demo-drag-loop .demo-fence-c{left:340px;top:105px;animation:dl-persist 10s ease infinite}.demo-drag-loop .demo-start-arrow{left:10px;top:122px;animation:dl-persist 10s ease infinite}.demo-drag-loop .demo-arrow-1{left:78px;top:118px;width:108px;height:20px;animation:dl-persist 10s ease infinite}.demo-drag-loop .demo-loop-arrow{left:177px;top:52px;width:60px;height:50px;animation:dl-persist 10s ease infinite}.demo-drag-loop .demo-arrow-2{left:234px;top:118px;width:108px;height:20px;animation:dl-persist 10s ease infinite}.demo-drag-loop .demo-pal-1{left:115px;top:222px;border:2px solid #ccc;border-radius:8px;padding:3px;background:#fafafa;animation:dl-pal1 10s ease infinite}.demo-drag-loop .demo-pal-2{left:185px;top:222px;border:2px solid #ccc;border-radius:8px;padding:3px;background:#fafafa;animation:dl-pal2 10s ease infinite}.demo-drag-loop .demo-pal-3{left:255px;top:222px;border:2px solid #ccc;border-radius:8px;padding:3px;background:#fafafa;animation:dl-pal3 10s ease infinite}.demo-drag-loop .demo-drag-1{left:125px;top:227px;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));z-index:5;animation:dl-drag1 10s ease infinite}.demo-drag-loop .demo-placed-1{left:118px;top:96px;opacity:0;animation:dl-placed1 10s ease infinite}.demo-drag-loop .demo-drag-2{left:195px;top:227px;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));z-index:5;animation:dl-drag2 10s ease infinite}.demo-drag-loop .demo-placed-2{left:184px;top:54px;opacity:0;animation:dl-placed2 10s ease infinite}.demo-drag-loop .demo-drag-3{left:265px;top:227px;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));z-index:5;animation:dl-drag3 10s ease infinite}.demo-drag-loop .demo-placed-3{left:274px;top:96px;opacity:0;animation:dl-placed3 10s ease infinite}.demo-drag-loop .demo-glow-1{left:125px;top:118px}.demo-drag-loop .demo-glow-1 .demo-ripple{animation:dl-rip1 10s ease infinite}.demo-drag-loop .demo-glow-2{left:194px;top:62px}.demo-drag-loop .demo-glow-2 .demo-ripple{animation:dl-rip2 10s ease infinite}.demo-drag-loop .demo-glow-3{left:282px;top:118px}.demo-drag-loop .demo-glow-3 .demo-ripple{animation:dl-rip3 10s ease infinite}.demo-drag-loop .demo-loop-counter{position:absolute;left:244px;top:46px;display:flex;align-items:center;justify-content:center;width:36px;height:28px}.demo-drag-loop .demo-loop-counter .lc{position:absolute;font-weight:800;font-size:15px;font-family:Nunito,sans-serif;color:#fff;background:#ff8f00;padding:2px 8px;border-radius:10px;box-shadow:0 1px 4px #0003;white-space:nowrap;opacity:0}.demo-drag-loop .lc-0{animation:dl-lc0 10s ease infinite}.demo-drag-loop .lc-1{animation:dl-lc1 10s ease infinite}.demo-drag-loop .lc-2{animation:dl-lc2 10s ease infinite}.demo-drag-loop .lc-dots{animation:dl-lc-dots 10s ease infinite}.demo-drag-loop .demo-match-tick{position:absolute;left:50%;top:170px;transform:translate(-50%);background:#43a047;color:#fff;font-weight:700;padding:6px 18px;border-radius:20px;font-size:15px;box-shadow:0 2px 8px #43a04766;white-space:nowrap;animation:dl-match-tick 10s ease infinite}.demo-drag-loop .demo-cursor{left:210px;top:160px;z-index:6;animation:dl-cursor 10s ease infinite}@keyframes dl-persist{0%{opacity:0}3%{opacity:1}90%{opacity:1}96%,to{opacity:0}}@keyframes dl-pal1{0%{opacity:0}3%{opacity:1}14%{opacity:1}18%{opacity:.3}90%{opacity:.3}96%,to{opacity:0}}@keyframes dl-pal2{0%{opacity:0}3%{opacity:1}38%{opacity:1}42%{opacity:.3}90%{opacity:.3}96%,to{opacity:0}}@keyframes dl-pal3{0%{opacity:0}3%{opacity:1}64%{opacity:1}68%{opacity:.3}90%{opacity:.3}96%,to{opacity:0}}@keyframes dl-cursor{0%{left:210px;top:160px;opacity:0}4%{left:210px;top:160px;opacity:1}11%{left:133px;top:238px}14%{left:133px;top:242px}15%{left:133px;top:238px}22%{left:130px;top:160px}27%{left:128px;top:110px}34%{left:203px;top:238px}37%{left:203px;top:242px}38%{left:203px;top:238px}45%{left:194px;top:140px}50%{left:197px;top:72px}58%{left:273px;top:238px}61%{left:273px;top:242px}62%{left:273px;top:238px}70%{left:280px;top:160px}76%{left:286px;top:110px}82%{left:320px;top:90px;opacity:1}86%{opacity:0}to{left:210px;top:160px;opacity:0}}@keyframes dl-drag1{0%,14%{left:125px;top:227px;opacity:0;transform:scale(1)}16%{left:125px;top:227px;opacity:1;transform:scale(1.1)}22%{left:123px;top:148px;transform:scale(1.1)}27%{left:118px;top:96px;opacity:1;transform:scale(1.05)}29%{opacity:0;transform:scale(1)}to{opacity:0}}@keyframes dl-placed1{0%,27%{opacity:0;transform:scale(.6)}29%{opacity:1;transform:scale(1.15)}32%{transform:scale(1)}90%{opacity:1}96%,to{opacity:0}}@keyframes dl-rip1{0%,26%{opacity:0;transform:scale(.5)}29%{opacity:1;transform:scale(1)}34%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes dl-drag2{0%,37%{left:195px;top:227px;opacity:0;transform:scale(1)}39%{left:195px;top:227px;opacity:1;transform:scale(1.1)}45%{left:189px;top:128px;transform:scale(1.1)}50%{left:184px;top:54px;opacity:1;transform:scale(1.05)}52%{opacity:0;transform:scale(1)}to{opacity:0}}@keyframes dl-placed2{0%,50%{opacity:0;transform:scale(.6)}52%{opacity:1;transform:scale(1.15)}55%{transform:scale(1)}90%{opacity:1}96%,to{opacity:0}}@keyframes dl-rip2{0%,49%{opacity:0;transform:scale(.5)}52%{opacity:1;transform:scale(1)}57%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes dl-lc0{0%,52%{opacity:0;transform:scale(.6)}54%{opacity:1;transform:scale(1.1)}56%{transform:scale(1)}58%{opacity:1}59%{opacity:0}to{opacity:0}}@keyframes dl-lc1{0%,59%{opacity:0;transform:scale(.6)}61%{opacity:1;transform:scale(1.1)}63%{transform:scale(1)}65%{opacity:1}66%{opacity:0}to{opacity:0}}@keyframes dl-lc2{0%,66%{opacity:0;transform:scale(.6)}68%{opacity:1;transform:scale(1.1)}70%{transform:scale(1)}72%{opacity:1}73%{opacity:0}to{opacity:0}}@keyframes dl-lc-dots{0%,73%{opacity:0;transform:scale(.6)}75%{opacity:1;transform:scale(1.1)}77%{transform:scale(1)}86%{opacity:1}90%{opacity:0}to{opacity:0}}@keyframes dl-drag3{0%,61%{left:265px;top:227px;opacity:0;transform:scale(1)}63%{left:265px;top:227px;opacity:1;transform:scale(1.1)}70%{left:276px;top:148px;transform:scale(1.1)}76%{left:274px;top:96px;opacity:1;transform:scale(1.05)}78%{opacity:0;transform:scale(1)}to{opacity:0}}@keyframes dl-placed3{0%,76%{opacity:0;transform:scale(.6)}78%{opacity:1;transform:scale(1.15)}80%{transform:scale(1)}90%{opacity:1}96%,to{opacity:0}}@keyframes dl-rip3{0%,75%{opacity:0;transform:scale(.5)}78%{opacity:1;transform:scale(1)}82%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes dl-match-tick{0%,80%{opacity:0;transform:translate(-50%) scale(.4)}84%{opacity:1;transform:translate(-50%) scale(1.15)}86%{transform:translate(-50%) scale(1)}90%{opacity:1}96%,to{opacity:0;transform:translate(-50%) scale(1)}}.demo-drag-crossing .demo-target-1{left:8px;top:5px;animation:dcr-persist 14s ease infinite}.demo-drag-crossing .demo-target-2{left:152px;top:5px;animation:dcr-persist 14s ease infinite}.demo-drag-crossing .demo-target-3{left:288px;top:5px;animation:dcr-persist 14s ease infinite}.demo-drag-crossing .demo-fence-start{left:20px;top:105px;animation:dcr-persist 14s ease infinite}.demo-drag-crossing .demo-fence-top{left:175px;top:38px;animation:dcr-persist 14s ease infinite}.demo-drag-crossing .demo-fence-bot{left:175px;top:168px;animation:dcr-persist 14s ease infinite}.demo-drag-crossing .demo-fence-end{left:332px;top:105px;animation:dcr-persist 14s ease infinite}.demo-drag-crossing .demo-start-arrow{left:8px;top:120px;animation:dcr-persist 14s ease infinite}.demo-drag-crossing .demo-arrow-st{left:66px;top:55px;width:109px;height:72px;animation:dcr-persist 14s ease infinite}.demo-drag-crossing .demo-arrow-sb{left:66px;top:128px;width:109px;height:72px;animation:dcr-persist 14s ease infinite}.demo-drag-crossing .demo-arrow-te{left:221px;top:58px;width:110px;height:70px;animation:dcr-persist 14s ease infinite}.demo-drag-crossing .demo-arrow-tb{left:193px;top:78px;width:20px;height:90px;animation:dcr-persist 14s ease infinite}.demo-drag-crossing .demo-arrow-be{left:221px;top:128px;width:110px;height:74px;animation:dcr-persist 14s ease infinite}.demo-drag-crossing .demo-pal-1{left:65px;top:236px;border:2px solid #ccc;border-radius:8px;padding:3px;background:#fafafa;animation:dcr-pal1 14s ease infinite}.demo-drag-crossing .demo-pal-2{left:112px;top:236px;border:2px solid #ccc;border-radius:8px;padding:3px;background:#fafafa;animation:dcr-pal2 14s ease infinite}.demo-drag-crossing .demo-pal-3{left:159px;top:236px;border:2px solid #ccc;border-radius:8px;padding:3px;background:#fafafa;animation:dcr-pal3 14s ease infinite}.demo-drag-crossing .demo-pal-4{left:206px;top:236px;border:2px solid #ccc;border-radius:8px;padding:3px;background:#fafafa;animation:dcr-pal4 14s ease infinite}.demo-drag-crossing .demo-pal-5{left:253px;top:236px;border:2px solid #ccc;border-radius:8px;padding:3px;background:#fafafa;animation:dcr-pal5 14s ease infinite}.demo-drag-crossing .demo-drag-1{left:81px;top:244px;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));z-index:5;animation:dcr-drag1 14s ease infinite}.demo-drag-crossing .demo-placed-1{left:106px;top:82px;opacity:0;animation:dcr-placed1 14s ease infinite}.demo-drag-crossing .demo-drag-2{left:128px;top:244px;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));z-index:5;animation:dcr-drag2 14s ease infinite}.demo-drag-crossing .demo-placed-2{left:266px;top:78px;opacity:0;animation:dcr-placed2 14s ease infinite}.demo-drag-crossing .demo-drag-3{left:175px;top:244px;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));z-index:5;animation:dcr-drag3 14s ease infinite}.demo-drag-crossing .demo-placed-3{left:106px;top:155px;opacity:0;animation:dcr-placed3 14s ease infinite}.demo-drag-crossing .demo-drag-4{left:222px;top:244px;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));z-index:5;animation:dcr-drag4 14s ease infinite}.demo-drag-crossing .demo-placed-4{left:197px;top:115px;opacity:0;animation:dcr-placed4 14s ease infinite}.demo-drag-crossing .demo-drag-5{left:269px;top:244px;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));z-index:5;animation:dcr-drag5 14s ease infinite}.demo-drag-crossing .demo-placed-5{left:266px;top:152px;opacity:0;animation:dcr-placed5 14s ease infinite}.demo-drag-crossing .demo-glow-1{left:106px;top:90px}.demo-drag-crossing .demo-glow-1 .demo-ripple{animation:dcr-rip1 14s ease infinite}.demo-drag-crossing .demo-glow-2{left:268px;top:85px}.demo-drag-crossing .demo-glow-2 .demo-ripple{animation:dcr-rip2 14s ease infinite}.demo-drag-crossing .demo-glow-3{left:106px;top:162px}.demo-drag-crossing .demo-glow-3 .demo-ripple{animation:dcr-rip3 14s ease infinite}.demo-drag-crossing .demo-glow-4{left:197px;top:122px}.demo-drag-crossing .demo-glow-4 .demo-ripple{animation:dcr-rip4 14s ease infinite}.demo-drag-crossing .demo-glow-5{left:268px;top:158px}.demo-drag-crossing .demo-glow-5 .demo-ripple{animation:dcr-rip5 14s ease infinite}.demo-drag-crossing .demo-match-tick{position:absolute;left:50%;top:128px;transform:translate(-50%);background:#43a047;color:#fff;font-weight:700;padding:6px 18px;border-radius:20px;font-size:15px;box-shadow:0 2px 8px #43a04766;white-space:nowrap;animation:dcr-match-tick 14s ease infinite}.demo-drag-crossing .demo-cursor{left:200px;top:150px;z-index:6;animation:dcr-cursor 14s ease infinite}@keyframes dcr-persist{0%{opacity:0}3%{opacity:1}90%{opacity:1}94%,to{opacity:0}}@keyframes dcr-pal1{0%{opacity:0}3%{opacity:1}5%{opacity:1}8%{opacity:.3}90%{opacity:.3}94%,to{opacity:0}}@keyframes dcr-pal2{0%{opacity:0}3%{opacity:1}19%{opacity:1}22%{opacity:.3}90%{opacity:.3}94%,to{opacity:0}}@keyframes dcr-pal3{0%{opacity:0}3%{opacity:1}34%{opacity:1}37%{opacity:.3}90%{opacity:.3}94%,to{opacity:0}}@keyframes dcr-pal4{0%{opacity:0}3%{opacity:1}50%{opacity:1}53%{opacity:.3}90%{opacity:.3}94%,to{opacity:0}}@keyframes dcr-pal5{0%{opacity:0}3%{opacity:1}66%{opacity:1}69%{opacity:.3}90%{opacity:.3}94%,to{opacity:0}}@keyframes dcr-cursor{0%{left:200px;top:150px;opacity:0}4%{left:200px;top:150px;opacity:1}5%{left:89px;top:252px}6%{left:89px;top:256px}7%{left:89px;top:252px}11%{left:101px;top:168px}16%{left:114px;top:90px}18%{left:136px;top:252px}19%{left:136px;top:256px}20%{left:136px;top:252px}26%{left:206px;top:166px}30%{left:270px;top:86px}33%{left:183px;top:252px}34%{left:183px;top:256px}35%{left:183px;top:252px}40%{left:145px;top:203px}45%{left:114px;top:163px}49%{left:230px;top:252px}50%{left:230px;top:256px}51%{left:230px;top:252px}56%{left:220px;top:186px}61%{left:205px;top:123px}65%{left:277px;top:252px}66%{left:277px;top:256px}67%{left:277px;top:252px}72%{left:274px;top:200px}77%{left:272px;top:160px}82%{left:330px;top:140px;opacity:1}86%{opacity:0}to{left:200px;top:150px;opacity:0}}@keyframes dcr-drag1{0%,4%{left:81px;top:244px;opacity:0;transform:scale(1)}5%{left:81px;top:244px;opacity:1;transform:scale(1.1)}11%{left:93px;top:163px;transform:scale(1.1)}16%{left:106px;top:82px;opacity:1;transform:scale(1.05)}18%{opacity:0;transform:scale(1)}to{opacity:0}}@keyframes dcr-placed1{0%,16%{opacity:0;transform:scale(.6)}18%{opacity:1;transform:scale(1.15)}20%{transform:scale(1)}90%{opacity:1}94%,to{opacity:0}}@keyframes dcr-rip1{0%,16%{opacity:0;transform:scale(.5)}18%{opacity:1;transform:scale(1)}24%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes dcr-drag2{0%,18%{left:128px;top:244px;opacity:0;transform:scale(1)}19%{left:128px;top:244px;opacity:1;transform:scale(1.1)}26%{left:200px;top:162px;transform:scale(1.1)}30%{left:266px;top:78px;opacity:1;transform:scale(1.05)}32%{opacity:0;transform:scale(1)}to{opacity:0}}@keyframes dcr-placed2{0%,30%{opacity:0;transform:scale(.6)}32%{opacity:1;transform:scale(1.15)}34%{transform:scale(1)}90%{opacity:1}94%,to{opacity:0}}@keyframes dcr-rip2{0%,30%{opacity:0;transform:scale(.5)}32%{opacity:1;transform:scale(1)}38%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes dcr-drag3{0%,33%{left:175px;top:244px;opacity:0;transform:scale(1)}34%{left:175px;top:244px;opacity:1;transform:scale(1.1)}40%{left:140px;top:200px;transform:scale(1.1)}45%{left:106px;top:155px;opacity:1;transform:scale(1.05)}47%{opacity:0;transform:scale(1)}to{opacity:0}}@keyframes dcr-placed3{0%,45%{opacity:0;transform:scale(.6)}47%{opacity:1;transform:scale(1.15)}49%{transform:scale(1)}90%{opacity:1}94%,to{opacity:0}}@keyframes dcr-rip3{0%,45%{opacity:0;transform:scale(.5)}47%{opacity:1;transform:scale(1)}53%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes dcr-drag4{0%,49%{left:222px;top:244px;opacity:0;transform:scale(1)}50%{left:222px;top:244px;opacity:1;transform:scale(1.1)}56%{left:213px;top:180px;transform:scale(1.1)}61%{left:197px;top:115px;opacity:1;transform:scale(1.05)}63%{opacity:0;transform:scale(1)}to{opacity:0}}@keyframes dcr-placed4{0%,61%{opacity:0;transform:scale(.6)}63%{opacity:1;transform:scale(1.15)}65%{transform:scale(1)}90%{opacity:1}94%,to{opacity:0}}@keyframes dcr-rip4{0%,61%{opacity:0;transform:scale(.5)}63%{opacity:1;transform:scale(1)}69%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes dcr-drag5{0%,65%{left:269px;top:244px;opacity:0;transform:scale(1)}66%{left:269px;top:244px;opacity:1;transform:scale(1.1)}72%{left:267px;top:198px;transform:scale(1.1)}77%{left:266px;top:152px;opacity:1;transform:scale(1.05)}79%{opacity:0;transform:scale(1)}to{opacity:0}}@keyframes dcr-placed5{0%,77%{opacity:0;transform:scale(.6)}79%{opacity:1;transform:scale(1.15)}81%{transform:scale(1)}90%{opacity:1}94%,to{opacity:0}}@keyframes dcr-rip5{0%,77%{opacity:0;transform:scale(.5)}79%{opacity:1;transform:scale(1)}85%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes dcr-match-tick{0%,82%{opacity:0;transform:translate(-50%) scale(.4)}84%{opacity:1;transform:translate(-50%) scale(1.15)}86%{transform:translate(-50%) scale(1)}91%{opacity:1}94%,to{opacity:0;transform:translate(-50%) scale(1)}}.demo-top-bar{display:flex;align-items:center;justify-content:center;padding:8px 14px;background:#ffffff8c;border-bottom:1px solid rgba(165,214,167,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.demo-test-ribbon{display:flex;align-items:center;gap:5px;background:#fff;border-radius:10px;padding:7px 16px;box-shadow:0 1px 4px #0000001f;font-size:14px;white-space:nowrap}.demo-test-label{color:#888;font-weight:600;font-size:13px;margin-right:6px}.demo-test-item{display:inline-flex;align-items:center;gap:3px}.demo-result{position:absolute;left:50%;transform:translate(-50%);font-weight:700;padding:6px 18px;border-radius:20px;font-size:15px;white-space:nowrap;box-shadow:0 2px 8px #0003}.demo-result-accept{background:#43a047;color:#fff}.demo-result-reject{background:#e53935;color:#fff}.demo-ar-basics .demo-fence-a{left:70px;top:100px;animation:abb-persist 6.5s ease infinite}.demo-ar-basics .demo-fence-b{left:310px;top:100px;animation:abb-persist 6.5s ease infinite}.demo-ar-basics .demo-start-arrow{left:48px;top:116px;animation:abb-persist 6.5s ease infinite}.demo-ar-basics .demo-arrow{left:122px;top:108px;width:180px;height:24px;animation:abb-persist 6.5s ease infinite}.demo-ar-basics .demo-sheep-label{left:200px;top:80px;animation:abb-persist 6.5s ease infinite}.demo-ar-basics .demo-hop{left:82px;top:105px;opacity:0;z-index:5;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));animation:abb-hop 6.5s ease infinite}.demo-ar-basics .demo-glow{left:320px;top:116px}.demo-ar-basics .demo-glow .demo-ripple{animation:abb-glow 6.5s ease infinite}.demo-ar-basics .demo-result{top:190px;animation:abb-result 6.5s ease infinite}@keyframes abb-persist{0%{opacity:0}5%{opacity:1}88%{opacity:1}94%,to{opacity:0}}@keyframes abb-hop{0%,14%{left:82px;top:105px;opacity:0;transform:scale(1)}18%{left:82px;top:105px;opacity:1;transform:scale(1.1)}30%{left:180px;top:60px;transform:scale(1.1)}42%{left:280px;top:75px;transform:scale(1.1)}48%{left:318px;top:100px;opacity:1;transform:scale(1)}54%{left:318px;top:105px;opacity:.4;transform:scale(.9)}60%,to{opacity:0}}@keyframes abb-glow{0%,46%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}58%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes abb-result{0%,54%{opacity:0;transform:translate(-50%) scale(.4)}60%{opacity:1;transform:translate(-50%) scale(1.15)}64%{transform:translate(-50%) scale(1)}88%{opacity:1}94%,to{opacity:0;transform:translate(-50%) scale(1)}}.demo-ar-reject .demo-fence-a{left:70px;top:100px;animation:arr-persist 6.5s ease infinite}.demo-ar-reject .demo-fence-b{left:310px;top:100px;animation:arr-persist 6.5s ease infinite}.demo-ar-reject .demo-start-arrow{left:48px;top:116px;animation:arr-persist 6.5s ease infinite}.demo-ar-reject .demo-arrow{left:122px;top:108px;width:180px;height:24px;animation:arr-persist 6.5s ease infinite}.demo-ar-reject .demo-sheep-label{left:200px;top:80px;animation:arr-persist 6.5s ease infinite}.demo-ar-reject .demo-hop-fail{left:82px;top:105px;opacity:0;z-index:5;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));animation:arr-hop 6.5s ease infinite}.demo-ar-reject .demo-no-match{position:absolute;left:195px;top:95px;font-size:28px;font-weight:900;color:#e53935;opacity:0;z-index:6;animation:arr-x 6.5s ease infinite}.demo-ar-reject .demo-arrow-flash{position:absolute;left:122px;top:100px;width:180px;height:40px;background:#e5393526;border-radius:8px;opacity:0;animation:arr-flash 6.5s ease infinite}.demo-ar-reject .demo-result{top:190px;animation:arr-result 6.5s ease infinite}@keyframes arr-persist{0%{opacity:0}5%{opacity:1}88%{opacity:1}94%,to{opacity:0}}@keyframes arr-hop{0%,14%{left:82px;top:105px;opacity:0;transform:scale(1)}18%{left:82px;top:105px;opacity:1;transform:scale(1.1)}28%{left:155px;top:70px;transform:scale(1.1)}34%{left:185px;top:82px;opacity:1;transform:scale(1.1)}40%{left:155px;top:72px}48%{left:100px;top:105px;transform:scale(.95)}52%{left:82px;top:105px;opacity:.5;transform:scale(.9)}58%,to{opacity:0}}@keyframes arr-x{0%,32%{opacity:0;transform:scale(.3)}36%{opacity:1;transform:scale(1.3)}40%{transform:scale(1)}60%{opacity:1}66%{opacity:0}to{opacity:0}}@keyframes arr-flash{0%,32%{opacity:0}36%{opacity:1}50%{opacity:0}to{opacity:0}}@keyframes arr-result{0%,58%{opacity:0;transform:translate(-50%) scale(.4)}64%{opacity:1;transform:translate(-50%) scale(1.15)}68%{transform:translate(-50%) scale(1)}88%{opacity:1}94%,to{opacity:0;transform:translate(-50%) scale(1)}}.demo-ar-sequence .demo-fence-a{left:30px;top:100px;animation:ars-persist 8s ease infinite}.demo-ar-sequence .demo-fence-b{left:185px;top:100px;animation:ars-persist 8s ease infinite}.demo-ar-sequence .demo-fence-c{left:340px;top:100px;animation:ars-persist 8s ease infinite}.demo-ar-sequence .demo-start-arrow{left:12px;top:116px;animation:ars-persist 8s ease infinite}.demo-ar-sequence .demo-arrow-1{left:80px;top:108px;width:97px;height:20px;animation:ars-persist 8s ease infinite}.demo-ar-sequence .demo-label-1{left:118px;top:82px;animation:ars-persist 8s ease infinite}.demo-ar-sequence .demo-arrow-2{left:235px;top:108px;width:97px;height:20px;animation:ars-persist 8s ease infinite}.demo-ar-sequence .demo-label-2{left:275px;top:82px;animation:ars-persist 8s ease infinite}.demo-ar-sequence .demo-hop-1{left:40px;top:100px;opacity:0;z-index:5;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));animation:ars-hop1 8s ease infinite}.demo-ar-sequence .demo-glow-1{left:196px;top:116px}.demo-ar-sequence .demo-glow-1 .demo-ripple{animation:ars-glow1 8s ease infinite}.demo-ar-sequence .demo-hop-2{left:196px;top:100px;opacity:0;z-index:5;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));animation:ars-hop2 8s ease infinite}.demo-ar-sequence .demo-glow-2{left:352px;top:116px}.demo-ar-sequence .demo-glow-2 .demo-ripple{animation:ars-glow2 8s ease infinite}.demo-ar-sequence .demo-result{top:190px;animation:ars-result 8s ease infinite}@keyframes ars-persist{0%{opacity:0}4%{opacity:1}88%{opacity:1}94%,to{opacity:0}}@keyframes ars-hop1{0%,8%{left:40px;top:100px;opacity:0}12%{left:40px;top:100px;opacity:1;transform:scale(1.1)}22%{left:110px;top:60px}32%{left:186px;top:80px}36%{left:196px;top:100px;opacity:.4;transform:scale(.9)}40%,to{opacity:0}}@keyframes ars-glow1{0%,34%{opacity:0;transform:scale(.5)}37%{opacity:1;transform:scale(1)}44%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes ars-hop2{0%,38%{left:196px;top:100px;opacity:0}42%{left:196px;top:100px;opacity:1;transform:scale(1.1)}52%{left:270px;top:58px}60%{left:342px;top:80px}64%{left:352px;top:100px;opacity:.4;transform:scale(.9)}70%,to{opacity:0}}@keyframes ars-glow2{0%,62%{opacity:0;transform:scale(.5)}65%{opacity:1;transform:scale(1)}72%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes ars-result{0%,68%{opacity:0;transform:translate(-50%) scale(.4)}74%{opacity:1;transform:translate(-50%) scale(1.15)}78%{transform:translate(-50%) scale(1)}88%{opacity:1}94%,to{opacity:0;transform:translate(-50%) scale(1)}}.demo-ar-branch .demo-fence-start{left:30px;top:110px;animation:abr-persist 8.5s ease infinite}.demo-ar-branch .demo-fence-top{left:182px;top:38px;animation:abr-persist 8.5s ease infinite}.demo-ar-branch .demo-fence-bot{left:182px;top:185px;animation:abr-persist 8.5s ease infinite}.demo-ar-branch .demo-fence-end{left:335px;top:110px;animation:abr-persist 8.5s ease infinite}.demo-ar-branch .demo-start-arrow{left:14px;top:126px;animation:abr-persist 8.5s ease infinite}.demo-ar-branch .demo-arrow-st{left:74px;top:60px;width:108px;height:72px;animation:abr-persist 8.5s ease infinite}.demo-ar-branch .demo-arrow-sb{left:74px;top:132px;width:108px;height:75px;animation:abr-persist 8.5s ease infinite}.demo-ar-branch .demo-arrow-te{left:226px;top:60px;width:109px;height:68px;animation:abr-persist 8.5s ease infinite}.demo-ar-branch .demo-arrow-be{left:226px;top:128px;width:109px;height:79px;animation:abr-persist 8.5s ease infinite}.demo-ar-branch .demo-label-st{left:98px;top:64px;animation:abr-persist 8.5s ease infinite}.demo-ar-branch .demo-label-sb{left:98px;top:186px;animation:abr-persist 8.5s ease infinite}.demo-ar-branch .demo-label-te{left:256px;top:64px;animation:abr-persist 8.5s ease infinite}.demo-ar-branch .demo-label-be{left:256px;top:186px;animation:abr-persist 8.5s ease infinite}.demo-ar-branch .demo-dim-top{position:absolute;left:72px;top:32px;width:270px;height:80px;background:#ffffff8c;border-radius:12px;opacity:0;animation:abr-dim 8.5s ease infinite}.demo-ar-branch .demo-hop-1{left:42px;top:115px;opacity:0;z-index:5;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));animation:abr-hop1 8.5s ease infinite}.demo-ar-branch .demo-glow-1{left:194px;top:198px}.demo-ar-branch .demo-glow-1 .demo-ripple{animation:abr-glow1 8.5s ease infinite}.demo-ar-branch .demo-hop-2{left:194px;top:190px;opacity:0;z-index:5;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));animation:abr-hop2 8.5s ease infinite}.demo-ar-branch .demo-glow-2{left:347px;top:126px}.demo-ar-branch .demo-glow-2 .demo-ripple{animation:abr-glow2 8.5s ease infinite}.demo-ar-branch .demo-result{top:240px;animation:abr-result 8.5s ease infinite}@keyframes abr-persist{0%{opacity:0}4%{opacity:1}88%{opacity:1}94%,to{opacity:0}}@keyframes abr-hop1{0%,8%{left:42px;top:115px;opacity:0}12%{left:42px;top:115px;opacity:1;transform:scale(1.1)}20%{left:105px;top:150px}28%{left:175px;top:185px}32%{left:192px;top:192px;opacity:.4;transform:scale(.9)}36%,to{opacity:0}}@keyframes abr-glow1{0%,30%{opacity:0;transform:scale(.5)}33%{opacity:1;transform:scale(1)}40%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes abr-hop2{0%,36%{left:194px;top:190px;opacity:0}40%{left:194px;top:190px;opacity:1;transform:scale(1.1)}48%{left:270px;top:155px}54%{left:338px;top:120px}58%{left:348px;top:116px;opacity:.4;transform:scale(.9)}62%,to{opacity:0}}@keyframes abr-glow2{0%,56%{opacity:0;transform:scale(.5)}59%{opacity:1;transform:scale(1)}66%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes abr-dim{0%,44%{opacity:0}50%{opacity:1}86%{opacity:1}92%,to{opacity:0}}@keyframes abr-result{0%,62%{opacity:0;transform:translate(-50%) scale(.4)}68%{opacity:1;transform:translate(-50%) scale(1.15)}72%{transform:translate(-50%) scale(1)}88%{opacity:1}94%,to{opacity:0;transform:translate(-50%) scale(1)}}.demo-ar-loop .demo-fence-a{left:28px;top:108px;animation:arl-persist 10s ease infinite}.demo-ar-loop .demo-fence-b{left:185px;top:108px;animation:arl-persist 10s ease infinite}.demo-ar-loop .demo-fence-c{left:340px;top:108px;animation:arl-persist 10s ease infinite}.demo-ar-loop .demo-start-arrow{left:10px;top:124px;animation:arl-persist 10s ease infinite}.demo-ar-loop .demo-arrow-1{left:78px;top:120px;width:99px;height:20px;animation:arl-persist 10s ease infinite}.demo-ar-loop .demo-label-1{left:118px;top:94px;animation:arl-persist 10s ease infinite}.demo-ar-loop .demo-loop-arrow{left:179px;top:56px;width:60px;height:50px;animation:arl-persist 10s ease infinite}.demo-ar-loop .demo-label-loop{left:196px;top:40px;animation:arl-persist 10s ease infinite}.demo-ar-loop .demo-arrow-2{left:234px;top:120px;width:98px;height:20px;animation:arl-persist 10s ease infinite}.demo-ar-loop .demo-label-2{left:275px;top:94px;animation:arl-persist 10s ease infinite}.demo-ar-loop .demo-hop-1{left:38px;top:112px;opacity:0;z-index:5;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));animation:arl-hop1 10s ease infinite}.demo-ar-loop .demo-glow-1{left:198px;top:124px}.demo-ar-loop .demo-glow-1 .demo-ripple{animation:arl-glow1 10s ease infinite}.demo-ar-loop .demo-hop-loop-1{left:198px;top:112px;opacity:0;z-index:5;filter:drop-shadow(0 2px 5px rgba(0,0,0,.2));animation:arl-loop1 10s ease infinite}.demo-ar-loop .demo-hop-loop-2{left:198px;top:112px;opacity:0;z-index:5;filter:drop-shadow(0 2px 5px rgba(0,0,0,.2));animation:arl-loop2 10s ease infinite}.demo-ar-loop .demo-loop-counter{position:absolute;left:246px;top:50px;display:flex;align-items:center;justify-content:center;width:36px;height:28px}.demo-ar-loop .demo-loop-counter .lc{position:absolute;font-weight:800;font-size:15px;font-family:Nunito,sans-serif;color:#fff;background:#ff8f00;padding:2px 8px;border-radius:10px;box-shadow:0 1px 4px #0003;white-space:nowrap;opacity:0}.demo-ar-loop .lc-0{animation:arl-lc0 10s ease infinite}.demo-ar-loop .lc-1{animation:arl-lc1 10s ease infinite}.demo-ar-loop .lc-2{animation:arl-lc2 10s ease infinite}.demo-ar-loop .lc-dots{animation:arl-lc-dots 10s ease infinite}.demo-ar-loop .demo-hop-3{left:198px;top:112px;opacity:0;z-index:5;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));animation:arl-hop3 10s ease infinite}.demo-ar-loop .demo-glow-2{left:352px;top:124px}.demo-ar-loop .demo-glow-2 .demo-ripple{animation:arl-glow2 10s ease infinite}.demo-ar-loop .demo-result{top:200px;animation:arl-result 10s ease infinite}@keyframes arl-persist{0%{opacity:0}3%{opacity:1}90%{opacity:1}96%,to{opacity:0}}@keyframes arl-hop1{0%,6%{left:38px;top:112px;opacity:0}10%{left:38px;top:112px;opacity:1;transform:scale(1.1)}16%{left:110px;top:72px}22%{left:192px;top:112px;opacity:.4;transform:scale(.9)}26%,to{opacity:0}}@keyframes arl-glow1{0%,20%{opacity:0;transform:scale(.5)}23%{opacity:1;transform:scale(1)}28%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes arl-loop1{0%,26%{left:198px;top:112px;opacity:0}28%{left:198px;top:112px;opacity:1;transform:scale(1)}32%{left:206px;top:55px;transform:scale(1.05)}36%{left:205px;top:112px;opacity:.4;transform:scale(.9)}40%,to{opacity:0}}@keyframes arl-loop2{0%,40%{left:198px;top:112px;opacity:0}42%{left:198px;top:112px;opacity:1;transform:scale(1)}46%{left:206px;top:55px;transform:scale(1.05)}50%{left:205px;top:112px;opacity:.4;transform:scale(.9)}54%,to{opacity:0}}@keyframes arl-lc0{0%,22%{opacity:0;transform:scale(.6)}24%{opacity:1;transform:scale(1.1)}26%{transform:scale(1)}29%{opacity:1}30%{opacity:0}to{opacity:0}}@keyframes arl-lc1{0%,30%{opacity:0;transform:scale(.6)}32%{opacity:1;transform:scale(1.1)}34%{transform:scale(1)}43%{opacity:1}44%{opacity:0}to{opacity:0}}@keyframes arl-lc2{0%,44%{opacity:0;transform:scale(.6)}46%{opacity:1;transform:scale(1.1)}48%{transform:scale(1)}57%{opacity:1}58%{opacity:0}to{opacity:0}}@keyframes arl-lc-dots{0%,58%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.1)}62%{transform:scale(1)}74%{opacity:1}78%{opacity:0}to{opacity:0}}@keyframes arl-hop3{0%,58%{left:198px;top:112px;opacity:0}60%{left:198px;top:112px;opacity:1;transform:scale(1.1)}66%{left:270px;top:72px}72%{left:348px;top:112px;opacity:.4;transform:scale(.9)}76%,to{opacity:0}}@keyframes arl-glow2{0%,70%{opacity:0;transform:scale(.5)}73%{opacity:1;transform:scale(1)}78%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes arl-result{0%,76%{opacity:0;transform:translate(-50%) scale(.4)}80%{opacity:1;transform:translate(-50%) scale(1.15)}83%{transform:translate(-50%) scale(1)}90%{opacity:1}96%,to{opacity:0;transform:translate(-50%) scale(1)}}.demo-ar-dead .demo-fence-start{left:30px;top:110px;animation:ard-persist 7.5s ease infinite}.demo-ar-dead .demo-fence-good{left:182px;top:38px;animation:ard-persist 7.5s ease infinite}.demo-ar-dead .demo-fence-trap{left:182px;top:185px;animation:ard-persist 7.5s ease infinite}.demo-ar-dead .demo-fence-end{left:335px;top:38px;animation:ard-persist 7.5s ease infinite}.demo-ar-dead .demo-start-arrow{left:14px;top:126px;animation:ard-persist 7.5s ease infinite}.demo-ar-dead .demo-arrow-sg{left:74px;top:60px;width:108px;height:72px;animation:ard-persist 7.5s ease infinite}.demo-ar-dead .demo-arrow-st{left:74px;top:132px;width:108px;height:75px;animation:ard-persist 7.5s ease infinite}.demo-ar-dead .demo-arrow-ge{left:226px;top:38px;width:109px;height:20px;animation:ard-persist 7.5s ease infinite}.demo-ar-dead .demo-label-sg{left:98px;top:64px;animation:ard-persist 7.5s ease infinite}.demo-ar-dead .demo-label-st{left:98px;top:186px;animation:ard-persist 7.5s ease infinite}.demo-ar-dead .demo-label-ge{left:256px;top:38px;animation:ard-persist 7.5s ease infinite}.demo-ar-dead .demo-hop-1{left:42px;top:115px;opacity:0;z-index:5;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));animation:ard-hop1 7.5s ease infinite}.demo-ar-dead .demo-glow-1{left:194px;top:198px}.demo-ar-dead .demo-glow-1 .demo-ripple{animation:ard-glow1 7.5s ease infinite}.demo-ar-dead .demo-stuck-badge{position:absolute;left:260px;top:190px;background:#e53935;color:#fff;font-weight:700;padding:4px 12px;border-radius:12px;font-size:13px;box-shadow:0 1px 4px #0003;white-space:nowrap;animation:ard-stuck 7.5s ease infinite}.demo-ar-dead .demo-result{top:248px;animation:ard-result 7.5s ease infinite}@keyframes ard-persist{0%{opacity:0}4%{opacity:1}88%{opacity:1}94%,to{opacity:0}}@keyframes ard-hop1{0%,10%{left:42px;top:115px;opacity:0}14%{left:42px;top:115px;opacity:1;transform:scale(1.1)}22%{left:105px;top:150px}30%{left:175px;top:185px}34%{left:192px;top:192px;opacity:.5;transform:scale(.95)}38%{opacity:.5}82%{opacity:.4}88%,to{opacity:0}}@keyframes ard-glow1{0%,32%{opacity:0;transform:scale(.5)}35%{opacity:1;transform:scale(1)}42%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes ard-stuck{0%,36%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1.1)}44%{transform:scale(1)}80%{opacity:1}86%,to{opacity:0}}@keyframes ard-result{0%,56%{opacity:0;transform:translate(-50%) scale(.4)}62%{opacity:1;transform:translate(-50%) scale(1.15)}66%{transform:translate(-50%) scale(1)}88%{opacity:1}94%,to{opacity:0;transform:translate(-50%) scale(1)}}.demo-ar-multi .demo-fence-start{left:30px;top:118px;animation:arm-persist 8s ease infinite}.demo-ar-multi .demo-fence-mid{left:170px;top:118px;animation:arm-persist 8s ease infinite}.demo-ar-multi .demo-fence-bed1{left:320px;top:42px;animation:arm-persist 8s ease infinite}.demo-ar-multi .demo-fence-bed2{left:320px;top:195px;animation:arm-persist 8s ease infinite}.demo-ar-multi .demo-start-arrow{left:14px;top:134px;animation:arm-persist 8s ease infinite}.demo-ar-multi .demo-arrow-sm{left:74px;top:126px;width:88px;height:20px;animation:arm-persist 8s ease infinite}.demo-ar-multi .demo-arrow-m1{left:214px;top:60px;width:106px;height:80px;animation:arm-persist 8s ease infinite}.demo-ar-multi .demo-arrow-m2{left:214px;top:140px;width:106px;height:73px;animation:arm-persist 8s ease infinite}.demo-ar-multi .demo-label-sm{left:108px;top:100px;animation:arm-persist 8s ease infinite}.demo-ar-multi .demo-label-m1{left:248px;top:64px;animation:arm-persist 8s ease infinite}.demo-ar-multi .demo-label-m2{left:248px;top:186px;animation:arm-persist 8s ease infinite}.demo-ar-multi .demo-beds-badge{position:absolute;left:310px;top:128px;background:#1565c0;color:#fff;font-weight:700;padding:3px 10px;border-radius:12px;font-size:11px;box-shadow:0 1px 4px #0003;white-space:nowrap;animation:arm-beds 8s ease infinite}.demo-ar-multi .demo-hop-1{left:42px;top:120px;opacity:0;z-index:5;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));animation:arm-hop1 8s ease infinite}.demo-ar-multi .demo-glow-1{left:182px;top:132px}.demo-ar-multi .demo-glow-1 .demo-ripple{animation:arm-glow1 8s ease infinite}.demo-ar-multi .demo-hop-2{left:182px;top:120px;opacity:0;z-index:5;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));animation:arm-hop2 8s ease infinite}.demo-ar-multi .demo-glow-2{left:332px;top:208px}.demo-ar-multi .demo-glow-2 .demo-ripple{animation:arm-glow2 8s ease infinite}.demo-ar-multi .demo-result{top:248px;animation:arm-result 8s ease infinite}@keyframes arm-persist{0%{opacity:0}4%{opacity:1}88%{opacity:1}94%,to{opacity:0}}@keyframes arm-beds{0%,4%{opacity:0;transform:scale(.6)}8%{opacity:1;transform:scale(1.1)}12%{transform:scale(1)}68%{opacity:1}74%{opacity:0}to{opacity:0}}@keyframes arm-hop1{0%,12%{left:42px;top:120px;opacity:0}16%{left:42px;top:120px;opacity:1;transform:scale(1.1)}24%{left:105px;top:82px}32%{left:178px;top:118px}34%{left:182px;top:120px;opacity:.4;transform:scale(.9)}38%,to{opacity:0}}@keyframes arm-glow1{0%,32%{opacity:0;transform:scale(.5)}35%{opacity:1;transform:scale(1)}42%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes arm-hop2{0%,38%{left:182px;top:120px;opacity:0}42%{left:182px;top:120px;opacity:1;transform:scale(1.1)}50%{left:256px;top:160px}56%{left:328px;top:198px}58%{left:332px;top:200px;opacity:.4;transform:scale(.9)}62%,to{opacity:0}}@keyframes arm-glow2{0%,56%{opacity:0;transform:scale(.5)}59%{opacity:1;transform:scale(1)}66%{opacity:0;transform:scale(1.8)}to{opacity:0}}@keyframes arm-result{0%,62%{opacity:0;transform:translate(-50%) scale(.4)}68%{opacity:1;transform:translate(-50%) scale(1.15)}72%{transform:translate(-50%) scale(1)}88%{opacity:1}94%,to{opacity:0;transform:translate(-50%) scale(1)}}.story-intro-scene{width:500px;max-width:92vw;background:linear-gradient(145deg,#e8f5e9,#c8e6c9);border-radius:22px;box-shadow:0 8px 40px #00000040;border:3px solid #a5d6a7;display:flex;flex-direction:column;overflow:hidden;animation:demo-overlay-in .2s ease}.story-intro-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 28px 20px;gap:22px;min-height:240px}.story-illus{display:flex;align-items:center;justify-content:center}.story-path-row{gap:18px}.story-arrow{font-size:52px;line-height:1;color:#2e7d32;margin-top:-4px}.story-btns-row{gap:14px;flex-wrap:wrap;justify-content:center}.story-mock-btn{padding:.65em 1.3em;border-radius:12px;font-size:1rem;font-weight:700;pointer-events:none;-webkit-user-select:none;user-select:none}.story-mock-accept{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.story-mock-reject{background:#f5f5f5;color:#333;border:2px solid #ddd}.story-intro-text{font-size:1.1rem;font-weight:600;color:#2e7d32;text-align:center;line-height:1.55;margin:0;max-width:360px}.story-dots{display:flex;gap:8px;align-items:center}.story-dot{width:8px;height:8px;border-radius:50%;background:#2e7d3238;transition:background .2s}.story-dot-active{background:#2e7d32}.story-nav-btn{padding:.5em 1.4em;border:none;border-radius:20px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .15s}.story-nav-primary{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.story-nav-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.story-nav-secondary{background:#ffffffbf;color:#2e7d32;border:2px solid #a5d6a7}.story-nav-secondary:hover{background:#fff}@media(max-width:480px){.story-intro-content{padding:24px 18px 16px;min-height:200px}.story-intro-text{font-size:1rem}.story-arrow{font-size:38px}}.detailed-feedback{background:#fff;border-radius:10px;padding:8px 12px;text-align:center;box-shadow:0 2px 8px #00000014}.detailed-feedback.correct{border:2px solid #4CAF50;background:linear-gradient(to bottom,#e8f5e9,#fff)}.detailed-feedback.incorrect{border:2px solid #FF9800;background:linear-gradient(to bottom,#fff8e1,#fff)}.feedback-flash{animation:flash-in .4s ease-out}@keyframes flash-in{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.feedback-celebrate{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0}.feedback-big-icon{font-size:2.5rem;font-weight:800;line-height:1;color:#4caf50;animation:icon-pop .5s ease-out}.feedback-big-icon.wrong{color:#e65100;animation:icon-shake .5s ease-out}@keyframes icon-pop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.3)}to{transform:scale(1);opacity:1}}@keyframes icon-shake{0%{transform:translate(0) scale(0);opacity:0}30%{transform:translate(0) scale(1.2);opacity:1}45%{transform:translate(-6px) scale(1)}60%{transform:translate(6px)}75%{transform:translate(-3px)}90%{transform:translate(3px)}to{transform:translate(0)}}.feedback-matched-count{font-size:1.2rem;font-weight:700;color:#2e7d32}.feedback-wrong{display:flex;align-items:center;justify-content:center;gap:10px;padding:2px 0 4px}.feedback-try-again{margin:0;font-size:.85rem;color:#555;line-height:1.3;text-align:left}.feedback-score-pill{font-size:1.1rem;font-weight:700;color:#e65100;background:#ff98001f;padding:2px 10px;border-radius:12px}.patterns-unmatched{margin:4px 0 6px}.pattern-row{display:flex;align-items:center;gap:5px;padding:3px 8px;background:#ffebee;border-radius:8px;margin-bottom:4px;flex-wrap:wrap}.pattern-row img{width:40px;height:40px}.feedback-btn{padding:8px 14px;border:none;border-radius:10px;font-size:.95rem;font-weight:700;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;background:linear-gradient(135deg,#4caf50,#2e7d32);color:#fff;width:100%;box-shadow:0 3px 12px #4caf5066;animation:feedback-pulse 1.5s ease-in-out infinite}.feedback-btn:after{content:" →";display:inline-block;margin-left:6px;animation:feedback-arrow 1s ease-in-out infinite}@keyframes feedback-pulse{0%,to{box-shadow:0 3px 12px #4caf5066}50%{box-shadow:0 4px 20px #4caf5099}}@keyframes feedback-arrow{0%,to{transform:translate(0)}50%{transform:translate(4px)}}.feedback-btn:hover{background:linear-gradient(135deg,#43a047,#1b5e20);animation:none}.feedback-btn:hover:after{animation:none}.feedback-btn-secondary{padding:8px 14px;border:1px solid #A5D6A7;border-radius:10px;font-size:.9rem;font-weight:600;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;background:#fff;color:#2e7d32;width:100%;margin-top:4px}.feedback-btn-secondary:hover{background:#e8f5e9;border-color:#4caf50}.reflection-prompt{background:#e8f5e9;border-radius:10px;padding:14px;margin-top:12px;border:1px solid #A5D6A7}.reflection-prompt h4{margin:0 0 10px;color:#2e7d32;font-size:1rem}.reflection-question{margin:0 0 12px;font-size:.95rem;color:#333}.reflection-options{display:flex;flex-direction:column;gap:8px}.reflection-option{padding:10px 14px;border:1px solid #81C784;border-radius:8px;background:#fff;font-size:.95rem;font-weight:600;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;text-align:left}.reflection-option:hover{background:#c8e6c9;border-color:#4caf50}@media(max-width:768px){.detailed-feedback{padding:6px 10px}.pattern-row{padding:4px 8px;margin-bottom:4px}.pattern-row img{width:40px;height:40px}.feedback-big-icon{font-size:2rem}}@media(max-width:500px){.detailed-feedback{padding:8px 10px}.feedback-big-icon{font-size:1.8rem}.pattern-row img{width:44px;height:44px}.feedback-try-again{font-size:.8rem}}.badge-notch{position:relative;margin-right:8px;animation:notchAppear .4s cubic-bezier(.34,1.4,.64,1)}.badge-notch-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#ffd54f,#ffa000);font-size:18px;box-shadow:0 4px 14px #ffa00059;transition:transform .2s ease;border:none;padding:0;cursor:pointer;outline:none}.badge-notch-icon:hover{transform:scale(1.1)}.badge-notch-pulse .badge-notch-icon{animation:notchBounce .7s cubic-bezier(.34,1.4,.64,1)}.badge-notch-count{position:absolute;top:-4px;right:-4px;background:#e65100;color:#fff;font-size:11px;font-weight:700;font-family:Nunito,Segoe UI,sans-serif;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #0003;pointer-events:none}.badge-notch-popup{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:12px;box-shadow:0 6px 24px #0000002e;border-left:4px solid #FFB300;min-width:220px;max-width:280px;max-height:280px;overflow:hidden;display:flex;flex-direction:column;z-index:2000;animation:popupFadeIn .2s ease}.badge-notch-popup-title{font-size:1.05rem;font-weight:700;color:#555;margin:0;padding:12px 12px 8px;font-family:Nunito,Segoe UI,sans-serif;flex-shrink:0;border-bottom:1px solid #f0f0f0}.badge-notch-popup-list{overflow-y:auto;padding:4px 12px 8px;flex:1}.badge-notch-popup-footer{padding:8px 12px;border-top:1px solid #f0f0f0;flex-shrink:0}.badge-notch-clear-btn{width:100%;padding:6px 10px;border:1px solid #ddd;border-radius:6px;background:transparent;color:#999;font-size:.8rem;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;transition:all .2s}.badge-notch-clear-btn:hover{border-color:#f44336;color:#f44336}.badge-notch-popup-item{display:flex;align-items:center;gap:10px;padding:6px 0}.badge-notch-popup-item+.badge-notch-popup-item{border-top:1px solid #f0f0f0}.badge-notch-popup-icon{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ffd54f,#ffa000);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}.badge-notch-popup-text{display:flex;flex-direction:column;gap:1px;min-width:0}.badge-notch-popup-name{font-size:1.05rem;font-weight:700;color:#333;font-family:Nunito,Segoe UI,sans-serif}.badge-notch-popup-desc{font-size:.92rem;color:#777;font-family:Nunito,Segoe UI,sans-serif;line-height:1.3}@keyframes notchAppear{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes notchBounce{0%{transform:scale(1);box-shadow:0 4px 14px #ffa00059}30%{transform:scale(1.4);box-shadow:0 0 20px #ffa000b3,0 0 40px #ffa0004d}60%{transform:scale(.95)}to{transform:scale(1);box-shadow:0 4px 14px #ffa00059}}@keyframes popupFadeIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(max-width:500px){.badge-notch-icon{width:34px;height:34px;font-size:16px}.badge-notch-popup{min-width:190px;max-width:240px;max-height:220px}}body{margin:0;font-family:Nunito,Segoe UI,sans-serif;background:linear-gradient(135deg,#e8f5e9,#c8e6c9,#a5d6a7);min-height:100vh}.app{display:flex;flex-direction:row;height:100dvh;padding:0;overflow:hidden}.sheep-panel{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px 18px;background:#f0faf0;border-right:2px solid #C8E6C9;width:68px;min-width:68px;overflow:hidden;flex-shrink:0}.home-btn{width:44px;height:44px;padding:0;border:none;border-radius:10px;background:#f5f5f5;color:#555;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s}.home-btn:hover{background:#e0e0e0}.prev-btn{width:44px;height:44px;padding:0;border:none;border-radius:10px;background:#4fc3f7;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;transition:background .2s}.prev-btn:hover{background:#29b6f6}.sheep-panel-label{background:#4fc3f7;color:#fff;font-size:13px;font-weight:800;font-family:Nunito,sans-serif;padding:4px 10px;border-radius:8px;white-space:nowrap;margin-top:6px}.sheep-list{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,.6vh,6px);margin-top:clamp(4px,1vh,10px);flex:1;min-height:0;overflow:hidden;width:100%;padding:4px 2px}.sheep-slot{transition:all .3s ease;display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:1 1 0;min-height:0;max-height:56px;border-radius:10px;position:relative}.sheep-slot img{max-width:100%;max-height:100%;width:auto!important;height:auto!important;object-fit:contain}.sheep-slot.status-future{filter:grayscale(100%) opacity(.25)}.sheep-slot.status-current{filter:grayscale(30%) opacity(.7);background:#fff9c4;box-shadow:0 0 0 2px #ffd54f;transform:scale(1.1)}.sheep-slot.status-correct{filter:none;background:#e8f5e9;animation:sheep-pop .4s ease}.sheep-badge{position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;border:2px solid white;line-height:1}.badge-correct{background:#43a047}.sheep-slot.status-incorrect{filter:none;background:#fff3e0}.badge-incorrect{background:#e53935}@keyframes sheep-pop{0%{transform:scale(.5)}60%{transform:scale(1.2)}to{transform:scale(1)}}.main-content{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;overflow:hidden;padding:12px 16px;position:relative}.toast-message{position:absolute;top:100px;left:50%;transform:translate(-50%);padding:11px 20px;border-radius:24px;font-size:14px;font-weight:600;white-space:nowrap;pointer-events:none;z-index:9000;box-shadow:0 4px 16px #0003;animation:toast-in .2s ease,toast-out .3s ease 2.7s forwards}.toast-error{background:#c62828;color:#fff}.header-compact{display:flex;align-items:center;padding:0 0 8px}.game-container{display:flex;flex:1;gap:16px;min-height:0;overflow:hidden;isolation:isolate;margin-bottom:8px}.graph-column{display:flex;flex-direction:column;flex:1;min-width:150px;min-height:0;gap:12px}.graph-area{flex:1;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 12px #0000001a;min-height:clamp(180px,30vh,300px);display:flex;flex-direction:column;position:relative}.graph-area .react-flow{flex:1;min-height:100%}.fit-view-btn{position:absolute;bottom:12px;left:12px;min-width:2.5em;min-height:2.5em;width:2.5em;height:2.5em;border-radius:8px;border:none;background:#fffffff2;color:#666;font-size:clamp(16px,1.25rem,24px);cursor:pointer;box-shadow:0 2px 8px #00000026;z-index:5;transition:all .2s;display:flex;align-items:center;justify-content:center}.fit-view-btn:hover{background:#fff;color:#333;transform:scale(1.05);box-shadow:0 4px 12px #0003}.fit-view-btn:active{transform:scale(.95)}.footer{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 10px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;flex-wrap:wrap}.controls{display:flex;gap:6px}.footer .score-display{font-size:14px;font-weight:600;color:#4caf50;background:#e8f5e9;padding:6px 12px;border-radius:8px;white-space:nowrap}.btn{padding:.6em 1.2em;border:none;border-radius:8px;font-size:15px;font-weight:600;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;transition:transform .2s,box-shadow .2s;min-height:2.5em}.btn:hover{transform:translateY(-2px)}.submit-btn{background:#2e7d32;color:#fff;box-shadow:0 2px 8px #2e7d3266}.submit-btn:hover{box-shadow:0 4px 12px #2e7d3280}.reset-btn{background:#f5f5f5;color:#333;box-shadow:0 2px 8px #0000001a}.reset-btn:hover{box-shadow:0 4px 12px #00000026}.level-progress{display:flex;align-items:center;gap:12px;font-size:13px;color:#666;font-weight:600;margin-left:auto}.level-progress .score-display{color:#4caf50;background:#e8f5e9;padding:4px 10px;border-radius:10px}.sidebar{flex:0 1 var(--sidebar-width, 35%);min-width:0;min-height:0;display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-right:0;padding-bottom:0;position:relative;z-index:10}.sidebar-score{position:absolute;top:10px;right:12px;font-size:13px;font-weight:600;color:#4caf50;background:#e8f5e9;padding:3px 8px;border-radius:6px;z-index:1}.patterns-with-score{position:relative}.patterns-with-score .pattern-display h3{padding-right:0}.sidebar>*{width:100%}.hint-button{height:38px;width:38px;padding:0;border-radius:50%;border:none;background:#e65100;color:#fff;font-size:18px;font-weight:700;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;outline:none;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #e6510066;flex-shrink:0}.hint-button:hover,.hint-button:active{background:#bf360c}.hint-button:focus-visible{background:#bf360c;outline:3px solid white;outline-offset:2px}@keyframes hint-nudge{0%,to{transform:scale(1);box-shadow:0 2px 8px #e6510066}30%{transform:scale(1.25);box-shadow:0 0 0 8px #e6510040}60%{transform:scale(1.05);box-shadow:0 0 0 14px #e6510000}}.hint-button.nudge-pulse{animation:hint-nudge 1.1s ease-in-out 4;position:relative;z-index:100}.message{width:100%;text-align:center;padding:8px;border-radius:8px;background:#fff3e0;color:#bf360c}.message.success{background:#e8f5e9;color:#1b5e20}.message.error{background:#fff3e0;color:#bf360c}.selection-hint{background:#fff3e0;padding:12px;border-radius:8px;text-align:center;color:#bf360c;font-size:14px}.react-flow__handle{opacity:0;pointer-events:none}.react-flow__attribution,.reactflow__attribution,.react-flow__attribution a,.reactflow__attribution a{display:none!important}.result-card{position:relative;z-index:20;pointer-events:auto}.result-card button{position:relative;z-index:21;pointer-events:auto;cursor:pointer}.graph-area{position:relative;z-index:1}.game-container{overflow:visible}.react-flow__renderer,.react-flow__pane{z-index:1}.level-complete-modal .star-display{justify-content:center;margin:20px 0}.level-complete-modal .buttons{display:flex;gap:12px;justify-content:center;margin-top:24px}.watch-path-btn{background:#e8f5e9!important;color:#2e7d32!important;border:2px dashed #4CAF50!important}.watch-path-btn:hover:not(:disabled){background:#c8e6c9!important;border-style:solid!important}.watch-path-btn:disabled{opacity:.7;cursor:not-allowed}.watch-path-btn.watching{background:#fff!important;border-style:solid!important;opacity:1;cursor:default}.graph-area .animation-result{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:16px 32px;border-radius:12px;font-size:1.25rem;font-weight:700;font-family:Nunito,sans-serif;z-index:25;animation:resultPopIn .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.graph-area .animation-result.success{background:linear-gradient(135deg,#4caf50,#2e7d32);color:#fff;box-shadow:0 8px 30px #4caf5080}.graph-area .animation-result.fail{background:linear-gradient(135deg,#f44336,#c62828);color:#fff;box-shadow:0 8px 30px #f4433680}.sidebar .result-card{padding:16px}.sidebar .result-card h3{font-size:1.15rem;margin:0 0 10px}.sidebar .result-card p{font-size:1rem;margin:10px 0}.sidebar .final-buttons{display:flex;flex-direction:column;gap:10px}.sidebar .next-btn{padding:12px 16px;font-size:1rem}@media(max-width:900px){.app{height:100dvh;overflow:hidden}.main-content{overflow:hidden;min-height:0}.game-container{flex-direction:column;flex:1;height:0;min-height:0;overflow:hidden;width:100%}.graph-column{width:100%;min-width:auto;flex-shrink:0}.graph-area{min-height:180px;height:38vh;max-height:380px}.sidebar{width:100%;flex-basis:auto;min-width:auto;flex:1;min-height:0;max-height:none;overflow-x:hidden;overflow-y:auto;padding-bottom:12px}.game-container:has(.detailed-feedback.incorrect) .graph-area{height:25vh;min-height:120px;max-height:200px}.footer{flex-wrap:wrap;justify-content:center}.sheep-palette{margin-left:0}.sheep-btn{flex:0 0 64px;padding:6px}.sheep-img{width:100%;height:auto;aspect-ratio:1}.pattern-display{padding:10px}.pattern-display h3{margin-bottom:7px}.pattern-display .pattern-list{gap:5px}.pattern-display .pattern-item{padding:5px 8px}}@media(max-width:768px){.edge-label img{width:52px!important;height:52px!important}.main-content>.footer{flex-shrink:0}.sheep-panel{width:68px;min-width:68px;padding:10px 4px 16px}.sheep-slot{width:42px;height:42px}.sheep-slot img{width:85%!important;height:auto!important;aspect-ratio:1!important}.sheep-panel-label{font-size:11px;padding:3px 8px}.home-btn{width:34px;height:34px}.home-btn svg{width:18px;height:18px}.prev-btn{width:34px;height:34px;font-size:15px}.main-content{padding:8px 12px}.graph-area{min-height:160px;height:25vh;max-height:240px;border-radius:12px}.pattern-display{padding:10px;border-radius:8px}.pattern-display h3{font-size:.9rem;margin-bottom:7px}.pattern-display .pattern-list{gap:5px}.pattern-display .pattern-item{padding:5px 8px}.footer .btn{padding:.4em .7em;font-size:12px}.level-complete-modal{padding:28px;max-width:340px}}@media(max-width:500px){.edge-label img{width:40px!important;height:40px!important}.sheep-panel{width:48px;min-width:48px;padding:8px 3px 14px}.sheep-slot{width:34px;height:34px}.sheep-slot.status-current{transform:none}.sheep-slot img{width:85%!important;height:auto!important;aspect-ratio:1!important}.sheep-badge{width:16px;height:16px;font-size:10px}.main-content{padding:6px 8px}.game-container{gap:10px}.graph-area{min-height:180px;height:28vh;max-height:240px}.footer{padding:6px 8px;gap:6px;border-radius:10px;flex-wrap:wrap;justify-content:center}.footer .score-display{font-size:12px;padding:4px 8px}.sheep-palette .sheep-item{width:40px;height:40px}.controls{width:100%;justify-content:center;flex-wrap:wrap}.pattern-display .pattern-item{padding:6px 8px}.pattern-display .pattern-item img{width:44px;height:44px}.sidebar .result-card{padding:12px}.sidebar .result-card h3{font-size:1rem}.sidebar .result-card p{font-size:.85rem}.sidebar .next-btn{padding:10px 14px;font-size:.9rem}.hint-button{width:34px;height:34px;font-size:16px}.level-complete-modal{padding:24px;max-width:300px}.level-complete-modal h2{font-size:1.4rem}}@media(max-width:768px)and (max-height:650px){.graph-area{min-height:150px;height:30vh;max-height:240px}.sidebar{max-height:28vh}}@media(max-width:360px){.sheep-panel{width:42px;min-width:42px;padding:6px 2px 12px}.sheep-slot{width:30px;height:30px}.sheep-slot img{width:85%!important;height:auto!important;aspect-ratio:1!important}.sheep-panel-label{font-size:9px;padding:2px 5px}.home-btn{width:30px;height:30px}.prev-btn{width:30px;height:30px;font-size:13px}.graph-area{min-height:160px;height:25vh}.footer .btn{padding:.3em .5em;font-size:11px}}@media(max-height:500px)and (orientation:landscape){.app{height:100vh;overflow:hidden}.main-content{padding:4px 8px;overflow:hidden}.header-compact{padding:2px 0 4px}.game-container{flex-direction:row;flex:1;width:auto;min-height:0}.graph-column{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}.graph-area{min-height:unset;height:auto;max-height:unset;flex:1;min-height:0}.sidebar{width:220px;min-width:220px;flex-basis:220px;max-height:100vh;overflow-y:auto}.sheep-panel{width:44px;min-width:44px;padding:4px 2px}.sheep-slot{width:28px;height:28px}.sheep-slot img{width:100%!important;height:auto!important}.footer{padding:3px 6px;gap:4px}.footer .btn{padding:.3em .5em;font-size:11px;min-height:1.8em}.pattern-display{padding:6px 8px}.pattern-display h3{font-size:.8rem;margin-bottom:4px}}.dev-auto-btn{padding:8px 16px!important;border:2px dashed #9C27B0!important;border-radius:8px!important;background:#f3e5f5!important;color:#7b1fa2!important;font-size:.85rem!important;font-weight:600!important}.dev-auto-btn:hover{background:#e1bee7!important;border-color:#7b1fa2!important}.sheep-palette{display:flex;gap:4px;flex-shrink:1;flex-wrap:wrap;justify-content:center;margin-left:0;min-width:0;max-width:100%}.sheep-palette .sheep-item{width:48px;height:48px;padding:4px}.sheep-palette .sheep-item img{width:100%;height:100%}.footer .btn{padding:.4em .8em;font-size:13px}.pattern-display{background:#fff;border-radius:10px;padding:10px;box-shadow:0 2px 8px #0000001a}.pattern-display h3{font-size:1rem;margin:0 0 8px;color:#333}.pattern-display .pattern-list{display:flex;flex-direction:column;gap:6px}.pattern-display .pattern-item{display:flex;align-items:center;gap:4px;padding:6px 8px;background:#f5f5f5;border-radius:8px;flex-wrap:wrap}.pattern-display .pattern-item img{width:clamp(32px,min(4vw,6vh),56px);height:clamp(32px,min(4vw,6vh),56px)}.pattern-display .pattern-arrow{font-size:clamp(14px,2vw,18px);color:#888}@media(max-width:500px){.game-container{display:flex;flex-direction:column;flex:1;height:0;min-height:0;overflow:hidden;gap:8px}.sidebar{order:-1;flex:0 0 auto;width:100%;max-height:none;overflow-y:visible}.graph-column{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden}.graph-area{flex:1;min-height:0;height:auto;overflow:hidden}.sidebar{max-height:42vh;overflow-y:auto;padding-right:8px}.game-container:has(.detailed-feedback.incorrect) .graph-area{height:auto;min-height:0;max-height:none}.main-content>.footer{flex-shrink:0}.pattern-display{padding:8px}.pattern-display h3{margin-bottom:5px}.pattern-display .pattern-list{gap:3px}.pattern-display .pattern-item{padding:3px 5px;gap:3px}.pattern-display .pattern-item img{width:clamp(26px,6vw,36px);height:clamp(26px,6vw,36px)}}@media(max-height:640px)and (min-width:901px){.footer{--sheep-img-lg: 44px;padding:6px 8px;gap:6px;flex-wrap:nowrap}.sheep-btn{padding:4px}.pattern-display{padding:8px}.pattern-display h3{font-size:.85rem;margin-bottom:5px}.pattern-display .pattern-list{gap:4px}.pattern-display .pattern-item{padding:4px 7px;gap:3px}.pattern-display .pattern-item img{width:30px;height:30px}.detailed-feedback{padding:6px 10px}.feedback-big-icon{font-size:1.8rem}.pattern-row{padding:4px 8px;margin-bottom:4px}.pattern-row img{width:40px;height:40px}}.sheep-palette{display:flex;gap:clamp(6px,1.5vw,10px);flex-wrap:wrap;justify-content:flex-start;margin-left:clamp(45px,8vw,60px)}.sheep-btn{background:#fff;border:2px solid #ddd;border-radius:12px;padding:8px;cursor:grab;transition:transform .2s,border-color .2s}.sheep-btn:hover{transform:scale(1.08);border-color:#4caf50}.sheep-btn.selected{border-color:#4caf50;background:#e8f5e9;box-shadow:0 0 0 3px #4caf504d;transform:scale(1.05)}.sheep-btn:active{cursor:grabbing}.sheep-img{display:block;width:var(--sheep-img-lg, 80px);height:var(--sheep-img-lg, 80px)}@keyframes sheep-idle{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.sheep-idle{animation:sheep-idle 1.5s ease-in-out infinite}@keyframes sheep-jump{0%,to{transform:translateY(0) scaleY(1)}15%{transform:translateY(0) scaleY(.85)}50%{transform:translateY(-16px) scaleY(1.05)}85%{transform:translateY(0) scaleY(.9)}}.sheep-jumping{animation:sheep-jump .6s ease-in-out infinite}@media(max-width:1100px){.sheep-btn{flex:0 0 60px;padding:6px}.sheep-img{width:100%;height:auto;aspect-ratio:1}}@media(max-width:900px){.sheep-palette{margin-left:0;flex-wrap:wrap;justify-content:center;width:100%;gap:6px}.sheep-btn{flex:0 0 52px;padding:4px}.sheep-img{width:100%;height:auto;aspect-ratio:1}}@media(max-width:500px){.sheep-palette{gap:4px}.sheep-btn{flex:0 0 44px;padding:2px}}@media(max-width:360px){.sheep-palette{gap:4px}.sheep-btn{flex:0 0 40px;padding:2px}}.pattern-display{background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 2px 8px #00000014;width:100%;box-sizing:border-box}.pattern-display h3{font-size:.95rem;margin:0 0 6px;color:#333;font-weight:600;white-space:nowrap}.pattern-list{display:flex;flex-direction:column;gap:4px;width:100%;box-sizing:border-box}.pattern-item{display:flex;align-items:center;gap:4px;padding:6px 10px;background:#e3f2fd;border-radius:10px;flex-wrap:wrap;width:100%;box-sizing:border-box;justify-content:flex-start}.pattern-item img{width:clamp(32px,min(4vw,7vh),56px);height:clamp(32px,min(4vw,7vh),56px)}.pattern-item .farmer-icon{width:clamp(36px,min(4.5vw,7.5vh),60px);height:clamp(36px,min(4.5vw,7.5vh),60px)}.pattern-end{display:flex;align-items:center;gap:4px;flex-shrink:0}.pattern-arrow{font-size:clamp(14px,2vw,20px);color:#666;margin:0 2px;flex-shrink:0}@media(max-width:768px){.pattern-display{padding:8px 10px}}@media(max-width:500px){.pattern-display{padding:6px 8px}.pattern-display h3{margin-bottom:4px}.pattern-item{padding:3px 6px;gap:2px;border-radius:6px}.pattern-list{gap:3px}.pattern-item img{width:22px;height:22px}.pattern-item .farmer-icon{width:24px;height:24px}.pattern-arrow{font-size:12px}}.final-challenge-modal{background:#fff;border-radius:24px;padding:28px 32px;text-align:center;width:min(680px,92vw);max-height:92dvh;overflow-y:auto;animation:modalPop .3s ease-out;display:flex;flex-direction:column;gap:14px}.final-challenge-heading{color:#2e7d32;font-size:1.7rem;margin:0}.final-challenge-subheading{color:#555;margin:0;font-size:1rem}.final-challenge-pattern{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;padding:10px 14px;background:#f5f5f5;border-radius:10px}.final-challenge-pattern .pattern-sheep{display:flex;align-items:center;gap:6px}.final-challenge-pattern .arrow:after{content:"→";font-size:22px;color:#888}.final-challenge-graph-area{height:260px;border:2px solid #e0e0e0;border-radius:12px;position:relative;overflow:hidden;background:#fafafa}.final-challenge-buttons{display:flex;flex-direction:column;gap:10px}.answer-btn{padding:.7em 1em;border:none;border-radius:12px;font-size:1rem;font-weight:600;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;transition:transform .2s,box-shadow .2s;min-height:2.5em;display:flex;align-items:center;justify-content:center;gap:.4em}.answer-btn:hover{transform:translateY(-2px)}.answer-icon{font-size:1.3em;line-height:1}.accept-btn{background:linear-gradient(135deg,#4caf50,#2e7d32);color:#fff;box-shadow:0 4px 12px #4caf5066}.accept-btn:hover{box-shadow:0 6px 16px #4caf5080}.reject-btn{background:linear-gradient(135deg,#f44336,#c62828);color:#fff;box-shadow:0 4px 12px #f4433666}.reject-btn:hover{box-shadow:0 6px 16px #f4433680}.challenge-result{display:flex;flex-direction:column;align-items:center;gap:10px}.challenge-correct{font-size:1.3rem;font-weight:700;color:#2e7d32;margin:0}.challenge-incorrect{font-size:1.3rem;font-weight:700;color:#c62828;margin:0}.challenge-explanation{color:#555;font-size:.95rem;margin:0;line-height:1.5}.level-complete-buttons{display:flex;flex-direction:column;gap:12px;margin-top:8px}.level-complete-buttons .btn{padding:1em 2em;border:none;border-radius:12px;font-size:1.05rem;font-weight:600;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;transition:all .2s;min-height:3em}.level-complete-buttons .primary-btn{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.level-complete-buttons .primary-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.level-complete-buttons .secondary-btn{background:#f5f5f5;color:#333;border:2px solid #ddd}.level-complete-buttons .secondary-btn:hover{background:#eee;border-color:#ccc}.level-complete-score{font-size:1.25rem;color:#555;margin-bottom:4px}.final-score{font-size:2.2rem;font-weight:800;color:#2e7d32}@media(max-width:600px){.final-challenge-modal{padding:20px 18px;gap:12px}.final-challenge-heading{font-size:1.4rem}.final-challenge-graph-area{height:200px}}.build-level{display:flex;flex-direction:row;height:100dvh;padding:0;box-sizing:border-box;overflow:hidden}.build-level .sheep-panel{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px 18px;background:#f0faf0;border-right:2px solid #C8E6C9;width:68px;min-width:68px;overflow-y:hidden;flex-shrink:0}.build-level .home-btn{width:44px;height:44px;padding:0;border:none;border-radius:10px;background:#f5f5f5;color:#555;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s}.build-level .home-btn:hover{background:#e0e0e0}.build-level .prev-btn{width:44px;height:44px;padding:0;border:none;border-radius:10px;background:#4fc3f7;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;transition:background .2s}.build-level .prev-btn:hover{background:#29b6f6}.build-level .sheep-panel-label{background:#4fc3f7;color:#fff;font-size:13px;font-weight:800;font-family:Nunito,sans-serif;padding:4px 10px;border-radius:8px;white-space:nowrap;margin-top:6px}.build-level .sheep-list{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,.6vh,6px);margin-top:clamp(4px,1vh,10px);flex:1;min-height:0;overflow:hidden;width:100%;padding:4px 2px}.build-level .sheep-slot{transition:all .3s ease;display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:1 1 0;min-height:0;max-height:48px;border-radius:10px;position:relative}.build-level .sheep-slot img{max-width:100%;max-height:100%;width:auto!important;height:auto!important;object-fit:contain}.build-level .sheep-slot.status-future{filter:grayscale(100%) opacity(.25)}.build-level .sheep-slot.status-current{filter:grayscale(30%) opacity(.7);background:#fff9c4;box-shadow:0 0 0 2px #ffd54f;transform:scale(1.1)}.build-level .sheep-slot.status-correct{filter:none;background:#e8f5e9;animation:sheep-pop-build .4s ease}.build-level .sheep-badge{position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;border:2px solid white;line-height:1}.build-level .badge-correct{background:#43a047}.build-level .sheep-slot.status-incorrect{filter:none;background:#fff3e0}.build-level .badge-incorrect{background:#e53935}@keyframes sheep-pop-build{0%{transform:scale(.5)}60%{transform:scale(1.2)}to{transform:scale(1)}}.build-level .main-content{display:flex;flex-direction:column;flex:1;min-width:0;padding:12px 16px;overflow:hidden;position:relative}.build-level .header-compact{display:flex;align-items:center;padding:0 0 8px;flex-shrink:0}.build-level .hint-button{height:2.4em;width:2.4em;padding:0;border-radius:50%;border:none;background:#e65100;color:#fff;font-size:var(--font-size-lg, 18px);font-weight:700;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;outline:none;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #e6510066;flex-shrink:0}.build-level .hint-button:hover,.build-level .hint-button:active{background:#bf360c}.build-level .hint-button:focus-visible{background:#bf360c;outline:3px solid white;outline-offset:2px}.build-level .hint-button.nudge-pulse{animation:hint-nudge 1.1s ease-in-out 4;position:relative;z-index:100}.build-level .hint-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:10000}.build-level .hint-modal{background:#fff;border-radius:12px;padding:20px 24px;max-width:340px;width:90%;box-shadow:0 4px 24px #00000040;border:2px solid #E65100;text-align:left}.build-level .hint-modal p{margin:0 0 16px;color:#333;font-size:1rem;line-height:1.5}.build-level .hint-modal .hint-close{background:#e65100;color:#fff;border:none;padding:.6em 1.2em;border-radius:6px;cursor:pointer;font-weight:600;font-family:Nunito,Segoe UI,sans-serif;width:100%}.build-level .hint-modal .hint-close:hover{background:#bf360c}.build-level .game-container{display:flex;flex:1;gap:16px;min-height:0;overflow:hidden}.build-level .graph-column{display:flex;flex-direction:column;flex:1;min-width:130px;gap:12px}.build-level .toolbar{width:clamp(220px,18vw,260px);background:#fff;border-radius:16px;padding:14px;box-shadow:0 4px 20px #00000012;display:flex;flex-direction:column;gap:10px;flex-shrink:0;-webkit-user-select:none;user-select:none}.build-level .arrow-capsule{display:flex;border-radius:100px;overflow:hidden;border:2px solid #e0e0e0;cursor:grab;transition:border-color .15s;min-width:fit-content;min-height:48px;flex-shrink:0}.build-level .arrow-capsule.state-from,.build-level .arrow-capsule.state-to{border-color:#4caf50}.build-level .arrow-cap{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;padding:10px 8px;background:#fafafa;color:#999;transition:background .15s,color .15s}.build-level .arrow-cap>span{font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap}.build-level .arrow-cap-divider{width:1px;background:#eee;align-self:stretch;flex-shrink:0}.build-level .arrow-capsule.state-from .arrow-cap-from{background:#4caf50;color:#fff}.build-level .arrow-capsule.state-from .arrow-cap-to{background:#fafafa;color:#ccc}.build-level .arrow-capsule.state-to .arrow-cap-from{background:#c8e6c9;color:#2e7d32}.build-level .arrow-capsule.state-to .arrow-cap-to{background:#4caf50;color:#fff}.build-level .arrow-capsule:hover .arrow-cap{background:#f0f0f0}.build-level .arrow-capsule.state-from:hover .arrow-cap-from,.build-level .arrow-capsule.state-to:hover .arrow-cap-to{background:#43a047}.build-level .tool-row-top{display:flex;gap:8px}.build-level .tool-row-top .tool-cell{flex:1}.build-level .tool-select{color:#555}.build-level .tool-select.active{border-color:#666;background:#f0f0f0;color:#333}.build-level .tool-select:hover{background:#f0f0f0;color:#333}.build-level .tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.build-level .tool-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:14px 8px;border-radius:12px;border:2px solid transparent;background:#fafafa;cursor:pointer;transition:all .15s;color:#888;min-height:60px}.build-level .tool-cell:hover{background:#f0f0f0}.build-level .tool-fence{border-style:dashed;border-color:#ccc;cursor:grab;color:#1565c0}.build-level .tool-fence:hover{border-color:#42a5f5;background:#f5f5f5}.build-level .tool-fence.active{border-color:#42a5f5;border-style:solid;background:#e3f2fd;cursor:crosshair}.build-level .tool-bed{border-style:dashed;border-color:#ccc;cursor:grab;color:#e65100}.build-level .tool-bed:hover{border-color:#ff9800;background:#fff3e0}.build-level .tool-bed.active{border-color:#ff9800;border-style:solid;background:#fff3e0;cursor:crosshair}.build-level .tool-delete{color:#888;grid-column:span 2}.build-level .tool-delete.active{border-color:#ef5350;background:#ffebee;color:#c62828}.build-level .tool-delete:hover{background:#ffebee;color:#c62828}.build-level .tool-grid>:only-child{grid-column:span 2}.build-level .toolbar-divider{height:1px;background:linear-gradient(90deg,transparent 5%,#ddd 30%,#ddd 70%,transparent 95%);margin:2px 4px}.build-level .toolbar-sheep{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:8px;align-content:start;flex:1;min-height:0;overflow:visible;padding:3px}.build-level .toolbar-sheep-item{display:flex;align-items:center;justify-content:center;padding:4px;border-radius:12px;border:2px solid transparent;background:#fafafa;cursor:grab;transition:all .15s;overflow:hidden}.build-level .toolbar-sheep-item img{width:clamp(28px,4vw,52px);height:clamp(28px,4vw,52px);max-width:56px;max-height:56px;min-width:20px;min-height:20px;object-fit:contain}.build-level .toolbar-sheep-item:hover{background:#f0f0f0}.build-level .toolbar-sheep-item.selected{border-color:#4caf50;background:#e8f5e9}.build-level .toolbar-sheep-item:last-child:nth-child(odd){grid-column:1 / 2}.build-level .tool-bed-icon{display:block;object-fit:contain}.build-level .graph-area{flex:1;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 12px #0000001a;min-width:300px;min-height:0;max-height:100%;display:flex;flex-direction:column;position:relative}.build-level .graph-area.mode-connect{cursor:crosshair}.build-level .connecting-line line,.build-level .connecting-line path{animation:dashMove .6s linear infinite}@keyframes dashMove{to{stroke-dashoffset:-10}}.build-level .graph-area.mode-connect .react-flow__node{cursor:crosshair}.build-level .graph-area.mode-select{cursor:default}.build-level .graph-area.mode-select .react-flow__node{cursor:grab}.build-level .graph-area.mode-select .react-flow__node:active{cursor:grabbing}.build-level .graph-area.mode-delete{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e53935' stroke-width='2.5'%3E%3Cline x1='4' y1='4' x2='20' y2='20'/%3E%3Cline x1='20' y1='4' x2='4' y2='20'/%3E%3C/svg%3E") 10 10,not-allowed}.build-level .graph-area.mode-delete .react-flow__node,.build-level .graph-area.mode-delete .react-flow__edge{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e53935' stroke-width='2.5'%3E%3Cline x1='4' y1='4' x2='20' y2='20'/%3E%3Cline x1='20' y1='4' x2='4' y2='20'/%3E%3C/svg%3E") 10 10,not-allowed}.build-level .graph-area .react-flow{flex:1;min-height:100%}.build-level .fit-view-btn{position:absolute;bottom:12px;left:12px;min-width:40px;min-height:40px;width:auto;height:auto;padding:.4em;border-radius:8px;border:none;background:#fffffff2;color:#666;font-size:20px;cursor:pointer;box-shadow:0 2px 8px #00000026;z-index:5;transition:all .2s;display:flex;align-items:center;justify-content:center}.build-level .fit-view-btn:hover{background:#fff;color:#333;transform:scale(1.05);box-shadow:0 4px 12px #0003}.build-level .fit-view-btn:active{transform:scale(.95)}.build-level .react-flow__controls{bottom:12px;left:60px;box-shadow:0 2px 8px #00000026;border-radius:8px;overflow:hidden}.build-level .react-flow__controls-button{background:#fffffff2;border:none;border-bottom:1px solid #eee;width:32px;height:32px;padding:6px}.build-level .react-flow__controls-button:hover{background:#fff}.build-level .react-flow__controls-button:last-child{border-bottom:none}.build-level .sidebar{flex:0 1 var(--sidebar-width, 35%);min-width:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto}.build-level .sidebar-score{position:absolute;top:10px;right:12px;font-size:13px;font-weight:600;color:#4caf50;background:#e8f5e9;padding:3px 8px;border-radius:6px;z-index:1}.build-level .patterns-with-score{position:relative}.build-level .patterns-with-score .pattern-display h3{padding-right:90px}.build-level .toast-message{position:absolute;top:100px;left:50%;transform:translate(-50%);padding:11px 20px;border-radius:24px;font-size:14px;font-weight:600;white-space:nowrap;pointer-events:none;z-index:9000;box-shadow:0 4px 16px #0003;animation:toast-in .2s ease,toast-out .3s ease 2.7s forwards}.build-level .toast-error{background:#c62828;color:#fff}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toast-out{0%{opacity:1}to{opacity:0}}.build-level .result-card{background:#fff;border-radius:12px;padding:24px;text-align:center;box-shadow:0 2px 8px #0000001a}.build-level .result-card.correct{border:3px solid #4CAF50;background:linear-gradient(to bottom,#e8f5e9,#fff)}.build-level .result-icon{font-size:48px;margin-bottom:8px}.build-level .result-card h3{margin:0 0 12px;font-size:1.4rem;color:#2e7d32}.build-level .final-buttons{display:flex;flex-direction:column;gap:8px}.build-level .next-btn{padding:.75em 1.5em;border:none;border-radius:8px;background:#4caf50;color:#fff;font-size:1rem;font-weight:600;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;transition:transform .2s,box-shadow .2s;min-height:2.5em}.build-level .next-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.build-level .next-btn.secondary{background:#f5f5f5;color:#333}.build-level .next-btn.secondary:hover{background:#e0e0e0;box-shadow:0 4px 12px #0000001a}.build-level .footer{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 10px;flex-wrap:nowrap;flex-shrink:0;background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014}.build-level .controls{display:flex;gap:6px}.build-level .footer .score-display{font-size:14px;font-weight:600;color:#4caf50;background:#e8f5e9;padding:6px 12px;border-radius:8px;white-space:nowrap}.build-level .btn{padding:.75em 1.5em;border:none;border-radius:8px;font-size:16px;font-weight:600;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;transition:transform .2s,box-shadow .2s;min-height:2.5em}.build-level .btn:hover{transform:translateY(-2px)}.build-level .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.build-level .submit-btn{background:#2e7d32;color:#fff;box-shadow:0 2px 8px #2e7d3266}.build-level .submit-btn:hover:not(:disabled){box-shadow:0 4px 12px #2e7d3280}.build-level .reset-btn{background:#f5f5f5;color:#333;box-shadow:0 2px 8px #0000001a}.build-level .reset-btn:hover{box-shadow:0 4px 12px #00000026}.build-level .level-progress{display:flex;align-items:center;gap:16px;font-size:14px;color:#666;background:#fffc;padding:8px 16px;border-radius:20px;font-weight:600}.build-level .level-progress .score-display{color:#4caf50;background:#e8f5e9;padding:4px 12px;border-radius:12px}.build-level .react-flow__node{cursor:pointer}.build-level .react-flow__node.selected{outline:3px solid #4CAF50;outline-offset:2px;border-radius:8px}.build-level .react-flow__edge{cursor:pointer}.build-level .react-flow__controls{bottom:10px;left:10px}.build-level .react-flow__controls-button{background:#fff;border:1px solid #ddd}.build-level .react-flow__attribution{display:none!important}@media(max-width:1200px){.build-level .toolbar{padding:10px}.build-level .arrow-cap{padding:6px 2px}.build-level .arrow-cap svg{width:18px;height:18px}}@media(max-width:900px){.build-level .react-flow__controls{display:none}.build-level{height:100dvh;overflow:hidden}.build-level .main-content{overflow:hidden;min-height:0}.build-level .game-container{flex:1;flex-wrap:wrap;align-content:flex-start;width:100%;min-height:0}.build-level .toolbar{width:100%;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;align-self:flex-start;gap:8px;padding:10px 12px;order:-1}.build-level .tool-grid{display:flex;gap:6px}.build-level .tool-cell{min-height:50px;padding:10px 8px}.build-level .tool-delete{grid-column:auto}.build-level .toolbar-divider{display:none}.build-level .toolbar-sheep{display:flex;gap:5px;flex:none;min-height:auto;overflow:visible}.build-level .toolbar-sheep-item{min-height:auto;overflow:visible}.build-level .toolbar-sheep-item img{width:clamp(28px,5vw,44px);height:clamp(28px,5vw,44px)}.build-level .graph-column{width:100%;min-width:auto}.build-level .graph-area{min-height:200px;height:38vh;max-height:380px;width:100%;min-width:auto;flex:none}.build-level .sidebar{width:100%;overflow-y:auto;max-height:35vh}}@media(max-width:768px){.build-level .edge-label img{width:52px!important;height:52px!important}.build-level .sheep-panel{width:68px;min-width:68px;padding:10px 4px 16px}.build-level .sheep-slot{width:42px;height:42px}.build-level .sheep-slot img{width:32px!important;height:32px!important}.build-level .sheep-panel-label{font-size:11px;padding:3px 8px}.build-level .home-btn{width:34px;height:34px}.build-level .home-btn svg{width:18px;height:18px}.build-level .prev-btn{width:34px;height:34px;font-size:15px}.build-level .main-content{padding:8px 12px}.build-level .toolbar{padding:8px 10px;gap:6px}.build-level .tool-cell{min-height:44px;padding:8px 6px;font-size:13px}.build-level .sidebar{order:initial}.build-level .graph-area{min-height:180px;height:26vh;max-height:260px}.build-level .sidebar{max-height:30vh}.build-level .footer{padding:8px 10px;gap:8px;flex-wrap:wrap;flex-shrink:0}.build-level .footer .btn{padding:.4em .8em;font-size:13px}.build-level .pattern-display{padding:10px}.build-level .pattern-display h3{font-size:.9rem}}@media(max-width:500px){.build-level .edge-label img{width:40px!important;height:40px!important}.build-level .sheep-panel{width:48px;min-width:48px;padding:8px 3px 14px}.build-level .sheep-slot{width:34px;height:34px}.build-level .sheep-slot.status-current{transform:none}.build-level .sheep-slot img{width:24px!important;height:24px!important}.build-level .sheep-badge{width:16px;height:16px;font-size:10px}.build-level .main-content{padding:4px 8px}.build-level .header-compact{padding-bottom:4px}.build-level .game-container{display:grid;grid-template-rows:auto auto 1fr;gap:2px;overflow:hidden;min-height:0}.build-level .sidebar{grid-row:1;width:100%;max-height:35vh;overflow-y:auto;flex-basis:auto}.build-level .toolbar{grid-row:2}.build-level .graph-column{grid-row:3;min-height:0;display:flex;flex-direction:column;overflow:hidden;gap:4px}.build-level .graph-area{flex:1;min-height:0;height:auto;max-height:none;overflow:hidden;border-radius:12px}.build-level .toolbar{padding:4px 6px;gap:4px;border-radius:12px}.build-level .tool-cell{min-height:32px;padding:4px;gap:2px;border-radius:8px;font-size:11px}.build-level .tool-cell>svg,.build-level .tool-cell>img{width:28px;height:auto}.build-level .arrow-capsule{border-radius:10px}.build-level .arrow-cap{padding:6px 10px;gap:4px}.build-level .arrow-cap>span{font-size:10px}.build-level .arrow-cap svg{width:18px;height:18px}.build-level .toolbar-sheep-item{padding:3px;border-radius:8px}.build-level .toolbar-sheep-item img{width:28px!important;height:28px!important}.build-level .footer{padding:4px 8px;gap:6px;border-radius:10px}.build-level .footer .btn{padding:.35em .6em;font-size:12px;min-height:2em}.build-level .footer .score-display{font-size:12px;padding:4px 8px}.build-level .pattern-display .pattern-item{padding:3px 6px}.build-level .sidebar .result-card{padding:10px}.build-level .sidebar .result-card h3{font-size:.9rem}.build-level .sidebar .next-btn{padding:8px 10px;font-size:.85rem}.build-level .hint-button{width:2.2em;height:2.2em;font-size:var(--font-size-base, 16px)}.build-level .result-icon{font-size:36px}.build-level .result-card h3{font-size:1.1rem}.build-level .sidebar .pattern-display{padding:3px 6px}.build-level .sidebar .pattern-display h3{font-size:.75rem;margin-bottom:2px}.build-level .sidebar .pattern-list{gap:2px}.build-level .sidebar .pattern-item{padding:2px 5px;gap:2px}.build-level .sidebar .pattern-item img{width:24px!important;height:24px!important}.build-level .sidebar .pattern-item .farmer-icon{width:28px!important;height:28px!important}}@media(max-width:768px)and (max-height:650px){.build-level .graph-area{min-height:150px;height:30vh;max-height:240px}.build-level .sidebar{max-height:28vh}}@media(max-width:360px){.build-level .sheep-panel{width:42px;min-width:42px;padding:6px 2px 12px}.build-level .sheep-slot{width:30px;height:30px}.build-level .sheep-slot img{width:22px!important;height:22px!important}.build-level .sheep-panel-label{font-size:9px;padding:2px 5px}.build-level .home-btn{width:30px;height:30px}.build-level .prev-btn{width:30px;height:30px;font-size:13px}.build-level .graph-area{flex:1;height:auto;max-height:none;min-height:100px}}@media(max-height:500px)and (orientation:landscape){.build-level{height:100vh;overflow:hidden}.build-level .main-content{padding:4px 8px;overflow:hidden}.build-level .game-container{flex:1;width:auto;flex-wrap:nowrap;flex-direction:row;min-height:0}.build-level .toolbar{width:auto;flex-direction:column;flex-wrap:nowrap;order:0;padding:6px;gap:4px;min-width:120px;max-width:140px;max-height:100vh;overflow-y:auto}.build-level .toolbar-divider{display:block}.build-level .tool-cell{min-height:40px;padding:6px 4px}.build-level .tool-grid{display:grid;grid-template-columns:1fr 1fr}.build-level .tool-delete{grid-column:span 2}.build-level .toolbar-sheep{display:grid;grid-template-columns:1fr 1fr}.build-level .graph-column{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}.build-level .graph-area{flex:1;min-height:0;height:auto;max-height:unset;width:auto;min-width:0}.build-level .sidebar{width:200px;min-width:200px;flex-basis:200px;max-height:100vh;overflow-y:auto}.build-level .sheep-panel{width:44px;min-width:44px;padding:4px 2px}.build-level .sheep-slot{width:26px;height:26px}.build-level .sheep-slot img{width:18px!important;height:18px!important}.build-level .footer{padding:3px 6px}.build-level .footer .btn{padding:.3em .4em;font-size:11px;min-height:1.8em}}.build-level .watch-path-btn{background:#e8f5e9!important;color:#2e7d32!important;border:2px dashed #4CAF50!important}.build-level .watch-path-btn:hover:not(:disabled){background:#c8e6c9!important;border-style:solid!important}.build-level .watch-path-btn:disabled{opacity:.7;cursor:not-allowed}.build-level .watch-path-btn.watching{background:#fff!important;border-style:solid!important;opacity:1;cursor:default}.build-level .graph-area .animation-result{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:16px 32px;border-radius:12px;font-size:1.25rem;font-weight:700;font-family:Nunito,sans-serif;z-index:25;animation:resultPopIn .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.build-level .graph-area .animation-result.success{background:linear-gradient(135deg,#4caf50,#2e7d32);color:#fff;box-shadow:0 8px 30px #4caf5080}.build-level .graph-area .animation-result.fail{background:linear-gradient(135deg,#f44336,#c62828);color:#fff;box-shadow:0 8px 30px #f4433680}@keyframes resultPopIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.build-level .header-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin:8px 0}.build-level .pattern-display{background:#fff;border-radius:10px;padding:14px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.build-level .pattern-display h3{font-size:1rem;margin:0 0 10px;color:#333}.build-level .pattern-display .pattern-list{display:flex;flex-direction:column;gap:10px}.build-level .pattern-display .pattern-item{display:flex;align-items:center;gap:4px;padding:8px 10px;background:#f5f5f5;border-radius:8px;flex-wrap:wrap}.build-level .pattern-display .pattern-item img{width:clamp(28px,3.2vw,40px);height:clamp(28px,3.2vw,40px)}.build-level .pattern-display .pattern-item .farmer-icon{width:clamp(34px,3.8vw,48px);height:clamp(34px,3.8vw,48px)}.build-level .pattern-display .pattern-arrow{font-size:clamp(12px,1.5vw,18px);color:#888}.build-level .sidebar .result-card{padding:12px}.build-level .sidebar .result-card h3{font-size:1rem;margin:0 0 8px}.build-level .sidebar .result-card p{font-size:.9rem;margin:8px 0}.build-level .sidebar .final-buttons{display:flex;flex-direction:column;gap:8px}.build-level .sidebar .next-btn{padding:8px 12px;font-size:.9rem}.build-level .dev-auto-btn{padding:8px 16px!important;border:2px dashed #9C27B0!important;border-radius:8px!important;background:#f3e5f5!important;color:#7b1fa2!important;font-size:.85rem!important;font-weight:600!important}.build-level .dev-auto-btn:hover{background:#e1bee7!important;border-color:#7b1fa2!important}.build-level .footer .btn{padding:.5em 1em;font-size:14px}.badges-earned{margin:12px 0 4px;text-align:center}.badges-earned-title{font-size:.9rem;font-weight:700;color:#555;margin:0 0 8px;font-family:Nunito,Segoe UI,sans-serif}.badges-earned-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.badges-earned-item{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#fff8e1,#fff3c4);border:1px solid #FFE082;border-radius:20px;padding:4px 12px 4px 6px}.badges-earned-icon{font-size:1.2rem}.badges-earned-name{font-size:.82rem;font-weight:600;color:#5d4037;font-family:Nunito,Segoe UI,sans-serif}.level-complete-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.level-complete-modal{background:#fff;border-radius:20px;padding:40px;text-align:center;max-width:400px;animation:modalPop .3s ease-out}@keyframes modalPop{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.level-complete-modal h2{color:#2e7d32;margin:0 0 16px;font-size:1.8rem}.badge-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.badge-modal{background:#fff;border-radius:16px;padding:24px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;position:relative}.badge-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;background:#eee;border-radius:50%;font-size:20px;cursor:pointer;color:#666}.badge-close:hover{background:#ddd}.badge-modal h2{text-align:center;color:#2e7d32;margin:0 0 4px;font-size:1.5rem}.badge-count{text-align:center;color:#666;margin:0 0 20px;font-size:.95rem}.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.badge-card{background:#f5f5f5;border-radius:12px;padding:16px 12px;text-align:center}.badge-card--earned{background:#e8f5e9}.badge-card--locked{opacity:.5}.badge-icon{font-size:36px;margin-bottom:6px}.badge-name{font-size:.85rem;font-weight:600;color:#333}.badge-hint{font-size:.75rem;color:#888;margin-top:4px}@media(max-width:500px){.badge-grid{grid-template-columns:repeat(2,1fr)}}.a11y-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px}.a11y-panel{background:var(--panel-bg, #fff);border-radius:16px;width:100%;max-width:420px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 40px #0003}.a11y-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:var(--primary-color);color:#fff}.a11y-header h2{margin:0;font-size:1.2rem;font-weight:700}.a11y-close{background:#fff3;border:none;color:#fff;width:44px;height:44px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.a11y-close:hover{background:#ffffff4d}.a11y-close:focus-visible{outline:3px solid white;outline-offset:2px}.a11y-content{padding:16px 20px;overflow-y:auto;flex:1}.a11y-section{margin-bottom:20px}.a11y-section:last-child{margin-bottom:0}.a11y-section h3{font-size:1rem;font-weight:700;color:var(--text-color, #333);margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--border-color, #eee)}.a11y-option{margin-bottom:16px}.a11y-option:last-child{margin-bottom:0}.a11y-label{display:block;font-size:.9rem;font-weight:600;color:var(--text-color, #444);margin-bottom:8px}.a11y-toggle{display:flex;align-items:flex-start;gap:12px;cursor:pointer}.a11y-toggle input{position:absolute;opacity:0;width:0;height:0}.toggle-switch{flex-shrink:0;width:48px;height:28px;background:var(--toggle-off, #ccc);border-radius:14px;position:relative;transition:background .3s}.toggle-switch:after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .3s;box-shadow:0 2px 4px #0003}.a11y-toggle input:checked+.toggle-switch{background:var(--toggle-on, #4CAF50)}.a11y-toggle input:checked+.toggle-switch:after{transform:translate(20px)}.a11y-toggle input:focus-visible+.toggle-switch{outline:3px solid var(--focus-color, #4CAF50);outline-offset:2px}.toggle-label{display:flex;flex-direction:column;gap:2px;font-size:.95rem;color:var(--text-color, #333)}.toggle-label small{font-size:.8rem;color:var(--text-muted, #595959)}.a11y-button-group{display:flex;gap:8px}.a11y-btn{flex:1;padding:10px 16px;border:2px solid var(--border-color, #ddd);border-radius:8px;background:var(--btn-bg, #f5f5f5);color:var(--text-color, #333);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.a11y-btn:hover{border-color:var(--primary-color, #4CAF50);background:var(--btn-hover-bg, #e8f5e9)}.a11y-btn.active{border-color:var(--primary-color, #4CAF50);background:var(--primary-color, #4CAF50);color:#fff}.a11y-btn:focus-visible{outline:3px solid var(--focus-color, #4CAF50);outline-offset:2px}.a11y-btn.text-btn{font-family:monospace;letter-spacing:0}.a11y-overlay-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:8px}.a11y-overlay-btn{aspect-ratio:1;border:2px solid var(--border-color, #ddd);border-radius:8px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;color:#999;transition:all .2s;background:var(--btn-bg, #f5f5f5)}.a11y-overlay-btn:hover{transform:scale(1.05)}.a11y-overlay-btn.active{border-color:var(--primary-color, #4CAF50);box-shadow:0 0 0 3px var(--focus-ring, rgba(76, 175, 80, .3))}.a11y-overlay-btn:focus-visible{outline:3px solid var(--focus-color, #4CAF50);outline-offset:2px}.a11y-hint{display:block;font-size:.8rem;color:var(--text-muted, #595959);font-style:italic}.a11y-footer{padding:12px 20px;border-top:1px solid var(--border-color, #eee);display:flex;gap:10px;align-items:center}.a11y-reset-btn{padding:10px 20px;border:2px solid var(--border-color, #ddd);border-radius:8px;background:transparent;color:var(--text-muted, #595959);font-size:.9rem;cursor:pointer;transition:all .2s}.a11y-reset-btn:hover{border-color:#f44336;color:#f44336}.a11y-reset-btn:focus-visible{outline:3px solid var(--focus-color, #4CAF50);outline-offset:2px}.a11y-save-btn{flex:1;padding:10px 20px;border:none;border-radius:8px;background:var(--primary-color, #4CAF50);color:#fff;font-size:.95rem;font-weight:700;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;transition:background .2s}.a11y-save-btn:hover{background:var(--primary-dark, #43A047)}.a11y-save-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px var(--focus-color, #4CAF50)}@media(max-width:500px){.a11y-panel{max-height:80vh;border-radius:12px;max-width:calc(100% - 32px)}.a11y-overlay-grid{grid-template-columns:repeat(3,1fr)}.a11y-button-group{flex-wrap:wrap;gap:6px}.a11y-btn{flex:1 1 auto;min-width:max-content;padding:8px 12px}}.devtools-trigger{position:fixed;bottom:16px;left:16px;padding:4px 10px;border:1px solid #444;border-radius:4px;background:#222;color:#999;font-size:12px;cursor:pointer;z-index:9999}.devtools-trigger:hover{color:#ccc}.devtools-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000}.devtools-panel{background:#1a1a1a;border:1px solid #333;border-radius:6px;padding:16px;min-width:200px}.devtools-row{padding:6px 0}.devtools-row label{display:flex;align-items:center;gap:8px;color:#ccc;font-size:14px;cursor:pointer}.devtools-clear{padding:4px 10px;border:1px solid #533;border-radius:4px;background:#2a1515;color:#c88;font-size:13px;cursor:pointer}.devtools-clear:hover{background:#3a2020}*{box-sizing:border-box}html{overflow-x:hidden}.rotate-overlay{display:none}@media(orientation:landscape)and (max-height:500px){.rotate-overlay{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,#e8f5e9,#c8e6c9,#a5d6a7)}.rotate-overlay p{margin:0;font-size:1.2rem;font-weight:700;color:#2e7d32}}body{margin:0;font-family:Nunito,Segoe UI,sans-serif;background:linear-gradient(135deg,#e8f5e9,#c8e6c9,#a5d6a7);min-height:100dvh;overflow-x:hidden}.menu-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100dvh;overflow-y:auto;text-align:center;padding:20px}.menu-progress{position:absolute;top:20px;right:20px}.progress-btn{display:flex;align-items:center;gap:16px;padding:12px 20px;background:#fff;border:none;border-radius:12px;cursor:pointer;box-shadow:0 2px 8px #0000001a;transition:transform .2s,box-shadow .2s}.progress-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.progress-sheep-count{display:flex;align-items:center;gap:6px;font-size:1.1rem;font-weight:700;color:#2e7d32}.progress-badges{font-size:1rem;color:#666}.menu-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}.menu-header h1{font-size:2.5rem;color:#2e7d32;margin:0;text-shadow:2px 2px 0 white}.menu-subtitle{font-size:1.2rem;color:#555;margin:0 0 24px}.menu-farmer{margin-bottom:32px}.menu-buttons{display:flex;flex-direction:column;gap:16px}.level-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;min-width:320px;font-size:1.2rem;font-weight:600;border:none;border-radius:12px;background:#4caf50;color:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px #4caf504d}.level-btn-text{flex:1;text-align:left}.color-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}.accessibility-settings{position:fixed;bottom:20px;right:20px}.settings-btn{padding:12px 16px;border:none;border-radius:8px;background:#fff;color:#333;font-size:14px;font-weight:600;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;box-shadow:0 2px 8px #00000026}.settings-btn:hover{background:#f5f5f5}.overlay-options{position:absolute;bottom:50px;right:0;background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 20px #00000026;min-width:200px}.overlay-options p{margin:0 0 12px;font-size:14px;color:#333}.overlay-btn{display:block;width:100%;padding:10px;margin-bottom:8px;border:2px solid #ddd;border-radius:6px;font-size:14px;font-weight:600;font-family:Nunito,Segoe UI,sans-serif;cursor:pointer;text-align:left}.overlay-btn:last-child{margin-bottom:0}.overlay-btn:hover{border-color:#2e7d32}.overlay-btn.active{border-color:#2e7d32;background-color:#e8f5e9!important}@media(max-height:880px)and (max-width:480px){.menu-screen{padding:14px 20px}.menu-subtitle{margin-bottom:16px}.menu-farmer{margin-bottom:20px}.menu-buttons{gap:10px}}@media(max-height:760px)and (max-width:480px){.menu-screen{padding:10px 16px}.menu-farmer{display:none}.menu-header{margin-bottom:8px}.menu-subtitle{margin-bottom:10px}.menu-buttons{gap:8px}.level-btn{padding:12px 16px}}@media(max-width:480px){.menu-header h1{font-size:1.8rem}.level-btn{min-width:unset;width:100%;font-size:1rem}.menu-progress{position:static;margin-bottom:20px}}.menu-hint{margin-top:24px;font-size:.95rem;color:#666;font-style:italic}.menu-buttons{display:flex;flex-direction:column;gap:12px;max-width:400px;width:100%}.level-btn{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;font-size:1.1rem;font-weight:600;border:none;border-radius:12px;background:#4caf50;color:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px #4caf504d}.level-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #4caf5066}.level-btn:nth-child(1){background:linear-gradient(135deg,#4caf50,#2e7d32)}.level-btn:nth-child(2){background:linear-gradient(135deg,#2196f3,#1565c0);box-shadow:0 4px 12px #2196f34d}.level-btn:nth-child(2):hover{box-shadow:0 6px 16px #2196f366}.level-btn:nth-child(3){background:linear-gradient(135deg,#ff9800,#e65100);box-shadow:0 4px 12px #ff98004d}.level-btn:nth-child(3):hover{box-shadow:0 6px 16px #ff980066}.menu-buttons{display:flex;flex-direction:column;gap:12px;width:100%;max-width:400px;margin:0 auto}.level-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 24px;border:none;border-radius:16px;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}.level-btn:hover{transform:translateY(-3px)}.level-btn.level-1{background:linear-gradient(135deg,#66bb6a,#43a047);color:#fff;box-shadow:0 4px 12px #4caf5066}.level-btn.level-1:hover{box-shadow:0 6px 16px #4caf5080}.level-btn.level-2{background:linear-gradient(135deg,#42a5f5,#1e88e5);color:#fff;box-shadow:0 4px 12px #2196f366}.level-btn.level-2:hover{box-shadow:0 6px 16px #2196f380}.level-btn.level-3{background:linear-gradient(135deg,#ffa726,#fb8c00);color:#fff;box-shadow:0 4px 12px #ff980066}.level-btn.level-3:hover{box-shadow:0 6px 16px #ff980080}.level-btn-icon{font-size:2rem;margin-bottom:4px}.level-btn-text{font-size:1.2rem;font-weight:700;font-family:Nunito,Segoe UI,sans-serif}.level-btn-desc{font-size:1rem;opacity:1;font-weight:600}.level-btn-sheep{display:flex;align-items:center;gap:2px;margin-top:6px;background:#ffffff40;padding:4px 10px;border-radius:8px}.star-earned{font-size:1.3rem;line-height:1}.star-unearned{font-size:1.3rem;line-height:1;opacity:.35}.menu-hint{text-align:center;color:#666;font-size:.95rem;margin-top:20px;font-style:italic}@media(max-width:500px){.level-btn{padding:16px 20px}.level-btn-icon{font-size:1.6rem}.level-btn-text{font-size:1rem}.level-btn-desc{font-size:.8rem}}.level-btn.locked{opacity:.6;cursor:not-allowed;filter:grayscale(40%);position:relative}.level-btn.locked:hover{transform:none;box-shadow:0 4px 12px #0003}.level-lock-icon{position:absolute;top:8px;right:10px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;opacity:.8;background:#0003;padding:3px 8px;border-radius:4px}.locked-toast{position:fixed;top:20px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#424242,#212121);color:#fff;padding:14px 24px;border-radius:12px;font-size:1rem;font-weight:600;box-shadow:0 4px 20px #0000004d;z-index:1000;animation:toastSlideIn .3s ease-out,toastFadeOut .3s ease-in 2.7s forwards}@keyframes toastSlideIn{0%{transform:translate(-50%) translateY(-20px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}@keyframes toastFadeOut{0%{opacity:1}to{opacity:0}}.accessibility-btn{position:fixed;bottom:20px;right:20px;min-width:3rem;min-height:3rem;padding:.8em;border-radius:50%;border:none;background:linear-gradient(135deg,#2196f3,#1976d2);color:#fff;font-size:inherit;font-weight:700;cursor:pointer;box-shadow:0 4px 12px #2196f366;z-index:9999;transition:transform .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center;aspect-ratio:1;line-height:1}.accessibility-btn:hover{transform:scale(1.1);box-shadow:0 6px 16px #2196f380}.accessibility-btn:focus-visible{outline:3px solid white;outline-offset:2px}.accessibility-btn .accessibility-icon{font-weight:700;font-size:1em;line-height:1}.menu-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100dvh;overflow-y:auto;padding:20px;box-sizing:border-box}.menu-header{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:8px}.menu-header h1{font-size:2.5rem;text-align:center;margin:0}.menu-subtitle{text-align:center;color:var(--text-muted, #666);font-size:clamp(.9rem,3vw,1.1rem);margin:0 0 8px}.menu-farmer{margin:8px 0}.menu-farmer img{width:80px;height:80px}.menu-progress{position:absolute;top:16px;right:16px}.progress-btn{display:flex;gap:12px;padding:10px 16px;border:none;border-radius:20px;background:var(--card-bg, #fff);box-shadow:0 2px 8px #0000001a;cursor:pointer;font-size:.95rem;transition:transform .2s}.progress-btn:hover{transform:scale(1.05)}@media(max-width:500px){.menu-screen{padding:12px 16px 70px;justify-content:flex-start;overflow-y:auto;gap:0}.menu-header{margin-bottom:6px;margin-top:8px}.menu-header img{width:40px;height:40px}.menu-subtitle{margin-bottom:8px}.menu-farmer{display:none}.menu-buttons{width:100%;gap:8px}.level-btn{padding:12px 16px;min-width:0}.accessibility-btn{bottom:16px;right:16px;min-width:2rem;min-height:2rem;padding:.45em;font-size:14px}.devtools-trigger{bottom:16px;left:16px}.menu-progress{position:relative;top:0;right:0;margin-bottom:12px}}@media(min-width:501px)and (max-width:900px){.menu-buttons{max-width:450px}}@media(min-width:1200px){.menu-screen{max-width:700px;margin:0 auto}}@media(max-height:650px)and (min-width:600px){.menu-screen{padding:12px 20px}.menu-farmer{margin:4px 0}.menu-farmer img{width:60px;height:60px}.menu-subtitle{margin-bottom:4px}.menu-buttons{gap:8px}.level-btn{padding:12px 20px}}@media(max-height:500px)and (orientation:landscape){.menu-screen{padding:8px 16px;justify-content:center;gap:6px;overflow-y:auto}.menu-header{margin-bottom:4px;gap:10px}.menu-header h1{font-size:1.4rem}.menu-header img{width:32px;height:32px}.menu-subtitle{font-size:.9rem;margin:0 0 6px}.menu-farmer{display:none}.menu-buttons{gap:8px;width:100%;max-width:420px}.level-btn{padding:10px 16px;min-width:0}.menu-progress{position:relative;top:0;right:0;margin-bottom:4px}}@media(max-height:650px)and (min-height:501px)and (orientation:landscape){.menu-screen{padding:10px 20px}.menu-header{margin-bottom:2px}.menu-subtitle{margin:0 0 2px}.menu-farmer{margin:2px 0}.menu-farmer img{width:55px;height:55px}.menu-buttons{gap:8px}.level-btn{padding:10px 20px}.level-btn-icon{font-size:1.5rem;margin-bottom:2px}.menu-hint{margin-top:6px;font-size:.85rem}}@media(max-width:360px){.accessibility-btn{min-width:1.8rem;min-height:1.8rem;padding:.35em;font-size:12px}.level-btn{padding:12px 16px}.level-btn-text{font-size:.9rem}.level-btn-desc{font-size:.75rem}}:root{--primary-color: #4CAF50;--primary-dark: #388E3C;--primary-light: #81C784;--success-color: #4CAF50;--error-color: #f44336;--warning-color: #FF9800;--info-color: #2196F3;--text-color: #333333;--text-muted: #595959;--text-light: #999999;--heading-color: #222222;--bg-color: #ffffff;--bg-secondary: #f5f5f5;--panel-bg: #ffffff;--card-bg: #ffffff;--border-color: #e0e0e0;--border-focus: #4CAF50;--btn-bg: #f5f5f5;--btn-hover-bg: #e8f5e9;--input-bg: #ffffff;--focus-color: #4CAF50;--focus-ring: rgba(76, 175, 80, .3);--toggle-on: #4CAF50;--toggle-off: #cccccc;--sheep-white: #f5f5f5;--sheep-black: #333333;--sheep-brown: #8B4513;--sheep-spotted: #DEB887;--font-size-base: 16px;--font-size-sm: 14px;--font-size-lg: 18px;--font-size-xl: 20px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--line-height-loose: 2;--letter-spacing-normal: normal;--letter-spacing-wide: .05em;--letter-spacing-wider: .1em;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--transition-fast: .15s ease;--transition-normal: .3s ease}[data-font-size=normal]{--font-size-base: 16px;--font-size-sm: 14px;--font-size-lg: 18px;--font-scale: 1;--canvas-font-scale: 1}[data-font-size=large]{--font-size-base: 18px;--font-size-sm: 16px;--font-size-lg: 20px;--font-scale: 1.125;--canvas-font-scale: 1.3}[data-font-size=x-large]{--font-size-base: 20px;--font-size-sm: 18px;--font-size-lg: 24px;--font-scale: 1.25;--canvas-font-scale: 1.6}[data-font-size=large]{zoom:1.125;height:calc(100vh / 1.125);overflow:hidden}[data-font-size=x-large]{zoom:1.25;height:80vh;overflow:hidden}[data-font-size=large] body,[data-font-size=x-large] body{min-height:0!important;overflow:hidden}[data-font-size=large] .accept-reject-level,[data-font-size=large] .app,[data-font-size=large] .build-level{height:calc(100vh / 1.125)}[data-font-size=x-large] .accept-reject-level,[data-font-size=x-large] .app,[data-font-size=x-large] .build-level{height:80vh}[data-font-size=large] .menu-screen{height:calc(100vh / 1.125);padding-top:8px;padding-bottom:8px}[data-font-size=large] .menu-header,[data-font-size=large] .menu-subtitle{margin-bottom:4px}[data-font-size=large] .menu-farmer{margin:4px 0}[data-font-size=large] .menu-farmer img{width:64px;height:64px}[data-font-size=large] .menu-buttons{gap:6px}[data-font-size=x-large] .menu-screen{height:80vh;padding-top:4px;padding-bottom:4px}[data-font-size=x-large] .menu-header{margin-bottom:0;gap:8px}[data-font-size=x-large] .menu-header img{display:none}[data-font-size=x-large] .menu-subtitle{margin-bottom:2px}[data-font-size=x-large] .menu-farmer{margin:2px 0}[data-font-size=x-large] .menu-farmer img{width:48px;height:48px}[data-font-size=x-large] .menu-buttons{gap:4px}[data-font-size=x-large] .level-btn{padding:8px 16px}@media(max-width:500px){[data-font-size=x-large] .level-btn-text{font-size:.875rem}[data-font-size=x-large] .level-btn-desc{font-size:.75rem}[data-font-size=x-large] .menu-header h1{font-size:1.3rem;white-space:nowrap}[data-font-size=large] .answer-buttons,[data-font-size=x-large] .answer-buttons,.dyslexia-font .answer-buttons,[data-letter-spacing=wider] .answer-buttons{flex-direction:column}[data-font-size=large] .answer-btn,[data-font-size=x-large] .answer-btn,.dyslexia-font .answer-btn,[data-letter-spacing=wider] .answer-btn{padding:.45em .7em;font-size:.85rem;min-height:2em}[data-font-size=large] .accept-reject-level .test-pattern img,[data-font-size=x-large] .accept-reject-level .test-pattern img,.dyslexia-font .accept-reject-level .test-pattern img,[data-letter-spacing=wider] .accept-reject-level .test-pattern img{width:36px!important;height:36px!important}[data-font-size=large] .accept-reject-level .sidebar,[data-font-size=x-large] .accept-reject-level .sidebar,.dyslexia-font .accept-reject-level .sidebar,[data-letter-spacing=wider] .accept-reject-level .sidebar{max-height:390px;overflow:auto}[data-font-size=large] .accept-reject-level .graph-area,[data-font-size=x-large] .accept-reject-level .graph-area,.dyslexia-font .accept-reject-level .graph-area,[data-letter-spacing=wider] .accept-reject-level .graph-area{min-height:0}[data-font-size=large] .accept-reject-level .question-card,[data-font-size=x-large] .accept-reject-level .question-card,.dyslexia-font .accept-reject-level .question-card,[data-letter-spacing=wider] .accept-reject-level .question-card{flex-shrink:0}}[data-line-spacing=normal]{--line-height: var(--line-height-normal)}[data-line-spacing=relaxed]{--line-height: var(--line-height-relaxed)}[data-line-spacing=loose]{--line-height: var(--line-height-loose)}[data-line-spacing=relaxed] *{line-height:var(--line-height-relaxed)!important}[data-line-spacing=loose] *{line-height:var(--line-height-loose)!important}[data-letter-spacing=normal]{--letter-spacing: var(--letter-spacing-normal)}[data-letter-spacing=wide]{--letter-spacing: var(--letter-spacing-wide)}[data-letter-spacing=wider]{--letter-spacing: var(--letter-spacing-wider)}[data-letter-spacing=wide] *{letter-spacing:var(--letter-spacing-wide)!important}[data-letter-spacing=wider] *{letter-spacing:var(--letter-spacing-wider)!important}[data-color-mode=deuteranopia]{--success-color: #0077BB;--error-color: #EE7733;--primary-color: #0077BB;--primary-dark: #005588;--primary-light: #33AADD;--toggle-on: #0077BB;--focus-color: #0077BB;--focus-ring: rgba(0, 119, 187, .3);--btn-hover-bg: #E5F2FF}[data-color-mode=protanopia]{--success-color: #009988;--error-color: #CC6600;--primary-color: #009988;--primary-dark: #007766;--primary-light: #33BBAA;--toggle-on: #009988;--focus-color: #009988;--focus-ring: rgba(0, 153, 136, .3);--btn-hover-bg: #E5FFF9}[data-color-mode=tritanopia]{--success-color: #009E73;--error-color: #D55E00;--info-color: #CC79A7;--warning-color: #E69F00;--primary-color: #009E73;--primary-dark: #007A5A;--primary-light: #33C49A;--toggle-on: #009E73;--focus-color: #009E73;--focus-ring: rgba(0, 158, 115, .3);--btn-hover-bg: #E5FFF5}[data-color-mode=high-contrast]{--text-color: #000000;--text-muted: #333333;--heading-color: #000000;--bg-color: #ffffff;--bg-secondary: #f0f0f0;--border-color: #000000;--success-color: #006600;--error-color: #CC0000;--primary-color: #000099;--primary-dark: #000066;--toggle-on: #006600;--focus-color: #000099;--focus-ring: rgba(0, 0, 153, .5)}[data-color-mode=dark]{--text-color: #E0E0E0;--text-muted: #AAAAAA;--text-light: #888888;--heading-color: #FFFFFF;--bg-color: #1E1E1E;--bg-secondary: #2D2D2D;--panel-bg: #252525;--card-bg: #2D2D2D;--border-color: #444444;--btn-bg: #3D3D3D;--btn-hover-bg: #4D4D4D;--input-bg: #2D2D2D;--toggle-off: #555555}.dyslexia-font,.dyslexia-font *{font-family:OpenDyslexic,Comic Sans MS,Arial,sans-serif!important}.dyslexia-font{font-size:calc(var(--font-size-base) * .8)}.dyslexia-font .level-btn-text{font-size:1.05rem}.dyslexia-font .level-btn-desc{font-size:.875rem}.dyslexia-font .menu-header h1{font-size:1.5rem}body{font-size:var(--font-size-base);line-height:var(--line-height, var(--line-height-normal));letter-spacing:var(--letter-spacing, normal);color:var(--text-color);background-color:var(--bg-color);transition:background-color var(--transition-normal),color var(--transition-normal)}h1,h2,h3,h4,h5,h6{color:var(--heading-color);line-height:1.3}p{line-height:var(--line-height, var(--line-height-normal));letter-spacing:var(--letter-spacing, normal)}.reduced-motion *,.reduced-motion *:before,.reduced-motion *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.larger-targets button,.larger-targets .btn,.larger-targets [role=button],.larger-targets a,.larger-targets input,.larger-targets select{min-height:48px;min-width:48px;padding:12px 20px}.larger-targets .accessibility-btn,.larger-targets .devtools-trigger{min-height:3.5rem;min-width:3.5rem;padding:1em}.larger-targets .fit-view-btn,.larger-targets .home-btn,.larger-targets .prev-btn,.larger-targets .sheep-badge,.larger-targets .devtools-close,.larger-targets .react-flow__controls-button{min-height:initial;min-width:initial;padding:initial}.larger-targets .level-btn{padding:24px 28px}.larger-targets .answer-btn{padding:20px 24px;font-size:1.2rem}[data-line-spacing=relaxed] .menu-screen{padding-top:10px;padding-bottom:10px}[data-line-spacing=relaxed] .menu-header,[data-line-spacing=relaxed] .menu-subtitle{margin-bottom:4px}[data-line-spacing=relaxed] .menu-farmer{margin:4px 0}[data-line-spacing=relaxed] .menu-farmer img{width:64px;height:64px}[data-line-spacing=relaxed] .menu-buttons{gap:6px}[data-line-spacing=loose] .menu-screen{padding-top:8px;padding-bottom:8px}[data-line-spacing=loose] .menu-header,[data-line-spacing=loose] .menu-subtitle{margin-bottom:2px}[data-line-spacing=loose] .menu-farmer{margin:2px 0}[data-line-spacing=loose] .menu-farmer img{width:48px;height:48px}[data-line-spacing=loose] .menu-buttons{gap:4px}[data-line-spacing=loose] .level-btn{padding:12px 24px}[data-font-size=large][data-line-spacing=relaxed] .menu-screen{height:calc(100vh / 1.125);padding-top:6px;padding-bottom:6px}[data-font-size=large][data-line-spacing=relaxed] .menu-header,[data-font-size=large][data-line-spacing=relaxed] .menu-subtitle{margin-bottom:2px}[data-font-size=large][data-line-spacing=relaxed] .menu-farmer{display:none}[data-font-size=large][data-line-spacing=relaxed] .menu-buttons{gap:4px}[data-font-size=large][data-line-spacing=loose] .menu-screen{height:calc(100vh / 1.125);padding-top:6px;padding-bottom:6px}[data-font-size=large][data-line-spacing=loose] .menu-header,[data-font-size=large][data-line-spacing=loose] .menu-subtitle{margin-bottom:2px}[data-font-size=large][data-line-spacing=loose] .menu-farmer{display:none}[data-font-size=large][data-line-spacing=loose] .menu-buttons{gap:4px}[data-font-size=large][data-line-spacing=loose] .level-btn{padding:10px 20px}[data-font-size=x-large][data-line-spacing=relaxed] .menu-screen{height:80vh;padding-top:4px;padding-bottom:4px}[data-font-size=x-large][data-line-spacing=relaxed] .menu-header,[data-font-size=x-large][data-line-spacing=relaxed] .menu-subtitle{margin-bottom:2px}[data-font-size=x-large][data-line-spacing=relaxed] .menu-farmer{display:none}[data-font-size=x-large][data-line-spacing=relaxed] .menu-buttons{gap:4px}[data-font-size=x-large][data-line-spacing=loose] .menu-screen{height:80vh;padding-top:4px;padding-bottom:4px}[data-font-size=x-large][data-line-spacing=loose] .menu-header,[data-font-size=x-large][data-line-spacing=loose] .menu-subtitle{margin-bottom:0}[data-font-size=x-large][data-line-spacing=loose] .menu-farmer{display:none}[data-font-size=x-large][data-line-spacing=loose] .menu-buttons{gap:2px}[data-font-size=x-large][data-line-spacing=loose] .level-btn{padding:4px 20px}@media(max-height:700px){[data-font-size=x-large][data-line-spacing=relaxed] .level-btn-desc,[data-font-size=x-large][data-line-spacing=loose] .level-btn-desc,[data-font-size=x-large][data-line-spacing=relaxed] .menu-subtitle,[data-font-size=x-large][data-line-spacing=loose] .menu-subtitle{display:none}}@media(max-height:930px)and (max-width:480px){[data-line-spacing=relaxed] .level-btn-desc,[data-line-spacing=loose] .level-btn-desc{display:none}[data-line-spacing=relaxed] .level-btn,[data-line-spacing=loose] .level-btn,[data-line-spacing=relaxed] .level-btn *,[data-line-spacing=loose] .level-btn *{line-height:1.4!important}}.dyslexia-font .menu-screen{padding-top:12px;padding-bottom:12px}.dyslexia-font .menu-header,.dyslexia-font .menu-subtitle{margin-bottom:6px}.dyslexia-font .menu-farmer{margin:4px 0}.dyslexia-font .menu-farmer img{width:70px;height:70px}.dyslexia-font .menu-buttons{gap:10px}[data-font-size=large] .dyslexia-font .menu-screen{height:calc(100vh / 1.125);padding-top:6px;padding-bottom:6px}[data-font-size=large] .dyslexia-font .menu-header,[data-font-size=large] .dyslexia-font .menu-subtitle{margin-bottom:2px}[data-font-size=large] .dyslexia-font .menu-farmer{display:none}[data-font-size=large] .dyslexia-font .menu-buttons{gap:6px}[data-font-size=large] .dyslexia-font .level-btn-text{font-size:1rem}[data-font-size=large] .dyslexia-font .level-btn-desc{font-size:.85rem}[data-font-size=large] .dyslexia-font .menu-header h1{font-size:1.3rem}[data-font-size=x-large] .dyslexia-font .menu-screen{height:80vh;padding-top:4px;padding-bottom:4px}[data-font-size=x-large] .dyslexia-font .menu-header,[data-font-size=x-large] .dyslexia-font .menu-subtitle{margin-bottom:0}[data-font-size=x-large] .dyslexia-font .menu-farmer{display:none}[data-font-size=x-large] .dyslexia-font .menu-buttons{gap:4px}[data-font-size=x-large] .dyslexia-font .level-btn-text{font-size:.95rem}[data-font-size=x-large] .dyslexia-font .level-btn-desc{font-size:.8rem}[data-font-size=x-large] .dyslexia-font .menu-header h1{font-size:1.2rem}.larger-targets .menu-screen{padding-top:12px;padding-bottom:12px}.larger-targets .menu-header,.larger-targets .menu-subtitle{margin-bottom:4px}.larger-targets .menu-farmer{margin:4px 0}.larger-targets .menu-farmer img{width:64px;height:64px}.larger-targets .menu-buttons{gap:8px}.reduced-colors .result-card.correct:before{content:"✓";position:absolute;top:10px;right:10px;font-size:2rem}.reduced-colors .result-card.incorrect:before{content:"✗";position:absolute;top:10px;right:10px;font-size:2rem}.reduced-colors .accept-btn:before{content:"✓ "}.reduced-colors .reject-btn:before{content:"✗ "}*:focus{outline:none}*:focus-visible{outline:3px solid var(--focus-color);outline-offset:2px}.skip-link{position:absolute;top:-100%;left:50%;transform:translate(-50%);padding:12px 24px;background:var(--primary-color);color:#fff;text-decoration:none;font-weight:600;border-radius:var(--radius-md);z-index:10001;transition:top .3s}.skip-link:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-mode .pattern-sheep:after{content:" sheep "}.sr-mode .arrow:after{content:" then "}@media(max-width:359px){:root{--font-size-base: 14px;--spacing-md: 12px}.menu-header h1{font-size:1.2rem}.level-btn-text{font-size:.9rem}}@media(min-width:360px)and (max-width:639px){.game-container{flex-direction:column}.sidebar{width:100%;max-height:40vh;overflow-y:auto}.graph-area{height:50vh;min-height:300px}.footer{padding:8px 12px}.sheep-palette{gap:4px}.sheep-item{width:50px;height:50px}}@media(min-width:900px)and (max-width:1023px){.game-container{flex-direction:row}.sidebar{width:280px;min-width:280px}.graph-area{flex:1}}@media(min-width:1024px){.sidebar{width:320px;min-width:320px}.menu-screen{max-width:600px;margin:0 auto}}@media(max-height:700px)and (max-width:639px){.header{padding:8px}.header-top{gap:8px}.header-top img{width:40px;height:40px}.header-top h1{font-size:1.1rem}.level-instruction{font-size:.85rem;margin:4px 0}}@media(pointer:coarse){button,.btn,[role=button]{min-height:44px;min-width:44px}.accessibility-btn,.devtools-trigger,.fit-view-btn,.home-btn,.sheep-badge,.a11y-close,.devtools-close{min-height:unset;min-width:unset}.answer-buttons{gap:16px}.controls{gap:12px}.level-btn:hover{transform:none}}@media print{.devtools-trigger,.accessibility-settings,.controls,.hint-box{display:none!important}body{background:#fff;color:#000}}[data-font-size=large] .a11y-panel{max-height:80vh}[data-font-size=x-large] .a11y-panel{max-height:72vh}[data-font-size=x-large] .a11y-overlay{padding:12px}.a11y-panel .a11y-header,.a11y-panel .a11y-footer,.a11y-panel .a11y-header *,.a11y-panel .a11y-footer *{line-height:normal!important}[data-font-size=x-large] .a11y-panel .a11y-header{padding:12px 16px}[data-font-size=x-large] .a11y-panel .a11y-footer{padding:8px 16px}[data-font-size=large]{--sheep-img-lg: 68px}[data-font-size=x-large]{--sheep-img-lg: 58px}.larger-targets .sheep-btn{padding:6px 8px;min-height:unset;min-width:unset}[data-font-size=large].larger-targets .sheep-btn,[data-font-size=x-large].larger-targets .sheep-btn{padding:4px 6px}@media(min-width:800px){[data-font-size=large] .app .game-container,[data-font-size=x-large] .app .game-container{flex-direction:row;flex:1;min-height:0}[data-font-size=large] .app .graph-column,[data-font-size=x-large] .app .graph-column{min-width:150px;width:auto;flex-shrink:1}[data-font-size=large] .app .graph-area,[data-font-size=x-large] .app .graph-area{flex:1;height:auto;max-height:none;min-height:clamp(180px,30vh,300px)}[data-font-size=large] .app .sidebar,[data-font-size=x-large] .app .sidebar{flex:0 1 35%;width:auto;min-width:0;max-height:calc(100dvh - 210px)}[data-font-size=large] .build-level .game-container,[data-font-size=x-large] .build-level .game-container{flex-wrap:nowrap;flex-direction:row}[data-font-size=large] .build-level .toolbar,[data-font-size=x-large] .build-level .toolbar{width:clamp(160px,14vw,220px);flex-direction:column;flex-wrap:nowrap;order:0;align-items:stretch;justify-content:flex-start;align-self:stretch;padding:10px;overflow:hidden}[data-font-size=large] .build-level .toolbar-divider,[data-font-size=x-large] .build-level .toolbar-divider{display:block}[data-font-size=large] .build-level .tool-grid,[data-font-size=x-large] .build-level .tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}[data-font-size=large] .build-level .tool-delete,[data-font-size=x-large] .build-level .tool-delete{grid-column:span 2}[data-font-size=large] .build-level .toolbar-sheep,[data-font-size=x-large] .build-level .toolbar-sheep{display:grid;grid-template-columns:1fr 1fr;gap:4px}[data-font-size=large] .build-level .graph-column,[data-font-size=x-large] .build-level .graph-column{min-width:130px;width:auto}[data-font-size=large] .build-level .graph-area,[data-font-size=x-large] .build-level .graph-area{flex:1;height:auto;max-height:none;min-height:0;width:auto;min-width:0}[data-font-size=x-large] .build-level .toolbar-sheep-item img{width:clamp(24px,4vh,40px);height:clamp(24px,4vh,40px)}[data-font-size=large] .build-level .tool-cell{min-height:0;padding:8px 6px;flex-shrink:1}[data-font-size=x-large] .build-level .tool-cell{min-height:0;padding:6px 4px;flex-shrink:1}[data-font-size=large] .build-level .arrow-cap,[data-font-size=x-large] .build-level .arrow-cap{padding:6px 10px}[data-font-size=large] .build-level .toolbar-sheep-item,[data-font-size=x-large] .build-level .toolbar-sheep-item{padding:4px;flex-shrink:1;min-height:0}[data-font-size=large] .build-level .toolbar-sheep-item img{width:clamp(26px,4.5vh,44px);height:clamp(26px,4.5vh,44px)}[data-font-size=large] .build-level .footer .btn,[data-font-size=x-large] .build-level .footer .btn,[data-font-size=large] .app .footer .btn,[data-font-size=x-large] .app .footer .btn{padding:.4em .8em;font-size:13px;min-height:unset}[data-font-size=large].larger-targets .build-level .footer .btn,[data-font-size=x-large].larger-targets .build-level .footer .btn,[data-font-size=large].larger-targets .app .footer .btn,[data-font-size=x-large].larger-targets .app .footer .btn{padding:.4em .8em;min-height:unset}}@media(max-width:500px){[data-font-size=large] .app .main-content,[data-font-size=x-large] .app .main-content{display:grid;grid-template-rows:auto 1fr auto}[data-font-size=large] .app .game-container{height:100%}[data-font-size=x-large] .app .main-content{grid-template-rows:auto auto auto;align-content:start}[data-font-size=x-large] .app .game-container{height:auto}[data-font-size=x-large] .app .graph-column{flex:none;height:auto}[data-font-size=x-large] .app .graph-area{height:140px;max-height:140px;min-height:0;flex:none}[data-font-size=large] .app .sheep-btn,[data-font-size=x-large] .app .sheep-btn{flex:0 0 32px;padding:1px}[data-font-size=large] .app .controls,[data-font-size=x-large] .app .controls{flex-wrap:nowrap;justify-content:flex-start}}@media(max-width:800px){[data-font-size=large] .pattern-row,[data-font-size=x-large] .pattern-row{padding:4px 8px;margin-bottom:4px}[data-font-size=large] .pattern-row img,[data-font-size=x-large] .pattern-row img{width:36px;height:36px}[data-font-size=large] .patterns-unmatched,[data-font-size=x-large] .patterns-unmatched{margin:4px 0}[data-font-size=large] .feedback-big-icon,[data-font-size=x-large] .feedback-big-icon{font-size:1.6rem}}.color-overlay{position:fixed;inset:0;pointer-events:none;z-index:9998;mix-blend-mode:multiply}:root{--green-dark: #2E7D32;--green-main: #4CAF50;--green-light: #81C784;--green-bg: #E8F5E9;--brown-dark: #5D4037;--brown-main: #8B4513;--brown-light: #A0522D;--node-size: clamp(80px, 12vw, 120px);--sheep-img-sm: clamp(36px, 6vw, 56px);--sheep-img-md: clamp(44px, 8vw, 64px);--sheep-img-lg: clamp(50px, 10vw, 80px);--sidebar-width: clamp(180px, 30vw, 400px)}html,body,#root{height:100%;margin:0;padding:0;overflow:hidden}button{font-family:Nunito,Segoe UI,sans-serif}