/* The lid shares one hinge throughout. Hardware is separate from the photograph. */
.am-box-scene.kb-enhanced::before{display:none}
/* Keep only the tray and hinges. The photographed tabletop must not travel
   with the box over the chapter's separate, continuous wood surface. */
.kb-enhanced>.am-box-image{-webkit-mask-image:none;mask-image:none;clip-path:polygon(10.74% 38.61%,18.16% 38.61%,18.16% 36.98%,18.75% 36.59%,25.49% 36.59%,26.17% 37.04%,26.17% 38.61%,73.54% 38.61%,73.54% 36.98%,74.12% 36.65%,80.96% 36.65%,81.64% 37.04%,81.64% 38.61%,87.79% 38.61%,88.77% 39.13%,90.53% 76.76%,89.45% 79.36%,88.09% 80.08%,10.84% 80.08%,9.57% 79.36%,8.89% 76.76%)}
.kb-enhanced .kb-lid-space::before{content:"";position:absolute;left:9.5%;top:38.5%;width:80.8%;height:41.4%;border-radius:5px;box-shadow:0 8px 12px #21160d55;pointer-events:none}
.kb-lid-space,.kb-hardware,.kb-controls,.kb-key-button,.kb-key-guide,.kb-action-hint{display:none}
.kb-enhanced .kb-controls{display:block;position:absolute;inset:0 0 auto;width:100%;aspect-ratio:2/3;z-index:6;pointer-events:none}
.kb-enhanced .kb-action-hint{display:block;position:absolute;top:26%;left:0;width:100%;box-sizing:border-box;padding:0 20px;color:#f0dab2;text-align:center;font:400 16px/1.5 ui-sans-serif,system-ui,sans-serif;text-shadow:0 1px 5px #281b11;pointer-events:none}
.kb-enhanced:is([data-kb-phase=lid],[data-kb-state=open]) .kb-action-hint{visibility:hidden}
.kb-enhanced .kb-lid-space,.kb-enhanced .kb-hardware{display:block;position:absolute;inset:0 0 auto;width:100%;aspect-ratio:2/3;pointer-events:none}
.kb-enhanced .kb-lid-space{z-index:4;perspective:1600px;perspective-origin:50% 38.28%;transform-style:preserve-3d}
.kb-lid{position:absolute;left:9.2%;top:38.28%;width:81.2%;height:39.1%;transform-origin:50% 0;transform-style:preserve-3d;transform:rotateX(var(--kb-lid-angle,0deg));border-radius:5px}
.kb-lid-face{position:absolute;inset:0;border-radius:5px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#603b21 url('assets/after-keepsake-box.webp') 47.7% 18.1%/142.222% 480%;border:1px solid #916c46;box-shadow:inset 0 0 0 3px #b5926759,inset 0 0 0 6px #3a251d66,inset 0 0 0 8px #b7894a40,0 4px 2px #23161080,0 10px 16px #21170f55}
.kb-lid-face::before{content:"";position:absolute;inset:7%;border:1px solid #cbab7160;outline:1px solid #2b1b1455;outline-offset:2px;border-radius:3px;box-shadow:inset 2px 3px 7px #20140d66,1px 1px 0 #d9ab6a42;pointer-events:none}
.kb-lid-face::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,#fff0b81c,transparent 36%,#140d0b16 80%);pointer-events:none}
.kb-lid-front{transform:translateZ(2px)}
.kb-lid-back{transform:rotateY(180deg);border:4px solid #5d3b27;box-shadow:inset 0 0 0 2px #b58a5255,inset 0 0 14px #1c120b99,0 3px 5px #2d1a0d55}
.kb-lid-back::before{inset:4%;border-color:#8f633b66;box-shadow:inset 0 0 13px #2d1a0d66}
.kb-lid-lettering{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#d6b87bbf;text-shadow:0 -1px 0 #21160dd9,0 1px 0 #d4a97140;font:italic clamp(16px,4.8vw,25px)/1.35 LightSerif,Georgia,serif;letter-spacing:.01em}
.kb-lid-lettering svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.2;opacity:.8}
.kb-lid-lettering small{font:500 8px/1.5 ui-sans-serif,system-ui,sans-serif;letter-spacing:.19em;text-transform:uppercase;color:#d4b87d99}
.kb-hasp{position:absolute;bottom:-3%;left:calc(50% - 8px);width:16px;height:29px;transform:translateZ(4px);border:1px solid #6b4f26;border-radius:3px;background:linear-gradient(90deg,#705222,#d4b16c 22%,#ebcd88 35%,#a58043 64%,#715126);box-shadow:1px 2px 2px #24180d99}
.kb-hasp::before{content:"";position:absolute;width:4px;height:4px;left:5px;top:4px;border-radius:50%;background:#6d542d;box-shadow:0 1px 0 #e1c581}
.kb-hasp::after{content:"";position:absolute;bottom:5px;left:4px;width:6px;height:8px;border-radius:3px;background:#382716;box-shadow:inset 0 1px 1px #0e0908,0 1px 0 #dfbe7b}
.kb-lid-edge{position:absolute;left:0;right:0;bottom:0;height:7px;background:linear-gradient(#98603a,#432a1a);transform-origin:50% 100%;transform:rotateX(-90deg);border:1px solid #56331f}
.kb-enhanced .kb-hardware{z-index:5;overflow:visible;filter:drop-shadow(2px 4px 2px #21140866)}
.kb-enhanced .kb-key-button{display:block;position:absolute;z-index:6;left:63%;top:84%;width:29%;height:12%;min-width:60px;min-height:58px;padding:0;border:0;border-radius:45%;background:transparent;cursor:grab;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none}
.kb-enhanced[data-kb-state=dragging] .kb-key-button{cursor:grabbing}
.kb-enhanced .kb-controls::before{content:"";position:absolute;left:50%;top:82.1%;width:22%;aspect-ratio:1;translate:-50% -50%;border:1px dashed #e4c68d99;border-radius:50%;opacity:0;transition:opacity .18s ease,background .18s ease;pointer-events:none}
.kb-enhanced[data-kb-state=dragging] .kb-controls::before{opacity:.75}
.kb-enhanced[data-kb-drop-ready=true] .kb-controls::before{opacity:1;background:#e4c68d24;border-style:solid}
.kb-key-button:focus-visible{outline:2px dashed #edce8d;outline-offset:5px}
.kb-assist{pointer-events:auto}
.kb-assist:focus-visible{position:absolute;left:12%;top:88%;width:76%;height:auto;clip:auto;clip-path:none;overflow:visible;white-space:normal;padding:10px 14px;border:1px solid #e4c68d;border-radius:8px;background:#382718;color:#f5e5c9;font:14px/1.4 system-ui,sans-serif;z-index:7}
.kb-enhanced .kb-key-guide{display:block;position:absolute;z-index:5;left:42%;top:87%;width:26%;text-align:right;font:italic clamp(14px,3.7vw,18px)/1.3 LightSerif,Georgia,serif;color:#f0dab2;text-shadow:0 1px 5px #281b11;pointer-events:none}
.kb-key-guide svg{position:absolute;left:100%;top:2px;width:28px;height:20px;fill:none;stroke:#e3c18a;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-12deg)}
.kb-enhanced[data-kb-state=closed] .kb-key-guide{animation:kb-invite 2.8s ease-in-out infinite}
@keyframes kb-invite{0%,100%{opacity:.72;translate:0 0}50%{opacity:1;translate:2px -1px}}
.kb-enhanced:not([data-kb-state=closed]):not([data-kb-state=dragging]) .kb-key-button{display:none}
.kb-enhanced:not([data-kb-state=closed]) .kb-key-guide{display:none}
.kb-enhanced .am-box-contents{z-index:2;opacity:var(--kb-contents,0)}
.kb-enhanced:not([data-kb-state=open]) .am-box-contents{pointer-events:none}
.kb-enhanced:not([data-kb-state=open]) .am-memory-object{pointer-events:none}
.kb-enhanced[data-kb-state=closed] .am-box-contents{visibility:hidden}
.kb-enhanced :is(.am-kept-photo,.am-receipt,.am-box-flower){transition:none}
.kb-enhanced .am-kept-photo{transform:translateY(calc(var(--am-photo-lift)*var(--kb-reveal,0))) rotate(calc(-8deg - var(--am-keep-reveal,0)*var(--kb-reveal,0)*4deg)) scale(calc(1 + var(--am-keep-reveal,0)*var(--kb-reveal,0)*.09))}
.kb-enhanced .am-receipt{transform:translateY(calc(var(--am-receipt-lift)*var(--kb-reveal,0))) rotate(calc(7deg + var(--am-keep-reveal,0)*var(--kb-reveal,0)*5deg))}
.kb-enhanced .am-box-flower{transform:translateY(calc(var(--am-flower-lift)*var(--kb-reveal,0))) rotate(calc(24deg - var(--am-keep-reveal,0)*var(--kb-reveal,0)*6deg))}
.kb-enhanced[data-kb-state=open] .kb-lid-space{z-index:1}
.kb-enhanced[data-kb-state=open] .kb-hardware{opacity:.9}
.kb-enhanced .am-box-caption .am-keep-caption-cue{color:#e3c28d;visibility:hidden}
.kb-enhanced:is([data-kb-phase=lid],[data-kb-state=open]) .am-box-caption .am-keep-caption-cue{visibility:visible}
@media(prefers-reduced-motion:reduce){.kb-key-guide{animation:none!important}.kb-enhanced .am-kept-photo{transform:rotate(-8deg)}.kb-enhanced .am-receipt{transform:rotate(7deg)}.kb-enhanced .am-box-flower{transform:rotate(24deg)}}

/* The finger travels from the heart bow to the lock. It never moves the key. */
.kb-drag-gesture{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:#f7e5bf}
.kb-enhanced[data-kb-state=closed] .kb-drag-gesture{display:block}
.kb-enhanced .kb-key-guide{display:none}
.kb-drag-trail,.kb-drag-arrow{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.kb-drag-trail{stroke-dasharray:5 12}
.kb-drag-landing{fill:none;stroke:currentColor;stroke-width:2;opacity:.35;transform-origin:512px 1261px;animation:kb-drag-land 5.2s ease-in-out infinite}
.kb-drag-finger{animation:kb-teach-drag 5.2s cubic-bezier(.4,0,.25,1) infinite}
.kb-drag-finger path{fill:#62472ce0;stroke:#fff0d0;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.kb-drag-finger path+path{fill:none}
.kb-drag-touch{fill:#ffe7ba1c;stroke:#fff0d0;stroke-width:2;opacity:.7}
.kb-enhanced[data-kb-cue-paused=true] .kb-drag-gesture *{animation-play-state:paused!important}
@keyframes kb-teach-drag{0%,8%{transform:translate(0,0);opacity:0}15%,24%{transform:translate(0,0);opacity:1}60%,70%{transform:translate(-306px,-62px);opacity:1}80%,100%{transform:translate(-306px,-62px);opacity:0}}
@keyframes kb-drag-land{0%,48%,85%,100%{opacity:.25;transform:scale(1)}62%,72%{opacity:.75;transform:scale(1.22)}}
@media(prefers-reduced-motion:reduce){.kb-drag-gesture *{animation:none!important}.kb-drag-finger{opacity:1}.kb-drag-landing{opacity:.45}}