:root{--color-background:#121212;--color-text:#e0e0e0;--color-primary:#03dac6;--color-secondary:#1e1e1e;--color-button-bg:#333;--color-button-hover:#444;--color-border:#333;--content-width:80vw}[data-theme=light]{--color-background:#fafafa;--color-text:#1e1e1e;--color-primary:#00796b;--color-secondary:#e6e6e6;--color-button-bg:#ddd;--color-button-hover:#ccc;--color-border:#ccc}.theme-toggle{border:1px solid var(--color-border);background-color:var(--color-secondary);width:44px;height:44px;color:var(--color-primary);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:background-color .3s,transform .2s;display:flex}.theme-toggle:hover{background-color:var(--color-button-hover);transform:rotate(15deg)}.app-footer{color:#888;flex-shrink:0;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding-top:8px;font-size:.8rem;display:grid}.app-footer .theme-toggle{justify-self:start}.footer-text{cursor:default;white-space:nowrap;display:grid}.footer-text>span{text-align:center;grid-area:1/1;transition:opacity .2s}.footer-hover,.footer-text:hover .footer-default,.footer-text:focus-visible .footer-default{opacity:0}.footer-text:hover .footer-hover,.footer-text:focus-visible .footer-hover{opacity:1}@font-face{font-family:OpenDyslexic;src:url(/fonts/OpenDyslexic-Regular.otf)format("opentype");font-weight:400;font-style:normal}.opendyslexic-font{font-family:OpenDyslexic,sans-serif!important}*{box-sizing:border-box}body{background-color:var(--color-background);color:var(--color-text);justify-content:center;height:100dvh;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex;overflow:hidden}#root{width:100%;min-width:0}.app-container{text-align:center;box-sizing:border-box;flex-direction:column;width:100%;height:100%;padding:20px;display:flex;overflow:hidden auto}.app-header{flex-shrink:0;grid-template-columns:1fr auto 1fr;grid-template-areas:"left title right";align-items:center;gap:12px;margin-bottom:16px;display:grid}.app-header-left{grid-area:left;justify-self:start}.app-header-right{grid-area:right;justify-self:end}h1.title{color:var(--color-primary);white-space:nowrap;grid-area:title;margin:0;font-size:clamp(1.5rem,4vw,2rem)}.back-button,.break-button{white-space:nowrap;padding:10px 18px}.view-1{text-align:center;flex:1 0 auto;padding:20px}.text-input-wrapper{width:var(--content-width);margin:0 auto;position:relative}.text-input{border:1px solid var(--color-border);background-color:var(--color-secondary);width:100%;color:var(--color-text);resize:vertical;border-radius:8px;margin:0 auto;padding:15px;font-size:16px;display:block;box-shadow:0 4px 12px #00000080}.camera-button{border:1px solid var(--color-border);background-color:var(--color-button-bg);width:44px;height:44px;color:var(--color-primary);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;padding:0;display:none;position:absolute;top:8px;right:8px}@media (pointer:coarse){.camera-button{display:flex}.text-input{padding-right:60px}}.scan-error{max-width:var(--content-width);color:#ff8a80;margin:10px auto 0;font-size:.95rem}.scan-overlay{z-index:1500;background-color:#000000b3;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.scan-panel{text-align:center;background-color:var(--color-secondary);border:2px solid var(--color-primary);border-radius:16px;width:min(360px,100%);padding:24px}.scan-panel h2{color:var(--color-primary);margin:0 0 8px;font-size:1.4rem}.scan-panel progress{width:100%;height:10px;accent-color:var(--color-primary);margin:8px 0 20px}.word-count{color:#888;margin:15px 0;font-size:1.1rem}.view-1 .controls{justify-content:center;gap:15px;margin-top:20px;display:flex}.font-selector-container{justify-content:center;align-items:center;gap:10px;margin-bottom:20px;display:flex}.toggle-container{flex-wrap:wrap;flex-shrink:0;align-items:center;gap:10px;font-size:.9rem;display:flex}.slider-container{white-space:nowrap;flex-shrink:0;align-items:center;gap:10px;font-size:.9rem;display:flex}.slider-container input[type=range]{cursor:pointer}.btn{cursor:pointer;border:none;border-radius:6px;padding:12px 25px;font-size:1rem;font-weight:700;transition:background-color .3s,transform .1s}.btn-primary{background-color:var(--color-primary);color:var(--color-background)}.btn-primary:hover:not(:disabled){background-color:#00b894}.btn-primary:disabled{cursor:not-allowed;background-color:#555}.btn-secondary{background-color:var(--color-button-bg);color:var(--color-text)}.btn-secondary:hover{background-color:var(--color-button-hover)}.view-2{text-align:center;box-sizing:border-box;flex-direction:column;flex:1 1 0;justify-content:flex-start;align-items:center;width:100%;min-height:min-content;margin:0;padding:0;display:flex;position:relative;overflow:visible}.view-2-header{box-sizing:border-box;background-color:var(--color-background);z-index:20;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;gap:8px 20px;width:100%;min-height:70px;margin-bottom:0;padding:10px 20px;display:flex}.slider-placeholder{visibility:hidden}.font-selector-container .slider-placeholder{display:none}.start-over-button{white-space:nowrap;padding:6px 14px;font-size:.9rem}.start-over-button:disabled{opacity:.5;cursor:not-allowed}.font-control{align-items:center;gap:10px;display:flex}.font-label{font-size:1rem}.font-dropdown{background-color:var(--color-secondary);color:var(--color-text);border:1px solid var(--color-border);border-radius:4px;padding:5px 10px}.progress-container{background-color:var(--color-secondary);z-index:10;flex-shrink:0;width:800px;max-width:100%;height:8px;position:relative}.progress-bar{background-color:var(--color-primary);height:100%;transition:width .3s}.sentence-tick{background-color:var(--color-text);opacity:.7;pointer-events:none;width:2px;height:16px;margin-left:-1px;position:absolute;top:-4px}.reading-area{contain:size;cursor:pointer;scrollbar-gutter:stable;box-sizing:border-box;flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;min-height:140px;padding:20px;display:flex;overflow:auto hidden}.word-display-container{white-space:nowrap;justify-content:center;align-items:center;gap:30px;min-width:fit-content;display:flex}.current-word{color:var(--color-text);white-space:nowrap;flex-shrink:0;max-width:none;margin:0;padding:20px;font-size:clamp(40px,12vw,100px);font-weight:900;line-height:1.2;transition:all .1s;display:inline-block}.dim-word{opacity:.4;color:var(--color-text);flex-shrink:0;font-size:.6em;transition:all .1s}.prev-word{text-align:right}.next-word{text-align:left}.view-2 .controls{box-sizing:border-box;flex-direction:column;flex-shrink:0;align-items:center;gap:15px;width:100%;margin-top:20px;padding:20px;display:flex}.speed-control{background-color:var(--color-secondary);border-radius:8px;justify-content:center;align-items:center;gap:10px;width:100%;padding:10px;display:flex}#wpm-slider{width:200px}.action-buttons{justify-content:center;gap:10px;width:100%;display:flex}.btn-nav{flex:1;max-width:150px}.btn-auto{flex:2;max-width:200px}@media (width<=600px){.app-container{padding:12px}.app-header{margin-bottom:10px}.back-button,.break-button{padding:8px 12px;font-size:.85rem}.view-1{padding:8px 0}.view-1 h1{font-size:1.4rem}.text-input-wrapper{width:100%}.text-input{min-height:200px}.view-1 .controls{flex-wrap:wrap}.view-1 .controls .btn{flex:auto}.view-2-header{column-gap:12px;padding:8px 4px}.current-word{padding:12px;font-size:12vw}.word-display-container{gap:12px}.view-2 .controls{margin-top:8px;padding:8px 0}.btn-nav{max-width:none}.break-panel{padding:20px 24px}.break-panel h2{font-size:1.6rem}.break-timer{font-size:3rem}.confetti-break-modal{padding:24px}.confetti-break-modal h2{font-size:1.6rem}}@media (width<=480px){.app-header{grid-template-columns:1fr 1fr;grid-template-areas:"left right""title title";row-gap:6px}}.confetti-break-overlay{z-index:1000;background-color:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.confetti-break-modal{background-color:var(--color-secondary);border:2px solid var(--color-primary);text-align:center;border-radius:12px;max-width:min(500px,100vw - 32px);padding:40px;animation:.3s ease-out modalSlideIn;box-shadow:0 8px 32px #03dac64d}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.confetti-break-modal h2{color:var(--color-primary);margin:0 0 15px;font-size:2rem}.confetti-break-modal p{color:var(--color-text);margin:0 0 30px;font-size:1.2rem}.confetti-break-modal .btn{width:100%;max-width:300px}.config-control{white-space:nowrap;align-items:center;gap:8px;display:flex}.font-selector-container{flex-wrap:wrap}.wpm-counter{color:var(--color-primary);white-space:nowrap;font-size:.9rem;position:absolute;top:14px;right:0}.reading-area.context-mode{overflow-x:hidden}.context-text{--fade-top:0%;--fade-bottom:0%;text-align:left;width:100%;max-width:900px;min-height:0;-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);mask-image:linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);flex:0 auto;margin:0;font-size:clamp(22px,3vw,34px);position:relative;overflow:hidden}.context-text.fade-top{--fade-top:18%}.context-text.fade-bottom{--fade-bottom:18%}.context-lines{animation:.5s context-fade-in;display:block;position:relative}.context-lines.animate{transition:transform .45s}@keyframes context-fade-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.context-lines,.context-lines.animate{transition:none;animation:none}}.context-line{height:calc(var(--emphasis) * 1.3em);white-space:nowrap;align-items:center;column-gap:.3em;display:flex}.context-word.focused{font-weight:900;font-size:calc(var(--emphasis) * 1em);color:var(--color-primary)}.context-text.color-only .context-word.focused{font-weight:inherit;font-size:inherit}.break-overlay{--footer-h:64px;--sky-h:calc(100dvh - var(--footer-h));z-index:2000;padding-bottom:var(--footer-h);background:linear-gradient(160deg,#1d2b3a 0%,#2a2440 50%,#1f3a36 100%);justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:hidden}.break-footer{height:var(--footer-h);z-index:6;background-color:#00000040;border-top:1px solid #ffffff14;justify-content:center;align-items:center;gap:12px;padding:0 16px;display:flex;position:absolute;bottom:0;left:0;right:0}.music-button{color:#d7e3fc;cursor:pointer;background-color:#ffffff14;border:1px solid #ffffff40;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;padding:0;transition:background-color .3s,color .3s,box-shadow .3s;display:flex}.music-button:hover:not(:disabled){background-color:#ffffff29}.music-button.playing{color:#c9f2e6;animation:2s ease-in-out infinite music-pulse;box-shadow:0 0 12px 2px #c9f2e680}.music-button:disabled{opacity:.4;cursor:not-allowed}@keyframes music-pulse{0%,to{box-shadow:0 0 8px 1px #c9f2e659}50%{box-shadow:0 0 16px 4px #c9f2e699}}.music-credit{color:#b8c4d6;text-align:left;margin:0;font-size:.8rem;line-height:1.35}.music-credit a{color:#c9f2e6}@media (width<=480px){.break-overlay{--footer-h:96px}.music-credit{font-size:.72rem}}.break-panel{z-index:3;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#1e2234cc;border-radius:24px;width:min(440px,100vw - 32px);padding:30px 40px;animation:15s linear forwards panel-fade;position:relative;box-shadow:0 8px 40px #00000040}.break-panel.revealed{animation:.6s cubic-bezier(.34,1.56,.64,1) forwards panel-pop}@keyframes panel-fade{0%{opacity:1}to{opacity:0}}@keyframes panel-pop{0%{opacity:.4;transform:scale(.94)rotate(-1deg)}60%{opacity:1;transform:scale(1.04)rotate(.5deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes panel-show{0%{opacity:.4}to{opacity:1}}.break-panel h2{color:#c9f2e6;text-wrap:balance;justify-content:center;align-items:center;min-height:2.4em;margin:0 0 10px;font-size:2.2rem;line-height:1.2;display:flex}.break-timer{letter-spacing:.05em;color:#fff;font-variant-numeric:tabular-nums;font-size:4rem;font-weight:300}.break-panel p{color:#d7e3fc;margin:10px 0 24px}@property --glow-hue{syntax:"<number>";inherits:true;initial-value:180}.floater{white-space:nowrap;pointer-events:none;will-change:transform, opacity;transition:top .4s;animation-timing-function:linear;animation-fill-mode:forwards;position:absolute;left:0}.floater-ltr{animation-name:float-ltr}.floater-rtl{animation-name:float-rtl}.floater-text{font-size:min(24px, calc(var(--sky-h) * .03));box-shadow:0 0 10px 1px hsl(var(--glow-hue) 100% 70% / .3);text-shadow:0 0 4px hsl(var(--glow-hue) 100% 70% / .3);pointer-events:auto;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background-color:#ffffff12;border-radius:999px;padding:.4em 1em;line-height:1.3;transition:scale .3s,box-shadow .3s,text-shadow .3s,background-color .3s;animation:6s ease-in-out infinite float-bob;display:inline-block}.floater:hover{z-index:4;animation-play-state:paused;opacity:1!important}.floater:hover .floater-text{box-shadow:0 0 18px 4px hsl(var(--glow-hue) 100% 70% / .9);text-shadow:0 0 8px hsl(var(--glow-hue) 100% 70% / .9);background:linear-gradient(#ffffff24,#ffffff24),#23263a;animation:.5s ease-in-out infinite float-wiggle;scale:1.12}.floater.dragging{z-index:5}.floater.dragging .floater-text{cursor:grabbing}.floater.released:hover{animation-play-state:running}.floater-resume{animation-name:float-resume}@keyframes float-resume{0%{transform:translateX(var(--from-x));--glow-hue:var(--from-hue)}85%{opacity:1}to{transform:translateX(var(--to-x));opacity:0;--glow-hue:var(--to-hue)}}@keyframes float-ltr{0%{opacity:0;--glow-hue:0;transform:translate(-100%)}10%{opacity:1}90%{opacity:1}to{opacity:0;--glow-hue:300;transform:translate(100vw)}}@keyframes float-rtl{0%{opacity:0;--glow-hue:300;transform:translate(100vw)}10%{opacity:1}90%{opacity:1}to{opacity:0;--glow-hue:0;transform:translate(-100%)}}@keyframes float-bob{0%,to{transform:translateY(0)}50%{transform:translateY(calc(var(--sky-h) * .006))}}@keyframes float-wiggle{0%,to{transform:translate(0)rotate(0)}25%{transform:translate(-2px,1px)rotate(-1deg)}50%{transform:translate(1px,-1px)rotate(.8deg)}75%{transform:translate(2px,1px)rotate(-.5deg)}}@keyframes float-fade{0%,to{opacity:0}20%,80%{opacity:1}}@media (prefers-reduced-motion:reduce){.floater{animation-name:float-fade;left:50%;transform:translate(-50%)}.floater-text,.floater:hover .floater-text{animation:none}.break-panel.revealed{animation-name:panel-show}}