@import './../CDN/910802be9b68585b23b95f82a0a7d2ff10296329099f9af396f0df376e98e970.css';@import './../CDN/910802be9b68585b23b95f82a0a7d2ff10296329099f9af396f0df376e98e970.css';

/****************************************************************************
 ** @license
 ** This demo file is part of yFiles for HTML 3.1.0.4.
 ** Copyright (c) 2026 by yWorks GmbH, Vor dem Kreuzberg 28,
 ** 72070 Tuebingen, Germany. All rights reserved.
 **
 ** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
 ** of demo files in source code or binary form, with or without
 ** modification, is not permitted.
 **
 ** Owners of a valid software license for a yFiles for HTML version that this
 ** demo is shipped with are allowed to use the demo source code as basis
 ** for their own yFiles for HTML powered applications. Use of such programs is
 ** governed by the rights and conditions as set out in the yFiles for HTML
 ** license agreement.
 **
 ** THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
 ** WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 ** MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
 ** NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
 ** TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 ** PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
 ** LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 ** NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 ** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 **
 ***************************************************************************/
* {
  margin: 0;
  line-height: calc(1em + 0.5rem);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}
#root,
#__next {
  isolation: isolate;
}
.material-symbols-outlined {
  font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: 270;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.5rem;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}
:root[data-theme='dark'] .material-symbols-outlined {
  font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
}
button.icon,
button .icon,
a .icon,
.icon-inline,
button[data-command] {
  font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: 270;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.5rem;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}
:root[data-theme='dark'] button.icon,
:root[data-theme='dark'] button .icon,
:root[data-theme='dark'] a .icon,
:root[data-theme='dark'] .icon-inline,
:root[data-theme='dark'] button[data-command] {
  font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
}
button.icon.yIcon,
button .icon.yIcon,
a .icon.yIcon,
.icon-inline.yIcon,
button[data-command].yIcon {
  font-size: 1.2rem;
}
.icon-inline {
  font-size: inherit;
  display: inline;
  vertical-align: text-bottom;
  line-height: unset;
}
button.icon-only {
  font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: 270;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.5rem;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  border: none;
  border-radius: 99px;
  padding: 8px;
  color: inherit;
  background-color: transparent;
}
:root[data-theme='dark'] button.icon-only {
  font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
}
button.icon-only:hover {
  background-color: #0000000f;
}
button.icon-only:active {
  background-color: #0000001f;
}
.button-icon-only {
  font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: 270;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.5rem;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  border: none;
  border-radius: 99px;
  padding: 8px;
  color: inherit;
  background-color: transparent;
}
:root[data-theme='dark'] .button-icon-only {
  font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
}
.button-icon-only:hover {
  background-color: #0000000f;
}
.button-icon-only:active {
  background-color: #0000001f;
}
button.plain {
  border: none;
  border-radius: 99px;
  padding: 8px;
  color: inherit;
  background-color: transparent;
}
button.plain:hover {
  background-color: #0000000f;
}
button.plain:active {
  background-color: #0000001f;
}
.button-plain {
  border: none;
  border-radius: 99px;
  padding: 8px;
  color: inherit;
  background-color: transparent;
}
.button-plain:hover {
  background-color: #0000000f;
}
.button-plain:active {
  background-color: #0000001f;
}
.loading-indicator-message {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 150%;
  color: var(--loading-indicator-message-color);
}
select:disabled,
button:disabled,
label:disabled,
input:disabled {
  opacity: 0.5;
  background-color: transparent;
  pointer-events: none;
}
.dnd-panel {
  flex: 0 1 12rem;
  width: 12rem;
}
.demo-dnd-panel__item {
  width: fit-content;
  margin: 0 auto 20px;
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  align-self: center;
  touch-action: none;
  cursor: grab;
}
.demo-dnd-panel__item:hover {
  background-color: var(--interaction-button-hover);
  cursor: grab;
}
.demo-dnd-panel__item:hover svg,
.demo-dnd-panel__item:hover img {
  transform: scale(1.03);
}
.hidden {
  display: none !important;
}
.center-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.inline-icon {
  display: inline-block;
  vertical-align: middle;
}
.input-select-checkbox {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  position: relative;
  border-radius: 6px;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.input-select-checkbox::after {
  font-family: 'Material Symbols Outlined', sans-serif;
  display: inline-grid;
  place-content: center;
  border: none;
  color: var(--color-text);
}
.input-range {
  width: 100px;
  min-width: 7rem;
  max-width: 10rem;
  -webkit-appearance: none;
  background-color: transparent;
}
.input-range ::before {
  content: '';
  display: inline-flex;
}
.input-range::-webkit-slider-runnable-track {
  background: var(--interaction-alt);
  height: 6px;
  border-radius: 1000px;
}
.input-range::-moz-range-track {
  background: var(--interaction-alt);
  height: 6px;
  border-radius: 1000px;
}
.input-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--interaction-alt);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
}
.input-range::-moz-range-thumb {
  -webkit-appearance: none;
  background: var(--interaction-alt);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
}
.input-range:hover {
  cursor: pointer;
}
ul.check-list {
  list-style: none;
  padding-left: 0;
}
ul.check-list li {
  display: flex;
  align-items: flex-start;
  /* top-align icon and text */
  gap: 0.5rem;
}
ul.check-list li::before {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: 270;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--live-demo-highlight);
  content: 'check_circle';
  flex-shrink: 0;
  margin-top: 0.15em;
  /* nudge icon down to align with text cap-height */
}
hr.thin {
  border: 0;
  height: 1px;
  background-color: var(--tour-dash);
  margin: 1em 0;
}
p.remark {
  font-size: 0.7rem;
  line-height: 1.2;
}
p.not-important {
  opacity: 0.7;
}
.demo-properties__settings > h1,
h2,
h3,
h4,
h5,
h6 {
  grid-column: 1/-1;
}
.panel-bar button {
  animation: panel-bar-button-animation 1.5s ease-out;
}
.panel-bar button:hover {
  background-color: var(--toolbar-bg-hover);
  cursor: pointer;
}
@keyframes panel-bar-button-animation {
  50% {
    background-color: var(--panel-bar-button-blink);
  }
}
.interaction-panel select,
.demo-popup select {
  padding-inline: 10px;
  border: none;
  border-radius: var(--border-radius);
  color: var(--toolbar-button-text);
  background-color: var(--toolbar-button);
  background-size: 1.5rem;
  cursor: pointer;
  width: stretch;
}
@supports (appearance: base-select) {
  .interaction-panel select,
  .demo-popup select {
    padding: 6px 10px;
    appearance: base-select;
    border: none;
    border-radius: var(--border-radius);
    align-items: center;
  }
  .interaction-panel select::picker(select),
  .demo-popup select::picker(select) {
    appearance: base-select;
    border: 1px solid var(--toolbar-select-border);
    border-radius: var(--border-radius);
  }
  .interaction-panel select::picker-icon,
  .demo-popup select::picker-icon {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined', sans-serif;
    font-size: 1.5rem;
  }
  .interaction-panel select:open::picker-icon,
  .demo-popup select:open::picker-icon {
    rotate: 180deg;
  }
}
@supports not (appearance: base-select) {
  .interaction-panel select,
  .demo-popup select {
    appearance: none;
    -webkit-appearance: none;
    padding: 6px 36px 6px 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    background-image: var(--toolbar-select-arrow);
    background-repeat: no-repeat;
    background-position: right 10px center;
    align-items: center;
  }
}
.interaction-panel select:hover,
.demo-popup select:hover {
  color: var(--color-text);
  background-color: var(--interaction-button-hover);
}
.interaction-panel select:focus-visible,
.demo-popup select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--interaction-button-hover);
}
.interaction-panel select optgroup,
.demo-popup select optgroup {
  padding: 5px;
  font-size: 0.75rem;
  font-weight: 100;
  font-style: normal;
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--toolbar-bg);
}
.interaction-panel select option,
.demo-popup select option {
  font-size: 0.9rem;
  text-transform: none;
  padding: 10px;
  cursor: pointer;
  font-family: var(--font-family), sans-serif;
  color: var(--color-text);
  background-color: var(--toolbar-bg);
  line-height: 1.4;
}
.interaction-panel select option:checked,
.demo-popup select option:checked {
  font-weight: bold;
}
.interaction-panel select option:hover,
.demo-popup select option:hover {
  background-color: var(--interaction-button-hover);
}
.interaction-panel .navigate-select-labeled,
.demo-popup .navigate-select-labeled {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.interaction-panel .navigate-select,
.demo-popup .navigate-select {
  position: relative;
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  gap: 2px;
  margin-bottom: 8px;
  align-items: stretch;
  width: 100%;
}
.interaction-panel .navigate-select:hover,
.demo-popup .navigate-select:hover {
  background-color: transparent;
}
.interaction-panel .navigate-select:has(button) select,
.demo-popup .navigate-select:has(button) select {
  border-radius: 0;
}
.interaction-panel .navigate-select button,
.demo-popup .navigate-select button {
  font-size: 1.5rem;
  display: flex;
  width: 28px;
  border-radius: 0 20px 20px 0;
  background-color: var(--toolbar-button);
}
.interaction-panel .navigate-select button:hover,
.demo-popup .navigate-select button:hover {
  background-color: var(--toolbar-bg-hover);
}
.interaction-panel .navigate-select button:first-of-type,
.demo-popup .navigate-select button:first-of-type {
  border-radius: 20px 0 0 20px;
}
.interaction-panel .navigate-select select,
.demo-popup .navigate-select select {
  border: none;
  border-radius: 999px;
  color: var(--color-text);
  margin: 0;
  outline: none;
  width: 100%;
  min-width: 0;
  height: auto;
  white-space: nowrap;
  overflow: hidden;
}
.interaction-panel .navigate-select select:hover,
.demo-popup .navigate-select select:hover {
  background-color: var(--toolbar-bg-hover);
}
.interaction-panel .navigation-button,
.demo-popup .navigation-button {
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: var(--border-radius);
  background-color: transparent;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.interaction-panel .navigation-button:hover,
.demo-popup .navigation-button:hover {
  background-color: var(--toolbar-bg-hover);
  color: var(--color-text);
  cursor: pointer;
}
.interaction-panel .navigation-button.labeled,
.demo-popup .navigation-button.labeled {
  width: fit-content;
  height: fit-content;
  background-color: var(--toolbar-button);
  color: var(--toolbar-button-text);
  padding: 6px 10px;
}
.interaction-panel .navigation-button.labeled:has(.material-symbols-outlined),
.demo-popup .navigation-button.labeled:has(.material-symbols-outlined) {
  padding: 6px 10px 6px 2px;
}
.interaction-panel .navigation-button.labeled:has(.yIcon),
.demo-popup .navigation-button.labeled:has(.yIcon) {
  gap: 10px;
  padding: 6px 10px;
}
.interaction-panel .navigation-button.labeled:hover,
.demo-popup .navigation-button.labeled:hover {
  color: var(--color-text);
  background-color: var(--toolbar-bg-hover);
}
.interaction-panel .navigation-button:hover,
.demo-popup .navigation-button:hover {
  background-color: var(--interaction-button-hover);
  color: var(--color-text);
}
.description-panel .highlight-description {
  animation-name: highlight-animation;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  border-radius: var(--border-radius);
}
@keyframes highlight-animation {
  0% {
    background-color: var(--description-bg);
  }
  20% {
    background-color: #ff9800;
  }
  100% {
    background-color: var(--description-bg-highlight);
  }
}
.description-panel img {
  display: inline;
}
.rail-popover {
  left: calc(var(--nav-rail-width) - 2px);
  padding: var(--dialog-padding);
  min-width: 250px;
  max-height: 60vh;
  position: absolute;
  border-radius: var(--border-radius);
  overflow: visible;
  color: var(--interaction-text);
  transition: opacity 0.3s, transform 0.3s, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
  opacity: 0;
  transform: translateX(-10px);
}
.rail-popover:popover-open {
  opacity: 1;
  transform: translateX(0);
  @starting-style {
    opacity: 0;
    transform: translateX(-10px);
  }
}
.rail-popover::before {
  content: '';
  position: absolute;
  left: -8px;
  top: var(--popover-arrow-top, 20px);
  width: 16px;
  height: 16px;
  background: var(--toolbar-bg);
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.08);
}
.rail-popover > :first-child {
  margin-top: 0 !important;
}
.rail-popover > :last-child {
  margin-bottom: 0 !important;
}
.text-content {
  --margin-block: 0.75rem;
  font-size: var(--body-font-size);
}
.text-content > :first-child,
.text-content h2:first-child,
.text-content h3:first-child {
  margin-top: 0 !important;
}
.text-content > :last-child {
  margin-bottom: 0 !important;
}
.text-content h1,
.text-content h2,
.text-content h3,
.text-content h4 {
  margin: 1.25rem 0 var(--margin-block);
  hyphens: auto;
}
.text-content h1 {
  font-size: 2rem;
  margin-top: 0;
}
.text-content h2 {
  font-size: 1.5rem;
}
.text-content h3 {
  font-size: 1.25rem;
}
.text-content .text-medium {
  font-size: 130%;
}
.text-content ul,
.text-content ol {
  padding-left: 1.25em;
}
.text-content p,
.text-content dl,
.text-content ul,
.text-content ul.paragraph-style li {
  margin-block: var(--margin-block);
}
.text-content li {
  margin: 0.5rem 0;
}
.text-content .compact li {
  margin: 0.25rem 0;
}
.text-content .tutorial-about {
  font-size: 130%;
  line-height: 140%;
}
.text-content code,
.text-content pre,
.text-content kbd,
.text-content a.api {
  background: var(--inline-code-background);
  color: var(--inline-code-color);
  padding: 2px 4px;
  border-radius: 4px;
  font-family: 'Consolas', monospace;
}
.text-content pre {
  padding: 8px;
  overflow-x: auto;
  max-width: 100%;
}
.text-content kbd {
  border: 1px solid #c1c1c1;
  box-shadow: var(--shadow-cripsy-gray);
  font-size: 80%;
  padding: 0.2em 0.5em 0.1em 0.5em;
  white-space: nowrap;
  vertical-align: middle;
}
.text-content a.unknown {
  color: firebrick;
}
.text-content a.unknown::before {
  content: '\2297';
  padding-right: 2px;
}
.text-content p a,
.text-content dl a,
.text-content ul a,
.text-content .note a,
.text-content p a:visited,
.text-content dl a:visited,
.text-content ul a:visited,
.text-content .note a:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: 0.5px solid;
}
.text-content p a:hover,
.text-content dl a:hover,
.text-content ul a:hover,
.text-content .note a:hover {
  border-bottom: 2px solid;
}
.text-content dt {
  font-weight: bold;
  color: var(--color-text);
  margin-top: 4px;
}
.text-content dd {
  margin-left: 10px;
}
.text-content fieldset {
  border: 0 none;
  background: unset;
  padding: 0 0 1.5ex;
  margin: 0;
}
.text-content fieldset legend {
  font-weight: bold;
  padding: 0 0 0.5ex;
}
:root {
  color-scheme: light dark;
  --scrollbar-bg: #aaa;
  --font-family: 'Poppins';
  --body-font-size: 0.875rem;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  --header-height: 70px;
  --nav-rail-width: 88px;
  --description-width: 240px;
  --interaction-width: 240px;
  --panel-bar-width: 40px;
  --panel-gap: 8px;
  --toolbar-gap: var(--panel-gap);
  --overlay-blur: 4px;
  --border-radius: 16px;
  --small-border-radius: 4px;
  --dialog-padding: var(--border-radius);
  --shadow-crispy-gray: 0 5px 20px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.15);
  --color-casper-blue-white: #f2f5f8;
  --color-casper-blue-light: #d7e1ea;
  --color-casper-blue: #aec3d5;
  --color-casper-blue-mid: #38536b;
  --color-casper-blue-dark: #2a3e50;
  --color-casper-blue-black: #1c2a35;
  --color-gold-light: #5ce7ff;
  --color-gold: #00d8ff;
  --color-gold-dark: #00adcc;
  --color-pacific-blue: #3c88a0;
  --color-highlight-blue: #86bbd8;
  --color-highlight-gold: #d4c685;
  --color-highlight-pink: #e56399;
  --color-submit-red: #c41c38;
  --color-submit-green: #13b579;
  --color-bluish-white: #f3f4f6;
  --color-bluish-white-half-alpha: #f3f4f688;
  --color-casper-blue-mid-500: #59789b;
  --color-bg-light: #f4f7f9;
  --color-silver: #bcc6cc;
}
@media (min-width: 64rem) {
  :root {
    --description-width: 240px;
    --interaction-width: 240px;
  }
}
@media (min-width: 80rem) {
  :root {
    --description-width: 320px;
    --interaction-width: 320px;
  }
}
:root[data-theme='light'] {
  color-scheme: light;
  --graphcomponent-bg: white;
  --shadow-crispy-blue: 0 5px 20px var(--color-casper-blue), 0 3px 10px var(--color-casper-blue), 0 1px 5px var(--color-casper-blue);
  --loading-indicator-background: var(--color-casper-blue-light);
  --loading-indicator-message-color: var(--color-casper-blue-dark);
  --color-bg: var(--color-casper-blue-light);
  --color-bg-hover: color-mix(in oklch, var(--color-casper-blue) 80%, white);
  --color-demo-name: var(--color-gold-dark);
  --color-text: var(--color-casper-blue-dark);
  --color-text-reversed: var(--color-bluish-white);
  --color-text-reversed-half-alpha: var(--color-bluish-white-half-alpha);
  --color-text-transparent: rgba(42, 62, 80, 0.5);
  --color-tag-background: var(--color-bluish-white);
  --color-grid-item: var(--color-casper-blue-light);
  --color-no-search-result: var(--color-highlight-blue);
  --background: radial-gradient(circle at top left, #ffffff -10%, var(--color-casper-blue-light) 7%, var(--color-casper-blue-white) 100%);
  --rail-highlighted: var(--color-highlight-pink);
  --toolbar-color: var(--color-casper-blue-dark);
  --toolbar-bg: var(--color-casper-blue-white);
  --toolbar-bg-hover: var(--color-casper-blue);
  --toolbar-button: var(--color-casper-blue-light);
  --toolbar-button-hover: var(--color-casper-blue-light);
  --toolbar-button-text: var(--color-casper-blue-dark);
  --toolbar-group: var(--color-bg-light);
  --toolbar-select-border: var(--color-silver);
  --toolbar-toggle-button-enabled: var(--color-casper-blue);
  --description-text: var(--color-casper-blue-dark);
  --description-bg: white;
  --description-bg-highlight: var(--color-bluish-white);
  --description-note: #9df1ff;
  --description-subheading: color-mix(in oklch, var(--description-text) 60%, white);
  --interaction-text: var(--color-casper-blue-dark);
  --interaction-text-alt: white;
  --interaction-heading: var(--color-casper-blue-dark);
  --interaction-bg: var(--color-bluish-white);
  --interaction-bg-highlight: white;
  --interaction-alt: var(--color-casper-blue-mid-500);
  --interaction-button-hover: var(--color-casper-blue);
  --inline-code-background: var(--color-casper-blue-light);
  --inline-code-text: var(--color-casper-blue-dark);
  --tour-button-bg: var(--color-casper-blue-light);
  --tour-highlight: var(--color-gold-dark);
  --tour-dash: var(--color-casper-blue);
  --tour-opacity: 0.5;
  --burger-menu-background: white;
  --burger-menu-primary-highlight: var(--color-highlight-pink);
  --burger-menu-secondary-highlight: var(--color-gold-dark);
  --burger-menu-tertiary-highlight: var(--color-pacific-blue);
  --burger-menu-hover: var(--color-casper-blue-light);
  --live-demo-highlight: var(--color-highlight-pink);
  --live-demo-button: var(--color-highlight-pink);
  --live-demo-button-text: var(--color-casper-blue-white);
  --toolbar-select-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%2338536b"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>');
  --collapse-button-hover: #0000000f;
  --panel-bar-button-blink: var(--color-casper-blue);
  --toast-color: var(--color-casper-blue-dark);
  --toast-bg: var(--color-casper-blue-white);
  --toast-button: var(--color-casper-blue-white);
  --toast-button-hover: var(--color-casper-blue-light);
  --error-dialog-button: var(--color-highlight-blue);
  --error-dialog-button-hover: var(--color-casper-blue-light);
  --error-dialog-input-background: white;
  --error-dialog-highlight: var(--color-highlight-pink);
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --graphcomponent-bg: white;
  --shadow-crispy-blue: 0 5px 20px var(--color-casper-blue-black), 0 3px 10px var(--color-casper-blue-dark), 0 1px 5px var(--color-casper-blue-dark);
  --loading-indicator-background: var(--color-casper-blue-light);
  --loading-indicator-message-color: var(--color-casper-blue-dark);
  --color-bg: var(--color-casper-blue-mid);
  --color-bg-hover: color-mix(in oklch, var(--color-casper-blue-dark) 80%, white);
  --color-demo-name: var(--color-gold);
  --color-text: var(--color-bluish-white);
  --color-text-reversed: var(--color-casper-blue-dark);
  --color-text-reversed-half-alpha: var(--color-casper-blue-dark-alpha);
  --color-text-transparent: rgba(243, 244, 246, 0.5);
  --color-tag-background: var(--color-casper-blue-dark);
  --color-grid-item: var(--color-casper-blue-black);
  --color-no-search-result: var(--color-casper-blue-mid-500);
  --background: radial-gradient(circle at top left, var(--color-casper-blue) -120%, var(--color-casper-blue-black) 40%, var(--color-casper-blue-black) 70%, #000000 130%);
  --rail-highlighted: var(--color-highlight-gold);
  --toolbar-color: white;
  --toolbar-bg: var(--color-casper-blue-mid);
  --toolbar-bg-hover: var(--color-casper-blue-dark);
  --toolbar-button: var(--color-casper-blue-mid-500);
  --toolbar-button-hover: var(--color-casper-blue-dark);
  --toolbar-button-text: white;
  --toolbar-group: var(--color-casper-blue-black);
  --toolbar-select-border: var(--color-casper-blue-dark);
  --toolbar-toggle-button-enabled: var(--color-casper-blue-mid-500);
  --description-text: white;
  --description-bg: var(--color-casper-blue-dark);
  --description-bg-highlight: var(--color-casper-blue-black);
  --description-note: var(--color-pacific-blue);
  --description-subheading: var(--color-casper-blue-light);
  --interaction-text: white;
  --interaction-text-alt: var(--color-casper-blue-dark);
  --interaction-heading: var(--color-gold-dark);
  --interaction-bg: var(--color-casper-blue-dark);
  --interaction-bg-highlight: var(--color-casper-blue-black);
  --interaction-alt: #eaeff4;
  --interaction-button-hover: var(--color-casper-blue-black);
  --inline-code-background: var(--color-casper-blue-mid);
  --inline-code-text: white;
  --tour-button-bg: var(--color-casper-blue);
  --tour-highlight: var(--color-gold-dark);
  --tour-dash: var(--color-casper-blue);
  --tour-opacity: 0.7;
  --burger-menu-background: var(--color-casper-blue-black);
  --burger-menu-primary-highlight: var(--color-highlight-pink);
  --burger-menu-secondary-highlight: var(--color-gold-light);
  --burger-menu-tertiary-highlight: var(--color-highlight-blue);
  --burger-menu-hover: var(--color-casper-blue-dark);
  --live-demo-highlight: var(--color-highlight-gold);
  --live-demo-button: var(--color-highlight-gold);
  --live-demo-button-text: var(--color-casper-blue-dark);
  --toolbar-select-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23f3f4f6"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>');
  --collapse-button-hover: var(--color-casper-blue-black);
  --panel-bar-button-blink: var(--color-casper-blue-mid);
  --toast-color: white;
  --toast-bg: var(--color-casper-blue-mid);
  --toast-button: var(--color-casper-blue-mid);
  --toast-button-hover: var(--color-casper-blue-dark);
  --error-dialog-button: var(--color-gold-dark);
  --error-dialog-button-hover: var(--color-gold);
  --error-dialog-input-background: var(--color-casper-blue-black);
  --error-dialog-highlight: var(--color-highlight-gold);
}
html,
body {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: var(--color-text);
  background: var(--background);
  touch-action: none;
  overflow: hidden;
}
body,
button {
  font-family: var(--font-family), sans-serif;
}
.rail button.guided-tour-trigger,
button.guided-tour-trigger {
  display: block;
}
.rail button.guided-tour-trigger.hidden,
button.guided-tour-trigger.hidden {
  display: none;
}
.header {
  grid-area: header;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  user-select: none;
}
.main-container {
  grid-area: main;
  position: relative;
  display: flex;
  gap: var(--panel-gap);
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  padding: 0 var(--panel-gap) var(--panel-gap) 0;
  border-radius: var(--border-radius);
  z-index: 1;
}
.main-container #graphComponent,
.main-container .full-size-graph-component {
  position: relative;
  flex: 1 1 auto;
  inset: 0;
  height: 100%;
  background: var(--graphcomponent-bg);
  color: var(--color-casper-blue-black);
}
.graph-panel,
.interaction-panel,
.description-panel {
  height: 100%;
  max-height: 100%;
  overflow: auto;
  position: relative;
  border-radius: var(--border-radius);
}
.graph-panel {
  z-index: 1;
  flex-grow: 1;
  overflow: visible;
}
.interaction-panel {
  flex: 0 0 var(--interaction-width);
  --margin-block: 0.75rem;
  font-size: var(--body-font-size);
  --panel-bg: var(--description-bg);
  --collapse-hover-bg: var(--interaction-button-hover);
  padding: var(--dialog-padding);
  overflow-x: hidden;
  color: var(--description-text);
  background-color: var(--description-bg);
  /* Additional small heading above the h1 */
  /*
    This is the anchoring element for the collapse icon.
    By default, it is sticky on the top-left and reserves space for always-visible part of the icon.
    If this is not desired for a specific demo, override the width and height with smaller values.
   */
  z-index: 2;
  /* If a panel doesn't scroll but has content that fits the height,
   we don't need sticky placement. */
}
@supports not selector(::-webkit-scrollbar) {
  .interaction-panel {
    scrollbar-width: thin;
  }
}
.interaction-panel::-webkit-scrollbar {
  width: 6px;
}
@media (pointer: coarse) {
  .interaction-panel::-webkit-scrollbar {
    width: 3px;
  }
}
.interaction-panel::-webkit-scrollbar-track {
  background-color: transparent;
}
.interaction-panel::-webkit-scrollbar-thumb {
  background-color: rgb(from var(--scrollbar-bg) r g b / 0.6);
  border-radius: 6px;
}
.interaction-panel::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-bg);
}
.interaction-panel > :first-child,
.interaction-panel h2:first-child,
.interaction-panel h3:first-child {
  margin-top: 0 !important;
}
.interaction-panel > :last-child {
  margin-bottom: 0 !important;
}
.interaction-panel h1,
.interaction-panel h2,
.interaction-panel h3,
.interaction-panel h4 {
  margin: 1.25rem 0 var(--margin-block);
  hyphens: auto;
}
.interaction-panel h1 {
  font-size: 2rem;
  margin-top: 0;
}
.interaction-panel h2 {
  font-size: 1.5rem;
}
.interaction-panel h3 {
  font-size: 1.25rem;
}
.interaction-panel .text-medium {
  font-size: 130%;
}
.interaction-panel ul,
.interaction-panel ol {
  padding-left: 1.25em;
}
.interaction-panel p,
.interaction-panel dl,
.interaction-panel ul,
.interaction-panel ul.paragraph-style li {
  margin-block: var(--margin-block);
}
.interaction-panel li {
  margin: 0.5rem 0;
}
.interaction-panel .compact li {
  margin: 0.25rem 0;
}
.interaction-panel .tutorial-about {
  font-size: 130%;
  line-height: 140%;
}
.interaction-panel code,
.interaction-panel pre,
.interaction-panel kbd,
.interaction-panel a.api {
  background: var(--inline-code-background);
  color: var(--inline-code-color);
  padding: 2px 4px;
  border-radius: 4px;
  font-family: 'Consolas', monospace;
}
.interaction-panel pre {
  padding: 8px;
  overflow-x: auto;
  max-width: 100%;
}
.interaction-panel kbd {
  border: 1px solid #c1c1c1;
  box-shadow: var(--shadow-cripsy-gray);
  font-size: 80%;
  padding: 0.2em 0.5em 0.1em 0.5em;
  white-space: nowrap;
  vertical-align: middle;
}
.interaction-panel a.unknown {
  color: firebrick;
}
.interaction-panel a.unknown::before {
  content: '\2297';
  padding-right: 2px;
}
.interaction-panel p a,
.interaction-panel dl a,
.interaction-panel ul a,
.interaction-panel .note a,
.interaction-panel p a:visited,
.interaction-panel dl a:visited,
.interaction-panel ul a:visited,
.interaction-panel .note a:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: 0.5px solid;
}
.interaction-panel p a:hover,
.interaction-panel dl a:hover,
.interaction-panel ul a:hover,
.interaction-panel .note a:hover {
  border-bottom: 2px solid;
}
.interaction-panel dt {
  font-weight: bold;
  color: var(--color-text);
  margin-top: 4px;
}
.interaction-panel dd {
  margin-left: 10px;
}
.interaction-panel fieldset {
  border: 0 none;
  background: unset;
  padding: 0 0 1.5ex;
  margin: 0;
}
.interaction-panel fieldset legend {
  font-weight: bold;
  padding: 0 0 0.5ex;
}
.interaction-panel h1 {
  color: var(--color-gold-dark);
}
.interaction-panel .subheading {
  font-size: 1rem;
  color: var(--description-subheading);
  font-weight: 700;
}
.interaction-panel button.collapse {
  font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: 270;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.5rem;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  position: absolute;
  top: calc(var(--dialog-padding) * -1 + 4px);
  right: calc(var(--dialog-padding) * -1 + 4px);
  border: none;
  border-radius: 99px;
  color: inherit;
  background-color: var(--panel-bg);
  transition: background-color 0.25s ease-in-out;
}
:root[data-theme='dark'] .interaction-panel button.collapse {
  font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
}
.interaction-panel button.collapse:hover {
  background-color: var(--collapse-hover-bg);
}
.interaction-panel .collapse-anchor {
  position: sticky;
  float: right;
  top: 0;
  z-index: 1000;
  width: 1.5em;
  height: 1.5em;
  background-color: var(--panel-bg);
}
.interaction-panel button {
  background-color: var(--toolbar-button);
  border: none;
  border-radius: 99px;
  padding: 8px;
  color: var(--color-text);
  cursor: pointer;
}
.interaction-panel button:hover {
  color: var(--color-text);
  background-color: var(--interaction-button-hover);
}
.interaction-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox) {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  position: relative;
  border-radius: 6px;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.interaction-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox)::after {
  font-family: 'Material Symbols Outlined', sans-serif;
  display: inline-grid;
  place-content: center;
  border: none;
  color: var(--color-text);
}
.interaction-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox)::after {
  content: 'check_box_outline_blank';
  font-size: 1.5rem;
  font-weight: 300;
}
.interaction-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox):checked::after {
  content: 'check_box';
}
.interaction-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox):hover {
  background-color: var(--toolbar-button);
  box-shadow: 0 0 0 6px var(--toolbar-button);
}
.interaction-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox) {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  position: relative;
  border-radius: 6px;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.interaction-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox)::after {
  font-family: 'Material Symbols Outlined', sans-serif;
  display: inline-grid;
  place-content: center;
  border: none;
  color: var(--color-text);
}
.interaction-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox)::after {
  content: 'toggle_off';
  font-size: 2.75rem;
  font-weight: 100;
}
.interaction-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox):checked::after {
  content: 'toggle_on';
  font-variation-settings: 'FILL' 1;
}
.interaction-panel input[type='checkbox']:hover {
  background-color: var(--interaction-button-hover);
  cursor: pointer;
}
.interaction-panel input[type='range'] {
  width: 100px;
  min-width: 7rem;
  max-width: 10rem;
  -webkit-appearance: none;
  background-color: transparent;
}
.interaction-panel input[type='range'] ::before {
  content: '';
  display: inline-flex;
}
.interaction-panel input[type='range']::-webkit-slider-runnable-track {
  background: var(--interaction-alt);
  height: 6px;
  border-radius: 1000px;
}
.interaction-panel input[type='range']::-moz-range-track {
  background: var(--interaction-alt);
  height: 6px;
  border-radius: 1000px;
}
.interaction-panel input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--interaction-alt);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
}
.interaction-panel input[type='range']::-moz-range-thumb {
  -webkit-appearance: none;
  background: var(--interaction-alt);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
}
.interaction-panel input[type='range']:hover {
  cursor: pointer;
}
.interaction-panel > :nth-child(2) {
  margin-top: 0;
}
.interaction-panel.absolute-collapse .collapse-anchor {
  position: absolute;
  top: var(--border-radius);
  right: var(--border-radius);
  width: 0;
  height: 0;
}
.interaction-panel input[type='number'] {
  border: 1px solid var(--color-text);
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: transparent;
  width: 40px;
  width: 60px;
}
.interaction-panel input[type='number']:focus {
  outline: none;
  box-shadow: none;
}
.interaction-panel input[type='text'] {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--toolbar-button-text);
  background-color: var(--error-dialog-input-background);
  border-radius: 4px 4px 0 0;
  outline: 0;
  font-size: 16px;
  padding: 6px 4px;
  transition: border-color 0.25s ease-in-out;
}
.interaction-panel .demo-properties__settings {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 1rem;
  align-items: center;
  position: relative;
  background-color: var(--description-bg);
  gap: 10px;
}
.interaction-panel .demo-properties__settings > input,
.interaction-panel select {
  justify-self: end;
}
.interaction-panel .demo-properties__settings > label {
  justify-self: start;
}
.interaction-panel .demo-properties__settings > button {
  grid-column: -1/1;
}
.interaction-panel .options-section {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  justify-content: center;
}
.interaction-panel .options-section > label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}
.interaction-panel .options-section > label > span:first-child {
  flex: 1 1 auto;
  min-width: 30px;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.interaction-panel .options-section > label input {
  align-self: center;
}
.interaction-panel .options-section > label > select {
  align-self: flex-start;
  flex: 0 0 auto;
  width: auto;
  inline-size: auto;
  min-width: 0;
  max-width: none;
  margin-inline-start: auto;
  box-sizing: border-box;
  white-space: nowrap;
}
.interaction-panel .options-section.two-rows > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])):not(:has(> input[type='number'])) {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}
.interaction-panel .options-section.two-rows > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])):not(:has(> input[type='number'])) > span:first-child {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
}
.interaction-panel .options-section.two-rows > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])):not(:has(> input[type='number'])) > select {
  align-self: stretch;
  flex: 1 1 auto;
  width: 100%;
  inline-size: 100%;
  min-width: 0;
  max-width: none;
  margin-inline-start: 0;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.interaction-panel .options-section.two-rows > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])):not(:has(> input[type='number'])) > .range-container {
  margin-inline-start: 0;
  width: 100%;
}
.interaction-panel .options-section.two-rows > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])):not(:has(> input[type='number'])) > .range-container > input[type='range'] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.interaction-panel .options-section.two-rows > label:has(input[type='checkbox']),
.interaction-panel .options-section.two-rows > label:has(> input[type='number']):not(:has(input[type='range'])) {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  justify-content: space-between;
}
.interaction-panel .options-section.two-rows > label:has(input[type='checkbox']) > span:first-child,
.interaction-panel .options-section.two-rows > label:has(> input[type='number']):not(:has(input[type='range'])) > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.interaction-panel .options-section.two-rows > label:has(input[type='checkbox']) > input[type='checkbox'],
.interaction-panel .options-section.two-rows > label:has(> input[type='number']):not(:has(input[type='range'])) > input[type='checkbox'],
.interaction-panel .options-section.two-rows > label:has(input[type='checkbox']) > input[type='number'],
.interaction-panel .options-section.two-rows > label:has(> input[type='number']):not(:has(input[type='range'])) > input[type='number'] {
  flex: 0 0 auto;
  margin: 0;
  align-self: center;
}
.interaction-panel .options-section.two-rows > label:has(input[type='range']) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.interaction-panel .options-section.two-rows > label:has(input[type='range']) > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.interaction-panel .options-section.two-rows > label:has(input[type='range']) > .range-container {
  flex: 1 1 100%;
  margin-inline-start: 0;
  width: 100%;
  align-self: center;
}
.interaction-panel .options-section.two-rows > label:has(input[type='range']) > .range-container > input[type='range'] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
@media (max-width: 80rem) {
  .interaction-panel .options-section > label input {
    align-self: start;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    flex-wrap: nowrap;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > span:first-child {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > select {
    align-self: stretch;
    flex: 0 0 auto;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    max-width: none;
    margin-inline-start: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > .range-container {
    flex: 1 1 auto;
    margin-inline-start: 0;
    width: 100%;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > .range-container > input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) > input[type='checkbox'] {
    flex: 0 0 auto;
    margin: 0;
    align-self: start !important;
  }
  .interaction-panel .options-section > label:has(input[type='range']) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > .range-container {
    flex: 1 1 100%;
    margin-inline-start: 0;
    width: 100%;
    align-self: center;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > .range-container > input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
}
@media (max-width: 40rem) {
  .interaction-panel .options-section > label {
    flex-wrap: wrap;
  }
  .interaction-panel .options-section > label input {
    align-self: start;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    flex-wrap: nowrap;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > span:first-child {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > select {
    align-self: stretch;
    flex: 0 0 auto;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    max-width: none;
    margin-inline-start: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > .range-container {
    flex: 1 1 auto;
    margin-inline-start: 0;
    width: 100%;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > .range-container > input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) > input[type='checkbox'] {
    flex: 0 0 auto;
    margin: 0;
    align-self: start !important;
  }
  .interaction-panel .options-section > label:has(input[type='range']) {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > .range-container {
    flex: 1 1 100%;
    margin-inline-start: 0;
    width: 100%;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > .range-container > input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
}
.interaction-panel .range-container {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-inline-start: auto;
  gap: 0.2rem;
}
.interaction-panel .range-container > input[type='range'] {
  min-width: 0;
}
.interaction-panel .range-container > .number-label {
  flex: 0 0 auto;
  min-width: 2ch;
  text-align: end;
  line-height: 1;
}
.description-panel {
  flex: 0 0 var(--description-width);
  --margin-block: 0.75rem;
  font-size: var(--body-font-size);
  --panel-bg: var(--description-bg);
  --collapse-hover-bg: var(--interaction-button-hover);
  padding: var(--dialog-padding);
  overflow-x: hidden;
  color: var(--description-text);
  background-color: var(--description-bg);
  /* Additional small heading above the h1 */
  /*
    This is the anchoring element for the collapse icon.
    By default, it is sticky on the top-left and reserves space for always-visible part of the icon.
    If this is not desired for a specific demo, override the width and height with smaller values.
   */
  z-index: 3;
}
@supports not selector(::-webkit-scrollbar) {
  .description-panel {
    scrollbar-width: thin;
  }
}
.description-panel::-webkit-scrollbar {
  width: 6px;
}
@media (pointer: coarse) {
  .description-panel::-webkit-scrollbar {
    width: 3px;
  }
}
.description-panel::-webkit-scrollbar-track {
  background-color: transparent;
}
.description-panel::-webkit-scrollbar-thumb {
  background-color: rgb(from var(--scrollbar-bg) r g b / 0.6);
  border-radius: 6px;
}
.description-panel::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-bg);
}
.description-panel > :first-child,
.description-panel h2:first-child,
.description-panel h3:first-child {
  margin-top: 0 !important;
}
.description-panel > :last-child {
  margin-bottom: 0 !important;
}
.description-panel h1,
.description-panel h2,
.description-panel h3,
.description-panel h4 {
  margin: 1.25rem 0 var(--margin-block);
  hyphens: auto;
}
.description-panel h1 {
  font-size: 2rem;
  margin-top: 0;
}
.description-panel h2 {
  font-size: 1.5rem;
}
.description-panel h3 {
  font-size: 1.25rem;
}
.description-panel .text-medium {
  font-size: 130%;
}
.description-panel ul,
.description-panel ol {
  padding-left: 1.25em;
}
.description-panel p,
.description-panel dl,
.description-panel ul,
.description-panel ul.paragraph-style li {
  margin-block: var(--margin-block);
}
.description-panel li {
  margin: 0.5rem 0;
}
.description-panel .compact li {
  margin: 0.25rem 0;
}
.description-panel .tutorial-about {
  font-size: 130%;
  line-height: 140%;
}
.description-panel code,
.description-panel pre,
.description-panel kbd,
.description-panel a.api {
  background: var(--inline-code-background);
  color: var(--inline-code-color);
  padding: 2px 4px;
  border-radius: 4px;
  font-family: 'Consolas', monospace;
}
.description-panel pre {
  padding: 8px;
  overflow-x: auto;
  max-width: 100%;
}
.description-panel kbd {
  border: 1px solid #c1c1c1;
  box-shadow: var(--shadow-cripsy-gray);
  font-size: 80%;
  padding: 0.2em 0.5em 0.1em 0.5em;
  white-space: nowrap;
  vertical-align: middle;
}
.description-panel a.unknown {
  color: firebrick;
}
.description-panel a.unknown::before {
  content: '\2297';
  padding-right: 2px;
}
.description-panel p a,
.description-panel dl a,
.description-panel ul a,
.description-panel .note a,
.description-panel p a:visited,
.description-panel dl a:visited,
.description-panel ul a:visited,
.description-panel .note a:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: 0.5px solid;
}
.description-panel p a:hover,
.description-panel dl a:hover,
.description-panel ul a:hover,
.description-panel .note a:hover {
  border-bottom: 2px solid;
}
.description-panel dt {
  font-weight: bold;
  color: var(--color-text);
  margin-top: 4px;
}
.description-panel dd {
  margin-left: 10px;
}
.description-panel fieldset {
  border: 0 none;
  background: unset;
  padding: 0 0 1.5ex;
  margin: 0;
}
.description-panel fieldset legend {
  font-weight: bold;
  padding: 0 0 0.5ex;
}
.description-panel h1 {
  color: var(--color-gold-dark);
}
.description-panel .subheading {
  font-size: 1rem;
  color: var(--description-subheading);
  font-weight: 700;
}
.description-panel button.collapse {
  font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: 270;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.5rem;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  position: absolute;
  top: calc(var(--dialog-padding) * -1 + 4px);
  right: calc(var(--dialog-padding) * -1 + 4px);
  border: none;
  border-radius: 99px;
  color: inherit;
  background-color: var(--panel-bg);
  transition: background-color 0.25s ease-in-out;
}
:root[data-theme='dark'] .description-panel button.collapse {
  font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
}
.description-panel button.collapse:hover {
  background-color: var(--collapse-hover-bg);
}
.description-panel .collapse-anchor {
  position: sticky;
  float: right;
  top: 0;
  z-index: 1000;
  width: 1.5em;
  height: 1.5em;
  background-color: var(--panel-bg);
}
.description-panel button {
  background-color: var(--toolbar-button);
  border: none;
  border-radius: 99px;
  padding: 8px;
  color: var(--color-text);
  cursor: pointer;
}
.description-panel button:hover {
  color: var(--color-text);
  background-color: var(--interaction-button-hover);
}
.description-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox) {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  position: relative;
  border-radius: 6px;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.description-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox)::after {
  font-family: 'Material Symbols Outlined', sans-serif;
  display: inline-grid;
  place-content: center;
  border: none;
  color: var(--color-text);
}
.description-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox)::after {
  content: 'check_box_outline_blank';
  font-size: 1.5rem;
  font-weight: 300;
}
.description-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox):checked::after {
  content: 'check_box';
}
.description-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox):hover {
  background-color: var(--toolbar-button);
  box-shadow: 0 0 0 6px var(--toolbar-button);
}
.description-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox) {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  position: relative;
  border-radius: 6px;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.description-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox)::after {
  font-family: 'Material Symbols Outlined', sans-serif;
  display: inline-grid;
  place-content: center;
  border: none;
  color: var(--color-text);
}
.description-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox)::after {
  content: 'toggle_off';
  font-size: 2.75rem;
  font-weight: 100;
}
.description-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox):checked::after {
  content: 'toggle_on';
  font-variation-settings: 'FILL' 1;
}
.description-panel input[type='checkbox']:hover {
  background-color: var(--interaction-button-hover);
  cursor: pointer;
}
.description-panel input[type='range'] {
  width: 100px;
  min-width: 7rem;
  max-width: 10rem;
  -webkit-appearance: none;
  background-color: transparent;
}
.description-panel input[type='range'] ::before {
  content: '';
  display: inline-flex;
}
.description-panel input[type='range']::-webkit-slider-runnable-track {
  background: var(--interaction-alt);
  height: 6px;
  border-radius: 1000px;
}
.description-panel input[type='range']::-moz-range-track {
  background: var(--interaction-alt);
  height: 6px;
  border-radius: 1000px;
}
.description-panel input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--interaction-alt);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
}
.description-panel input[type='range']::-moz-range-thumb {
  -webkit-appearance: none;
  background: var(--interaction-alt);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
}
.description-panel input[type='range']:hover {
  cursor: pointer;
}
.toolbar {
  view-transition-name: demo-toolbar;
  position: absolute;
  top: 16px;
  z-index: 3;
  left: 10px;
}
@media (min-width: 40rem) {
  .toolbar {
    left: 50%;
    transform: translateX(-50%);
  }
}
.toolbar.toolbar--secondary {
  view-transition-name: demo-toolbar-secondary;
}
.panel-bar {
  flex: 0 0 var(--panel-bar-width);
}
.panel-bar button {
  display: none;
  writing-mode: vertical-lr;
  white-space: nowrap;
}
.panel-bar button .icon {
  rotate: 90deg;
}
.panel-bar button .label {
  padding-inline: 1ex;
}
@media (min-width: 0) {
  body {
    display: grid;
    grid-template-areas: 'main';
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
  }
  .main-container {
    display: block;
    border-radius: 0;
    padding: 0;
    gap: 0;
  }
  .main-container #graphComponent,
  .main-container .full-size-graph-component {
    z-index: 1;
    border-radius: 0;
  }
  .graph-panel {
    border-radius: 0;
    padding: 0;
    gap: 0;
  }
  .interaction-panel {
    border-radius: var(--border-radius);
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: calc(100% - 10px - 75px);
    box-shadow: var(--shadow-crispy-gray);
    width: var(--interaction-width);
    max-width: calc(100% - 20px);
  }
  .description-panel {
    --margin-block: 0.75rem;
    font-size: var(--body-font-size);
    --panel-bg: var(--description-bg);
    --collapse-hover-bg: var(--interaction-button-hover);
    padding: var(--dialog-padding);
    overflow-x: hidden;
    color: var(--description-text);
    background-color: var(--description-bg);
    /* Additional small heading above the h1 */
    /*
    This is the anchoring element for the collapse icon.
    By default, it is sticky on the top-left and reserves space for always-visible part of the icon.
    If this is not desired for a specific demo, override the width and height with smaller values.
   */
    z-index: 3;
    position: absolute;
    height: 100%;
    max-height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 0;
    display: flex;
    padding: 20px 30px;
  }
  @supports not selector(::-webkit-scrollbar) {
    .description-panel {
      scrollbar-width: thin;
    }
  }
  .description-panel::-webkit-scrollbar {
    width: 6px;
  }
  .description-panel::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .description-panel::-webkit-scrollbar-thumb {
    background-color: rgb(from var(--scrollbar-bg) r g b / 0.6);
    border-radius: 6px;
  }
  .description-panel::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-bg);
  }
  .description-panel > :first-child,
  .description-panel h2:first-child,
  .description-panel h3:first-child {
    margin-top: 0 !important;
  }
  .description-panel > :last-child {
    margin-bottom: 0 !important;
  }
  .description-panel h1,
  .description-panel h2,
  .description-panel h3,
  .description-panel h4 {
    margin: 1.25rem 0 var(--margin-block);
    hyphens: auto;
  }
  .description-panel h1 {
    font-size: 2rem;
    margin-top: 0;
  }
  .description-panel h2 {
    font-size: 1.5rem;
  }
  .description-panel h3 {
    font-size: 1.25rem;
  }
  .description-panel .text-medium {
    font-size: 130%;
  }
  .description-panel ul,
  .description-panel ol {
    padding-left: 1.25em;
  }
  .description-panel p,
  .description-panel dl,
  .description-panel ul,
  .description-panel ul.paragraph-style li {
    margin-block: var(--margin-block);
  }
  .description-panel li {
    margin: 0.5rem 0;
  }
  .description-panel .compact li {
    margin: 0.25rem 0;
  }
  .description-panel .tutorial-about {
    font-size: 130%;
    line-height: 140%;
  }
  .description-panel code,
  .description-panel pre,
  .description-panel kbd,
  .description-panel a.api {
    background: var(--inline-code-background);
    color: var(--inline-code-color);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: 'Consolas', monospace;
  }
  .description-panel pre {
    padding: 8px;
    overflow-x: auto;
    max-width: 100%;
  }
  .description-panel kbd {
    border: 1px solid #c1c1c1;
    box-shadow: var(--shadow-cripsy-gray);
    font-size: 80%;
    padding: 0.2em 0.5em 0.1em 0.5em;
    white-space: nowrap;
    vertical-align: middle;
  }
  .description-panel a.unknown {
    color: firebrick;
  }
  .description-panel a.unknown::before {
    content: '\2297';
    padding-right: 2px;
  }
  .description-panel p a,
  .description-panel dl a,
  .description-panel ul a,
  .description-panel .note a,
  .description-panel p a:visited,
  .description-panel dl a:visited,
  .description-panel ul a:visited,
  .description-panel .note a:visited {
    color: inherit;
    text-decoration: none;
    border-bottom: 0.5px solid;
  }
  .description-panel p a:hover,
  .description-panel dl a:hover,
  .description-panel ul a:hover,
  .description-panel .note a:hover {
    border-bottom: 2px solid;
  }
  .description-panel dt {
    font-weight: bold;
    color: var(--color-text);
    margin-top: 4px;
  }
  .description-panel dd {
    margin-left: 10px;
  }
  .description-panel fieldset {
    border: 0 none;
    background: unset;
    padding: 0 0 1.5ex;
    margin: 0;
  }
  .description-panel fieldset legend {
    font-weight: bold;
    padding: 0 0 0.5ex;
  }
  .description-panel h1 {
    color: var(--color-gold-dark);
  }
  .description-panel .subheading {
    font-size: 1rem;
    color: var(--description-subheading);
    font-weight: 700;
  }
  .description-panel button.collapse {
    font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: 270;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.5rem;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    position: absolute;
    top: calc(var(--dialog-padding) * -1 + 4px);
    right: calc(var(--dialog-padding) * -1 + 4px);
    border: none;
    border-radius: 99px;
    color: inherit;
    background-color: var(--panel-bg);
    transition: background-color 0.25s ease-in-out;
  }
  :root[data-theme='dark'] .description-panel button.collapse {
    font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
  }
  .description-panel button.collapse:hover {
    background-color: var(--collapse-hover-bg);
  }
  .description-panel .collapse-anchor {
    position: sticky;
    float: right;
    top: 0;
    z-index: 1000;
    width: 1.5em;
    height: 1.5em;
    background-color: var(--panel-bg);
  }
  .description-panel button {
    background-color: var(--toolbar-button);
    border: none;
    border-radius: 99px;
    padding: 8px;
    color: var(--color-text);
    cursor: pointer;
  }
  .description-panel button:hover {
    color: var(--color-text);
    background-color: var(--interaction-button-hover);
  }
  .description-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox) {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    position: relative;
    border-radius: 6px;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
  }
  .description-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox)::after {
    font-family: 'Material Symbols Outlined', sans-serif;
    display: inline-grid;
    place-content: center;
    border: none;
    color: var(--color-text);
  }
  .description-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox)::after {
    content: 'check_box_outline_blank';
    font-size: 1.5rem;
    font-weight: 300;
  }
  .description-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox):checked::after {
    content: 'check_box';
  }
  .description-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox):hover {
    background-color: var(--toolbar-button);
    box-shadow: 0 0 0 6px var(--toolbar-button);
  }
  .description-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox) {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    position: relative;
    border-radius: 6px;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
  }
  .description-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox)::after {
    font-family: 'Material Symbols Outlined', sans-serif;
    display: inline-grid;
    place-content: center;
    border: none;
    color: var(--color-text);
  }
  .description-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox)::after {
    content: 'toggle_off';
    font-size: 2.75rem;
    font-weight: 100;
  }
  .description-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox):checked::after {
    content: 'toggle_on';
    font-variation-settings: 'FILL' 1;
  }
  .description-panel input[type='checkbox']:hover {
    background-color: var(--interaction-button-hover);
    cursor: pointer;
  }
  .description-panel input[type='range'] {
    width: 100px;
    min-width: 7rem;
    max-width: 10rem;
    -webkit-appearance: none;
    background-color: transparent;
  }
  .description-panel input[type='range'] ::before {
    content: '';
    display: inline-flex;
  }
  .description-panel input[type='range']::-webkit-slider-runnable-track {
    background: var(--interaction-alt);
    height: 6px;
    border-radius: 1000px;
  }
  .description-panel input[type='range']::-moz-range-track {
    background: var(--interaction-alt);
    height: 6px;
    border-radius: 1000px;
  }
  .description-panel input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: var(--interaction-alt);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
  }
  .description-panel input[type='range']::-moz-range-thumb {
    -webkit-appearance: none;
    background: var(--interaction-alt);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
  }
  .description-panel input[type='range']:hover {
    cursor: pointer;
  }
  .description-panel .mobile-start-here-button {
    display: flex;
    background-color: var(--color-gold-dark);
    box-shadow: var(--shadow-crispy-gray);
    float: right;
    padding: 10px 20px;
    border-radius: 999px;
    color: white;
    border: none;
  }
  .description-panel .mobile-start-here-button:hover {
    background-color: var(--color-casper-blue-mid);
  }
  .description-panel .mobile-start-here-button .label {
    padding-inline: 1ex;
  }
  .description-panel .mobile-start-here-button .icon {
    font-size: 1.5rem;
    font-weight: 300;
  }
  .description-panel .mobile-description-yfiles-title {
    display: inline-flex;
    margin-top: 0;
  }
  .description-panel .mobile-description-panel-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .description-panel .mobile-description-panel-buttons .description-live-demo-button,
  .description-panel .mobile-description-panel-buttons .description-try-yfiles-button {
    width: fit-content;
    border: none;
    border-radius: 999px;
    background-color: var(--burger-menu-primary-highlight);
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    margin: 10px;
    padding: 15px 20px;
    line-height: 1rem;
  }
  .description-panel .mobile-description-panel-buttons .description-live-demo-button:hover,
  .description-panel .mobile-description-panel-buttons .description-try-yfiles-button:hover {
    opacity: 0.8;
  }
  .header {
    display: none;
  }
  .navbar {
    display: none;
  }
  .description-panel {
    display: none;
  }
  .interaction-panel {
    display: none;
  }
  .panel-bar {
    display: none;
  }
  .demo-overlay {
    display: none;
  }
  button.plain.mobile {
    position: absolute;
    display: flex;
    z-index: 2;
    right: 10px;
    background-color: var(--toolbar-bg);
    box-shadow: var(--shadow-crispy-gray);
  }
  button.plain.mobile.expand-interaction {
    top: 70px;
  }
  button.plain.mobile.burger-menu {
    top: 17px;
  }
  button.plain.mobile:hover {
    background-color: var(--toolbar-bg-hover);
    color: var(--color-text);
    cursor: pointer;
  }
  button.plain.mobile .label {
    padding-inline: 1ex;
  }
  .description-panel-hidden .description-panel {
    display: none;
  }
  .description-panel-visible .description-panel {
    display: block;
  }
  .interaction-panel-hidden .interaction-panel {
    display: none;
  }
  .interaction-panel-hidden button.mobile.expand-interaction {
    display: flex;
  }
  .interaction-panel-visible .interaction-panel {
    display: block;
  }
  .interaction-panel-visible button.mobile.expand-interaction {
    display: none;
  }
}
@media (min-width: 0) and (pointer: coarse) {
  .description-panel::-webkit-scrollbar {
    width: 3px;
  }
}
@media (min-width: 0) and (min-width: 64rem) {
  .description-panel .mobile-start-here-button {
    display: none;
  }
}
@media (min-width: 0) and (min-width: 64rem) {
  .description-panel .mobile-description-yfiles-title {
    display: none;
  }
}
@media (min-width: 40rem) {
  body {
    display: grid;
    grid-template-areas: 'header' 'main';
    grid-template-rows: var(--header-height) minmax(0, 1fr);
    grid-template-columns: 1fr;
    gap: 0;
  }
  .main-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-radius: var(--border-radius);
    padding: 0 var(--panel-gap) var(--panel-gap) var(--panel-gap);
    gap: var(--panel-gap);
  }
  .main-container #graphComponent,
  .main-container .full-size-graph-component {
    border-radius: var(--border-radius);
  }
  .graph-panel {
    border-radius: var(--border-radius);
  }
  .interaction-panel {
    flex: 0 0 var(--interaction-width);
    position: relative;
    height: 100%;
    bottom: 0;
    right: 0;
    box-shadow: none;
    --margin-block: 0.75rem;
    font-size: var(--body-font-size);
    --panel-bg: var(--description-bg);
    --collapse-hover-bg: var(--interaction-button-hover);
    padding: var(--dialog-padding);
    overflow-x: hidden;
    color: var(--description-text);
    background-color: var(--description-bg);
    /* Additional small heading above the h1 */
    /*
    This is the anchoring element for the collapse icon.
    By default, it is sticky on the top-left and reserves space for always-visible part of the icon.
    If this is not desired for a specific demo, override the width and height with smaller values.
   */
    z-index: 2;
    /* If a panel doesn't scroll but has content that fits the height,
   we don't need sticky placement. */
  }
  @supports not selector(::-webkit-scrollbar) {
    .interaction-panel {
      scrollbar-width: thin;
    }
  }
  .interaction-panel::-webkit-scrollbar {
    width: 6px;
  }
  .interaction-panel::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .interaction-panel::-webkit-scrollbar-thumb {
    background-color: rgb(from var(--scrollbar-bg) r g b / 0.6);
    border-radius: 6px;
  }
  .interaction-panel::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-bg);
  }
  .interaction-panel > :first-child,
  .interaction-panel h2:first-child,
  .interaction-panel h3:first-child {
    margin-top: 0 !important;
  }
  .interaction-panel > :last-child {
    margin-bottom: 0 !important;
  }
  .interaction-panel h1,
  .interaction-panel h2,
  .interaction-panel h3,
  .interaction-panel h4 {
    margin: 1.25rem 0 var(--margin-block);
    hyphens: auto;
  }
  .interaction-panel h1 {
    font-size: 2rem;
    margin-top: 0;
  }
  .interaction-panel h2 {
    font-size: 1.5rem;
  }
  .interaction-panel h3 {
    font-size: 1.25rem;
  }
  .interaction-panel .text-medium {
    font-size: 130%;
  }
  .interaction-panel ul,
  .interaction-panel ol {
    padding-left: 1.25em;
  }
  .interaction-panel p,
  .interaction-panel dl,
  .interaction-panel ul,
  .interaction-panel ul.paragraph-style li {
    margin-block: var(--margin-block);
  }
  .interaction-panel li {
    margin: 0.5rem 0;
  }
  .interaction-panel .compact li {
    margin: 0.25rem 0;
  }
  .interaction-panel .tutorial-about {
    font-size: 130%;
    line-height: 140%;
  }
  .interaction-panel code,
  .interaction-panel pre,
  .interaction-panel kbd,
  .interaction-panel a.api {
    background: var(--inline-code-background);
    color: var(--inline-code-color);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: 'Consolas', monospace;
  }
  .interaction-panel pre {
    padding: 8px;
    overflow-x: auto;
    max-width: 100%;
  }
  .interaction-panel kbd {
    border: 1px solid #c1c1c1;
    box-shadow: var(--shadow-cripsy-gray);
    font-size: 80%;
    padding: 0.2em 0.5em 0.1em 0.5em;
    white-space: nowrap;
    vertical-align: middle;
  }
  .interaction-panel a.unknown {
    color: firebrick;
  }
  .interaction-panel a.unknown::before {
    content: '\2297';
    padding-right: 2px;
  }
  .interaction-panel p a,
  .interaction-panel dl a,
  .interaction-panel ul a,
  .interaction-panel .note a,
  .interaction-panel p a:visited,
  .interaction-panel dl a:visited,
  .interaction-panel ul a:visited,
  .interaction-panel .note a:visited {
    color: inherit;
    text-decoration: none;
    border-bottom: 0.5px solid;
  }
  .interaction-panel p a:hover,
  .interaction-panel dl a:hover,
  .interaction-panel ul a:hover,
  .interaction-panel .note a:hover {
    border-bottom: 2px solid;
  }
  .interaction-panel dt {
    font-weight: bold;
    color: var(--color-text);
    margin-top: 4px;
  }
  .interaction-panel dd {
    margin-left: 10px;
  }
  .interaction-panel fieldset {
    border: 0 none;
    background: unset;
    padding: 0 0 1.5ex;
    margin: 0;
  }
  .interaction-panel fieldset legend {
    font-weight: bold;
    padding: 0 0 0.5ex;
  }
  .interaction-panel h1 {
    color: var(--color-gold-dark);
  }
  .interaction-panel .subheading {
    font-size: 1rem;
    color: var(--description-subheading);
    font-weight: 700;
  }
  .interaction-panel button.collapse {
    font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: 270;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.5rem;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    position: absolute;
    top: calc(var(--dialog-padding) * -1 + 4px);
    right: calc(var(--dialog-padding) * -1 + 4px);
    border: none;
    border-radius: 99px;
    color: inherit;
    background-color: var(--panel-bg);
    transition: background-color 0.25s ease-in-out;
  }
  :root[data-theme='dark'] .interaction-panel button.collapse {
    font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
  }
  .interaction-panel button.collapse:hover {
    background-color: var(--collapse-hover-bg);
  }
  .interaction-panel .collapse-anchor {
    position: sticky;
    float: right;
    top: 0;
    z-index: 1000;
    width: 1.5em;
    height: 1.5em;
    background-color: var(--panel-bg);
  }
  .interaction-panel button {
    background-color: var(--toolbar-button);
    border: none;
    border-radius: 99px;
    padding: 8px;
    color: var(--color-text);
    cursor: pointer;
  }
  .interaction-panel button:hover {
    color: var(--color-text);
    background-color: var(--interaction-button-hover);
  }
  .interaction-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox) {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    position: relative;
    border-radius: 6px;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
  }
  .interaction-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox)::after {
    font-family: 'Material Symbols Outlined', sans-serif;
    display: inline-grid;
    place-content: center;
    border: none;
    color: var(--color-text);
  }
  .interaction-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox)::after {
    content: 'check_box_outline_blank';
    font-size: 1.5rem;
    font-weight: 300;
  }
  .interaction-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox):checked::after {
    content: 'check_box';
  }
  .interaction-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox):hover {
    background-color: var(--toolbar-button);
    box-shadow: 0 0 0 6px var(--toolbar-button);
  }
  .interaction-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox) {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    position: relative;
    border-radius: 6px;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
  }
  .interaction-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox)::after {
    font-family: 'Material Symbols Outlined', sans-serif;
    display: inline-grid;
    place-content: center;
    border: none;
    color: var(--color-text);
  }
  .interaction-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox)::after {
    content: 'toggle_off';
    font-size: 2.75rem;
    font-weight: 100;
  }
  .interaction-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox):checked::after {
    content: 'toggle_on';
    font-variation-settings: 'FILL' 1;
  }
  .interaction-panel input[type='checkbox']:hover {
    background-color: var(--interaction-button-hover);
    cursor: pointer;
  }
  .interaction-panel input[type='range'] {
    width: 100px;
    min-width: 7rem;
    max-width: 10rem;
    -webkit-appearance: none;
    background-color: transparent;
  }
  .interaction-panel input[type='range'] ::before {
    content: '';
    display: inline-flex;
  }
  .interaction-panel input[type='range']::-webkit-slider-runnable-track {
    background: var(--interaction-alt);
    height: 6px;
    border-radius: 1000px;
  }
  .interaction-panel input[type='range']::-moz-range-track {
    background: var(--interaction-alt);
    height: 6px;
    border-radius: 1000px;
  }
  .interaction-panel input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: var(--interaction-alt);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
  }
  .interaction-panel input[type='range']::-moz-range-thumb {
    -webkit-appearance: none;
    background: var(--interaction-alt);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
  }
  .interaction-panel input[type='range']:hover {
    cursor: pointer;
  }
  .interaction-panel > :nth-child(2) {
    margin-top: 0;
  }
  .interaction-panel.absolute-collapse .collapse-anchor {
    position: absolute;
    top: var(--border-radius);
    right: var(--border-radius);
    width: 0;
    height: 0;
  }
  .interaction-panel input[type='number'] {
    border: 1px solid var(--color-text);
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: transparent;
    width: 40px;
    width: 60px;
  }
  .interaction-panel input[type='number']:focus {
    outline: none;
    box-shadow: none;
  }
  .interaction-panel input[type='text'] {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--toolbar-button-text);
    background-color: var(--error-dialog-input-background);
    border-radius: 4px 4px 0 0;
    outline: 0;
    font-size: 16px;
    padding: 6px 4px;
    transition: border-color 0.25s ease-in-out;
  }
  .interaction-panel .demo-properties__settings {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 1rem;
    align-items: center;
    position: relative;
    background-color: var(--description-bg);
    gap: 10px;
  }
  .interaction-panel .demo-properties__settings > input,
  .interaction-panel select {
    justify-self: end;
  }
  .interaction-panel .demo-properties__settings > label {
    justify-self: start;
  }
  .interaction-panel .demo-properties__settings > button {
    grid-column: -1/1;
  }
  .interaction-panel .options-section {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    justify-content: center;
  }
  .interaction-panel .options-section > label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
  }
  .interaction-panel .options-section > label > span:first-child {
    flex: 1 1 auto;
    min-width: 30px;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section > label input {
    align-self: center;
  }
  .interaction-panel .options-section > label > select {
    align-self: flex-start;
    flex: 0 0 auto;
    width: auto;
    inline-size: auto;
    min-width: 0;
    max-width: none;
    margin-inline-start: auto;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .interaction-panel .options-section.two-rows > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])):not(:has(> input[type='number'])) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }
  .interaction-panel .options-section.two-rows > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])):not(:has(> input[type='number'])) > span:first-child {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
  }
  .interaction-panel .options-section.two-rows > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])):not(:has(> input[type='number'])) > select {
    align-self: stretch;
    flex: 1 1 auto;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    max-width: none;
    margin-inline-start: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .interaction-panel .options-section.two-rows > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])):not(:has(> input[type='number'])) > .range-container {
    margin-inline-start: 0;
    width: 100%;
  }
  .interaction-panel .options-section.two-rows > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])):not(:has(> input[type='number'])) > .range-container > input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .interaction-panel .options-section.two-rows > label:has(input[type='checkbox']),
  .interaction-panel .options-section.two-rows > label:has(> input[type='number']):not(:has(input[type='range'])) {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
  }
  .interaction-panel .options-section.two-rows > label:has(input[type='checkbox']) > span:first-child,
  .interaction-panel .options-section.two-rows > label:has(> input[type='number']):not(:has(input[type='range'])) > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section.two-rows > label:has(input[type='checkbox']) > input[type='checkbox'],
  .interaction-panel .options-section.two-rows > label:has(> input[type='number']):not(:has(input[type='range'])) > input[type='checkbox'],
  .interaction-panel .options-section.two-rows > label:has(input[type='checkbox']) > input[type='number'],
  .interaction-panel .options-section.two-rows > label:has(> input[type='number']):not(:has(input[type='range'])) > input[type='number'] {
    flex: 0 0 auto;
    margin: 0;
    align-self: center;
  }
  .interaction-panel .options-section.two-rows > label:has(input[type='range']) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  .interaction-panel .options-section.two-rows > label:has(input[type='range']) > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section.two-rows > label:has(input[type='range']) > .range-container {
    flex: 1 1 100%;
    margin-inline-start: 0;
    width: 100%;
    align-self: center;
  }
  .interaction-panel .options-section.two-rows > label:has(input[type='range']) > .range-container > input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .interaction-panel .range-container {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-inline-start: auto;
    gap: 0.2rem;
  }
  .interaction-panel .range-container > input[type='range'] {
    min-width: 0;
  }
  .interaction-panel .range-container > .number-label {
    flex: 0 0 auto;
    min-width: 2ch;
    text-align: end;
    line-height: 1;
  }
  .header {
    align-items: center;
    gap: 12px;
    padding: 0 var(--panel-gap) 0 calc(var(--nav-rail-width) + var(--border-radius) - 12px);
    font-size: 1.125rem;
    font-weight: 400;
    grid-area: header;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    user-select: none;
    padding: 0 var(--panel-gap) 0 0;
  }
  .header a {
    color: inherit;
    text-decoration: none;
  }
  .header a:hover {
    text-decoration: underline;
  }
  .header .y-logo {
    height: 100%;
    background-color: var(--color-text);
    mask: url("data:image/svg+xml,%3csvg%20id='Ebene_2'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20104.21%2042.42'%3e%3cdefs%3e%3cstyle%3e.cls-1{fill:%23242265;}%3c/style%3e%3c/defs%3e%3cg%20id='b'%3e%3cg%20id='c'%3e%3cg%20id='d'%3e%3cpath%20class='cls-1'%20d='M58.87,17.09v.07l-6.29,15.85h-2.77v-.05l2.37-5.48-4.57-10.33v-.07h2.82l2.27,5.45c.28.68.52,1.37.72,2.08.22-.79.43-1.43.65-2.08l2.08-5.45h2.73,0Z'/%3e%3cpath%20class='cls-1'%20d='M61.07,11.5h10.16v2.61h-7.34v4.69h6.58v2.53h-6.58v6.43h-2.82V11.5Z'/%3e%3cpath%20class='cls-1'%20d='M73.26,13.32c-.04-.9.65-1.66,1.55-1.7.9-.04,1.66.65,1.7,1.55.04.9-.65,1.66-1.55,1.7-.02,0-.05,0-.07,0-.84.06-1.57-.58-1.62-1.42,0-.04,0-.09,0-.13ZM73.58,17.09h2.61v10.66h-2.61v-10.66Z'/%3e%3cpath%20class='cls-1'%20d='M79.24,10.54h2.61l.02,17.21h-2.63s0-17.21,0-17.21Z'/%3e%3cpath%20class='cls-1'%20d='M94.62,22.04c-.01.42-.04.83-.1,1.24h-7.65c.33,1.72,1.67,2.63,3.39,2.63,1.03.04,2.05-.32,2.82-1l1.1,1.67c-1.16.98-2.64,1.51-4.16,1.48-3.42,0-5.76-2.32-5.76-5.67,0-3.13,2.27-5.6,5.5-5.6,3.01,0,4.85,2.03,4.85,5.24ZM86.89,21.52h5.26c-.07-1.7-1.08-2.58-2.44-2.58s-2.53.93-2.82,2.58h0Z'/%3e%3cpath%20class='cls-1'%20d='M96.12,26.83l1.03-1.84c.87.57,1.88.87,2.92.88.96,0,1.58-.43,1.58-1.1,0-.79-1-1.17-2.06-1.58-1.7-.65-3.01-1.53-3.01-3.28,0-1.96,1.75-2.99,3.78-2.99,1.23,0,2.44.32,3.49.96l-.91,1.75c-.73-.39-1.54-.6-2.37-.62-.81,0-1.51.24-1.51.91s.79,1.1,1.94,1.51c1.86.69,3.2,1.58,3.2,3.35,0,1.98-1.6,3.23-3.95,3.23-1.46.03-2.9-.38-4.14-1.17h0Z'/%3e%3cpath%20class='cls-1'%20d='M40.07,16.71c-.03-4.45-2.42-8.54-6.29-10.74l-7.61-4.34c-3.87-2.2-8.61-2.17-12.45.07l-7.56,4.42C2.32,8.38-.02,12.5,0,16.95l.05,8.76c.03,4.45,2.42,8.54,6.29,10.75l7.61,4.33c3.86,2.2,8.61,2.17,12.45-.07l7.56-4.42c3.84-2.25,6.19-6.37,6.16-10.82,0,0-.05-8.76-.05-8.76ZM33.21,15.42c-.13.79-.63,1.47-1.35,1.84-.7.33-1.46.51-2.23.52-.79.04-1.58.22-2.31.53-.25.12-.5.26-.74.41-.52.32-1.01.67-1.49,1.05-.65.45-1.2,1.03-1.62,1.69-.28.46-.46.96-.59,1.48.21.16.41.34.63.49.62.43,1.31.73,2.05.9.39.09.77.13,1.1.19.56.05,1.12.17,1.65.37.97.36,1.63,1.25,1.7,2.28.08,1.29-.85,2.42-2.13,2.58-.87.1-1.74-.24-2.3-.91-.4-.47-.69-1.02-.88-1.6-.19-.54-.41-1.07-.66-1.58-.33-.59-.77-1.12-1.29-1.56,0,.37,0,.74.05,1.1.06.55.11,1.1.2,1.65.13.74.41,1.45.81,2.08.19.34.44.64.62.92.36.43.67.91.9,1.42.43.94.27,2.04-.41,2.82-.85.97-2.31,1.11-3.33.32-.69-.54-1.06-1.4-.98-2.27.06-.61.23-1.21.51-1.76.25-.52.46-1.05.65-1.59.19-.67.25-1.37.19-2.06-.04-.7-.12-1.41-.24-2.1-.1-.67-.34-1.31-.68-1.89-.81-.61-1.79-.96-2.8-1.02-.96-.02-1.9.18-2.77.57-.39.16-.79.3-1.18.47-.9.38-1.68.98-2.29,1.75-.39.48-.76.99-1.19,1.43-.5.54-1.18.87-1.91.93-1.21.08-2.3-.71-2.59-1.89-.31-1.36.55-2.71,1.91-3.02.02,0,.03,0,.05-.01.47-.11.95-.12,1.42-.05.42.07.84.13,1.26.19.7.11,1.41.1,2.11-.02.49-.11.98-.26,1.44-.45.46-.17.91-.35,1.37-.55.58-.24,1.1-.58,1.55-1.01-.16-.07-.32-.14-.48-.21-.91-.36-1.89-.5-2.85-.39-.62.06-1.23.16-1.85.17-.73.03-1.45-.22-2.01-.7-.91-.79-1.12-2.13-.49-3.16.75-1.18,2.31-1.53,3.48-.78.01,0,.03.02.04.03.41.25.76.59,1.04.98.25.34.5.69.76,1.03.42.57.92,1.07,1.51,1.48.42.27.87.51,1.34.7.06.03.12.05.18.07.36-.51.64-1.07.8-1.68.15-.62.24-1.26.34-1.89.12-.67.14-1.35.06-2.02-.08-.52-.22-1.02-.41-1.51-.29-.64-.51-1.31-.67-1.99-.13-.7.01-1.43.41-2.03.75-1.13,2.28-1.44,3.41-.68.25.17.47.38.64.62.47.65.6,1.49.35,2.25-.26.73-.67,1.39-1.21,1.94-.54.59-.96,1.27-1.26,2-.09.27-.17.54-.23.81-.14.59-.24,1.19-.31,1.8-.14.78-.12,1.57.05,2.34.07.28.17.55.28.82.47.08.94.1,1.41.05.74-.08,1.45-.32,2.09-.69.55-.33,1.06-.72,1.57-1.1.56-.39,1.05-.86,1.47-1.39.3-.42.56-.88.77-1.36.25-.66.56-1.29.94-1.88.4-.59,1.02-1,1.72-1.14,1.33-.27,2.63.59,2.9,1.92.06.3.06.6.01.9h0Z'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e") no-repeat center;
    width: 6rem;
    margin: 4px 4px 4px 16px;
  }
  .header .theme-toggle {
    margin-left: auto;
  }
  .header .theme-toggle,
  .header .fullscreen-button,
  .header .burger-menu-button {
    font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: 270;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.5rem;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    border: none;
    border-radius: 99px;
    padding: 8px;
    color: inherit;
    background-color: transparent;
    transition: background-color 0.25s ease-in-out;
  }
  :root[data-theme='dark'] .header .theme-toggle,
  :root[data-theme='dark'] .header .fullscreen-button,
  :root[data-theme='dark'] .header .burger-menu-button {
    font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
  }
  .header .theme-toggle:hover,
  .header .fullscreen-button:hover,
  .header .burger-menu-button:hover {
    background-color: #0000000f;
  }
  .header .theme-toggle:active,
  .header .fullscreen-button:active,
  .header .burger-menu-button:active {
    background-color: #0000001f;
  }
  .header .theme-toggle:hover,
  .header .fullscreen-button:hover,
  .header .burger-menu-button:hover,
  .header .theme-toggle:focus-visible,
  .header .fullscreen-button:focus-visible,
  .header .burger-menu-button:focus-visible {
    background-color: var(--color-bg-hover);
    cursor: pointer;
  }
  .header .breadcrumb-wrapper.yFiles-link {
    display: flex;
    gap: inherit;
    height: 100%;
    align-items: center;
  }
  .header .breadcrumb-wrapper.demo-name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .header .fullscreen-button {
    display: none;
  }
  .header .burger-menu-button {
    display: block;
  }
  .navbar {
    display: none;
  }
  .description-panel {
    display: none;
  }
  .interaction-panel {
    display: block;
  }
  .panel-bar {
    display: none;
  }
  .demo-overlay {
    display: block;
  }
  button.plain.mobile {
    display: none;
  }
  .description-panel-hidden .description-panel {
    display: none;
  }
  .description-panel-visible .description-panel {
    display: block;
  }
  .interaction-panel-hidden .interaction-panel {
    display: none;
  }
  .interaction-panel-hidden button.mobile.expand-interaction {
    display: flex;
    top: 15px;
  }
  .interaction-panel-visible .interaction-panel {
    display: block;
  }
  .interaction-panel-visible button.mobile.expand-interaction {
    display: none;
  }
}
@media (min-width: 40rem) and (pointer: coarse) {
  .interaction-panel::-webkit-scrollbar {
    width: 3px;
  }
}
@media (min-width: 40rem) and (max-width: 80rem) {
  .interaction-panel .options-section > label input {
    align-self: start;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    flex-wrap: nowrap;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > span:first-child {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > select {
    align-self: stretch;
    flex: 0 0 auto;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    max-width: none;
    margin-inline-start: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > .range-container {
    flex: 1 1 auto;
    margin-inline-start: 0;
    width: 100%;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > .range-container > input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) > input[type='checkbox'] {
    flex: 0 0 auto;
    margin: 0;
    align-self: start !important;
  }
  .interaction-panel .options-section > label:has(input[type='range']) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > .range-container {
    flex: 1 1 100%;
    margin-inline-start: 0;
    width: 100%;
    align-self: center;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > .range-container > input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
}
@media (min-width: 40rem) and (max-width: 40rem) {
  .interaction-panel .options-section > label {
    flex-wrap: wrap;
  }
  .interaction-panel .options-section > label input {
    align-self: start;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    flex-wrap: nowrap;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > span:first-child {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > select {
    align-self: stretch;
    flex: 0 0 auto;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    max-width: none;
    margin-inline-start: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > .range-container {
    flex: 1 1 auto;
    margin-inline-start: 0;
    width: 100%;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > .range-container > input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) > input[type='checkbox'] {
    flex: 0 0 auto;
    margin: 0;
    align-self: start !important;
  }
  .interaction-panel .options-section > label:has(input[type='range']) {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > .range-container {
    flex: 1 1 100%;
    margin-inline-start: 0;
    width: 100%;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > .range-container > input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
}
@media (min-width: 40rem) and (min-width: 64rem) {
  .header .y-logo {
    mask: url('./ylogo-large-vAY1JZhJ.svg') no-repeat center;
    width: 12rem;
  }
}
@media (min-width: 64rem) {
  body {
    display: grid;
    grid-template-areas: 'header header' 'navbar main';
    grid-template-rows: var(--header-height) minmax(0, 1fr);
    grid-template-columns: var(--nav-rail-width) 1fr;
    gap: 0;
  }
  body:not(:has(.rail nav > :not(.hidden))) {
    --nav-rail-width: 8px;
  }
  .main-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-radius: var(--border-radius);
    padding: 0 var(--panel-gap) var(--panel-gap) 0;
    gap: var(--panel-gap);
  }
  .graph-panel {
    border-radius: var(--border-radius);
  }
  .description-panel {
    --margin-block: 0.75rem;
    font-size: var(--body-font-size);
    --panel-bg: var(--description-bg);
    --collapse-hover-bg: var(--interaction-button-hover);
    padding: var(--dialog-padding);
    overflow-x: hidden;
    color: var(--description-text);
    background-color: var(--description-bg);
    /* Additional small heading above the h1 */
    /*
    This is the anchoring element for the collapse icon.
    By default, it is sticky on the top-left and reserves space for always-visible part of the icon.
    If this is not desired for a specific demo, override the width and height with smaller values.
   */
    z-index: 3;
    height: 100%;
    max-height: 100%;
    display: block;
    position: relative;
    top: unset;
    left: unset;
    box-shadow: none;
    border-radius: var(--border-radius);
  }
  @supports not selector(::-webkit-scrollbar) {
    .description-panel {
      scrollbar-width: thin;
    }
  }
  .description-panel::-webkit-scrollbar {
    width: 6px;
  }
  .description-panel::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .description-panel::-webkit-scrollbar-thumb {
    background-color: rgb(from var(--scrollbar-bg) r g b / 0.6);
    border-radius: 6px;
  }
  .description-panel::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-bg);
  }
  .description-panel > :first-child,
  .description-panel h2:first-child,
  .description-panel h3:first-child {
    margin-top: 0 !important;
  }
  .description-panel > :last-child {
    margin-bottom: 0 !important;
  }
  .description-panel h1,
  .description-panel h2,
  .description-panel h3,
  .description-panel h4 {
    margin: 1.25rem 0 var(--margin-block);
    hyphens: auto;
  }
  .description-panel h1 {
    font-size: 2rem;
    margin-top: 0;
  }
  .description-panel h2 {
    font-size: 1.5rem;
  }
  .description-panel h3 {
    font-size: 1.25rem;
  }
  .description-panel .text-medium {
    font-size: 130%;
  }
  .description-panel ul,
  .description-panel ol {
    padding-left: 1.25em;
  }
  .description-panel p,
  .description-panel dl,
  .description-panel ul,
  .description-panel ul.paragraph-style li {
    margin-block: var(--margin-block);
  }
  .description-panel li {
    margin: 0.5rem 0;
  }
  .description-panel .compact li {
    margin: 0.25rem 0;
  }
  .description-panel .tutorial-about {
    font-size: 130%;
    line-height: 140%;
  }
  .description-panel code,
  .description-panel pre,
  .description-panel kbd,
  .description-panel a.api {
    background: var(--inline-code-background);
    color: var(--inline-code-color);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: 'Consolas', monospace;
  }
  .description-panel pre {
    padding: 8px;
    overflow-x: auto;
    max-width: 100%;
  }
  .description-panel kbd {
    border: 1px solid #c1c1c1;
    box-shadow: var(--shadow-cripsy-gray);
    font-size: 80%;
    padding: 0.2em 0.5em 0.1em 0.5em;
    white-space: nowrap;
    vertical-align: middle;
  }
  .description-panel a.unknown {
    color: firebrick;
  }
  .description-panel a.unknown::before {
    content: '\2297';
    padding-right: 2px;
  }
  .description-panel p a,
  .description-panel dl a,
  .description-panel ul a,
  .description-panel .note a,
  .description-panel p a:visited,
  .description-panel dl a:visited,
  .description-panel ul a:visited,
  .description-panel .note a:visited {
    color: inherit;
    text-decoration: none;
    border-bottom: 0.5px solid;
  }
  .description-panel p a:hover,
  .description-panel dl a:hover,
  .description-panel ul a:hover,
  .description-panel .note a:hover {
    border-bottom: 2px solid;
  }
  .description-panel dt {
    font-weight: bold;
    color: var(--color-text);
    margin-top: 4px;
  }
  .description-panel dd {
    margin-left: 10px;
  }
  .description-panel fieldset {
    border: 0 none;
    background: unset;
    padding: 0 0 1.5ex;
    margin: 0;
  }
  .description-panel fieldset legend {
    font-weight: bold;
    padding: 0 0 0.5ex;
  }
  .description-panel h1 {
    color: var(--color-gold-dark);
  }
  .description-panel .subheading {
    font-size: 1rem;
    color: var(--description-subheading);
    font-weight: 700;
  }
  .description-panel button.collapse {
    font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: 270;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.5rem;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    position: absolute;
    top: calc(var(--dialog-padding) * -1 + 4px);
    right: calc(var(--dialog-padding) * -1 + 4px);
    border: none;
    border-radius: 99px;
    color: inherit;
    background-color: var(--panel-bg);
    transition: background-color 0.25s ease-in-out;
  }
  :root[data-theme='dark'] .description-panel button.collapse {
    font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
  }
  .description-panel button.collapse:hover {
    background-color: var(--collapse-hover-bg);
  }
  .description-panel .collapse-anchor {
    position: sticky;
    float: right;
    top: 0;
    z-index: 1000;
    width: 1.5em;
    height: 1.5em;
    background-color: var(--panel-bg);
  }
  .description-panel button {
    background-color: var(--toolbar-button);
    border: none;
    border-radius: 99px;
    padding: 8px;
    color: var(--color-text);
    cursor: pointer;
  }
  .description-panel button:hover {
    color: var(--color-text);
    background-color: var(--interaction-button-hover);
  }
  .description-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox) {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    position: relative;
    border-radius: 6px;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
  }
  .description-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox)::after {
    font-family: 'Material Symbols Outlined', sans-serif;
    display: inline-grid;
    place-content: center;
    border: none;
    color: var(--color-text);
  }
  .description-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox)::after {
    content: 'check_box_outline_blank';
    font-size: 1.5rem;
    font-weight: 300;
  }
  .description-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox):checked::after {
    content: 'check_box';
  }
  .description-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox):hover {
    background-color: var(--toolbar-button);
    box-shadow: 0 0 0 6px var(--toolbar-button);
  }
  .description-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox) {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    position: relative;
    border-radius: 6px;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
  }
  .description-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox)::after {
    font-family: 'Material Symbols Outlined', sans-serif;
    display: inline-grid;
    place-content: center;
    border: none;
    color: var(--color-text);
  }
  .description-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox)::after {
    content: 'toggle_off';
    font-size: 2.75rem;
    font-weight: 100;
  }
  .description-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox):checked::after {
    content: 'toggle_on';
    font-variation-settings: 'FILL' 1;
  }
  .description-panel input[type='checkbox']:hover {
    background-color: var(--interaction-button-hover);
    cursor: pointer;
  }
  .description-panel input[type='range'] {
    width: 100px;
    min-width: 7rem;
    max-width: 10rem;
    -webkit-appearance: none;
    background-color: transparent;
  }
  .description-panel input[type='range'] ::before {
    content: '';
    display: inline-flex;
  }
  .description-panel input[type='range']::-webkit-slider-runnable-track {
    background: var(--interaction-alt);
    height: 6px;
    border-radius: 1000px;
  }
  .description-panel input[type='range']::-moz-range-track {
    background: var(--interaction-alt);
    height: 6px;
    border-radius: 1000px;
  }
  .description-panel input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: var(--interaction-alt);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
  }
  .description-panel input[type='range']::-moz-range-thumb {
    -webkit-appearance: none;
    background: var(--interaction-alt);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
  }
  .description-panel input[type='range']:hover {
    cursor: pointer;
  }
  .interaction-panel {
    flex: 0 0 var(--interaction-width);
    position: relative;
    height: 100%;
    border-radius: var(--border-radius);
    --margin-block: 0.75rem;
    font-size: var(--body-font-size);
    --panel-bg: var(--description-bg);
    --collapse-hover-bg: var(--interaction-button-hover);
    padding: var(--dialog-padding);
    overflow-x: hidden;
    color: var(--description-text);
    background-color: var(--description-bg);
    /* Additional small heading above the h1 */
    /*
    This is the anchoring element for the collapse icon.
    By default, it is sticky on the top-left and reserves space for always-visible part of the icon.
    If this is not desired for a specific demo, override the width and height with smaller values.
   */
    z-index: 2;
    /* If a panel doesn't scroll but has content that fits the height,
   we don't need sticky placement. */
  }
  @supports not selector(::-webkit-scrollbar) {
    .interaction-panel {
      scrollbar-width: thin;
    }
  }
  .interaction-panel::-webkit-scrollbar {
    width: 6px;
  }
  .interaction-panel::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .interaction-panel::-webkit-scrollbar-thumb {
    background-color: rgb(from var(--scrollbar-bg) r g b / 0.6);
    border-radius: 6px;
  }
  .interaction-panel::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-bg);
  }
  .interaction-panel > :first-child,
  .interaction-panel h2:first-child,
  .interaction-panel h3:first-child {
    margin-top: 0 !important;
  }
  .interaction-panel > :last-child {
    margin-bottom: 0 !important;
  }
  .interaction-panel h1,
  .interaction-panel h2,
  .interaction-panel h3,
  .interaction-panel h4 {
    margin: 1.25rem 0 var(--margin-block);
    hyphens: auto;
  }
  .interaction-panel h1 {
    font-size: 2rem;
    margin-top: 0;
  }
  .interaction-panel h2 {
    font-size: 1.5rem;
  }
  .interaction-panel h3 {
    font-size: 1.25rem;
  }
  .interaction-panel .text-medium {
    font-size: 130%;
  }
  .interaction-panel ul,
  .interaction-panel ol {
    padding-left: 1.25em;
  }
  .interaction-panel p,
  .interaction-panel dl,
  .interaction-panel ul,
  .interaction-panel ul.paragraph-style li {
    margin-block: var(--margin-block);
  }
  .interaction-panel li {
    margin: 0.5rem 0;
  }
  .interaction-panel .compact li {
    margin: 0.25rem 0;
  }
  .interaction-panel .tutorial-about {
    font-size: 130%;
    line-height: 140%;
  }
  .interaction-panel code,
  .interaction-panel pre,
  .interaction-panel kbd,
  .interaction-panel a.api {
    background: var(--inline-code-background);
    color: var(--inline-code-color);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: 'Consolas', monospace;
  }
  .interaction-panel pre {
    padding: 8px;
    overflow-x: auto;
    max-width: 100%;
  }
  .interaction-panel kbd {
    border: 1px solid #c1c1c1;
    box-shadow: var(--shadow-cripsy-gray);
    font-size: 80%;
    padding: 0.2em 0.5em 0.1em 0.5em;
    white-space: nowrap;
    vertical-align: middle;
  }
  .interaction-panel a.unknown {
    color: firebrick;
  }
  .interaction-panel a.unknown::before {
    content: '\2297';
    padding-right: 2px;
  }
  .interaction-panel p a,
  .interaction-panel dl a,
  .interaction-panel ul a,
  .interaction-panel .note a,
  .interaction-panel p a:visited,
  .interaction-panel dl a:visited,
  .interaction-panel ul a:visited,
  .interaction-panel .note a:visited {
    color: inherit;
    text-decoration: none;
    border-bottom: 0.5px solid;
  }
  .interaction-panel p a:hover,
  .interaction-panel dl a:hover,
  .interaction-panel ul a:hover,
  .interaction-panel .note a:hover {
    border-bottom: 2px solid;
  }
  .interaction-panel dt {
    font-weight: bold;
    color: var(--color-text);
    margin-top: 4px;
  }
  .interaction-panel dd {
    margin-left: 10px;
  }
  .interaction-panel fieldset {
    border: 0 none;
    background: unset;
    padding: 0 0 1.5ex;
    margin: 0;
  }
  .interaction-panel fieldset legend {
    font-weight: bold;
    padding: 0 0 0.5ex;
  }
  .interaction-panel h1 {
    color: var(--color-gold-dark);
  }
  .interaction-panel .subheading {
    font-size: 1rem;
    color: var(--description-subheading);
    font-weight: 700;
  }
  .interaction-panel button.collapse {
    font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: 270;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.5rem;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    position: absolute;
    top: calc(var(--dialog-padding) * -1 + 4px);
    right: calc(var(--dialog-padding) * -1 + 4px);
    border: none;
    border-radius: 99px;
    color: inherit;
    background-color: var(--panel-bg);
    transition: background-color 0.25s ease-in-out;
  }
  :root[data-theme='dark'] .interaction-panel button.collapse {
    font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
  }
  .interaction-panel button.collapse:hover {
    background-color: var(--collapse-hover-bg);
  }
  .interaction-panel .collapse-anchor {
    position: sticky;
    float: right;
    top: 0;
    z-index: 1000;
    width: 1.5em;
    height: 1.5em;
    background-color: var(--panel-bg);
  }
  .interaction-panel button {
    background-color: var(--toolbar-button);
    border: none;
    border-radius: 99px;
    padding: 8px;
    color: var(--color-text);
    cursor: pointer;
  }
  .interaction-panel button:hover {
    color: var(--color-text);
    background-color: var(--interaction-button-hover);
  }
  .interaction-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox) {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    position: relative;
    border-radius: 6px;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
  }
  .interaction-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox)::after {
    font-family: 'Material Symbols Outlined', sans-serif;
    display: inline-grid;
    place-content: center;
    border: none;
    color: var(--color-text);
  }
  .interaction-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox)::after {
    content: 'check_box_outline_blank';
    font-size: 1.5rem;
    font-weight: 300;
  }
  .interaction-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox):checked::after {
    content: 'check_box';
  }
  .interaction-panel input[type='checkbox']:not(.demo-toggle-button):not(.custom-checkbox):hover {
    background-color: var(--toolbar-button);
    box-shadow: 0 0 0 6px var(--toolbar-button);
  }
  .interaction-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox) {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    position: relative;
    border-radius: 6px;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
  }
  .interaction-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox)::after {
    font-family: 'Material Symbols Outlined', sans-serif;
    display: inline-grid;
    place-content: center;
    border: none;
    color: var(--color-text);
  }
  .interaction-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox)::after {
    content: 'toggle_off';
    font-size: 2.75rem;
    font-weight: 100;
  }
  .interaction-panel input[type='checkbox'].demo-toggle-button:not(.custom-checkbox):checked::after {
    content: 'toggle_on';
    font-variation-settings: 'FILL' 1;
  }
  .interaction-panel input[type='checkbox']:hover {
    background-color: var(--interaction-button-hover);
    cursor: pointer;
  }
  .interaction-panel input[type='range'] {
    width: 100px;
    min-width: 7rem;
    max-width: 10rem;
    -webkit-appearance: none;
    background-color: transparent;
  }
  .interaction-panel input[type='range'] ::before {
    content: '';
    display: inline-flex;
  }
  .interaction-panel input[type='range']::-webkit-slider-runnable-track {
    background: var(--interaction-alt);
    height: 6px;
    border-radius: 1000px;
  }
  .interaction-panel input[type='range']::-moz-range-track {
    background: var(--interaction-alt);
    height: 6px;
    border-radius: 1000px;
  }
  .interaction-panel input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: var(--interaction-alt);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
  }
  .interaction-panel input[type='range']::-moz-range-thumb {
    -webkit-appearance: none;
    background: var(--interaction-alt);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
  }
  .interaction-panel input[type='range']:hover {
    cursor: pointer;
  }
  .interaction-panel > :nth-child(2) {
    margin-top: 0;
  }
  .interaction-panel.absolute-collapse .collapse-anchor {
    position: absolute;
    top: var(--border-radius);
    right: var(--border-radius);
    width: 0;
    height: 0;
  }
  .interaction-panel input[type='number'] {
    border: 1px solid var(--color-text);
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: transparent;
    width: 40px;
    width: 60px;
  }
  .interaction-panel input[type='number']:focus {
    outline: none;
    box-shadow: none;
  }
  .interaction-panel input[type='text'] {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--toolbar-button-text);
    background-color: var(--error-dialog-input-background);
    border-radius: 4px 4px 0 0;
    outline: 0;
    font-size: 16px;
    padding: 6px 4px;
    transition: border-color 0.25s ease-in-out;
  }
  .interaction-panel .demo-properties__settings {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 1rem;
    align-items: center;
    position: relative;
    background-color: var(--description-bg);
    gap: 10px;
  }
  .interaction-panel .demo-properties__settings > input,
  .interaction-panel select {
    justify-self: end;
  }
  .interaction-panel .demo-properties__settings > label {
    justify-self: start;
  }
  .interaction-panel .demo-properties__settings > button {
    grid-column: -1/1;
  }
  .interaction-panel .options-section {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    justify-content: center;
  }
  .interaction-panel .options-section > label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
  }
  .interaction-panel .options-section > label > span:first-child {
    flex: 1 1 auto;
    min-width: 30px;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section > label input {
    align-self: center;
  }
  .interaction-panel .options-section > label > select {
    align-self: flex-start;
    flex: 0 0 auto;
    width: auto;
    inline-size: auto;
    min-width: 0;
    max-width: none;
    margin-inline-start: auto;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .interaction-panel .options-section.two-rows > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])):not(:has(> input[type='number'])) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }
  .interaction-panel .options-section.two-rows > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])):not(:has(> input[type='number'])) > span:first-child {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
  }
  .interaction-panel .options-section.two-rows > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])):not(:has(> input[type='number'])) > select {
    align-self: stretch;
    flex: 1 1 auto;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    max-width: none;
    margin-inline-start: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .interaction-panel .options-section.two-rows > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])):not(:has(> input[type='number'])) > .range-container {
    margin-inline-start: 0;
    width: 100%;
  }
  .interaction-panel .options-section.two-rows > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])):not(:has(> input[type='number'])) > .range-container > input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .interaction-panel .options-section.two-rows > label:has(input[type='checkbox']),
  .interaction-panel .options-section.two-rows > label:has(> input[type='number']):not(:has(input[type='range'])) {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
  }
  .interaction-panel .options-section.two-rows > label:has(input[type='checkbox']) > span:first-child,
  .interaction-panel .options-section.two-rows > label:has(> input[type='number']):not(:has(input[type='range'])) > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section.two-rows > label:has(input[type='checkbox']) > input[type='checkbox'],
  .interaction-panel .options-section.two-rows > label:has(> input[type='number']):not(:has(input[type='range'])) > input[type='checkbox'],
  .interaction-panel .options-section.two-rows > label:has(input[type='checkbox']) > input[type='number'],
  .interaction-panel .options-section.two-rows > label:has(> input[type='number']):not(:has(input[type='range'])) > input[type='number'] {
    flex: 0 0 auto;
    margin: 0;
    align-self: center;
  }
  .interaction-panel .options-section.two-rows > label:has(input[type='range']) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  .interaction-panel .options-section.two-rows > label:has(input[type='range']) > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section.two-rows > label:has(input[type='range']) > .range-container {
    flex: 1 1 100%;
    margin-inline-start: 0;
    width: 100%;
    align-self: center;
  }
  .interaction-panel .options-section.two-rows > label:has(input[type='range']) > .range-container > input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .interaction-panel .range-container {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-inline-start: auto;
    gap: 0.2rem;
  }
  .interaction-panel .range-container > input[type='range'] {
    min-width: 0;
  }
  .interaction-panel .range-container > .number-label {
    flex: 0 0 auto;
    min-width: 2ch;
    text-align: end;
    line-height: 1;
  }
  .header {
    align-items: center;
    gap: 12px;
    padding: 0 var(--panel-gap) 0 calc(var(--nav-rail-width) + var(--border-radius) - 12px);
    font-size: 1.125rem;
    font-weight: 400;
    grid-area: header;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    user-select: none;
  }
  .header a {
    color: inherit;
    text-decoration: none;
  }
  .header a:hover {
    text-decoration: underline;
  }
  .header .y-logo {
    height: 100%;
    background-color: var(--color-text);
    mask: url("data:image/svg+xml,%3csvg%20id='Ebene_2'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20104.21%2042.42'%3e%3cdefs%3e%3cstyle%3e.cls-1{fill:%23242265;}%3c/style%3e%3c/defs%3e%3cg%20id='b'%3e%3cg%20id='c'%3e%3cg%20id='d'%3e%3cpath%20class='cls-1'%20d='M58.87,17.09v.07l-6.29,15.85h-2.77v-.05l2.37-5.48-4.57-10.33v-.07h2.82l2.27,5.45c.28.68.52,1.37.72,2.08.22-.79.43-1.43.65-2.08l2.08-5.45h2.73,0Z'/%3e%3cpath%20class='cls-1'%20d='M61.07,11.5h10.16v2.61h-7.34v4.69h6.58v2.53h-6.58v6.43h-2.82V11.5Z'/%3e%3cpath%20class='cls-1'%20d='M73.26,13.32c-.04-.9.65-1.66,1.55-1.7.9-.04,1.66.65,1.7,1.55.04.9-.65,1.66-1.55,1.7-.02,0-.05,0-.07,0-.84.06-1.57-.58-1.62-1.42,0-.04,0-.09,0-.13ZM73.58,17.09h2.61v10.66h-2.61v-10.66Z'/%3e%3cpath%20class='cls-1'%20d='M79.24,10.54h2.61l.02,17.21h-2.63s0-17.21,0-17.21Z'/%3e%3cpath%20class='cls-1'%20d='M94.62,22.04c-.01.42-.04.83-.1,1.24h-7.65c.33,1.72,1.67,2.63,3.39,2.63,1.03.04,2.05-.32,2.82-1l1.1,1.67c-1.16.98-2.64,1.51-4.16,1.48-3.42,0-5.76-2.32-5.76-5.67,0-3.13,2.27-5.6,5.5-5.6,3.01,0,4.85,2.03,4.85,5.24ZM86.89,21.52h5.26c-.07-1.7-1.08-2.58-2.44-2.58s-2.53.93-2.82,2.58h0Z'/%3e%3cpath%20class='cls-1'%20d='M96.12,26.83l1.03-1.84c.87.57,1.88.87,2.92.88.96,0,1.58-.43,1.58-1.1,0-.79-1-1.17-2.06-1.58-1.7-.65-3.01-1.53-3.01-3.28,0-1.96,1.75-2.99,3.78-2.99,1.23,0,2.44.32,3.49.96l-.91,1.75c-.73-.39-1.54-.6-2.37-.62-.81,0-1.51.24-1.51.91s.79,1.1,1.94,1.51c1.86.69,3.2,1.58,3.2,3.35,0,1.98-1.6,3.23-3.95,3.23-1.46.03-2.9-.38-4.14-1.17h0Z'/%3e%3cpath%20class='cls-1'%20d='M40.07,16.71c-.03-4.45-2.42-8.54-6.29-10.74l-7.61-4.34c-3.87-2.2-8.61-2.17-12.45.07l-7.56,4.42C2.32,8.38-.02,12.5,0,16.95l.05,8.76c.03,4.45,2.42,8.54,6.29,10.75l7.61,4.33c3.86,2.2,8.61,2.17,12.45-.07l7.56-4.42c3.84-2.25,6.19-6.37,6.16-10.82,0,0-.05-8.76-.05-8.76ZM33.21,15.42c-.13.79-.63,1.47-1.35,1.84-.7.33-1.46.51-2.23.52-.79.04-1.58.22-2.31.53-.25.12-.5.26-.74.41-.52.32-1.01.67-1.49,1.05-.65.45-1.2,1.03-1.62,1.69-.28.46-.46.96-.59,1.48.21.16.41.34.63.49.62.43,1.31.73,2.05.9.39.09.77.13,1.1.19.56.05,1.12.17,1.65.37.97.36,1.63,1.25,1.7,2.28.08,1.29-.85,2.42-2.13,2.58-.87.1-1.74-.24-2.3-.91-.4-.47-.69-1.02-.88-1.6-.19-.54-.41-1.07-.66-1.58-.33-.59-.77-1.12-1.29-1.56,0,.37,0,.74.05,1.1.06.55.11,1.1.2,1.65.13.74.41,1.45.81,2.08.19.34.44.64.62.92.36.43.67.91.9,1.42.43.94.27,2.04-.41,2.82-.85.97-2.31,1.11-3.33.32-.69-.54-1.06-1.4-.98-2.27.06-.61.23-1.21.51-1.76.25-.52.46-1.05.65-1.59.19-.67.25-1.37.19-2.06-.04-.7-.12-1.41-.24-2.1-.1-.67-.34-1.31-.68-1.89-.81-.61-1.79-.96-2.8-1.02-.96-.02-1.9.18-2.77.57-.39.16-.79.3-1.18.47-.9.38-1.68.98-2.29,1.75-.39.48-.76.99-1.19,1.43-.5.54-1.18.87-1.91.93-1.21.08-2.3-.71-2.59-1.89-.31-1.36.55-2.71,1.91-3.02.02,0,.03,0,.05-.01.47-.11.95-.12,1.42-.05.42.07.84.13,1.26.19.7.11,1.41.1,2.11-.02.49-.11.98-.26,1.44-.45.46-.17.91-.35,1.37-.55.58-.24,1.1-.58,1.55-1.01-.16-.07-.32-.14-.48-.21-.91-.36-1.89-.5-2.85-.39-.62.06-1.23.16-1.85.17-.73.03-1.45-.22-2.01-.7-.91-.79-1.12-2.13-.49-3.16.75-1.18,2.31-1.53,3.48-.78.01,0,.03.02.04.03.41.25.76.59,1.04.98.25.34.5.69.76,1.03.42.57.92,1.07,1.51,1.48.42.27.87.51,1.34.7.06.03.12.05.18.07.36-.51.64-1.07.8-1.68.15-.62.24-1.26.34-1.89.12-.67.14-1.35.06-2.02-.08-.52-.22-1.02-.41-1.51-.29-.64-.51-1.31-.67-1.99-.13-.7.01-1.43.41-2.03.75-1.13,2.28-1.44,3.41-.68.25.17.47.38.64.62.47.65.6,1.49.35,2.25-.26.73-.67,1.39-1.21,1.94-.54.59-.96,1.27-1.26,2-.09.27-.17.54-.23.81-.14.59-.24,1.19-.31,1.8-.14.78-.12,1.57.05,2.34.07.28.17.55.28.82.47.08.94.1,1.41.05.74-.08,1.45-.32,2.09-.69.55-.33,1.06-.72,1.57-1.1.56-.39,1.05-.86,1.47-1.39.3-.42.56-.88.77-1.36.25-.66.56-1.29.94-1.88.4-.59,1.02-1,1.72-1.14,1.33-.27,2.63.59,2.9,1.92.06.3.06.6.01.9h0Z'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e") no-repeat center;
    width: 6rem;
    margin: 4px 4px 4px 16px;
  }
  .header .theme-toggle {
    margin-left: auto;
  }
  .header .theme-toggle,
  .header .fullscreen-button,
  .header .burger-menu-button {
    font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: 270;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.5rem;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    border: none;
    border-radius: 99px;
    padding: 8px;
    color: inherit;
    background-color: transparent;
    transition: background-color 0.25s ease-in-out;
  }
  :root[data-theme='dark'] .header .theme-toggle,
  :root[data-theme='dark'] .header .fullscreen-button,
  :root[data-theme='dark'] .header .burger-menu-button {
    font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
  }
  .header .theme-toggle:hover,
  .header .fullscreen-button:hover,
  .header .burger-menu-button:hover {
    background-color: #0000000f;
  }
  .header .theme-toggle:active,
  .header .fullscreen-button:active,
  .header .burger-menu-button:active {
    background-color: #0000001f;
  }
  .header .theme-toggle:hover,
  .header .fullscreen-button:hover,
  .header .burger-menu-button:hover,
  .header .theme-toggle:focus-visible,
  .header .fullscreen-button:focus-visible,
  .header .burger-menu-button:focus-visible {
    background-color: var(--color-bg-hover);
    cursor: pointer;
  }
  .header .breadcrumb-wrapper.yFiles-link {
    display: flex;
    gap: inherit;
    height: 100%;
    align-items: center;
  }
  .header .breadcrumb-wrapper.demo-name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .header .burger-menu-button {
    display: none;
  }
  .navbar {
    grid-area: navbar;
    overflow: hidden;
    user-select: none;
  }
  .rail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: var(--nav-rail-width);
    height: 100%;
    padding: 4px;
    overflow-y: auto;
    font-size: 0.75rem;
  }
  .rail nav {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
  }
  .rail .spacer {
    height: 35px;
  }
  .rail button,
  .rail a {
    all: unset;
    cursor: pointer;
  }
  .rail button.live-demo,
  .rail a.try-yfiles {
    color: var(--rail-highlighted);
  }
  .rail button.live-demo.active,
  .rail a.try-yfiles.active {
    color: var(--rail-highlighted) !important;
  }
  .rail button,
  .rail a {
    display: block;
    margin: -2px auto 14px;
    padding: 2px;
    background: none;
    color: var(--color-text);
  }
  .rail button .label-only,
  .rail a .label-only {
    border-radius: 99px;
  }
  .rail button[disabled],
  .rail a[disabled] {
    color: #777;
  }
  .rail button.active,
  .rail a.active {
    color: var(--color-primary-dark);
    font-weight: 600 !important;
  }
  .rail button.active .icon,
  .rail a.active .icon {
    background-color: var(--color-bg-hover);
  }
  .rail button.active .label,
  .rail a.active .label {
    color: var(--color-primary-light);
  }
  .rail button:not(.active):not([disabled]):hover,
  .rail a:not(.active):not([disabled]):hover,
  .rail button:not(.active):not([disabled]):focus-visible,
  .rail a:not(.active):not([disabled]):focus-visible {
    font-variation-settings: 'wght' 600, 'opsz' 24;
  }
  .rail button:not(.active):not([disabled]):hover .icon,
  .rail a:not(.active):not([disabled]):hover .icon,
  .rail button:not(.active):not([disabled]):focus-visible .icon,
  .rail a:not(.active):not([disabled]):focus-visible .icon,
  .rail button:not(.active):not([disabled]):hover .label-only,
  .rail a:not(.active):not([disabled]):hover .label-only,
  .rail button:not(.active):not([disabled]):focus-visible .label-only,
  .rail a:not(.active):not([disabled]):focus-visible .label-only {
    background-color: var(--color-bg-hover);
  }
  .rail button span,
  .rail a span {
    display: block;
  }
  .rail button .icon,
  .rail a .icon {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 2rem;
    margin-right: auto;
    margin-bottom: 4px;
    margin-left: auto;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 24;
    transition: font-variation-settings 0.2s cubic-bezier(0.2, 0, 0, 1), background-color 0.25s ease-in-out;
    border-radius: 16px;
  }
  .rail button .svg-icon,
  .rail a .svg-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
    fill: currentColor;
  }
  .rail button .label,
  .rail a .label {
    margin-bottom: 4px;
    transition: font-variation-settings 0.2s cubic-bezier(0.2, 0, 0, 1), background-color 0.25s ease-in-out;
    text-align: center;
    line-height: 130%;
  }
  @supports not selector(::-webkit-scrollbar) {
    .rail {
      scrollbar-width: thin;
    }
  }
  .rail::-webkit-scrollbar {
    width: 6px;
  }
  .rail::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .rail::-webkit-scrollbar-thumb {
    background-color: rgb(from var(--scrollbar-bg) r g b / 0.6);
    border-radius: 6px;
  }
  .rail::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-bg);
  }
  .interaction-panel {
    display: block;
  }
  .panel-bar {
    display: none;
  }
  .description-panel-hidden .description-panel {
    display: none;
  }
  .description-panel-hidden .panel-bar {
    display: block;
  }
  .description-panel-hidden button.expand-description-panel {
    display: block;
  }
  .description-panel-visible .description-panel {
    display: block;
  }
  .description-panel-visible button.expand-description-panel {
    display: none;
  }
  .interaction-panel-hidden .interaction-panel {
    display: none;
  }
  .interaction-panel-hidden .panel-bar {
    display: block;
  }
  .interaction-panel-hidden button.expand-interaction-panel {
    display: block;
  }
  .interaction-panel-hidden button.mobile.expand-interaction {
    display: none;
  }
  .interaction-panel-visible .interaction-panel {
    display: block;
  }
  .interaction-panel-visible button.expand-interaction-panel {
    display: none;
  }
  .interaction-panel-visible button.mobile.expand-interaction {
    display: none;
  }
}
@media (min-width: 64rem) and (pointer: coarse) {
  .description-panel::-webkit-scrollbar {
    width: 3px;
  }
}
@media (min-width: 64rem) and (pointer: coarse) {
  .interaction-panel::-webkit-scrollbar {
    width: 3px;
  }
}
@media (min-width: 64rem) and (max-width: 80rem) {
  .interaction-panel .options-section > label input {
    align-self: start;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    flex-wrap: nowrap;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > span:first-child {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > select {
    align-self: stretch;
    flex: 0 0 auto;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    max-width: none;
    margin-inline-start: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > .range-container {
    flex: 1 1 auto;
    margin-inline-start: 0;
    width: 100%;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > .range-container > input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) > input[type='checkbox'] {
    flex: 0 0 auto;
    margin: 0;
    align-self: start !important;
  }
  .interaction-panel .options-section > label:has(input[type='range']) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > .range-container {
    flex: 1 1 100%;
    margin-inline-start: 0;
    width: 100%;
    align-self: center;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > .range-container > input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
}
@media (min-width: 64rem) and (max-width: 40rem) {
  .interaction-panel .options-section > label {
    flex-wrap: wrap;
  }
  .interaction-panel .options-section > label input {
    align-self: start;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    flex-wrap: nowrap;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > span:first-child {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > select {
    align-self: stretch;
    flex: 0 0 auto;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    max-width: none;
    margin-inline-start: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > .range-container {
    flex: 1 1 auto;
    margin-inline-start: 0;
    width: 100%;
  }
  .interaction-panel .options-section > label:not(:has(input[type='checkbox'])):not(:has(input[type='range'])) > .range-container > input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section > label:has(input[type='checkbox']) > input[type='checkbox'] {
    flex: 0 0 auto;
    margin: 0;
    align-self: start !important;
  }
  .interaction-panel .options-section > label:has(input[type='range']) {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > .range-container {
    flex: 1 1 100%;
    margin-inline-start: 0;
    width: 100%;
  }
  .interaction-panel .options-section > label:has(input[type='range']) > .range-container > input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
}
@media (min-width: 64rem) and (min-width: 64rem) {
  .header .y-logo {
    mask: url('./ylogo-large-vAY1JZhJ.svg') no-repeat center;
    width: 12rem;
  }
}
@media (min-width: 64rem) and (pointer: coarse) {
  .rail::-webkit-scrollbar {
    width: 3px;
  }
}
.disabled-link {
  pointer-events: none !important;
  cursor: default !important;
  color: #777 !important;
}
@font-face {
  font-family: 'yIcons-family';
  src: url('./yIcons-family-gbgLCWSf.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@keyframes splash-in {
  0% {
    opacity: 0;
  }
  28% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes splash-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.graph-splash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9;
  opacity: 0;
}
.graph-splash.visible-splash {
  display: flex;
  animation: splash-in 0.35s ease-in-out forwards;
  pointer-events: none;
}
.graph-splash.exit-splash {
  animation: splash-out 0s ease-in-out forwards;
}
.graph-splash::before {
  content: '';
  position: absolute;
  opacity: 0.6;
  border-radius: var(--border-radius);
  background-color: var(--loading-indicator-background);
  width: 100%;
  height: 100%;
}
.graph-splash::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
  height: 20%;
  background-color: var(--splash-text-color);
  mask-image: url('./loading-indicator-IC6Cnr5Y.svg');
  mask-mode: luminance;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}
.graph-splash .loading-message {
  color: var(--splash-text-color);
  font-size: 1.2rem;
  position: relative;
  transform: translateY(150px);
  width: auto;
}
.yIcon {
  /* Use !important to prevent extensions from overriding this font. */
  font-family: 'yIcons-family' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  display: inline-block;
  text-transform: none;
  line-height: 1;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: 'liga';
  -moz-font-feature-settings: 'liga=1';
  -moz-font-feature-settings: 'liga';
  -ms-font-feature-settings: 'liga' 1;
  font-feature-settings: 'liga';
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/****************************************************************************
 ** @license
 ** This demo file is part of yFiles for HTML 3.1.0.4.
 ** Copyright (c) 2026 by yWorks GmbH, Vor dem Kreuzberg 28,
 ** 72070 Tuebingen, Germany. All rights reserved.
 **
 ** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
 ** of demo files in source code or binary form, with or without
 ** modification, is not permitted.
 **
 ** Owners of a valid software license for a yFiles for HTML version that this
 ** demo is shipped with are allowed to use the demo source code as basis
 ** for their own yFiles for HTML powered applications. Use of such programs is
 ** governed by the rights and conditions as set out in the yFiles for HTML
 ** license agreement.
 **
 ** THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
 ** WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 ** MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
 ** NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
 ** TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 ** PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
 ** LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 ** NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 ** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 **
 ***************************************************************************/
/* poppins-devanagari-600-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./poppins-devanagari-600-normal-STEjXBNN.woff2) format('woff2'), url(./poppins-devanagari-600-normal-ClASKHrr.woff) format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}

/* poppins-latin-ext-600-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./poppins-latin-ext-600-normal-CAhIAdZj.woff2) format('woff2'), url(./poppins-latin-ext-600-normal-Df5ffKXP.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* poppins-latin-600-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./poppins-latin-600-normal-zEkxB9Mr.woff2) format('woff2'), url(./poppins-latin-600-normal-BJdTmd5m.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* poppins-devanagari-400-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./poppins-devanagari-400-normal-CJDn6rn8.woff2) format('woff2'), url(./poppins-devanagari-400-normal-CqVvlrh5.woff) format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}

/* poppins-latin-ext-400-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./poppins-latin-ext-400-normal-by3JarPu.woff2) format('woff2'), url(./poppins-latin-ext-400-normal-DaBSavcJ.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* poppins-latin-400-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./poppins-latin-400-normal-cpxAROuN.woff2) format('woff2'), url(./poppins-latin-400-normal-BOb3E3N0.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
.demo-properties__settings > h1,
h2,
h3,
h4,
h5,
h6 {
  grid-column: 1/-1;
}
.panel-bar button {
  animation: panel-bar-button-animation 1.5s ease-out;
}
.panel-bar button:hover {
  background-color: var(--toolbar-bg-hover);
  cursor: pointer;
}
@keyframes panel-bar-button-animation {
  50% {
    background-color: var(--panel-bar-button-blink);
  }
}
.interaction-panel select,
.demo-popup select {
  padding-inline: 10px;
  border: none;
  border-radius: var(--border-radius);
  color: var(--toolbar-button-text);
  background-color: var(--toolbar-button);
  background-size: 1.5rem;
  cursor: pointer;
  width: stretch;
}
@supports (appearance: base-select) {
  .interaction-panel select,
  .demo-popup select {
    padding: 6px 10px;
    appearance: base-select;
    border: none;
    border-radius: var(--border-radius);
    align-items: center;
  }
  .interaction-panel select::picker(select),
  .demo-popup select::picker(select) {
    appearance: base-select;
    border: 1px solid var(--toolbar-select-border);
    border-radius: var(--border-radius);
  }
  .interaction-panel select::picker-icon,
  .demo-popup select::picker-icon {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined', sans-serif;
    font-size: 1.5rem;
  }
  .interaction-panel select:open::picker-icon,
  .demo-popup select:open::picker-icon {
    rotate: 180deg;
  }
}
@supports not (appearance: base-select) {
  .interaction-panel select,
  .demo-popup select {
    appearance: none;
    -webkit-appearance: none;
    padding: 6px 36px 6px 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    background-image: var(--toolbar-select-arrow);
    background-repeat: no-repeat;
    background-position: right 10px center;
    align-items: center;
  }
}
.interaction-panel select:hover,
.demo-popup select:hover {
  color: var(--color-text);
  background-color: var(--interaction-button-hover);
}
.interaction-panel select:focus-visible,
.demo-popup select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--interaction-button-hover);
}
.interaction-panel select optgroup,
.demo-popup select optgroup {
  padding: 5px;
  font-size: 0.75rem;
  font-weight: 100;
  font-style: normal;
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--toolbar-bg);
}
.interaction-panel select option,
.demo-popup select option {
  font-size: 0.9rem;
  text-transform: none;
  padding: 10px;
  cursor: pointer;
  font-family: var(--font-family), sans-serif;
  color: var(--color-text);
  background-color: var(--toolbar-bg);
  line-height: 1.4;
}
.interaction-panel select option:checked,
.demo-popup select option:checked {
  font-weight: bold;
}
.interaction-panel select option:hover,
.demo-popup select option:hover {
  background-color: var(--interaction-button-hover);
}
.interaction-panel .navigate-select-labeled,
.demo-popup .navigate-select-labeled {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.interaction-panel .navigate-select,
.demo-popup .navigate-select {
  position: relative;
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  gap: 2px;
  margin-bottom: 8px;
  align-items: stretch;
  width: 100%;
}
.interaction-panel .navigate-select:hover,
.demo-popup .navigate-select:hover {
  background-color: transparent;
}
.interaction-panel .navigate-select:has(button) select,
.demo-popup .navigate-select:has(button) select {
  border-radius: 0;
}
.interaction-panel .navigate-select button,
.demo-popup .navigate-select button {
  font-size: 1.5rem;
  display: flex;
  width: 28px;
  border-radius: 0 20px 20px 0;
  background-color: var(--toolbar-button);
}
.interaction-panel .navigate-select button:hover,
.demo-popup .navigate-select button:hover {
  background-color: var(--toolbar-bg-hover);
}
.interaction-panel .navigate-select button:first-of-type,
.demo-popup .navigate-select button:first-of-type {
  border-radius: 20px 0 0 20px;
}
.interaction-panel .navigate-select select,
.demo-popup .navigate-select select {
  border: none;
  border-radius: 999px;
  color: var(--color-text);
  margin: 0;
  outline: none;
  width: 100%;
  min-width: 0;
  height: auto;
  white-space: nowrap;
  overflow: hidden;
}
.interaction-panel .navigate-select select:hover,
.demo-popup .navigate-select select:hover {
  background-color: var(--toolbar-bg-hover);
}
.interaction-panel .navigation-button,
.demo-popup .navigation-button {
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: var(--border-radius);
  background-color: transparent;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.interaction-panel .navigation-button:hover,
.demo-popup .navigation-button:hover {
  background-color: var(--toolbar-bg-hover);
  color: var(--color-text);
  cursor: pointer;
}
.interaction-panel .navigation-button.labeled,
.demo-popup .navigation-button.labeled {
  width: fit-content;
  height: fit-content;
  background-color: var(--toolbar-button);
  color: var(--toolbar-button-text);
  padding: 6px 10px;
}
.interaction-panel .navigation-button.labeled:has(.material-symbols-outlined),
.demo-popup .navigation-button.labeled:has(.material-symbols-outlined) {
  padding: 6px 10px 6px 2px;
}
.interaction-panel .navigation-button.labeled:has(.yIcon),
.demo-popup .navigation-button.labeled:has(.yIcon) {
  gap: 10px;
  padding: 6px 10px;
}
.interaction-panel .navigation-button.labeled:hover,
.demo-popup .navigation-button.labeled:hover {
  color: var(--color-text);
  background-color: var(--toolbar-bg-hover);
}
.interaction-panel .navigation-button:hover,
.demo-popup .navigation-button:hover {
  background-color: var(--interaction-button-hover);
  color: var(--color-text);
}
.description-panel .highlight-description {
  animation-name: highlight-animation;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  border-radius: var(--border-radius);
}
@keyframes highlight-animation {
  0% {
    background-color: var(--description-bg);
  }
  20% {
    background-color: #ff9800;
  }
  100% {
    background-color: var(--description-bg-highlight);
  }
}
.description-panel img {
  display: inline;
}
.toolbar {
  font-family: var(--font-family), sans-serif;
  font-size: 0.9rem;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  /* keep items on a single line */
  white-space: nowrap;
  /* prevent the text button from wrapping */
  background: var(--toolbar-bg);
  backdrop-filter: blur(var(--overlay-blur));
  height: 44px;
  padding: 4px 8px;
  gap: 4px;
  box-shadow: var(--shadow-crispy-gray);
  border-radius: 999px;
  user-select: none;
}
.toolbar button {
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: var(--border-radius);
  background-color: transparent;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.toolbar button:hover {
  background-color: var(--toolbar-bg-hover);
  color: var(--color-text);
  cursor: pointer;
}
.toolbar button.labeled {
  width: fit-content;
  height: fit-content;
  background-color: var(--toolbar-button);
  color: var(--toolbar-button-text);
  padding: 6px 10px;
}
.toolbar button.labeled:has(.material-symbols-outlined) {
  padding: 6px 10px 6px 2px;
}
.toolbar button.labeled:has(.yIcon) {
  gap: 10px;
  padding: 6px 10px;
}
.toolbar button.labeled:hover {
  color: var(--color-text);
  background-color: var(--toolbar-bg-hover);
}
.toolbar select {
  padding-inline: 10px;
  border: none;
  border-radius: var(--border-radius);
  color: var(--toolbar-button-text);
  background-color: var(--toolbar-button);
  background-size: 1.5rem;
  cursor: pointer;
}
@supports (appearance: base-select) {
  .toolbar select {
    padding: 6px 10px;
    appearance: base-select;
    border: none;
    border-radius: var(--border-radius);
    align-items: center;
  }
  .toolbar select::picker(select) {
    appearance: base-select;
    border: 1px solid var(--toolbar-select-border);
    border-radius: var(--border-radius);
  }
  .toolbar select::picker-icon {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined', sans-serif;
    font-size: 1.5rem;
  }
  .toolbar select:open::picker-icon {
    rotate: 180deg;
  }
}
@supports not (appearance: base-select) {
  .toolbar select {
    appearance: none;
    -webkit-appearance: none;
    padding: 6px 36px 6px 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    background-image: var(--toolbar-select-arrow);
    background-repeat: no-repeat;
    background-position: right 10px center;
    align-items: center;
  }
}
.toolbar select:hover {
  color: var(--color-text);
  background-color: var(--interaction-button-hover);
}
.toolbar select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--interaction-button-hover);
}
.toolbar select optgroup {
  padding: 5px;
  font-size: 0.75rem;
  font-weight: 100;
  font-style: normal;
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--toolbar-bg);
}
.toolbar select option {
  font-size: 0.9rem;
  text-transform: none;
  padding: 10px;
  cursor: pointer;
  font-family: var(--font-family), sans-serif;
  color: var(--color-text);
  background-color: var(--toolbar-bg);
  line-height: 1.4;
}
.toolbar select option:checked {
  font-weight: bold;
}
.toolbar select option:hover {
  background-color: var(--interaction-button-hover);
}
.toolbar label:has(> select),
.toolbar label:has(> input),
.toolbar label:has(> button),
.toolbar label:has(.yplay__menu--slider-container),
.toolbar div:has(> label):has(> input),
.toolbar div:has(> label):has(> select),
.toolbar div:has(> label):has(> button) {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  border-radius: var(--border-radius);
  cursor: pointer;
}
.toolbar label:has(> select) > label,
.toolbar label:has(> input) > label,
.toolbar label:has(> button) > label,
.toolbar label:has(.yplay__menu--slider-container) > label,
.toolbar div:has(> label):has(> input) > label,
.toolbar div:has(> label):has(> select) > label,
.toolbar div:has(> label):has(> button) > label,
.toolbar label:has(> select) > input,
.toolbar label:has(> input) > input,
.toolbar label:has(> button) > input,
.toolbar label:has(.yplay__menu--slider-container) > input,
.toolbar div:has(> label):has(> input) > input,
.toolbar div:has(> label):has(> select) > input,
.toolbar div:has(> label):has(> button) > input,
.toolbar label:has(> select) > select,
.toolbar label:has(> input) > select,
.toolbar label:has(> button) > select,
.toolbar label:has(.yplay__menu--slider-container) > select,
.toolbar div:has(> label):has(> input) > select,
.toolbar div:has(> label):has(> select) > select,
.toolbar div:has(> label):has(> button) > select,
.toolbar label:has(> select) > button,
.toolbar label:has(> input) > button,
.toolbar label:has(> button) > button,
.toolbar label:has(.yplay__menu--slider-container) > button,
.toolbar div:has(> label):has(> input) > button,
.toolbar div:has(> label):has(> select) > button,
.toolbar div:has(> label):has(> button) > button {
  cursor: pointer;
}
.toolbar label:has(> select),
.toolbar label:has(> input),
.toolbar label:has(> button) {
  gap: 8px;
  padding: 0 4px;
}
.toolbar div:has(> label):has(> input) > label,
.toolbar div:has(> label):has(> select) > label,
.toolbar div:has(> label):has(> button) > label,
.toolbar div:has(> label):has(> input) > input,
.toolbar div:has(> label):has(> select) > input,
.toolbar div:has(> label):has(> button) > input,
.toolbar div:has(> label):has(> input) > select,
.toolbar div:has(> label):has(> select) > select,
.toolbar div:has(> label):has(> button) > select,
.toolbar div:has(> label):has(> input) > button,
.toolbar div:has(> label):has(> select) > button,
.toolbar div:has(> label):has(> button) > button {
  padding: 0 4px;
}
.toolbar div:has(> label):has(> input):hover,
.toolbar div:has(> label):has(> select):hover,
.toolbar div:has(> label):has(> button):hover {
  background-color: var(--toolbar-bg-hover);
  color: var(--color-text);
}
.toolbar label:has(> select) {
  padding: 6px 2.25rem 6px 14px;
  background-color: var(--toolbar-button);
  color: var(--toolbar-button-text);
  position: relative;
}
.toolbar label:has(> select) > select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.toolbar label:has(> select)::after {
  content: 'keyboard_arrow_down';
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 1.5rem;
  position: absolute;
  right: 10px;
  pointer-events: none;
}
.toolbar label:has(> select):hover {
  color: var(--color-text);
  background-color: var(--toolbar-bg-hover);
}
.toolbar input[type='range'] {
  width: 100px;
  min-width: 7rem;
  max-width: 10rem;
  -webkit-appearance: none;
  background-color: transparent;
}
.toolbar input[type='range'] ::before {
  content: '';
  display: inline-flex;
}
.toolbar input[type='range']::-webkit-slider-runnable-track {
  background: var(--interaction-alt);
  height: 6px;
  border-radius: 1000px;
}
.toolbar input[type='range']::-moz-range-track {
  background: var(--interaction-alt);
  height: 6px;
  border-radius: 1000px;
}
.toolbar input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--interaction-alt);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
}
.toolbar input[type='range']::-moz-range-thumb {
  -webkit-appearance: none;
  background: var(--interaction-alt);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
}
.toolbar input[type='range']:hover {
  cursor: pointer;
}
.toolbar label:has(> input[type='checkbox']),
.toolbar div:has(> label):has(> input[type='checkbox']) {
  background-color: var(--toolbar-bg);
  color: var(--color-text);
  font-family: var(--font-family), sans-serif;
  user-select: none;
}
.toolbar label:has(> input[type='checkbox']):hover,
.toolbar div:has(> label):has(> input[type='checkbox']):hover {
  background-color: var(--toolbar-bg-hover);
}
.toolbar label:has(> input[type='checkbox']) > input[type='checkbox']:not(.demo-toggle-button),
.toolbar div:has(> label):has(> input[type='checkbox']) > input[type='checkbox']:not(.demo-toggle-button),
.toolbar label:has(> input[type='checkbox']) + input[type='checkbox']:not(.demo-toggle-button),
.toolbar div:has(> label):has(> input[type='checkbox']) + input[type='checkbox']:not(.demo-toggle-button),
.toolbar label:has(> input[type='checkbox']) label > input[type='checkbox']:not(.demo-toggle-button),
.toolbar div:has(> label):has(> input[type='checkbox']) label > input[type='checkbox']:not(.demo-toggle-button) {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  position: relative;
  border-radius: 6px;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
  padding: 6px 2px;
}
.toolbar label:has(> input[type='checkbox']) > input[type='checkbox']:not(.demo-toggle-button)::after,
.toolbar div:has(> label):has(> input[type='checkbox']) > input[type='checkbox']:not(.demo-toggle-button)::after,
.toolbar label:has(> input[type='checkbox']) + input[type='checkbox']:not(.demo-toggle-button)::after,
.toolbar div:has(> label):has(> input[type='checkbox']) + input[type='checkbox']:not(.demo-toggle-button)::after,
.toolbar label:has(> input[type='checkbox']) label > input[type='checkbox']:not(.demo-toggle-button)::after,
.toolbar div:has(> label):has(> input[type='checkbox']) label > input[type='checkbox']:not(.demo-toggle-button)::after {
  font-family: 'Material Symbols Outlined', sans-serif;
  display: inline-grid;
  place-content: center;
  border: none;
  color: var(--color-text);
}
.toolbar label:has(> input[type='checkbox']) > input[type='checkbox']:not(.demo-toggle-button)::after,
.toolbar div:has(> label):has(> input[type='checkbox']) > input[type='checkbox']:not(.demo-toggle-button)::after,
.toolbar label:has(> input[type='checkbox']) + input[type='checkbox']:not(.demo-toggle-button)::after,
.toolbar div:has(> label):has(> input[type='checkbox']) + input[type='checkbox']:not(.demo-toggle-button)::after,
.toolbar label:has(> input[type='checkbox']) label > input[type='checkbox']:not(.demo-toggle-button)::after,
.toolbar div:has(> label):has(> input[type='checkbox']) label > input[type='checkbox']:not(.demo-toggle-button)::after {
  content: 'check_box_outline_blank';
  font-size: 1.5rem;
  font-weight: 300;
}
.toolbar label:has(> input[type='checkbox']) > input[type='checkbox']:not(.demo-toggle-button):checked::after,
.toolbar div:has(> label):has(> input[type='checkbox']) > input[type='checkbox']:not(.demo-toggle-button):checked::after,
.toolbar label:has(> input[type='checkbox']) + input[type='checkbox']:not(.demo-toggle-button):checked::after,
.toolbar div:has(> label):has(> input[type='checkbox']) + input[type='checkbox']:not(.demo-toggle-button):checked::after,
.toolbar label:has(> input[type='checkbox']) label > input[type='checkbox']:not(.demo-toggle-button):checked::after,
.toolbar div:has(> label):has(> input[type='checkbox']) label > input[type='checkbox']:not(.demo-toggle-button):checked::after {
  content: 'check_box';
}
.toolbar label:has(> input[type='checkbox']) > input[type='checkbox'].demo-toggle-button,
.toolbar div:has(> label):has(> input[type='checkbox']) > input[type='checkbox'].demo-toggle-button,
.toolbar label:has(> input[type='checkbox']) + input[type='checkbox'].demo-toggle-button,
.toolbar div:has(> label):has(> input[type='checkbox']) + input[type='checkbox'].demo-toggle-button,
.toolbar label:has(> input[type='checkbox']) label > input[type='checkbox'].demo-toggle-button,
.toolbar div:has(> label):has(> input[type='checkbox']) label > input[type='checkbox'].demo-toggle-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  position: relative;
  border-radius: 6px;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
  width: 2.25rem;
  height: 2.25rem;
}
.toolbar label:has(> input[type='checkbox']) > input[type='checkbox'].demo-toggle-button::after,
.toolbar div:has(> label):has(> input[type='checkbox']) > input[type='checkbox'].demo-toggle-button::after,
.toolbar label:has(> input[type='checkbox']) + input[type='checkbox'].demo-toggle-button::after,
.toolbar div:has(> label):has(> input[type='checkbox']) + input[type='checkbox'].demo-toggle-button::after,
.toolbar label:has(> input[type='checkbox']) label > input[type='checkbox'].demo-toggle-button::after,
.toolbar div:has(> label):has(> input[type='checkbox']) label > input[type='checkbox'].demo-toggle-button::after {
  font-family: 'Material Symbols Outlined', sans-serif;
  display: inline-grid;
  place-content: center;
  border: none;
  color: var(--color-text);
}
.toolbar label:has(> input[type='checkbox']) > input[type='checkbox'].demo-toggle-button::after,
.toolbar div:has(> label):has(> input[type='checkbox']) > input[type='checkbox'].demo-toggle-button::after,
.toolbar label:has(> input[type='checkbox']) + input[type='checkbox'].demo-toggle-button::after,
.toolbar div:has(> label):has(> input[type='checkbox']) + input[type='checkbox'].demo-toggle-button::after,
.toolbar label:has(> input[type='checkbox']) label > input[type='checkbox'].demo-toggle-button::after,
.toolbar div:has(> label):has(> input[type='checkbox']) label > input[type='checkbox'].demo-toggle-button::after {
  content: 'toggle_off';
  font-size: 2.75rem;
  font-weight: 100;
}
.toolbar label:has(> input[type='checkbox']) > input[type='checkbox'].demo-toggle-button:checked::after,
.toolbar div:has(> label):has(> input[type='checkbox']) > input[type='checkbox'].demo-toggle-button:checked::after,
.toolbar label:has(> input[type='checkbox']) + input[type='checkbox'].demo-toggle-button:checked::after,
.toolbar div:has(> label):has(> input[type='checkbox']) + input[type='checkbox'].demo-toggle-button:checked::after,
.toolbar label:has(> input[type='checkbox']) label > input[type='checkbox'].demo-toggle-button:checked::after,
.toolbar div:has(> label):has(> input[type='checkbox']) label > input[type='checkbox'].demo-toggle-button:checked::after {
  content: 'toggle_on';
  font-variation-settings: 'FILL' 1;
}
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon),
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon),
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined),
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) {
  background-color: transparent;
  padding: 0;
}
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon):hover,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon):hover,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined):hover,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined):hover {
  background-color: transparent;
}
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > input[type='checkbox'],
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > input[type='checkbox'],
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > input[type='checkbox'],
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > input[type='checkbox'] {
  display: none;
}
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > input[type='checkbox']:checked + label.yIcon,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > input[type='checkbox']:checked + label.yIcon,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > input[type='checkbox']:checked + label.yIcon,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > input[type='checkbox']:checked + label.yIcon,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > input[type='checkbox']:checked + label.material-symbols-outlined,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > input[type='checkbox']:checked + label.material-symbols-outlined,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > input[type='checkbox']:checked + label.material-symbols-outlined,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > input[type='checkbox']:checked + label.material-symbols-outlined {
  background-color: var(--toolbar-button);
  font-variation-settings: 'FILL' 1;
}
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > input[type='checkbox']:checked + label.yIcon:hover,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > input[type='checkbox']:checked + label.yIcon:hover,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > input[type='checkbox']:checked + label.yIcon:hover,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > input[type='checkbox']:checked + label.yIcon:hover,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > input[type='checkbox']:checked + label.material-symbols-outlined:hover,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > input[type='checkbox']:checked + label.material-symbols-outlined:hover,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > input[type='checkbox']:checked + label.material-symbols-outlined:hover,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > input[type='checkbox']:checked + label.material-symbols-outlined:hover {
  background-color: var(--toolbar-bg-hover);
}
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.yIcon,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.yIcon,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.yIcon,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.yIcon,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.material-symbols-outlined,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.material-symbols-outlined,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.material-symbols-outlined,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.material-symbols-outlined {
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: var(--border-radius);
  background-color: transparent;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.yIcon:hover,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.yIcon:hover,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.yIcon:hover,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.yIcon:hover,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.material-symbols-outlined:hover,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.material-symbols-outlined:hover,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.material-symbols-outlined:hover,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.material-symbols-outlined:hover {
  background-color: var(--toolbar-bg-hover);
  color: var(--color-text);
  cursor: pointer;
}
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.yIcon.labeled,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.yIcon.labeled,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.yIcon.labeled,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.yIcon.labeled,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.material-symbols-outlined.labeled,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.material-symbols-outlined.labeled,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.material-symbols-outlined.labeled,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.material-symbols-outlined.labeled {
  width: fit-content;
  height: fit-content;
  background-color: var(--toolbar-button);
  color: var(--toolbar-button-text);
  padding: 6px 10px;
}
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.yIcon.labeled:has(.material-symbols-outlined),
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.yIcon.labeled:has(.material-symbols-outlined),
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.yIcon.labeled:has(.material-symbols-outlined),
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.yIcon.labeled:has(.material-symbols-outlined),
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.material-symbols-outlined.labeled:has(.material-symbols-outlined),
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.material-symbols-outlined.labeled:has(.material-symbols-outlined),
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.material-symbols-outlined.labeled:has(.material-symbols-outlined),
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.material-symbols-outlined.labeled:has(.material-symbols-outlined) {
  padding: 6px 10px 6px 2px;
}
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.yIcon.labeled:has(.yIcon),
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.yIcon.labeled:has(.yIcon),
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.yIcon.labeled:has(.yIcon),
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.yIcon.labeled:has(.yIcon),
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.material-symbols-outlined.labeled:has(.yIcon),
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.material-symbols-outlined.labeled:has(.yIcon),
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.material-symbols-outlined.labeled:has(.yIcon),
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.material-symbols-outlined.labeled:has(.yIcon) {
  gap: 10px;
  padding: 6px 10px;
}
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.yIcon.labeled:hover,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.yIcon.labeled:hover,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.yIcon.labeled:hover,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.yIcon.labeled:hover,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.material-symbols-outlined.labeled:hover,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.yIcon) > label.material-symbols-outlined.labeled:hover,
.toolbar label:has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.material-symbols-outlined.labeled:hover,
.toolbar div:has(> label):has(> input[type='checkbox']):has(> input[type='checkbox']):has(> label.material-symbols-outlined) > label.material-symbols-outlined.labeled:hover {
  color: var(--color-text);
  background-color: var(--toolbar-bg-hover);
}
.toolbar input[type='number'] {
  border: 1px solid var(--color-text);
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: transparent;
  width: 40px;
}
.toolbar input[type='number']:focus {
  outline: none;
  box-shadow: none;
}
.toolbar .number-label {
  display: inline-block;
  min-width: 1ch;
  text-align: right;
  margin-right: 1px;
}
.toolbar label:has(> input[type='checkbox']) {
  background-color: var(--toolbar-bg);
  color: var(--color-text);
  font-family: var(--font-family), sans-serif;
  user-select: none;
}
.toolbar label:has(> input[type='checkbox']):hover {
  background-color: var(--toolbar-bg-hover);
}
.toolbar label:has(> input[type='checkbox']) > input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  position: relative;
  border-radius: 6px;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.toolbar label:has(> input[type='checkbox']) > input[type='checkbox']::after {
  font-family: 'Material Symbols Outlined', sans-serif;
  display: inline-grid;
  place-content: center;
  border: none;
  color: var(--color-text);
}
.toolbar label:has(> input[type='checkbox']) > input[type='checkbox']::after {
  content: 'check_box_outline_blank';
  font-size: 1.5rem;
  font-weight: 300;
}
.toolbar label:has(> input[type='checkbox']) > input[type='checkbox']:checked::after {
  content: 'check_box';
}
.toolbar input[type='number'] {
  border: 1px solid var(--color-text);
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: transparent;
  width: 40px;
}
.toolbar input[type='number']:focus {
  outline: none;
  box-shadow: none;
}
.toolbar #searchBox {
  border: 1px solid var(--color-text-transparent);
  border-top: none;
  border-left: none;
  border-right: none;
  margin: 0 5px;
  background-color: transparent;
}
.toolbar #searchBox:focus {
  outline: none;
  box-shadow: none;
}
.toolbar .navigate-select-labeled {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.toolbar .navigate-select {
  position: relative;
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  gap: 2px;
  margin-bottom: 8px;
  align-items: stretch;
  margin-bottom: 0;
}
.toolbar .navigate-select:hover {
  background-color: transparent;
}
.toolbar .navigate-select:has(button) select {
  border-radius: 0;
}
.toolbar .navigate-select button {
  font-size: 1.5rem;
  display: flex;
  width: 28px;
  border-radius: 0 20px 20px 0;
  background-color: var(--toolbar-button);
}
.toolbar .navigate-select button:hover {
  background-color: var(--toolbar-bg-hover);
}
.toolbar .navigate-select button:first-of-type {
  border-radius: 20px 0 0 20px;
}
.toolbar .navigate-select select {
  border: none;
  border-radius: 999px;
  color: var(--color-text);
  margin: 0;
  outline: none;
  width: 100%;
  min-width: 0;
  height: auto;
  white-space: nowrap;
  overflow: hidden;
}
.toolbar .navigate-select select:hover {
  background-color: var(--toolbar-bg-hover);
}
.toolbar .separator {
  width: 1px;
  margin: 0 1px 0 2px;
  color: var(--color-text);
  height: 1.5rem;
  background: currentColor;
  display: inline-block;
  vertical-align: middle;
}
.toolbar .toolbar-overflow-button {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 1.5rem;
  font-weight: 270;
  order: 999;
  position: relative;
  margin-left: 12px;
}
.toolbar .toolbar-overflow-button::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5px;
  height: 24px;
  background-color: currentColor;
  display: inline-block;
  pointer-events: none;
}
.toolbar:has( > :nth-child(2)):not(:has( > :nth-child(3))) .toolbar-overflow-button {
  margin-left: 0;
}
.toolbar:has( > :nth-child(2)):not(:has( > :nth-child(3))) .toolbar-overflow-button::before {
  display: none;
}
.toolbar .toolbar-overflow-container {
  max-width: max(calc(100vw - 70px), 100%);
  left: 0;
  top: calc(100% + 8px);
  position: absolute;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  border: none;
  border-radius: var(--border-radius);
  background-color: var(--toolbar-bg);
  box-shadow: var(--shadow-crispy-gray);
  z-index: 3;
  padding: 14px;
  box-sizing: border-box;
  overflow: auto;
  white-space: normal;
}
@supports not selector(::-webkit-scrollbar) {
  .toolbar .toolbar-overflow-container {
    scrollbar-width: thin;
  }
}
.toolbar .toolbar-overflow-container::-webkit-scrollbar {
  width: 6px;
}
@media (pointer: coarse) {
  .toolbar .toolbar-overflow-container::-webkit-scrollbar {
    width: 3px;
  }
}
.toolbar .toolbar-overflow-container::-webkit-scrollbar-track {
  background-color: transparent;
}
.toolbar .toolbar-overflow-container::-webkit-scrollbar-thumb {
  background-color: rgb(from var(--scrollbar-bg) r g b / 0.6);
  border-radius: 6px;
}
.toolbar .toolbar-overflow-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-bg);
}
@media (min-width: 40rem) {
  .toolbar .toolbar-overflow-container {
    max-width: 100%;
    left: unset;
    right: 0;
  }
}
.toolbar .toolbar-overflow-container[data-open] {
  display: inline-flex;
}
.toolbar .toolbar-overflow-container .separator {
  display: none;
}
.toolbar .toolbar-overflow-container > button:not(.toolbar-overflow-button):not(.labeled) {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text);
  font-family: var(--font-family), sans-serif;
  font-size: 0;
}
.toolbar .toolbar-overflow-container > button:not(.toolbar-overflow-button):not(.labeled):hover {
  background-color: var(--toolbar-bg-hover);
}
.toolbar .toolbar-overflow-container > button:not(.toolbar-overflow-button):not(.labeled):not(.yIcon)::before {
  font-family: 'Material Symbols Outlined', sans-serif;
}
.toolbar .toolbar-overflow-container > button:not(.toolbar-overflow-button):not(.labeled)::before {
  content: attr(data-icon);
  font-size: 1.5rem;
  line-height: 1;
}
.toolbar .toolbar-overflow-container > button:not(.toolbar-overflow-button):not(.labeled)::after {
  content: attr(title);
  font-family: var(--font-family), sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: nowrap;
}
.toolbar .toolbar-overflow-container label:has(> input[type='checkbox']) {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.toolbar .toolbar-overflow-container div:has(> label):has(> input[type='checkbox']):hover {
  background-color: var(--toolbar-bg-hover);
}
.toolbar .toolbar-overflow-container div:has(> label):has(> input[type='checkbox']) > label.yIcon,
.toolbar .toolbar-overflow-container div:has(> label):has(> input[type='checkbox']) > label.material-symbols-outlined {
  width: fit-content !important;
  padding: 0 10px;
}
.toolbar .toolbar-overflow-container div:has(> label):has(> input[type='checkbox']) > label.yIcon::after,
.toolbar .toolbar-overflow-container div:has(> label):has(> input[type='checkbox']) > label.material-symbols-outlined::after {
  content: attr(title);
  font-family: var(--font-family), sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: nowrap;
}
.toolbar .toolbar-radio-group {
  display: inline-flex;
  align-items: center;
  background-color: var(--toolbar-group);
  border-radius: 999px;
  user-select: none;
}
.toolbar .toolbar-radio-group.icon label:has(> input[type='radio']) {
  padding: 0 5px;
}
.toolbar .toolbar-radio-group.icon label:has(> input[type='radio']) > input[type='radio'] {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-content: center;
  position: relative;
  border-radius: var(--border-radius);
  background-color: var(--toolbar-tab-color);
  color: var(--toolbar-button-text);
}
.toolbar .toolbar-radio-group.icon label:has(> input[type='radio']) > input[type='radio']::after {
  content: attr(data-icon);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 1.25rem;
  display: inline-grid;
  place-content: center;
  border: none;
  color: var(--toolbar-button-text);
}
.toolbar .toolbar-radio-group.labeled label:has(> input[type='radio']) {
  padding: 5px 15px;
  font-family: var(--font-family), sans-serif;
  font-size: 0.9rem;
  color: var(--toolbar-button-text);
  cursor: pointer;
}
.toolbar .toolbar-radio-group.labeled label:has(> input[type='radio']) > input[type='radio'] {
  display: none;
}
.toolbar .toolbar-radio-group label:has(> input[type='radio']) {
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}
.toolbar .toolbar-radio-group label:has(> input[type='radio']):hover {
  background-color: var(--toolbar-bg-hover);
}
.toolbar .toolbar-radio-group label:has(> input[type='radio']) > input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
}
.toolbar .toolbar-radio-group label:has(input[type='radio']:checked) {
  background-color: var(--toolbar-button);
}
.toolbar > .separator:last-child {
  display: none;
}
.toolbar:has(.toolbar-overflow-container[data-open]) .toolbar-overflow-button,
.toolbar:has(.toolbar-overflow-container[data-open]) .toolbar-overflow-button:hover {
  background-color: var(--toolbar-button);
}
.text-content {
  --margin-block: 0.75rem;
  font-size: var(--body-font-size);
}
.text-content > :first-child,
.text-content h2:first-child,
.text-content h3:first-child {
  margin-top: 0 !important;
}
.text-content > :last-child {
  margin-bottom: 0 !important;
}
.text-content h1,
.text-content h2,
.text-content h3,
.text-content h4 {
  margin: 1.25rem 0 var(--margin-block);
  hyphens: auto;
}
.text-content h1 {
  font-size: 2rem;
  margin-top: 0;
}
.text-content h2 {
  font-size: 1.5rem;
}
.text-content h3 {
  font-size: 1.25rem;
}
.text-content .text-medium {
  font-size: 130%;
}
.text-content ul,
.text-content ol {
  padding-left: 1.25em;
}
.text-content p,
.text-content dl,
.text-content ul,
.text-content ul.paragraph-style li {
  margin-block: var(--margin-block);
}
.text-content li {
  margin: 0.5rem 0;
}
.text-content .compact li {
  margin: 0.25rem 0;
}
.text-content .tutorial-about {
  font-size: 130%;
  line-height: 140%;
}
.text-content code,
.text-content pre,
.text-content kbd,
.text-content a.api {
  background: var(--inline-code-background);
  color: var(--inline-code-color);
  padding: 2px 4px;
  border-radius: 4px;
  font-family: 'Consolas', monospace;
}
.text-content pre {
  padding: 8px;
  overflow-x: auto;
  max-width: 100%;
}
.text-content kbd {
  border: 1px solid #c1c1c1;
  box-shadow: var(--shadow-cripsy-gray);
  font-size: 80%;
  padding: 0.2em 0.5em 0.1em 0.5em;
  white-space: nowrap;
  vertical-align: middle;
}
.text-content a.unknown {
  color: firebrick;
}
.text-content a.unknown::before {
  content: '\2297';
  padding-right: 2px;
}
.text-content p a,
.text-content dl a,
.text-content ul a,
.text-content .note a,
.text-content p a:visited,
.text-content dl a:visited,
.text-content ul a:visited,
.text-content .note a:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: 0.5px solid;
}
.text-content p a:hover,
.text-content dl a:hover,
.text-content ul a:hover,
.text-content .note a:hover {
  border-bottom: 2px solid;
}
.text-content dt {
  font-weight: bold;
  color: var(--color-text);
  margin-top: 4px;
}
.text-content dd {
  margin-left: 10px;
}
.text-content fieldset {
  border: 0 none;
  background: unset;
  padding: 0 0 1.5ex;
  margin: 0;
}
.text-content fieldset legend {
  font-weight: bold;
  padding: 0 0 0.5ex;
}
@property --x {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}
@property --y {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}
@property --rx {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}
@property --ry {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}
#tour-dialog,
.dialog {
  --margin-block: 0.75rem;
  font-size: var(--body-font-size);
  border: none;
  border-radius: var(--border-radius);
  background-color: var(--toolbar-bg);
  box-shadow: var(--shadow-crispy-gray);
  z-index: 4;
  font-size: 0.9rem;
}
#tour-dialog > :first-child,
.dialog > :first-child,
#tour-dialog h2:first-child,
.dialog h2:first-child,
#tour-dialog h3:first-child,
.dialog h3:first-child {
  margin-top: 0 !important;
}
#tour-dialog > :last-child,
.dialog > :last-child {
  margin-bottom: 0 !important;
}
#tour-dialog h1,
.dialog h1,
#tour-dialog h2,
.dialog h2,
#tour-dialog h3,
.dialog h3,
#tour-dialog h4,
.dialog h4 {
  margin: 1.25rem 0 var(--margin-block);
  hyphens: auto;
}
#tour-dialog h1,
.dialog h1 {
  font-size: 2rem;
  margin-top: 0;
}
#tour-dialog h2,
.dialog h2 {
  font-size: 1.5rem;
}
#tour-dialog h3,
.dialog h3 {
  font-size: 1.25rem;
}
#tour-dialog .text-medium,
.dialog .text-medium {
  font-size: 130%;
}
#tour-dialog ul,
.dialog ul,
#tour-dialog ol,
.dialog ol {
  padding-left: 1.25em;
}
#tour-dialog p,
.dialog p,
#tour-dialog dl,
.dialog dl,
#tour-dialog ul,
.dialog ul,
#tour-dialog ul.paragraph-style li,
.dialog ul.paragraph-style li {
  margin-block: var(--margin-block);
}
#tour-dialog li,
.dialog li {
  margin: 0.5rem 0;
}
#tour-dialog .compact li,
.dialog .compact li {
  margin: 0.25rem 0;
}
#tour-dialog .tutorial-about,
.dialog .tutorial-about {
  font-size: 130%;
  line-height: 140%;
}
#tour-dialog code,
.dialog code,
#tour-dialog pre,
.dialog pre,
#tour-dialog kbd,
.dialog kbd,
#tour-dialog a.api,
.dialog a.api {
  background: var(--inline-code-background);
  color: var(--inline-code-color);
  padding: 2px 4px;
  border-radius: 4px;
  font-family: 'Consolas', monospace;
}
#tour-dialog pre,
.dialog pre {
  padding: 8px;
  overflow-x: auto;
  max-width: 100%;
}
#tour-dialog kbd,
.dialog kbd {
  border: 1px solid #c1c1c1;
  box-shadow: var(--shadow-cripsy-gray);
  font-size: 80%;
  padding: 0.2em 0.5em 0.1em 0.5em;
  white-space: nowrap;
  vertical-align: middle;
}
#tour-dialog a.unknown,
.dialog a.unknown {
  color: firebrick;
}
#tour-dialog a.unknown::before,
.dialog a.unknown::before {
  content: '\2297';
  padding-right: 2px;
}
#tour-dialog p a,
.dialog p a,
#tour-dialog dl a,
.dialog dl a,
#tour-dialog ul a,
.dialog ul a,
#tour-dialog .note a,
.dialog .note a,
#tour-dialog p a:visited,
.dialog p a:visited,
#tour-dialog dl a:visited,
.dialog dl a:visited,
#tour-dialog ul a:visited,
.dialog ul a:visited,
#tour-dialog .note a:visited,
.dialog .note a:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: 0.5px solid;
}
#tour-dialog p a:hover,
.dialog p a:hover,
#tour-dialog dl a:hover,
.dialog dl a:hover,
#tour-dialog ul a:hover,
.dialog ul a:hover,
#tour-dialog .note a:hover,
.dialog .note a:hover {
  border-bottom: 2px solid;
}
#tour-dialog dt,
.dialog dt {
  font-weight: bold;
  color: var(--color-text);
  margin-top: 4px;
}
#tour-dialog dd,
.dialog dd {
  margin-left: 10px;
}
#tour-dialog fieldset,
.dialog fieldset {
  border: 0 none;
  background: unset;
  padding: 0 0 1.5ex;
  margin: 0;
}
#tour-dialog fieldset legend,
.dialog fieldset legend {
  font-weight: bold;
  padding: 0 0 0.5ex;
}
@supports not selector(::-webkit-scrollbar) {
  #tour-dialog,
  .dialog {
    scrollbar-width: thin;
  }
}
#tour-dialog::-webkit-scrollbar,
.dialog::-webkit-scrollbar {
  width: 6px;
}
@media (pointer: coarse) {
  #tour-dialog::-webkit-scrollbar,
  .dialog::-webkit-scrollbar {
    width: 3px;
  }
}
#tour-dialog::-webkit-scrollbar-track,
.dialog::-webkit-scrollbar-track {
  background-color: transparent;
}
#tour-dialog::-webkit-scrollbar-thumb,
.dialog::-webkit-scrollbar-thumb {
  background-color: rgb(from var(--scrollbar-bg) r g b / 0.6);
  border-radius: 6px;
}
#tour-dialog::-webkit-scrollbar-thumb:hover,
.dialog::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-bg);
}
.tour-container {
  overflow: auto;
  display: flex;
  gap: 5px;
  flex-direction: column;
  max-height: inherit;
  max-width: inherit;
}
@supports not selector(::-webkit-scrollbar) {
  .tour-container {
    scrollbar-width: thin;
  }
}
.tour-container::-webkit-scrollbar {
  width: 6px;
}
@media (pointer: coarse) {
  .tour-container::-webkit-scrollbar {
    width: 3px;
  }
}
.tour-container::-webkit-scrollbar-track {
  background-color: transparent;
}
.tour-container::-webkit-scrollbar-thumb {
  background-color: rgb(from var(--scrollbar-bg) r g b / 0.6);
  border-radius: 6px;
}
.tour-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-bg);
}
.tour-title {
  display: flex;
  flex: 0 0 40px;
  height: 40px;
  align-items: center;
}
.tour-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
}
@supports not selector(::-webkit-scrollbar) {
  .tour-content {
    scrollbar-width: thin;
  }
}
.tour-content::-webkit-scrollbar {
  width: 6px;
}
@media (pointer: coarse) {
  .tour-content::-webkit-scrollbar {
    width: 3px;
  }
}
.tour-content::-webkit-scrollbar-track {
  background-color: transparent;
}
.tour-content::-webkit-scrollbar-thumb {
  background-color: rgb(from var(--scrollbar-bg) r g b / 0.6);
  border-radius: 6px;
}
.tour-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-bg);
}
.tour-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}
.tour-pagination .spacer {
  flex: 1 1 auto;
}
.tour-page-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.95em;
}
.tour-controls {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 5px;
}
.tour-page-list {
  flex: 0 1 auto;
  max-height: 150px;
  overflow: auto;
  padding: 4px 0;
}
@supports not selector(::-webkit-scrollbar) {
  .tour-page-list {
    scrollbar-width: thin;
  }
}
.tour-page-list::-webkit-scrollbar {
  width: 6px;
}
@media (pointer: coarse) {
  .tour-page-list::-webkit-scrollbar {
    width: 3px;
  }
}
.tour-page-list::-webkit-scrollbar-track {
  background-color: transparent;
}
.tour-page-list::-webkit-scrollbar-thumb {
  background-color: rgb(from var(--scrollbar-bg) r g b / 0.6);
  border-radius: 6px;
}
.tour-page-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-bg);
}
.tour-page-ul {
  list-style: none;
  margin: 0 !important;
  padding: 0;
  position: relative;
}
.tour-page-item {
  display: flex;
  align-items: center;
  padding: 2px 0;
  margin: 0 !important;
  position: relative;
  font-size: 0.9em;
}
.tour-page-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 22px;
  bottom: -5px;
  width: 2px;
  background-color: var(--tour-dash);
}
.tour-page-item-marker {
  font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: 270;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.5rem;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  font-size: 0.9rem;
}
:root[data-theme='dark'] .tour-page-item-marker {
  font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
}
.tour-page-item.active {
  font-weight: 600;
}
.tour-page-item.active .tour-page-item-marker {
  font-variation-settings: 'FILL' 1;
  color: var(--tour-highlight);
}
.tour-page-item:not(.active) .tour-page-item-marker,
.tour-page-item:not(.active) button {
  opacity: 0.4;
}
.tour-page-link {
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
  color: inherit;
  cursor: pointer;
}
.tour-page-link:hover {
  background-color: var(--toolbar-bg-hover);
  border-radius: 5px;
}
.tour-next-button {
  border-radius: 5px;
  border: none;
  color: #1c2a35;
  background-color: var(--tour-button-bg);
  font-size: 0.95rem;
}
.tour-close-button {
  position: absolute;
  right: 5px;
  top: 5px;
  border-radius: var(--border-radius);
  border: none;
  padding: 4px;
  background-color: transparent;
}
.tour-next-button:hover,
.tour-close-button:hover,
.tour-expand-button:hover {
  color: var(--color-text);
  background-color: var(--toolbar-bg-hover);
}
#tour-dialog {
  overflow: visible;
  margin: 0;
}
#tour-dialog::before {
  content: none;
}
#tour-dialog.tour-arrow::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--toolbar-bg);
  transform: rotate(45deg);
  border-radius: 2px;
}
#tour-dialog.tour-arrow-west::before {
  left: -8px;
  top: 20px;
}
#tour-dialog.tour-arrow-east::before {
  right: -8px;
  top: 20px;
}
#tour-dialog.tour-arrow-north::before {
  left: 50%;
  top: -8px;
}
#tour-dialog.tour-arrow-south::before {
  left: 50%;
  bottom: -8px;
}
#tour-overlay {
  position: fixed;
  inset: -20px;
  z-index: 2;
  pointer-events: none;
  display: none;
  filter: blur(20px);
  opacity: var(--tour-opacity);
  transition: --x 0.5s, --y 0.5s, --rx 0.5s, --ry 0.5s;
  background: radial-gradient(ellipse var(--rx) var(--ry) at calc(var(--x) + 20px) calc(var(--y) + 20px), transparent 0%, transparent 100%, var(--color-casper-blue-dark) 100%);
}
#tour-overlay-blur {
  display: none;
  position: fixed;
  inset: 0;
  backdrop-filter: blur(3px);
  z-index: 1;
  pointer-events: none;
  --mask: radial-gradient(ellipse calc(var(--rx) * 0.9) calc(var(--ry) * 0.8) at var(--x) var(--y), transparent 0%, transparent 100%, black 100%);
  opacity: 1;
  transition: --x 0.5s, --y 0.5s, --rx 0.5s, --ry 0.5s;
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
}
.material-symbols-outlined {
  font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: 270;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.5rem;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}
:root[data-theme='dark'] .material-symbols-outlined {
  font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
}
button.icon,
button .icon,
a .icon,
.icon-inline,
button[data-command] {
  font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: 270;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.5rem;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}
:root[data-theme='dark'] button.icon,
:root[data-theme='dark'] button .icon,
:root[data-theme='dark'] a .icon,
:root[data-theme='dark'] .icon-inline,
:root[data-theme='dark'] button[data-command] {
  font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
}
button.icon.yIcon,
button .icon.yIcon,
a .icon.yIcon,
.icon-inline.yIcon,
button[data-command].yIcon {
  font-size: 1.2rem;
}
.icon-inline {
  font-size: inherit;
  display: inline;
  vertical-align: text-bottom;
  line-height: unset;
}
dialog.burger-menu {
  view-transition-name: burger-menu;
  display: flex;
  flex-direction: column;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  padding: 20px;
  margin: 0;
  border: none;
  z-index: 4;
  background-color: var(--burger-menu-background);
  color: var(--color-text);
}
dialog.burger-menu section {
  display: none;
  flex-direction: column;
  height: 100%;
}
dialog.burger-menu section.active {
  display: flex;
}
dialog.burger-menu header {
  display: flex;
  justify-content: center;
  position: relative;
}
dialog.burger-menu .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  padding: 6px 0 24px 12px;
  align-items: center;
  font-size: 1.2rem;
  max-width: 70vw;
  justify-content: center;
}
dialog.burger-menu .breadcrumb-link {
  text-decoration: none;
  color: inherit;
}
dialog.burger-menu .breadcrumb-link:hover {
  text-decoration: underline;
}
dialog.burger-menu .breadcrumb-icon {
  color: var(--burger-menu-tertiary-highlight);
}
dialog.burger-menu .icon-button {
  font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: 270;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.5rem;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  position: absolute;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 2rem;
  border-radius: 999px;
}
:root[data-theme='dark'] dialog.burger-menu .icon-button {
  font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
}
dialog.burger-menu .icon-button:hover {
  background-color: var(--burger-menu-hover);
}
dialog.burger-menu .icon-button.close {
  right: 0;
}
dialog.burger-menu .icon-button.back {
  left: 0;
}
dialog.burger-menu .headline {
  font-size: 1.4rem;
  color: var(--burger-menu-tertiary-highlight);
  font-weight: 700;
  padding: 42px 0 24px 0;
}
dialog.burger-menu main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding: 20px;
}
dialog.burger-menu .items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  align-items: center;
  width: 100%;
  font-size: 1.3rem;
}
dialog.burger-menu .item {
  width: fit-content;
  border: none;
  background: none;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--color-text);
}
dialog.burger-menu .item:hover {
  background-color: var(--burger-menu-hover);
}
dialog.burger-menu .item.primary {
  color: var(--burger-menu-primary-highlight);
}
dialog.burger-menu .item.secondary {
  color: var(--burger-menu-secondary-highlight);
}
dialog.burger-menu .link {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
}
dialog.burger-menu .link:hover {
  background-color: var(--burger-menu-hover);
}
dialog.burger-menu .link.primary {
  width: fit-content;
  border: none;
  border-radius: 999px;
  background-color: var(--burger-menu-primary-highlight);
  color: white;
  margin: auto;
}
dialog.burger-menu .link.primary:hover {
  opacity: 0.8;
}
dialog.burger-menu .link.secondary {
  color: var(--burger-menu-secondary-highlight);
}
dialog.burger-menu .footer {
  margin: auto;
  padding: 12px;
}
dialog.burger-menu .footer a {
  text-decoration: none;
  color: inherit;
  font-size: 1rem;
  border-radius: 999px;
  padding: 0 5px;
}
dialog.burger-menu .footer a:hover {
  background-color: var(--burger-menu-hover);
}
dialog.burger-menu .horizontal-separator {
  border: 2px solid var(--color-text);
  border-radius: 999px;
  margin: 12px 0;
  width: 100%;
  max-width: 500px;
  opacity: 0.2;
}
dialog.burger-menu .vertical-separator {
  border: 2px solid var(--color-text);
  border-radius: 999px;
  margin: 0 5px;
  opacity: 0.2;
}
dialog.burger-menu .linked-demos-container {
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
}
dialog.burger-menu .linked-demos-container > * {
  width: fit-content;
  border: none;
  background: none;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--color-text);
  display: block;
  width: 100%;
}
dialog.burger-menu .linked-demos-container > *:hover {
  background-color: var(--burger-menu-hover);
}
dialog.burger-menu .file-container > *,
dialog.burger-menu .samples-container > * {
  width: fit-content;
  border: none;
  background: none;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--color-text);
}
dialog.burger-menu .file-container > *:hover,
dialog.burger-menu .samples-container > *:hover {
  background-color: var(--burger-menu-hover);
}
dialog.burger-menu .file-container > *.secondary,
dialog.burger-menu .samples-container > *.secondary {
  color: var(--burger-menu-secondary-highlight);
}
dialog.burger-menu:not([open]) {
  display: none;
}
.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;
}
button.icon-only {
  font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: 270;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.5rem;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  border: none;
  border-radius: 99px;
  padding: 8px;
  color: inherit;
  background-color: transparent;
}
:root[data-theme='dark'] button.icon-only {
  font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
}
button.icon-only:hover {
  background-color: #0000000f;
}
button.icon-only:active {
  background-color: #0000001f;
}
.button-icon-only {
  font-variation-settings: 'GRAD' clamp(30, calc(430 + (30 - 430) * ((100vw - 320px) / (880 * 1px))), 430);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: 270;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.5rem;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  border: none;
  border-radius: 99px;
  padding: 8px;
  color: inherit;
  background-color: transparent;
}
:root[data-theme='dark'] .button-icon-only {
  font-variation-settings: 'GRAD' clamp(0, calc(400 + (0 - 400) * ((100vw - 320px) / (880 * 1px))), 400);
}
.button-icon-only:hover {
  background-color: #0000000f;
}
.button-icon-only:active {
  background-color: #0000001f;
}
button.plain {
  border: none;
  border-radius: 99px;
  padding: 8px;
  color: inherit;
  background-color: transparent;
}
button.plain:hover {
  background-color: #0000000f;
}
button.plain:active {
  background-color: #0000001f;
}
.button-plain {
  border: none;
  border-radius: 99px;
  padding: 8px;
  color: inherit;
  background-color: transparent;
}
.button-plain:hover {
  background-color: #0000000f;
}
.button-plain:active {
  background-color: #0000001f;
}
.loading-indicator-message {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 150%;
  color: var(--loading-indicator-message-color);
}
select:disabled,
button:disabled,
label:disabled,
input:disabled {
  opacity: 0.5;
  background-color: transparent;
  pointer-events: none;
}
.dnd-panel {
  flex: 0 1 12rem;
  width: 12rem;
}
.demo-dnd-panel__item {
  width: fit-content;
  margin: 0 auto 20px;
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  align-self: center;
  touch-action: none;
  cursor: grab;
}
.demo-dnd-panel__item:hover {
  background-color: var(--interaction-button-hover);
  cursor: grab;
}
.demo-dnd-panel__item:hover svg,
.demo-dnd-panel__item:hover img {
  transform: scale(1.03);
}
.hidden {
  display: none !important;
}
.center-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.inline-icon {
  display: inline-block;
  vertical-align: middle;
}
.input-select-checkbox {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  position: relative;
  border-radius: 6px;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.input-select-checkbox::after {
  font-family: 'Material Symbols Outlined', sans-serif;
  display: inline-grid;
  place-content: center;
  border: none;
  color: var(--color-text);
}
.input-range {
  width: 100px;
  min-width: 7rem;
  max-width: 10rem;
  -webkit-appearance: none;
  background-color: transparent;
}
.input-range ::before {
  content: '';
  display: inline-flex;
}
.input-range::-webkit-slider-runnable-track {
  background: var(--interaction-alt);
  height: 6px;
  border-radius: 1000px;
}
.input-range::-moz-range-track {
  background: var(--interaction-alt);
  height: 6px;
  border-radius: 1000px;
}
.input-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--interaction-alt);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
}
.input-range::-moz-range-thumb {
  -webkit-appearance: none;
  background: var(--interaction-alt);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
}
.input-range:hover {
  cursor: pointer;
}
ul.check-list {
  list-style: none;
  padding-left: 0;
}
ul.check-list li {
  display: flex;
  align-items: flex-start;
  /* top-align icon and text */
  gap: 0.5rem;
}
ul.check-list li::before {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: 270;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--live-demo-highlight);
  content: 'check_circle';
  flex-shrink: 0;
  margin-top: 0.15em;
  /* nudge icon down to align with text cap-height */
}
hr.thin {
  border: 0;
  height: 1px;
  background-color: var(--tour-dash);
  margin: 1em 0;
}
p.remark {
  font-size: 0.7rem;
  line-height: 1.2;
}
p.not-important {
  opacity: 0.7;
}
.live-demo-container {
  font-size: 1rem;
}
@media (min-width: 64rem) {
  .live-demo-container {
    max-width: 40vw;
    font-size: 0.875rem;
  }
}
.live-demo-container h2 {
  margin-top: 0;
  font-size: 1.1rem;
}
.live-demo-container .bold {
  font-weight: 700;
}
.live-demo-container .highlight {
  color: var(--live-demo-highlight);
}
.live-demo-container .button-container {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}
.live-demo-container .btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: var(--live-demo-button);
  color: var(--live-demo-button-text);
  border: none;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  width: 100%;
}
@media (min-width: 64rem) {
  .live-demo-container .btn {
    padding: 6px 12px;
  }
}
.live-demo-container .btn:hover {
  opacity: 0.85;
}
@media (min-width: 40rem) {
  .burger-menu .live-demo-container {
    max-width: calc(40rem * 0.7);
  }
}
.burger-menu .live-demo-container h2,
.burger-menu .live-demo-container p,
.burger-menu .live-demo-container ul {
  margin-bottom: 0.5rem;
}
.burger-menu .live-demo-container .button-container {
  display: flex;
  justify-content: center;
}
.burger-menu .live-demo-container .btn {
  width: 200px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.demo-overview-link {
  display: block;
  text-decoration: none;
  color: var(--interaction-text);
  padding: 5px 10px;
  border-radius: var(--border-radius);
  transition: background-color 0.25s ease-in-out;
}
.demo-overview-link:hover,
.demo-overview-link:focus-visible {
  background-color: var(--color-bg-hover);
}
.rail-popover .linked-demos-container,
.rail-popover .live-demo-container {
  overflow: auto;
}
@supports not selector(::-webkit-scrollbar) {
  .rail-popover .linked-demos-container,
  .rail-popover .live-demo-container {
    scrollbar-width: thin;
  }
}
.rail-popover .linked-demos-container::-webkit-scrollbar,
.rail-popover .live-demo-container::-webkit-scrollbar {
  width: 6px;
}
@media (pointer: coarse) {
  .rail-popover .linked-demos-container::-webkit-scrollbar,
  .rail-popover .live-demo-container::-webkit-scrollbar {
    width: 3px;
  }
}
.rail-popover .linked-demos-container::-webkit-scrollbar-track,
.rail-popover .live-demo-container::-webkit-scrollbar-track {
  background-color: transparent;
}
.rail-popover .linked-demos-container::-webkit-scrollbar-thumb,
.rail-popover .live-demo-container::-webkit-scrollbar-thumb {
  background-color: rgb(from var(--scrollbar-bg) r g b / 0.6);
  border-radius: 6px;
}
.rail-popover .linked-demos-container::-webkit-scrollbar-thumb:hover,
.rail-popover .live-demo-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-bg);
}
#linked-demos-popover .linked-demos-container {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 5px;
}
#linked-demos-popover .linked-demos-container > * {
  display: block;
  text-decoration: none;
  color: var(--interaction-text);
  padding: 5px 10px;
  border-radius: var(--border-radius);
  transition: background-color 0.25s ease-in-out;
}
#linked-demos-popover .linked-demos-container > *:hover,
#linked-demos-popover .linked-demos-container > *:focus-visible {
  background-color: var(--color-bg-hover);
}
#live-demo-popover {
  max-width: 350px;
  min-width: 350px;
}
#file-popover {
  min-width: 100px;
}
#file-popover > * {
  display: block;
  padding: 5px 10px;
  border-radius: var(--border-radius);
}
#file-popover > *.secondary {
  color: var(--burger-menu-secondary-highlight);
}
#file-popover > *:hover {
  background-color: var(--color-bg-hover);
}
.graph-overview-anchor {
  position: absolute;
  /* or fixed */
  right: 16px;
  bottom: 16px;
}
.graph-overview {
  view-transition-name: graph-overview;
  position: relative;
  width: 280px;
  height: 240px;
  background-color: var(--toolbar-bg);
  overflow: hidden;
  box-shadow: var(--shadow-crispy-gray);
  border-radius: var(--border-radius);
  z-index: 2;
}
.graph-overview.graph-overview--collapsed {
  height: 50px;
  width: 50px;
  border-radius: 99px;
}
.graph-overview.graph-overview--collapsed .graph-overview__header {
  height: 50px;
}
.graph-overview__header {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  height: 40px;
  line-height: 30px;
  padding: 0 10px;
}
.graph-overview--collapsible .graph-overview__header:hover {
  background-color: var(--toolbar-bg-hover);
  cursor: pointer;
}
.graph-overview--collapsible:not(.graph-overview--collapsed) .graph-overview__header:after {
  content: 'keyboard_arrow_down';
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 1.5rem;
}
.graph-overview.graph-overview--collapsible:not(.graph-overview--collapsed) .graph-overview__header {
  font-size: 1.1rem;
  justify-content: space-between;
}
.graph-overview .graph-overview--collapsible {
  font-family: var(--font-family), sans-serif;
}
.graph-overview .yfiles-canvascomponent {
  height: 200px;
  width: 100%;
  background-color: white;
}
.graph-overview-viewport {
  border: 2px solid var(--color-demo-name);
  box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 250px;
}
.graph-overview-viewport:hover,
.graph-overview-viewport:active {
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 250px;
}
.yfiles-handle-resize-template {
  stroke: var(--color-demo-name);
  stroke-width: 2px !important;
}
.node {
  fill: #0b7189;
  stroke: #042d37;
}
.node.highlight {
  fill: #ff6c00;
  stroke: #662b00;
}
.edge {
  color: #042d37;
}
.edge.highlight {
  color: #ff6c00;
}
.node-label .yfiles-label-background {
  fill: #9dc6d0;
}
.node-label .yfiles-label-text {
  fill: #042d37;
}
.node-label.highlight .yfiles-label-background {
  fill: #ffc499;
}
.node-label.highlight .yfiles-label-text {
  fill: #662b00;
}
.edge-label .yfiles-label-background {
  fill: #9babaf;
}
.edge-label .yfiles-label-text {
  fill: #042d37;
}
.edge-label.highlight .yfiles-label-background {
  fill: #c2aa99;
}
.edge-label.highlight .yfiles-label-text {
  fill: #662b00;
}
.group-node .yfiles-group-node-stroke {
  stroke: #042d37;
}
.group-node .yfiles-group-node-tab {
  fill: #0b7189;
}
.group-node .yfiles-icon-foreground {
  fill: #9dc6d0;
}
.group-node .yfiles-icon-background {
  fill: #9dc6d0;
}
.group-node .yfiles-group-node-content {
  fill: #f3f4f6;
}
.group-node.highlight .yfiles-group-node-stroke {
  stroke: #662b00;
}
.group-node.highlight .yfiles-group-node-tab {
  fill: #ff6c00;
}
.group-node.highlight .yfiles-icon-foreground {
  fill: #ffc499;
}
.group-node.highlight .yfiles-icon-background {
  fill: #ffc499;
}
.group-node-label .yfiles-label-text {
  fill: #9dc6d0;
}
.group-node-label.highlight .yfiles-label-text {
  fill: #ffc499;
}
.yfiles-node-highlight-template,
.yfiles-label-highlight-template,
.yfiles-edge-highlight-template,
.yfiles-port-highlight-template {
  stroke: #0b7189;
  stroke-linejoin: round;
}
.yfiles-context-menu button.icon {
  font-family: var(--font-family), sans-serif;
  font-size: 1rem;
}
.yplay__menu--slider-container {
  display: inline-flex;
  gap: 8px;
}
.yplay__message-host {
  --foreground-color: #0b1014;
  --background-color: rgba(255, 255, 255, 0.95);
  pointer-events: none;
  left: 0;
  width: 100%;
  position: absolute;
  top: 10px;
  display: grid;
  place-items: start center;
  z-index: 10;
}
.yplay__message-host > * {
  pointer-events: auto;
  color: var(--foreground-color);
  background: var(--background-color);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.yplay__message-host > *.yplay__message--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.yplay__message-host .yplay__message--close-button {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--foreground-color);
  cursor: pointer;
  background: none;
  font-size: 20px;
  border: none;
  transition: all 0.25s ease-in-out;
  opacity: 0.8;
}
.yplay__message-host .yplay__message--close-button:hover {
  opacity: 1;
  transform: scale(1.1);
}
/* Error dialog */
.demo-dialog-anchor {
  position: absolute;
  left: 50%;
  top: 15%;
  color: var(--color-text);
}
.demo-dialog-anchor--error::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.66);
  z-index: 1;
}
.demo-dialog {
  z-index: 2;
  position: relative;
  box-sizing: border-box;
  overflow-y: auto;
  background: var(--interaction-bg);
  box-shadow: var(--shadow-crispy-gray);
}
.demo-dialog * {
  box-sizing: border-box;
}
.demo-dialog p {
  margin: 1rem 0;
}
.demo-dialog a {
  color: var(--error-dialog-highlight);
  text-decoration: none;
}
.demo-dialog a:hover {
  text-decoration: underline;
}
.demo-dialog__title {
  padding: 14px;
  color: var(--error-dialog-highlight);
}
.demo-dialog__content {
  padding: 2px 10px 10px 10px;
}
.demo-dialog__form > * {
  width: 100%;
}
.demo-dialog__form > input[type='text'],
.demo-dialog__form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--toolbar-button-text);
  background-color: var(--error-dialog-input-background);
  border-radius: 4px 4px 0 0;
  outline: 0;
  font-size: 16px;
  padding: 6px 4px;
  transition: border-color 0.2s;
}
.demo-dialog__form label {
  display: block;
  margin: 0.75rem 0 0.25rem 0;
}
.demo-dialog button,
.demo-dialog input[type='button'] {
  width: 7.5em;
  cursor: pointer;
  margin: 6px 4px;
  background-color: var(--error-dialog-button);
  border: none;
  border-radius: var(--border-radius);
  padding: 5px;
  color: var(--toolbar-button-text);
}
.demo-dialog button:hover,
.demo-dialog input[type='button']:hover {
  background-color: var(--error-dialog-button-hover);
}
.demo-dialog .button-container {
  display: flex;
  justify-content: end;
  margin-top: 10px;
  gap: 10px;
}
.demo-dialog--error {
  overflow: auto;
  transform: translateX(-50%);
  width: 90vw;
  max-height: calc(85vh - 1rem);
  padding: 14px 10px;
  border-radius: var(--border-radius);
  visibility: visible;
}
@media (min-width: 64rem) {
  .demo-dialog--error {
    width: 750px;
  }
}
.demo-dialog--error pre {
  overflow: auto;
  background: var(--error-dialog-input-background);
  color: var(--inline-code-text);
  padding: 10px;
  margin: 0;
  border-radius: 4px;
}
.demo-dialog--error label .optional {
  font-size: 0.85em;
}
.demo-dialog--error label .optional:before {
  margin-left: 0.5em;
  content: '(';
}
.demo-dialog--error label .optional:after {
  content: ')';
}
#yfiles-license-popup {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 600px;
  padding: 12px 48px 12px 16px;
  color: var(--toast-color);
  background: var(--toast-bg);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  opacity: 1;
  visibility: visible;
  transition: opacity 250ms ease,
    transform 250ms ease,
    visibility 250ms ease;
}
.toast h2 {
  font-size: 1.25rem;
}
.toast p + p,
.toast h2 + p {
  margin-block-start: 0.5rem;
}
.toast.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -45%);
  pointer-events: none;
}
.toast .toast-close {
  position: absolute;
  top: 6px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--toast-color);
  background: var(--toast-button);
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease, color 150ms ease;
}
.toast .toast-close:hover {
  background: var(--toast-button-hover);
  transform: scale(1.08);
}
.toast .toast-close .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}
@media (max-width: 768px) {
  .toast {
    top: auto;
    left: auto;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    max-width: calc(100% - 32px);
    transform: none;
  }
  .toast.hidden {
    transform: translateY(20px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast .toast-close {
    transition: none;
  }
}
:root[data-theme='light'] {
  --vsdx-logo-url: url('./vsdx-logo-light-eWFc-RWy.svg');
}
:root[data-theme='dark'] {
  --vsdx-logo-url: url('./vsdx-logo-dark-B_pBkiH6.svg');
}
body .yfiles-labeleditbox {
  color: var(--color-casper-blue-black);
}
body .cm-editor {
  color: var(--color-casper-blue-black);
}
body .yfiles-popover__container {
  color: var(--color-casper-blue-black);
}
.vsdx-export {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.vsdx-export a {
  position: static;
  text-decoration: none;
  color: inherit;
  padding: 0;
}
.vsdx-export a:hover {
  text-decoration: underline;
}
.vsdx-export .vsdx-logo {
  background-image: var(--vsdx-logo-url);
  height: 80px;
  background-size: 75% 75%;
  background-position: center;
  background-repeat: no-repeat;
}