:root{--bg:#f8f9fa;--bg-surface:#fff;--bg-elevated:#f0f1f3;--accent:#3b82f6;--accent-dim:#3b82f61a;--text:#1a1a2e;--text-secondary:#4b5563;--text-muted:#6b7280;--text-dim:#9ca3af;--border:#00000014;--border-medium:#0000001f;--font-display:"Orbitron", system-ui, sans-serif;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", "Cascadia Code", ui-monospace, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-size:16px;line-height:1.6}[data-theme=dark]{--bg:#0a0a0a;--bg-surface:#121212;--bg-elevated:#1a1a1a;--accent:#3b82f6;--accent-dim:#3b82f626;--text:#f1f7fa;--text-secondary:#d1d5db;--text-muted:#9ca3af;--text-dim:#6b7280;--border:#ffffff14;--border-medium:#ffffff1f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;background-color:var(--bg)}body{background:var(--bg);min-height:100dvh;color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;font-weight:400;transition:background-color .3s,color .3s;overflow-x:hidden}#root{flex-direction:column;min-height:100dvh;display:flex}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;text-wrap:balance;font-weight:700;line-height:1.2}p{text-wrap:pretty;margin:0}code,kbd{font-family:var(--font-mono)}kbd{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-muted);border-radius:4px;justify-content:center;align-items:center;padding:1px 6px;font-size:.7rem;display:inline-flex}::selection{background:var(--accent-dim);color:var(--text)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.skip-link{z-index:10000;background:var(--accent);color:#fff;border-radius:0 0 .5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:700;text-decoration:none;transition:top .2s;position:absolute;top:-100%;left:0}.skip-link:focus{top:0}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes gridScroll{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.animate-fade-in-up{animation:.8s cubic-bezier(.16,1,.3,1) both fadeInUp}.animate-fade-in-scale{animation:.6s cubic-bezier(.16,1,.3,1) both fadeInScale}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.35s}.delay-4{animation-delay:.5s}.delay-5{animation-delay:.65s}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.app-container{flex-direction:column;min-height:100dvh;display:flex;position:relative}.app-header{border-bottom:1px solid var(--border);background:var(--bg-surface);z-index:50;justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex;position:sticky;top:0}.app-logo{align-items:center;gap:.75rem;display:flex}.logo-icon{background:var(--accent);width:2rem;height:2rem;font-family:var(--font-display);color:#000;border-radius:.5rem;justify-content:center;align-items:center;font-size:.75rem;font-weight:900;display:flex}.logo-text{font-family:var(--font-display);letter-spacing:-.02em;font-size:1rem;font-weight:700}.logo-text-accent{color:var(--accent)}.btn-download{background:var(--accent);color:#000;font-size:.8125rem;font-weight:700;font-family:var(--font-sans);cursor:pointer;border:none;border-radius:.75rem;align-items:center;gap:.5rem;padding:.625rem 1.25rem;text-decoration:none;transition:all .3s cubic-bezier(.32,.72,0,1);display:inline-flex}.btn-download:hover{box-shadow:0 0 24px var(--accent-dim);transform:translateY(-1px)}.btn-download:active{transform:scale(.97)translateY(0)}.btn-download svg{width:1rem;height:1rem}.main-layout{flex:1;grid-template-columns:380px 1fr;align-items:start;gap:1.5rem;width:100%;max-width:1400px;margin:0 auto;padding:1.5rem;display:grid}.glass-panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:1.25rem;flex-direction:column;gap:1.25rem;padding:1.5rem;transition:box-shadow .3s;display:flex;position:sticky;top:5.5rem;box-shadow:0 4px 24px #0000004d,inset 0 1px #ffffff0d}.glass-panel:hover{box-shadow:0 8px 40px #00d4ff0f,0 4px 24px #0000004d,inset 0 1px #ffffff0d}.panel-section{flex-direction:column;gap:.5rem;display:flex}.panel-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-size:.6875rem;font-weight:600}.upload-zone{border:1px dashed var(--border-medium);text-align:center;cursor:pointer;background:var(--bg-elevated);border-radius:.75rem;padding:1rem;transition:all .25s;position:relative}.upload-zone:hover{border-color:var(--accent);background:var(--accent-dim)}.upload-zone input[type=file]{opacity:0;cursor:pointer;position:absolute;inset:0}.upload-zone-text{color:var(--text-muted);flex-direction:column;align-items:center;gap:.25rem;font-size:.8125rem;display:flex}.upload-zone-icon{width:1.5rem;height:1.5rem;color:var(--text-dim);margin-bottom:.25rem}.text-input-area{background:var(--bg-elevated);border:1px solid var(--border-medium);width:100%;color:var(--text);font-family:var(--font-sans);resize:vertical;border-radius:.75rem;padding:.75rem 1rem;font-size:.875rem;line-height:1.5;transition:border-color .2s,box-shadow .2s}.text-input-area::placeholder{color:var(--text-dim)}.text-input-area:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);outline:none}.btn-group{gap:.5rem;display:flex}.btn-group>*{flex:1}.btn-primary{background:var(--accent);color:#000;font-size:.8125rem;font-weight:700;font-family:var(--font-sans);cursor:pointer;border:none;border-radius:.75rem;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1rem;transition:all .25s cubic-bezier(.32,.72,0,1);display:inline-flex}.btn-primary:hover{box-shadow:0 0 20px var(--accent-dim);transform:translateY(-1px)}.btn-primary:active{transform:scale(.97)translateY(0)}.btn-danger{color:#f87171;font-size:.8125rem;font-weight:600;font-family:var(--font-sans);cursor:pointer;background:#ef44441a;border:1px solid #ef444433;border-radius:.75rem;justify-content:center;align-items:center;padding:.625rem 1rem;transition:all .2s;display:inline-flex}.btn-danger:hover:not(:disabled){background:#ef444433;border-color:#ef444466}.btn-danger:disabled{opacity:.3;cursor:not-allowed}.section-divider{background:var(--border);border:none;height:1px;margin:.25rem 0}.settings-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.select-input{background:var(--bg-elevated);border:1px solid var(--border-medium);width:100%;color:var(--text);font-family:var(--font-sans);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237B8CA8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;border-radius:.75rem;padding:.625rem 2rem .625rem .75rem;font-size:.8125rem;transition:border-color .2s,box-shadow .2s}.select-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);outline:none}.select-input option{background:var(--bg-surface);color:var(--text)}.range-group{flex-direction:column;gap:.375rem;display:flex}.range-header{justify-content:space-between;align-items:center;display:flex}.range-value{font-size:.75rem;font-family:var(--font-mono);color:var(--accent);font-weight:600}input[type=range]{appearance:none;background:var(--border-medium);border-radius:2px;outline:none;width:100%;height:4px;transition:background .2s}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border:2px solid var(--bg);width:16px;height:16px;box-shadow:0 0 8px var(--accent-dim);border-radius:50%;transition:transform .2s,box-shadow .2s}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 16px var(--accent-dim);transform:scale(1.2)}input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:2px solid var(--bg);border-radius:50%;width:16px;height:16px}.toggle-label{cursor:pointer;color:var(--text-secondary);-webkit-user-select:none;user-select:none;align-items:center;gap:.75rem;font-size:.875rem;display:flex}.toggle-label input[type=checkbox]{appearance:none;border:2px solid var(--border-medium);background:var(--bg-elevated);cursor:pointer;border-radius:6px;flex-shrink:0;width:20px;height:20px;transition:all .2s;position:relative}.toggle-label input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}.toggle-label input[type=checkbox]:checked:after{content:"";border:2px solid #000;border-width:0 2px 2px 0;width:6px;height:10px;position:absolute;top:1px;left:5px;transform:rotate(45deg)}.canvas-wrapper{background:var(--bg-elevated);border:1px solid var(--border);border-radius:1.25rem;justify-content:center;align-items:center;min-height:480px;padding:1rem;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 24px #0000004d,inset 0 1px #ffffff08}.grid-overlay{pointer-events:none;opacity:.04;background-image:linear-gradient(#3b82f633 1px,#0000 1px),linear-gradient(90deg,#3b82f633 1px,#0000 1px);background-size:50px 50px;animation:20s linear infinite gridScroll;position:absolute;inset:0}.canvas-inner{background:var(--bg-elevated);border-radius:.75rem;position:relative;overflow:hidden;box-shadow:0 0 40px #00000080}.canvas-inner canvas{max-width:100%;display:block}.tips-footer{color:var(--text-dim);border-top:1px solid var(--border);margin-top:auto;padding-top:1rem;font-size:.6875rem;line-height:1.5}.empty-state{color:var(--text-muted);text-align:center;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:2rem;display:flex;position:absolute;inset:0}.empty-state-icon{width:3rem;height:3rem;color:var(--text-dim);opacity:.5}.empty-state-text{max-width:20rem;font-size:.875rem}@media (width<=1024px){.main-layout{grid-template-columns:1fr;gap:1rem;padding:1rem}.glass-panel{position:static}.canvas-wrapper{min-height:320px}.app-header{padding:.75rem 1rem}.logo-text{font-size:.875rem}.settings-grid{grid-template-columns:1fr}}@media (width<=640px){.main-layout{gap:.75rem;padding:.75rem}.glass-panel{border-radius:1rem;padding:1rem}.btn-group{flex-direction:column}.btn-download span{display:none}}.color-picker-row{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.color-btn{border:2px solid var(--border-medium);cursor:pointer;border-radius:.5rem;justify-content:center;align-items:center;width:2rem;height:2rem;padding:0;transition:all .2s;display:flex;position:relative}.color-btn:hover{border-color:var(--accent);box-shadow:0 0 12px var(--accent-dim);transform:scale(1.15)}.color-btn:active{transform:scale(.95)}.color-check{color:#000;text-shadow:0 0 2px #ffffff80;font-size:.7rem;font-weight:700}.color-picker-wrap{border:2px solid var(--border-medium);cursor:pointer;border-radius:.5rem;flex-shrink:0;width:2rem;height:2rem;transition:border-color .2s;position:relative;overflow:hidden}.color-picker-wrap:hover{border-color:var(--accent)}.color-input-native{cursor:pointer;border:none;width:calc(100% + 8px);height:calc(100% + 8px);padding:0;position:absolute;inset:-4px}.theme-toggle{border:1px solid var(--border);background:var(--bg-surface);width:2.25rem;height:2.25rem;color:var(--text-muted);cursor:pointer;border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:all .2s;display:flex}.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}.theme-toggle:active{transform:scale(.95)}.theme-toggle svg{width:1.1rem;height:1.1rem}.header-actions{align-items:center;gap:.5rem;display:flex}