:root{--ink:#111;--paper:#fff;--muted:#666;--line:#e3e3e3}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased}
.tape{height:22px;background:repeating-linear-gradient(-45deg,var(--ink) 0 12px,var(--paper) 12px 24px);border-bottom:2px solid var(--ink);flex:none}
.tape.b{border-bottom:0;border-top:2px solid var(--ink)}
main{flex:1;width:100%;max-width:460px;margin:0 auto;padding:28px 20px 32px;display:flex;flex-direction:column;align-items:center;text-align:center}
.book{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ch{margin-top:18px;font-size:13px;font-weight:800;letter-spacing:.1em;border:2px solid var(--ink);padding:4px 10px}
h1{margin-top:14px;font-size:clamp(26px,8vw,34px);line-height:1.12;font-weight:900;letter-spacing:-.01em}
.play{margin:30px 0 8px;width:132px;height:132px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 0 8px var(--paper),0 0 0 11px var(--ink);transition:transform .12s}
.play:active{transform:scale(.96)}
.play svg{width:52px;height:52px}
.play .pause{display:none}
.playing .play .pause{display:block}.playing .play .tri{display:none}
.hint{font-size:14px;color:var(--muted);margin-top:14px;min-height:20px}
.bar{width:100%;height:6px;background:var(--line);border-radius:3px;margin-top:22px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ink)}
.time{width:100%;display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.quote{margin-top:28px;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:19px;line-height:1.45}
.next{margin-top:auto;padding-top:34px;font-size:14px;color:var(--muted)}
.next b{color:var(--ink)}
.soon{display:none;margin-top:18px;font-size:14px;border:2px dashed var(--ink);padding:10px 14px}
.missing .soon{display:block}.missing .play{opacity:.25;pointer-events:none}
footer{font-size:11px;color:var(--muted);text-align:center;padding:14px 20px}
ul.list{list-style:none;width:100%;margin-top:26px;text-align:left}
ul.list li{border-bottom:1px solid var(--line)}
ul.list a{display:flex;gap:12px;padding:12px 2px;color:var(--ink);text-decoration:none;font-size:15px}
ul.list a span{font-weight:800;min-width:26px}