:root{--color-bg: #0f0f0f;--color-surface: #1a1a1a;--color-surface-hover: #252525;--color-border: #333;--color-text: #e0e0e0;--color-text-muted: #888;--color-primary: #6366f1;--color-primary-hover: #818cf8;--color-success: #22c55e;--color-error: #ef4444;--radius-lg: 12px;--radius-md: 8px;--radius-pill: 999px;--shadow: 0 4px 24px rgba(0, 0, 0, .3);--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--font-size-sm: .8rem;--font-size-base: .9rem}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);min-height:100vh;line-height:1.6}#app{max-width:1000px;margin:0 auto;padding:2rem}header{text-align:center;margin-bottom:2rem}header h1{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,var(--color-primary),#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}header p{color:var(--color-text-muted);margin-bottom:.5rem}header a{color:var(--color-primary);text-decoration:none;font-size:.9rem}header a:hover{color:var(--color-primary-hover);text-decoration:underline}.drop-zone{background:var(--color-surface);border:2px dashed var(--color-border);border-radius:var(--radius-lg);padding:3rem;text-align:center;cursor:pointer;transition:all .2s ease;min-height:200px;display:flex;align-items:center;justify-content:center}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--color-primary);background:var(--color-surface-hover)}.drop-zone.drag-over{transform:scale(1.02)}.drop-zone.has-preview{border-style:solid;padding:1.5rem}.drop-zone-content svg{color:var(--color-text-muted);margin-bottom:1rem}.drop-zone-content p{color:var(--color-text-muted)}.drop-zone-preview{display:flex;align-items:center;gap:1.5rem;width:100%;text-align:left}.drop-zone-preview[hidden]{display:none}.drop-zone-preview img{max-width:150px;max-height:150px;border-radius:var(--radius-md);object-fit:cover;flex-shrink:0}.drop-zone-preview .image-info{flex:1}.drop-zone-preview .change-hint{color:var(--color-text-muted);font-size:.8rem;margin-top:.75rem}.image-info h3{font-size:1rem;margin-bottom:.25rem}.image-info p{color:var(--color-text-muted);font-size:.85rem}.image-info .software-badge{display:inline-block;background:var(--color-primary);color:#fff;padding:.25rem .75rem;border-radius:var(--radius-pill);font-size:var(--font-size-sm);font-weight:500;margin-top:.5rem}.results{margin-top:1.5rem;background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden}.tabs{display:flex;border-bottom:1px solid var(--color-border)}.tab{flex:1;padding:1rem;background:none;border:none;color:var(--color-text-muted);font-size:var(--font-size-base);font-weight:500;cursor:pointer;transition:all .2s ease}.tab:hover{color:var(--color-text);background:var(--color-surface-hover)}.tab.active{color:var(--color-primary);border-bottom:2px solid var(--color-primary)}.tab-content{padding:1.5rem}.metadata-display{display:grid;gap:1rem}.metadata-section{background:var(--color-bg);border-radius:var(--radius-md);padding:1rem}.metadata-section h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:.5rem}.metadata-field{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--color-border)}.metadata-field:last-child{border-bottom:none}.metadata-field .label{color:var(--color-text-muted);font-size:var(--font-size-base)}.metadata-field .value{font-weight:500;font-size:var(--font-size-base)}.prompt-text{background:var(--color-bg);border-radius:var(--radius-md);padding:0 1rem;font-family:var(--font-mono);font-size:var(--font-size-base);line-height:1.6;white-space:pre-wrap;word-break:break-word}.character-prompt{margin-bottom:1rem}.character-prompt:last-child{margin-bottom:0}.character-header{font-size:.85rem;font-weight:500;color:var(--color-text-muted);margin-bottom:.25rem}.raw-data{display:flex;flex-direction:column;gap:1rem}.raw-chunk{display:flex;flex-direction:column;background:var(--color-bg);border-radius:var(--radius-md);overflow:hidden}.raw-chunk-header{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--color-surface-hover);cursor:pointer;list-style:none}.raw-chunk-header:after{content:"▼";margin-left:auto;font-size:.7rem;color:var(--color-text-muted);transition:transform .2s ease}.raw-chunk:not([open]) .raw-chunk-header:after{transform:rotate(-90deg)}.raw-chunk-header::-webkit-details-marker{display:none}.raw-chunk[open] .raw-chunk-header{border-bottom:1px solid var(--color-border)}.chunk-keyword{font-weight:600;color:var(--color-text)}.chunk-type,.chunk-format{font-size:.75rem;padding:.125rem .5rem;border-radius:var(--radius-pill)}.chunk-type{background:var(--color-primary);color:#fff}.chunk-format{background:var(--color-border);color:var(--color-text-muted)}.chunk-content{margin:0;padding:1rem;font-family:var(--font-mono);font-size:var(--font-size-sm);white-space:pre-wrap;word-break:break-word}.error{margin-top:1.5rem;background:#ef44441a;border:1px solid var(--color-error);border-radius:var(--radius-lg);padding:1rem;color:var(--color-error)}footer{text-align:center;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:.85rem}footer a{color:var(--color-primary);text-decoration:none}footer a:hover{text-decoration:underline}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.drop-zone.has-preview,.results:not([hidden]),.error:not([hidden]){animation:fadeIn .3s ease}