/* Independent transparent sprites; the lock contains no vegetation. */
.mechanism{position:absolute;left:33%;top:38%;width:36%;aspect-ratio:1;z-index:5;transform-origin:29% 8%;filter:drop-shadow(2px 7px 5px #170706a0);pointer-events:none}
.mechanism img{position:absolute;display:block}
.body-sprite{inset:0;width:100%;height:100%;z-index:1}
.shackle-sprite{width:70%;height:65%;left:15%;top:-48%;z-index:2;transform-origin:21% 92%}
.vine-layer{position:absolute;width:65%;height:22%;z-index:8;pointer-events:none;transform-origin:center;filter:drop-shadow(0 3px 2px #110404b0)}
.vine-layer img{width:100%;height:100%;object-fit:contain}
.vine-one{left:18%;top:31%;transform:rotate(57deg)}
.vine-two{left:18%;top:33%;transform:rotate(-15deg)}
.vine-three{left:21%;top:29%;transform:rotate(-43deg)}
/* The sprite shaft tip and metal aperture share the same fixed axis. */
.key-axis{position:absolute;left:50.8%;top:46.3%;width:0;height:0;z-index:12;pointer-events:none}
.frontal-key{position:absolute;width:26cqw;height:26cqw;max-width:none;left:-13cqw;top:-10.92cqw;opacity:0;transform-origin:50% 42%;filter:drop-shadow(0 14px 9px #0009)}
.cover-front{container-type:inline-size}
.stage .skip{opacity:0;pointer-events:none}
.stage:has(.is-animating) .skip{opacity:1;pointer-events:auto}
.is-animating .password-panel,.is-animating .hint,.is-animating .lock-hit{opacity:0;pointer-events:none}
.is-animating .lock-hit::after{animation:none}
.book.opened{transform:none}
.inner-cover,.page{transform-style:flat}
.paper-content::before{pointer-events:none}
.paper-content button{position:relative;z-index:1}
.book.opened .outer-cover{pointer-events:none}
@media(min-width:800px){.book.opened{transform:translateX(35%)}}

/* A small bookplate: the writing line remains a native accessible input. */
.password-panel{top:52%;width:min(84%,340px);padding:27px 25px 21px;border:1px solid #d0a66a;border-radius:2px;background:radial-gradient(ellipse at 50% 20%,#fae8c8 0%,#e7cc9f 72%,#bf935b 100%);color:#45271d;box-shadow:0 18px 36px #130307bb,inset 0 0 0 4px #ead3aa,inset 0 0 0 5px #a07743,inset 0 0 24px #a56c3738;backdrop-filter:none;transform:translate(-50%,20px) rotate(-2deg) scale(.95)}
.password-panel.visible{transform:translate(-50%,0) rotate(-1deg) scale(1)}
.note-heading{display:block;text-align:center;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:#80542e;margin:0 0 13px}
.password-panel label{color:#4b291f;font-size:1.35rem;line-height:1.2;font-weight:400;font-style:italic;margin-bottom:17px;text-shadow:0 1px #fff7df}
.password-row{display:flex;flex-direction:column;align-items:center;gap:17px}
.password-row input{width:100%;flex:none;border:0;border-bottom:1px solid #9e7547;background:transparent;border-radius:0;color:#522420;text-align:center;padding:8px 4px;font-size:1.25rem;letter-spacing:.14em;box-shadow:none}
.password-row input::placeholder{font-size:1rem;font-style:italic;letter-spacing:.03em;color:#8c694f;opacity:1}
.password-row input:focus{border-color:#722833;box-shadow:0 2px 0 #72283333;outline:none}
.password-row button{min-height:44px;min-width:130px;padding:10px 23px;border:1px solid #caa16a;border-radius:2px;color:#f6dfb5;background:linear-gradient(125deg,#71313a,#3c111d);box-shadow:0 3px 6px #754c3040,inset 0 0 0 3px #531e2a,inset 0 0 0 4px #a8794a;text-transform:uppercase;letter-spacing:.16em;font-size:.75rem}
.password-row button:hover{filter:brightness(1.15)}
.password-row button:focus-visible,.close-note:focus-visible{outline:2px solid #6c2930;outline-offset:4px}
.password-panel p{color:#71543c;font-size:.78rem;line-height:1.35;margin-top:13px}
.close-note{position:absolute;right:9px;top:6px;width:30px;height:30px;border:0;background:none;color:#775137;font-size:1.4rem;cursor:pointer}
@media(max-height:650px){.password-panel{top:39%;padding-top:20px;padding-bottom:15px}.password-panel label{font-size:1.15rem;margin-bottom:10px}.note-heading{margin-bottom:8px}.password-row{gap:10px}}

/* The paper surface is separate from the controls, so torn edges never clip focus. */
.password-panel{top:50%;left:50%;padding:36px 30px 30px;border:0;border-radius:0;background:none;box-shadow:none;isolation:isolate;filter:drop-shadow(0 14px 17px #120409b3);transform:translate(-50%,-46%) scale(.96)}
.password-panel.visible{transform:translate(-50%,-50%) scale(1)}
.password-panel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 14% 80%,#ae763329,transparent 42%),radial-gradient(ellipse at 77% 9%,#fff6dd99,transparent 56%),repeating-linear-gradient(3deg,#b8976410 0 1px,transparent 1px 3px),repeating-linear-gradient(93deg,#fff8e51a 0 1px,transparent 1px 4px),#eddbb9;box-shadow:inset 0 0 17px 7px #a7703680,inset 0 0 45px #ba874653;clip-path:polygon(2% 3%,7% 2%,12% 3%,18% 2.2%,23% 3%,28% 1%,34% 0%,39% 3.1%,44% 4%,49% 2.6%,55% 3%,61% 1.7%,67% 3%,73% 2%,78% .4%,84% 1%,89% 2%,97% 2.5%,98% 9%,97% 16%,98% 23%,97.4% 32%,99% 40%,97% 47%,98% 54%,97.5% 62%,99% 71%,98% 80%,98.6% 89%,97% 97%,90% 96%,84% 97%,78% 96.3%,72% 98%,65% 97%,59% 99%,53% 98%,48% 95%,43% 96%,37% 96.5%,31% 96%,25% 97%,20% 96%,14% 99%,8% 98%,2% 99%,1% 91%,2% 84%,1.5% 77%,2% 69%,.5% 61%,2% 53%,1% 47%,2.5% 40%,2% 33%,1% 26%,2% 20%,1% 14%,2% 8%)}
.password-panel.shake{animation:paper-shake .38s ease}
.close-note{right:16px;top:13px}
@keyframes paper-shake{25%{transform:translate(calc(-50% - 6px),-50%) rotate(-1deg)}75%{transform:translate(calc(-50% + 6px),-50%) rotate(1deg)}}
@media(max-height:650px){.password-panel{top:50%;padding:27px 25px 23px}}
@media(prefers-reduced-motion:reduce){.password-panel{transition:opacity .1s}.password-panel.shake{animation:none}}
@font-face{font-family:BookHand;src:url('./assets/GreatVibes-Regular.ttf') format('truetype');font-display:swap}
.writing-line{position:relative;width:100%;margin-top:10px}
.writing-line #password{font-family:BookHand,'Segoe Script',cursive;font-size:2.65rem;line-height:1.3;letter-spacing:0;padding:7px 8px 0;color:#512329;caret-color:#82502d}
.writing-line #password::placeholder{font-family:Georgia,serif;font-size:1rem}
.quill-position{position:absolute;left:50%;top:74%;width:0;height:0;pointer-events:none;z-index:3;opacity:0;transition:left .12s ease-out,opacity .25s}
.writing-line:focus-within .quill-position{opacity:1}
.writing-quill{position:absolute;width:125px;height:125px;max-width:none;left:-15px;top:-112.5px;transform-origin:12% 90%;filter:drop-shadow(2px 3px 2px #50301844);transform:rotate(-7deg);transition:transform .2s}
.is-writing .writing-quill{animation:quill-stroke .22s ease-in-out infinite}
@keyframes quill-stroke{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(-3deg) translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.quill-position{transition:none}.is-writing .writing-quill{animation:none}}
.writing-line #password{color:transparent;caret-color:#82502d}
.writing-line #password::placeholder{color:#8c694f}
.revealed-ink{position:absolute;top:7px;font-family:BookHand,'Segoe Script',cursive;font-size:2.65rem;line-height:1.3;font-weight:400;color:#512329;white-space:pre;padding-right:5px;pointer-events:none;user-select:none}
.writing-line:focus-within .quill-position{opacity:0}
.writing-line.is-writing:focus-within .quill-position{opacity:1}
.writing-line .quill-position{transition:opacity .18s}
.writing-line.is-writing .writing-quill{animation:none;transform:rotate(var(--pen-angle,-6deg));transition:none}
.password-panel::before{background:transparent url('./assets/paper-handmade.png') center/100% 100% no-repeat;clip-path:none;box-shadow:none;inset:-8px -7px}
.password-panel{filter:drop-shadow(0 16px 17px #120409a3) drop-shadow(0 2px 2px #32140766)}
.password-panel.viewport-note{position:fixed;z-index:100;overflow-y:auto;overflow-x:hidden;transition:opacity .25s,transform .25s;scrollbar-width:thin;padding:36px 30px 30px}
.viewport-note::before{inset:0}
.viewport-note.compact-note{padding:24px 25px 20px}
.compact-note .note-heading{margin-bottom:8px}
.compact-note label{font-size:1.15rem;margin-bottom:8px}
.compact-note .password-row{gap:10px}
.compact-note .writing-line{margin-top:0}

/* The larger touch target and the circular visual cue are independent. */
.hint{display:none}
.lock-hit{left:24%;top:26%;width:54%;height:37%;border-radius:24%;touch-action:manipulation}
.lock-hit::after{inset:auto;left:50%;top:59.5%;width:44cqw;height:44cqw;border-radius:50%;pointer-events:none;border:1px solid #ffd58b66;box-shadow:0 0 12px #efbc6340,inset 0 0 9px #efbc6326;transform:translate(-50%,-50%) scale(.08);opacity:0;animation:heart-ripple 3.6s ease-out infinite}
@keyframes heart-ripple{0%{transform:translate(-50%,-50%) scale(.08);opacity:0}12%{opacity:.38}65%{transform:translate(-50%,-50%) scale(1);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.lock-hit:focus-visible{outline:2px solid #e6bc78;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.lock-hit::after{animation:none}}
.lock-hit::after{border:2px solid #ffe4a9cc;box-shadow:0 0 15px #ffc35d99,inset 0 0 12px #ffc35d66}
@keyframes heart-ripple{0%{transform:translate(-50%,-50%) scale(.08);opacity:0}12%{opacity:.85}38%{opacity:.65}72%{transform:translate(-50%,-50%) scale(1);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.sparkles i{width:5px;height:5px;background:#fff3c7;box-shadow:0 0 5px #fff1b8,0 0 13px #ffc760,0 0 22px #efb23b88;animation:lock-glimmer 3.6s ease-in-out infinite}
.sparkles i::after{content:"";position:absolute;left:-4px;top:2px;width:13px;height:1px;background:linear-gradient(90deg,transparent,#fff2c3,transparent)}
.sparkles i:nth-child(1){left:35%;top:43%;animation-delay:.1s}
.sparkles i:nth-child(2){left:64%;top:41%;animation-delay:.45s}
.sparkles i:nth-child(3){left:68%;top:48%;animation-delay:.8s}
.sparkles i:nth-child(4){left:39%;top:52%;animation-delay:1.1s}
.sparkles i:nth-child(5){left:56%;top:56%;animation-delay:1.4s}
.sparkles i:nth-child(6){left:48%;top:39%;animation-delay:.65s}
@keyframes lock-glimmer{0%,8%,48%,100%{opacity:0;transform:scale(.35)}23%{opacity:.95;transform:scale(1.15)}36%{opacity:.35;transform:scale(.7)}}
.is-animating .sparkles{opacity:0}
@media(prefers-reduced-motion:reduce){.sparkles i{animation:none}}
/* Specular glints stay on the gold body, away from the keyhole and silhouette. */
.sparkles i:nth-child(1){left:42%;top:42%}
.sparkles i:nth-child(2){left:59%;top:42.5%}
.sparkles i:nth-child(3){left:61%;top:46%}
.sparkles i:nth-child(4){left:43%;top:48.5%}
.sparkles i:nth-child(5){left:54%;top:51.5%}
.sparkles i:nth-child(6){left:49%;top:53.5%}
.sparkles i{box-shadow:0 0 4px #fff1b8,0 0 8px #ffc760;}
.sparkles i{width:13px;height:17px;margin-left:-6.5px;margin-top:-8.5px;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 0 3px #ffd16ba6)}
.sparkles i::after{inset:0;width:100%;height:100%;background:radial-gradient(ellipse,#fffef0 0%,#ffe9a3 48%,#efb64f 100%);clip-path:polygon(50% 0%,56% 24%,63% 36%,76% 44%,100% 50%,76% 56%,63% 64%,56% 76%,50% 100%,44% 76%,37% 64%,24% 56%,0% 50%,24% 44%,37% 36%,44% 24%)}
.sparkles i:nth-child(2n){width:10px;height:14px;margin-left:-5px;margin-top:-7px}
#feedback:empty{display:none}
.password-row button{position:relative;isolation:isolate;min-width:174px;min-height:50px;margin-top:6px;padding:14px 35px;border:1px solid #ac783a;border-radius:5px 15px 5px 15px;background:radial-gradient(ellipse at 50% 0%,#a35a58aa,transparent 65%),linear-gradient(115deg,#431723,#77303a 45%,#42121e);color:#ffe4ac;font-family:Georgia,'Times New Roman',serif;font-size:.82rem;letter-spacing:.2em;text-shadow:0 1px 2px #24050b;box-shadow:0 5px 8px #49271144,0 1px 0 #fff0c7,inset 0 1px 0 #e7b57499,inset 0 -2px 5px #23081188;transition:filter .2s,transform .2s,box-shadow .2s}
.password-row button::before{content:"";position:absolute;inset:4px;border:1px solid #d6ae6880;border-radius:2px 11px 2px 11px;pointer-events:none;box-shadow:inset 0 0 0 1px #210c1640}
.password-row button::after{content:"✦";position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:.72rem;color:#e9bf76;text-shadow:0 1px 2px #2b1010;pointer-events:none}
.password-row button:hover{filter:brightness(1.12);box-shadow:0 6px 12px #49271155,inset 0 1px 0 #e7b57499}
.password-row button:active{transform:translateY(1px);filter:brightness(.96)}
.contents-page{background:#f1e5cc url('./assets/paper-handmade.png') center/cover;color:#4c3328;container-type:inline-size}
.contents-page::after{box-shadow:inset 13px 0 23px #50341930,inset -2px 0 5px #70593222}
.inner-cover>.contents-portrait{position:absolute;left:9%;top:3%;width:88%;height:59%;object-fit:contain;mix-blend-mode:multiply;opacity:.73;mask-image:linear-gradient(#000 68%,transparent 100%);pointer-events:none}
.contents-copy{position:absolute;inset:0;padding:0 11%;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;height:100%;background:linear-gradient(transparent 37%,#f1e5cc77 52%,#f1e5cce8 64%,#f1e5cc00 100%)}
.contents-dedication{font-family:BookHand,cursive;font-size:clamp(25px,8cqw,40px);margin:0 0 4px;color:#815d40}
.contents-copy h1{font-size:clamp(30px,10cqw,50px);font-weight:400;letter-spacing:.035em;margin:0 0 5%;line-height:1.1}
.contents-copy nav{border-top:1px solid #9c774d77;border-bottom:1px solid #9c774d55;padding:6px 0}
.contents-copy nav button{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 0;border:0;background:none;color:#50362b;font:inherit;font-size:clamp(14px,4cqw,20px);text-align:left;cursor:pointer}
.contents-number{font-size:.78em;color:#947348;min-width:18px}
.contents-folio{margin-left:auto;color:#947348;font-size:.8em}
.contents-copy nav button:hover{color:#8a343e}
.contents-copy nav button:focus-visible{outline:1px solid #8a343e;outline-offset:3px}
.contents-footer{font-size:clamp(12px,3.1cqw,15px);font-style:italic;text-align:center;letter-spacing:.04em;color:#866c50;margin:7% 0 8%}
/* A faint graphite impression in the paper, with typography laid over it. */
.inner-cover>.contents-portrait{left:0;top:5%;width:100%;height:90%;object-fit:cover;object-position:53% center;opacity:.22;filter:grayscale(1) contrast(1.3) brightness(1.12);mix-blend-mode:multiply;mask-image:radial-gradient(ellipse 65% 58% at 50% 48%,#000 35%,#0009 65%,transparent 95%)}
.contents-copy{justify-content:flex-start;padding-top:18%;background:none}
.contents-dedication{margin-bottom:12px}
.contents-copy h1{margin-bottom:15%}
.contents-copy nav{position:relative;border-color:#85644377;padding:14px 0}
.contents-copy nav button{min-height:64px;color:#38251d;text-shadow:0 1px 3px #f6e9d8}
.contents-footer{margin-top:auto;margin-bottom:9%}
.contents-page{border-radius:0;background-color:#f1e5cc;background-size:145% 145%;background-position:center}
.contents-page::after{box-shadow:none}
.contents-copy{padding-top:13%}
.contents-copy h1{margin-bottom:12%}
.contents-copy nav{padding:8px 0}
.contents-copy nav button{min-height:56px;padding:15px 0;gap:9px}
.contents-row{display:flex;align-items:center;min-height:56px;padding:15px 0;gap:9px;color:#38251d;font-size:clamp(14px,4cqw,20px);text-shadow:0 1px 3px #f6e9d8}
.book.opened{touch-action:pan-y;user-select:none;cursor:grab}
.book.page-dragging{cursor:grabbing}
.contents-page:focus{outline:none}
.contents-page::after{background:linear-gradient(90deg,transparent 30%,rgb(62 38 20 / var(--turn-shade,0)));pointer-events:none}
#pageOne{background:#f1e5cc url('./assets/paper-handmade.png') center/145% 145%;border-radius:0;color:#493326}
#pageOne .paper-content{inset:10% 12%;padding:0;border:0;background:none;justify-content:flex-start;text-align:left}
#pageOne .paper-content::before{display:none}
#pageOne h2{font-size:clamp(26px,7cqw,40px);line-height:1.13;margin:22px 0}
#pageOne p{font-size:clamp(15px,3.9cqw,20px);line-height:1.65;margin:0 0 1em}
.page-folio{margin-top:auto;text-align:center;color:#937348;font-size:13px}
.curl-surface{position:absolute;inset:0;z-index:6;transform-style:preserve-3d;pointer-events:none;visibility:hidden}
.curl-strip{position:absolute;left:0;top:0;height:100%;transform-origin:0 50%;transform-style:preserve-3d;will-change:transform}
.curl-front,.curl-back{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.curl-copy{border-radius:0!important;pointer-events:none;max-height:none!important}
.curl-back{transform:rotateY(180deg);background:#f1e5cc url('./assets/paper-handmade.png') center/1500% 145%}
.curl-shadow{position:absolute;left:0;top:0;height:100%;z-index:4;pointer-events:none;background:linear-gradient(90deg,#2b1b0c80,#2b1b0cd9);filter:blur(14px);opacity:0}
.page-canvas{position:absolute;z-index:7;pointer-events:none;visibility:hidden;max-width:none;transform:translateZ(1px)}
/* Prevent browser horizontal overscroll navigation without changing layout
   or trapping the browser's Back button / Android system gestures. */
html,body{overscroll-behavior-x:none}
.stage,.book{overscroll-behavior-x:none}
#outerCover{z-index:60}
.book>.page-canvas{z-index:70}
.book>.page{background:#f1e5cc url('./assets/paper-handmade.png') center/145% 145%;border-radius:0;color:#493326;container-type:inline-size}
.book>.page .paper-content{inset:10% 12%;padding:0;border:0;background:none;justify-content:flex-start;text-align:left}
.book>.page .paper-content::before{display:none}
.book>.page h2{font-size:clamp(26px,7cqw,40px);line-height:1.13;margin:22px 0}
.book>.page p{font-size:clamp(15px,3.9cqw,20px);line-height:1.65;margin:0 0 1em}
.page-canvas{z-index:8}
.contents-copy nav .contents-row{min-height:48px;padding:12px 0}
/* Closed-book UI does not paint or lay out the internal paper stack. */
.book:not(.opened)>.inner-cover{display:none}
.book:not(.opened)>.page,.book:not(.pages-ready)>.page{display:none}