@font-face{font-family:Breeze;src:url('./fonts/PipBreeze-Variable.woff2') format('woff2');font-display:swap}
:root{--paper:#f7f6f0;--ink:#404536;--mint:#c8d7c0;--lilac:#d6c4e6;--rose:#cf9aa7}
*{box-sizing:border-box}html{background:var(--paper);color:var(--ink)}body{margin:0;font-family:Breeze,'Trebuchet MS',sans-serif;background-image:radial-gradient(#aeb5a327 .65px,transparent .8px);background-size:5px 5px}main{min-height:100svh;display:grid;place-items:center;padding:40px 34px}.scrapbook{position:relative;width:min(1140px,100%);aspect-ratio:1140/650;isolation:isolate}.photo{position:absolute;margin:0;left:var(--x);top:var(--y);width:var(--w);height:var(--h);transform:rotate(var(--r));z-index:2;will-change:transform}.frame{position:relative;width:100%;height:100%;padding:10px 10px 27px;background:#fffef9;box-shadow:0 5px 8px #35402f13,0 15px 25px #35402f0c;border:1px solid #e2e1d5}.photo-content{position:absolute;inset:10px 10px 7px;display:grid;grid-template-rows:minmax(0,1fr) 20px;gap:0}.photo img{width:100%;height:100%;display:block;object-fit:contain;background:#e6e8df}.photo figcaption{font-size:clamp(8px,1vw,12px);text-align:center;line-height:20px;white-space:nowrap;color:#686953}.photo:before{content:'';position:absolute;width:43%;height:22px;left:28%;top:-9px;background:#c6b8d990;z-index:3;transform:rotate(-5deg);clip-path:polygon(3% 0,100% 4%,97% 96%,0 100%)}.photo:nth-of-type(2n):before{background:#b5c4a899;transform:rotate(6deg)}.photo:nth-of-type(3n):before{background:#d4aaae75}.arch .frame{border-radius:80px 80px 3px 3px;background:#e6dfed}.arch .photo-content{inset:14px 14px 7px}.arch img{border-radius:68px 68px 0 0}.sage .frame{background:#e4ebde}.blush .frame{background:#ece0e1}.border .frame{border:6px double #a9b598}.border .photo-content{inset:5px 5px 4px;grid-template-rows:minmax(0,1fr) 19px}.p1{--x:33%;--y:4%;--w:29%;--h:66%;z-index:4}.p2{--x:4%;--y:4%;--w:22%;--h:43%}.p3{--x:66%;--y:5%;--w:29%;--h:37%}.p4{--x:74%;--y:51%;--w:23%;--h:44%}.p5{--x:3%;--y:53%;--w:22%;--h:44%}.p6{--x:30%;--y:76%;--w:36%;--h:21%}.layout-8 .p1{--x:33%;--y:3%;--w:27%;--h:65%}.layout-8 .p2{--x:6%;--y:2%;--w:21%;--h:45%}.layout-8 .p3{--x:64%;--y:3%;--w:30%;--h:34%}.layout-8 .p4{--x:78%;--y:41%;--w:18%;--h:43%}.layout-8 .p5{--x:3%;--y:52%;--w:21%;--h:44%}.layout-8 .p6{--x:29%;--y:74%;--w:18%;--h:24%}.p7{--x:52%;--y:74%;--w:23%;--h:24%}.p8{--x:61%;--y:41%;--w:14%;--h:27%}.doodle{position:absolute;pointer-events:none;z-index:1}.sprig{stroke:#91a083;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;width:55px;height:95px}.sprig-left{left:0%;top:33%;transform:rotate(-23deg)}.sprig-right{right:0%;top:61%;transform:rotate(39deg)}.star{width:38px;height:48px;fill:none;stroke:#a899b2;stroke-width:2;left:28%;top:35%}.heart{right:7%;top:45%;width:42px;height:37px;fill:none;stroke:#c18a99;stroke-width:2.5;transform:rotate(10deg)}.blossom{font-size:37px;color:#a790bb;line-height:1;left:27%;top:62%}.blossom-small{right:2%;left:auto;top:0%;font-size:28px;color:#a1b493}.next-photo{position:absolute;right:3px;bottom:1px;width:22px;height:22px;border:0;background:transparent;color:#777d6c;font:17px Arial,sans-serif;opacity:0;cursor:pointer}.photo:hover .next-photo,.next-photo:focus-visible{opacity:1}.motion-toggle{position:fixed;right:17px;bottom:14px;z-index:9;display:grid;place-items:center;width:32px;height:30px;border:1px solid #a9b49b66;background:#f7f6f0e6;border-radius:99px;color:#68715c;cursor:pointer;font:14px Arial,sans-serif}.motion-toggle:disabled{opacity:.5;cursor:default}button:focus-visible{outline:2px solid #7b648b;outline-offset:3px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.media-mode .motion-toggle,.media-mode .next-photo{display:none}.media-mode main{padding:28px 26px}.media-mode .scrapbook{max-width:1140px}.media-mode .photo figcaption{font-size:11px}
@media(max-width:600px){main{padding:28px 24px 45px;place-items:start center}.scrapbook{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,178px);gap:18px 20px;aspect-ratio:auto;width:100%}.layout-8{grid-template-rows:repeat(4,143px)}.photo{position:relative;left:auto;top:auto;width:100%;height:100%}.photo-content{inset:7px 7px 5px;grid-template-rows:minmax(0,1fr) 17px}.photo figcaption{font-size:8px;line-height:17px}.arch .frame{border-radius:35px 35px 3px 3px}.arch .photo-content{inset:7px 7px 5px}.arch img{border-radius:27px 27px 0 0}.photo:before{height:15px;top:-6px}.border .frame{border-width:4px}.border .photo-content{inset:4px 4px 3px;grid-template-rows:minmax(0,1fr) 17px}.sprig,.heart,.blossom-small{display:none}.star{left:46%;top:48%;width:22px;height:28px;z-index:5}.blossom{left:46%;top:30.7%;font-size:26px;z-index:5}.layout-8 .blossom{top:22%}.next-photo{right:0;bottom:0;font-size:14px;width:17px;height:17px}.motion-toggle{right:12px;bottom:10px}}
@media(max-width:350px){main{padding:25px 21px 43px}.scrapbook{grid-template-rows:repeat(3,166px);gap:18px 18px}.layout-8{grid-template-rows:repeat(4,131px)}.photo figcaption{font-size:7px}}
@media(prefers-reduced-motion:reduce){.photo{will-change:auto}*{scroll-behavior:auto}}
.layout-7 .p1{--x:33%;--y:3%;--w:27%;--h:65%}.layout-7 .p2{--x:6%;--y:2%;--w:21%;--h:45%}.layout-7 .p3{--x:64%;--y:3%;--w:30%;--h:34%}.layout-7 .p4{--x:78%;--y:41%;--w:18%;--h:43%}.layout-7 .p5{--x:3%;--y:52%;--w:21%;--h:44%}.layout-7 .p6{--x:29%;--y:74%;--w:18%;--h:24%}
@media(max-width:600px){.layout-7{grid-template-rows:repeat(4,143px)}.layout-7 .blossom{top:22%}}
@media(max-width:350px){.layout-7{grid-template-rows:repeat(4,131px)}}