:root{--bg-color: #050505;--accent-color: #007AFF;--accent-color-glow: rgba(0, 122, 255, .4);--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .7);--transition: all .3s cubic-bezier(.4, 0, .2, 1)}body{margin:0;padding:0;height:100vh;display:flex;flex-direction:column;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-color);color:var(--text-primary);overflow:hidden;background-image:radial-gradient(circle at 50% 10%,rgba(0,122,255,.15) 0%,transparent 50%),radial-gradient(circle at 100% 100%,rgba(0,122,255,.05) 0%,transparent 40%)}#logo-container{text-align:center;padding:30px 0;z-index:10}#logo{height:40px;width:auto;filter:drop-shadow(0 0 10px rgba(255,255,255,.2));transition:var(--transition)}#logo:hover{transform:scale(1.05);filter:drop-shadow(0 0 20px rgba(0,122,255,.4))}#wpm-display{position:absolute;left:40px;top:40px;font-size:14px;font-weight:600;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.3);letter-spacing:.05em}#reader-container{flex:1;display:flex;justify-content:center;align-items:center;padding:0 40px;width:100%;box-sizing:border-box;position:relative;transition:padding .3s ease}body.mono #reader-container{justify-content:center!important}body.mono .word{max-width:100%}.word{font-size:clamp(32px,8vw,64px);font-weight:800;text-align:center;transition:var(--transition);letter-spacing:-.02em}#left-word{color:var(--text-primary)}#right-word{color:var(--text-secondary)}#controls{padding:40px;display:flex;flex-direction:column;align-items:center;width:100%;box-sizing:border-box;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);z-index:10}.glass{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:20px;box-shadow:0 8px 32px #0006}textarea{width:100%;max-width:800px;height:80px;margin-bottom:24px;padding:16px;box-sizing:border-box;font-family:inherit;font-size:16px;line-height:1.6;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;color:var(--text-primary);resize:none;transition:var(--transition)}textarea:focus{outline:none;border-color:var(--accent-color);background:#ffffff14;box-shadow:0 0 0 4px var(--accent-color-glow)}.control-group{display:flex;gap:12px;align-items:center;margin-bottom:24px;justify-content:center;flex-wrap:wrap}button{padding:0 24px;height:46px;cursor:pointer;border:1px solid var(--glass-border);border-radius:12px;font-size:14px;font-weight:700;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:#000;box-sizing:border-box}.primary-btn{background:#fff;color:#000;border:none;box-shadow:0 4px 15px #fff3}.primary-btn:hover{background:#f0f0f0;transform:translateY(-2px);box-shadow:0 6px 20px #ffffff4d}.secondary-btn{background:#ffffffe6;color:#000}.secondary-btn:hover{background:#fff}#playback-controls{display:flex;gap:8px;background:#fff;padding:0 4px;border-radius:12px;border:1px solid var(--glass-border);height:46px;box-sizing:border-box;align-items:center}#playback-controls button{padding:10px 16px;font-size:18px;border:none;background:transparent;color:#000}#playback-controls button:hover{background:#0000000d}.icon-btn{width:44px;height:44px;padding:0;border-radius:50%;background:#fff;color:#000}.slider-group{display:flex;gap:32px;width:100%;max-width:800px;justify-content:center}.slider-container{display:flex;flex-direction:column;gap:12px;flex:1}.slider-label{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:100;transition:var(--transition)}.modal.hidden,.hidden{display:none!important;opacity:0;pointer-events:none}.modal-content{width:90%;max-width:600px;padding:32px;max-height:80vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.modal-header h2{margin:0;font-size:24px}input[type=range]{-webkit-appearance:none;width:100%;height:6px;background:var(--glass-bg);border-radius:3px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 0 10px #fff6;transition:var(--transition)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}@media screen and (max-width: 768px){#controls{padding:20px}.slider-group{flex-direction:column;gap:20px}#wpm-display{left:20px;top:20px}}