:root{--header-bg-color: #343e49;--sidebar-bg-color: #e0edf0;--base-spacing: clamp(.5rem, 2vw, 1rem);--header-height: clamp(2.5rem, 5vw, 4rem);--sidebar-width: clamp(12rem, 25vw, 18em)}*{box-sizing:border-box}html,body{width:100%;height:100%;font-family:system-ui,sans-serif;font-size:clamp(14px,1vw + .5rem,16px)}body{padding:0;margin:0;display:grid;grid-template:"header header" min-content "sidebar main" 1fr / var(--sidebar-width) 1fr}@media(max-width:768px){body{grid-template:none;display:flex;flex-direction:column;height:100vh;overflow:hidden}.demo-header{flex:0 0 auto}.demo-sidebar{flex:0 1 auto;max-height:calc(40vh - var(--header-height))}.demo-main{flex:1 0 60vh}}.demo-header{grid-area:header;margin:0;padding:var(--base-spacing);background:var(--header-bg-color);color:#fff;min-height:var(--header-height);display:flex;align-items:center}.demo-header h1{margin:0;font-size:clamp(1.2rem,3vw,2rem)}.demo-header a,.demo-header a:visited{color:inherit}.demo-sidebar{grid-area:sidebar;padding:var(--base-spacing);background:var(--sidebar-bg-color);border-inline-end:1px solid #bbb;line-height:1.4}.demo-sidebar h1,.demo-sidebar h2,.demo-sidebar h3,.demo-sidebar h4{font-size:clamp(1rem,1.5vw,1.2rem);font-weight:500;margin:calc(var(--base-spacing) * .75) 0 calc(var(--base-spacing) * .5)}.demo-sidebar h1:first-child,.demo-sidebar h2:first-child,.demo-sidebar h3:first-child,.demo-sidebar h4:first-child{margin-top:0}@media(max-width:768px){.demo-sidebar{border-inline-end:none;border-block-end:1px solid #bbb;overflow-y:auto;overflow-x:hidden}.demo-sidebar h1,.demo-sidebar h2,.demo-sidebar h3,.demo-sidebar h4{font-size:.95rem;margin:calc(var(--base-spacing) * .5) 0 calc(var(--base-spacing) * .25)}}#actionsArea button{margin:0 calc(var(--base-spacing) * .5);border:1px solid var(--header-bg-color);padding:calc(var(--base-spacing) * .25) calc(var(--base-spacing) * .75);border-radius:4px;cursor:pointer;font-size:clamp(.875rem,1vw + .5rem,1rem)}#actionsArea button:hover{filter:brightness(110%)}.demo-main{grid-area:main;display:flex;gap:4px}.demo-main>.yfiles-canvascomponent{flex:1;background:#fff}