*{box-sizing:border-box}:root{font-family:Inter,system-ui,sans-serif;color:#111827;background:#f4f6f8;--scale:1}body{margin:0}.wrap{max-width:880px;margin:auto;padding:22px 16px 80px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}h1{margin:0;font-size:1.8rem}header p{margin:4px 0 0;color:#6b7280}.card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 8px 28px #1118270f;padding:18px}label{display:block;font-weight:650;margin-bottom:8px}textarea{width:100%;min-height:310px;resize:vertical;border:1px solid #d1d5db;border-radius:14px;padding:15px;font:inherit;line-height:1.55;outline:none}.row{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:14px;flex-wrap:wrap}.switches{display:inline-flex;background:#eef1f4;border-radius:11px;padding:3px}.switches button{border:0;background:transparent;padding:9px 13px;border-radius:9px}.switches .active{background:white;box-shadow:0 1px 4px #0002;font-weight:650}.primary,.play{border:0;background:#111827;color:white;border-radius:11px;padding:11px 16px;font-weight:650}.readerhead{display:flex;justify-content:space-between}.readerhead button,#settings,dialog button{border:0;background:transparent}.progress{height:5px;background:#e5e7eb;border-radius:9px;margin:14px 0 18px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:#111827}.chunk{padding:16px 12px;border-radius:12px;white-space:pre-wrap;font-size:calc(1.08rem * var(--scale));line-height:1.72;cursor:pointer}.chunk.current{background:#eef2fb;outline:1px solid #c7d2fe}.controls{display:flex;justify-content:center;gap:18px;align-items:center;position:sticky;bottom:10px;margin-top:24px}.controls button{width:50px;height:50px;border:1px solid #d1d5db;background:#fff;border-radius:50%;font-size:1.1rem}.controls .play{width:64px;height:64px;background:#111827;color:#fff}.controls button:disabled{opacity:.35}#info{color:#6b7280;font-size:.9rem;min-height:1.2em;margin:10px 0 0}dialog{border:0;border-radius:16px;width:min(420px,calc(100% - 32px));box-shadow:0 20px 60px #0004}dialog::backdrop{background:#11182770}.dh{display:flex;justify-content:space-between}.dh h2{margin:0}dialog label{margin-top:16px}select{display:block;width:100%;margin-top:7px;padding:10px;border:1px solid #d1d5db;border-radius:10px;background:white}dialog p{font-size:.86rem;color:#6b7280;margin-top:18px}@media(max-width:600px){.wrap{padding:14px 10px 70px}.card{padding:14px}textarea{min-height:42vh}.row{align-items:stretch}.switches{width:100%}.switches button{flex:1}.primary{width:100%}}
