.book{overflow:visible;perspective:2200px;isolation:isolate;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid #d7cfb8;border-radius:5px;background:#fffaf0;box-shadow:0 30px 60px #243a3428,0 3px 0 #d9d0bc,0 6px 0 #f7efdc,0 9px 0 #cdc5af,0 12px 0 #eee5d2}.book:after{left:calc(50% - 16px);width:32px;background:linear-gradient(90deg,transparent,#6e593b19 43%,#59452d30 50%,#fff8ed80 55%,transparent);z-index:4}.page{padding:26px 28px 23px;background:#fffcf3;display:flex;flex-direction:column;min-height:650px;overflow:hidden}.english-page{border-radius:5px 0 0 5px;background:linear-gradient(90deg,#fffdf6 93%,#eee6d4)}.vietnamese-page{border-radius:0 5px 5px 0;background:linear-gradient(90deg,#eee6d4,#fffdf6 7%)}.page-label{font-size:10px;color:#64826a;letter-spacing:2px}.storyTitle{font-size:28px;min-height:65px;margin:18px 0}.anime-scene{width:100%;aspect-ratio:1;margin:0 0 20px;border-radius:8px;background-image:url('images/bon-anime-atlas.png');background-repeat:no-repeat;background-size:300% 200%;box-shadow:inset 0 0 0 1px #705a2610;flex-shrink:0}.panel-0{background-position:0 0}.panel-1{background-position:50% 0}.panel-2{background-position:100% 0}.panel-3{background-position:0 100%}.panel-4{background-position:50% 100%}.panel-5{background-position:100% 100%}.english{font-size:19px;line-height:1.6}.vietnamese{font-size:16px;line-height:1.85;margin:0}.sentence{padding:3px 0}.tip{margin-top:auto;padding:12px;margin-bottom:0}.vocab{margin:14px 0 22px}.meaning{display:inline-block;font-size:12px;border:1px solid #e1ddcf;padding:8px 10px;border-radius:7px;color:#5f725e}.folio{margin-top:20px}.reward{font-size:30px;margin:15px}.turning-leaf{position:absolute;top:0;width:50%;height:100%;z-index:9;transform-style:preserve-3d;pointer-events:none;will-change:transform}.turn-forward{left:50%;transform-origin:left center;animation:real-forward 1150ms cubic-bezier(.37,.04,.28,1) both}.turn-backward{left:0;transform-origin:right center;animation:real-backward 1150ms cubic-bezier(.37,.04,.28,1) both}.leaf-face{position:absolute;inset:0;backface-visibility:hidden;transform-style:preserve-3d;overflow:hidden;border-radius:3px;background:#fffcf3}.leaf-face>.page{height:100%;width:100%;min-height:100%;border-radius:0}.leaf-front{transform:translateZ(.6px)}.leaf-back{transform:rotateY(180deg) translateZ(.6px)}.leaf-face:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#49301540,transparent 30%,#fff8e750 75%,#58432830);opacity:0;animation:paper-shade 1150ms ease both}.turn-backward .leaf-face:after{background:linear-gradient(-90deg,#49301540,transparent 30%,#fff8e750 75%,#58432830)}.stationary{position:absolute;top:0;width:50%;height:100%;z-index:6;overflow:hidden;pointer-events:none;animation:hold-page 1150ms step-end both}.stationary>.page{height:100%}.hold-left{left:0}.hold-right{right:0}.book.is-turning:before{content:'';position:absolute;z-index:5;inset:0;pointer-events:none;box-shadow:inset 0 0 60px #72552825;animation:paper-shade 1150ms ease both}@keyframes real-forward{0%{transform:rotateY(0) rotateZ(0)}45%{transform:rotateY(-82deg) rotateZ(-1.2deg)}100%{transform:rotateY(-180deg) rotateZ(0)}}@keyframes real-backward{0%{transform:rotateY(0) rotateZ(0)}45%{transform:rotateY(82deg) rotateZ(1.2deg)}100%{transform:rotateY(180deg) rotateZ(0)}}@keyframes paper-shade{0%,100%{opacity:0}40%,65%{opacity:1}}@keyframes hold-page{0%{opacity:1}51%,100%{opacity:0}}.quiz{font-size:14px}.quiz h3{line-height:1.6}.quiz button{padding:9px;font-size:13px}#quizTranslation{font-size:14px;line-height:1.7}#quizTranslation ol{padding-left:20px}.book .feedback{min-height:28px}.flip{animation:none}
@media(max-width:850px){.page{padding:20px;min-height:580px}.storyTitle{font-size:24px}.english{font-size:17px}.vietnamese{font-size:15px}}@media(max-width:580px){.book{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.page{padding:13px 11px;min-height:520px}.storyTitle{font-size:19px;min-height:53px;line-height:1.25;margin:12px 0}.page-label{font-size:8px;letter-spacing:1px}.anime-scene{border-radius:5px;margin-bottom:13px}.english{font-size:14px;line-height:1.65}.vietnamese{font-size:13px;line-height:1.8}.tip{padding:8px;font-size:10px;line-height:1.6}.word,.meaning{font-size:10px;padding:6px}.vocab{gap:4px;margin-bottom:14px}.folio{font-size:8px;letter-spacing:0;margin-top:14px}.quiz{font-size:12px}.quiz button{font-size:11px;padding:8px}.quiz .eyebrow{font-size:9px}.quiz h3{font-size:13px}#quizTranslation{font-size:12px}.book .feedback{font-size:11px}.book:after{display:block;width:16px;left:calc(50% - 8px)}}
/* Soft sheets rendered with StPageFlip. */
.curl-stage{position:absolute!important;left:0;top:0;width:100%;z-index:25;pointer-events:none;isolation:isolate;background:#fffdf6;border-radius:5px;overflow:visible}
.curl-sheet{background:#fffdf6;overflow:hidden;box-sizing:border-box}
.curl-sheet>.page{width:100%;max-height:100%;border-radius:0!important;box-sizing:border-box}
.curl-stage .stf__wrapper{height:100%!important;padding-bottom:0!important}
.curl-stage .stf__block{width:100%;height:100%}
.book.is-turning:before{display:none}
.music-level{display:inline-flex;align-items:center;gap:10px;margin:3px 0 12px}
#music-volume{width:115px;accent-color:#23634e;vertical-align:middle}
.curl-stage{overflow:hidden}

.volume-button{text-align:left;color:inherit;cursor:pointer;border:1px solid transparent;font-family:inherit;transition:background .2s,border-color .2s}.volume-button:hover,.volume-button:focus-visible{background:#dce9d8;border-color:#90ad92}.volume-button.selected{background:#dbe9d5;border-color:#83a47d}.open-label{display:block;color:#23634e;font-weight:700;margin-top:7px;font-size:11px}.series{gap:10px}

.volume-button{display:flex;align-items:center;gap:12px}.volume-art{display:block;flex:none;width:66px;height:76px;background-size:300% 200%;background-position:0 0;border-radius:6px;box-shadow:0 3px 8px #2b493020}.volume-meta{display:block}.volume-meta small{font-size:10px}.volume-meta strong{margin:3px 0}@media(max-width:580px){.volume-button{gap:8px;padding:8px;font-size:11px}.volume-art{width:43px;height:56px}.volume-meta small{font-size:9px}}