:root{--text-color:#2a3e50;--panel-bg-color:#e8edf2;--text-accent-color:#00adcc;--size-h1:2rem;--size-h2:1.5rem;--size-h3:1.2rem;--gap:8px;--border-radius:12px;--description-width:300px}html,body{box-sizing:border-box;height:100%;margin:0;overflow:hidden}.demo-app{flex-direction:column;height:100%;display:flex}.demo-header{flex:0 0 70px;height:70px}.demo-main{min-height:0;padding:0 var(--gap) var(--gap);flex:auto;overflow:auto}.demo-main{gap:var(--gap);align-items:stretch;display:flex}.demo-main>*{min-width:0;position:relative}.demo-main__component-panel{flex:1 1 0}.demo-main__description-panel{flex:0 0 var(--description-width)}body{color:var(--text-color);background-color:var(--panel-bg-color);font-family:poppins,sans-serif}button{color:inherit;font-family:inherit}.demo-main__description-panel{border-radius:var(--border-radius);padding:var(--border-radius);background-color:#fff;font-size:.875rem;font-weight:400;overflow:auto}.demo-main__description-panel h1,.demo-main__description-panel h2{-webkit-hyphens:auto;hyphens:auto;margin:1.25em 0 .5em;line-height:130%}.demo-main__description-panel :first-child,.demo-main__description-panel h1{margin-top:0}.demo-main__description-panel .subheading{color:color-mix(in oklch, var(--text-color) 60%, white);font-size:1rem;font-weight:700}.demo-main__description-panel a{color:var(--text-color)}.demo-main__description-panel a:hover{text-decoration-thickness:2px}.demo-main__component-panel{border-radius:var(--border-radius);background-color:#fff}.demo-main__description-panel h1{color:var(--text-accent-color);font-size:var(--size-h1);font-weight:600}.demo-main__description-panel h2{font-size:var(--size-h2)}.demo-header{align-items:center;gap:12px;padding:0 8px 0 92px;font-weight:400;display:flex}.demo-header a{color:inherit;text-decoration:none}.demo-header .y-logo{background-color:#2a3e50;width:12rem;height:100%;margin:4px 4px 4px 16px;-webkit-mask:url(./ylogo-large-3pzG7KhQ.svg) 50% no-repeat;mask:url(./ylogo-large-3pzG7KhQ.svg) 50% no-repeat}.demo-header .chevron-right{background-color:#2a3e50;width:30px;height:100%;font-weight:270;-webkit-mask:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%232a3e50'%3e%3cpath%20d='M504-480%20320-664l56-56%20240%20240-240%20240-56-56%20184-184Z'/%3e%3c/svg%3e") 50% no-repeat;mask:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%232a3e50'%3e%3cpath%20d='M504-480%20320-664l56-56%20240%20240-240%20240-56-56%20184-184Z'/%3e%3c/svg%3e") 50% no-repeat}.demo-header .breadcrumb-wrapper{font-size:1.125em}.graph-component{height:100%}@media (max-width:768px){body{height:100vh;overflow:hidden}.demo-main{flex-direction:column;height:calc(100% - 60px);display:flex}.demo-header{flex:none}.demo-page__description{border-block-end:1px solid #bbb;border-inline-end:none;flex:0 auto;order:1;max-height:calc(40vh - 60px);overflow:hidden auto}.demo-main__component-panel{flex:1 0 60vh;order:2}}