@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(./poppins-v21-latin-regular-cpxAROuN.woff2) format("woff2"),url(./poppins-v21-latin-regular-DFPSF5un.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(./poppins-v21-latin-500-C8OXljZJ.woff2) format("woff2"),url(./poppins-v21-latin-500-BxoKRKBW.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(./poppins-v21-latin-600-zEkxB9Mr.woff2) format("woff2"),url(./poppins-v21-latin-600-Y7qvbR95.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(./poppins-v21-latin-700-Qrb0O0WB.woff2) format("woff2"),url(./poppins-v21-latin-700-OF5qx8Ai.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--header-height: 80px;--color-casper-blue-light: #d7e1ea;--color-casper-blue-mid: #38536B;--color-casper-blue-dark: #2a3e50;--color-casper-blue-black: #1c2a35;--color-gold-black: #00343d;--color-gold-dark: #00adcc;--color-gold: #00d8ff;--color-gold-light: #5CE7FF;--color-silver: #bcc6cc;--color-highlight-blue: #86BBD8;--color-highlight-gold: #D4C685;--color-highlight-pink: #E56399;--color-submit-red: #C41C38;--color-submit-green: #13b579;--color-bluish-white: #f3f4f6}body{--background-color: white;--surface-color: #e7eef4;--text-color: var(--color-casper-blue-black);--theme-color: var(--color-casper-blue-dark)}body{font-family:Montserrat,sans-serif;font-weight:400;font-size:18px;font-size:clamp(15px,calc(15px + 3 * ((100vw - 768px) / 932)),18px);line-height:1.6;color:var(--color-blue)}textarea,input{font-family:Montserrat,sans-serif}h1,.text-h1{font-size:70px;font-size:clamp(35px,calc(35px + 35 * ((100vw - 768px) / 932)),70px);font-weight:700;line-height:1.1}code{padding:2px 4px;font-size:90%;color:var(--code-color);background-color:var(--code-bg);white-space:nowrap;border-radius:4px}html,body{margin:0;padding:0;overflow-x:hidden;display:flex;flex-direction:column;overscroll-behavior:none}html{overflow-y:scroll;scroll-behavior:smooth}body{overflow:hidden}main{display:flex;flex-direction:column}body{font-family:Poppins,sans-serif;font-weight:400;color:var(--color-casper-blue-dark)}footer{margin-top:auto;padding-top:3rem;z-index:9000}:root{--color-blue: #242265;--color-blue-2: #252266;--color-blue-3: #45437e;--color-blue-4: #666495;--color-blue-5: #8685ab;--color-blue-6: #a7a7c2;--color-blue-7: #c8c8d9;--color-orange: #ff6c00;--color-orange-2: #f66a00;--color-orange-3: #f78119;--color-orange-4: #f89743;--color-orange-5: #f9ad6e;--color-orange-6: #fac496;--color-orange-7: #fcdabe;--color-light-blue: #00d8ff;--color-light-blue-2: #54dfff;--color-light-blue-3: #69e5ff;--color-light-blue-4: #67e9ff;--color-light-blue-5: #a4f0ff;--color-light-blue-6: #c6f6ff;--color-light-blue-7: #e8fcff;--color-green: #c0fc1a;--color-green-2: #cdfc1c;--color-green-3: #d6fd51;--color-green-4: #dffd79;--color-green-5: #e8fe9e;--color-green-6: #f0fec4;--color-green-7: #faffe8;--color-purple: #ba85ff;--color-purple-2: #c297ff;--color-purple-3: #cdaaff;--color-purple-4: #d8bcff;--color-purple-5: #e2cfff;--color-purple-6: #eee1ff;--color-purple-7: #f8f3ff;--color-yellow: #FCFE1F;--color-yellow-2: #f8fa4a;--color-yellow-3: #feff72;--color-yellow-4: #feff86;--color-yellow-5: #ffff98;--color-yellow-6: #ffffbf;--color-yellow-7: #f9ffc4;--color-casper-blue: #aec3d5;--color-aqua-island: #9ed2dc;--code-color: #00d8ff;--code-bg: #20242a;--color-pigeon-blue: #a1c0c5;--color-pigeon-blue-dark: #8aabb0;--color-gray: #d9d9d9;--color-gray-2: #aaa;--color-light-blue-dirty: #6699CC;--color-yellow-dirty: #CCCC66;--color-developer-dark: #29313b;--color-light-blue-section: #ccf7ff;--color-blue-section: #d3d3e0;--color-orange-section: #ffe9d8;--color-green-section: #f2fed1;--color-purple-section: #f1e7ff}*,*:before,*:after{box-sizing:border-box}html{scroll-padding-top:calc(var(--header-height) + 1rem)}body{min-height:100vh;padding-top:var(--header-height);overflow:clip}main{position:relative}a{color:inherit}.d-flex{display:flex}:root body{color-scheme:light;--background-color: white;--menu-bar-color: #f3f4f6;--text-color: var(--color-blue);--border-color: #e8eaed;--promo-card-background: white;--info-box-background: #e8eaed}:root[theme=dark] body{color-scheme:dark;--background-color: #1e1e1e;--menu-bar-color: #393939;--text-color: #f7f7f7;--border-color: #2b2b2b;--promo-card-background: #393939;--info-box-background: #2b2b2b}html{overflow:hidden}body{display:grid;grid-template-areas:"header header" "sidebar main" "footer footer";grid-template-columns:76px 1fr;grid-template-rows:70px 1fr 20px;height:100vh;font-size:16px;background-color:var(--menu-bar-color);color:var(--text-color);transition:grid-template .5s cubic-bezier(.23,1,.32,1);padding-top:0}body.theme-playground{--theme-color: var(--color-light-blue);--theme-text-color: var(--color-blue);--theme-alt-color: var(--color-blue);--theme-text-alt-color: white}body.sidebar-expanded{grid-template-columns:240px 1fr}ul{line-height:inherit}.anchor{margin:initial}.playground-header{grid-area:header;display:flex;height:70px;align-items:center;padding:0 13px;background:var(--menu-bar-color);border-bottom:0}.playground-header #yplay-menu-button{width:50px;height:50px;margin-right:1rem}.playground-header .playground-logo{display:flex;align-items:center;height:100%;padding:.9rem 0;gap:.7rem;font-size:20px}.playground-header .playground-logo .logo{height:100%;width:auto}.playground-header #yplay-title{opacity:0;transform:translate(-30px);transition:opacity .5s ease,transform .5s ease}.playground-header #yplay-title:before{content:"";transform:translate(15px) rotate(-45deg);transition:transform .5s ease}.playground-header #yplay-title.add-breadcrumb{opacity:1;transform:translate(0)}.playground-header #yplay-title.add-breadcrumb:before{transform:translate(0) rotate(-45deg)}.playground-header .add-breadcrumb:before{content:"";position:relative;display:inline-block;width:7px;height:7px;margin-right:1rem;vertical-align:middle;border:solid var(--color-light-blue);border-width:0 2px 2px 0;transform:rotate(-45deg)}.playground-header .playground-links{display:flex;align-items:center;height:100%;margin-left:auto;gap:2rem}.playground-header .playground-link{position:relative;font-size:18px;font-weight:600;text-decoration:none;transition:color .5s ease;cursor:pointer}.playground-header .playground-link:hover{color:var(--color-light-blue)}.tool-button{position:relative;display:flex;align-items:center;height:50px;padding:0;appearance:none;border:none;border-radius:100px;overflow:hidden;font-weight:500;font-size:14px;white-space:nowrap;color:inherit;background-color:transparent;cursor:pointer;text-decoration:none;transition:background-color .2s ease,opacity .5s ease,box-shadow .5s ease,filter .5s ease}.tool-button:hover{background-color:var(--border-color)}.tool-button.tool-button--main{margin:.5rem 0;color:var(--color-blue);background-color:var(--color-light-blue-2);box-shadow:0 4px 5px #00000024,0 1px 10px #0000001f,0 2px 4px -1px #0003}.tool-button.tool-button--main:hover{background-color:var(--color-light-blue)}.tool-button .icon{flex:0 0 50px;height:20px;width:50px;fill:currentColor}.tool-button .disabled,.tool-button.disabled,body:not(.yplay-loaded) .tool-button.require-loaded{opacity:.5;pointer-events:none;box-shadow:none;filter:grayscale(1)}input,textarea{appearance:none;flex:1;width:100%;border:1px solid #ccc;height:40px;padding:.6rem;border-radius:3px}:is(input,textarea)::placeholder{color:inherit;opacity:.5}textarea{height:250px;resize:vertical}.playground-sidebar{grid-area:sidebar;position:relative;display:flex;flex-direction:column;width:100%;height:100%;gap:.2rem;padding:.5rem 13px 0;background-color:var(--menu-bar-color)}.playground-sidebar hr{width:100%;opacity:.3}#playground-dialog{position:relative;width:100%;max-width:650px;min-height:60px;padding:0;background-color:var(--menu-bar-color);outline:none;border:none;border-radius:4px;color:var(--text-color);box-shadow:0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f,0 11px 15px -7px #0003;animation:pop-up .25s cubic-bezier(.34,1.56,.64,1) forwards}#playground-dialog::backdrop{background-color:#0000004d;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);transition:background-color .3s ease}#playground-dialog[sheet=promo]{background-color:var(--promo-card-background);max-width:800px}#playground-dialog[sheet=export] input.validation-error+div.text-small{display:block!important}#playground-dialog[sheet=export] div.text-small.validation-error{display:block!important}#playground-dialog .text-small{font-size:12px}#playground-dialog #playground-dialog-close{position:absolute;display:flex;justify-content:center;align-items:center;right:10px;top:10px;width:30px;height:30px;border-radius:50%;background-color:var(--text-color);color:var(--background-color);cursor:pointer;transition:background-color .3s ease}#playground-dialog #playground-dialog-close:hover{background-color:color-mix(in srgb,var(--text-color),var(--background-color) 20%)}#playground-dialog .dialog-sheet{padding:25px}#playground-dialog .dialog-sheet.hidden{display:none}#playground-dialog .dialog-heading{font-size:clamp(18px,calc(18px + 2 * ((100vw - 768px) / 932)),20px);font-weight:700;margin-bottom:1.5rem}#playground-dialog .info-box{background-color:var(--info-box-background);padding:10px 15px;border-radius:4px;font-size:14px}main{grid-area:main;overflow:hidden}footer{grid-area:footer;font-size:12px;text-align:right;padding-top:0;padding-right:.5rem;opacity:.5}footer a{text-decoration:none}y-play{border-radius:8px 0 0 8px;height:100%;background-color:var(--background-color-2);border:none;overflow:hidden}y-play .playground-toolbar{align-items:center;justify-content:center;gap:1rem;border-radius:0}#share-link-copy.show-copied{cursor:default}#share-link-copy.show-copied:before{content:"";position:absolute;width:110%;height:110%;top:-5%;left:-5%;border-radius:50%;background-color:color-mix(in srgb,var(--background-color) 90%,transparent);animation:show-copy-checkmark 1s ease alternate 2 forwards}#share-link-copy.show-copied:after{content:"";position:absolute;display:flex;width:5px;height:10px;top:20px;left:22.5px;transform:rotate(45deg);border-style:solid;border-color:var(--text-color);border-width:0 2px 2px 0;animation:show-copy-checkmark 1s ease alternate 2 forwards}#yplay-export-button:before{content:"You may download the app without referencing your yFiles package, which is required to run it.";position:absolute;width:100%;height:auto;bottom:calc(100% + .2rem);left:0;background-color:#faf5f0;border:2px solid #ff6c00;border-radius:4px;color:#242265;text-align:left;text-wrap:auto;font-size:16px;padding:.5rem;opacity:0;transition:opacity .2s ease;pointer-events:none}#yplay-export-button .export-button-text--error{display:none}#yplay-export-button.validation-error{background-color:var(--color-orange)}#yplay-export-button.validation-error .export-button-text{display:none}#yplay-export-button.validation-error .export-button-text--error{display:block}#yplay-export-button.validation-error:hover:before{opacity:1;pointer-events:auto}.samples-list{display:flex;flex-direction:column;gap:1rem}.samples-list .sample-button{position:relative;display:flex;align-items:center;height:35px;width:320px;padding:0 1rem;appearance:none;border:none;border-radius:100px;white-space:nowrap;color:inherit;background-color:var(--border-color);cursor:pointer;font-size:14px;transition:background-color .2s ease}.samples-list .sample-button:hover{background-color:color-mix(in srgb,var(--border-color) 95%,var(--text-color))}.action-button{position:relative;display:flex;align-items:center;justify-content:center;height:35px;width:250px;margin:2rem 0 0 auto;border-radius:4px;border:none;font-weight:500;font-size:14px;white-space:nowrap;color:var(--background-color);background-color:var(--text-color);outline:none;cursor:pointer;text-decoration:none;transition:background-color .2s ease;box-shadow:0 2px 2px #00000024,0 3px 1px -2px #0000001f,0 1px 5px #0003}.action-button:hover{background-color:color-mix(in srgb,var(--text-color),var(--background-color) 20%)}.action-button.hidden{display:none}.try-yfiles-button{background-color:var(--color-yellow);color:var(--color-blue)}.try-yfiles-button:hover{background-color:var(--color-yellow-2)}#yplay-snackbar{position:fixed;display:none;bottom:30px;left:calc(50% - 150px);width:300px;padding:16px 20px;border-radius:4px;color:var(--background-color);background-color:var(--text-color);font-size:14px;text-align:center;box-shadow:0 9px 12px 1px #00000024,0 3px 16px 2px #0000001f,0 5px 6px -3px #0003;z-index:99;animation:fade-up-and-out 5s cubic-bezier(.23,1,.32,1) forwards}#yplay-snackbar.show{display:block}#legacy-yfiles-text{font-size:12px;font-style:italic;color:#ccc;margin-left:18px;margin-bottom:8px}body:not(.legacy-playground) .legacy-playground-only{display:none}body:not(.sidebar-expanded) #legacy-yfiles-text{display:none}@keyframes pop-up{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes fade-up-and-out{0%{transform:translateY(calc(100% + 60px));opacity:0}20%{transform:translateY(0);opacity:1}80%{transform:translateY(0);opacity:1}to{transform:translateY(calc(100% + 60px));opacity:0}}@keyframes show-copy-checkmark{0%{opacity:0;transform:rotate(45deg) scale(.4)}30%,to{opacity:1;transform:rotate(45deg) scale(1)}}