:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:1rem;min-width:320px;height:100vh;box-sizing:border-box}#app{width:100%;height:100%;text-align:center;display:flex;flex-direction:column;align-items:center}h1{margin:0;font-size:3.2em;line-height:1.1}.logo{vertical-align:middle;height:1em;padding-right:.25em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 .25em #646cffaa)}.card{padding:2em}.subtitle{color:#888}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}}.canvas-container{width:100%;height:100%;min-height:0;flex:1;display:flex;container-type:size}.canvas{border:1px solid #333333;width:100%;height:100%;max-width:calc(100%*min(1,1cqh / 1cqw * 1280 / 720));max-height:calc(100%*min(1,1cqw / 1cqh * 720 / 1280));margin:auto}