.reader{gap:16px;width:100%;display:grid}.book{perspective:2200px;background:var(--pine);touch-action:pan-y;border-radius:6px 6px 10px 10px;padding:12px 12px 16px;position:relative;box-shadow:0 2px #12291f,0 30px 60px -28px #0f1e16bf}.spread{background:var(--card);transform-origin:50%;min-height:clamp(320px,42vw,560px);animation:turn-in .7s var(--ease) both;border-radius:3px;grid-template-columns:1fr 1fr;display:grid}.spread[data-dir="-1"]{animation-name:turn-back}@keyframes turn-in{0%{opacity:0;transform:rotateY(-14deg)translate(3%)}}@keyframes turn-back{0%{opacity:0;transform:rotateY(14deg)translate(-3%)}}.leaf{flex-direction:column;justify-content:center;min-width:0;padding:clamp(14px,2.2vw,28px);display:flex;position:relative}.leaf-art{background:linear-gradient(90deg,#0000 88%,#1f2a221f)}.leaf-text{background:linear-gradient(270deg, transparent 88%, #1f2a2224), var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.leaf-art img{object-fit:cover;border-radius:4px;width:100%;height:100%;max-height:min(500px,60svh);box-shadow:0 1px #1f2a2233,0 10px 22px -12px #1f2a228c}.page-text{text-wrap:pretty;margin:0;font-size:clamp(16px,1.45vw,20px);line-height:1.62}.page-text span{-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:4px;padding:0 1px;transition:background-color .4s,color .4s}.page-text span.on{background:#f2c46b99}.page-text span.read{color:#5d6656}.page-text:first-letter{font-family:var(--f-display), serif;float:left;color:var(--vermilion);margin:.06em .08em 0 0;font-size:3.1em;line-height:.82}.folio{font-family:var(--f-display), serif;color:var(--muted);font-size:14px;position:absolute;bottom:12px;right:18px}.title-page{text-align:center;justify-items:center;gap:14px;padding:10px 0;display:grid}.title-page h2{text-wrap:balance;font-size:clamp(26px,3vw,44px);line-height:1.08}.tp-sub{font-family:var(--f-book), serif;color:var(--vermilion);margin:0;font-size:18px;font-style:italic}.tp-mark{background:var(--ochre);width:14px;height:14px;box-shadow:18px -18px 0 -4px var(--sage), -18px 18px 0 -4px var(--sage);margin:6px 0 8px;transform:rotate(45deg)}.reader-bar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.turn{border:2px solid var(--line);background:var(--card);width:44px;height:44px;transition:transform .3s var(--ease-pop), border-color .2s;border-radius:50%;place-items:center;font-size:18px;display:grid}.turn:hover:not(:disabled){border-color:var(--ink);transform:scale(1.08)}.turn:disabled{opacity:.35;cursor:default}.dots{flex-wrap:wrap;gap:6px;display:flex}.dots button{border:2px solid var(--moss);width:12px;height:12px;transition:background .2s, transform .3s var(--ease-pop);background:0 0;border-radius:50%;padding:0}.dots button[aria-selected=true]{background:var(--moss);transform:scale(1.25)}.listen{align-items:center;gap:10px;margin-left:auto;display:flex}.play{background:var(--vermilion);width:52px;height:52px;box-shadow:0 2px 0 var(--brick), 0 10px 20px -10px #b93d24cc;transition:transform .3s var(--ease-pop);border:0;border-radius:50%;place-items:center;display:grid}.play:hover{transform:scale(1.07)rotate(-4deg)}.play svg{width:22px;height:22px;fill:var(--card)}.listen-label{font-weight:800}.listen-time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px}@media (max-width:760px){.book{padding:8px 8px 12px}.spread{grid-template-columns:1fr;min-height:0}.leaf-art{background:0 0;padding-bottom:0}.leaf-art img{aspect-ratio:4/3;max-height:46svh}.leaf-text{background-image:none;justify-content:flex-start;min-height:220px}.listen{width:100%;margin-left:0}}