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