.page-wrapper.svelte-1s0yzqj{display:flex;flex-direction:column;min-height:calc(100vh - 70px)}header.svelte-1s0yzqj{text-align:center;padding:2rem 1rem;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;box-shadow:0 4px 12px #0000001a;position:relative;overflow:hidden}@keyframes svelte-1s0yzqj-float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}header.svelte-1s0yzqj h1:where(.svelte-1s0yzqj){margin:0;font-size:2.5rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.2)}header.svelte-1s0yzqj p:where(.svelte-1s0yzqj){margin:.5rem 0 1.5rem;font-size:1.1rem;opacity:.9}.code-type-selector.svelte-1s0yzqj{display:flex;justify-content:center;margin:0 auto;background-color:#fff3;border-radius:8px;padding:.25rem;width:fit-content}.code-type-selector.svelte-1s0yzqj button:where(.svelte-1s0yzqj){padding:.5rem 1.25rem;border:none;background-color:transparent;cursor:pointer;font-size:.9rem;font-weight:500;border-radius:6px;color:#fff;transition:all .2s}.code-type-selector.svelte-1s0yzqj button.active:where(.svelte-1s0yzqj){background-color:#fff;color:#4f46e5}main.svelte-1s0yzqj{flex:1;padding:2rem 1rem}.container.svelte-1s0yzqj{max-width:1200px;margin:0 auto}.generator-container.svelte-1s0yzqj{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1rem}@media (min-width: 768px){.generator-container.svelte-1s0yzqj{grid-template-columns:1fr 1fr}}.options-panel.svelte-1s0yzqj{background-color:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 10px 30px #0000001a;height:fit-content}.preview-panel.svelte-1s0yzqj{display:flex;justify-content:center;align-items:center;background-color:#fff;padding:2rem;border-radius:12px;box-shadow:0 10px 30px #0000001a;min-height:300px;transition:transform .3s ease;overflow:hidden}canvas.svelte-1s0yzqj{max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 12px #0000001a;display:block;margin:0 auto}.form-group.svelte-1s0yzqj{margin-bottom:1.25rem}.form-group.svelte-1s0yzqj:last-child{margin-bottom:0}.section-title.svelte-1s0yzqj{font-size:1rem;font-weight:600;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #e2e8f0;color:#4a5568}label.svelte-1s0yzqj{display:block;margin-bottom:.5rem;font-weight:500;color:#4a5568;font-size:.9rem}input[type=text].svelte-1s0yzqj,select.svelte-1s0yzqj{width:100%;padding:.5rem .75rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.9rem;background-color:#fff;transition:border-color .2s}input[type=text].svelte-1s0yzqj:focus,select.svelte-1s0yzqj:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}input[type=range].svelte-1s0yzqj{width:100%;accent-color:#6366f1}input[type=color].svelte-1s0yzqj{width:100%;height:40px;border:1px solid #e2e8f0;border-radius:6px;padding:2px}.button-group.svelte-1s0yzqj{display:flex;background-color:#f1f5f9;border-radius:6px;padding:.25rem}.button-group.svelte-1s0yzqj button:where(.svelte-1s0yzqj){flex:1;padding:.5rem;border:none;background-color:transparent;cursor:pointer;font-size:.9rem;color:#64748b;border-radius:4px;transition:all .2s}.button-group.svelte-1s0yzqj button.active:where(.svelte-1s0yzqj){background-color:#6366f1;color:#fff}.checkbox-group.svelte-1s0yzqj{display:flex;gap:1rem}.checkbox-group.svelte-1s0yzqj label:where(.svelte-1s0yzqj){display:flex;align-items:center;gap:.5rem;cursor:pointer;margin-bottom:0}.action-buttons.svelte-1s0yzqj{display:flex;justify-content:center;margin-top:1.5rem}.btn.svelte-1s0yzqj{padding:.75rem 2rem;border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem;min-width:140px}.btn-success.svelte-1s0yzqj{background-color:#10b981;color:#fff}.btn-success.svelte-1s0yzqj:hover{background-color:#059669}.range-value.svelte-1s0yzqj{display:inline-block;min-width:2.5rem;text-align:right;font-weight:600;color:#6366f1}.options-grid.svelte-1s0yzqj{display:grid;grid-template-columns:1fr;gap:1.5rem}@media (min-width: 640px){.options-grid.svelte-1s0yzqj{grid-template-columns:1fr 1fr}}.mobile-br.svelte-1s0yzqj{display:none}@media (max-width: 768px){header.svelte-1s0yzqj h1:where(.svelte-1s0yzqj){font-size:2rem}.mobile-br.svelte-1s0yzqj{display:inline}}@media (max-width: 480px){header.svelte-1s0yzqj h1:where(.svelte-1s0yzqj){font-size:1.8rem}header.svelte-1s0yzqj p:where(.svelte-1s0yzqj){font-size:1rem}}