.reader{background:#20231F;color:#F6F5ED;padding-bottom:40px}.reader-top{padding-top:18px;padding-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.reader-top strong{font-size:15px}.reader-top button,.reader-drawer button{background:#315C43;border:1px solid #F2D33C;border-radius:7px;color:#fff;padding:7px 13px;cursor:pointer}.reader-drawer{max-width:800px;margin:0 auto 16px;background:#315C43;padding:22px;border-radius:10px}.reader-drawer[hidden]{display:none}.reader-drawer a,.reader-drawer label{display:block;margin:7px 0}.reader-canvas{width:min(900px,95%);margin:0 auto;transition:width .15s}.reader-canvas header{text-align:center;padding:32px 14px;background:#1F3E2D}.reader-canvas header span{color:#F2D33C;letter-spacing:3px}.reader-canvas h1{font-size:32px;margin:9px 0}.panels{display:grid;grid-template-columns:1fr;gap:16px;margin:18px 0}.story-panel{display:flex;flex-direction:column;min-height:320px;justify-content:center;align-items:start;padding:clamp(20px,6vw,70px);border:5px solid #F6F5ED;background:#FFFDF5;color:#20231F}.story-panel:nth-child(even){background:#E7EFE7}.story-panel span{font-size:12px;letter-spacing:3px;font-weight:900;color:#315C43}.story-panel p{max-width:680px;font-size:clamp(20px,3vw,30px);font-weight:700;line-height:1.7}.reader.mode-double .panels{grid-template-columns:repeat(2,minmax(0,1fr))}.reader.mode-double .story-panel{padding:24px}.reader.mode-double .story-panel p{font-size:20px}.reader.mode-single .story-panel{display:none}.reader.mode-single .story-panel.active{display:flex}.reader-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px;padding-top:20px}.reader-bottom .progress{flex-basis:100%;height:5px;background:#414840}.reader-bottom #progress-bar{height:100%;background:#F2D33C;width:0}.reader-bottom .subtle{background:#FFFDF5}@media(max-width:720px){.reader.mode-double .panels{grid-template-columns:1fr}.reader.mode-double .story-panel p{font-size:22px}.reader-top{align-items:start}.reader-canvas{width:100%!important}.story-panel{min-height:290px;padding:22px}.story-panel p{font-size:22px}}
