@import url('./book-volume.css');
/* H1: six-step supplied wire-o geometry; shared site controls. */
.carnet-animation{container-type:inline-size;--paper:var(--paper-warm,#f4f0e7);--w:min(300px,calc((100cqw - 48px)/2));--h:calc(var(--w)*210/155);--board:#DFC6B2;min-width:0}
.carnet-animation .stage{position:relative;width:100%;height:calc(var(--h) + 70px);perspective:2400px;perspective-origin:50% 30%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}.carnet-animation .stage:active{cursor:grabbing}.carnet-animation .stage:focus-visible{box-shadow:0 0 0 2px var(--accent);border-radius:6px}.carnet-animation .mover{position:absolute;top:24px;left:calc(50% - var(--w) / 2);width:var(--w);height:var(--h);transform:translateX(calc(var(--w) * .5 * (var(--o,0) + var(--b,0))));transform-style:preserve-3d}.carnet-animation .book{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(14deg)}.carnet-animation .ground{position:absolute;left:0;top:0;width:var(--w);height:var(--h);transform:translateZ(-6px);background:rgba(40,30,20,.0);box-shadow:0 22px 40px -10px rgba(50,35,20,.35),0 4px 10px rgba(50,35,20,.18);border-radius:3px}.carnet-animation .ground.left{transform:translateX(-100%) translateZ(-6px);opacity:var(--land,0)}.carnet-animation .ground.right{opacity:calc(1 - var(--bland,0))}.carnet-animation .rear{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:0 50%;transform:translateZ(calc(16px * var(--blift,0))) rotateY(calc(-180deg * var(--b,0)))}.carnet-animation .backcover{position:absolute;inset:0;transform:translateZ(-6px) rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:3px 4px 4px 3px;overflow:hidden}.carnet-animation .backcover img{width:100%;height:100%;display:block}.carnet-animation .back{position:absolute;inset:0;transform:translateZ(-5px);border-radius:3px 4px 4px 3px;background:var(--board)}.carnet-animation .block{position:absolute;inset:0;transform:translateZ(-1px);background:#F6F0E4;border-radius:1px 3px 3px 1px;box-shadow:1px 1px 0 #EAE2D3,2px 2px 0 #E2D9C8,3px 3px 0 #EAE2D3,4px 4px 0 #DCD2C0}.carnet-animation .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:1px 3px 3px 1px}.carnet-animation .face img{width:100%;height:100%;display:block;pointer-events:none}.carnet-animation .face .shade{position:absolute;inset:0;pointer-events:none}.carnet-animation .holes.r{left:auto;right:calc(var(--w) * .035)}.carnet-animation .holes{position:absolute;left:calc(var(--w) * .035);top:3%;bottom:3%;width:7px;background:radial-gradient(ellipse 3.2px 3.4px at 50% 50%,#2E2925 85%,transparent 100%) 0 0/7px calc(var(--h) * .94 / 24) repeat-y;opacity:.9;pointer-events:none}.carnet-animation .leaf,.carnet-animation .cover{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:0 50%}.carnet-animation .leaf.l1{transform:translateZ(.75px) rotateY(calc(-180deg * var(--l1,0))) translateZ(calc(-1px * var(--l1,0)))}.carnet-animation .leaf.l2{transform:translateZ(.5px) rotateY(calc(-180deg * var(--l2,0))) translateZ(calc(-2px * var(--l2,0)))}.carnet-animation .leaf.l3{transform:translateZ(.25px) rotateY(calc(-180deg * var(--l3,0))) translateZ(calc(-3px * var(--l3,0)))}.carnet-animation .cover{transform:translateZ(calc(1px - 3px * var(--o,0) + 16px * var(--lift,0))) rotateY(calc(-180deg * var(--o,0)))}.carnet-animation .cover .front{background:var(--board)}.carnet-animation .flip{transform:rotateY(180deg)}.carnet-animation .edge{position:absolute;top:0;bottom:0;left:0;width:3px;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent)}.carnet-animation .wire{position:absolute;top:0;left:-40px;width:80px;height:100%;overflow:visible;transform:translateZ(3px);pointer-events:none}

.carnet-animation .book{transform:rotateX(14deg) translateZ(calc(60px * var(--flift,0))) rotateY(calc(180deg * var(--f,0)));transform-origin:50% 50%}
.carnet-animation .stage img,.carnet-animation .stage svg{pointer-events:none;-webkit-user-drag:none;user-select:none}
.carnet-animation .stage{display:block;padding:0;border:0;background:none;color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}
.carnet-animation .stage{overflow:clip;overflow-clip-margin:12px}
.carnet-animation .stage:focus-visible{outline:2px solid var(--brand-green);outline-offset:3px;box-shadow:none;border-radius:2px}
.carnet-animation .hint{min-height:1.6em;margin:12px 0 8px;text-align:center;font-size:13px;color:var(--ink-muted,#625e55)}
.carnet-animation .controls{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:0}
.carnet-animation .controls button{min-width:44px;min-height:44px;padding:8px 0;font:inherit;font-size:14px;border:0;border-bottom:1px solid transparent;background:none;color:var(--ink-muted);touch-action:manipulation;cursor:pointer}
.carnet-animation .controls button[aria-pressed=true]{color:var(--brand-green);border-bottom-color:currentColor}
.carnet-animation .controls button:active{color:var(--brand-green)}
.carnet-animation .note{font-size:12px;line-height:1.6;text-align:center;color:var(--ink-muted);margin:14px 0 0}
.carnet-animation [data-animation-error]:empty{display:none}
@media(hover:hover) and (pointer:fine){.carnet-animation .controls button:hover{color:var(--brand-green);border-bottom-color:currentColor}}
@media(max-width:760px){.carnet-animation .controls{gap:8px 14px}.carnet-animation .controls button{font-size:13px}.carnet-animation .stage{perspective:1800px}}