@font-face{font-family:Inter;src:url('InterVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100dvh;background:#eae9e4;color:#303e30;font:16px Inter,system-ui,sans-serif}
#pages{overflow:auto;padding:20px 12px;overscroll-behavior:contain;scrollbar-gutter:stable;touch-action:pan-x pan-y pinch-zoom}.page{position:relative;width:100%;max-width:940px;margin:0 auto 18px;background:#fff;box-shadow:0 1px 8px #00000012}.page:last-child{margin-bottom:0}canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.words{position:absolute;inset:0;width:100%;height:100%}.word{fill:transparent;pointer-events:all;cursor:pointer}.word:hover{fill:#c7e376;fill-opacity:.3}.word.active{fill:#c7e376;fill-opacity:.5;stroke:#718c40;stroke-width:.7}.word:focus-visible{outline:none;stroke:#557c35;stroke-width:1.5}
footer{display:flex;align-items:center;justify-content:center;gap:26px;background:#fffefa;border-top:1px solid #303e301c;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}button{font:500 16px Inter,system-ui,sans-serif;color:inherit;border:0;background:transparent;min-width:48px;min-height:48px;border-radius:50%;cursor:pointer;touch-action:manipulation}button:hover{background:#e9eddf}#play{min-width:84px;border-radius:28px;background:#405b3b;color:#fffefa}#play:hover{background:#324c2e}button:disabled{opacity:.45;cursor:default}button:focus-visible,#pages:focus-visible{outline:2px solid #64824d;outline-offset:-2px}#status{position:fixed;z-index:2;top:12px;left:50%;transform:translateX(-50%);max-width:90%;padding:12px 18px;border-radius:8px;background:#fffefa;box-shadow:0 2px 12px #00000018;font-size:14px;margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@media(max-width:600px){#pages{padding:8px 4px}.page{margin-bottom:8px;box-shadow:none}footer{gap:30px}}

/* A quiet rounded frame and three circular transport controls. */
html{background:#eae9e4;padding:10px}body{height:calc(100dvh - 20px);border:1px solid #303e301c;border-radius:20px;overflow:hidden}#play{min-width:54px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center}button{width:48px;height:48px;background:#eff0e9;border:1px solid #303e3017}button svg{width:25px;height:25px;fill:currentColor;display:block}#play svg{margin:0}footer{gap:22px}#pages{border-radius:19px 19px 0 0}.page{border-radius:5px;overflow:hidden}@media(max-width:600px){html{padding:6px}body{height:calc(100dvh - 12px);border-radius:16px}#pages{border-radius:15px 15px 0 0}}

footer{border-radius:0 0 19px 19px}@media(max-width:600px){footer{border-radius:0 0 15px 15px}}

/* Timeline stays comfortably tappable without taking space from the PDF. */
footer{padding:8px 20px calc(10px + env(safe-area-inset-bottom));display:block}.audio-panel{max-width:940px;margin:auto}.timeline{display:flex;align-items:center;gap:12px;color:#68745f;font-size:12px;font-variant-numeric:tabular-nums}.timeline span{min-width:38px}.timeline span:last-child{text-align:right}.timeline input{--progress:0%;appearance:none;-webkit-appearance:none;flex:1;min-width:0;height:32px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}.timeline input::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,#496741 var(--progress),#dedfd5 var(--progress))}.timeline input::-moz-range-track{height:4px;border-radius:4px;background:#dedfd5}.timeline input::-moz-range-progress{height:4px;border-radius:4px;background:#496741}.timeline input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:2px solid #fffefa;border-radius:50%;background:#496741;box-shadow:0 0 0 1px #49674133}.timeline input::-moz-range-thumb{width:11px;height:11px;border:2px solid #fffefa;border-radius:50%;background:#496741}.timeline input:focus-visible{outline:2px solid #64824d;outline-offset:0;border-radius:5px}.transport{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.play-buttons{grid-column:2;display:flex;align-items:center;gap:22px}#speed{grid-column:3;justify-self:end;max-width:80px;border:0;background:transparent;color:#52634b;font:500 14px Inter,system-ui,sans-serif;min-height:44px;padding:6px;cursor:pointer;border-radius:8px}#speed:focus-visible{outline:2px solid #64824d}#play{width:50px;min-width:50px;height:50px;min-height:50px}@media(max-width:600px){footer{padding:6px 12px calc(8px + env(safe-area-inset-bottom))}.timeline{gap:8px;font-size:12px}.timeline input{height:36px}#speed{font-size:16px;max-width:75px}.play-buttons{gap:14px}.play-buttons button{width:44px;min-width:44px;height:44px;min-height:44px}#play{width:50px;min-width:50px;height:50px;min-height:50px}}@media(max-width:350px){.play-buttons{gap:6px}#speed{font-size:14px;max-width:64px}}

/* Each line remains one target on the original page, including untimed words. */
body[data-highlight=line] .word-layer,body[data-highlight=word] .line-layer{display:none}
.printed-line{fill:transparent;pointer-events:all;cursor:pointer}
@media(hover:hover){.printed-line:hover{fill:#c7e376;fill-opacity:.22}}
.printed-line.active{fill:#c7e376;fill-opacity:.38;stroke:#718c40;stroke-opacity:.65;stroke-width:.6}
.printed-line:focus-visible{outline:none;stroke:#557c35;stroke-width:1.5}
.mode-control{grid-column:1;grid-row:1;justify-self:start;display:inline-grid;grid-template-columns:minmax(0,1fr) 16px;align-items:center;max-width:84px;min-width:0;color:#52634b}
#highlight-mode{grid-column:1/-1;grid-row:1;appearance:none;width:100%;min-width:0;min-height:48px;padding:6px 18px 6px 4px;border:0;border-radius:8px;background:transparent;color:inherit;font:500 14px Inter,system-ui,sans-serif;cursor:pointer}
.mode-control svg{grid-column:2;grid-row:1;pointer-events:none;fill:none;stroke:currentColor}
#highlight-mode:focus-visible{outline:2px solid #64824d;outline-offset:0}
@media(max-width:600px){#highlight-mode{font-size:16px}.mode-control{max-width:78px}}
@media(max-width:350px){footer{padding-left:8px;padding-right:8px}.play-buttons{gap:4px}}