:root{--color-parchment: #f5f0eb;--color-ivory: #faf9f5;--color-sand: #e8e6dc;--color-sand-hover: #dddacf;--color-sand-active: #d2cec2;--color-ink-blue: #1B365D;--color-ink-blue-hover: #152a4a;--color-ink-blue-active: #0f1f37;--color-brand-light: #2D5A8A;--color-brand-light-hover: #244a72;--color-text-primary: #141413;--color-text-secondary: #4d4c48;--color-text-olive: #5e5d59;--color-text-muted: #87867f;--color-border-cream: #e8e5da;--color-border-warm: #e0ddd2;--color-ring-warm: #d1cfc5;--color-error: #b53333;--color-error-bg: #fef2f2;--color-error-hover: #9a2b2b;--color-success: #2e7d32;--color-success-bg: #f0faf0;--color-focus: #3898ec;--color-warning: #a68a1e;--color-warning-bg: #fefae8;--color-white: #ffffff;--color-black: #000000;--color-overlay: rgba(0, 0, 0, .4);--color-dropzone-border: #b5b3a8;--color-dropzone-border-hover: #1B365D;--color-dropzone-bg-hover: rgba(27, 54, 93, .04);--color-spinner: #1B365D;--color-spinner-track: rgba(27, 54, 93, .12);--color-toggle-bg: #d1cfc5;--color-toggle-bg-active: #1B365D;--color-toggle-knob: #ffffff;--color-range-track: #e0ddd2;--color-range-fill: #1B365D;--color-range-thumb: #1B365D;--color-range-thumb-hover: #2D5A8A;--font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-mono: "SF Mono", "Cascadia Code", "Fira Code", "Consolas", monospace;--font-size-xs: .75rem;--font-size-sm: .8125rem;--font-size-base: .875rem;--font-size-md: .9375rem;--font-size-lg: 1.0625rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-10: 2.5rem;--spacing-12: 3rem;--spacing-16: 4rem;--radius-sm: 4px;--radius-default: 8px;--radius-md: 10px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--shadow-whisper: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);--shadow-soft: 0 2px 8px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .04);--shadow-elevated: 0 4px 16px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .04);--shadow-dropzone-hover: 0 0 0 3px rgba(27, 54, 93, .1);--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--z-dropzone: 1;--z-header: 10;--z-dropdown: 20;--z-modal: 30;--z-toast: 40;--z-spinner-overlay: 50;--container-max-width: 1200px;--header-height: 56px;--tool-panel-width: 360px;--gap-main: 24px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-parchment);min-height:100vh;overflow-x:hidden}img,svg,video,canvas{display:block;max-width:100%;height:auto}a{color:var(--color-brand-light);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-ink-blue)}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none}input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-ring-warm);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.app{display:flex;flex-direction:column;min-height:100vh}.app-container{max-width:var(--container-max-width);width:100%;margin:0 auto;padding:0 var(--spacing-6)}.app-main{flex:1;display:flex;gap:var(--gap-main);padding:var(--spacing-6) 0 var(--spacing-12);width:100%;max-width:var(--container-max-width);margin:0 auto;padding-left:var(--spacing-6);padding-right:var(--spacing-6)}.app-workspace{display:flex;gap:var(--gap-main);width:100%;margin-top:var(--spacing-6)}.app-sidebar{width:var(--tool-panel-width);flex-shrink:0}.app-preview-area{flex:1;min-width:0}.app-header{position:sticky;top:0;z-index:var(--z-header);display:flex;align-items:center;height:var(--header-height);background-color:var(--color-ivory);border-bottom:1px solid var(--color-border-cream);box-shadow:var(--shadow-whisper)}.app-header-inner{display:flex;align-items:center;justify-content:center;flex-direction:column;max-width:var(--container-max-width);width:100%;margin:0 auto;padding:0 var(--spacing-6);gap:var(--spacing-1)}.app-logo{display:flex;align-items:center;gap:var(--spacing-3);-webkit-user-select:none;user-select:none}.app-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-ink-blue)}.app-subtitle{font-size:var(--font-size-xs);color:var(--color-text-muted);letter-spacing:.03em}.dropzone-wrapper{width:100%}.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:240px;padding:var(--spacing-10) var(--spacing-6);border:2px dashed var(--color-dropzone-border);border-radius:var(--radius-lg);background-color:var(--color-ivory);cursor:pointer;transition:all var(--transition-base);z-index:var(--z-dropzone)}.dropzone:hover{border-color:var(--color-dropzone-border-hover);background-color:var(--color-dropzone-bg-hover);box-shadow:var(--shadow-dropzone-hover)}.dropzone-active{border-color:var(--color-dropzone-border-hover);background-color:var(--color-dropzone-bg-hover);box-shadow:var(--shadow-dropzone-hover);border-style:solid}.dropzone-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.dropzone-icon{width:48px;height:48px;margin-bottom:var(--spacing-4);color:var(--color-text-muted);transition:color var(--transition-base)}.dropzone:hover .dropzone-icon,.dropzone-active .dropzone-icon{color:var(--color-ink-blue)}.dropzone-text{font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);margin-bottom:var(--spacing-2);text-align:center}.dropzone-hint{font-size:var(--font-size-sm);color:var(--color-text-muted);text-align:center}.dropzone-input{display:none}.tool-panel{display:flex;flex-direction:column;gap:var(--spacing-4)}.tool-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-1)}.tool-panel-title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.tool-section{background-color:var(--color-ivory);border:1px solid var(--color-border-cream);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-whisper);transition:box-shadow var(--transition-base)}.tool-section:hover{box-shadow:var(--shadow-soft)}.tool-section-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--spacing-3) var(--spacing-4);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--transition-fast);text-align:left}.tool-section-header:hover{background-color:var(--color-sand)}.tool-section-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);text-transform:uppercase;letter-spacing:.04em}.tool-section-arrow{width:16px;height:16px;color:var(--color-text-muted);transition:transform var(--transition-base);flex-shrink:0}.tool-section-arrow.open{transform:rotate(180deg)}.tool-section-body{padding:var(--spacing-4);border-top:1px solid var(--color-border-cream);display:flex;flex-direction:column;gap:var(--spacing-3)}.tool-field{display:flex;flex-direction:column;gap:var(--spacing-1)}.tool-field-row{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-2)}.tool-field-row .tool-field{flex:1;min-width:0}.tool-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.tool-value{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-olive);font-variant-numeric:tabular-nums;min-width:2.5em;text-align:right}.tool-input{width:100%;padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text-primary);background-color:var(--color-white);border:1px solid var(--color-border-warm);border-radius:var(--radius-default);outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.tool-input::placeholder{color:var(--color-text-muted)}.tool-input:hover{border-color:var(--color-ring-warm)}.tool-input:focus{border-color:var(--color-focus);box-shadow:0 0 0 3px #3898ec26}.tool-field input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:var(--color-range-track);border-radius:var(--radius-full);outline:none;cursor:pointer;margin:var(--spacing-1) 0}.tool-field input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;background:var(--color-range-track);border-radius:var(--radius-full)}.tool-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--color-range-thumb);border-radius:50%;cursor:pointer;margin-top:-7px;box-shadow:0 1px 4px #00000026;transition:background var(--transition-fast),transform var(--transition-fast)}.tool-field input[type=range]::-webkit-slider-thumb:hover{background:var(--color-range-thumb-hover);transform:scale(1.1)}.tool-field input[type=range]::-moz-range-track{width:100%;height:4px;background:var(--color-range-track);border-radius:var(--radius-full);border:none}.tool-field input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--color-range-thumb);border-radius:50%;border:none;cursor:pointer;box-shadow:0 1px 4px #00000026;transition:background var(--transition-fast),transform var(--transition-fast)}.tool-field input[type=range]::-moz-range-thumb:hover{background:var(--color-range-thumb-hover);transform:scale(1.1)}.tool-field input[type=range]:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.tool-range-labels{display:flex;justify-content:space-between;font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--spacing-1)}.tool-color{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:40px;height:36px;padding:2px;border:1px solid var(--color-border-warm);border-radius:var(--radius-default);background:var(--color-white);cursor:pointer;flex-shrink:0}.tool-color::-webkit-color-swatch-wrapper{padding:2px}.tool-color::-webkit-color-swatch{border:1px solid var(--color-border-cream);border-radius:var(--radius-sm)}.tool-color::-moz-color-swatch{border:1px solid var(--color-border-cream);border-radius:var(--radius-sm)}.tool-color:focus-visible{border-color:var(--color-focus);box-shadow:0 0 0 3px #3898ec26;outline:none}.tool-select{width:100%;padding:var(--spacing-2) var(--spacing-3);padding-right:var(--spacing-8);font-size:var(--font-size-sm);color:var(--color-text-primary);background-color:var(--color-white);background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%234d4c48' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");background-repeat:no-repeat;background-position:right 10px center;border:1px solid var(--color-border-warm);border-radius:var(--radius-default);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.tool-select:hover{border-color:var(--color-ring-warm)}.tool-select:focus{border-color:var(--color-focus);box-shadow:0 0 0 3px #3898ec26}.tool-radio-group{display:flex;flex-wrap:wrap;gap:var(--spacing-1)}.tool-radio-btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);background-color:var(--color-white);border:1px solid var(--color-border-warm);border-radius:var(--radius-default);cursor:pointer;transition:all var(--transition-fast)}.tool-radio-btn:hover{border-color:var(--color-brand-light);color:var(--color-ink-blue)}.tool-radio-btn.active{background-color:var(--color-ink-blue);color:var(--color-white);border-color:var(--color-ink-blue)}.tool-checkbox-row{display:flex;align-items:center;gap:var(--spacing-4);margin-top:var(--spacing-1)}.tool-checkbox{display:inline-flex;align-items:center;gap:var(--spacing-2);font-size:var(--font-size-sm);color:var(--color-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.tool-checkbox input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-ink-blue);cursor:pointer}.tool-logo-preview{display:flex;align-items:center;gap:var(--spacing-3)}.tool-logo-img{width:48px;height:48px;object-fit:cover;border-radius:var(--radius-default);border:1px solid var(--color-border-cream);flex-shrink:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);border-radius:var(--radius-sm);transition:all var(--transition-fast);white-space:nowrap;text-decoration:none}.btn-primary{background-color:var(--color-ink-blue);color:var(--color-white);border:1px solid var(--color-ink-blue)}.btn-primary:hover{background-color:var(--color-ink-blue-hover);border-color:var(--color-ink-blue-hover)}.btn-primary:active{background-color:var(--color-ink-blue-active);border-color:var(--color-ink-blue-active)}.btn-primary:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.btn-primary:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-secondary{background-color:var(--color-sand);color:var(--color-text-primary);border:1px solid var(--color-border-cream)}.btn-secondary:hover{background-color:var(--color-sand-hover)}.btn-secondary:active{background-color:var(--color-sand-active)}.btn-secondary:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.btn-secondary:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-ghost{background-color:transparent;color:var(--color-text-secondary);border:1px solid transparent}.btn-ghost:hover{background-color:var(--color-sand);color:var(--color-text-primary)}.btn-ghost:active{background-color:var(--color-sand-active)}.btn-ghost:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.btn-ghost:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.btn-sm{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-xs)}.preview-panel{display:flex;flex-direction:column;gap:var(--spacing-4)}.preview-empty{display:flex;align-items:center;justify-content:center;min-height:300px;background-color:var(--color-ivory);border:1px solid var(--color-border-cream);border-radius:var(--radius-lg);box-shadow:var(--shadow-whisper)}.preview-placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-3);color:var(--color-text-muted);text-align:center}.preview-placeholder p{font-size:var(--font-size-sm);color:var(--color-text-muted)}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-4);background-color:var(--color-ivory);border:1px solid var(--color-border-cream);border-radius:var(--radius-lg);box-shadow:var(--shadow-whisper)}.preview-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);text-transform:uppercase;letter-spacing:.04em}.preview-content{display:flex;flex-direction:column;gap:var(--spacing-4);position:relative}.preview-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-3);background-color:#faf9f5cc;border-radius:inherit;z-index:var(--z-spinner-overlay)}.preview-overlay p{font-size:var(--font-size-sm);color:var(--color-text-muted)}.preview-compare{display:flex;align-items:flex-start;gap:var(--spacing-3)}.preview-card{flex:1;min-width:0;background-color:var(--color-ivory);border:1px solid var(--color-border-cream);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-whisper)}.preview-card-title{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.04em;padding:var(--spacing-2) var(--spacing-4);border-bottom:1px solid var(--color-border-cream);background-color:var(--color-ivory)}.preview-image{max-width:100%;max-height:500px;width:auto;height:auto;object-fit:contain;display:block;background-color:var(--color-parchment);background-image:radial-gradient(circle,var(--color-border-cream) 1px,transparent 1px);background-size:20px 20px}.preview-meta{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-xs);color:var(--color-text-muted);border-top:1px solid var(--color-border-cream);flex-wrap:wrap}.preview-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-top:var(--spacing-8);min-width:32px}.spinner{width:32px;height:32px;border:3px solid var(--color-spinner-track);border-top-color:var(--color-spinner);border-radius:50%;animation:spinner-rotate .7s linear infinite}@keyframes spinner-rotate{to{transform:rotate(360deg)}}.hidden{display:none}@media (max-width: 1024px){:root{--tool-panel-width: 320px;--gap-main: 20px}.app-main,.app-header-inner,.app-container{padding-left:var(--spacing-4);padding-right:var(--spacing-4)}}@media (max-width: 768px){:root{--header-height: 48px;--tool-panel-width: 100%;--gap-main: 16px}.app-main{flex-direction:column;padding:var(--spacing-4) var(--spacing-3) var(--spacing-8)}.app-workspace{flex-direction:column}.app-sidebar,.app-preview-area{width:100%}.dropzone{min-height:180px;padding:var(--spacing-6) var(--spacing-4)}.dropzone-icon{width:36px;height:36px}.preview-image{max-height:300px}.preview-compare{flex-direction:column}.preview-arrow{transform:rotate(90deg);padding-top:0;align-self:center}.preview-meta{flex-direction:column;align-items:flex-start;gap:var(--spacing-1)}.app-logo{gap:var(--spacing-2)}.app-title{font-size:var(--font-size-base)}}@media (max-width: 480px){.app-main{padding:var(--spacing-3) var(--spacing-2) var(--spacing-6)}.dropzone{min-height:140px;padding:var(--spacing-4) var(--spacing-3)}.dropzone-text{font-size:var(--font-size-sm)}.preview-image{max-height:220px}.preview-toolbar{flex-direction:column;align-items:flex-start;gap:var(--spacing-2)}.tool-section-header{padding:var(--spacing-2) var(--spacing-3)}.tool-section-body{padding:var(--spacing-2)}.tool-radio-group{gap:var(--spacing-1)}.tool-radio-btn{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.spinner{animation:none;border-color:var(--color-spinner-track)}.tool-section-arrow.open{transform:none}}@media print{.app-header,.app-sidebar,.tool-panel{display:none!important}.app-main{flex-direction:column;gap:0;padding:0}.app-workspace{flex-direction:column}.preview-card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}}