:root{--color-brand-50: #eff6ff;--color-brand-100: #dbeafe;--color-brand-500: #3b82f6;--color-brand-600: #2563eb;--color-brand-700: #1d4ed8;--color-brand-900: #1e3a8a;--color-brand-600-shadow: rgba(37, 99, 235, .4);--color-brand-600-shadow-hover: rgba(37, 99, 235, .5);--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-error-light: #fef2f2;--color-error-dark: #b91c1c;--color-error-ring: rgba(239, 68, 68, .15);--color-slate-50: #f8fafc;--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-300: #cbd5e1;--color-slate-400: #94a3b8;--color-slate-500: #64748b;--color-slate-600: #475569;--color-slate-700: #334155;--color-slate-800: #1e293b;--color-slate-900: #0f172a;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", monospace;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--transition-enter: .4s;--stagger-delay: 30ms;--disabled-opacity: .5;--text-11: .6875rem;--text-15: .9375rem;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-2xl: 0 8px 24px rgba(0, 0, 0, .12);--shadow-2xl-elevated: 0 8px 24px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .05);--shadow-2xl-heavy: 0 12px 32px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .08);--shadow-pin: 0 2px 8px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(0, 0, 0, .1);--shadow-pin-hover: 0 4px 12px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(0, 0, 0, .1);--shadow-up-sm: 0 -4px 12px rgba(0, 0, 0, .05);--shadow-pin-selected: 0 4px 16px rgba(0, 0, 0, .5), 0 0 0 3px var(--color-brand-500);--radius-xs: .25rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--swatch-sm: 1rem;--swatch-md: 1.5rem;--swatch-lg: 2.5rem;--icon-sm: 1rem;--icon-2xl: 4rem;--text-2xs: .625rem;--text-xs: .75rem;--text-sm: .8125rem;--text-md: .875rem;--text-base: 1rem;--text-lg: 1.25rem;--text-xl: 1.75rem;--text-2xl: 2rem;--color-checkerboard-bg: #ffffff;--color-checkerboard-square: #e5e7eb;--color-dark-surface: #0f172a;--color-surface: #ffffff;--color-surface-raised: #ffffff;--header-height: 56px;--mobile-preview-bar-height: 72px;--controls-min-width: 320px;--controls-max-width: 50%;--controls-default-width: 33%;--controls-default-width-tablet: 38%;--z-sticky: 10;--z-controls: 20;--z-divider: 30;--z-dropdown: 50;--z-bar: 100;--z-pip: 150;--z-modal: 200;--z-toast: 250;--z-onboarding: 300;--safe-area-bottom: env(safe-area-inset-bottom, 0px)}.z-controls{z-index:var(--z-controls)}.z-dropdown{z-index:var(--z-dropdown)}.z-bar{z-index:var(--z-bar)}.z-modal{z-index:var(--z-modal)}.z-toast{z-index:var(--z-toast)}.z-onboarding{z-index:var(--z-onboarding)}.tooltip{position:relative;cursor:help;display:inline-flex}.tooltip:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:0;padding:var(--space-1) var(--space-2);background:var(--color-slate-800);color:var(--color-slate-50);font-size:var(--text-11);line-height:1.5;border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--transition-fast);z-index:var(--z-dropdown)}.tooltip:hover:after,.tooltip:focus-visible:after{opacity:1}.dark .tooltip:after{background:var(--color-slate-700);color:#fff;border:1px solid var(--color-slate-500)}.slider-reset{padding:1px 3px;color:var(--color-slate-400);border:none;background:none;border-radius:var(--radius-xs);cursor:pointer;transition:color var(--transition-fast);line-height:1}.slider-reset:hover{color:var(--color-brand-600)}*,*:before,*:after{box-sizing:border-box}body{font-family:var(--font-sans);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:2px}.color-swatch{border-radius:var(--radius-md);border:2px solid transparent;cursor:pointer;transition:all var(--transition-fast);position:relative}.color-swatch:hover{transform:scale(1.1)}.color-swatch.selected{border-color:var(--color-brand-600);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--color-brand-600)}.color-swatch:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:2px}.toc-header-chip:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:-2px}.style-card:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:2px}.modal-action-btn:focus-visible,.toast-action:focus-visible,.preset-card:focus-visible,.entry-card:focus-visible,.style-chip:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:2px}.flow-hidden{display:none!important}.flow-entering{animation:flowFadeIn var(--transition-enter) var(--ease-out-expo) forwards}@keyframes flowFadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.preset-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-2) var(--space-3);background:var(--color-surface);border:2px solid var(--color-slate-200);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);font-size:var(--text-xs);font-weight:600;color:var(--color-slate-600)}.preset-card:hover{border-color:var(--color-brand-500);background:var(--color-brand-50)}.preset-card.active{border-color:var(--color-brand-500);background:var(--color-brand-50);color:var(--color-brand-700)}.preset-desc{font-size:var(--text-2xs);font-weight:400;color:var(--color-slate-400)}.preset-card.active .preset-desc{color:var(--color-brand-500)}.entry-card{padding:var(--space-6);background:var(--color-surface);border:2px solid var(--color-slate-200);border-radius:var(--radius-xl);text-align:center;transition:all var(--transition-base);cursor:pointer}.entry-card:hover{border-color:var(--color-brand-500);box-shadow:var(--shadow-lg)}.entry-card-icon{width:3rem;height:3rem;margin:0 auto var(--space-3);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center}.palette-color{position:relative}.palette-color:not(:has(.skeleton)):after{content:"Click to edit";position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);white-space:nowrap;font-size:var(--text-2xs);font-weight:500;color:#fff;background:var(--color-slate-800);padding:2px var(--space-2);border-radius:var(--radius-sm);opacity:0;pointer-events:none;transition:opacity var(--transition-fast);z-index:var(--z-sticky)}.palette-color:not(:has(.skeleton)):hover:after{opacity:1}@keyframes readyGlow{0%,to{box-shadow:0 0 #2563eb66}50%{box-shadow:0 0 0 8px #2563eb00}}.ready-glow{animation:readyGlow 2s ease 3}.celebrate-pop{animation:celebratePop .5s var(--ease-out-expo)}@keyframes celebratePop{0%{opacity:0;transform:scale(.9)}60%{transform:scale(1.02)}to{opacity:1;transform:scale(1)}}.app-layout{display:flex;flex-direction:row;flex:1;overflow:hidden}#app-controls{width:100%;overflow:hidden;background:var(--color-surface)}#preview-panel{display:none;flex:1;min-width:0;background:var(--color-slate-100)}@media (min-width: 768px){.app-main{display:flex;flex:1;overflow:hidden}#app-controls{width:var(--controls-default-width-tablet);min-width:var(--controls-min-width);max-width:var(--controls-max-width);border-right:1px solid var(--color-slate-200);flex-shrink:0}#preview-panel{display:flex}}@media (min-width: 1024px){#app-controls{width:var(--controls-default-width)}}@media (max-width: 767px){#controls-scroll-area{padding-bottom:calc(var(--mobile-preview-bar-height) + var(--space-4))}}@media (min-width: 768px){#controls-scroll-area{padding-bottom:var(--space-8)}}.sticky-actions{position:sticky;bottom:0;background:var(--color-surface-raised);border-top:1px solid var(--color-slate-200);padding:var(--space-4);z-index:var(--z-sticky);padding-bottom:calc(var(--mobile-preview-bar-height) + var(--space-4))}@media (min-width: 768px){.sticky-actions{padding-bottom:var(--space-4)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);min-height:44px;font-size:var(--text-md);font-weight:600;border-radius:var(--radius-lg);border:none;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}button[aria-disabled=true],[role=button][aria-disabled=true],a[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:not-allowed}button[aria-disabled=true]:hover,[role=button][aria-disabled=true]:hover,a[aria-disabled=true]:hover{transform:none!important}.btn-primary{background:var(--color-brand-600);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-brand-700)}.btn-secondary{background:var(--color-slate-100);color:var(--color-slate-700);border:1px solid var(--color-slate-200)}.btn-secondary:hover:not(:disabled){background:var(--color-slate-200)}.btn-ghost{background:transparent;color:var(--color-slate-600)}.btn-ghost:hover:not(:disabled){background:var(--color-slate-100)}.btn:active:not(:disabled){transform:scale(.95);transition-duration:50ms}button:active:not(:disabled):not(.no-press),[role=button]:active:not(:disabled):not(.no-press){transform:scale(.95);transition-duration:50ms}.btn-sm{padding:var(--space-1) var(--space-3);min-height:36px;font-size:var(--text-sm)}.btn-lg{padding:var(--space-3) var(--space-6);min-height:52px;font-size:1rem}.btn-block{width:100%}.input{width:100%;padding:var(--space-2) var(--space-3);min-height:44px;font-size:.875rem;background:var(--color-slate-50);border:1px solid var(--color-slate-200);border-radius:var(--radius-lg);transition:all var(--transition-fast)}.input:focus{outline:none;border-color:var(--color-brand-500);box-shadow:0 0 0 3px var(--color-brand-100)}.input.error{border-color:var(--color-error);background:var(--color-error-light)}.input.error:focus{box-shadow:0 0 0 3px var(--color-error-ring);border-color:var(--color-error)}.input-error{border-color:var(--color-error)!important;background-color:var(--color-error-light)!important}.input-error:focus{box-shadow:0 0 0 3px var(--color-error-ring)!important;border-color:var(--color-error)!important}.error-message{color:var(--color-error);font-size:var(--text-xs);font-weight:400;margin-top:var(--space-1);display:flex;align-items:center;gap:var(--space-1)}.input::placeholder{color:var(--color-slate-400)}.textarea{min-height:100px;resize:vertical}.select{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;padding:var(--space-2) 0;margin:0;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{width:100%;height:6px;background:var(--color-slate-200);border-radius:var(--radius-xs);transition:background var(--transition-fast)}input[type=range]:hover::-webkit-slider-runnable-track{background:var(--color-slate-300)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:22px;width:22px;border-radius:50%;background:var(--color-brand-600);margin-top:-9px;cursor:grab;box-shadow:0 2px 6px var(--color-brand-600-shadow);border:2px solid white;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 3px 10px var(--color-brand-600-shadow-hover)}input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1)}input[type=range]::-moz-range-track{width:100%;height:6px;background:var(--color-slate-200);border-radius:var(--radius-xs);transition:background var(--transition-fast)}input[type=range]::-moz-range-thumb{height:22px;width:22px;border-radius:50%;background:var(--color-brand-600);cursor:grab;border:2px solid white;box-shadow:0 2px 6px var(--color-brand-600-shadow);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}input[type=range]::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 3px 10px var(--color-brand-600-shadow-hover)}input[type=range]:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:4px;border-radius:var(--radius-xs)}.custom-checkbox{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid var(--color-slate-300, #cbd5e1);border-radius:var(--radius-xs);cursor:pointer;transition:all var(--transition-fast);position:relative;flex-shrink:0}.custom-checkbox:hover:not(:disabled){border-color:var(--color-brand-500, #3b82f6);background:var(--color-brand-50, #eff6ff)}.custom-checkbox:checked{background:var(--color-brand-600, #2563eb);border-color:var(--color-brand-600, #2563eb)}.custom-checkbox:checked:after{content:"";position:absolute;left:4px;top:1px;width:6px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox:active:not(:disabled){transform:scale(.9)}.custom-checkbox:focus-visible{outline:2px solid var(--color-brand-500, #3b82f6);outline-offset:2px}.custom-checkbox:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.card{background:var(--color-surface-raised);border:1px solid var(--color-slate-200);border-radius:var(--radius-xl);padding:var(--space-4)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.card-title{font-size:.875rem;font-weight:600;color:var(--color-slate-800)}.content-section{margin-bottom:var(--space-6)}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.section-title{display:flex;align-items:center;gap:var(--space-2);font-size:1rem;font-weight:700;color:var(--color-slate-900)}.section-title i{color:var(--color-brand-600)}.section-divider{height:1px;background:var(--color-slate-200);margin:var(--space-6) 0}.tool-group{background:var(--color-slate-50);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4)}.tool-group-title{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-slate-500);margin-bottom:var(--space-3)}.tool-buttons{display:flex;flex-wrap:wrap;gap:var(--space-2)}.preview-container{display:flex;flex-direction:column;height:100%;background:var(--color-slate-100)}.preview-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:var(--color-surface);border-bottom:1px solid var(--color-slate-200)}.preview-content{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-4);overflow:hidden}.preview-canvas-wrapper{position:relative;max-width:100%;max-height:100%}.preview-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-8);color:var(--color-slate-400);text-align:center}.preview-placeholder i{font-size:var(--icon-2xl);opacity:.5}.palette-grid{display:flex;flex-wrap:wrap;gap:var(--space-2)}.palette-color{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);cursor:pointer;transition:transform var(--transition-fast)}.palette-color:hover,.palette-color:focus-visible{transform:scale(1.05)}.palette-swatch{width:var(--swatch-lg);height:var(--swatch-lg);border-radius:var(--radius-md);border:2px solid white;box-shadow:var(--shadow-sm),0 0 0 1px #0000000d;transition:all var(--transition-fast)}.palette-color.selected .palette-swatch{border-color:var(--color-brand-500);box-shadow:0 0 0 2px var(--color-brand-500)}.palette-color:focus-visible .palette-swatch{box-shadow:0 0 0 2px var(--color-brand-500),0 0 0 4px #3b82f64d}.palette-swatch{position:relative}.palette-color.selected .palette-swatch:after{content:"";position:absolute;inset:0;border-radius:inherit;background:#00000026 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E") center/40% no-repeat}.palette-hex{font-size:var(--text-2xs);font-family:var(--font-mono);color:var(--color-slate-500)}.palette-percent{font-size:var(--text-2xs);color:var(--color-slate-400)}.progress-bar{width:100%;height:8px;background:var(--color-slate-200);border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;background:var(--color-brand-600);border-radius:var(--radius-full);transition:width var(--transition-base)}.loading-spinner{width:24px;height:24px;border:3px solid var(--color-slate-200);border-top-color:var(--color-brand-600);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg,var(--color-slate-100) 25%,var(--color-slate-200) 50%,var(--color-slate-100) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-md)}.skeleton-swatch{width:40px;height:40px;border-radius:var(--radius-md)}.skeleton-text{height:14px;width:60%;border-radius:var(--radius-sm)}.skeleton-bar{height:8px;width:100%;border-radius:var(--radius-full)}@keyframes canvas-flash{0%{opacity:.6}to{opacity:1}}.canvas-flash{animation:canvas-flash .2s ease-out}@keyframes handle-pulse{0%,to{box-shadow:0 2px 8px #00000026}50%{box-shadow:0 2px 8px #00000026,0 0 0 6px #2563eb33}}.comparison-handle-pulse{animation:handle-pulse 2s ease-in-out 3}@keyframes copy-flash{0%{box-shadow:0 0 #22c55e99}50%{box-shadow:0 0 0 6px #22c55e4d}to{box-shadow:0 0 #22c55e00}}.copy-flash{animation:copy-flash .4s ease-out}@media (prefers-reduced-motion: reduce){.skeleton{animation:none;background:var(--color-slate-200)}.canvas-flash,.copy-flash,.comparison-handle-pulse{animation:none}button:active:not(:disabled):not(.no-press),.btn:active:not(:disabled),.custom-checkbox:active:not(:disabled){transform:none}input[type=range]::-webkit-slider-thumb:hover,input[type=range]::-webkit-slider-thumb:active{transform:none}input[type=range]::-moz-range-thumb:hover{transform:none}.palette-color,.processing-complete #vectorize-progress,.processing-complete #favicon-progress,.processing-complete #og-progress{animation:none}}.asset-card{background:var(--color-surface);border:1px solid var(--color-slate-200);border-radius:var(--radius-xl);overflow:hidden}.asset-preview{height:120px;display:flex;align-items:center;justify-content:center;background:var(--color-slate-50);border-bottom:1px solid var(--color-slate-200)}.asset-preview img,.asset-preview svg{max-width:80%;max-height:80%;object-fit:contain}.asset-info{padding:var(--space-3)}.asset-name{font-size:.875rem;font-weight:600;color:var(--color-slate-800);margin-bottom:var(--space-1)}.asset-meta{font-size:var(--text-xs);color:var(--color-slate-500)}.asset-actions{display:flex;gap:var(--space-2);padding:var(--space-3);border-top:1px solid var(--color-slate-100)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-center{text-align:center}.flex-center{display:flex;align-items:center;justify-content:center}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.desktop-only{display:none}@media (min-width: 768px){.desktop-only{display:block}}.mobile-only{display:block}@media (min-width: 768px){.mobile-only{display:none}}.mobile-preview-bar{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--color-surface);border-top:1px solid var(--color-slate-200);padding:var(--space-2) var(--space-3);padding-bottom:calc(var(--space-2) + env(safe-area-inset-bottom,0px));flex-direction:row;align-items:center;gap:var(--space-2);z-index:var(--z-bar);box-shadow:0 -4px 12px -1px #00000014}@media (max-width: 767px){.mobile-preview-bar{display:flex}#preview-panel,#layout-divider{display:none}#app-controls{width:100%!important;min-width:0!important;border-right:none}}@media (min-width: 768px){.mobile-preview-bar{display:none}}@media (max-width: 767px){#toast{top:env(safe-area-inset-top,12px)!important;bottom:auto!important;right:var(--space-3)!important}}.preview-thumb{width:48px;height:48px;border-radius:var(--radius-lg);background:var(--color-slate-100);overflow:hidden;flex-shrink:0;position:relative;border:1px solid var(--color-slate-200)}.preview-thumb-placeholder{position:absolute;inset:0}.preview-thumb-canvas{width:48px;height:48px;display:none;position:absolute;inset:0}.preview-thumb-canvas.visible{display:block}#crop-canvas{cursor:grab}#crop-canvas:active{cursor:grabbing}#crop-zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--brand-500, #6366f1);cursor:pointer}#crop-zoom-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--brand-500, #6366f1);border:none;cursor:pointer}.modal-overlay{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--transition-base),visibility var(--transition-base)}.modal-overlay>div{transform:scale(.95);transition:transform var(--transition-base)}.modal-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.modal-overlay.visible>div{transform:scale(1)}.toast-action{cursor:pointer;background:none;border:none;color:inherit;text-decoration:underline;font:inherit;font-weight:600;margin-left:var(--space-2);padding:0;white-space:nowrap}.toast-action:hover{opacity:.8}.mobile-preview-modal{position:fixed;inset:0;background:var(--color-surface-raised);z-index:var(--z-modal);transform:translateY(100%);transition:transform var(--transition-slow) var(--ease-out-expo);display:flex;flex-direction:column}.mobile-preview-modal.expanded{transform:translateY(0)}.mobile-preview-modal.expanded #modal-preview-content>*{margin:auto;max-width:100%;max-height:100%}.mobile-preview-modal.expanded #modal-preview-content canvas{display:block;object-fit:contain}.mobile-preview-modal.expanded #modal-preview-content [id^=preview-]{position:relative}@media (min-width: 1024px){.mobile-preview-modal{display:none!important}}.modal-header-pill{position:absolute;top:var(--space-3);right:var(--space-3);z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1);background:#0f172a73;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.1)}.modal-pill-btn{width:36px;height:36px;border-radius:var(--radius-full);border:none;background:transparent;color:#ffffffd9;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast)}.modal-pill-btn:hover{background:#ffffff26}.modal-pill-btn:active{transform:scale(.92)}.modal-pill-btn-surface{background:var(--color-slate-100);color:var(--color-slate-600);width:40px;height:40px;border-radius:var(--radius-lg)}.modal-pill-btn-surface:hover{background:var(--color-slate-200)}.modal-bottom-bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom,0px));background:var(--color-surface);border-top:1px solid var(--color-slate-200);flex-shrink:0}.modal-action-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border:none;border-radius:var(--radius-xl);font-size:var(--text-md);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.modal-action-btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.modal-action-primary{background:var(--color-brand-600);color:#fff;box-shadow:0 2px 8px #2563eb40}.modal-action-primary:hover:not(:disabled){background:var(--color-brand-700)}.modal-action-success{background:#16a34a;color:#fff;box-shadow:0 2px 8px #16a34a40}.modal-action-success:hover:not(:disabled){background:#15803d}.modal-presets-menu{position:absolute;bottom:calc(100% + var(--space-2));right:0;left:auto;background:var(--color-surface-raised);border:1px solid var(--color-slate-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-2xl);padding:var(--space-1);min-width:160px;z-index:var(--z-controls)}.modal-preset-option{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);border:none;border-radius:var(--radius-md);background:transparent;color:var(--color-slate-600);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:background var(--transition-fast)}.modal-preset-option:hover{background:var(--color-slate-100)}.modal-preset-option.active{background:var(--color-brand-50);color:var(--color-brand-700)}.mobile-bar-preview-area{display:flex;align-items:center;gap:var(--space-3);flex:1;min-width:0;cursor:pointer}.preview-thumb-expand{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0006;color:#fff;font-size:1.1rem;border-radius:inherit;opacity:0;transition:opacity var(--transition-fast);pointer-events:none}.mobile-bar-preview-area:active .preview-thumb-expand{opacity:1}.mobile-bar-actions{display:flex;gap:var(--space-2);flex-shrink:0}.mobile-action-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-2) var(--space-4);border:none;border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:600;min-height:44px;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.mobile-action-btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.mobile-action-primary{background:var(--color-brand-600);color:#fff}.mobile-action-primary:hover:not(:disabled){background:var(--color-brand-700)}.mobile-action-success{background:#16a34a;color:#fff}.mobile-action-success:hover:not(:disabled){background:#15803d}.auto-process-pill{display:none;position:fixed;top:var(--space-4);left:50%;transform:translate(-50%);z-index:var(--z-modal);background:var(--color-slate-900);color:#fff;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);box-shadow:var(--shadow-2xl-heavy);font-size:.75rem;font-weight:600}.auto-process-pill.visible{display:flex;animation:pillEnter .3s var(--ease-out-expo) forwards}@keyframes pillEnter{0%{opacity:0;transform:translate(-50%) translateY(-12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.auto-process-pill-steps{display:flex;gap:var(--space-3);align-items:center}.auto-process-step{display:flex;align-items:center;gap:var(--space-1);opacity:.4;transition:opacity var(--transition-slow)}.auto-process-step.active{opacity:1}.auto-process-step.complete{opacity:.7;color:var(--color-green-400)}.auto-process-step.skipped{opacity:.4;text-decoration:line-through}.auto-process-step.error{opacity:1;color:var(--color-red-400)}.batch-queue-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);border:1px solid var(--color-slate-200);background:var(--color-white);transition:border-color var(--transition-base)}@media (prefers-color-scheme: dark){.batch-queue-item{border-color:var(--color-slate-700);background:var(--color-slate-800)}}.batch-queue-item.processing{border-color:var(--color-brand-400)}.batch-queue-item.done{border-color:var(--color-green-400)}.batch-queue-item.error{border-color:var(--color-red-400)}.batch-queue-thumb{width:32px;height:32px;border-radius:var(--radius-md);object-fit:contain;background:var(--color-slate-100);flex-shrink:0}@media (prefers-color-scheme: dark){.batch-queue-thumb{background:var(--color-slate-700)}}.pip-preview{display:none;position:fixed;width:120px;height:120px;bottom:calc(var(--mobile-preview-bar-height) + var(--space-3) + var(--safe-area-bottom));right:var(--space-3);z-index:var(--z-pip);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-2xl-elevated);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;will-change:transform}@media (max-width: 767px){.pip-preview.pip-visible{display:block}}@media (min-width: 768px){.pip-preview{display:none!important}}.pip-preview.pip-dragging{cursor:grabbing;transition:none;box-shadow:var(--shadow-2xl-heavy);transform:scale(1.05)}.pip-preview.pip-dismissing{transition:transform .25s var(--ease-out-expo),opacity .25s ease;opacity:0;pointer-events:none}.pip-preview.pip-entering{animation:pipEnter .3s var(--ease-out-expo) forwards}@keyframes pipEnter{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}#pip-canvas{width:100%;height:100%;display:block}.pip-expand-btn{position:absolute;bottom:var(--space-1);right:var(--space-1);width:28px;height:28px;border-radius:var(--radius-full);background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;border:none;display:flex;align-items:center;justify-content:center;font-size:var(--text-md);cursor:pointer;transition:opacity var(--transition-fast)}.pip-expand-btn:active{transform:scale(.9)}.pip-restore-btn{background:var(--color-slate-100);color:var(--color-slate-600)}.pip-restore-btn:hover{background:var(--color-slate-200)}@media (max-width: 767px) and (orientation: landscape){.pip-preview{width:96px;height:96px}}.checkerboard{background-image:linear-gradient(45deg,var(--color-checkerboard-square) 25%,transparent 25%),linear-gradient(-45deg,var(--color-checkerboard-square) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-checkerboard-square) 75%),linear-gradient(-45deg,transparent 75%,var(--color-checkerboard-square) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;background-color:var(--color-checkerboard-bg)}.checkerboard.dark-preview{background-color:#0f172a;background-image:linear-gradient(45deg,#1e293b 25%,transparent 25%),linear-gradient(-45deg,#1e293b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1e293b 75%),linear-gradient(-45deg,transparent 75%,#1e293b 75%)}.checkerboard.dark-preview #preview-placeholder{opacity:.5}.checkerboard.dark-preview #preview-placeholder i,.checkerboard.dark-preview #preview-placeholder p{color:var(--color-slate-400)}.checkerboard-sm{background-image:linear-gradient(45deg,var(--color-checkerboard-square) 25%,transparent 25%),linear-gradient(-45deg,var(--color-checkerboard-square) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-checkerboard-square) 75%),linear-gradient(-45deg,transparent 75%,var(--color-checkerboard-square) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;background-color:var(--color-checkerboard-bg)}.layout-divider{width:6px;cursor:col-resize;background:transparent;position:relative;z-index:var(--z-divider);flex-shrink:0;display:none}@media (min-width: 1024px){.layout-divider{display:block}}.layout-divider:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:2px;height:100%;background:var(--color-slate-200);transition:background var(--transition-fast),width var(--transition-fast)}.layout-divider:hover:before,.layout-divider.dragging:before{width:4px;background:var(--color-brand-500)}.divider-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:20px;pointer-events:none;background-image:radial-gradient(circle,var(--color-slate-300) 1.5px,transparent 1.5px);background-size:4px 7px;background-position:center;background-repeat:repeat-y;transition:background-image var(--transition-fast)}.layout-divider:hover .divider-handle,.layout-divider.dragging .divider-handle{background-image:radial-gradient(circle,var(--color-brand-500) 1.5px,transparent 1.5px)}.app-layout.resizing{user-select:none;cursor:col-resize!important}.app-layout.resizing *{pointer-events:none;cursor:col-resize!important}.style-chip{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:500;background:var(--color-slate-100);border:1px solid var(--color-slate-200);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast)}.style-chip:hover{background:var(--color-slate-200)}.style-chip.active{background:var(--color-brand-600);color:#fff;border-color:var(--color-brand-600)}.ai-variation-item{border:2px solid var(--color-slate-200);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-fast);cursor:pointer}.ai-variation-item img{width:100%;aspect-ratio:1;object-fit:cover}#app-controls .ai-variation-item.selected{border-color:var(--color-brand-500);box-shadow:0 0 0 2px var(--color-brand-500)}.ai-variation-skeleton{cursor:default;pointer-events:none}.copied{color:var(--color-success)!important;transition:color var(--transition-base)}.collapsible-content{max-height:2000px;overflow:visible;transition:max-height var(--transition-slow)}.collapsible.collapsed .collapsible-content{max-height:0;overflow:hidden}.collapsible .chevron{transition:transform var(--transition-fast)}.collapsible.collapsed .chevron{transform:rotate(-90deg)}#dropzone.drag-over{border-color:var(--color-brand-500);background:var(--color-brand-50)}#dropzone.loading{opacity:.7;pointer-events:none}.project-dropdown{position:absolute;top:100%;left:0;right:0;margin-top:var(--space-1);background:var(--color-surface-raised);border:1px solid var(--color-slate-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-8px);transition:all var(--transition-fast);z-index:var(--z-dropdown)}.project-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}.project-list-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);cursor:pointer;transition:background var(--transition-fast)}.project-list-item:hover{background:var(--color-slate-50)}.project-list-item.active{background:var(--color-brand-50)}.project-list-thumb{width:36px;height:36px;border-radius:var(--radius-md);background:var(--color-slate-100);display:flex;align-items:center;justify-content:center;overflow:hidden}.project-list-thumb img{width:100%;height:100%;object-fit:cover}.project-list-empty{padding:var(--space-6) var(--space-4);text-align:center;color:var(--color-slate-400)}.project-list-empty p{margin:0;font-size:.8125rem;font-weight:500;color:var(--color-slate-500)}.project-list-empty .hint{font-size:var(--text-11);font-weight:400;color:var(--color-slate-400);margin-top:var(--space-1)}.bg-transparent-pattern{background-image:linear-gradient(45deg,var(--color-checkerboard-square) 25%,transparent 25%),linear-gradient(-45deg,var(--color-checkerboard-square) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-checkerboard-square) 75%),linear-gradient(-45deg,transparent 75%,var(--color-checkerboard-square) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;background-color:var(--color-checkerboard-bg)}.custom-scroll{scrollbar-width:thin;scrollbar-color:var(--color-slate-300) transparent}.custom-scroll::-webkit-scrollbar{width:6px}.custom-scroll::-webkit-scrollbar-track{background:transparent}.custom-scroll::-webkit-scrollbar-thumb{background:var(--color-slate-300);border-radius:var(--radius-xs)}.custom-scroll::-webkit-scrollbar-thumb:hover{background:var(--color-slate-400)}#color-pins-container{pointer-events:none}.color-pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;z-index:var(--z-sticky)}.color-pin-dot{width:var(--swatch-sm);height:var(--swatch-sm);border-radius:50%;border:2px solid white;box-shadow:var(--shadow-pin);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.color-pin:hover .color-pin-dot,.color-pin:focus-visible .color-pin-dot{transform:scale(1.3);box-shadow:var(--shadow-pin-hover)}.color-pin.selected .color-pin-dot{transform:scale(1.4);box-shadow:var(--shadow-pin-selected)}.color-pin-label{position:absolute;left:50%;top:100%;transform:translate(-50%);margin-top:var(--space-2);padding:var(--space-1) var(--space-2);background:#000c;color:#fff;font-size:var(--text-2xs);font-family:var(--font-mono);border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--transition-fast)}.color-pin:hover .color-pin-label,.color-pin:focus-visible .color-pin-label{opacity:1}.color-pin.selected .color-pin-label{opacity:1;background:var(--color-brand-600)}#canvas-zoom-container{cursor:grab}#canvas-zoom-container.grabbing{cursor:grabbing}#canvas-zoom-container.picker-mode,#canvas-zoom-container.picker-mode.grabbing{cursor:crosshair}.color-context-menu{position:fixed;z-index:var(--z-bar);min-width:180px;background:var(--color-surface-raised);border:1px solid var(--color-slate-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:var(--space-1);animation:pop .15s ease-out}.color-context-menu.hidden{display:none}.color-menu-header{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-slate-100);margin-bottom:var(--space-1)}.color-menu-header.hidden{display:none}.color-menu-swatch{width:var(--swatch-md);height:var(--swatch-md);border-radius:var(--radius-sm);border:2px solid white;box-shadow:0 0 0 1px var(--color-slate-200),var(--shadow-sm)}.color-menu-hex{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;color:var(--color-slate-700)}.color-menu-item{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-2) var(--space-3);border:none;background:transparent;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;color:var(--color-slate-700);cursor:pointer;transition:all var(--transition-fast);text-align:left}.color-menu-item:hover{background:var(--color-slate-50);color:var(--color-slate-900)}.color-menu-item i{font-size:var(--icon-sm);color:var(--color-slate-400)}.color-menu-item:hover i{color:var(--color-slate-600)}.color-menu-item.danger{color:var(--color-error-dark)}.color-menu-item.danger:hover{background:var(--color-error-light);color:var(--color-error-dark)}.color-menu-item.danger i{color:var(--color-error)}.color-menu-item.danger:hover i{color:var(--color-error-dark)}.color-menu-item:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:-2px;background:var(--color-slate-50);color:var(--color-slate-900)}.color-menu-item.danger:focus-visible{outline:2px solid var(--color-error);outline-offset:-2px;background:var(--color-error-light);color:var(--color-error-dark)}.color-menu-divider{height:1px;background:var(--color-slate-100);margin:var(--space-1) 0}#app-controls .tool-btn.picker-active{background:var(--color-brand-50);border-color:var(--color-brand-500);color:var(--color-brand-700);box-shadow:0 0 0 2px var(--color-brand-500)}#app-controls .tool-btn.picker-active i{color:var(--color-brand-600)}.og-preset-color{transition:all var(--transition-fast);box-sizing:border-box}.og-preset-color:hover{transform:scale(1.1)}.og-preset-color.active{box-shadow:0 0 0 2px var(--color-brand-500);transform:scale(1.05)}.og-preset-color[data-color="#000000"].active{box-shadow:0 0 0 2px var(--color-brand-500),0 0 0 4px #fff}#og-zoom-content{transition:opacity var(--transition-fast)}.og-updating{opacity:.5}@media (max-width: 767px){#color-palette-grid{grid-template-columns:repeat(4,1fr);gap:.375rem}.og-controls .og-row{flex-wrap:wrap}.og-controls .og-row>label{width:100%;margin-bottom:.25rem}}#section-ai,#section-edit,#section-process{transition:background var(--transition-base),border-color var(--transition-base)}@media (min-width: 768px){#section-ai,#section-edit,#section-process{position:relative;margin-left:calc(-1 * var(--space-6));padding-left:var(--space-6)}#section-ai:before,#section-edit:before,#section-process:before{content:"";position:absolute;left:0;top:calc(-1 * var(--space-8));bottom:calc(-1 * var(--space-8));width:5px;border-radius:var(--radius-full);background:transparent;pointer-events:none;transition:background-color var(--transition-base)}#section-ai:before{top:0;bottom:0;border-radius:0}#section-ai{margin-top:calc(-1 * var(--space-6));padding-top:var(--space-6);margin-bottom:calc(-1 * var(--space-8));padding-bottom:var(--space-8)}#section-ai:has(#start-over-btn:not(.hidden)):has(#create-chooser.hidden){display:flex;flex-direction:column;justify-content:center;min-height:40px}#section-process:before{bottom:0}#section-ai.active-section{background:linear-gradient(90deg,rgba(168,85,247,.04),transparent 80%)}#section-ai.active-section:before{background:#a855f7}#section-edit.active-section{background:linear-gradient(90deg,rgba(59,130,246,.04),transparent 80%)}#section-edit.active-section:before{background:#3b82f6}#section-process.active-section{background:linear-gradient(90deg,rgba(34,197,94,.04),transparent 80%)}#section-process.active-section:before{background:#22c55e}}@media (max-width: 767px) and (orientation: landscape){:root{--mobile-preview-bar-height: 56px}.mobile-preview-bar{height:56px;padding:0 var(--space-3)}.preview-thumb{width:44px;height:44px}}.style-card:active{transform:scale(.95)}.preset-card:active:not(.active),.entry-card:active,.style-chip:active:not(.active),.color-menu-item:active,.modal-preset-option:active{transform:scale(.97);transition-duration:50ms}.modal-tab-content{transition:opacity var(--transition-fast),transform var(--transition-fast)}.modal-tab-content.tab-entering{opacity:0;transform:translateY(4px)}.modal-tab-content.tab-exiting{opacity:0;transform:translateY(-4px)}#app-controls .style-card.active-style{border-color:var(--color-brand-600);background-color:var(--color-brand-50)}#app-controls .style-card.active-style .style-icon-wrapper{background-color:var(--color-brand-100);color:var(--color-brand-600)}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}#upload-palette .palette-color{animation:fadeSlideUp .2s ease-out backwards}#upload-palette .palette-color:nth-child(1){animation-delay:0ms}#upload-palette .palette-color:nth-child(2){animation-delay:var(--stagger-delay)}#upload-palette .palette-color:nth-child(3){animation-delay:calc(2 * var(--stagger-delay))}#upload-palette .palette-color:nth-child(4){animation-delay:calc(3 * var(--stagger-delay))}#upload-palette .palette-color:nth-child(5){animation-delay:calc(4 * var(--stagger-delay))}#upload-palette .palette-color:nth-child(6){animation-delay:calc(5 * var(--stagger-delay))}#upload-palette .palette-color:nth-child(7){animation-delay:calc(6 * var(--stagger-delay))}#upload-palette .palette-color:nth-child(8){animation-delay:calc(7 * var(--stagger-delay))}@media (prefers-reduced-motion: reduce){#upload-palette .palette-color{animation:none;opacity:1}}@keyframes celebratePulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.processing-complete #vectorize-progress,.processing-complete #favicon-progress,.processing-complete #og-progress{background:var(--color-success);animation:celebratePulse .4s ease-out}#batch-dropzone.drag-over{border-color:var(--color-brand-400);background:var(--color-brand-50)}@media (prefers-color-scheme: dark){:root{--color-slate-50: #0f172a;--color-slate-100: #1e293b;--color-slate-200: #334155;--color-slate-300: #475569;--color-slate-400: #64748b;--color-slate-500: #94a3b8;--color-slate-600: #cbd5e1;--color-slate-700: #e2e8f0;--color-slate-800: #f1f5f9;--color-slate-900: #f8fafc;--color-brand-50: rgba(59, 130, 246, .1);--color-brand-100: rgba(59, 130, 246, .2);--color-surface: #0f172a;--color-surface-raised: #1e293b;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .3);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .4), 0 10px 10px -5px rgba(0, 0, 0, .3);--color-checkerboard-bg: #1e293b;--color-checkerboard-square: #334155}.select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")}.palette-swatch{border-color:var(--color-slate-100)}.color-swatch{border-color:#94a3b84d}.color-swatch.selected{border-color:var(--color-brand-500);box-shadow:0 0 0 2px var(--color-slate-50),0 0 0 4px var(--color-brand-500)}.entry-card{background:var(--color-slate-100);border-color:var(--color-slate-200)}.entry-card:hover{border-color:var(--color-brand-500);box-shadow:0 10px 15px -3px #0000004d}.preset-card{background:var(--color-slate-800);border-color:var(--color-slate-600);color:var(--color-slate-300)}.preset-card:hover{border-color:var(--color-brand-500);background:#3b82f61a}.preset-card.active{border-color:var(--color-brand-500);background:#3b82f626;color:#dbeafe}.preset-card.active .preset-desc{color:#93c5fd}.og-preset-color[data-color="#000000"].active{box-shadow:0 0 0 2px var(--color-brand-500),0 0 0 4px var(--color-slate-100)}}.back-nav-btn{display:inline-flex;align-items:center;gap:4px;padding:var(--space-1) 0;background:none;border:none;cursor:pointer;font-size:.75rem;font-weight:500;color:var(--color-slate-400);transition:color var(--transition-fast)}.back-nav-btn:hover{color:var(--color-brand-600)}#step-indicator{display:none}@media (max-width: 767px){#step-indicator{display:block}}@media (min-width: 768px){.back-nav-btn{display:none}}@keyframes unsavedPulse{0%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.unsaved-pulse{animation:unsavedPulse .4s ease-out}.process-progress-transition{transition:width var(--transition-slow)}#picker-banner{transition:opacity var(--transition-base),transform var(--transition-base)}.picker-banner-enter{opacity:0;transform:translate(-50%,-8px)}.picker-banner-active{opacity:1;transform:translate(-50%);pointer-events:auto}@keyframes previewModeFade{0%{opacity:0}to{opacity:1}}.preview-mode-fade{animation:previewModeFade .2s ease-out}@media (prefers-reduced-motion: reduce){.unsaved-pulse{animation:none}.process-progress-transition,#picker-banner{transition:none}.preview-mode-fade{animation:none}}.onboarding-overlay{position:fixed;inset:0;z-index:var(--z-onboarding);display:flex;align-items:center;justify-content:center;background:#0f172a80;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity var(--transition-slow)}.onboarding-overlay.visible{opacity:1}.onboarding-card{background:#fffffff7;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl),0 0 0 1px #0000000d;padding:var(--space-10) var(--space-8);max-width:420px;width:90vw;text-align:center;transform:scale(.95);opacity:0;transition:transform .4s var(--ease-out-expo),opacity .4s var(--ease-out-expo)}.onboarding-overlay.visible .onboarding-card{transform:scale(1);opacity:1}.onboarding-icon{width:64px;height:64px;margin:0 auto var(--space-4);background:var(--color-brand-50);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--color-brand-600)}.onboarding-title{font-family:var(--font-sans);font-size:1.5rem;font-weight:700;color:var(--color-slate-900);margin:0 0 var(--space-2);line-height:1.2}.onboarding-subtitle{font-family:var(--font-sans);font-size:var(--text-15);color:var(--color-slate-500);margin:0 0 var(--space-6);line-height:1.5}.onboarding-actions{display:flex;gap:var(--space-3);justify-content:center;margin-bottom:var(--space-4)}.onboarding-btn-primary{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--color-brand-600);color:#fff;font-family:var(--font-sans);font-weight:600;font-size:var(--text-md);border-radius:var(--radius-lg);border:none;cursor:pointer;box-shadow:0 2px 8px var(--color-brand-600-shadow);transition:background var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}.onboarding-btn-primary:hover{background:var(--color-brand-700);box-shadow:0 4px 12px var(--color-brand-600-shadow-hover);transform:translateY(-1px)}.onboarding-btn-primary:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:2px}.onboarding-btn-secondary{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:transparent;color:var(--color-brand-600);font-family:var(--font-sans);font-weight:600;font-size:var(--text-md);border-radius:var(--radius-lg);border:1.5px solid var(--color-brand-200);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}.onboarding-btn-secondary:hover{background:var(--color-brand-50);border-color:var(--color-brand-500);transform:translateY(-1px)}.onboarding-btn-secondary:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:2px}.onboarding-skip{background:none;border:none;color:var(--color-slate-400);font-family:var(--font-sans);font-size:var(--text-sm);cursor:pointer;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);transition:color var(--transition-fast)}.onboarding-skip:hover{color:var(--color-slate-600)}.onboarding-skip:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:2px}.onboarding-hint{position:fixed;z-index:var(--z-onboarding);background:#fffffff7;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg),0 0 0 1px #0000000d;padding:var(--space-3) var(--space-4);max-width:280px;display:flex;align-items:flex-start;gap:var(--space-2);animation:hintAppear .35s var(--ease-out-expo) forwards}.onboarding-hint-arrow{position:absolute;width:12px;height:12px;background:#fffffff7;transform:rotate(45deg)}.onboarding-hint[data-arrow=up] .onboarding-hint-arrow{top:-6px;left:24px;box-shadow:-1px -1px #0000000d}.onboarding-hint[data-arrow=down] .onboarding-hint-arrow{bottom:-6px;left:24px;box-shadow:1px 1px #0000000d}.onboarding-hint-text{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-slate-700);line-height:1.5;flex:1;margin:0}.onboarding-hint-dismiss{flex-shrink:0;background:none;border:none;color:var(--color-slate-400);cursor:pointer;padding:2px;font-size:var(--text-md);border-radius:var(--radius-xs);transition:color var(--transition-fast)}.onboarding-hint-dismiss:hover{color:var(--color-slate-600)}.onboarding-hint-dismiss:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:1px}@keyframes hintAppear{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.onboarding-sample-badge{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);margin-top:var(--space-2);background:var(--color-brand-50);border:1px solid var(--color-brand-100);border-radius:var(--radius-lg);font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-brand-700);animation:hintAppear .35s var(--ease-out-expo) forwards}.onboarding-sample-badge button{background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:var(--text-sm);padding:0;border-radius:var(--radius-xs)}.onboarding-sample-badge button:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:1px}.onboarding-badge-upload{color:var(--color-brand-600);font-weight:600;text-decoration:underline;text-underline-offset:2px}.onboarding-badge-upload:hover{color:var(--color-brand-700)}.onboarding-badge-dismiss{color:var(--color-slate-400);margin-left:auto}.onboarding-badge-dismiss:hover{color:var(--color-slate-600)}@media (prefers-color-scheme: dark){.onboarding-overlay{background:#0009}.onboarding-card{background:#1e293bf7;box-shadow:var(--shadow-xl),0 0 0 1px #ffffff0f}.onboarding-icon{background:#2563eb26}.onboarding-title{color:var(--color-slate-100)}.onboarding-subtitle{color:var(--color-slate-400)}.onboarding-btn-secondary{color:var(--color-brand-300);border-color:var(--color-slate-600)}.onboarding-btn-secondary:hover{background:#2563eb1a;border-color:var(--color-brand-500)}.onboarding-skip{color:var(--color-slate-500)}.onboarding-skip:hover{color:var(--color-slate-300)}.onboarding-hint{background:#1e293bf7;box-shadow:var(--shadow-lg),0 0 0 1px #ffffff0f}.onboarding-hint-arrow{background:#1e293bf7}.onboarding-hint-text{color:var(--color-slate-200)}.onboarding-hint-dismiss{color:var(--color-slate-500)}.onboarding-hint-dismiss:hover{color:var(--color-slate-300)}.onboarding-sample-badge{background:#2563eb1a;border-color:#2563eb33;color:var(--color-brand-300)}.onboarding-badge-upload{color:var(--color-brand-400)}.onboarding-badge-upload:hover{color:var(--color-brand-300)}}@media (max-width: 767px){.onboarding-actions{flex-direction:column}.onboarding-btn-primary,.onboarding-btn-secondary{width:100%;justify-content:center}.onboarding-hint{max-width:calc(100vw - 24px)}}@media (prefers-reduced-motion: reduce){.onboarding-overlay{transition:none}.onboarding-card{transition:none;transform:none;opacity:1}.onboarding-hint,.onboarding-sample-badge{animation:none;opacity:1}}