:root{--radius:14px;--radius-sm:9px;--maxw:1160px;--font-sans:"Inter", system-ui, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, "JetBrains Mono", "SF Mono", Consolas, monospace}html[data-theme=dark]{--bg:#0a0e17;--bg-glow-a:#6366f129;--bg-glow-b:#22d3ee1f;--surface:#121a2b;--surface-2:#0e1422;--border:#ffffff14;--border-strong:#ffffff29;--text:#e7eaf2;--text-dim:#9aa4b8;--text-faint:#5f6a80;--accent:#38bdf8;--accent-strong:#22d3ee;--accent-contrast:#06121b;--accent-soft:#38bdf824;--danger:#f87171;--danger-soft:#f871711f;--grad:linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);--shadow:0 26px 64px -30px #000000c7;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html[data-theme=light]{--bg:#eef1f6;--bg-glow-a:#6366f11f;--bg-glow-b:#06b6d41a;--surface:#fff;--surface-2:#f3f5f9;--border:#0f172a1a;--border-strong:#0f172a33;--text:#0f1729;--text-dim:#56607a;--text-faint:#8b94a8;--accent:#0284c7;--accent-strong:#0891b2;--accent-contrast:#fff;--accent-soft:#0284c71a;--danger:#dc2626;--danger-soft:#dc262614;--grad:linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);--shadow:0 26px 64px -36px #0f172a52;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100svh;font-family:var(--font-sans);color:var(--text);background-color:var(--bg);background-image:radial-gradient(640px circle at 12% -4%, var(--bg-glow-a), transparent 60%), radial-gradient(620px circle at 96% 0%, var(--bg-glow-b), transparent 58%);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-attachment:fixed;font-size:16px;line-height:1.5}h1,h2,h3{margin:0;font-weight:600}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;font-family:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.footer{text-align:center;color:var(--text-faint);font-size:13px}.control-section{border-bottom:1px solid var(--border);padding:22px 0}.control-section:last-of-type{border-bottom:none}.control-section-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:16px;font-size:12px;font-weight:600}.control-section-body{flex-direction:column;gap:16px;display:flex}.field-label{color:var(--text);font-size:14px;font-weight:500}.field-hint{color:var(--text-dim);font-size:12.5px}.color-field{justify-content:space-between;align-items:center;gap:14px;display:flex}.color-field-control{align-items:center;gap:8px;display:flex}.color-swatch{border:1px solid var(--border-strong);cursor:pointer;border-radius:9px;width:34px;height:34px;position:relative;overflow:hidden}.color-swatch input[type=color]{cursor:pointer;opacity:0;border:none;width:calc(100% + 8px);height:calc(100% + 8px);padding:0;position:absolute;inset:-4px}.color-swatch-fill{position:absolute;inset:0}.color-hex{width:92px;font-family:var(--font-mono);text-transform:lowercase;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13px;transition:border-color .2s}.color-hex:focus{border-color:var(--accent);outline:none}.range-field{flex-direction:column;gap:10px;display:flex}.range-field.is-disabled{opacity:.4}.range-field-head{justify-content:space-between;align-items:center;display:flex}.range-value{font-family:var(--font-mono);color:var(--text-dim);font-size:13px}.range-field input[type=range]{appearance:none;background:linear-gradient(var(--accent), var(--accent)) 0 / var(--fill,0%) 100% no-repeat, var(--surface-2);border:1px solid var(--border);cursor:pointer;border-radius:999px;width:100%;height:6px}.range-field input[type=range]:disabled{cursor:not-allowed}.range-field input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--text);border:3px solid var(--surface);border-radius:50%;width:17px;height:17px;box-shadow:0 1px 4px #0006}.range-field input[type=range]::-moz-range-thumb{background:var(--text);border:3px solid var(--surface);border-radius:50%;width:14px;height:14px}.toggle-field{justify-content:space-between;align-items:center;gap:16px;display:flex}.toggle-field-text{cursor:pointer;flex-direction:column;gap:2px;display:flex}.switch{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:999px;flex-shrink:0;width:44px;height:26px;padding:0;transition:background .2s,border-color .2s}.switch.is-on{background:var(--accent);border-color:var(--accent)}.switch-knob{background:var(--text);border-radius:50%;width:18px;height:18px;transition:transform .2s;display:block;transform:translate(2px)}.switch.is-on .switch-knob{background:var(--accent-contrast);transform:translate(20px)}.segmented{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;display:grid}.segmented-option{color:var(--text-dim);background:0 0;border:none;border-radius:7px;padding:8px 10px;font-size:13.5px;font-weight:500;transition:background .2s,color .2s}.segmented-option:hover{color:var(--text)}.segmented-option.is-active{color:var(--text);background:var(--surface);box-shadow:0 1px 3px #00000040}.controls-panel{padding:8px 24px 24px}.data-input{width:100%;font-family:var(--font-mono);color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);resize:vertical;margin-top:8px;padding:12px 14px;font-size:14px;transition:border-color .2s}.data-input::placeholder{color:var(--text-faint)}.data-input:focus{border-color:var(--accent);outline:none}.logo-upload{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.logo-upload-input{display:none}.logo-upload-button{color:var(--text);background:var(--surface-2);border:1px solid var(--border-strong);cursor:pointer;border-radius:8px;padding:9px 14px;font-size:13.5px;font-weight:500;transition:border-color .2s}.logo-upload-button:hover{border-color:var(--accent)}.logo-upload-name{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;max-width:60%;font-size:13px;overflow:hidden}.reset-button{width:100%;color:var(--text-dim);border:1px solid var(--border);border-radius:var(--radius-sm);background:0 0;margin-top:22px;padding:11px;font-size:13.5px;font-weight:500;transition:color .2s,border-color .2s}.reset-button:hover{color:var(--text);border-color:var(--border-strong)}@media (width<=520px){.controls-panel{padding:8px 16px 18px}}.preview-panel{flex-direction:column;gap:18px;padding:24px;display:flex;position:sticky;top:24px}.preview-stage{flex-direction:column;gap:12px;display:flex}.preview-frame{aspect-ratio:1;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);place-items:center;padding:20px;display:grid;position:relative;overflow:hidden}.preview-frame.is-checkered{background-color:#fff;background-image:linear-gradient(45deg,#cdd3dd 25%,#0000 25%),linear-gradient(-45deg,#cdd3dd 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#cdd3dd 75%),linear-gradient(-45deg,#0000 75%,#cdd3dd 75%);background-position:0 0,0 11px,11px -11px,-11px 0;background-size:22px 22px}.preview-image{border-radius:6px;max-width:100%;max-height:100%;transition:opacity .2s}.preview-image.is-loading{opacity:.45}.preview-empty{text-align:center;color:var(--text-dim);flex-direction:column;align-items:center;gap:14px;padding:24px;display:flex}.preview-empty .brand-mark{width:52px;height:52px;fill:var(--text-faint);opacity:.6}.preview-empty p{max-width:240px;margin:0;font-size:14px}.preview-spinner{border:3px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;width:34px;height:34px;animation:.7s linear infinite spin;position:absolute}@keyframes spin{to{transform:rotate(360deg)}}.preview-status{color:var(--text-faint);text-align:center;font-size:12.5px}.preview-error{color:var(--danger);background:var(--danger-soft);border:1px solid var(--danger);border-radius:var(--radius-sm);margin:0;padding:11px 14px;font-size:13.5px}.download-button{width:100%;color:var(--accent-contrast);background:var(--grad);border-radius:var(--radius-sm);border:none;padding:14px;font-size:15px;font-weight:600;transition:opacity .2s,transform .1s}.download-button:hover:not(:disabled){opacity:.92}.download-button:active:not(:disabled){transform:translateY(1px)}.download-button:disabled{opacity:.4;cursor:not-allowed}.preview-usage{color:var(--text-dim);background:var(--accent-soft);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:default;justify-content:center;align-items:center;gap:7px;margin-top:-6px;padding:9px 12px;font-size:12.5px;display:flex}.preview-usage-icon{width:14px;height:14px;fill:var(--accent-strong);flex-shrink:0}.preview-usage-text strong{color:var(--text);font-weight:700}@media (width<=860px){.preview-panel{order:-1;position:static}}.topbar{justify-content:space-between;align-items:center;gap:16px;display:flex}.brand{align-items:center;gap:13px;display:flex}.brand .brand-mark{width:38px;height:38px}.brand-text{flex-direction:column;line-height:1.2;display:flex}.brand-name{letter-spacing:-.01em;font-size:18px;font-weight:700}.brand-sub{color:var(--text-dim);font-size:12.5px}.topbar-actions{align-items:center;gap:12px;display:flex}.devalis-link{color:var(--text-dim);border:1px solid var(--border);border-radius:999px;padding:6px 11px;font-size:13px;transition:color .2s,border-color .2s}.devalis-link:hover{color:var(--text);border-color:var(--border-strong);text-decoration:none}.theme-toggle{width:38px;height:38px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:50%;flex-shrink:0;place-items:center;font-size:16px;transition:border-color .2s,background .2s;display:grid}.theme-toggle:hover{border-color:var(--border-strong)}@media (width<=520px){.brand-sub{display:none}}.app{width:100%;max-width:var(--maxw);flex-direction:column;gap:28px;min-height:100svh;margin:0 auto;padding:24px 24px 48px;display:flex}.brand-mark{fill:var(--text);flex-shrink:0}.brand-mark-dot{fill:var(--bg)}.layout{flex-grow:1;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);align-items:start;gap:24px;display:grid}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}@media (width<=860px){.layout{grid-template-columns:1fr}}@media (width<=520px){.app{padding:18px 14px 36px}}