.b3-stage{perspective:2400px;perspective-origin:50% 20%;width:100%;container-type:inline-size}.b3-book{--W:min(46cqw, var(--max-page,320px));--H:calc(var(--W) * 1.4142);--T:calc(var(--W) * .085);--fr:1;--fl:0;--open:0;--edge-x:linear-gradient(90deg, #d9d1bf, #efe9dc 35%, #f1ebde 65%, #d8d0bd);--edge-y:linear-gradient(180deg, #d9d1bf, #efe9dc 35%, #f1ebde 65%, #d8d0bd);--ease-turn:cubic-bezier(.45, .05, .3, 1);--aa:2px;--tuck:2px;--f:0;--m:1;--sink:calc(2.5px + (1 - var(--open)) * 2.4px);--lift:4.5px;width:calc(var(--W) * 2);height:var(--H);transform-style:preserve-3d;margin-inline:auto;transition:transform 1.3s cubic-bezier(.3,.1,.2,1);position:relative}.b3-showcase{margin-block:calc(var(--W) * .12) calc(var(--W) * .2)}.b3-showcase[data-open=false]{transform:translate(-21%)rotateX(52deg)rotate(-24deg)}.b3-showcase[data-open=true]{transform:translate(0)rotateX(40deg)rotate(-9deg)}.b3-read{margin-block:calc(var(--W) * .04) calc(var(--W) * .1)}.b3-read[data-open=false]{transform:translate(-25%)rotateX(24deg)rotate(-3deg)}.b3-read[data-open=true]{transform:translate(0)rotateX(20deg)}.b3-leaf,.b3-rest{transform-style:preserve-3d}.b3-shadow{top:6%;bottom:-6%;left:calc(50% * (1 - var(--open)) + 2%);filter:blur(calc(var(--W) * .07));transition:left 1.1s var(--ease-turn);background:#1f1a176b;border-radius:12px;position:absolute;right:-3%;transform:translateZ(-3px)}.b3-backBoard{top:calc(-2.2% - var(--aa));bottom:calc(-2.2% - var(--aa));left:calc(50% + 1px - var(--aa));right:calc(-1.1% - var(--aa));border:var(--aa) solid transparent;background:var(--cloth);background-clip:padding-box;position:absolute}.b3-spine{width:var(--T);transform-origin:0;background:linear-gradient(90deg, #00000047, #ffffff1f 45%, #0003), var(--cloth);opacity:calc(1 - var(--open));transition:opacity .3s;position:absolute;top:-2.2%;bottom:-2.2%;left:50%;transform:rotateY(-90deg)}.b3-edge{background:var(--edge-x);transition:width 1.1s var(--ease-turn), height 1.1s var(--ease-turn);position:absolute}.b3-edge:after{content:"";background:linear-gradient(#1f1a170a,#1f1a1733);position:absolute;inset:0}.b3-rFore{width:calc(var(--T) * var(--fr) - var(--sink) - var(--lift));transform-origin:0;transform:translateZ(var(--lift)) rotateY(-90deg);top:1%;bottom:1%;left:99.2%}.b3-rTail,.b3-rHead{height:calc(var(--T) * var(--fr) - var(--sink) - var(--lift));background:var(--edge-y);transform-origin:50% 0;transform:translateZ(var(--lift)) rotateX(90deg);left:50%;right:.8%}.b3-rTail{top:99%}.b3-rHead{top:1%}.b3-lFore{width:calc(var(--T) * var(--fl) - var(--sink) - var(--lift));transform-origin:0;transform:translateZ(var(--lift)) rotateY(-90deg);top:1%;bottom:1%;left:.8%}.b3-lTail,.b3-lHead{height:calc(var(--T) * var(--fl) - var(--sink) - var(--lift));background:var(--edge-y);transform-origin:50% 0;transform:translateZ(var(--lift)) rotateX(90deg);left:.8%;right:50%}.b3-lTail{top:99%}.b3-lHead{top:1%}.b3-gutter{top:1%;bottom:1%;left:calc(50% + (2 * var(--lo) - 1) * (var(--lap) + 1px));width:calc(var(--T) * max(var(--fr), var(--fl)) - var(--sink) - var(--lift));transform-origin:0;transform:translateZ(var(--lift)) rotateY(-90deg);opacity:var(--open)}.b3-book{--lap:4px;--lo:clamp(0, (var(--n) + 1 - 2 * var(--f)) * 1000, 1)}.b3-sole{top:calc(1% + .5px);bottom:calc(1% + .5px);left:calc(50% + var(--lap));transform:translateZ(calc(var(--lift) - .5px));background:linear-gradient(90deg,#c6c0b4,#d9d1bf 12%);display:none;position:absolute;right:calc(.8% + .5px)}.b3-book[data-open=true]>.b3-sole{display:block}.b3-sheet{--over:calc(var(--lap) * .7071);inset:calc(-1 * var(--over)) 0 calc(-1 * var(--over)) calc(-1 * var(--lap));position:absolute}.b3-faceBack>.b3-sheet{inset:calc(-1 * var(--over)) calc(-1 * var(--lap)) calc(-1 * var(--over)) 0}.b3-cover .b3-sheet{inset:0}.b3-rest{top:calc(-1 * var(--aa));width:calc(var(--W) + var(--aa));height:calc(var(--H) + 2 * var(--aa));border:var(--aa) solid transparent;transform:translateZ(calc(var(--T) * var(--fr) - .6px));transition:transform 1.1s var(--ease-turn);border-left-width:0;position:absolute;left:50%;overflow:hidden}.b3-book[data-open=true]>.b3-rest{left:calc(50% - var(--lap));width:calc(var(--W) + var(--aa) + var(--lap));--d:max(0, var(--m) - var(--f));--b:calc(var(--lap) * (1 - (1 - var(--lo)) * (1 - min(1, var(--d)))) + min(2, var(--d)) * var(--tuck));border-left-width:var(--b)}.b3-book[data-open=true]>.b3-rest>.b3-sheet{left:calc(-1 * var(--b))}.b3-leaf{--a:0deg;--z:calc(var(--T) * (1 - var(--i) / var(--n)));width:var(--W);height:var(--H);transform-origin:0;transform:translateZ(calc(var(--T) / 2)) rotateY(var(--a)) translateZ(calc(var(--z) - var(--T) / 2));transition:transform var(--flip,1.1s) var(--ease-turn);position:absolute;top:0;left:50%}.b3-leaf[data-flipped=true]{--a:-180deg}.b3-face{inset:calc(-1 * var(--aa)) calc(-1 * var(--aa)) calc(-1 * var(--aa)) 0;border:var(--aa) solid transparent;backface-visibility:hidden;background:#faf4e8 padding-box padding-box;border-left-width:0;position:absolute;overflow:hidden;transform:translateZ(0)}.b3-faceBack{border-left-width:var(--aa);border-right-width:0;transform:rotateY(180deg)}.b3-book[data-open=true]>.b3-leaf:not(.b3-cover)>.b3-face{left:calc(-1 * var(--lap));border-width:var(--aa)}.b3-book[data-open=true]>.b3-leaf:not(.b3-cover)>.b3-face:not(.b3-faceBack){--d:max(0, var(--i) - var(--f));--b:calc(var(--lap) * (1 - (1 - var(--lo)) * (1 - min(1, var(--d)))) + min(2, var(--d)) * var(--tuck));border-left-width:var(--b)}.b3-book[data-open=true]>.b3-leaf:not(.b3-cover)>.b3-face:not(.b3-faceBack)>.b3-sheet{left:calc(-1 * var(--b))}.b3-book[data-open=true]>.b3-leaf:not(.b3-cover)>.b3-faceBack{--d:max(0, var(--f) - 1 - var(--i));--b:calc(var(--lap) * (1 - var(--lo) * (1 - min(1, var(--d)))) + min(2, var(--d)) * var(--tuck));border-right-width:var(--b)}.b3-book[data-open=true]>.b3-leaf:not(.b3-cover)>.b3-faceBack>.b3-sheet{right:calc(-1 * var(--b))}.b3-face:after{content:"";z-index:20;pointer-events:none;background:linear-gradient(90deg,#1f1a1738,#1f1a170d 7%,#0000 16% 92%,#1f1a170d);position:absolute;inset:0}.b3-faceBack:after{background:linear-gradient(270deg,#1f1a1738,#1f1a170d 7%,#0000 16% 92%,#1f1a170d)}.b3-cover .b3-face{inset:calc(-2.2% - var(--aa)) calc(-2.2% - var(--aa)) calc(-2.2% - var(--aa)) 0;background:var(--cloth);background-clip:padding-box}.b3-cover .b3-faceBack{inset:calc(-2.2% - var(--aa)) calc(-2.2% - var(--aa)) calc(-2.2% - var(--aa)) calc(-3px - var(--aa));border-width:var(--aa)}.b3-cover .b3-face:not(.b3-faceBack):after{background:linear-gradient(90deg,#0000002e 0,#0000 2.2%,#00000029 4.6%,#ffffff1a 5.6%,#0000 8%),linear-gradient(115deg,#ffffff29,#0000 38%)}@media (prefers-reduced-motion:reduce){.b3-book,.b3-leaf,.b3-edge,.b3-rest,.b3-shadow{transition:none}}.b3-reel{--W:min(47cqw, var(--max-page,320px));margin-block:calc(var(--W) * .09) 0}.b3-reel[data-open=false]{transform:translate(-25%)rotateX(32deg)rotate(-9deg)}.b3-reel[data-open=true]{transform:translate(0)rotateX(24deg)rotate(-2.5deg)}.b3-cine{animation:11s ease-in-out infinite alternate b3-sway,7.5s ease-in-out infinite alternate b3-float}@keyframes b3-sway{0%{rotate:y -3deg}to{rotate:y 3deg}}@keyframes b3-float{0%{translate:0}to{translate:0 -4px}}.b3-cine .b3-leaf{will-change:transform}.b3-cine .b3-shadow{filter:none;top:4%;bottom:-14%;left:calc(50% * (1 - var(--open)) - 5%);background:radial-gradient(closest-side, color-mix(in srgb, var(--color-ink) 70%, transparent), transparent);border-radius:50%;right:-8%}.b3-cine .b3-face:before{content:"";z-index:21;pointer-events:none;opacity:0;background:linear-gradient(90deg, transparent 0%, transparent 40%, color-mix(in srgb, var(--color-ink) 46%, transparent) 50%, color-mix(in srgb, var(--color-ink) 22%, transparent) 70%, color-mix(in srgb, var(--color-snow) 14%, transparent) 86%, color-mix(in srgb, var(--color-ink) 30%, transparent) 100%);width:200%;position:absolute;top:0;bottom:0;left:0}.b3-cine .b3-faceBack:before{background:linear-gradient(270deg, transparent 0%, transparent 40%, color-mix(in srgb, var(--color-ink) 30%, transparent) 50%, color-mix(in srgb, var(--color-snow) 22%, transparent) 64%, transparent 84%, color-mix(in srgb, var(--color-ink) 12%, transparent) 100%);left:auto;right:0}.b3-cine .b3-leaf[data-flipped=true]>.b3-face:not(.b3-faceBack):before{opacity:1;transition:opacity calc(var(--flip,1.1s) * .5) ease-in, transform calc(var(--flip,1.1s) * .5) ease-in;transform:translate(-50%)}.b3-cine .b3-leaf[data-flipped=false]>.b3-face:not(.b3-faceBack):before{opacity:0;transition:opacity calc(var(--flip,1.1s) * .5) ease-out calc(var(--flip,1.1s) * .5), transform calc(var(--flip,1.1s) * .5) ease-out calc(var(--flip,1.1s) * .5);transform:translate(0)}.b3-cine .b3-leaf[data-flipped=false]>.b3-faceBack:before{opacity:1;transition:opacity calc(var(--flip,1.1s) * .5) ease-in, transform calc(var(--flip,1.1s) * .5) ease-in;transform:translate(50%)}.b3-cine .b3-leaf[data-flipped=true]>.b3-faceBack:before{opacity:0;transition:opacity calc(var(--flip,1.1s) * .5) ease-out calc(var(--flip,1.1s) * .5), transform calc(var(--flip,1.1s) * .5) ease-out calc(var(--flip,1.1s) * .5);transform:translate(0)}.b3-cine .b3-cast{z-index:19;pointer-events:none;opacity:0;transform-origin:0;background:linear-gradient(90deg, color-mix(in srgb, var(--color-ink) 55%, transparent), color-mix(in srgb, var(--color-ink) 20%, transparent) 24%, transparent 62%);position:absolute;inset:0}.b3-cine .b3-faceBack>.b3-cast{transform-origin:100%;background:linear-gradient(270deg, color-mix(in srgb, var(--color-ink) 55%, transparent), color-mix(in srgb, var(--color-ink) 20%, transparent) 24%, transparent 62%)}.b3-cine .b3-leaf[data-flipped=true]+.b3-leaf[data-flipped=false]>.b3-face:not(.b3-faceBack)>.b3-cast{animation:b3-cast-off var(--flip,1.1s) linear}.b3-cine:has(>.b3-leaf[data-flipped=true]+.b3-edge)>.b3-rest>.b3-cast{animation:b3-cast-off var(--flip,1.1s) linear}.b3-cine .b3-leaf[data-flipped=true]:has(+.b3-leaf[data-flipped=true])>.b3-faceBack>.b3-cast{animation:b3-cast-on var(--flip,1.1s) linear}@keyframes b3-cast-off{0%{opacity:0;transform:scaleX(1)}22%{opacity:.9;transform:scaleX(.92)}60%{opacity:.45;transform:scaleX(.4)}to{opacity:0;transform:scaleX(.08)}}@keyframes b3-cast-on{0%,42%{opacity:0;transform:scaleX(.1)}86%{opacity:.85;transform:scaleX(.95)}to{opacity:0;transform:scaleX(1)}}.b3-cine .b3-light{z-index:18;pointer-events:none;background:radial-gradient(58% 52% at 20% 12%, color-mix(in srgb, var(--color-snow) 22%, transparent), transparent 70%), linear-gradient(160deg, transparent 52%, color-mix(in srgb, var(--color-ink) 12%, transparent));position:absolute;inset:-14%}.b3-cine .b3-faceBack>.b3-light{background:radial-gradient(68% 60% at 62% 10%, color-mix(in srgb, var(--color-snow) 30%, transparent), transparent 72%), linear-gradient(200deg, transparent 58%, color-mix(in srgb, var(--color-ink) 8%, transparent))}@media (prefers-reduced-motion:reduce){.b3-cine{animation:none}.b3-cine .b3-face:before,.b3-cine .b3-cast,.b3-cine .b3-light{transition:none;animation:none}}
