body{background-color:#f2f2f2;font-family:sans-serif}h1{padding-left:10px}h3{margin:0}#top{display:flex;background-color:#f2f2f2;padding:10px;overflow-y:auto}.editor-wrapper{flex:1;max-width:75%;margin:10px;overflow-y:auto}.collaps{background-color:#ddd;cursor:pointer;padding:10px;width:100%;border:1px solid #ccc;border-radius:5px 5px 0 0;text-align:left;outline:none;font-size:20px}.collaps:hover{background-color:#ccc}.tutorial{display:flex;flex-direction:row;font-size:20px;padding:0 10px;border-radius:0 0 5px 5px;overflow:hidden;background-color:#ddd}.t-l,.t-r{width:50%}.label{font-size:20px;margin-bottom:5px}.editor{flex:1;background-color:#fff;padding:5px;font-family:monospace;font-size:16px;border:3px solid #ccc;border-radius:5px;margin-bottom:10px;white-space:pre-wrap}.info{box-sizing:border-box;position:relative;display:block;transform:scale(var(--ggs,1));width:20px;height:20px;border:2px solid;border-radius:40px;margin-left:5px}.info:after,.info:before{content:"";display:block;box-sizing:border-box;position:absolute;border-radius:3px;width:2px;background:currentColor;left:7px}.info:after{bottom:2px;height:8px}.info:before{height:2px;top:2px}.tooltip{position:absolute;width:max-content;background-color:#555;color:#fff;padding:8px;border-radius:4px;z-index:9;transform:translate(50%)}.expr{display:flex;flex-direction:column}.expr>input{flex:1}#expr{background-color:#fff;padding:5px;font-family:monospace;font-size:16px;border:3px solid #ccc;border-radius:5px;margin-bottom:10px}textarea{resize:none}.examples{display:flex;flex-direction:column;flex:1;max-width:25%;margin:10px;overflow-y:scroll}.buttons{display:flex;flex-wrap:wrap;gap:10px}.settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap}.settings-header>.label{margin-bottom:0;font-size:20px}.settings{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center}.settings>label{margin:0}.expert-toggle{display:block;cursor:pointer;border:1px solid #ccc;border-radius:5px;color:#042c58;background-color:#ccc}.slider-settings{display:flex;flex-direction:row}.slider-settings>.settings{gap:0;flex:1}.slider-settings>.settings>.label{max-width:200px}.setting-item{display:flex;align-items:center;gap:10px;margin-right:10px}.virtual-clicks-input{width:40px;height:40px;border:2px solid #ccc;border-radius:10%;box-sizing:border-box}.slider-control{display:flex;flex-direction:column;align-items:center;width:120px}.settings .slider-value{font-family:monospace}.settings input[type=range]{vertical-align:middle;width:90%;margin:0}input[type=checkbox]{transform:scale(1.5)}.settings-actions{display:flex;flex-direction:row;align-items:center}.buttons .button{flex:1 0 150px;width:100%;overflow:hidden;text-align:center}.button{background-color:#6ab2e7;color:#fff;font-size:16px;border:none;border-radius:5px;padding:8px;cursor:pointer;box-sizing:border-box}.buttons .button.w{flex:0 0 150px;background-color:#ffa883}.button.w:hover{background-color:#ff6928}.button:hover{background-color:#042c58;box-shadow:#0000001a 0 4px 12px;transform:translateY(-1px)}.button:active{border-color:#00000026;box-shadow:#0000000f 0 2px 4px;transform:translateY(0)}.b-ml{margin-left:5px}.icon{height:1em}.fileInput{display:inline-block;background-color:#ddd;font-size:16px;border:none;border-radius:5px;padding:10px;margin:5px;cursor:pointer}.fileInput:hover{background-color:#ccc;box-shadow:#0000001a 0 4px 12px}#bottom{padding-left:20px;padding-right:20px}.footer{bottom:0;width:100%;text-align:center;padding:10px 0}#main-container{display:flex;width:100%}#left-panel{flex-shrink:1;flex-basis:60%;padding:20px;border-right:1px solid #ccc}#right-panel{flex-grow:1;flex-shrink:0;margin:20px;overflow-x:auto;max-width:60%;transition:flex-basis .3s ease}.editor-wrapper.hl{max-width:100%;margin-top:10px}.examples.hl{max-width:100%}.error-message{color:red;font-size:large;background-color:#ffe0e0;border:1px solid red;padding:15px;border-radius:4px;white-space:pre-wrap}.error-message p{margin:0 0 5px}.error-message strong{margin-right:5px}.runtime-warning{color:orange;font-size:large;background-color:#fff0e0;border:1px solid orange;padding:15px;border-radius:4px;white-space:pre-wrap;margin-bottom:10px}.runtime-warning p{margin:0 0 5px}.runtime-warning strong{margin-right:5px}.colors{display:flex;flex-direction:row;align-content:center;margin:10px}.colors>div{display:flex;align-items:center}.colors>div>label{font-size:20px}.color{display:inline-block;width:20px;height:20px;border:1px solid black;margin-left:10px;margin-right:10px}.diagram,.dc-diagram{min-width:calc(var(--node-spacing-h) + 2 * var(--node-size) + 10px);max-width:100;border:3px solid #ccc;border-radius:5px;background-color:#fff;padding:15px;overflow:scroll}.diagram-plus{position:relative;border:3px solid #ccc;border-radius:5px;padding:10px}.graph{display:flex;position:relative;flex-direction:row;border-radius:5px;overflow:visible}.diagram>.graph{margin-right:10px}.node>.graph{flex:1}.node{display:flex;flex-direction:column;overflow:visible}.node>.graph>.node{margin-left:calc(.3 * var(--node-spacing-h) - .5 * var(--node-size))}.node.v>.graph.v>.node.v{margin-top:calc(.3 * var(--node-spacing-h) - .5 * var(--node-size));margin-left:0;margin-right:0}.mr{margin-right:calc(.3 * var(--node-spacing-h) - .5 * var(--node-size))}.p-wrapper{position:relative}.node>.p-wrapper>p{position:relative;width:var(--node-size);height:var(--node-size);border-radius:50%;background-color:#ccc;text-align:center;color:#000;box-shadow:0 2px 4px #0000004d;cursor:pointer;font-size:var(--font-size);line-height:var(--node-size);margin-top:0;margin-bottom:0;overflow:hidden;text-overflow:ellipsis}.tooltip{position:absolute;top:calc(50% - var(--font-size));bottom:auto;transform:translateY(-50%);background-color:#333;color:#fff;padding:5px 10px;border-radius:4px;font-size:calc(.8 * var(--font-size));white-space:nowrap;z-index:1000;box-shadow:0 2px 4px #0003;pointer-events:none}.tooltip-right{left:100%;margin-left:8px}.tooltip-left{right:100%;margin-right:8px}.node.v,.fill.v{flex-direction:row}.graph.v{flex-direction:column;margin-right:0}.node>.p-wrapper>p:hover{background-color:#eee}.fill{display:flex;flex-direction:column}.v-fill{flex:1;border-radius:5px;text-align:center}.h-fill{display:flex;flex:1;min-width:calc(var(--node-spacing-h) + var(--node-size))}.v-re{display:flex;justify-content:flex-end;align-items:center;width:calc(100% - 5px);font-size:var(--font-size)}.edge-right,.dc-edge-right{position:relative;width:var(--node-spacing-h);height:calc(.5 * var(--node-size) - 2px);border-bottom:2px solid black;margin-bottom:calc(.5 * var(--node-size) + 1px);font-size:var(--font-size);line-height:1em;text-align:center}.edge-right.v{flex:1}.edges-right{display:flex;flex-direction:row}.edges-down{display:flex;flex-direction:column}.edge-right.edgeshift{height:calc(var(--node-size) - 2px);width:calc(.3 * var(--node-spacing-h) - 2px);border-top:2px solid black;border-right:2px solid black;border-bottom:0;margin-top:calc(.5 * var(--node-size) - 1px);margin-bottom:0}.edge-right-fill{height:calc(var(--node-size) - 2px);flex:1;border-top:2px solid black;margin-top:calc(.5 * var(--node-size) - 1px)}.edge-right.result,.dc-edge-right.result{margin-top:0;margin-bottom:calc(.5 * var(--node-size) - 1px)}.edge-right.result.edgeshift{border-top:0;border-bottom:2px solid black}.edge-right-fill.result{border-top:0;border-bottom:2px solid black;margin-top:0;margin-bottom:calc(.5 * var(--node-size) - 1px)}.edge-down{position:relative;min-height:var(--node-spacing-v);max-width:calc(.5 * var(--node-size) - 1px);border-right:2px solid black;font-size:var(--font-size);flex:1}.edge-down-fill{width:calc(var(--node-size) - 2px);flex:1;border-left:2px solid black;margin-left:calc(.5 * var(--node-size) - 1px)}.edge-down-fill.result{margin-right:calc(.5 * var(--node-size) - 1px);margin-left:0;border-right:2px solid black;border-left:0}.edge-down.edgeshift{min-width:calc(var(--node-size) - 2px);max-width:calc(var(--node-size) - 2px);min-height:calc(.3 * var(--node-spacing-h) - 2px);max-height:calc(.3 * var(--node-spacing-h) - 2px);border-bottom:2px solid black;border-left:2px solid black;border-top:0;border-right:0;margin-left:calc(.5 * var(--node-size) - 1px);margin-top:0}.edge-down.result.edgeshift{border-right:2px solid black;border-left:0;margin-left:0;margin-right:calc(.5 * var(--node-size) - 1px)}.edge-up{position:relative;min-height:var(--node-spacing-v);max-width:calc(.5 * var(--node-size) - 1px);border-left:2px solid black;font-size:var(--font-size);flex:1}.arrow-right{border:solid black;border-width:0 2px 2px 0;display:inline-block;position:absolute;top:calc(.5 * var(--node-size) - 7px);right:1px;padding:5px;transform:rotate(-45deg);z-index:1}.arrow-right.edgeshift{top:calc(.3 * var(--node-spacing-h) - 7px);right:1.5px}.arrow-left{border:solid black;border-width:0 2px 2px 0;display:inline-block;position:absolute;top:calc(.5 * var(--node-size) - 7px);left:1px;padding:5px;transform:rotate(135deg);z-index:1}.arrow-left.edgeshift{top:calc(var(--node-size) - 7px)}.arrow-down{border:solid black;border-width:0 2px 2px 0;display:inline-block;position:absolute;left:calc(.5 * var(--node-size) - 6px);bottom:1px;padding:5px;transform:rotate(45deg);z-index:1}.arrow-up{border:solid black;border-width:0 2px 2px 0;display:inline-block;position:absolute;right:calc(.5 * var(--node-size) - 6px);top:1px;padding:5px;transform:rotate(-135deg);z-index:1}.arrow-up.edgeshift{left:calc(var(--node-size) - 7px)}.arrow-down.edgeshift{left:calc(.3 * var(--node-spacing-h) - 7px)}.edge-down.rt{max-width:calc(.5 * var(--rt-node-size) - 1px);min-height:calc(.2 * var(--node-spacing-v))}.arrow-down.rt{left:calc(.5 * var(--rt-node-size) - 6px)}.edge-down.result.rt{min-height:calc(.25 * var(--node-spacing-v));border-bottom:2px solid black;margin-bottom:calc(.5 * var(--node-size) - 1px)}.node.rt>.p-wrapper>p{border-radius:5%;width:var(--rt-node-size);font-size:var(--rt-font-size)}.node.rectangularNodes>.p-wrapper>p{border-radius:5%;width:var(--rectangular-node-size)}.edge-down.rectangularNodes,.edge-up.rectangularNodes{max-width:calc(.5 * var(--rectangular-node-size) - 1px)}.arrow-down.rectangularNodes{left:calc(.5 * var(--rectangular-node-size) - 6px)}.arrow-up.rectangularNodes{right:calc(.5 * var(--rectangular-node-size) - 6px)}.edge-right.edgeshift.rectangularNodes{width:calc(.3 * var(--node-spacing-h) - 2px + .5 * (var(--rectangular-node-size) - var(--node-size)))}.arrow-down.edgeshift.rectangularNodes{left:calc(.3 * var(--node-spacing-h) - 7px + .5 * (var(--rectangular-node-size) - var(--node-size)))}.arrow-right.ellipsis,.arrow-left.edgeshift.ellipsis,.arrow-left.ellipsis{top:calc(.5 * var(--node-ellipsis-height) - 7px)}.edge-right-fill.ellipsis{height:calc(var(--node-ellipsis-height) - 2 px);margin-top:calc(.5 * var(--node-ellipsis-height) - 1px)}.edge-right.edgeshift.result.ellipsis{margin-top:0;margin-bottom:calc(.5 * var(--node-ellipsis-height) - 1px)}.edge-right-fill.result.ellipsis{margin-bottom:calc(.5 * var(--node-ellipsis-height) - 1px);margin-top:calc(.5 * var(--node-ellipsis-height) - 2px)}.hover-details-box{margin-top:15px;padding:10px;border:1px solid #ccc;background-color:#f9f9f9;border-radius:4px;word-wrap:break-word;white-space:pre-wrap}.hover-details-box h4{margin-top:0;margin-bottom:5px;font-size:1.1em}.hover-details-box pre{margin:0;font-family:monospace;font-size:.95em}.popup{position:absolute;width:max-content;background-color:#555;color:#fff;padding:8px;border-radius:4px;margin-top:calc(.5 * var(--node-size));margin-left:calc(.5 * var(--node-size));transform:translate(-50%,-20px);z-index:10000;overflow:visible}.edgePopup{position:absolute;width:max-content;background-color:#555;color:#fff;padding:8px;border-radius:4px;margin-top:calc(.5 * var(--node-spacing-h));margin-left:calc(.5 * var(--node-spacing-h));transform:translate(-50%);bottom:100%;z-index:9}.details-panel{position:absolute;top:5px;right:5px;max-width:400px;background-color:#f0f0f0e1;border:1px solid #ccc;border-radius:5px;padding:15px;box-shadow:2px 2px 10px #0000001a;z-index:100;max-height:180px;overflow-y:auto}.details-panel h4{margin-top:0;margin-bottom:10px;border-bottom:1px solid #ccc;padding-bottom:5px}.detail-items{display:flex;flex-direction:row;gap:10px}.details-panel{margin-bottom:10px}.details-panel strong{display:block;margin-bottom:3px;font-size:.9em;color:#555}.details-panel pre{background-color:#ffffffe1;padding:5px 8px;border-radius:3px;border:1px solid #ddd;white-space:pre-wrap;word-break:break-all;margin:0;font-family:monospace;font-size:.95em}.details-panel .close-button{position:absolute;top:5px;right:5px;background:none;border:none;font-size:20px;font-weight:700;color:#888;cursor:pointer;padding:0 5px;line-height:1}.details-panel .close-button:hover{color:#333}:root{--node-size: 50px;--rt-node-size: 100px;--dc-node-size: 150px;--rectangular-node-size: 150px;--node-ellipsis-height: calc(var(--node-size) / 3);--node-spacing-h: 150px;--node-spacing-v: 100px;--font-size: 18px;--rt-font-size: 15px}.dc-diagram{padding-top:80px;padding-bottom:80px}.exercise-plus{position:relative;border:3px solid #ccc;border-radius:5px;padding:10px}.exercise-selection,.exercise-panel{margin-top:15px;margin-bottom:15px;padding:15px;border:1px solid #ccc;border-radius:4px}.exercise-panel>.editor{line-height:1.6}.blank-container,.dc-blank-container,.dc-edge-blank-container{display:inline-block;position:relative;vertical-align:baseline;margin:0 2px}.dc-blank-container{display:inline-flex;max-width:170px;align-items:center}.dc-edge-blank-container{display:inline-flex;max-width:176px;align-items:center}.editor>span{padding:0 2px 0 6px}.editor>.blank-container{padding:0}.help-icon-container,.dc-help-icon-container{position:relative;display:inline-block;vertical-align:middle}.help-icon{position:relative;display:inline-block;cursor:pointer;font-weight:700;color:#fff;border:1px solid #ff0000;border-radius:50%;width:1.3em;height:1.3em;line-height:1.3em;text-align:center;font-size:.8em;vertical-align:middle;background-color:red;-webkit-user-select:none;user-select:none}.flash-animation{animation:flash 1s infinite}@keyframes flash{0%,to{opacity:1}50%{opacity:.2}}.available-hint-tooltip,.available-hint-tooltip:before,.prompt-tooltip:before{position:absolute}.available-hint-tooltip{bottom:100%;left:50%;transform:translate(-50%);background-color:#333333f2;color:#fff;padding:5px 10px;margin-bottom:5px;border-radius:4px;line-height:1.5em;font-size:.9em;white-space:nowrap;z-index:101;box-shadow:0 2px 6px #0003;min-width:150px;text-align:center}.available-hint-tooltip:before,.prompt-tooltip:before{content:"";top:100%;left:50%;transform:translate(-50%);border-width:5px 5px 0 5px;border-style:solid;border-color:rgba(51,51,51,.95) transparent transparent transparent}.prompt-tooltip{position:absolute;display:flex;flex-direction:column;align-items:center;bottom:100%;left:50%;transform:translate(-50%);background-color:#333333f2;color:#fff;padding:6px 10px;margin-bottom:5px;border-radius:4px;line-height:1.5em;font-size:.9em;font-family:sans-serif;white-space:nowrap;z-index:102;box-shadow:0 2px 6px #0003;overflow:visible}.prompt-nav{display:flex;align-items:center;justify-content:center;width:100%;margin-top:5px;z-index:100}.nav-button{background:none;border:1px solid #ccc;color:#ccc;border-radius:4px;cursor:pointer;padding:0 5px;line-height:1;font-size:.9em;z-index:100}.nav-button:disabled{opacity:.5;cursor:not-allowed}.prompt-counter{font-size:.8em;color:#ccc;margin:0 5px}.explanation-tooltip{position:absolute;bottom:110%;left:100%;transform:translate(-50%);background-color:#333333f2;color:#fff;padding:6px 10px;border-radius:4px;font-size:.9em;font-family:sans-serif;white-space:normal;min-width:250px;max-width:400px;z-index:99;box-shadow:0 2px 6px #0003;pointer-events:none;text-align:left}.explanation-tooltip.correct{background-color:#006400e6}.explanation-tooltip.incorrect{background-color:#8b0000e6}.blank-input,.dc-blank-input,.dc-edge-blank-input{border:2px solid #ccc;padding:1px 3px;font-family:monospace;font-size:1em;min-width:100px;background-color:#f0f0f0;border-radius:3px;vertical-align:baseline;margin-right:3px;margin-top:5px;margin-bottom:5px}.dc-blank-input{min-width:70px;max-width:140px;height:1.5em}.dc-edge-blank-input{min-width:70px;height:1.5em}.blank-input.correct,.dc-blank-input.correct,.dc-edge-blank-input.correct{border:3px solid green;background-color:#e6ffe6}.blank-input.incorrect,.dc-blank-input.incorrect,.dc-edge-blank-input.incorrect{border:3px solid red;background-color:#ffe6e6}.feedback-icon{margin-left:5px;vertical-align:middle}.explanation{font-size:.85em;margin-top:2px;margin-left:5px}.explanation.correct{color:green}.explanation.incorrect{color:red}.button:disabled{opacity:.5;cursor:not-allowed}.dc-node>p{position:relative;height:var(--node-size);width:var(--dc-node-size);font-size:var(--rt-font-size);border-radius:5%;background-color:#ccc;text-align:center;color:#000;box-shadow:0 2px 4px #0000004d;cursor:pointer;font-size:var(--font-size);line-height:var(--node-size);margin-top:0;margin-bottom:0;padding-left:10px;padding-right:10px;overflow:visible;text-overflow:ellipsis}.dc-node>p>input{margin:0;max-width:calc(var(--dc-node-size) - 20px);border-radius:5%}.dots{position:relative;height:var(--node-size);font-size:calc(2 * var(--font-size));line-height:calc(var(--node-size) - 4px);margin-left:20px;margin-right:20px}.dc-short{width:50px}.edge-right.dc{width:180px}.edge-down.dc{min-height:120px;width:calc(.5 * var(--dc-node-size) + 8px);max-width:calc(.5 * var(--dc-node-size) + 8px)}.arrow-down.dc{left:calc(.5 * var(--dc-node-size) + 3px)}.edge-blank{width:100%;position:relative;top:15px;margin-left:10px;margin-right:5px;z-index:10;font-size:1.4em}.edge-blank+.dc-help-icon-container{top:15px}