html,body{height:100%;margin:0}canvas{display:block;height:100%;width:100%}button.rounded{transition:opacity .2s,color .2s;box-shadow:0 0 12px -8px #000;background-color:#fff;font-family:monospace;border-radius:50%;position:absolute;-webkit-user-select:none;user-select:none;font-weight:800;font-size:20px;cursor:pointer;color:#005a9c;border:none;padding:0;height:50px;width:50px}button.rounded#code{letter-spacing:-2px;margin-bottom:2.5vw;margin-right:2.5vw;bottom:0;right:0}button.rounded:hover{color:#0093ff}button.rounded.hidden{pointer-events:none;opacity:0}*,*:after,*:before{box-sizing:border-box}body{font: 400 14px/normal system-ui,-apple-system,sans-serif}aside.examples{box-shadow:0 0 10px -8px #000;transition:transform .2s;background-color:#fff;min-height:100dvh;position:relative;overflow-y:auto;min-width:240px;height:100%;width:15vw;z-index:1}aside.examples.hidden{transform:translate(-100%)}div.content{margin:25px 20px 50px}a{transition:transform .2s,color .2s;transform:translate(0);text-decoration:none;font-weight:700;overflow:hidden;display:table;color:inherit;outline:none}a:hover{color:#005a9c}a[title=UWAL]>img:first-child{vertical-align:text-bottom;display:inline-block;margin-right:5px;height:32px;width:32px}a[title=UWAL]:hover>h1.title{color:#0093ff}h1.title{transform:translateY(1px);transition:color .2s;display:inline-block;font-weight:800;font-size:18px;color:#005a9c;outline:none;margin:0}h2.subtitle{margin:40px 0 20px;font-weight:400;font-size:18px}ul#demos,ul#examples{margin:0;row-gap:20px;display:flex;flex-direction:column;padding:0 0 0 20px}ul#demos>li,ul#examples>li{list-style:none}ul#demos>li>a:before,ul#examples>li>a:before{border-bottom:5px solid transparent;border-top:5px solid transparent;border-left:8px solid black;transform:translate(-8px);transition:transform .2s;display:inline-block;position:relative;margin-right:4px;content:"";height:0px;width:0px}ul#demos>li>a.active,ul#examples>li>a.active{transform:translate(10px);pointer-events:none}ul#demos>li>a.active:before,ul#examples>li>a.active:before{transform:translate(0)}canvas,iframe{max-width:calc(100vw - max(15vw,240px));position:absolute;width:85vw;bottom:0;right:0;top:0}iframe{display:none;height:100%;border:0px}button#list{margin-bottom:2.5vw;margin-left:2.5vw;display:none;z-index:1;bottom:0;left:0}@media screen and (max-width:960px){aside.examples{width:100%}div.content{margin-inline:auto;max-width:240px}canvas,iframe{max-width:100vw;width:100vw}button#list{display:block}}