.magic-book-game{--ink:#48342a;--gold:#cba252;--paper:#f3e5bf;--paper-light:#fff8dc;--page-gutter:9.5%;--book-shadow:#120805b8;--nav-edge:11.1%;min-height:100svh;color:var(--ink);font-family:var(--font-family);background:#2d1b12;position:relative;overflow:hidden}.magic-book-game button{font:inherit}.magic-book-game button:focus-visible{outline-offset:3px;outline:4px solid #fff4b5}.magic-book-shape-definitions{width:0;height:0;position:absolute;overflow:hidden}.magic-book-intro-backdrop{z-index:140;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#1d0e08a6;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.magic-book-intro{color:#4d3425;text-align:center;background:radial-gradient(circle at 50% 10%,#fffaf0 0,#f7e9c8 62%,#e8cb91 100%);border:1px solid #e5c77e;border-radius:28px 18px 30px 20px;width:min(92vw,560px);padding:clamp(30px,5vw,48px) clamp(26px,5vw,54px) clamp(26px,4vw,40px);position:relative;overflow:hidden;box-shadow:0 28px 80px #100704c7,inset 0 0 0 5px #8e5b2721,inset 0 0 42px #a56b2a26}.magic-book-intro:before,.magic-book-intro:after{content:"";pointer-events:none;border:2px solid #b2833e87;border-radius:50%;width:90px;height:90px;position:absolute}.magic-book-intro:before{top:-51px;left:-48px}.magic-book-intro:after{bottom:-51px;right:-48px}.magic-book-intro-flourish{color:#a8752d;margin-bottom:8px;font:2rem/1 Georgia,serif;display:block}.magic-book-intro h1{color:#51351f;text-wrap:balance;margin:0;font:700 clamp(1.55rem,4.5vw,2.35rem)/1.08 Georgia,serif}.magic-book-intro p{color:#624936;text-wrap:balance;max-width:440px;margin:18px auto 24px;font:clamp(1rem,2.4vw,1.2rem)/1.5 Georgia,serif}.magic-book-intro button{color:#fff9e8;cursor:pointer;background:linear-gradient(#b9863e,#81501f);border:1px solid #8b5d27;border-radius:999px;min-height:50px;padding:12px 28px;font-weight:800;transition:filter .18s,transform .18s;box-shadow:0 7px 18px #5f351e4f,inset 0 1px #fff6c86b}.magic-book-intro button:hover{filter:brightness(1.08);transform:translateY(-1px)}.magic-book-intro button:active{transform:translateY(1px)}.magic-book-controls{z-index:60;top:max(14px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));gap:7px;display:flex;position:fixed}.magic-book-controls button{color:#f4dfac;cursor:pointer;background:radial-gradient(circle at 42% 32%,#5d4737d9,#2d211bc7 72%);border:1px solid #d8b86b52;border-radius:50%;width:44px;height:44px;font-weight:800;transition:color .18s,transform .18s,box-shadow .18s;box-shadow:0 6px 17px #170b0785,inset 0 1px #fff0bd26}.magic-book-controls button:hover{color:#fff1bf;transform:translateY(-1px);box-shadow:0 7px 19px #170b0796,0 0 12px #d8ab4730,inset 0 1px #fff0bd38}.magic-book-table-stage{background:#3b2416 url(/games/magic-speech-book/art/study-table-v1.webp) 50%/cover no-repeat;min-height:100svh;position:relative;overflow:hidden}.magic-book-table-stage:before{content:"";z-index:0;pointer-events:none;background:radial-gradient(at 10% 55%,#ffc65a32 0 7%,#0000 30%),radial-gradient(at 50% 48%,#fff0b514 0 26%,#0000 57%),linear-gradient(#7e57240e,#0000 34%),radial-gradient(at 50% 54%,#0000 45%,#160c075e 100%);position:absolute;inset:0}.magic-book-table-stage:after{content:"";z-index:50;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 clamp(34px,6vw,88px) #10080662}.magic-book-stage{flex-direction:column;justify-content:center;min-height:100svh;padding:clamp(68px,7vh,84px) clamp(18px,4vw,64px) 22px;display:flex}.magic-book-atmosphere{z-index:1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.magic-book-candle-light{filter:blur(11px);background:radial-gradient(at 31% 31%,#ffd36b45 0 7%,#efa33b22 27%,#0000 67%);border-radius:50%;width:38vw;height:62vh;animation:4.6s ease-in-out infinite alternate magic-candle-light;position:absolute;top:-6%;left:-9%}.magic-book-candlestick{filter:drop-shadow(12px 18px 11px #0d07067d)drop-shadow(0 0 12px #e9a63b24);transform-origin:50% 18%;width:clamp(88px,9vw,132px);height:auto;animation:3.8s ease-in-out infinite alternate magic-flame;position:absolute;top:11.5%;bottom:auto;left:2%}.magic-book-inkwell{filter:drop-shadow(-7px 14px 10px #0d07067f);width:clamp(88px,9.4vw,140px);height:auto;animation:5.6s ease-in-out infinite alternate magic-quill-shadow;position:absolute;bottom:1%;right:1.2%}.magic-book-toolbar{z-index:30;width:min(39vw,450px);position:absolute;top:clamp(62px,7vh,82px);left:50%;transform:translate(-50%)}.magic-book-progress{color:#ead9ad;letter-spacing:.08em;text-shadow:0 2px 8px #120a06;grid-template-columns:minmax(90px,1fr) auto;align-items:center;gap:12px;font:600 clamp(.68rem,.8vw,.82rem)/1 Georgia,serif;display:grid}.magic-book-progress i{background:#dcc48f2e;border-radius:99px;height:2px;overflow:hidden;box-shadow:0 1px 3px #12090669}.magic-book-progress b{border-radius:inherit;background:linear-gradient(90deg,#b98637,#f7df9e 78%,#fff3c5);height:100%;transition:width .4s;display:block;box-shadow:0 0 5px #eab94942}.magic-book{perspective:2400px;transform-origin:50% 72%;width:min(100%,1450px,177.683svh - 199.005px);transform-style:preserve-3d;margin:auto;position:relative}.magic-book-spread{aspect-ratio:1672/941;isolation:isolate;filter:drop-shadow(0 9px 5px #0b04037a) drop-shadow(0 25px 17px var(--book-shadow));transform-origin:50% 72%;position:relative}.magic-book-spread:before{content:"";z-index:-1;filter:blur(18px);background:#080302a6;border-radius:50%;height:10%;position:absolute;bottom:2.8%;left:7%;right:7%;transform:scaleY(.48)}.magic-book-spread:after{content:"";z-index:-1;filter:blur(11px);background:#050201a8;border-radius:50%;height:7%;position:absolute;bottom:4.6%;left:20%;right:20%}.magic-book-shell-image{z-index:0;object-fit:contain;pointer-events:none;clip-path:url(#magic-book-shell-curve)}.magic-book-shell-depth{z-index:2;pointer-events:none;clip-path:url(#magic-book-shell-curve);position:absolute;inset:0;overflow:hidden}.magic-book-shell-depth:before{content:"";opacity:.62;mix-blend-mode:screen;background:linear-gradient(#fff5d219,#efdaa633 35%,#734b2214 61%,#1c0d0833);height:12.5%;position:absolute;bottom:6.8%;left:9%;right:9%}.magic-book-shell-depth:after{content:"";filter:blur(4px);opacity:.72;background:linear-gradient(90deg,#0000,#1f10093b 41%,#0e07065e 50%,#fff1c927 58%,#0000);border-radius:42%;position:absolute;inset:5.1% 47.1% 16.1%}.magic-book-stable-spread,.magic-book-pageflip-host{position:absolute;inset:5.4% 9.6% 16.3%}.magic-book-stable-spread{z-index:3;grid-template-columns:1fr 1fr;display:grid;overflow:visible}.magic-book-stable-spread .magic-book-page{width:100%;min-width:0;height:100%;position:relative}.magic-book.is-page-turning .magic-book-stable-spread{opacity:0}.magic-book-pageflip-host{z-index:4;overflow:visible}.magic-book-pageflip-root{width:100%;height:100%}.magic-book-pageflip-root .stf__wrapper{width:100%!important;height:100%!important;padding:0!important}.magic-book-pageflip-root .stf__block{inset:0}.magic-book-pageflip-root .stf__item{will-change:transform,clip-path;filter:saturate(.985)}.magic-book:not(.is-page-turning) .magic-book-pageflip-root .stf__item.--simple{opacity:0!important}.magic-book.is-page-turning .magic-book-pageflip-root .magic-book-page-prompt,.magic-book.is-page-turning .magic-book-pageflip-root .magic-book-leaf-number{opacity:0}.magic-book-pageflip-root .stf__outerShadow,.magic-book-pageflip-root .stf__innerShadow{filter:blur(.7px)sepia(.08)}.magic-book-page{box-sizing:border-box;color:#4b372d;box-shadow:none;background:0 0;border:0;position:relative;overflow:visible}.magic-book-page-surface{isolation:isolate;background:radial-gradient(ellipse at 48% 36%,#fff9e64a 0 48%,transparent 75%),linear-gradient(180deg,#fff7da14,var(--paper) 73%,#dec18c24 100%);animation:7.5s ease-in-out infinite alternate magic-paper-breath;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 1px #fff9df8c,inset 0 -5px 8px #5f3c1424}.magic-book-page.is-left .magic-book-page-surface{clip-path:polygon(1.2% 2.2%,98.9% .6%,100% 100%,83% 98.2%,62% 97.1%,39% 98%,17% 96.7%,2% 98.5%,0 88%,.4% 12%);border-radius:8% 1.5% 7% 3%/3% 1% 8% 4%}.magic-book-page.is-right .magic-book-page-surface{clip-path:polygon(1.1% .6%,98.8% 2.2%,99.6% 12%,100% 88%,98% 98.5%,83% 96.7%,61% 98%,38% 97.1%,17% 98.2%,0 100%);border-radius:1.5% 8% 3% 7%/1% 3% 4% 8%}.magic-book-page-surface:before{content:"";z-index:5;pointer-events:none;border:1px solid #9d733f59;border-radius:3% 2% 4%/2% 3% 2% 4%;position:absolute;inset:2.1% 2.3% 2.5%;box-shadow:inset 0 1px #fff9df73}.magic-book-page-surface:after{content:"";z-index:4;pointer-events:none;mix-blend-mode:multiply;position:absolute;inset:0}.magic-book-page.is-left .magic-book-page-surface:after{background:linear-gradient(#65411712 0,#0000 5% 91%,#603b1721 100%),linear-gradient(90deg,#805a2314 0,#0000 9% 76%,#59381e22 91%,#2a170d56 100%)}.magic-book-page.is-right .magic-book-page-surface:after{background:linear-gradient(#6541170d 0,#0000 6% 92%,#603b171c 100%),linear-gradient(90deg,#2a170d56 0,#59381e22 9%,#0000 24% 91%,#805a2314 100%)}.magic-book-page-art{z-index:1;background:0 0;border-radius:2.7% 1.8% 3.2% 2%/2.2% 3% 2.4% 2.8%;height:64%;position:absolute;top:3.2%;left:3.7%;right:3.7%;overflow:hidden;box-shadow:0 1px 1px #4a2b1021;-webkit-mask-image:radial-gradient(116% 112% at 50% 48%,#000 86%,#000e 94%,#0000 100%);mask-image:radial-gradient(116% 112% at 50% 48%,#000 86%,#000e 94%,#0000 100%)}.magic-book-page.is-left .magic-book-page-art{right:var(--page-gutter);transform-origin:100%;transform:perspective(1100px)rotateY(-.7deg)}.magic-book-page.is-right .magic-book-page-art{left:var(--page-gutter);transform-origin:0;border-radius:1.9% 2.9% 2.2% 3.1%/3% 2.1% 2.8% 2.3%;transform:perspective(1100px)rotateY(.7deg)}.magic-book-page-art:before,.magic-book-page-art:after{content:"";z-index:2;pointer-events:none;position:absolute;inset:-1px}.magic-book-page-art:before{border:1px solid #8b622d47;border-radius:2% 3% 1.5% 4%/3% 1.5% 4% 2%;box-shadow:inset 0 0 5px 2px #f0dfb982,inset 0 0 11px #61380e20}.magic-book-page-art:after{mix-blend-mode:multiply;background:radial-gradient(#0000 69%,#ead8b26b 93%,#d4b980a3 100%),repeating-linear-gradient(8deg,#5d431305 0 1px,#0000 1px 7px)}.magic-book-page-art-canvas{position:absolute;inset:0;overflow:hidden}.magic-book-page-art-canvas:before,.magic-book-page-art-canvas:after{content:"";background-image:var(--scene-image);background-position:50%;background-repeat:no-repeat;position:absolute}.magic-book-page-art-canvas:before{display:none}.magic-book-page-art-canvas:after{background-position:var(--scene-position,center);filter:saturate(.88)sepia(.115)contrast(.965)brightness(1.025);background-size:cover;inset:-1%;transform:perspective(900px)rotateX(.42deg)}.magic-book-page-prompt{z-index:1;text-align:left;border-top:1px solid #9b713d52;min-height:17%;padding:2.15% 1.5% 1%;font-family:Georgia,serif;position:absolute;top:69.5%;left:7%;right:7%}.magic-book-page.is-left .magic-book-page-prompt{right:10%}.magic-book-page.is-right .magic-book-page-prompt{left:10%}.magic-book-page-prompt:before{content:"❦";color:#9c6f2d;background:var(--paper);padding:0 .62em;font-size:clamp(.5rem,.72vw,.72rem);line-height:1;position:absolute;top:0;left:50%;transform:translate(-50%,-55%)}.magic-book-page.is-right .magic-book-page-prompt:before{content:"✧"}.magic-book-page-prompt ul{gap:clamp(5px,.52vw,9px);margin:0;padding:0;list-style:none;display:grid}.magic-book-page-question{color:#49352b;letter-spacing:.003em;text-wrap:balance;margin:0;padding-left:0;font:400 clamp(.74rem,1.04vw,1.02rem)/1.36 Georgia,serif;position:relative}.magic-book-leaf-number{color:#8d714e;font:italic clamp(.44rem,.65vw,.64rem)/1 Georgia,serif;position:absolute;bottom:2.2%;right:7%}.magic-book-page.is-left .magic-book-leaf-number{left:7%;right:auto}.magic-book-page-patina{z-index:3;pointer-events:none;mix-blend-mode:multiply;opacity:.5;background:radial-gradient(at 50% 42%,#fff9e010,#0000 60%),repeating-linear-gradient(13deg,#65411405 0 1px,#0000 1px 9px);position:absolute;inset:0}.magic-book-page-templates{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.magic-book-live-description{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.magic-book-page-navigation{z-index:100;pointer-events:none;transform-style:preserve-3d;position:absolute;inset:0}.magic-book-page-navigation button{--nav-visual-width:clamp(36px,3.2vw,44px);--nav-visual-height:clamp(31px,2.7vw,38px);color:#5f3d19;text-shadow:0 1px #fff0bd;cursor:pointer;pointer-events:auto;background:0 0;border:0;place-items:center;width:clamp(44px,3.2vw,48px);height:44px;font:700 clamp(1rem,1.42vw,1.3rem)/1 Georgia,serif;transition:color .2s,filter .2s,transform .2s;display:grid;position:absolute;bottom:18.15%;transform:translateZ(60px)}.magic-book-page-navigation button:before{content:"";z-index:-1;width:var(--nav-visual-width);height:var(--nav-visual-height);background:linear-gradient(145deg,#f1d99f,#c99c50 62%,#97652d);border:1px solid #735027bd;border-radius:7px 7px 12px 12px;transition:box-shadow .2s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 7px #32180852,inset 0 1px 1px #fff7d2b5,inset 0 -2px 3px #7447184f}.magic-book-page-navigation button:first-child{left:var(--nav-edge)}.magic-book-page-navigation button:last-child{right:var(--nav-edge)}.magic-book-page-navigation button:hover:not(:disabled){color:#7c4e1d;filter:brightness(1.045);transform:translateY(-2px)translateZ(60px)scale(1.025)}.magic-book-page-navigation button:hover:not(:disabled):before{box-shadow:0 6px 10px #32180859,0 0 8px #e8bd6354,inset 0 1px 1px #fff7d2c9}.magic-book-page-navigation button:active:not(:disabled){transform:translateY(1px)translateZ(60px)scale(.975)}.magic-book-page-navigation button:active:not(:disabled):before{box-shadow:0 2px 5px #3218084f,inset 0 2px 4px #74471859}.magic-book-page-navigation button:focus-visible:before{outline-offset:2px;outline:2px solid #fff0bd}.magic-book-page-navigation button:disabled{opacity:.44;cursor:default}.magic-book-page-navigation button.is-empty{opacity:0}.magic-book:has(.magic-book-page-navigation button:last-child:hover) .magic-book-stable-spread .magic-book-page.is-right .magic-book-page-surface{box-shadow:inset 0 1px #fff9df8c,inset 0 -5px 8px #5f3c1424,4px 5px 8px #4a2a1421}.magic-book:has(.magic-book-page-navigation button:first-child:hover) .magic-book-stable-spread .magic-book-page.is-left .magic-book-page-surface{box-shadow:inset 0 1px #fff9df8c,inset 0 -5px 8px #5f3c1424,-4px 5px 8px #4a2a1421}.magic-book-edge-zone{z-index:20;opacity:0;cursor:pointer;background:0 0;border:0;width:3.4%;min-width:44px;position:absolute;top:12%;bottom:23%}.magic-book-edge-zone.is-left{left:5.8%}.magic-book-edge-zone.is-right{right:5.8%}.magic-book-edge-zone:focus-visible{opacity:1;background:#ffe7a52b}.magic-book.is-page-turning .magic-book-edge-zone,.magic-book.is-page-turning .magic-book-page-navigation button{pointer-events:none}.magic-book.is-page-turning:after{content:"";z-index:25;pointer-events:none;opacity:0;mix-blend-mode:screen;background:linear-gradient(90deg,#0000 44%,#ffe4a259 50%,#0000 56%);border-radius:40%;animation:.92s magic-page-glow;position:absolute;inset:4% 9% 14%}.magic-book.is-reduced-motion .magic-book-pageflip-host{transition:opacity .2s}.magic-book-ribbon{z-index:5;opacity:.76;transform-origin:top;background:linear-gradient(90deg,#5e1f18,#9c493b 45%,#6c271f);border-radius:1px 1px 5px 5px;width:1.25%;height:19%;position:absolute;bottom:4.6%;right:47.7%;transform:rotate(-1.2deg);box-shadow:1px 3px 5px #1a09065e,inset 1px 0 #d4876b4d}@keyframes magic-page-glow{0%,to{opacity:0;transform:scale(.94)}48%{opacity:1;transform:scale(1.03)}}@keyframes magic-flame{0%{transform:rotate(-.35deg)scaleY(.995)}to{transform:rotate(.45deg)scaleY(1.008)}}@keyframes magic-candle-light{0%{opacity:.82;transform:scale(.985)}to{opacity:1;transform:scale(1.015)}}@keyframes magic-quill-shadow{0%{filter:drop-shadow(-7px 14px 10px #0d07067f)}to{filter:drop-shadow(-5px 13px 9px #0d070670)}}@keyframes magic-paper-breath{0%{filter:brightness(.997)}to{filter:brightness(1.008)}}@media (max-width:900px){.magic-book-controls{right:10px}.magic-book-controls button{width:44px;height:44px}.magic-book-stage{padding:70px 12px 18px}.magic-book-toolbar{max-width:52%}.magic-book-candlestick{width:clamp(72px,9vw,92px);top:15%;left:.6%}.magic-book-inkwell{right:.5%}}@media (max-width:620px){.magic-book-candlestick,.magic-book-inkwell,.magic-book-candle-light{display:none}.magic-book-intro-backdrop{padding:16px}.magic-book-intro{border-radius:22px 15px 24px 17px;padding:27px 22px 24px}.magic-book-intro p{margin:14px auto 20px}.magic-book-stage{padding-top:70px;display:flex}.magic-book{width:100%}.magic-book-toolbar{width:58%;max-width:none;margin-bottom:5px}.magic-book-progress{gap:8px;font-size:.72rem}.magic-book-page-art{height:57.5%;top:3.5%}.magic-book-page-prompt{min-height:24%;padding-top:2%;top:63%;left:5%;right:5%}.magic-book-page.is-left .magic-book-page-prompt{right:10%}.magic-book-page.is-right .magic-book-page-prompt{left:10%}.magic-book-page-prompt ul{gap:2px}.magic-book-page-question{font-size:clamp(.54rem,2.2vw,.66rem);line-height:1.22}.magic-book-page-navigation button{--nav-visual-width:29px;--nav-visual-height:25px;width:44px;height:44px;font-size:.9rem;bottom:14.8%}.magic-book-game{--nav-edge:11.3%}.magic-book-ribbon{display:none}}@media (max-height:680px) and (orientation:landscape){.magic-book-stage{padding-top:52px}.magic-book-toolbar{transform-origin:50%;max-width:42%;transform:translate(-50%)scale(.88)}.magic-book{width:min(92%,177.683svh - 184.791px)}}@media (prefers-reduced-motion:reduce){.magic-book-candlestick,.magic-book-candle-light,.magic-book-inkwell,.magic-book-page-surface{animation:none!important}}