*{box-sizing:border-box;margin:0;padding:0}:root{--cream:#faf8f5;--cream-dark:#f0ebe3;--text:#2d2d2d;--text-light:#5a5a5a;--accent:#1a1a1a;--border:#d4d0c8;--duration-fast:.15s;--duration-normal:.25s;--z-base:1;--z-overlay:50;--z-dropdown:100;--z-header:90}body{background:var(--cream);color:var(--text);min-height:100vh;font-family:"Source Serif 4",Georgia,serif;line-height:1.5}.app{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:2rem 1rem;display:flex}.header{z-index:var(--z-header);position:fixed;top:1rem;right:1rem}.settings{position:relative}.settings-btn{z-index:var(--z-dropdown);border:1px solid var(--border);cursor:pointer;color:var(--text-light);background:0 0;border-radius:6px;padding:.4rem .6rem;font-size:1.1rem;position:relative}.settings-btn:hover{background:var(--cream-dark);color:var(--text)}.settings-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.settings-overlay{z-index:var(--z-overlay);position:fixed;inset:0}.settings-dropdown{border:1px solid var(--border);min-width:280px;z-index:var(--z-dropdown);transform-origin:100% 0;background:#fff;border-radius:8px;margin-top:.5rem;padding:1rem;position:absolute;top:100%;right:0;box-shadow:0 4px 20px #00000014,0 8px 32px #0000000f}.settings-dropdown label{color:var(--text-light);margin-bottom:.5rem;font-size:.85rem;display:block}.settings-dropdown input,.settings-dropdown select{border:1px solid var(--border);background:#fff;border-radius:4px;width:100%;padding:.5rem;font-family:inherit;font-size:.9rem}.settings-dropdown input:focus,.settings-dropdown select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #1a1a1a14}.settings-dropdown input:focus-visible,.settings-dropdown select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.settings-dropdown small{color:var(--text-light);margin-top:.5rem;font-size:.75rem;line-height:1.4;display:block}.settings-dropdown small a{color:var(--accent);text-decoration:underline}.main-content{flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:500px;display:flex}.title{text-align:center}.title h1{margin-bottom:.25rem;font-size:2rem;font-weight:600}.title p{color:var(--text-light);font-size:.95rem}.title .credits-note{opacity:.7;margin-top:.25rem;font-size:.8rem}.status-area{flex-direction:column;justify-content:center;align-items:center;gap:.5rem;min-height:80px;display:flex}.status{color:var(--text-light);text-align:center;font-size:.9rem}.status.pulse{animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.status.error{color:#c44}.status.success{color:#2a2}.result-area{flex-direction:column;align-items:center;gap:.5rem;display:flex}.download-link{color:var(--text-light);background:var(--cream-dark);border-radius:6px;align-items:center;gap:.35rem;max-width:260px;padding:.4rem .75rem;font-size:.85rem;font-weight:400;text-decoration:none;display:inline-flex}.download-link span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.download-link:hover{background:var(--border)}.download-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.preview{object-fit:contain;border-radius:8px;max-width:100%;max-height:200px}.preview-container{border-radius:8px;justify-content:center;display:flex;overflow:hidden;box-shadow:0 2px 12px #0000000f}.progress-bar{background:var(--cream-dark);border-radius:2px;width:200px;height:4px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg,var(--text-light),var(--accent));height:100%}.input-area{border:1px solid var(--border);width:100%;transition:border-color var(--duration-fast)ease,box-shadow var(--duration-fast)ease;background:#fff;border-radius:12px;flex-direction:column;gap:.75rem;padding:.75rem;display:flex;box-shadow:0 2px 8px #0000000a}.input-area:focus-within{border-color:var(--text-light);box-shadow:0 2px 12px #0000000f}.file-chip{background:var(--cream-dark);border-radius:20px;justify-content:space-between;align-items:center;gap:.5rem;max-width:250px;padding:.4rem .75rem;font-size:.85rem;display:inline-flex}.file-chip span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.file-chip button{cursor:pointer;color:var(--text-light);background:0 0;border:none;border-radius:4px;padding:.1rem .2rem;font-size:1rem;line-height:1}.file-chip button:hover{color:var(--text)}.file-chip button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.input-row{align-items:center;gap:.5rem;display:flex}.input-row textarea{resize:none;background:0 0;border:none;outline:none;flex:1;min-height:24px;max-height:120px;font-family:inherit;font-size:1rem}.input-row textarea:disabled{opacity:.5;cursor:not-allowed}.input-row button.send-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;padding:.5rem;font-family:inherit;font-size:1.1rem;display:flex}.input-row button.send-btn:disabled{opacity:.5;cursor:not-allowed}.input-row button.send-btn:hover:not(:disabled){background:var(--text)}.input-row button.send-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.upload-label{cursor:pointer;color:var(--text-light);border-radius:4px;padding:.25rem;font-size:1.25rem}.upload-label:hover{color:var(--text);background:#0000000a}.upload-label.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.upload-label:focus-within{outline:2px solid var(--accent);outline-offset:2px}.upload-label input{display:none}.spinner{border:2px solid #0000;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.command-area{flex-direction:column;align-items:center;gap:.25rem;display:flex}.command{color:var(--text-light);background:var(--cream-dark);cursor:pointer;-webkit-line-clamp:1;word-break:break-all;border-radius:4px;-webkit-box-orient:vertical;width:100%;max-width:400px;padding:.5rem .75rem;font-family:monospace;font-size:.75rem;line-height:1.4;transition:all .3s;display:-webkit-box;overflow:hidden}.command:hover{-webkit-line-clamp:unset;max-height:200px}.cost{color:var(--text-light);opacity:.7;font-size:.7rem}.loading-dots{align-items:center;gap:.25rem;margin-left:.4rem;display:inline-flex}.loading-dots span{background:var(--text-light);border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite loadingBounce}.loading-dots span:nth-child(2){animation-delay:.1s}.loading-dots span:nth-child(3){animation-delay:.2s}@keyframes loadingBounce{0%,60%,to{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
