*{margin:0;padding:0;box-sizing:border-box}html,body{overflow:hidden}body{font-family:Golos Text,sans-serif;background-color:#000;color:#fff;min-height:100vh}.input-interface{display:flex;flex-direction:column;min-height:100vh;padding:20px;transition:opacity .3s ease-out}.input-interface-content{display:flex;gap:20px;align-items:center}.input-interface.hidden{display:none}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}h1{font-size:3rem;width:100%;margin-bottom:20px;margin-top:20px;text-align:left;font-weight:400;font-family:Georgia,Times New Roman,serif}.text-input-area-wrapper{position:relative;display:flex}.text-input-area{width:100%;height:40vh;background-color:#000;border:1px solid #333;color:#fff;font-family:Golos Text,sans-serif;font-size:.9rem;border-radius:7px;padding:8px;resize:none;transition:border-color .2s ease-out}.text-input-area:focus{outline:none;border-color:#e63946}.text-input-area::placeholder{color:#ffffff80}.input-panel{display:flex;flex-direction:column;gap:15px;padding:20px;max-width:750px;width:100%;margin:0 auto}.field{display:flex;flex-direction:column;gap:8px}.field label,.input-panel>label{color:#fff;font-size:.9rem}.field input[type=text]{background-color:#000;border:1px solid #333;color:#fff;padding:8px;font-family:Golos Text,sans-serif;font-size:.9rem;border-radius:7px;transition:border-color .2s ease-out}.field input[type=text]:focus{outline:none;border-color:#e63946}.field input[type=text]::placeholder{color:#ffffff80}.file-row{display:flex;align-items:center;gap:8px;padding:16px 8px 8px;border:1px solid #333;bottom:1px;left:1px;right:1px;background:linear-gradient(to top,#000,transparent);border-radius:0 0 7px 7px;width:100%;margin-top:-24px}.file-row input[type=file]{display:none}.file-button{background-color:#333;color:#fff;padding:8px 16px;font-family:Golos Text,sans-serif;font-size:.8rem;border-radius:5px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease-out}.file-button:hover{background-color:#444}.file-status{color:#ffffff80;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-controls{display:flex;gap:16px}.input-controls button{padding:12px 45px;font-family:Golos Text,sans-serif;font-size:.9rem;border-radius:7px;cursor:pointer;transition:all .2s ease-out;border:none}.input-controls button.primary{background-color:#e63946;color:#fff}.input-controls button.primary:hover{background-color:#f14d5a}.input-controls button:not(.primary){background-color:#333;color:#fff}.input-controls button:not(.primary):hover{background-color:#444}.drop-overlay{display:none;position:fixed;inset:0;background-color:#000000e6;color:#fff;font-size:1.5rem;justify-content:center;align-items:center;z-index:1000;border:3px dashed #e63946;margin:20px;border-radius:10px}.drop-overlay.active{display:flex}.settings-panel,.mobile-settings{display:none}.slider{flex:1;height:4px;background:#1a1a1a;border-radius:7px;outline:none;-webkit-appearance:none;appearance:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#e63946;cursor:pointer;border-radius:50%}.slider::-moz-range-thumb{width:16px;height:16px;background:#e63946;cursor:pointer;border-radius:50%;border:none}.slider-value{color:#fff;min-width:60px;white-space:nowrap;text-align:left;font-family:Golos Text,sans-serif}.sidebar-toggle-btn{position:fixed;top:20px;background:transparent;border:1px solid #333;color:#fff;padding:10px;background:#0a0a0a;cursor:pointer;transition:all .2s ease-out;border-radius:7px;z-index:50;display:flex;align-items:center;justify-content:center;width:40px;height:40px}.sidebar-toggle-btn:hover{background:#1a1a1a;border-color:#e63946}.sidebar-toggle-btn svg{flex-shrink:0}.sidebar-toggle-left{left:20px}.sidebar-toggle-right{right:20px}.sidebar-toggle-btn .tooltip{position:absolute;background-color:#222;color:#fff;padding:6px 12px;border-radius:6px;font-family:Golos Text,sans-serif;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease-out,transform .2s ease-out;z-index:100;border:1px solid #333}.sidebar-toggle-left .tooltip{left:100%;top:50%;transform:translate(10px,-50%);margin-left:8px}.sidebar-toggle-right .tooltip{right:100%;top:50%;transform:translate(-10px,-50%);margin-right:8px}.sidebar-toggle-btn:hover .tooltip{opacity:1}.sidebar-toggle-left:hover .tooltip,.sidebar-toggle-right:hover .tooltip{transform:translateY(-50%)}.reading-interface.active~.sidebar-toggle-btn{display:none}.sidebar-overlay{position:fixed;inset:0;background-color:#0000;z-index:99;pointer-events:none;transition:background-color .3s ease-out}.sidebar-overlay.active{background-color:#00000080;pointer-events:auto}.sidebar-left{position:fixed;left:0;top:0;bottom:0;width:350px;background-color:#0a0a0a;border-right:1px solid #222;z-index:150;transform:translate(-100%);transition:transform .3s ease-out;display:flex;flex-direction:column}.sidebar-left.open{transform:translate(0)}.sidebar-left-content{padding:25px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;flex:1}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.sidebar-title{color:#fff;font-size:1.25rem;margin:0;font-family:ui-serif,Georgia,Times New Roman,Times,serif}.sidebar-close-btn{background:transparent;border:1px solid #333;color:#fff;padding:6px 12px;background:#0a0a0a;cursor:pointer;font-family:Golos Text,sans-serif;font-size:.75rem;transition:all .2s ease-out;border-radius:7px}.sidebar-close-btn:hover{background:#1a1a1a}.sidebar-settings{display:flex;flex-direction:column;gap:15px}.sidebar-setting{display:flex;flex-direction:column;gap:6px}.sidebar-setting-label{color:#fff;font-size:.9rem}.sidebar-setting-slider-wrapper{display:flex;align-items:center;gap:12px}.sidebar-setting .slider{flex:1;height:3px}.sidebar-setting .slider-value{color:#fff;font-size:.8rem;width:70px;text-align:center;background-color:#222;padding:3px 0;border-radius:4px;white-space:nowrap}.sidebar-speed-controls{display:flex;align-items:center;gap:10px;justify-content:center}.speed-control-btn{background:transparent;border:1px solid #333;color:#fff;padding:6px 12px;background:#0a0a0a;cursor:pointer;font-family:Golos Text,sans-serif;font-size:1rem;transition:all .2s ease-out;border-radius:7px;min-width:40px}.speed-control-btn:hover{background:#1a1a1a;border-color:#e63946}.speed-control-label{color:#fff;font-size:.9rem;min-width:70px;text-align:center}.hint{display:flex;flex-direction:column;gap:8px;margin-top:auto}.hint-item{display:flex;align-items:center;gap:8px;color:#444;font-size:.75rem}.hint span{background-color:#222;padding:3px 6px;border-radius:6px;font-family:monospace;color:#888;min-width:35px;text-align:center;font-size:.7rem}.sidebar-right{position:fixed;right:0;top:0;bottom:0;width:350px;background-color:#0a0a0a;border-left:1px solid #222;z-index:150;transform:translate(100%);transition:transform .3s ease-out;display:flex;flex-direction:column}.sidebar-right.open{transform:translate(0)}.sidebar-right-content{padding:25px;display:flex;flex-direction:column;gap:15px;overflow-y:auto;flex:1}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.history-title{color:#fff;font-size:1.1rem;font-family:ui-serif,Georgia,Times New Roman,Times,serif;margin:0}.history-header-buttons{display:flex;gap:8px;align-items:center}.history-header button.ghost{background:transparent;border:1px solid #333;color:#fff;padding:6px 12px;font-family:Golos Text,sans-serif;font-size:.75rem;border-radius:7px;cursor:pointer;transition:all .2s ease-out}.history-header button.ghost:hover{background-color:#222}.history-empty{color:#fff;font-size:.8rem;text-align:center;padding:20px}.history-list{list-style:none;display:flex;flex-direction:column;gap:10px}.history-item{display:flex;flex-direction:column;gap:10px;background-color:#111;border:1px solid #333;padding:12px;border-radius:7px}.history-item-info{display:flex;flex-direction:column;gap:4px}.history-item-title{color:#fff;font-size:.85rem;font-weight:500}.history-item-meta{color:#fff;font-size:.7rem;display:flex;align-items:center;gap:.3rem}.progress-circle{width:.9rem;height:.9rem;border-radius:50%;background:conic-gradient(#e63946,#222 0deg);flex-shrink:0;margin-bottom:-1px;border:1px solid #333}.history-item-actions{display:flex;gap:6px}.history-item-actions button{background-color:#333;border:none;color:#fff;padding:6px 12px;font-family:Golos Text,sans-serif;font-size:.75rem;border-radius:7px;cursor:pointer;transition:background-color .2s ease-out}.history-item-actions button:hover{background-color:#444}.history-item-actions button.delete:hover{background-color:#e63946}.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;color:#fff;font-size:.8rem}.toggle input[type=checkbox]{width:18px;height:18px;accent-color:#e63946;cursor:pointer}.welcome-popup-overlay{position:fixed;inset:0;background-color:#000c;z-index:300;display:none;justify-content:center;align-items:center;padding:20px}.welcome-popup-overlay.active{display:flex}.welcome-popup{background-color:#0a0a0a;border:1px solid #333;border-radius:7px;max-width:500px;width:100%;padding:30px;position:relative}.welcome-popup-close{position:absolute;top:15px;right:15px;background:transparent;border:none;color:#666;font-size:1.5rem;cursor:pointer;padding:5px;line-height:1;transition:color .2s ease-out}.welcome-popup-close:hover{color:#fff}.welcome-popup-title{color:#fff;font-size:1.5rem;margin-bottom:20px;font-weight:500}.welcome-popup-content{color:#ccc;font-size:.95rem;line-height:1.6;margin-bottom:25px}.welcome-popup-content p{margin-bottom:15px}.welcome-popup-content strong{color:#fff}.welcome-popup-actions{display:flex;justify-content:flex-end}.welcome-popup-button{background-color:#e63946;color:#fff;border:none;padding:12px 30px;font-family:Golos Text,sans-serif;font-size:.9rem;border-radius:7px;cursor:pointer;transition:all .2s ease-out}.welcome-popup-button:hover{background-color:#f14d5a;transform:scale(1.05)}.reading-interface{display:none;flex-direction:column;height:100vh;position:fixed;inset:0;background-color:#000;transform-origin:center center;z-index:2}.reading-interface.active{display:flex}.guide-lines{position:absolute;width:100%;height:100%;pointer-events:none;--vline-gap: 140px}.guide-line-top{position:absolute;top:30%;left:0;right:0;height:2px;background-color:#1a1a1a}.guide-line-bottom{position:absolute;bottom:30%;left:0;right:0;height:2px;background-color:#1a1a1a}.guide-line-vertical-top,.guide-line-vertical-bottom{position:absolute;left:50%;width:2px;background-color:#1a1a1a;transform:translate(-50%)}.guide-line-vertical-top{top:30%;height:calc(20% - (var(--vline-gap) / 2))}.guide-line-vertical-bottom{bottom:30%;height:calc(20% - (var(--vline-gap) / 2))}.word-display-container{flex:1;display:flex;align-items:center;justify-content:center;position:relative}.word-display{font-size:73px;position:relative;font-family:Golos Text,sans-serif;white-space:nowrap;display:flex;gap:1px}.word-display .word-part{display:inline-block}.word-display .orp-letter{color:#e63946;margin:0;padding:0}.completion-message{display:none;flex-direction:column;align-items:center;justify-content:center;gap:15px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.completion-message.active{display:flex}.completion-title{font-size:2.5rem;color:#fff;font-family:ui-serif,Georgia,Times New Roman,Times,serif;font-weight:400;margin:0}.completion-text{font-size:1rem;color:#666;font-family:Golos Text,sans-serif;margin:0}.completion-text #completionCounter{color:#e63946}.controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:10px;align-items:center;padding:15px;background-color:#000000b3;border-radius:8px;opacity:1;transition:opacity .3s ease-out}.controls-row{display:flex;gap:15px;align-items:center}.control-button{background:transparent;border:1px solid #333;color:#fff;padding:8px 15px;background:#0a0a0a;cursor:pointer;font-family:Golos Text,sans-serif;font-size:.75rem;transition:all .2s ease-out;border-radius:7px}#pauseButton,#stopButton,#resetButton{min-width:100px}.control-button:hover{background:#1a1a1a}.speed-controls{display:flex;align-items:center;gap:10px}.speed-display{color:#fff;min-width:80px;text-align:center}.progress-bar-container{width:100%;max-width:600px;display:flex;flex-direction:column;gap:8px}.progress-percentage{color:#fff;font-size:.85rem;text-align:center;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-variant-numeric:tabular-nums;min-width:320px}.progress-bar-wrapper{width:100%;height:6px;background-color:#222;border-radius:3px;position:relative;cursor:pointer;transition:height .2s ease-out}.progress-bar-wrapper:hover{height:8px}.progress-bar-fill{height:100%;background-color:#e63946;border-radius:3px;transition:width .2s linear;pointer-events:none;width:0}.progress-controls-hint{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.progress-controls-hint .hint-item{color:#666;font-size:.7rem;line-height:1}.progress-controls-hint .hint-item span{background-color:#1a1a1a;padding:2px 5px;border-radius:4px;font-family:monospace;color:#888;font-size:.65rem}.progress-indicator{color:#fff;font-size:.9rem;font-family:Golos Text,sans-serif;margin-bottom:5px}@media(max-width:768px){html{font-size:14px}.input-interface-content{flex-direction:column;gap:15px;align-items:stretch}.header{margin-bottom:15px}h1{font-size:2rem}.input-panel{padding:0}.file-row{gap:10px}.hint{display:none}.toggle{font-size:.7rem}.input-controls{flex-wrap:wrap}.input-controls button{flex:1;min-width:80px}.history-item{flex-direction:column;gap:10px;align-items:flex-start}.history-item-actions{width:100%;justify-content:flex-start}.start-button{font-size:1rem;padding:12px 30px;margin-top:15px;align-self:stretch;width:100%}.controls{opacity:1;bottom:10px;left:10px;right:10px;transform:none;width:calc(100% - 20px);padding:12px;gap:8px}.controls-row{flex-wrap:wrap;justify-content:center;gap:10px;width:100%}#pauseButton,#resetButton,#stopButton{min-width:90px;flex:1;max-width:150px}.speed-controls{gap:8px}.speed-controls .control-button{min-width:44px;padding:10px}.speed-display{font-size:.85rem;min-width:70px}.progress-indicator{font-size:.85rem;margin-bottom:8px}.sidebar-left,.sidebar-right{width:310px}h1{margin-top:70px}}