@charset "UTF-8";header{display:flex;background-color:#181818;width:auto}header .xgpuButton{padding:4px;margin-left:10px;font-family:Arial;font-size:34px;font-weight:700;color:#fff;-webkit-user-select:none;user-select:none;width:100px;cursor:pointer}header .xgpuButton :first-child{color:#f0f}@media screen and (min-width: 700px){header .sampleCombo{display:none}}@media screen and (max-width: 700px){header{align-items:center;position:relative;z-index:99999;position:fixed;width:100%}header .xgpuButton{font-size:20px}header .sampleCombo{background-color:transparent;border:none;display:flex;margin-left:50px;margin-right:10px;width:100%;text-align:right;padding-right:12px;outline:none;color:#0ff;overflow-y:scroll}header .sampleCombo option{color:#000}}*{padding:0;margin:0;box-sizing:border-box}h1,h2,h3,h4,h5,h6,p,pre,blockquote,ul,ol,li,dl,dd,dt,figure,figcaption,form,fieldset,legend,textarea,th,td,article,aside,details,footer,header,hgroup,main,menu,nav,section{margin:0;padding:0}body,input,textarea,select,button{font-size:100%;font-family:inherit;font-weight:inherit}body{font-family:sans-serif;background-color:#f2f2f2}body::-webkit-scrollbar{width:8px}body::-webkit-scrollbar-track{background:#f1f1f1}body::-webkit-scrollbar-thumb{background:#888;border-radius:3px}body::-webkit-scrollbar-thumb:hover{background:#555}.mainContainer{display:block;min-height:100vh;width:100vw;max-width:1130px}.sampleCanvas{width:auto;background-color:#000;color:#fff;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.sampleCanvas canvas{display:flex;width:830px;height:830px;resize:none}@media screen and (max-width: 480px){.sampleCanvas{padding-top:31px}.sampleCanvas canvas{width:480px;height:480px}}.demoParams{position:absolute;right:0;bottom:0;padding:5px;z-index:99999;background-color:#0000004d;width:220px;display:flex;flex-direction:column}.demoParams .container{display:flex;flex-direction:column}.param{position:relative;display:flex;padding-bottom:10px;height:25px;justify-content:flex-end;align-items:flex-end}.param p{color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:12px;-webkit-user-select:none;user-select:none;pointer-events:none;text-align:right;width:100px;padding-right:10px}.param .container{background-color:#fff;width:100px;height:15px}.param .container .progress{background-color:#0ff;height:15px}.sampleContainer{display:flex;width:100%}.sampleMenu{display:flex;flex-direction:column;width:300px;height:830px;background-color:#444;color:#fff;-webkit-user-select:none;user-select:none;cursor:pointer;list-style:none;padding-top:15px;font-size:1.1rem;overflow-y:auto}.sampleMenu a{color:#fff;text-decoration:none}.sampleMenu ul{padding:5px;margin-left:15px;margin-right:15px}.sampleMenu ul .sel{color:#f0f}.sampleMenu ul :first-child{height:20px}.sampleMenu::-webkit-scrollbar{width:8px}.sampleMenu::-webkit-scrollbar-track{background:#f1f1f1}.sampleMenu::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.sampleMenu::-webkit-scrollbar-thumb:hover{background:#555}@media screen and (max-width: 768px){.sampleMenu{width:240px}}@media screen and (max-width: 700px){.sampleMenu{display:none}}.codeContainer{display:flex;flex-direction:column}.codeSelector{background-color:#333;display:flex;flex-wrap:wrap;padding:4px}.codeSelector .codeFile{-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;border:1px solid white;color:#fff;padding:10px;margin:6px}@media screen and (max-width: 480px){.codeSelector{padding:4px}.codeSelector .codeFile{font-size:.9em;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;border:1px solid white;color:#fff;padding:8px;margin:4px}}.codeViewer{width:100%}@media screen and (max-width: 480px){.codeViewer{font-size:.8em}}