:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;--accent:#473c8f;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*{box-sizing:border-box;margin:0;padding:0}a{color:var(--accent);-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{flex-direction:column;min-width:320px;height:100vh;margin:0;display:flex;overflow:hidden}h1{font-size:3.2em;line-height:1.1}#controls{background-color:#0003;flex-shrink:0;justify-content:center;align-items:center;gap:1rem;padding:1rem;display:flex}#main-container{flex:1;min-height:0;display:flex;overflow:hidden}#editor-wrapper{border-right:2px solid var(--accent);flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}#editor-wrapper h3{text-align:center;border-bottom:1px solid var(--accent);background-color:#646cff1a;flex-shrink:0;margin:0;padding:.75rem}#editor{flex:1;min-height:0;overflow:hidden}#editor .cm-editor{height:100%}#editor .cm-scroller{overflow:auto}#editor .cm-line{white-space:pre}#preview-wrapper{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}#preview-wrapper h3{text-align:center;border-bottom:1px solid var(--accent);background-color:#646cff1a;flex-shrink:0;margin:0;padding:.75rem}#preview-container{background-color:#0000001a;flex:1;min-height:0;position:relative}#app{background-color:#000;width:100%;height:100%;position:absolute;top:0;left:0}#recordedVideo{object-fit:contain;background-color:#000;width:100%;height:100%;position:absolute;top:0;left:0}#downloadBtn{visibility:hidden;pointer-events:none;padding:.6em 1.2em;font-size:1em}#downloadBtn.show{visibility:visible;pointer-events:auto}@media (max-width:768px){#main-container{flex-direction:column}#editor-wrapper{border-right:none;border-bottom:2px solid var(--accent);max-height:50vh}}.logo{will-change:filter;height:6em;padding:1.5em;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em var(--accent)aa)}.logo.vanilla:hover{filter:drop-shadow(0 0 2em #3178c6aa)}.card{padding:2em}.read-the-docs{color:#888}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:disabled{opacity:.5;cursor:not-allowed}button:hover:not(:disabled){border-color:var(--accent)}button.active{background-color:var(--accent);border-color:var(--accent);transform:scale(.98)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}button.active{background-color:var(--accent);color:#fff}}