:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#ffffffeb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f1115;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}a{color:#4f8df7;text-decoration:none}a:hover{color:#7aa8fb}body{min-width:320px;min-height:100vh;margin:0}h1{font-size:3.2em;line-height:1.1}button{cursor:pointer;appearance:none;box-shadow:none;background-color:#1a1a1a;background-image:none;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:hover{border-color:#646cff}button:disabled{color:#e8eef973;border-color:var(--border,#222636);cursor:not-allowed;opacity:.8;background-color:#1a1f2b}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{color:#213547eb;background-color:#1a1f2b}}:root{--bg:#0f1115;--panel:#151822;--border:#222636;--text:#e8eef9;--muted:#a9b3c9;--accent:#4f8df7;--success:#3fc77a;--side-width:240px;--canvas-scale:1;--canvas-window-height:72vh;--canvas-offset-x:0px;--canvas-offset-y:0px}#root{max-width:100%;color:var(--text);margin:0 auto;padding:1.5rem}.app{grid-template-columns:minmax(0,1fr) minmax(300px,21vw);gap:1rem;display:grid}.panel{background:var(--panel);border:1px solid var(--border);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;accent-color:var(--accent);border-radius:12px;padding:1rem}.panel button{color:var(--text);cursor:pointer;appearance:none;box-shadow:none;background-image:none;border-radius:8px;justify-content:center;align-items:center;padding:.5rem .75rem;display:inline-flex;border:1px solid var(--border)!important;background:#1a1f2b!important}.panel button:disabled{color:var(--muted);border-color:var(--border);opacity:.6;cursor:not-allowed;box-shadow:none;background:#1a1f2b!important}.panel button.primary{border-color:var(--accent)}.hub-btn{cursor:pointer;appearance:none;border-radius:8px;padding:.5rem .75rem;border:1px solid var(--border)!important;color:var(--text)!important;box-shadow:none!important;background:#1a1f2b!important}.hub-btn:disabled{opacity:.7;cursor:not-allowed;color:var(--muted)!important;border-color:var(--border)!important;box-shadow:none!important;background:#1a1f2b!important}a.small-btn{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#1a1f2b;border-radius:8px;padding:.35rem .6rem;text-decoration:none;display:inline-block}a.small-btn:visited{color:var(--text)}a.small-btn:hover{border-color:var(--accent)}.panel [role=button]{cursor:pointer;appearance:none;border-radius:8px;justify-content:center;align-items:center;padding:.5rem .75rem;display:inline-flex;border:1px solid var(--border)!important;color:var(--text)!important;box-shadow:none!important;background:#1a1f2b!important}.panel [role=button][aria-disabled=true]{opacity:.7;cursor:not-allowed;color:var(--muted)!important;border-color:var(--border)!important;box-shadow:none!important;background:#1a1f2b!important}.panel h2{color:var(--muted);margin:0 0 .75rem;font-size:1rem}.upload{flex-direction:row;grid-column:1/-1;align-items:center;gap:.75rem;display:flex}.upload h2{white-space:nowrap;margin:0}.upload .status{margin-top:0}.upload .dropzone{min-height:48px;padding:.75rem 1rem}.dropzone{border:2px dashed var(--border);text-align:center;color:var(--muted);background:#12151f;border-radius:12px;padding:1rem}.controls{flex-direction:column;justify-content:flex-start;align-items:stretch;gap:.5rem;display:flex}.panel.controls{padding-top:.5rem}.panel.controls h2{margin-bottom:.5rem}.controls button{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#1a1f2b;border-radius:8px;padding:.5rem .75rem}.controls button:disabled{opacity:.6;cursor:not-allowed}.palette{grid-template-columns:repeat(8,1fr);gap:.5rem;display:grid}.swatch{border:1px solid var(--border);cursor:pointer;border-radius:6px;height:28px}.swatch.selected{outline:2px solid var(--accent)}.grid-controls{gap:.35rem;display:grid}.row{align-items:center;gap:.4rem;display:flex}.canvas-wrap{border:1px solid var(--border);height:var(--canvas-window-height);max-height:var(--canvas-window-height);background:#0b0d13;border-radius:12px;position:relative;overflow:auto}canvas{width:auto;height:auto;transform:translate(var(--canvas-offset-x),var(--canvas-offset-y))scale(var(--canvas-scale));transform-origin:0 0;display:block}.steps{gap:.75rem;display:grid}.steps button{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#1a1f2b;border-radius:8px;padding:.5rem .75rem}.steps button:disabled{opacity:.6;cursor:not-allowed}.small-btn{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#1a1f2b;border-radius:8px;padding:.35rem .6rem}.small-btn:disabled{opacity:.6;cursor:not-allowed}.step-thumb{border:1px solid var(--border);border-radius:8px;width:100%}.toolbar{gap:.5rem;display:flex}.toolbar button{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#1a1f2b;border-radius:8px;padding:.5rem .75rem}.toolbar button.primary{border-color:var(--accent)}.status{color:var(--muted);margin-top:.5rem;font-size:.9rem}.success{color:var(--success)}.logo{will-change:filter;height:6em;padding:1.5em;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:20s linear infinite logo-spin}}.card{padding:2em}.read-the-docs{color:#888}.panel.steps{grid-column:1/-1}