.sg-reader{user-select:none;flex-direction:column;flex:1;align-items:center;gap:.7rem;width:100%;min-height:0;display:flex}.sg-preload{opacity:0;pointer-events:none;z-index:-1;width:1px;height:1px;position:absolute;overflow:hidden}.sg-preload img{width:1px;height:1px}.sg-stage{perspective:2200px;touch-action:pan-y;flex:1;width:100%;min-height:0;position:relative}.sg-turn{z-index:2;transform-origin:50%;will-change:transform, opacity;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.sg-turn--fwd{animation:.5s cubic-bezier(.4,.15,.2,1) both sg-flip-fwd}.sg-turn--back{animation:.5s cubic-bezier(.4,.15,.2,1) both sg-flip-back}@keyframes sg-flip-fwd{0%{opacity:0;transform:translate(6%)rotateY(-14deg)scale(.97)}60%{opacity:1}to{opacity:1;transform:translate(0)rotateY(0)scale(1)}}@keyframes sg-flip-back{0%{opacity:0;transform:translate(-6%)rotateY(14deg)scale(.97)}60%{opacity:1}to{opacity:1;transform:translate(0)rotateY(0)scale(1)}}.sg-page{aspect-ratio:68/100;width:auto;max-width:100%;height:100%;max-height:100%;box-shadow:3px 3px 0 0 #efe8d6, 6px 6px 0 0 #e6dfcc, var(--shadow-lift);background-position:50%;background-size:cover;border-radius:6px;outline:1px solid #3a333014;position:relative;overflow:hidden;container-type:size}.sg-page picture,.sg-page img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.sg-page img{opacity:0;transition:opacity .5s}.sg-page img.is-loaded{opacity:1}@media (aspect-ratio<=7/10){.sg-page{width:100%;height:auto}}.sg-verse{z-index:2;pointer-events:none;font-family:var(--font-verse);color:var(--sg-ink);justify-content:center;align-items:center;font-size:clamp(.66rem,3.6cqh,1.55rem);font-weight:600;line-height:1.14;display:flex;position:absolute}.sg-verse__plate{background:color-mix(in srgb, var(--sg-cream) 88%, transparent);backdrop-filter:blur(2px);text-align:center;text-wrap:balance;opacity:0;border-radius:.4em .55em .45em .6em;max-width:100%;padding:.28em .62em;animation:.5s cubic-bezier(.2,.9,.3,1) .22s both sg-verse-in;box-shadow:0 2px 12px -5px #3a333073}.sg-verse__line{display:block}.sg-verse__line+.sg-verse__line{margin-top:.16em}@keyframes sg-verse-in{0%{opacity:0;transform:translateY(.4em)rotate(-.8deg)}to{opacity:1;transform:translateY(0)rotate(0)}}.sg-zone{z-index:3;cursor:pointer;background:0 0;border:0;width:42%;padding:0;position:absolute;top:0;bottom:0}.sg-zone--prev{cursor:w-resize;left:0}.sg-zone--next{cursor:e-resize;right:0}.sg-zone:disabled{cursor:default}.sg-controls{align-items:center;gap:clamp(.6rem,3vw,1.4rem);width:min(620px,92%);display:flex}.sg-btn{width:54px;height:54px;font-size:1.9rem;line-height:1;font-family:var(--font-display);color:var(--sg-ink);border:3px solid var(--sg-ink);cursor:pointer;box-shadow:3px 3px 0 var(--sg-ink);background:#fff;border-radius:50%;flex:none;place-items:center;transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .12s;display:grid}.sg-btn:hover:not(:disabled){box-shadow:5px 5px 0 var(--sg-ink);transform:translate(-1px,-1px)}.sg-btn:active:not(:disabled){box-shadow:1px 1px 0 var(--sg-ink);transform:translate(2px,2px)}.sg-btn:disabled{opacity:.35;cursor:default;box-shadow:2px 2px 0 var(--sg-ink)}.sg-meter{flex:1;grid-template-columns:1fr auto;grid-template-areas:"label count""scrub scrub";align-items:center;gap:.25rem .6rem;display:grid}.sg-meter__label{font-family:var(--font-display);color:var(--sg-ink);grid-area:label;font-weight:500}.sg-meter__count{font-variant-numeric:tabular-nums;color:var(--sg-ink-soft);grid-area:count;font-size:.9rem}.sg-scrub{appearance:none;background:var(--sg-sky);border:2px solid var(--sg-ink);cursor:pointer;border-radius:999px;grid-area:scrub;width:100%;height:8px}.sg-scrub::-webkit-slider-thumb{appearance:none;background:var(--sg-red);border:3px solid var(--sg-ink);cursor:grab;border-radius:50%;width:22px;height:22px}.sg-scrub::-moz-range-thumb{background:var(--sg-red);border:3px solid var(--sg-ink);cursor:grab;border-radius:50%;width:22px;height:22px}@media (prefers-reduced-motion:reduce){.sg-turn--fwd,.sg-turn--back{animation:.25s both sg-fade}@keyframes sg-fade{0%{opacity:0}to{opacity:1}}.sg-page img{transition:none}.sg-verse__plate{animation:.3s both sg-fade}}
