@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--text-primary: #e8e8e8;--text-secondary: #888;--accent-red: #ff4444;--accent-blue: #4a9eff;--accent-green: #44ff88}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;letter-spacing:0;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden}.app{min-height:100vh;display:flex;flex-direction:column}.header{padding:1rem 2rem;background:var(--bg-secondary);border-bottom:1px solid #222;display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.5rem;font-weight:700;background:linear-gradient(90deg,var(--accent-red),#ff8888);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.upload-section{padding:2rem;max-width:800px;margin:0 auto;width:100%}.upload-tabs{display:flex;gap:1rem;margin-bottom:1.5rem}.tab-btn{padding:.75rem 1.5rem;background:transparent;border:1px solid #333;color:var(--text-secondary);cursor:pointer;border-radius:8px;transition:all .2s}.tab-btn.active{background:var(--accent-red);border-color:var(--accent-red);color:#fff}.tab-btn:hover:not(.active){border-color:var(--accent-red);color:var(--text-primary)}.upload-area{border:2px dashed #333;border-radius:12px;padding:3rem;text-align:center;transition:all .2s;cursor:pointer}.upload-area:hover{border-color:var(--accent-red);background:#ff44440d}.upload-area.dragover{border-color:var(--accent-green);background:#44ff880d}.file-input{display:none}.url-input,.text-input{width:100%;padding:1rem;background:var(--bg-secondary);border:1px solid #333;border-radius:8px;color:var(--text-primary);font-size:1rem;margin-bottom:1rem}.url-input:focus,.text-input:focus{outline:none;border-color:var(--accent-red)}.text-input{min-height:200px;resize:vertical;font-family:inherit}.load-btn{padding:.75rem 2rem;background:var(--accent-red);border:none;border-radius:8px;color:#fff;font-size:1rem;cursor:pointer;transition:all .2s}.load-btn:hover{background:#f66}.load-btn:disabled{opacity:.5;cursor:not-allowed}.reader-container{flex:1;position:relative;min-height:100vh;padding:0}.word-display{position:fixed;top:33vh;left:50%;transform:translate(-50%);width:min(92vw,900px);min-height:120px;font-size:clamp(1.8rem,7vw,4.5rem);font-weight:500;letter-spacing:.02em;text-align:center;display:flex;align-items:center;justify-content:center;z-index:20}.orp-anchor{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1px;height:52px;background:#ff444438;pointer-events:none;z-index:10}.word-wrapper{display:flex;align-items:baseline;justify-content:center;font-family:JetBrains Mono,Roboto,Segoe UI,system-ui,sans-serif;font-weight:300;position:relative;letter-spacing:0;font-variant-numeric:tabular-nums;width:100%}.word-before{text-align:right;flex:1;min-width:0;padding-right:2px}.word-orp{color:var(--accent-red);flex:0 0 auto;padding:0 2px}.word-after{text-align:left;flex:1;min-width:0;padding-left:2px}.bottom-ui{position:fixed;left:0;right:0;bottom:0;min-height:50vh;padding:1rem 1rem max(1rem,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto auto auto;align-content:end;gap:.9rem;z-index:30;background:linear-gradient(to top,#0a0a0feb,#0a0a0fcc 55%,#0a0a0f00)}.word-before{color:var(--text-primary)}.word-orp{color:var(--accent-red);font-weight:600}.word-after{color:var(--text-primary)}.baseline-guide{position:fixed;bottom:0;left:0;width:100%;height:2px;background:#ffffff26;pointer-events:none;z-index:1000}.progress-container{width:min(90vw,640px);margin:0 auto}.progress-bar{height:4px;background:#333;border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:var(--accent-red);transition:width .1s linear}.progress-text{text-align:center;margin-top:.5rem;color:var(--text-secondary);font-size:.875rem}.controls{width:min(95vw,700px);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1rem}.control-buttons{display:flex;gap:clamp(.6rem,3vw,1.5rem);align-items:center;justify-content:center;width:100%}.control-btn{width:50px;height:50px;border-radius:50%;border:2px solid #333;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:1.25rem}.control-btn:hover{border-color:var(--accent-red);color:var(--accent-red)}.control-btn.primary{width:60px;height:60px;background:var(--accent-red);border-color:var(--accent-red);color:#fff}.control-btn.primary:hover{background:#f66}.sliders{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center}.slider-group{display:flex;flex-direction:column;align-items:center;gap:.5rem}.slider-label{display:flex;align-items:center;gap:.5rem;color:var(--text-secondary);font-size:.875rem}.slider{width:150px;height:6px;background:#333;border-radius:3px;outline:none;-webkit-appearance:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--accent-red);border-radius:50%;cursor:pointer}.slider::-moz-range-thumb{width:16px;height:16px;background:var(--accent-red);border-radius:50%;cursor:pointer;border:none}.back-btn{position:absolute;top:2rem;left:2rem;padding:.5rem 1rem;background:transparent;border:1px solid #333;border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .2s}.back-btn:hover{border-color:var(--accent-red);color:var(--text-primary)}.error{background:#ff44441a;border:1px solid var(--accent-red);color:#f88;padding:1rem;border-radius:8px;margin-bottom:1rem}.keyboard-hint{text-align:center;font-size:.75rem;color:#555;line-height:1.3}@media (max-width: 768px){.upload-tabs{flex-wrap:wrap}.word-display{top:33vh;width:94vw;font-size:clamp(1.6rem,10vw,3rem);min-height:100px}.word-wrapper{letter-spacing:.01em}.orp-anchor{height:56px}.bottom-ui{min-height:50vh;padding:.75rem .75rem max(.75rem,env(safe-area-inset-bottom));gap:.7rem}.progress-container{width:92vw}.progress-text{font-size:.8rem}.controls{width:96vw;gap:.75rem}.control-buttons{margin-top:.15rem}.control-btn{width:46px;height:46px;font-size:1.05rem}.control-btn.primary{width:58px;height:58px}.sliders{width:100%;gap:.9rem}.slider-group{width:100%}.slider{width:min(92vw,360px)}.back-btn{top:max(.75rem,env(safe-area-inset-top));left:.75rem;padding:.45rem .8rem;z-index:40}.keyboard-hint{display:none}}@media (min-width: 769px){.bottom-ui{min-height:44vh;padding-bottom:1.25rem}}