:root{--bg-primary: #0a0e27;--bg-secondary: #151932;--bg-card: rgba(30, 35, 60, .6);--bg-card-hover: rgba(40, 45, 75, .7);--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--text-primary: #e4e7f5;--text-secondary: #a0a8c9;--text-muted: #6b7299;--border-color: rgba(255, 255, 255, .1);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-md: 0 4px 16px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--shadow-glow: 0 0 20px rgba(102, 126, 234, .3);--font-primary: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Courier New", monospace;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s ease}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{font-family:var(--font-primary);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(102,126,234,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(118,75,162,.1) 0%,transparent 50%);pointer-events:none;z-index:0}#app{position:relative;z-index:1}.header{padding:var(--spacing-xl) var(--spacing-md) var(--spacing-lg);text-align:center}.header-content{max-width:800px;margin:0 auto}.title{font-size:clamp(2rem,5vw,3.5rem);font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-sm);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.emoji{font-size:1em;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.subtitle{font-size:clamp(1rem,2.5vw,1.25rem);color:var(--text-secondary);font-weight:400}.main-content{padding:0 var(--spacing-md) var(--spacing-xl)}.container{max-width:1400px;margin:0 auto;display:grid;gap:var(--spacing-lg);grid-template-columns:1fr}@media (min-width: 1024px){.container{grid-template-columns:2fr 1fr;grid-template-rows:auto 1fr}.upload-section{grid-column:1;grid-row:1}.controls-section{grid-column:2;grid-row:1 / 3}.output-section{grid-column:1;grid-row:2}}.upload-section{animation:fadeInUp .6s ease;min-width:0}.upload-zone{background:var(--bg-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px dashed var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-xl);text-align:center;cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}.upload-zone:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--gradient-primary);opacity:0;transition:opacity var(--transition-base);pointer-events:none}.upload-zone:hover{border-color:#667eea80;background:var(--bg-card-hover);transform:translateY(-2px);box-shadow:var(--shadow-glow)}.upload-zone:hover:before{opacity:.05}.upload-zone.drag-over{border-color:#667eea;background:#667eea1a;transform:scale(1.02)}.upload-zone.drag-over:before{opacity:.1}.upload-content{position:relative;z-index:1}.upload-icon{width:64px;height:64px;margin:0 auto var(--spacing-md);color:var(--text-secondary);transition:all var(--transition-base)}.upload-zone:hover .upload-icon{color:#667eea;transform:translateY(-4px)}.upload-title{font-size:1.5rem;font-weight:600;margin-bottom:var(--spacing-xs);color:var(--text-primary)}.upload-text{font-size:1rem;color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.upload-hint{font-size:.875rem;color:var(--text-muted)}.controls-section{animation:fadeInUp .6s ease .1s backwards;min-width:0}.controls-card{background:var(--bg-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md);position:sticky;top:var(--spacing-md)}.controls-title{font-size:1.25rem;font-weight:600;margin-bottom:var(--spacing-md);color:var(--text-primary)}.control-group{margin-bottom:var(--spacing-md)}.control-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xs);font-size:.875rem;font-weight:500;color:var(--text-secondary)}.control-value{font-family:var(--font-mono);color:#667eea;font-weight:600}.slider{width:100%;height:6px;border-radius:3px;background:var(--bg-secondary);outline:none;-webkit-appearance:none;cursor:pointer;transition:all var(--transition-base)}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gradient-primary);cursor:pointer;box-shadow:0 2px 8px #667eea66;transition:all var(--transition-fast)}.slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 4px 12px #667eea99}.slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gradient-primary);cursor:pointer;border:none;box-shadow:0 2px 8px #667eea66;transition:all var(--transition-fast)}.slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 4px 12px #667eea99}.select{width:100%;padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-primary);font-size:.875rem;cursor:pointer;transition:all var(--transition-base);outline:none}.select:hover{border-color:#667eea80}.select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.checkbox-label{display:flex;align-items:center;gap:var(--spacing-xs);cursor:pointer;font-size:.875rem;color:var(--text-secondary);-webkit-user-select:none;user-select:none}.checkbox{width:18px;height:18px;cursor:pointer;accent-color:#667eea}.button-group{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-lg)}.btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--radius-sm);font-family:var(--font-primary);font-size:.875rem;font-weight:600;cursor:pointer;transition:all var(--transition-base);outline:none;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:active:before{width:300px;height:300px}.btn-icon{width:18px;height:18px;position:relative;z-index:1}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--bg-card-hover);border-color:#667eea80;transform:translateY(-2px)}.btn-secondary:active{transform:translateY(0)}.output-section{animation:fadeInUp .6s ease .2s backwards;min-width:0}.output-card{background:var(--bg-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md);min-width:0;overflow:hidden}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.output-title{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.output-badge{padding:.25rem .75rem;background:#667eea33;color:#667eea;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.output-container{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:var(--spacing-md);height:calc(100vh - 400px);min-height:400px;max-height:800px;overflow:auto;max-width:100%;box-sizing:border-box}.ascii-output{font-family:var(--font-mono);line-height:1.2;color:var(--text-primary);white-space:pre;overflow-x:auto;margin:0;max-width:100%;display:block;word-break:keep-all}.output-container::-webkit-scrollbar{width:8px;height:8px}.output-container::-webkit-scrollbar-track{background:var(--bg-primary);border-radius:4px}.output-container::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px;transition:background var(--transition-base)}.output-container::-webkit-scrollbar-thumb:hover{background:#667eea80}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.processing{animation:pulse 1.5s ease-in-out infinite}@media (max-width: 768px){.header{padding:var(--spacing-lg) var(--spacing-md)}.title{flex-direction:column;gap:var(--spacing-xs)}.controls-card{position:static}.output-container{height:calc(100vh - 300px);min-height:300px}.button-group{flex-direction:row}.btn{flex:1;font-size:.75rem;padding:var(--spacing-xs) var(--spacing-sm)}}@media (max-width: 480px){.upload-zone{padding:var(--spacing-lg)}.upload-icon{width:48px;height:48px}.upload-title{font-size:1.25rem}.button-group{flex-direction:column}}