:root{--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--text-color: #0f0000;--background-color: #cdd0d1;--input-background-color: #f5f6f9;--button-background-color: #2563eb;--button-text-color: #ffffff;--hover-color: #1d4ed8;--focus-color: #1e40af;--disabled-color: #94a3b8;--copied-background-color: #059669;--failed-background-color: #dc2626;--light-background-color: #ffbf8f;--slider-thumb-color: #1e40af;--title-color: #2563eb}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:var(--font-family);color:var(--text-color);background:var(--background-color)}.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.sr-announcer{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.container{display:flex;flex-direction:column;max-width:900px;margin:0 auto;padding:32px;gap:32px}header{width:100%;background:var(--light-background-color);box-shadow:0 2px 8px #00000008;text-align:center;padding:2rem 0}.header-title{margin:0;font-size:3.5rem;font-weight:700;color:var(--title-color);letter-spacing:-.02em;text-shadow:0 2px 4px rgba(37,99,235,.1)}main{display:grid;grid-template-columns:1fr 1fr;gap:2rem;width:100%;min-height:600px;padding:1rem;align-items:stretch}.upload-section{order:1;background:var(--light-background-color);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #00000014;height:100%}.output-section{order:2;background:var(--input-background-color);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #00000014;height:100%}.section-title{margin:0 0 1.5rem;font-size:1.8rem;font-weight:700;color:var(--text-color);text-align:center;border-bottom:2px solid var(--button-background-color);padding-bottom:.5rem}.flex-column{display:flex;flex-direction:column}.image-input-area{width:100%;min-height:200px;border:2px dashed #ccc;border-radius:12px;background-color:#fff;cursor:pointer;padding:2rem 1rem;margin-bottom:1.5rem;font-weight:700;transition:all .3s ease;text-align:center}.image-input-area:hover{border-color:var(--button-background-color);background-color:#2563eb0d}.image-input-area:focus{outline:none;border-color:var(--button-background-color);box-shadow:0 0 0 2px #2563eb33}.image-input-area.drag-over{border:2px dashed var(--button-background-color)}.uploaded-img{max-width:100%;max-height:100%;object-fit:contain}.file-input{display:none}.controls{display:flex;gap:16px;justify-content:space-between;width:100%}.description-length-container{flex-grow:.8;font-weight:700}.description-length-group{display:flex;align-items:center;gap:.4em;width:100%}.description-length-input{flex-grow:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;border-radius:15px;background-color:#e5e7eb;cursor:pointer;outline:none}.description-length-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--slider-thumb-color);cursor:pointer;box-shadow:0 2px 6px #1e40af4d;transition:all .2s ease}.description-length-input::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 3px 8px #1e40af66}.description-length-input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--slider-thumb-color);cursor:pointer;border:none;box-shadow:0 2px 6px #1e40af4d}.description-length-input::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 3px 8px #1e40af66}.button{font-weight:600;font-size:1.2rem;background-color:var(--button-background-color);color:var(--button-text-color);border:none;border-radius:8px;padding:.75rem 1.5rem;cursor:pointer;transition:all .3s ease}.button:hover:not(:disabled){background-color:var(--hover-color);transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.button-full-width{width:100%;margin:.5rem 0}.button:disabled{background-color:var(--disabled-color);cursor:not-allowed}.button.copied{background-color:var(--copied-background-color)!important}.button.failed{background-color:var(--failed-background-color)!important}textarea{width:100%;min-height:300px;flex-grow:1;border:2px solid #e0e0e0;border-radius:8px;background-color:#fff;padding:1rem;font-size:1.1rem;line-height:1.6;resize:vertical;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}textarea:focus{outline:none;border-color:var(--button-background-color);box-shadow:0 0 0 2px #2563eb33}.description-content{position:relative;display:flex;flex-direction:column;gap:1rem;height:100%}.loading-section,.error-section{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:100%;z-index:10;background:var(--input-background-color);padding:2rem;border-radius:8px;box-shadow:0 4px 12px #00000026}.speak-controls{display:flex;gap:1rem;margin-bottom:1rem;justify-content:center}.speak-controls .button{flex:1;max-width:120px}.spinner{border:4px solid #f3f3f3;border-top:4px solid var(--button-background-color);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){main{grid-template-columns:1fr;gap:1rem}.upload-section{order:1}.output-section{order:2}.controls{flex-direction:column;gap:1rem}.speak-controls{flex-direction:row;gap:.5rem}.speak-controls .button{flex:1;font-size:1rem;padding:.6rem 1rem}.section-title{font-size:1.5rem}textarea{min-height:200px}.image-input-area{min-height:150px;padding:1rem}}