/* The same warm paper, with more material detail in the selected miniatures. */
.memory-envelope .pop-wall { height: 100%; background: #b79f75; }
.ml-envelope { position: relative; width: 100%; height: 100%; border: 1px solid #a68b64; border-radius: 3px; background: linear-gradient(135deg,#b39a75,#e5d2a6 60%,#d2ba8d); box-shadow: inset 0 0 12px #765f3333,0 2px 3px #5b472a44; overflow: hidden; }
.ml-envelope-inner { position: absolute; inset: 5px; background: repeating-linear-gradient(45deg,#7f86651a 0 1px,transparent 1px 4px),#cdc2a2; }
.ml-fold { position: absolute; inset: 0; }
.ml-fold-left { clip-path: polygon(0 0,57% 62%,0 100%); background: linear-gradient(35deg,#c6ae83,#eadbb6); }
.ml-fold-right { clip-path: polygon(100% 0,43% 62%,100% 100%); background: linear-gradient(160deg,#f4e7c9,#c6ac80); }
.ml-fold-bottom { clip-path: polygon(0 100%,0 97%,48% 38%,52% 38%,100% 97%,100% 100%); background: linear-gradient(0deg,#c7b18a,#f3e5c1); filter: drop-shadow(0 -1px 1px #745d4580); }
.ml-wax { position: absolute; width: 33px; height: 32px; left: calc(50% - 16px); top: 44%; border-radius: 43% 51% 46% 47%; background: radial-gradient(circle at 30% 20%,#ad6260,#813d44 60%,#582832); box-shadow: 0 3px 2px #5a352c44,inset 1px 1px 2px #efb191; display: grid; place-items: center; }
.ml-wax b { width: 23px; height: 23px; border: 1px solid #c98274; border-radius: 50%; color: #e6b8a0; font: italic 18px Georgia,serif; text-align: center; text-shadow: 0 1px 1px #4a262b; }
.memory-letter .pop-wall,.memory-sprig .pop-wall,.memory-street .pop-wall,.memory-graduate .pop-wall { display: none; }
.memory-letter .pop-volume { transform: rotateZ(-5deg); }
.memory-envelope .pop-volume { transform: rotateZ(2deg); }
.memory-sprig .pop-tab { display: none; }
.memory-narrowboat .pop-volume { transform-origin: 50% 85%; }
.is-up .memory-narrowboat .pop-volume { animation: memory-mooring 5s ease-in-out 1.3s infinite; }
@keyframes memory-mooring { 0%,100% { transform: translateY(0) rotateZ(-.6deg); } 50% { transform: translateY(-1.5px) rotateZ(.6deg); } }
.memory-casino .pop-wall { height: 100%; background: #554e41; }
.memory-casino .pop-front { transform-style: preserve-3d; }
.vg-model { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(-8deg); }
.vg-bay { position: absolute; left: calc(var(--bay) * 36px); top: 7px; width: 36px; height: 180px; transform-style: preserve-3d; transform: translateZ(var(--vg-z)) rotateY(var(--vg-yaw)); }
.vg-face { position: absolute; inset: 0; background: linear-gradient(90deg,#746b56,#b0a283 16%,#5a5a51 50%,#b9ac8b 86%,#686251); border-top: 2px solid #f0c16c; border-bottom: 2px solid #dcc194; box-shadow: inset 0 2px 5px #f6c16955; }
.vg-edge .vg-face { background: repeating-linear-gradient(13deg,#7f572f 0 1px,#b08443 1px 2px,#503d2c 2px 3px); }
.vg-side { position: absolute; right: 0; width: 24px; height: 100%; transform: rotateY(-90deg); transform-origin: right; background: repeating-linear-gradient(0deg,#544b3c 0 3px,#6b5a41 3px 4px); }
.vg-roof { position: absolute; top: 0; width: 36px; height: 24px; transform: rotateX(-90deg); transform-origin: top; background: #78776a; border: 1px solid #cfac63; }
.vg-window { position: absolute; left: 10px; width: 16px; height: 22px; background: linear-gradient(120deg,#76a8a555,#152d39 35%,#132028 75%,#55425b); border: 1px solid #aaaf98; box-shadow: inset 2px 1px 2px #111d21,0 0 2px #e5d8a833; }
.vg-window:nth-of-type(4n+1) { border-left-color: #5a87a9; }
.vg-ledge { position: absolute; left: -1px; width: 38px; height: 3px; background: linear-gradient(#e1d5b2,#736d5a); box-shadow: 0 2px 1px #282d2888; }
.vg-fin { position: absolute; left: 4px; top: 0; bottom: 0; width: 3px; background: linear-gradient(90deg,#536456,var(--vg-light),#d5d4ae); box-shadow: -1px 0 5px var(--vg-light); clip-path: polygon(0 0,100% 0,100% 87%,45% 100%,0 87%); }
.vg-fin-r { left: auto; right: 3px; }
.vg-uplight { position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; background: linear-gradient(0deg,var(--vg-light),transparent); opacity: .48; clip-path: polygon(50% 100%,0 0,100% 0); }
.vg-diamond { position: absolute; left: 13px; top: 19px; width: 11px; height: 18px; background: #283e3e; border: 1px solid #a3dfc4; transform: skewY(20deg) rotate(-25deg); }
.vg-crown { position: absolute; left: 77px; top: 10px; width: 102px; text-align: center; color: #dffff3; transform: translateZ(20px); text-shadow: 0 0 4px #70ffe4,0 1px 1px #092d25; }
.vg-crown span { display: block; font: 700 9px/1.5 Arial,sans-serif; letter-spacing: .65px; }
.vg-crown b { display: block; font: 700 19px/1.1 Arial,sans-serif; letter-spacing: 2px; }
.vg-ground-floor { position: absolute; left: 0; right: 4px; bottom: 0; height: 37px; background: linear-gradient(90deg,#b6b297,#e2d9bb 32%,#b2bba6); transform: translateZ(16px); border-top: 3px solid #dbd2ac; border-bottom: 3px solid #9c9a82; display: flex; justify-content: space-around; padding: 9px 5px 0; }
.vg-ground-floor > span { position: absolute; top: 0; left: 29%; right: 29%; font: 4px/7px Arial,sans-serif; color: #b9f6db; background: #283e32; text-align: center; }
.vg-door { width: 49px; height: 24px; display: flex; background: #122d30; border: 1px solid #cbaa74; box-shadow: 0 0 4px #c5ad6d; }
.vg-door i { width: 50%; border-right: 1px solid #99c0a2; background: linear-gradient(120deg,#37869055,transparent 45%,#d8c86a55 48%,transparent 51%); }
.vg-shop { width: 58px; background: linear-gradient(135deg,#173639,#326776 30%,#a1628533 33%,#202631 60%); border: 2px solid #707b6e; }
.vg-roofline { position: absolute; top: 4px; left: -2px; width: 254px; height: 3px; background: #e3bd73; box-shadow: 0 0 4px #ffc760; transform: translateZ(13px); }
/* RGB source renders use an ivory paper mount with softly feathered outer edges. */
/* A shaped paper silhouette lets the ivory-backed graduate rise beyond the page
   without a rectangular backdrop; the source artwork remains untouched. */
.memory-portrait-piece .scene-art { clip-path: polygon(43% 0,61% 0,65% 5%,66% 13%,65% 22%,62% 25%,69% 28%,73% 35%,73% 50%,75% 65%,76% 81%,66% 85%,66% 92%,55% 95%,54% 100%,40% 100%,38% 83%,30% 82%,27% 73%,25% 56%,26% 36%,29% 28%,36% 25%,31% 23%,28% 16%,29% 9%,34% 3%); }
.memory-portrait-piece .pop-back { display: none; }
body.still .memory-narrowboat .pop-volume { animation: none; }
@media (prefers-reduced-motion: reduce) { .is-up .memory-narrowboat .pop-volume { animation: none; } }
.memory-photo-piece .pop-back { display: none; }
.memory-photo-piece .scene-art { mask-image: linear-gradient(90deg,transparent,#000 3% 97%,transparent),linear-gradient(0deg,transparent,#000 3% 97%,transparent); mask-composite: intersect; }
.mc-replay { display: inline-flex; align-items: center; gap: 8px; align-self: center; padding: 3px 12px; margin: 6px 0 0; border: 1px solid #bba67b77; border-radius: 20px; background: #fff6e0; color: #6b624a; font: .69em/1.5 var(--font-zh); cursor: pointer; min-height: 28px; flex: 0 0 auto; }
.mc-replay:hover { background: #f8e7c4; }
.mc-replay:focus-visible { outline: 2px solid #748160; outline-offset: 3px; }
.mc-replay span { font: 16px Arial,sans-serif; }
.paper.t-finale .flashback { width: 40%; margin-top: .55em; }
.paper.t-finale .mc-finale-stage { height: calc(var(--ph) * .30); }
.paper.t-finale .finale-line { padding-top: .45em; }
@media (max-height: 559px) {
  .paper.t-finale .mc-finale { width: 48%; }
  .paper.t-finale .mc-finale-stage { height: calc(var(--ph) * .44); }
  .paper.t-finale .mc-replay { position: absolute; left: 13%; bottom: 20%; }
}
@media (max-height: 559px) {
  .paper.t-finale .flashback { width: calc(var(--ph) * .58); margin: 0; }
  .paper.t-finale .mc-replay { left: 40%; transform: translateX(-50%); }
}

/* Bowling overlays stay in the artwork's own coordinate plane when it pops up. */
.mr-lane-animation { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mr-pin { position: absolute; width: 5%; height: 16%; }
.mr-pin-motion { width: 100%; height: 100%; transform-origin: 50% 95%; }
.mr-pin-motion svg { filter: drop-shadow(2px 2px 1px #42271250); }
.mr-ball-travel { position: absolute; left: 43%; top: 63.5%; width: 6.2%; aspect-ratio: 1; }
.mr-ball { width: 100%; height: 100%; border-radius: 50%; position: relative; background: radial-gradient(ellipse at 29% 20%,#e3f0cf 0%,#9db699 8%,#4d8078 21%,#153f4c 52%,#082732 78%,#244d52); box-shadow: inset -1px -2px 3px #09262cb0,2px 3px 2px #51341166; }
.mr-ball i { position: absolute; left: 40%; top: 25%; width: 11%; height: 13%; border-radius: 50%; background: #09242d; box-shadow: 0 1px 0 #7ca29b; }
.mr-ball i:nth-child(2) { left: 62%; top: 31%; }
.mr-ball i:nth-child(3) { left: 47%; top: 49%; width: 14%; height: 17%; }
.is-up .mr-ball-travel { animation: mr-roll 2.6s linear 1.1s both; }
.is-up .mr-ball { animation: mr-spin 2.6s linear 1.1s both; }
.is-up .mr-pin-motion { animation: mr-scatter .7s cubic-bezier(.2,.7,.3,1) var(--mr-hit) both; }
@keyframes mr-roll { from { left: 43%; } to { left: 90%; } }
@keyframes mr-spin { from { transform: rotate(0); } to { transform: rotate(900deg); } }
@keyframes mr-scatter { 0% { transform: none; } 45% { transform: translate(var(--mr-scatter),-2px) rotate(calc(var(--mr-fall) * .6)); } 100% { transform: translate(calc(var(--mr-scatter) * 2),2px) rotate(var(--mr-fall)) scaleY(.85); } }
body.still .mr-lane-animation *,body.still .mr-ball { animation: none; }
body.still .mr-ball-travel { left: 65%; }
@media (prefers-reduced-motion: reduce) {
  .is-up .mr-lane-animation *,.is-up .mr-ball { animation: none; }
  .mr-ball-travel { left: 65%; }
}

/* Hard paper contours preserve texture sharpness when the 3-D plane enlarges.
   A feathered CSS mask would rasterize these high-resolution renders at 316px. */
.memory-realistic-piece .pop-back { display: none; }
.memory-realistic-bowling .scene-art { clip-path: polygon(29% 17%,42% 17%,45% 23%,44% 35%,39% 41%,44% 51%,46% 57%,95% 57%,100% 66%,100% 87%,96% 91%,4% 91%,0 87%,0 57%,3% 44%,10% 42%,18% 42%,20% 35%,11% 31%,11% 24%,17% 24%,21% 28%,28% 30%); }
.memory-realistic-graduation .scene-art { clip-path: polygon(30% 3%,77% 0,81% 6%,83% 33%,85% 51%,89% 59%,91% 78%,97% 87%,98% 98%,2% 98%,3% 88%,10% 77%,12% 65%,8% 52%,8% 39%,13% 29%,20% 24%,24% 28%,25% 10%); }
.memory-realistic-running .scene-art { clip-path: polygon(51% 0,67% 0,72% 5%,74% 15%,72% 23%,76% 23%,77% 34%,73% 39%,69% 40%,70% 46%,81% 43%,84% 36%,93% 37%,96% 49%,94% 63%,99% 74%,100% 88%,95% 94%,86% 98%,18% 99%,4% 92%,0 85%,0 73%,5% 65%,5% 54%,0 48%,0 32%,6% 19%,15% 13%,26% 14%,33% 18%,37% 31%,38% 32%,39% 23%,48% 19%,50% 12%); }
/* Give Chromium a full-resolution surface before the enlarged paper transform. */
#sceneView .memory-realistic-piece .pop-front > picture { position: absolute; inset: 0; display: block; }
#sceneView .memory-realistic-piece .pop-front { inset: auto; left: 0; top: 0; width: 400%; height: 400%; transform: translateZ(var(--depth,2px)) scale(.25); transform-origin: 0 0; }