:root{--ink:#36372f;--paper:#ebe8da}*{box-sizing:border-box}body{margin:0;color:var(--ink);font:14px 'Times New Roman',Times,serif;background:#c7c4b4;min-height:100vh;background-image:linear-gradient(90deg,#817c6110 1px,transparent 1px),linear-gradient(#fff1 1px,transparent 1px),radial-gradient(ellipse at 40% 25%,#e9e6d7,transparent 75%);background-size:36px 36px,36px 36px,100% 100%}body:after{content:'';position:fixed;bottom:0;left:0;right:0;height:14vh;background:linear-gradient(#5f594824,#756c530b),repeating-conic-gradient(#b0a68c 0% 25%,#beb49d 0% 50%) 0 / 140px 100px;border-top:8px solid #8c846b;box-shadow:0 -2px 1px #6e6852;z-index:-1}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button:focus-visible,a:focus-visible,.magnet:focus-visible{outline:2px solid #725e3e;outline-offset:5px}a{color:inherit;text-decoration:none}header{position:absolute;top:0;left:0;right:0;height:70px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;z-index:2}.wordmark{font-size:16px}.tools{display:flex;gap:17px}.tools button{font-family:Arial,sans-serif;font-size:22px;padding:8px}main{min-height:calc(100svh - 75px);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:55px 20px 12px;gap:15px}.scene{width:min(410px,88vw);perspective:1400px;position:relative;padding:0 9px 10px}.scene:after{content:'';position:absolute;bottom:-9px;left:-30px;right:-75px;height:38px;border-radius:50%;background:#3e38294d;filter:blur(15px);z-index:-1}.fridge{position:relative;filter:drop-shadow(16px 5px 5px #49463055)}.fridge:before{content:'';position:absolute;top:4px;bottom:10px;right:-15px;width:20px;background:linear-gradient(90deg,#a69f83,#938e76);transform:skewY(15deg);border-radius:0 4px 3px 0;z-index:-1}.freezer,.door{position:relative;border:1px solid #9c9a81;background-color:#d5d2ba;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23e7e2c8' surfaceScale='1.8'%3E%3CfeDistantLight azimuth='45' elevation='65'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"),linear-gradient(100deg,#cbc8ad,#e0ddc5 10%,#d4d0b7 85%,#bbb89e);background-size:120px 120px,100% 100%;box-shadow:inset 2px 2px 3px #f0eddc,inset -4px -3px 4px #918f7870}.freezer{height:162px;border-radius:7px 7px 3px 3px;border-bottom:5px solid #6c6d5c}.door{height:440px;border-radius:3px 3px 5px 5px;border-top:3px solid #e6e1c8}.door:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(174deg,transparent 91%,#a48f6225 97%,#9e97793b),radial-gradient(ellipse at 92% 88%,#87784e17,transparent 20%)}.brand{position:absolute;right:28px;top:20px;font:italic bold 12px 'Times New Roman',serif;color:#d9d7c6;background:#5a594c;padding:3px 8px;border:1px solid #77776a;box-shadow:0 1px 1px #fff7;letter-spacing:.5px}.handle{position:absolute;top:28px;left:19px;width:20px;height:195px;border-radius:3px;background:linear-gradient(90deg,#413d31,#827354 20%,#554531 30%,#765e3e 48%,#493d2d 74%,#aba48b 80%,#45483f 95%);border:1px solid #58594a;box-shadow:5px 4px 3px #49463155;z-index:5}.handle:before,.handle:after{content:'';position:absolute;left:-2px;right:-2px;height:12px;background:linear-gradient(90deg,#626459,#ceccba,#797c6c);border-radius:2px}.handle:before{top:0}.handle:after{bottom:0}.small-handle{top:57px;height:85px}.card-area{position:absolute;top:77px;left:19%;right:9%;perspective:1200px}.card{display:block;width:100%;aspect-ratio:1.48;background:transparent;padding:0;position:relative;transform:rotate(-4deg);transition:transform .25s;touch-action:pan-y;filter:drop-shadow(3px 6px 3px #403c3455)}.card:hover{transform:rotate(-2deg) translateY(-5px)}.card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.25,.7,.25,1)}.flipped .card-inner{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;background:#f4efdf;overflow:hidden}.face img{width:100%;height:100%;object-fit:contain;display:block}.face.back{transform:rotateY(180deg)}.under-card{position:absolute;top:0;left:0;right:0;aspect-ratio:1.48;background:#e8e0c9;box-shadow:1px 2px 3px #0003;transform:rotate(3deg)}.under-card.two{transform:rotate(-7deg);background:#c8c8b3}.card-caption{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:#777764;font-size:10px}.card-caption button{font:18px Arial;padding:0 5px}.magnet{position:absolute;z-index:6;touch-action:none;cursor:grab;user-select:none}.magnet:active{cursor:grabbing}.star{left:90px;top:85px;font-size:41px;line-height:1;color:#c69b37;text-shadow:1px 1px #efd36e,2px 3px #87722e,3px 4px 3px #0005;transform:rotate(12deg)}.round{right:30%;top:60px;width:25px;height:25px;border-radius:50%;background:radial-gradient(circle at 30% 22%,#d78064,#9b4332 60%,#653529);box-shadow:2px 3px 3px #0005}.bottom-vent{position:absolute;bottom:0;left:0;right:0;height:26px;border:5px solid #9b9983;background:repeating-linear-gradient(0deg,#43483e 0 2px,#828676 2px 4px);box-shadow:inset 0 2px 3px #0006}.foot{position:absolute;bottom:-7px;width:25px;height:9px;background:#45463b;border-radius:0 0 2px 2px;z-index:-1}.foot.left{left:28px}.foot.right{right:28px}.details{margin:14px -3px 0;padding:10px 12px;background:#e9e4d0;box-shadow:1px 2px 3px #0002;transform:rotate(-2deg);display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}.details:before{content:'';position:absolute;top:-6px;left:40%;width:37px;height:13px;background:#b6ae8890;transform:rotate(3deg)}.year{font:17px 'Times New Roman',Times,serif}#people{display:flex;gap:6px 10px;justify-content:center;flex-wrap:wrap}.person{font:12px 'Times New Roman',Times,serif;display:flex;gap:4px;align-items:baseline}.person small{font:11px 'Times New Roman',Times,serif;color:#72705e}.people-heading{display:none}.demo-label{font:10px 'Times New Roman',Times,serif;color:#6e6c5d;z-index:1}footer{height:75px;display:flex;justify-content:center;align-items:center;gap:14px;padding:0 15px 15px;position:relative;z-index:2}.timeline{display:flex;align-items:center;background:#e3dfcf;border:1px solid #a7a38d;box-shadow:1px 2px 3px #0002;border-radius:3px;padding:3px}.timeline button{padding:8px 14px;font-size:13px}.timeline button:disabled{opacity:.25;cursor:default}#years{display:flex;max-width:62vw;overflow:auto;scrollbar-width:none}.timeline .selected{background:#666e59;color:#f1eddc;border-radius:1px}.flip-button{border:1px solid #a7a38d;background:#e3dfcf;padding:8px 12px;border-radius:3px;font-size:19px;box-shadow:1px 2px 3px #0002}dialog{border:1px solid #a8a490;color:var(--ink);border-radius:3px;background:#eae6d8;padding:25px;max-height:88vh;width:min(850px,94vw);box-shadow:0 30px 70px #0005}dialog::backdrop{background:#30342ad0;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}h2{font:normal 25px 'Times New Roman',serif;margin:0}.close{font-size:27px;margin-left:auto}#galleryGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding:10px 5px}#galleryGrid button{transition:transform .25s;padding:0}#galleryGrid button:hover{transform:translateY(-5px) rotate(-2deg)}.thumbnail{aspect-ratio:1.48;background:white;box-shadow:3px 5px 8px #0003;margin-bottom:12px;overflow:hidden}.thumbnail img{width:100%;height:100%;object-fit:contain}#zoomContent{width:100%;aspect-ratio:1.48;background:#faf5e7;overflow:hidden}#zoomContent img{width:100%;height:100%;object-fit:contain}#zoom .flip-button{display:block;margin:18px auto 0;font-size:14px}#instructions{max-width:560px;font-size:14px;line-height:1.6}code{font-size:11px;background:#d8d4c3;padding:3px 5px}.example{display:block;padding:15px;overflow:auto;white-space:nowrap}hr{border:0;border-top:1px solid #bcb6a2;margin:22px 0}.upload-button{display:inline-block;background:#666e59;color:white;padding:10px 16px;cursor:pointer}.upload-button input{display:block;width:100%;max-width:230px;margin-top:8px;font-size:10px}.demo-art{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:#e9e2c9;color:#3d553e;border:9px solid #f5f0df;text-align:center}.demo-art .snow{position:absolute;inset:0;background-image:radial-gradient(#9c997733 1px,transparent 1px);background-size:18px 18px}.demo-art .tree{font-size:56px;line-height:1;z-index:1;color:#435d43;text-shadow:0 1px #b9b283}.demo-art .greeting{font:24px/1 'Times New Roman',serif;z-index:1;margin:8px 0}.demo-art .mini{font:6px 'Times New Roman',serif;z-index:1}.demo-art .mini:empty{display:none}.demo-art .demo-year{font:11px 'Times New Roman',serif;margin-top:7px;z-index:1}.demo-art.variant1{background:#e4ddca;color:#783e32}.demo-art.variant2{background:#e8e0cf}.demo-back{background:#f0e8d4;color:#5a594b;padding:20px;gap:10px}.demo-back .greeting{font-size:23px}.demo-back p{font:12px/1.6 'Times New Roman',serif;margin:0;max-width:200px}#zoomContent .demo-art .greeting{font-size:clamp(24px,6vw,60px)}#zoomContent .tree{font-size:90px}#zoomContent .demo-art p{font-size:20px;max-width:420px}.empty-back{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px;background:#eee7d2;font:18px 'Times New Roman',serif;gap:14px}.empty-back small{font:12px/1.5 'Times New Roman',serif;color:#8e8879}.scene.entering .card{animation:arrive .35s ease-out}@keyframes arrive{from{transform:translateY(-15px) rotate(-8deg);opacity:.3}to{transform:rotate(-4deg);opacity:1}}[hidden]{display:none!important}@media(min-height:880px){.freezer{height:180px}.door{height:490px}.card-area{top:90px}.round{top:72px}}@media(max-width:600px){header{height:55px;padding:0 20px}.wordmark{font-size:14px}.tools{gap:8px}main{padding:63px 20px 14px;min-height:calc(100svh - 65px);gap:12px}.scene{width:min(350px,85vw)}.freezer{height:132px}.door{height:386px}.brand{top:17px;right:21px;font-size:10px}.small-handle{top:45px;height:70px}.handle{left:16px;width:17px}.star{top:65px;left:80px;font-size:37px}.card-area{top:70px;left:20%;right:8%}.round{top:54px;width:23px;height:23px}.demo-art .greeting{font-size:20px}.demo-art .tree{font-size:43px}.person{font-size:11px}.person small{font-size:10px}.details{padding:9px 5px;margin-top:9px}.card-caption{margin-top:10px}.year{font-size:15px}footer{height:65px;padding-bottom:12px}#galleryGrid{grid-template-columns:repeat(2,1fr);gap:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.card-caption{justify-content:flex-end}.wordmark{max-width:calc(100% - 85px)}
/* Magnets and falling paper */
main{padding-top:85px}.scene{isolation:isolate}.reset-card{position:absolute;top:-45px;left:calc(50% - 18px);width:36px;height:36px;border:1px solid #a19c86;background:#e6e1cf;box-shadow:1px 2px 3px #0002;border-radius:3px;font:24px 'Times New Roman',serif;z-index:9}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.bear,.santa{width:53px;height:61px;filter:drop-shadow(2px 3px 1px #30291a77)}.bear{right:30px;top:64px;transform:rotate(9deg)}.santa{left:58px;bottom:53px;transform:rotate(-8deg)}.magnet img{display:block;width:100%;height:100%;pointer-events:none}.magnet.dragging{cursor:grabbing;filter:drop-shadow(3px 5px 3px #30291a66)}.round{top:85px;right:27%;z-index:12}.star{top:85px;left:90px}.card{z-index:2}.card:hover{transform:rotate(-4deg)}.card.falling{transition:none!important;animation:none!important;pointer-events:none;z-index:20;filter:drop-shadow(5px 10px 5px #302b2144)}.card.landed{filter:drop-shadow(1px 2px 1px #302b2166)}.card-area{z-index:7}.magnet{z-index:12}.details{z-index:0}button:disabled{cursor:default;opacity:.35}.face img{background:#eee9d9}.scene.entering .card{animation:none}@media(max-width:600px){main{padding-top:85px}.bear,.santa{width:45px;height:52px}.bear{top:57px;right:24px}.santa{bottom:45px;left:52px}.round{top:76px}.star{top:69px;left:80px}}
/* Pin constraints own the outer card transform; flips stay on the inner sheet. */
.card{transition:none;will-change:transform}.round{right:calc(45% - 12px)}.wordmark{max-width:100%}.card-area{perspective:none}.card-inner{perspective:1200px}

.reset-card{left:50%;transform:translateX(-50%);width:auto;white-space:nowrap;padding:0 12px;display:inline-flex;align-items:center;gap:7px}.reset-card span,#flip span{font:14px "Times New Roman",Times,serif}#flip{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}@media(max-width:380px){.timeline button{padding:8px 10px}#years{max-width:46vw}}

@font-face{font-family:'Berkshire Swash';src:url('assets/berkshire-swash.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
.wordmark{font-family:'Berkshire Swash',Georgia,serif;font-size:clamp(23px,2.5vw,30px);font-weight:400;line-height:1.15;color:#3d553e;letter-spacing:0;max-width:100%;text-wrap:balance}
@media(max-width:600px){.wordmark{font-size:22px;max-width:350px}header{height:70px}}

/* Keep the mobile heading in document flow and reserve a reset-button row. */
@media(max-width:600px){header{position:relative;height:auto;min-height:70px;padding:16px 20px}main{padding-top:54px;min-height:calc(100svh - 135px)}.scene{flex-shrink:0}}

.card,#zoomContent{aspect-ratio:var(--card-ratio,1.48)}
.oriented-image{position:relative;width:100%;height:100%;overflow:hidden;background:#eee9d9}
.face .oriented-image img,#zoomContent .oriented-image img{position:absolute;left:50%;top:50%;width:100%;height:100%;max-width:none;object-fit:contain;transform:translate(-50%,-50%) rotate(var(--image-rotation,0deg))}
.face .oriented-image.quarter-turn img,#zoomContent .oriented-image.quarter-turn img{width:calc(100% / var(--card-ratio,1.48));height:calc(100% * var(--card-ratio,1.48))}

/* Larger desktop fridge with real layout dimensions for magnet physics. */
@media(min-width:900px){
 header{position:relative;height:78px;padding:0 38px}
 main{min-height:calc(100svh - 153px);padding:54px 30px 20px}
 .scene{width:clamp(520px,40vw,640px);flex-shrink:0;padding:0 12px 14px}
 .freezer{height:clamp(185px,20svh,220px)}
 .door{height:clamp(500px,55svh,600px)}
 .handle{left:25px;width:26px;height:245px;top:36px}
 .small-handle{top:65px;height:100px}
 .card-area{top:100px}
 .round{width:34px;height:34px;top:108px;right:calc(45% - 17px)}
 .star{left:120px;top:100px;font-size:54px}
 .bear,.santa{width:70px;height:81px}
 .bear{right:40px;top:78px}
 .santa{left:76px;bottom:65px}
 .details{margin-top:18px;padding:14px 16px}
 .year{font-size:21px}
 .person{font-size:15px}.person small{font-size:13px}
 .card-caption button{font-size:23px}
 .bottom-vent{height:32px}
 footer{gap:18px}.timeline button{font-size:16px;padding:9px 17px}
 #flip{padding:10px 16px}#flip span,.reset-card span{font-size:16px}
}