body,html,h1,h2{margin:0;padding:0}*{box-sizing:inherit}body{background:#f0f0f0;font-family:Segoe UI Variable Display,system-ui,Segoe UI,San Francisco,Helvetica,sans-serif;color:#333;font-size:14px;box-sizing:border-box}h1{font-size:2rem;padding:2em 20px 20px;font-weight:500;background:linear-gradient(120deg,#424fe0,#3a228f);color:#fff;text-shadow:0 1px 1px rgb(0 0 0 / .2)}h2{font-size:1.5rem;font-weight:400;padding:20px}.example{margin-bottom:64px}.example>div{display:flex;flex-wrap:wrap;gap:20px}.preview{position:relative;flex:0 0 100vw;max-width:800px;display:grid;grid-template-rows:auto auto}.preview canvas{display:block;top:0;left:0;width:800px;aspect-ratio:4 / 3;max-width:100vw;border-radius:6px;grid-column:1;grid-row:2}.controls{grid-row:1;padding:10px;box-sizing:border-box;z-index:5}.controls button{border:none;background:#f0f0f0;font-family:inherit;font-weight:700;color:#888;text-transform:uppercase;padding:10px;box-shadow:-2px -2px 5px #fff,2px 2px 5px #e0e0e0;margin:0 10px;border-radius:6px;transition:all .3s}.controls button:hover{box-shadow:-4px -4px 8px #fff,4px 4px 8px #e0e0e0;background:#f5f5f5;cursor:pointer}.controls button:active,.controls button:focus{outline:none}.controls button:active{transition:none;background-color:#22368f;color:#fff}.controls button:disabled{opacity:.5;cursor:not-allowed}.code{font-size:.85rem;letter-spacing:-.03em;line-height:1.4;display:block;white-space:pre;font-family:monospace;flex:1 1 auto;tab-size:2ch;background:linear-gradient(-40deg,#222,#444);color:#fff;border-radius:10px 0 0 10px;box-shadow:2px 2px 6px #fff,4px 4px 16px #0000001a inset;padding:20px;margin:0 0 0 20px;outline:1px solid rgb(0 0 0 / .2);outline-offset:-4px;@media screen and (max-width:800px){margin-left:0;border-radius:0;overflow-x:auto}}footer{background:linear-gradient(120deg,#3a228f,#22125c);color:#c8bfea;text-shadow:0 1px 1px rgb(0 0 0 / .2);display:flex;justify-content:center;align-items:center;min-height:100px;gap:8px;a{color:inherit;text-decoration:none;font-weight:600;&:hover{text-decoration:underline;color:#e2ddf3}}}