:root{--bg: #ffffff;--border: #000000;--text-primary: #000000;--text-secondary: #666666;--text-tertiary: #999999;--text-inverse: #ffffff;--error: #990000;--success: #006633;--warning: #cc6600;--dark-bg: #0a0a0a;--dark-border: #333333;--dark-text-primary: #ffffff;--dark-text-secondary: #a0a0a0;--dark-text-tertiary: #666666;--dark-text-inverse: #0a0a0a;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 32px;--space-xl: 64px;--space-2xl: 96px;--space-3xl: 128px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-serif: "Source Serif 4", "Times New Roman", serif;--font-mono: "SF Mono", "Fira Code", monospace;--duration-fast: .4s;--duration-normal: .8s;--ease-out: cubic-bezier(.16, 1, .3, 1)}[data-theme=dark]{--bg: var(--dark-bg);--border: var(--dark-border);--text-primary: var(--dark-text-primary);--text-secondary: var(--dark-text-secondary);--text-tertiary: var(--dark-text-tertiary);--text-inverse: var(--dark-text-inverse)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body{font-family:var(--font-sans);color:var(--text-primary);background:var(--bg);line-height:1.5;min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}@media(min-width:1024px){.app{flex-direction:row}.app-header{width:25vw;min-width:300px;height:100vh;position:sticky;top:0;display:flex;flex-direction:column;justify-content:space-between;padding:var(--space-3xl) var(--space-2xl);border-right:1px solid var(--border)}.app-main{flex:1;padding:var(--space-3xl) var(--space-3xl);max-width:1400px;margin:0 auto}}@media(max-width:1023px){.app-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:100}.app-main{padding:var(--space-2xl) var(--space-lg)}}.app-logo-text{font-family:var(--font-serif);font-size:48px;font-weight:300;letter-spacing:-3px;line-height:.9}.app-logo-text span{display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--text-secondary);margin-top:var(--space-md)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:16px 32px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:2px;border:1px solid var(--text-primary);background:transparent;color:var(--text-primary);cursor:pointer;position:relative;overflow:hidden;transition:color var(--duration-fast) var(--ease-out);text-decoration:none}.btn:before{content:"";position:absolute;inset:0;background:var(--text-primary);transform:scaleY(0);transform-origin:bottom;transition:transform var(--duration-fast) var(--ease-out);z-index:-1}.btn:hover:before{transform:scaleY(1)}.btn:hover{color:var(--text-inverse)}.btn:disabled{opacity:.3;pointer-events:none}.btn-primary{background:var(--text-primary);color:var(--text-inverse)}.btn-primary:before{background:var(--bg)}.btn-primary:hover{color:var(--text-primary)}.btn-secondary{border:none;border-bottom:1px solid var(--text-primary);padding:8px 0}.btn-secondary:before{display:none}.btn-secondary:hover{color:var(--text-secondary);border-color:transparent}.btn-ghost{border:none;padding:8px 0}.btn-ghost:before{display:none}.btn-ghost:hover{opacity:.5;color:var(--text-primary)}.btn-lg{padding:24px 48px;font-size:12px}.btn-sm{padding:12px 24px}.upload-zone{border:1px solid var(--border);padding:var(--space-3xl) var(--space-2xl);text-align:left;cursor:pointer;transition:all var(--duration-normal) var(--ease-out);background:transparent;position:relative}.upload-zone:hover,.upload-zone--active{background:var(--text-primary)}.upload-zone:hover .upload-zone-title,.upload-zone:hover .upload-zone-subtitle,.upload-zone--active .upload-zone-title,.upload-zone--active .upload-zone-subtitle{color:var(--text-inverse)}.upload-zone-title{font-family:var(--font-serif);font-size:40px;font-weight:300;color:var(--text-primary);letter-spacing:-1px;margin-bottom:var(--space-sm);transition:color var(--duration-normal) var(--ease-out)}.upload-zone-subtitle{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);transition:color var(--duration-normal) var(--ease-out)}.file-info{display:flex;align-items:flex-end;justify-content:space-between;padding:var(--space-xl) 0;border-bottom:1px solid var(--border)}.file-info--error{border-bottom-color:var(--error)}.file-info-name{font-family:var(--font-serif);font-size:32px;font-weight:300;color:var(--text-primary);letter-spacing:-1px}.file-info-size{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-top:var(--space-sm)}.file-info-remove{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;border:none;background:none;color:var(--error);cursor:pointer;padding:var(--space-sm) 0}.file-info-remove:hover{text-decoration:line-through}.processing{padding:var(--space-3xl) 0}.processing-title{font-family:var(--font-serif);font-size:80px;font-weight:300;letter-spacing:-3px;line-height:1;margin-bottom:var(--space-lg);animation:breathe 3s infinite ease-in-out}@keyframes breathe{0%,to{opacity:1}50%{opacity:.2}}.processing-step{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--text-secondary);border-left:1px solid var(--border);padding-left:var(--space-md)}.form-label{display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--text-primary);margin-bottom:var(--space-md)}.form-input{width:100%;padding:var(--space-md) 0;font-family:var(--font-sans);font-size:24px;font-weight:300;color:var(--text-primary);background:transparent;border:none;border-bottom:1px solid var(--border);outline:none;transition:border-color var(--duration-fast)}.form-input:focus{border-bottom-width:2px}.form-group,.prompt-section{margin-bottom:var(--space-2xl)}.prompt-editor{width:100%;min-height:150px;padding:var(--space-lg);font-family:var(--font-serif);font-size:24px;font-weight:300;color:var(--text-primary);background:transparent;border:1px solid var(--border);resize:vertical;outline:none;line-height:1.4;transition:background var(--duration-normal)}.prompt-editor:focus{background:var(--text-primary);color:var(--text-inverse)}.prompt-editor:focus::placeholder{color:#ffffff4d}.preview-container{display:flex;flex-direction:column;gap:var(--space-xl)}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:var(--space-md)}.preview-tabs{display:flex;gap:var(--space-lg)}.preview-tab{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--text-secondary);background:none;border:none;padding:var(--space-sm) 0;cursor:pointer;position:relative}.preview-tab:after{content:"";position:absolute;bottom:-17px;left:0;right:0;height:1px;background:var(--text-primary);transform:scaleX(0);transition:transform var(--duration-fast) var(--ease-out)}.preview-tab--active{color:var(--text-primary)}.preview-tab--active:after{transform:scaleX(1)}.preview-rendered{font-family:var(--font-serif);font-size:20px;line-height:1.8;color:var(--text-primary);padding:var(--space-xl) 0}.preview-rendered h1,.preview-rendered h2{font-size:48px;font-weight:300;letter-spacing:-2px;line-height:1.1;margin:var(--space-2xl) 0 var(--space-md)}.preview-rendered h3{font-family:var(--font-sans);font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin:var(--space-xl) 0 var(--space-sm)}.preview-rendered p,.preview-rendered ul{margin-bottom:var(--space-lg);max-width:800px}.preview-code{background:#f4f4f4;padding:var(--space-xl);border:1px solid var(--border)}.preview-code pre{font-family:var(--font-mono);font-size:13px;color:var(--text-primary);white-space:pre-wrap;word-break:break-word}.drawer-overlay{position:fixed;inset:0;background:#fffffff2;z-index:200}.drawer{position:fixed;top:0;right:0;bottom:0;width:450px;max-width:100vw;background:var(--bg);border-left:1px solid var(--border);z-index:201;display:flex;flex-direction:column}.drawer-header{padding:var(--space-2xl) var(--space-2xl) var(--space-xl);display:flex;justify-content:space-between;align-items:center}.drawer-title{font-family:var(--font-serif);font-size:40px;font-weight:300;letter-spacing:-1px}.drawer-close{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;border:none;background:none;cursor:pointer;color:var(--text-primary)}.drawer-body{padding:0 var(--space-2xl) var(--space-2xl)}.export-panel{margin-top:var(--space-3xl);border-top:1px solid var(--border)}.export-card{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xl) 0;border-bottom:1px solid var(--border);background:transparent;border-left:none;border-right:none;border-top:none;width:100%;cursor:pointer;text-align:left}.export-card:hover .export-card-title{transform:translate(var(--space-md))}.export-card-title{font-family:var(--font-serif);font-size:32px;font-weight:300;color:var(--text-primary);transition:transform var(--duration-fast) var(--ease-out)}.export-card-desc{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary)}.error-banner{padding:var(--space-xl);border:1px solid var(--error);background:transparent}.error-banner strong{display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--error);margin-bottom:var(--space-sm)}.error-banner p{font-family:var(--font-serif);font-size:24px;color:var(--text-primary)}.error-boundary{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:var(--space-2xl);text-align:center}.error-boundary h2{font-family:var(--font-serif);font-size:48px;font-weight:300;color:var(--error);margin-bottom:var(--space-lg)}.error-boundary p{font-family:var(--font-mono);font-size:14px;color:var(--text-secondary);margin-bottom:var(--space-xl);max-width:500px}.skeleton{animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-header{height:32px;width:60%;background:linear-gradient(90deg,var(--text-secondary) 25%,transparent 50%,var(--text-secondary) 75%);background-size:200% 100%;border-radius:2px;margin-bottom:var(--space-md);opacity:.3}.skeleton-line{height:16px;width:100%;background:linear-gradient(90deg,var(--text-secondary) 25%,transparent 50%,var(--text-secondary) 75%);background-size:200% 100%;border-radius:2px;margin-bottom:var(--space-sm);opacity:.2}.skeleton-line--long{width:100%}.skeleton-line--medium{width:70%}@keyframes skeleton-pulse{0%{opacity:.2}50%{opacity:.4}to{opacity:.2}}.toast-container{position:fixed;bottom:var(--space-xl);right:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-md);z-index:1000;pointer-events:none}.toast{pointer-events:auto;padding:var(--space-md) var(--space-lg);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;background:var(--bg);border:1px solid var(--border);box-shadow:0 4px 20px #0000001a;animation:toastSlideIn var(--duration-fast) var(--ease-out);min-width:250px}.toast--success{border-color:var(--success, #006633);color:var(--success, #006633)}.toast--error{border-color:var(--error);color:var(--error)}.toast--info{color:var(--text-primary)}.toast.removing{animation:toastFadeOut var(--duration-fast) var(--ease-out)}@keyframes toastSlideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes toastFadeOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.hero{text-align:left;padding:0 0 var(--space-3xl);max-width:900px}.hero-title{font-family:var(--font-serif);font-size:clamp(64px,10vw,140px);font-weight:300;color:var(--text-primary);line-height:.9;letter-spacing:-4px;margin-bottom:var(--space-xl)}.hero-subtitle{font-family:var(--font-mono);font-size:13px;font-weight:400;color:var(--text-secondary);max-width:400px;line-height:1.6;text-transform:uppercase;letter-spacing:1px;margin-left:25%;border-left:1px solid var(--text-primary);padding-left:var(--space-lg)}.section{margin-bottom:var(--space-3xl)}.regenerate-bar{display:flex;gap:var(--space-xl);align-items:flex-end}.regenerate-prompt{flex:1}@media(max-width:640px){.hero{max-width:100%;padding:var(--space-xl) 0}.hero-title{font-size:64px;letter-spacing:-2px}.hero-subtitle{margin-left:0;border-left:none;padding-left:0}.regenerate-bar{flex-direction:column;align-items:stretch}}