:root{--primary:#5865f2;--primary-dark:#4752c4;--bg:#fafafa;--paper:#fff;--text:#1a1a1a;--muted:#686878;--line:#e9e9ef;--tint:#eef0fe;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait}button:focus-visible,a:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--primary);outline-offset:5px}[hidden]{display:none!important}svg{flex:none}button svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}a{color:var(--primary)}
.app-shell{min-height:100svh;max-width:1600px;margin:auto;display:flex;flex-direction:column;padding:0 5.5vw}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:110px;gap:16px}.wordmark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-size:21px;font-weight:750;letter-spacing:-.7px;white-space:nowrap}.brand-mark{width:28px;height:28px;color:var(--primary)}.wordmark-light{font-weight:450}.brand-dot{color:var(--primary)}.text-button{background:none;border:0;color:var(--muted);font-size:13px;min-width:44px;min-height:44px;padding:10px}.text-button:hover{color:var(--primary)}
main{width:min(100%,860px);margin:0 auto;display:flex;flex:1;flex-direction:column;align-items:center;padding-top:22px}.language-area{text-align:center;position:relative;z-index:1}.language-area label{display:block;color:var(--muted);font-size:12px;margin-bottom:11px;letter-spacing:.02em}.select-wrap{display:flex;align-items:center;position:relative}.select-wrap>svg{width:18px;height:18px;stroke:var(--primary);stroke-width:1.5;position:absolute;inset-inline-start:18px;pointer-events:none}.select-wrap>.chevron{inset-inline-start:auto;inset-inline-end:16px;width:16px;stroke:var(--muted)}select{appearance:none;background:var(--paper);color:var(--text);border:1px solid var(--line);border-radius:100px;padding:13px 44px;min-width:220px;text-align:center;font-size:16px;font-weight:550;cursor:pointer;max-width:100%;height:49px}select:hover{border-color:#b8bef8}
.reading-area{flex:1;width:100%;display:flex;align-items:center;justify-content:center;position:relative;min-height:310px;padding:42px 0 36px}.empty-state{text-align:center;animation:arrive .45s ease both}.sound-symbol{display:flex;height:54px;gap:5px;align-items:center;justify-content:center;margin:0 auto 25px;color:var(--primary)}.sound-symbol span{width:5px;height:18px;border-radius:6px;background:currentColor}.sound-symbol span:nth-child(2),.sound-symbol span:nth-child(4){height:32px}.sound-symbol span:nth-child(3){height:46px}h1{font-size:clamp(36px,4.4vw,60px);line-height:1.09;font-weight:620;letter-spacing:-2.8px;margin:0 0 19px}.empty-state p{font-size:15px;line-height:1.65;color:var(--muted);margin:0}.captions{width:100%;max-height:46svh;min-height:160px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ddd transparent;padding:24px 28px 40px;font-size:clamp(26px,3.2vw,40px);line-height:1.48;letter-spacing:-.6px;overflow-wrap:anywhere}.captions p{margin:0 0 22px;color:#64646d;animation:arrive .2s ease}.captions p:last-child{color:var(--text)}.follow-button{position:absolute;bottom:16px;inset-inline-end:24px;border:1px solid var(--line);border-radius:24px;background:white;padding:12px 18px;color:var(--primary);font-size:13px;box-shadow:0 4px 16px #1a1a1a08}
.controls{width:min(100%,360px);text-align:center;padding-bottom:28px}.session-status{display:flex;gap:7px;align-items:center;justify-content:center;color:var(--muted);font-size:12px;min-height:34px;margin-bottom:10px}.status-dot{width:6px;height:6px;border-radius:50%;background:#b7b7c4}.primary-button{width:100%;min-height:60px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:16px;background:var(--primary);color:white;font-size:16px;font-weight:600;box-shadow:0 5px 12px #5865f218;transition:background .16s,transform .16s}.primary-button:hover{background:var(--primary-dark)}.primary-button:active{transform:scale(.985)}.privacy-note{font-size:11px;color:var(--muted);line-height:1.6;margin:14px -8px 0}.message{font-size:13px;line-height:1.5;color:#913a3a;margin:0 0 15px;padding:0 5px}.listening .status-dot{background:var(--primary);animation:breathe 1.6s ease-in-out infinite}.listening .sound-symbol span{animation:wave 1.1s ease-in-out infinite alternate}.listening .sound-symbol span:nth-child(2){animation-delay:-.4s}.listening .sound-symbol span:nth-child(3){animation-delay:-.7s}.listening .sound-symbol span:nth-child(4){animation-delay:-.2s}.starting .status-dot{animation:breathe 1s infinite;background:var(--primary)}
footer{display:flex;justify-content:center;gap:12px;color:var(--muted);font-size:11px;padding:26px 0 max(25px,env(safe-area-inset-bottom));line-height:1.5}.footer-dot{color:#b6b6be}dialog{border:1px solid var(--line);border-radius:22px;padding:26px;max-width:480px;width:calc(100% - 36px);max-height:85svh;color:var(--text);background:var(--paper);box-shadow:0 20px 80px #0002}dialog::backdrop{background:#13152a50;backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:10px}dialog h2{font-size:21px;letter-spacing:-.5px}dialog h3{font-size:14px;margin:25px 0 6px}dialog p,dialog a{font-size:13px;line-height:1.7;color:var(--muted)}dialog a{color:var(--primary)}.close-button{font-size:27px;border:0;background:var(--bg);color:var(--muted);width:44px;height:44px;border-radius:50%}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.noscript{text-align:center;padding:20px}
@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes breathe{50%{opacity:.4}}@keyframes wave{to{transform:scaleY(.45)}}
@media(max-width:600px){.app-shell{padding:0 24px}.topbar{min-height:84px}.wordmark{font-size:19px;gap:7px}.brand-mark{width:25px}.topbar .text-button{font-size:12px}main{padding-top:14px}.reading-area{min-height:270px;padding:32px 0}h1{letter-spacing:-1.7px;font-size:43px}.sound-symbol{margin-bottom:25px}.captions{max-height:44svh;padding:18px 0 35px;font-size:29px}.controls{padding-bottom:12px}.primary-button{min-height:60px}footer{gap:8px;padding-top:22px;font-size:10px;flex-wrap:wrap}.follow-button{inset-inline-end:0}}
@media(max-height:670px){.topbar{min-height:70px}main{padding-top:0}.reading-area{min-height:210px;padding:20px 0}.sound-symbol{height:40px;margin-bottom:16px}h1{font-size:36px;margin-bottom:12px}.controls{padding-bottom:5px}footer{padding-top:15px;padding-bottom:15px}}
h1{white-space:pre-line}html[lang=ar] h1,html[lang=hi] h1,html[lang=bn] h1{letter-spacing:normal}html[dir=rtl] .captions{letter-spacing:normal}
@media(min-width:601px){.topbar{min-height:96px}main{padding-top:14px}.reading-area{min-height:260px;padding:24px 0}.sound-symbol{height:48px;margin-bottom:20px}h1{font-size:clamp(36px,4.2vw,54px);letter-spacing:-2px}.controls{padding-bottom:20px}footer{padding-top:20px;padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.reading-tools{width:100%;display:flex;justify-content:flex-end;gap:4px;height:44px;margin:8px 0 -44px;position:relative;z-index:2}.view-button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:17px;font-weight:550}.view-button:hover{background:var(--tint);color:var(--primary)}.view-button .collapse-icon{display:none}.reading-mode .expand-icon{display:none}.reading-mode .collapse-icon{display:block}.captions p{animation:none}.option-label{display:block;font-size:13px;color:var(--muted);margin:20px 0 8px}#reading-dialog select{width:100%;min-width:0;text-align:start;padding:10px 16px;border-radius:12px;appearance:auto}body[data-text-size=large] .captions{font-size:clamp(34px,4vw,48px)}body[data-text-size=largest] .captions{font-size:clamp(42px,5vw,60px)}
body.reading-mode{overflow:hidden}.reading-mode .app-shell{position:fixed;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;min-height:0;padding:max(8px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:var(--bg)}.reading-mode .topbar,.reading-mode .language-area,.reading-mode footer,.reading-mode .privacy-note{display:none}.reading-mode main{width:100%;max-width:1100px;padding:0;min-height:0}.reading-mode .reading-tools{flex-shrink:0;margin:0;height:44px}.reading-mode .reading-area{min-height:0;padding:0;overflow:hidden}.reading-mode .captions{height:100%;max-height:none;min-height:0;padding:16px 12px 40px}.reading-mode .controls{flex-shrink:0;padding:0;position:relative}.reading-mode .session-status{margin-bottom:4px;min-height:24px}.reading-mode .primary-button{min-height:48px}.reading-mode .message{margin-bottom:6px}.reading-mode .follow-button{bottom:10px;inset-inline-end:12px}.reading-mode .empty-state{padding:12px 0}.reading-mode .empty-state h1{font-size:clamp(28px,4vw,54px)}
@media(max-height:450px){.reading-mode .sound-symbol{display:none}.reading-mode .session-status{display:none}.reading-mode .controls{width:220px}.reading-mode .primary-button{min-height:44px}.reading-mode .reading-tools{height:40px}.reading-mode .empty-state h1{font-size:28px;margin-bottom:8px}}
