@import"https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap";:root{--color-primary: #4F86F7;--color-primary-light: #E8F0FE;--color-primary-dark: #3765CA;--color-secondary: #00C896;--color-accent: #FFB020;--color-warning: #FF6B6B;--color-background: #F8FAFC;--color-surface: #FFFFFF;--color-text-main: #1E293B;--color-text-muted: #64748B;--color-text-light: #94A3B8;--color-highlight-bg: #FEF3C7;--color-active-bg: #DBEAFE;--border-radius-sm: 8px;--border-radius-md: 16px;--border-radius-lg: 24px;--shadow-sm: 0 2px 4px rgba(0,0,0,.05);--shadow-md: 0 8px 16px rgba(0,0,0,.06);--shadow-lg: 0 12px 24px rgba(0,0,0,.08);--shadow-glow: 0 0 15px rgba(79, 134, 247, .4);--header-height: 70px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Quicksand,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--color-background);color:var(--color-text-main);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}.glass-panel{background:#ffffffd9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.5);box-shadow:var(--shadow-md);border-radius:var(--border-radius-lg)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}.main-content{display:flex;flex:1;overflow:hidden;padding:1rem;gap:1.5rem}@media(max-width:768px){.main-content{flex-direction:column}}.pdf-viewer-container{display:flex;flex-direction:column;height:100%;width:100%}.pdf-hint{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;padding:.75rem 1.25rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;margin-bottom:1rem;text-align:center;flex-shrink:0;box-shadow:var(--shadow-sm)}.pdf-pages-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1rem}.pdf-page-wrapper{box-shadow:var(--shadow-md);border-radius:4px;overflow:hidden;flex-shrink:0}.pdf-page-wrapper canvas{display:block}.pdf-text-layer{position:absolute;top:0;left:0;overflow:hidden;opacity:.25;line-height:1}.pdf-text-layer span{color:transparent;cursor:pointer;border-radius:2px;transition:background-color .15s ease,color .15s ease}.pdf-text-layer span:hover{background-color:#4f86f726}.pdf-text-layer span.active-text{background-color:#4f86f759!important;outline:2px solid var(--color-primary);outline-offset:1px}.pdf-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1.5rem;color:var(--color-primary)}.loading-spinner{width:48px;height:48px;border:4px solid var(--color-primary-light);border-top:4px solid var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}.pdf-error{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.2rem;color:var(--color-warning)}.pdf-page-count{text-align:center;padding:.75rem;font-size:.9rem;color:var(--color-text-muted);font-weight:600;flex-shrink:0}.reader-panel{display:flex;flex-direction:column;height:100%;width:100%;padding:1.5rem;overflow-y:auto;transition:all .3s ease}.reader-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px dashed rgba(79,134,247,.2)}.reader-header h2{color:var(--color-primary-dark);font-size:1.5rem;display:flex;align-items:center;gap:.5rem}.btn-secondary{background:#fff;color:var(--color-primary);border:1px solid var(--color-primaryLight);padding:.5rem 1rem;border-radius:var(--border-radius-md);font-weight:600;cursor:pointer;transition:all .2s;box-shadow:var(--shadow-sm)}.btn-secondary:hover{background:var(--color-primaryLight);transform:translateY(-1px)}.btn-primary{background:var(--color-primary);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-weight:600;cursor:pointer;transition:all .2s;box-shadow:var(--shadow-sm)}.btn-primary:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-primary:disabled{background:#cbd5e1;cursor:not-allowed;transform:none;box-shadow:none}.input-mode{align-items:center;justify-content:center;text-align:center;gap:1.5rem}.input-mode h2{color:var(--color-primary-dark);font-size:2rem;margin-bottom:.5rem}.subtitle{color:var(--color-text-muted);font-size:1.1rem;margin-bottom:1.5rem}.upload-options{display:flex;flex-direction:column;width:100%;max-width:500px;gap:1rem}textarea{width:100%;padding:1rem;border-radius:var(--border-radius-md);border:2px solid var(--color-primaryLight);font-family:inherit;font-size:1rem;resize:vertical;outline:none;transition:border-color .2s}textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #4f86f71a}.divider{display:flex;align-items:center;text-align:center;color:var(--color-text-light);margin:1rem 0}.divider:before,.divider:after{content:"";flex:1;border-bottom:1px solid var(--color-primaryLight)}.divider span{padding:0 1rem;font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.file-upload-box{border:2px dashed var(--color-primaryLight);border-radius:var(--border-radius-md);padding:2.5rem 2rem;cursor:pointer;background:#ffffff80;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:1rem}.file-upload-box:hover{border-color:var(--color-primary);background:var(--color-primaryLight);transform:translateY(-2px)}.file-upload-box .icons{display:flex;gap:-10px;color:var(--color-primary);margin-bottom:.5rem}.file-upload-box p{font-weight:600;color:var(--color-text-main)}.file-upload-box .formats{font-size:.85rem;color:var(--color-text-muted);background:#fff;padding:.25rem .75rem;border-radius:12px;border:1px solid #E2E8F0}.loading-state{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--color-primary)}.spinner{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.reader-content{font-size:1.25rem;line-height:2.2;color:#334155}.sentence-block{display:inline;position:relative;transition:all .2s ease;border-radius:4px}.sentence-block:hover{background-color:#f1f5f9}.active-sentence{background-color:var(--color-highlight-bg)!important}.sentence-click-layer{font-size:.8rem;color:var(--color-secondary);font-weight:700;cursor:pointer;margin-right:.25rem;opacity:0;transition:opacity .2s;-webkit-user-select:none;user-select:none}.sentence-block:hover .sentence-click-layer{opacity:1}.word-block{display:inline-block;cursor:pointer;border-radius:4px;padding:0 .1rem;margin:0 -.1rem;transition:all .15s ease}.word-block:hover{color:var(--color-primary-dark);font-weight:600;transform:scale(1.05);background:#fff;box-shadow:0 2px 4px #0000001a;z-index:10;position:relative}.active-word{background-color:var(--color-active-bg)!important;color:var(--color-primary-dark);font-weight:700}.whitespace,.punctuation{color:#64748b}.interaction-panel{display:flex;flex-direction:column;height:100%;width:100%;padding:2rem;background:linear-gradient(135deg,#ffffffe6,#f8fafce6)}.empty-state{justify-content:center;align-items:center;text-align:center;color:var(--color-text-muted)}.illustration-placeholder{width:120px;height:120px;background:var(--color-primaryLight);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:2rem;color:var(--color-primary)}.pulse-icon{animation:pulse 2s infinite ease-in-out}@keyframes pulse{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:.8}}.empty-state h3{color:var(--color-primary-dark);font-size:1.5rem;margin-bottom:.5rem}.focus-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:#fff;border-radius:var(--border-radius-lg);padding:2rem;box-shadow:inset 0 2px 10px #00000005;margin-bottom:2rem;border:2px solid transparent;transition:all .3s ease;overflow:hidden}.focus-area.playing{border-color:#4f86f74d;box-shadow:0 0 30px #4f86f71a}.type-badge{position:absolute;top:1.5rem;left:1.5rem;background:var(--color-secondary);color:#fff;font-size:.8rem;font-weight:700;padding:.25rem .75rem;border-radius:20px;text-transform:uppercase;letter-spacing:.05em;box-shadow:var(--shadow-sm)}.text-display-container{text-align:center;z-index:2;width:100%;max-height:100%;overflow-y:auto;display:flex;align-items:center;justify-content:center}.focus-text{color:var(--color-text-main);font-weight:700;line-height:1.4;word-wrap:break-word;transition:all .3s cubic-bezier(.4,0,.2,1);animation:popIn .4s cubic-bezier(.175,.885,.32,1.275)}@keyframes popIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.focus-text.large{font-size:4rem;color:var(--color-primary-dark)}.focus-text.medium{font-size:2rem}.sound-waves{position:absolute;width:100%;height:100%;top:0;left:0;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}.wave{position:absolute;border-radius:50%;border:4px solid var(--color-primary);opacity:0;animation:ripple 2s linear infinite}.w1{width:100px;height:100px;animation-delay:0s}.w2{width:150px;height:150px;animation-delay:.6s}.w3{width:200px;height:200px;animation-delay:1.2s}@keyframes ripple{0%{transform:scale(.5);opacity:.4}to{transform:scale(3);opacity:0}}.controls-dashboard{background:#fff;border-radius:var(--border-radius-lg);padding:1.5rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem;box-shadow:var(--shadow-md)}.main-play{width:80px;height:80px;border-radius:50%;background:var(--color-primary);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 15px #4f86f766;transition:all .2s cubic-bezier(.4,0,.2,1)}.main-play:hover{transform:scale(1.05);background:var(--color-primary-dark)}.main-play.active{background:var(--color-accent);box-shadow:0 4px 15px #ffb02066}.secondary-controls{display:flex;gap:1rem;width:100%;justify-content:center}.control-btn.toggle{display:flex;align-items:center;gap:.5rem;background:var(--color-background);color:var(--color-text-main);border:1px solid var(--color-primaryLight);padding:.75rem 1.25rem;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s}.control-btn.toggle:hover{background:var(--color-primaryLight)}.control-btn.toggle.active-toggle{background:var(--color-secondary);color:#fff;border-color:var(--color-secondary);box-shadow:0 4px 10px #00c8964d}.edit-textarea{width:100%;min-height:80px;padding:1rem;border:2px solid var(--color-primary);border-radius:var(--border-radius-md);font-family:Quicksand,sans-serif;font-size:1.5rem;font-weight:600;text-align:center;color:var(--color-text-main);background:#e8f0fe80;resize:vertical;outline:none;animation:popIn .3s ease}.edit-textarea:focus{box-shadow:0 0 0 4px #4f86f726}.focus-text{user-select:text;-webkit-user-select:text;cursor:text}.interaction-hint{text-align:center;font-size:.85rem;color:var(--color-text-muted);padding:.5rem;margin-bottom:1rem;font-weight:500}.hint-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem;font-size:1rem;color:var(--color-text-muted)}.hint-list span{background:var(--color-primary-light);padding:.5rem 1rem;border-radius:10px;font-weight:600}.secondary-controls{flex-wrap:wrap}.app-header{height:var(--header-height);background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;box-shadow:var(--shadow-sm);z-index:10}.app-header .logo{font-size:1.5rem;font-weight:800;display:flex;align-items:center;gap:.5rem;color:var(--color-primary-dark)}.app-header .logo span{background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.welcome-text{color:var(--color-text-muted);font-weight:500;font-size:1rem}.left-column{flex:6;min-width:0;display:flex;flex-direction:column}.right-column{flex:4;min-width:0;display:flex;flex-direction:column}@media(max-width:768px){.welcome-text{display:none}}