:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100svh}*{box-sizing:border-box}body{margin:0}.page{color:#1a1a1a;background:#f4f5f7;min-height:100vh;padding:32px 24px 64px;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.header{text-align:center;max-width:960px;margin:0 auto 24px}.header h1{margin:0 0 6px;font-size:1.8rem}.subtitle{color:#5a5f6a;margin:0;font-size:.95rem}.mode-toggle{justify-content:center;gap:8px;max-width:960px;margin:0 auto 20px;display:flex}.mode-toggle button{cursor:pointer;color:#333;background:#fff;border:1px solid #d0d3d9;border-radius:8px;padding:10px 28px;font-size:.95rem}.mode-toggle button.active{color:#fff;background:#2f5fd6;border-color:#2f5fd6}.layout{grid-template-columns:1fr 1fr;gap:20px;max-width:960px;margin:0 auto;display:grid}@media (width<=720px){.layout{grid-template-columns:1fr}}.panel{background:#fff;border:1px solid #e3e5e9;border-radius:12px;padding:20px}.field{color:#444;flex-direction:column;gap:6px;margin-bottom:16px;font-size:.85rem;display:flex}.field input[type=text],.field input[type=number],.field select{border:1px solid #d0d3d9;border-radius:6px;padding:9px 10px;font-size:.95rem}.field.checkbox{flex-direction:row;align-items:center;gap:8px}.field.checkbox input{width:16px;height:16px}.color-row{gap:16px;display:flex}.color-row .field{flex:1}.color-row input[type=color]{border:1px solid #d0d3d9;border-radius:6px;width:100%;height:38px;padding:2px}.downloads{flex-direction:column;gap:10px;margin-top:8px;display:flex}.downloads button{cursor:pointer;border:none;border-radius:8px;padding:12px;font-size:.95rem}.downloads button.primary{color:#fff;background:#2f5fd6}.downloads button.secondary{color:#2f5fd6;background:#eef1f8;border:1px solid #c9d3ee}.downloads button:disabled{opacity:.5;cursor:not-allowed}.error{color:#c0392b;margin-top:10px;font-size:.85rem}.preview{flex-direction:column;justify-content:center;align-items:center;display:flex}.preview-surface{background:repeating-conic-gradient(#f0f0f0 0% 25%,#fff 0% 50%) 50%/20px 20px;border-radius:8px;justify-content:center;align-items:center;width:100%;min-height:260px;padding:12px;display:flex;overflow:auto}.preview-surface canvas{max-width:100%;height:auto}.preview-hint{color:#6a6f7a;text-align:center;margin-top:12px;font-size:.8rem}