body{margin:0;padding:0;font-family:Arial,sans-serif}#root{display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:20px}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.article-item.selected{border:1px solid #000}.articles-list-scroll{max-height:400px;overflow-y:auto;border:1px solid #ccc;margin-bottom:1rem}.article-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.article-content-container{display:flex;gap:20px}.screen-container{width:100%;padding:20px;box-sizing:border-box}.home-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);position:relative;overflow:hidden}.home-page:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(99,102,241,.1) 0%,transparent 70%);animation:float 20s ease-in-out infinite}@keyframes float{0%,to{transform:translate(0) rotate(0)}50%{transform:translate(-30px,-30px) rotate(180deg)}}.home-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;position:relative;z-index:1;max-width:1200px;margin:0 auto;width:100%}.home-header{text-align:center;margin-bottom:3rem;animation:fadeInDown .8s ease-out}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.logo-container{margin-bottom:2rem}.logo{display:inline-block;font-size:2.5rem;font-weight:700;color:#2c3e50;padding:1rem 2rem;border:3px solid #2c3e50;border-radius:12px;background:#ffffffe6;box-shadow:0 4px 6px #0000001a;transition:transform .3s ease,box-shadow .3s ease}.logo:hover{transform:translateY(-2px);box-shadow:0 6px 12px #00000026}.logo-img{height:80px;width:auto;padding:1rem;background:#ffffffe6;border-radius:12px;box-shadow:0 4px 6px #0000001a;transition:transform .3s ease,box-shadow .3s ease}.logo-img:hover{transform:translateY(-2px);box-shadow:0 6px 12px #00000026}.main-title{font-size:3rem;color:#2c3e50;margin:0 0 1rem;font-weight:700;letter-spacing:-.5px}.subtitle{font-size:1.5rem;color:#546e7a;margin:0;font-weight:400}.description-section{max-width:800px;margin-bottom:3rem;animation:fadeIn .8s ease-out .2s both}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.description{font-size:1.125rem;line-height:1.8;color:#37474f;text-align:center;background:#fffc;padding:2rem;border-radius:16px;box-shadow:0 4px 6px #00000012;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.navigation-section{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;animation:fadeInUp .8s ease-out .4s both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.nav-button{display:flex;align-items:center;gap:1rem;padding:1.5rem 2rem;border:none;border-radius:16px;cursor:pointer;transition:all .3s ease;background:#fff;box-shadow:0 4px 6px #0000001a;min-width:280px}.nav-button:hover{transform:translateY(-4px);box-shadow:0 8px 16px #00000026}.primary-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.secondary-button{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}.button-icon{font-size:2rem}.button-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.button-text strong{font-size:1.125rem;margin-bottom:.25rem}.button-text small{font-size:.875rem;opacity:.9}.home-footer{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(0,0,0,.1);padding:1.5rem;animation:fadeIn .8s ease-out .6s both}.footer-content{text-align:center;color:#546e7a;font-size:.875rem}.separator{margin:0 1rem;color:#b0bec5}@media (max-width: 768px){.main-title{font-size:2rem}.subtitle{font-size:1.25rem}.description{font-size:1rem;padding:1.5rem}.navigation-section{flex-direction:column;width:100%;max-width:320px}.nav-button{width:100%;min-width:unset}.logo{font-size:2rem;padding:.75rem 1.5rem}}.screen-container{width:100%;max-width:1200px;height:94vh;margin:0 auto;padding:20px;box-sizing:border-box;font-family:Segoe UI,sans-serif;background:#ffffffd9;box-shadow:0 8px 24px #00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;display:flex;flex-direction:column}.content-container{display:flex;flex-direction:column;gap:20px}.buttons-container{display:flex;gap:10px;justify-content:center;margin-top:20px}button,.action-button{padding:10px 18px;font-size:15px;background-color:#39f;color:#fff;border:none;border-radius:8px;cursor:pointer;box-shadow:0 2px 6px #0000001a;transition:background .2s ease;margin-top:12px;align-self:center}button:hover,.action-button:hover{background-color:#2a80cc}.action-button:hover{background-color:#e0e0e0}.language-selector-container{display:flex;justify-content:flex-end;margin-bottom:10px}.language-selector{padding:8px 12px;border:1px solid #ccc;border-radius:10px;background-color:#ffffffe6;font-size:14px;font-family:inherit;box-shadow:0 2px 6px #0000000d;transition:border .2s ease,box-shadow .2s ease;cursor:pointer}.language-selector:focus{border-color:#39f;box-shadow:0 0 0 2px #39f3;outline:none}.articles-list{border:1px solid #000}.articles-list-scroll{border-radius:16px;padding:16px;background:#fffffff2;box-shadow:0 6px 16px #00000014;overflow-y:auto;max-height:420px;display:flex;flex-direction:column;gap:8px}.article-item{padding:10px;border-bottom:1px solid #000;cursor:pointer}.article-item:last-child{border-bottom:none}.article-item:hover{background-color:#f5f5f5}.article-detail-container{display:flex;flex-direction:column;gap:20px}.results-sidebar{flex:0 0 200px;max-height:100%;overflow-y:auto;border:1px solid #bbb;border-radius:12px;padding:12px;margin-right:24px;background:#fafafae6;box-shadow:0 2px 6px #0000000d}.result-item{padding:10px;border-radius:8px;background:#fff;margin-bottom:8px;border:1px solid #ccc;cursor:pointer;transition:background .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-item:last-child{border-bottom:none}.result-item:hover{background:#f0f8ff}.article-text{text-align:center}.result-preview{flex:0 0 180px;border-radius:12px;background-color:#ffffffd9;padding:16px;box-shadow:0 4px 12px #00000014;overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;font-family:Segoe UI,sans-serif;font-size:14px;color:#333;transition:box-shadow .3s ease}.result-preview h3{margin-top:0;font-size:18px;font-weight:600;color:#1d1d1d}.result-detail-container{display:flex;flex-direction:column;gap:20px}.result-detail-content{display:flex;gap:20px;height:400px}.processing-steps{width:170px;border-radius:12px;background:#fffffff2;box-shadow:0 4px 8px #00000014;padding:10px;display:flex;flex-direction:column;gap:10px;border:1px solid #ccc}.processing-step{padding:10px;border-bottom:1px solid #000;cursor:pointer}.processing-step:hover{background:#e6f0fff2}.processing-step.selected{background:#c8e1fff2;border-color:#39f;font-weight:600;color:#2c3e50}.source-text{flex:1;border:1px solid #000;padding:10px;display:flex;flex-direction:column}.source-content{flex:1;display:flex;justify-content:center;align-items:center}.step-result{width:250px;border:1px solid #000;padding:10px;display:flex;flex-direction:column;white-space:pre-wrap;word-break:break-word}.step-result-content{flex:1;display:flex;justify-content:center;align-items:center}.article-content-container{display:flex;gap:20px;height:400px}.result-preview{width:300px;flex-shrink:0;border-left:1px solid #ccc;padding-left:10px;box-sizing:border-box;overflow-y:auto}.result-preview-content{max-height:600px;overflow-y:auto;font-family:monospace;font-size:12px;background-color:#fafafa;padding:10px;border:1px solid #eee;white-space:pre-wrap}.results-sidebar,.article-content,.result-preview{min-width:0}.results-sidebar{flex:0 0 180px;border-right:1px solid #ccc;overflow-y:auto}.article-content{display:flex;flex-direction:column;flex:1 1 auto;max-height:600px;overflow-y:auto;border:1px solid #ccc;padding:10px;box-sizing:border-box;background:#fafafa;height:100%}.article-content-inner{flex:1 1 auto;overflow-y:auto;padding:10px;background:#fafafa;box-sizing:border-box}.article-content img,.step-result img{max-width:100%;height:auto;object-fit:contain;display:block;margin:0 auto}.text-block{white-space:pre-wrap;word-break:break-word;color:#000;font-size:14px;line-height:1.4}.result-preview{flex:0 0 180px;border-left:1px solid #ccc;overflow-y:auto}.step-result-content{display:flex;flex-direction:column;flex:1 1 auto;max-height:600px;overflow-y:auto;border:1px solid #ccc;padding:10px;box-sizing:border-box;background:#fafafa;height:100%;white-space:pre-wrap;overflow-wrap:break-word;width:100%;max-width:100%}.source-content{max-height:300px;overflow:auto;background-color:#f8f8f8;border:1px solid #ccc;padding:10px;white-space:pre-wrap;word-wrap:break-word;font-size:14px;text-align:center;display:flex;justify-content:center;align-items:center}.result-detail-content.single-column{display:flex;flex-direction:column;width:500px}.step-result.full-width{width:1000px;padding:1rem;box-sizing:border-box}.screen-container{font-family:Segoe UI,sans-serif;background:#ffffffd9;box-shadow:0 8px 24px #00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#2c3e50}.article-item,.result-item,.step-result,.article-content,.source-text,.step-result-content{background:#fffffff2;border-radius:12px;box-shadow:0 4px 6px #00000014;border:1px solid #ccc;color:#2c3e50}.result-item.selected,.processing-step.selected{background:#e6f0ff;border-color:#39f;font-weight:600}.result-item:hover,.processing-step:hover{background:#f0f8ff}.text-block{color:#37474f;font-size:15px;line-height:1.6}.source-content{background-color:#fffffff2;border-radius:12px;box-shadow:0 2px 4px #00000012}button,.action-button{padding:12px 20px;font-size:16px;font-weight:600;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;cursor:pointer;box-shadow:0 4px 6px #0000001a;transition:all .3s ease;margin-top:20px;align-self:center}button:hover,.action-button:hover{background:linear-gradient(135deg,#5a67d8,#6b46c1);transform:translateY(-2px);box-shadow:0 6px 12px #00000026}.processing-step{padding:10px;background:#f5f5f5f2;border-radius:10px;box-shadow:0 2px 4px #0000000d;font-weight:500;cursor:pointer;transition:background-color .2s ease;border:1px solid #ddd;text-align:center}.editable-textarea{width:100%;height:100%;resize:vertical;font-family:monospace;font-size:14px;padding:10px;border:1px solid #bbb;border-radius:10px;background-color:#fff;box-sizing:border-box}.upload-form-container{padding:20px;margin-top:20px;background:#f9f9f9;border:1px solid #ccc;border-radius:12px}.upload-form-container form label{display:block;margin-bottom:10px}.upload-form-container .action-button,.upload-form-container .cancel-button{margin-right:10px}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;padding:30px 40px;border-radius:12px;width:420px;max-width:90%;box-shadow:0 8px 24px #00000040;position:relative;font-size:16px}.modal-content label{display:block;margin:12px 0 6px;font-weight:600}.modal-content select,.modal-content input[type=file]{width:100%;padding:8px;margin-bottom:16px;border-radius:6px;border:1px solid #ccc;font-size:15px}.modal-close{position:absolute;top:12px;right:14px;background-color:#eee;border:none;font-size:20px;border-radius:30%;cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#555;transition:background .3s ease}.modal-close:hover{background-color:#d9534f;color:#fff}.modal-content h3{margin-bottom:20px;font-size:20px}.modal-content .action-button{width:100%;margin-top:10px}.upload-progress-bar{position:fixed;top:16px;right:16px;background-color:#333;color:#fff;padding:8px 12px;border-radius:6px;font-size:14px;z-index:1000;box-shadow:0 4px 6px #0000001a}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,Helvetica,sans-serif;line-height:1.6;background-color:#f4f4f4}