body{background:#e6e5e0;color:#25312d;background-image:radial-gradient(ellipse at 50% 30%,#f7f6f1 0%,#deddd8 85%)}header{background:#f8f8f4;padding:18px 4vw;border-bottom:1px solid #cccac1}header .logo{font-size:24px;color:#244738}main{max-width:1500px;padding:25px 4vw 65px}main h1{font-family:Hand,Arial,sans-serif;letter-spacing:-.02em;font-size:clamp(45px,6vw,74px);line-height:1.03}.eyebrow{letter-spacing:1.4px;font-size:12px}.book-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 18px;font-size:14px}.book-top .trail{color:#5e665c}.book-top a{text-decoration:none}.book-stage{perspective:2400px;padding:0 8px 13px;position:relative}.spread{display:grid;grid-template-columns:1fr 1fr;position:relative;isolation:isolate;border:1px solid #c7c0aa;border-radius:5px 12px 12px 5px;box-shadow:0 2px 0 #e2ddce,0 5px 0 #fffbed,0 6px 0 #c8c2b4,0 10px 0 #eee8db,0 11px 0 #bbb4a5,0 28px 38px #282c252b;background:#fffdf5;transform-origin:center;min-height:640px}.spread:after{content:'';position:absolute;pointer-events:none;inset:0 auto 0 calc(50% - 16px);width:32px;background:linear-gradient(90deg,transparent,#756b5015 40%,#5c544430 49%,#ffffff80 53%,transparent);z-index:2}.paper{padding:32px 35px 54px;min-width:0;position:relative;background-color:#fffef8;background-image:radial-gradient(#927c5110 .6px,transparent .8px);background-size:5px 5px}.paper:first-child{border-radius:4px 0 0 4px}.paper:last-child{border-radius:0 11px 11px 0;background-color:#fffdf7}.paper h2,.paper h3{font-family:Hand,Arial,sans-serif;letter-spacing:0;line-height:1.08}.paper h2{font-size:38px;margin:12px 0 22px}.paper h3{font-size:29px}.paper p{font-size:16px;line-height:1.65}.page-no{position:absolute;bottom:17px;left:35px;right:35px;display:flex;justify-content:space-between;font-size:12px;color:#868270}.paper .rule{background:#e9f1db85;border-left:3px solid #6d8952;padding:14px 18px;transform:rotate(-.4deg)}.paper .example{font-family:Hand;font-size:30px;line-height:1.15;padding:5px 8px;color:#285778}.teacher-intro{display:flex;gap:20px;align-items:center;margin:25px 0}.teacher-intro img{width:110px;height:135px;object-fit:cover;object-position:50% 15%;padding:5px;background:white;box-shadow:1px 3px 9px #0002;transform:rotate(-3deg)}.teacher-intro p{font-size:15px;margin:0}.signature{font-family:Hand;font-size:29px;color:#285778}.cover-title{font-family:Hand;font-size:clamp(52px,5.8vw,86px);line-height:.95;letter-spacing:-1px;margin:24px 0;color:#254937}.cover-title span{display:block;color:#b94c37}.cover-note{font-family:Hand;font-size:25px;color:#6f7566}.tape-label{display:inline-block;padding:3px 12px;background:#efda9c8c;font-family:Hand;font-size:23px;transform:rotate(-2deg)}.cover-art{width:100%;height:210px;object-fit:contain;mix-blend-mode:multiply;margin:6px 0}.contents-item{display:grid;grid-template-columns:48px 1fr 22px;gap:12px;text-decoration:none;padding:18px 0;border-bottom:1px dashed #c8c9b8;align-items:center}.contents-item b{font-family:Hand;font-size:31px;color:#285778}.contents-item strong{display:block;font-size:17px}.contents-item small{font-size:14px;color:#72766b}.teacher-tip{display:flex;align-items:flex-start;gap:12px;padding:17px;background:#eef1e3;border-radius:2px;margin:22px 0 12px;border:1px solid #d3d9c5}.teacher-tip img{width:43px;height:53px;object-fit:cover;object-position:50% 12%;border-radius:3px}.teacher-tip p{margin:0;font-size:14px;line-height:1.5}.teacher-tip b{display:block;color:#315a45;margin-bottom:3px}.book-controls{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:28px 8px 0}.book-controls p{margin:0;text-align:center;font-size:14px;color:#636b5e}.btn{background:#284f3b;border-color:#284f3b;border-radius:4px}.btn.light{background:#e4eccf;border-color:#bac7a5;color:#284f3b}.btn.secondary{background:#fffdf7;color:#344c3b;border-color:#b7bfae}.book-controls .btn{min-width:115px;text-align:center}.book-help{text-align:center;font-size:13px;color:#76796e;margin-top:16px}.book-levels{display:flex;gap:8px}.book-levels a{padding:5px 10px;background:#fffdf7;border:1px solid #c9cbbf;border-radius:3px;font-size:13px;text-decoration:none}.book-levels .active{background:#284f3b;color:white}.lesson-art{width:100%;height:270px;object-fit:contain;mix-blend-mode:multiply}.sketch-caption{font-family:Hand;font-size:25px;text-align:center;color:#285778}.word-tags{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0}.word-tags span{font-family:Hand;font-size:25px;padding:3px 12px;background:#e9f0f4;border-bottom:2px solid #adc6d3;transform:rotate(-1deg)}.paper .context{background:#f5f0e3;border:1px solid #d4cbb5;border-radius:0;padding:20px;font-size:16px}.paper .option{background:#fffefb;font-size:15px;padding:9px;border-radius:3px}.paper legend{font-size:16px}.paper fieldset{margin:18px 0}.paper .actions{gap:8px}.paper .actions .btn{font-size:14px;padding:10px 13px}.paper textarea{min-height:230px;line-height:1.8;background:repeating-linear-gradient(#fffefb,#fffefb 29px,#ccd7df 30px);border-color:#c5cabe}.paper .vocab{font-size:16px}.paper select{font-size:15px}.step-label{color:#956541;font-family:Hand;font-size:25px}.paper .feedback{font-size:14px}.paper #score{font-size:15px}.paper .muted{font-size:14px}.paper details{font-size:15px}.paper .check{font-size:15px}.grammar-table{width:100%;border-collapse:collapse;font-family:Hand;font-size:25px;margin:20px 0;background:#fff}.grammar-table th,.grammar-table td{padding:9px 5px;border:1px solid #a9bbb8;text-align:center}.grammar-table th{background:#e6f0dc;font-size:22px}.grammar-table strong{color:#b9362e}.grammar-note{font-family:Hand;font-size:27px!important;padding:10px;border-bottom:3px solid #e8cd66}.flip-in{animation:bookZoom .65s cubic-bezier(.2,.75,.2,1)}.flip-sheet{position:absolute;inset:0 0 0 50%;background:linear-gradient(100deg,#ebe7db,#fffdf6);transform-origin:left center;backface-visibility:hidden;z-index:6;pointer-events:none;border-radius:0 10px 10px 0;box-shadow:8px 0 20px #0002;animation:pageTurn .65s ease-in forwards}.flip-sheet.backward{inset:0 50% 0 0;transform-origin:right center;animation-name:pageBack}@keyframes pageTurn{0%{transform:rotateY(0);opacity:1}90%{opacity:.8}100%{transform:rotateY(-165deg);opacity:0}}@keyframes pageBack{0%{transform:rotateY(0);opacity:1}90%{opacity:.8}100%{transform:rotateY(165deg);opacity:0}}@keyframes bookZoom{from{transform:scale(.975);opacity:.65}to{transform:scale(1);opacity:1}}.reveal{animation:none}.intro h1{font-family:Hand}.card{background:#fffdf5;border-radius:4px}.card.featured{background:#e5edd7}.panel{background:#fffdf6;border-radius:4px}.banner{background:#284f3b}footer{background:#f3f3ec;margin-top:20px}.book-progress{width:100%;height:3px;background:#cdd1c4;margin-top:20px}.book-progress span{display:block;height:100%;background:#537d58;transition:width .5s}.book-index li{padding:10px 0}.pdf-bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.pdf-bar a{font-size:14px}.notebook{background:#fffef8;padding:18px;background-image:linear-gradient(#8cb7d420 1px,transparent 1px),linear-gradient(90deg,#8cb7d420 1px,transparent 1px);background-size:24px 24px}.notebook h3{margin-top:0}@media(max-width:1000px){.paper{padding:25px 24px 50px}.teacher-intro{gap:14px}.teacher-intro img{width:86px;height:112px}.cover-title{font-size:62px}.book-levels{gap:4px}.book-levels a{padding:5px 7px}}@media(max-width:720px){main{padding:22px 12px 45px}.spread{grid-template-columns:1fr;min-height:0}.spread:after{display:none}.paper{padding:26px 24px 50px;min-height:540px}.paper.mobile-hidden{display:none}.paper:first-child,.paper:last-child{border-radius:4px 9px 9px 4px}.book-top{flex-wrap:wrap;gap:10px}.book-levels{width:100%;justify-content:center}.book-controls{margin:24px 0 0;gap:6px}.book-controls .btn{min-width:90px;padding:11px 12px;font-size:14px}.book-controls p{font-size:12px}.cover-title{font-size:70px}.cover-art{height:220px}.flip-sheet{inset:0!important}.book-help{font-size:12px}.teacher-intro img{width:100px;height:128px}}@media(prefers-reduced-motion:reduce){.flip-sheet{display:none}.flip-in{animation:none}}@media print{.book-top,.book-controls,.book-help,.pdf-bar,.teacher-tip,.book-progress{display:none}.spread{display:block;box-shadow:none;border:0}.spread:after{display:none}.paper,.paper.mobile-hidden{display:block!important;break-after:page;background:white;min-height:0}.page-no{display:none}}

/* Ringbinder: metal rings join the two punched paper stacks. */
.book-stage{background:#295176;border-radius:12px;padding:15px 18px 24px;box-shadow:0 22px 38px #183b4925}.spread{border-radius:2px;box-shadow:0 3px 0 #e2e0d4,0 6px 0 #fffef7,0 8px 0 #cbcabe;min-height:640px}.spread:after{width:38px;left:calc(50% - 19px);background:linear-gradient(90deg,#fff0,#a0a4a029 42%,#8f9893 49%,#d5dbd3 52%,#fff0)}.paper:first-child{padding-right:45px}.paper:last-child{padding-left:45px}.binder-rings{position:absolute;z-index:5;left:calc(50% - 32px);top:55px;bottom:55px;width:64px;display:flex;flex-direction:column;justify-content:space-around;pointer-events:none}.binder-ring{height:25px;border:6px solid #b5b9b8;border-top-color:#f4f5f4;border-bottom-color:#737c7c;border-radius:50%;box-shadow:0 3px 4px #0004,inset 0 2px 3px #0003;background:linear-gradient(180deg,#bcc4c0,#f9fcf9 43%,#697573 50%,#b8c1bc 64%)}.binder-ring:before,.binder-ring:after{content:'';position:absolute;width:11px;height:18px;border-radius:50%;background:#565f53;box-shadow:inset 1px 2px 3px #0005;z-index:-1;transform:translateY(-2px)}.binder-ring:before{left:0}.binder-ring:after{right:0}.paper{background-image:linear-gradient(#8eb3c512 1px,transparent 1px),linear-gradient(90deg,#8eb3c512 1px,transparent 1px);background-size:24px 24px}.listen-box{background:#e9f1f5;border-left:3px solid #527fa0;padding:14px;margin:15px 0}.listen-box p{margin:5px 0}.listen-box audio{width:100%;height:36px}.listen-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.listen-row button{padding:7px 11px}.practice-switch{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.practice-switch select{flex:1;min-width:150px;width:auto}.practice-switch button{padding:10px 14px}.round-note{font-size:13px!important;color:#596d5e}.input-answer{margin:8px 0}.classroom-intro{max-width:700px}.protocol-card{background:#fffef8;padding:28px;border:1px solid #c8cfc2;box-shadow:4px 5px 0 #d8dfd1;margin:20px 0}.protocol-card h2{font-family:Hand;font-size:36px}.protocol-tag{display:inline-block;border-bottom:2px solid #96ad85;padding:4px 10px;margin:4px;font-family:Hand;font-size:24px}.protocol-preview{width:100%;height:700px;border:1px solid #acb6a5}.round-flash{animation:bookZoom .4s ease}.tts-status{font-size:13px;color:#586755}.translation-copy{white-space:pre-line}.pdf-note{font-size:13px}
@media(max-width:720px){.book-stage{padding:10px 10px 18px 18px}.binder-rings{left:-8px;width:36px;top:40px;bottom:40px}.binder-ring{border-width:4px;height:18px}.paper:first-child,.paper:last-child{padding-left:33px;padding-right:19px}.spread:after{display:none}.protocol-preview{height:480px}header nav{flex-wrap:wrap;justify-content:flex-start;gap:12px 20px}}

[hidden]{display:none!important}

/* Turn the actual page around the rings before revealing the next spread. */
.spread.is-turning{perspective:2200px;overflow:visible}
.page-under-turn{visibility:hidden}
.turning-page{position:absolute!important;top:0;left:50%;margin:0;box-sizing:border-box;z-index:7;pointer-events:none;transform-origin:left center;backface-visibility:visible;overflow:hidden;animation:realPageTurn 1.05s cubic-bezier(.35,.04,.25,1) both;box-shadow:14px 5px 28px #152d3340;border-radius:0 8px 8px 0}
.turning-page:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#40536535,transparent 25%,#ffffff60 70%,#223d4d25);animation:pageShade 1.05s ease both}
.turning-page.turn-back{left:0;transform-origin:right center;animation-name:realPageBack}
.page-sound-toggle{font:inherit;color:#344c3b;background:#fffdf7;border:1px solid #b7bfae;border-radius:4px;padding:6px 10px;margin-left:8px;cursor:pointer}
.book-controls [aria-disabled=true]{opacity:.65;cursor:wait}
@keyframes realPageTurn{0%{transform:rotateY(0deg);opacity:1}35%{transform:rotateY(-45deg) translateZ(16px);opacity:1}75%{opacity:1}100%{transform:rotateY(-174deg);opacity:0}}
@keyframes realPageBack{0%{transform:rotateY(0deg);opacity:1}35%{transform:rotateY(45deg) translateZ(16px);opacity:1}75%{opacity:1}100%{transform:rotateY(174deg);opacity:0}}
@keyframes pageShade{0%,100%{opacity:.1}50%{opacity:.9}}
@media(max-width:720px){.turning-page,.turning-page.turn-back{left:0;transform-origin:left center}.turning-page.turn-back{animation-name:realPageTurn}.page-sound-toggle{margin-top:8px}}
/* Motion is gated in JavaScript; an explicit learner choice can enable it. */
@media print{.page-sound-toggle,.turning-page{display:none}}