.scrap-root{font-family:var(--font-body);overflow-x:clip}.scrap-root h1,.scrap-root h2,.scrap-root h3,.pen{font-family:var(--font-headline);letter-spacing:-.01em;font-weight:400}.scrap-root label,.scrap-root button{font-family:var(--font-label)}.scrap-root .hand{font-family:var(--font-accent);letter-spacing:-.035em}.mono{font-family:var(--font-label)}.paper-grid{background-color:var(--card);background-image:linear-gradient(var(--scrap-grid) 1px, transparent 1px), linear-gradient(90deg, var(--scrap-grid) 1px, transparent 1px);background-position:-1px -1px;background-size:22px 22px}.paper-linen{background-color:var(--card);background-image:repeating-linear-gradient(0deg, color-mix(in oklch, var(--foreground) 5%, transparent) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, color-mix(in oklch, var(--foreground) 4%, transparent) 0 1px, transparent 1px 4px), radial-gradient(ellipse at 30% 20%, color-mix(in oklch, var(--scrap-pink) 14%, transparent), transparent 60%)}.paper-dots{background-color:var(--card);background-image:radial-gradient(var(--scrap-grid) 1.2px, transparent 1.6px);background-size:18px 18px}.paper-lined{--line-gap:30px;background-color:var(--card);background-image:linear-gradient(90deg, transparent 38px, var(--scrap-margin) 38px, var(--scrap-margin) 39.5px, transparent 39.5px), repeating-linear-gradient(transparent 0, transparent calc(var(--line-gap) - 1px), var(--scrap-rule) calc(var(--line-gap) - 1px), var(--scrap-rule) var(--line-gap));background-position:0 0, 0 var(--line-offset,14px)}.paper-kraft{background-color:var(--scrap-kraft);color:var(--foreground);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.7 0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E")}.paper-pink{background-color:var(--scrap-pink)}.paper-blush{background-color:var(--secondary);background-image:radial-gradient(color-mix(in oklch, var(--scrap-pink) 55%, transparent) 1.2px, transparent 1.7px);background-size:16px 16px}.paper-mint{background-color:var(--scrap-mint)}.paper-sky{background-color:var(--scrap-sky)}.paper-butter{background-color:var(--scrap-butter)}.paper-lilac{background-color:var(--scrap-lilac)}.paper-cream{background-color:var(--card)}.paper-grain{isolation:isolate;position:relative}.paper-grain:after{content:"";z-index:-1;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.8 .5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");position:absolute;inset:0}.piece{box-shadow:0 .5px .5px var(--scrap-shadow), 0 2px 3px -2px var(--scrap-shadow), 0 14px 22px -14px var(--scrap-shadow), 0 30px 40px -32px var(--scrap-shadow)}.ribbon{background:linear-gradient(180deg, color-mix(in oklch, var(--scrap-ribbon) 80%, var(--foreground)) 0, var(--scrap-ribbon) 22%, var(--scrap-sheen) 46%, var(--scrap-ribbon) 62%, color-mix(in oklch, var(--scrap-ribbon) 78%, var(--foreground)) 100%);clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%,9px 50%);height:18px;filter:drop-shadow(0 2px 2px var(--scrap-shadow))}.gift-tag{clip-path:polygon(30px 0,100% 0,100% 100%,30px 100%,0 calc(100% - 30px),0 30px);-webkit-mask:radial-gradient(circle at 22px 50%, transparent 6px, var(--foreground) 6.5px);-webkit-mask:radial-gradient(circle at 22px 50%, transparent 6px, var(--foreground) 6.5px);mask:radial-gradient(circle at 22px 50%, transparent 6px, var(--foreground) 6.5px)}.eyelet{border:3px solid color-mix(in oklch, var(--scrap-butter) 70%, var(--scrap-kraft-deep));width:18px;height:18px;box-shadow:inset 0 1px 1px var(--scrap-shadow), 0 1px 0 var(--scrap-sheen);border-radius:999px}.edge-scallop{-webkit-mask:radial-gradient(circle 7px, var(--foreground) 96%, transparent) 0 0 / 14px 14px round, linear-gradient(var(--foreground), var(--foreground)) center / calc(100% - 14px) calc(100% - 14px) no-repeat;-webkit-mask:radial-gradient(circle 7px, var(--foreground) 96%, transparent) 0 0 / 14px 14px round, linear-gradient(var(--foreground), var(--foreground)) center / calc(100% - 14px) calc(100% - 14px) no-repeat;mask:radial-gradient(circle 7px, var(--foreground) 96%, transparent) 0 0 / 14px 14px round, linear-gradient(var(--foreground), var(--foreground)) center / calc(100% - 14px) calc(100% - 14px) no-repeat}.chat-bubble{border-radius:16px;position:relative}.chat-bubble:before{content:"";background:inherit;clip-path:polygon(100% 0,0 30%,100% 100%);width:14px;height:14px;position:absolute;top:14px;left:-9px}.vellum{background-color:var(--scrap-vellum);-webkit-backdrop-filter:blur(3px)saturate(.9);backdrop-filter:blur(3px)saturate(.9);box-shadow:inset 0 0 0 1px var(--scrap-sheen), 0 1px 2px var(--scrap-shadow)}.edge-torn-bottom{clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),97% calc(100% - 4px),94% calc(100% - 12px),90% calc(100% - 3px),86% calc(100% - 9px),82% calc(100% - 1px),78% calc(100% - 11px),73% calc(100% - 5px),69% calc(100% - 13px),64% calc(100% - 2px),60% calc(100% - 8px),55% calc(100% - 3px),51% calc(100% - 12px),46% calc(100% - 4px),42% calc(100% - 10px),37% calc(100% - 1px),33% calc(100% - 9px),28% calc(100% - 4px),24% calc(100% - 13px),19% calc(100% - 3px),15% calc(100% - 10px),10% calc(100% - 2px),6% calc(100% - 9px),3% calc(100% - 3px),0 calc(100% - 11px))}.edge-torn-top{clip-path:polygon(0 9px,4% 2px,8% 11px,12% 4px,17% 12px,21% 1px,26% 8px,30% 3px,35% 13px,39% 5px,44% 10px,48% 1px,53% 9px,57% 4px,62% 12px,66% 2px,71% 10px,75% 4px,80% 13px,84% 3px,89% 9px,93% 1px,97% 10px,100% 4px,100% 100%,0 100%)}.edge-deckle{-webkit-mask:radial-gradient(circle at 50% 0, transparent 2.6px, var(--foreground) 3px) top / 9px 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 2.6px, var(--foreground) 3px) bottom / 9px 51% repeat-x;-webkit-mask:radial-gradient(circle at 50% 0, transparent 2.6px, var(--foreground) 3px) top / 9px 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 2.6px, var(--foreground) 3px) bottom / 9px 51% repeat-x;mask:radial-gradient(circle at 50% 0, transparent 2.6px, var(--foreground) 3px) top / 9px 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 2.6px, var(--foreground) 3px) bottom / 9px 51% repeat-x}.edge-zigzag{-webkit-mask:linear-gradient(var(--foreground), var(--foreground)) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at 50% 100%, var(--foreground) 90deg, transparent 0) bottom / 14px 8px repeat-x;-webkit-mask:linear-gradient(var(--foreground), var(--foreground)) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at 50% 100%, var(--foreground) 90deg, transparent 0) bottom / 14px 8px repeat-x;mask:linear-gradient(var(--foreground), var(--foreground)) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at 50% 100%, var(--foreground) 90deg, transparent 0) bottom / 14px 8px repeat-x}.stamp-perf{-webkit-mask:radial-gradient(circle, transparent 3px, var(--foreground) 3.4px) -5px -5px / 10px 10px round, linear-gradient(var(--foreground), var(--foreground)) center / calc(100% - 10px) calc(100% - 10px) no-repeat;-webkit-mask-composite:source-over;-webkit-mask:radial-gradient(circle, transparent 3px, var(--foreground) 3.4px) -5px -5px / 10px 10px round, linear-gradient(var(--foreground), var(--foreground)) center / calc(100% - 10px) calc(100% - 10px) no-repeat;mask:radial-gradient(circle, transparent 3px, var(--foreground) 3.4px) -5px -5px / 10px 10px round, linear-gradient(var(--foreground), var(--foreground)) center / calc(100% - 10px) calc(100% - 10px) no-repeat}.ticket-notch{-webkit-mask:radial-gradient(circle at 0 var(--notch-y,50%), transparent 11px, var(--foreground) 11.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% var(--notch-y,50%), transparent 11px, var(--foreground) 11.5px) right / 51% 100% no-repeat;-webkit-mask:radial-gradient(circle at 0 var(--notch-y,50%), transparent 11px, var(--foreground) 11.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% var(--notch-y,50%), transparent 11px, var(--foreground) 11.5px) right / 51% 100% no-repeat;mask:radial-gradient(circle at 0 var(--notch-y,50%), transparent 11px, var(--foreground) 11.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% var(--notch-y,50%), transparent 11px, var(--foreground) 11.5px) right / 51% 100% no-repeat}.notepad-holes{-webkit-mask:radial-gradient(circle at 50% 12px, transparent 4.5px, var(--foreground) 5px) top / 26px 100% repeat-x;-webkit-mask:radial-gradient(circle at 50% 12px, transparent 4.5px, var(--foreground) 5px) top / 26px 100% repeat-x;mask:radial-gradient(circle at 50% 12px, transparent 4.5px, var(--foreground) 5px) top / 26px 100% repeat-x}.drop-piece{filter:drop-shadow(0 1px 1px var(--scrap-shadow)) drop-shadow(0 8px 10px var(--scrap-shadow))}.envelope-flap{background:var(--scrap-kraft-deep);clip-path:polygon(0 0,100% 0,50% 100%);opacity:.55}.print{background:var(--scrap-print);box-shadow:0 1px 1px var(--scrap-shadow), 0 14px 24px -14px var(--scrap-shadow);padding:9px 9px 34px}.print:after{content:"";pointer-events:none;background:linear-gradient(118deg, transparent 30%, var(--scrap-sheen) 44%, transparent 58%);opacity:.42;box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--scrap-shadow) 40%, transparent);position:absolute;inset:9px 9px 34px}.print-square:after{inset:8px}.print-square{padding:8px}.print img{object-fit:cover;filter:saturate(.88)contrast(1.02)sepia(.08);width:100%;height:100%;display:block}.photo-corners{position:relative}.photo-corners:before,.photo-corners:after{content:"";background:var(--foreground);opacity:.86;z-index:2;width:22px;height:22px;position:absolute}.photo-corners:before{clip-path:polygon(0 0,100% 0,0 100%);top:-5px;left:-5px}.photo-corners:after{clip-path:polygon(100% 0,100% 100%,0 100%);bottom:-5px;right:-5px}.tape{--tape:var(--scrap-mint);--tape-pattern:linear-gradient(90deg, var(--scrap-tape-tint) 0 1px, transparent 1px 100%) 0 0 / 7px 100%;z-index:5;width:var(--tape-w,92px);transform-origin:0;pointer-events:none;height:24px;filter:drop-shadow(0 1px .6px var(--scrap-shadow));position:absolute}.tape:before{content:"";background:linear-gradient(98deg, transparent 21%, var(--scrap-sheen) 23%, transparent 26.5%) 0 0 / 100% 100%, linear-gradient(83deg, transparent 63%, color-mix(in oklch, var(--scrap-shadow) 45%, transparent) 64.2%, transparent 66%) 0 0 / 100% 100%, linear-gradient(180deg, var(--scrap-sheen) 0, transparent 30%, transparent 78%, color-mix(in oklch, var(--scrap-shadow) 32%, transparent) 100%) 0 0 / 100% 100%, var(--tape-pattern);background-color:color-mix(in oklch, var(--tape) 72%, transparent);clip-path:polygon(0 2%,100% 0,97.5% 9%,100% 17%,98% 26%,100% 33%,96.5% 42%,99.5% 51%,97% 60%,100% 68%,97.5% 77%,100% 86%,98% 93%,99% 100%,1% 100%,3% 91%,0 83%,2.5% 74%,.5% 66%,3.5% 57%,0 48%,2.5% 39%,0 31%,3% 22%,.5% 14%,2.5% 7%);position:absolute;inset:0}.tape-pink{--tape:var(--scrap-pink)}.tape-butter{--tape:var(--scrap-butter)}.tape-sky{--tape:var(--scrap-sky)}.tape-lilac{--tape:var(--scrap-lilac)}.tape-kraft{--tape:var(--scrap-kraft)}.tape-masking{--tape:color-mix(in oklch, var(--scrap-kraft) 45%, var(--scrap-print));--tape-pattern:repeating-linear-gradient(90deg, color-mix(in oklch, var(--scrap-shadow) 14%, transparent) 0 1px, transparent 1px 3px) 0 0 / 100% 100%}.tape-vellum{--tape:var(--scrap-vellum)}.tape-vellum:before{-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}.tape-dots{--tape-pattern:radial-gradient(var(--scrap-tape-tint) 2px, transparent 2.5px) 0 0 / 10px 10px}.tape-stripe{--tape-pattern:repeating-linear-gradient(-45deg, var(--scrap-tape-tint) 0 4px, transparent 4px 9px) 0 0 / 100% 100%}.tape-check{--tape-pattern:linear-gradient(90deg, var(--scrap-tape-tint) 50%, transparent 0) 0 0 / 12px 12px, linear-gradient(var(--scrap-tape-tint) 50%, transparent 0) 0 0 / 12px 12px}.sticker{box-shadow:0 0 0 3px var(--scrap-print), 0 4px 8px -2px var(--scrap-shadow)}.label-tape{background:var(--foreground);color:var(--background);font-family:var(--font-label);letter-spacing:.18em;text-transform:uppercase;box-shadow:inset 0 1px 0 color-mix(in oklch, var(--background) 25%, transparent), 0 2px 3px -1px var(--scrap-shadow);padding:4px 12px 3px;display:inline-block}.highlight{background-image:linear-gradient(100deg, transparent .4em, color-mix(in oklch, var(--scrap-butter) 85%, transparent) .6em, color-mix(in oklch, var(--scrap-butter) 70%, transparent) calc(100% - .5em), transparent calc(100% - .2em));-webkit-box-decoration-break:clone;box-decoration-break:clone;background-position:0 82%;background-repeat:no-repeat;background-size:100% .55em;padding:0 .12em}.postmark{opacity:.55;border:2px solid;border-radius:999px}.cut-line{background-image:linear-gradient(90deg, var(--invite-line) 50%, transparent 50%);background-position:50%;background-repeat:repeat-x;background-size:10px 1.5px}.invite-dot-rule{background-image:radial-gradient(circle, var(--invite-line) 1px, transparent 1.5px);background-position:50%;background-repeat:repeat-x;background-size:8px 3px}.sticker-option{transition:transform .16s cubic-bezier(.3,1.6,.5,1),box-shadow .16s,background-color .16s}.sticker-option[aria-checked=true]{box-shadow:0 0 0 2.5px var(--scrap-print), 0 3px 6px -2px var(--scrap-shadow)}.sticker-option:active{transform:scale(.94)}.ink-input{border:0;border-bottom:1.5px dashed var(--invite-line);background:0 0;outline:none;transition:border-color .15s}.ink-input:focus-visible{border-bottom-style:solid;border-bottom-color:var(--primary)}@keyframes invite-draw{to{stroke-dashoffset:0}}@keyframes invite-tick{0%{opacity:0;transform:translateY(40%)}to{opacity:1;transform:translateY(0)}}@keyframes drop-settle{0%{opacity:0;transform:translate(var(--dx,0), -38px) rotate(calc(var(--r,0deg) + 7deg)) scale(1.06)}60%{opacity:1;transform:translate(0, 3px) rotate(calc(var(--r,0deg) - 1.2deg)) scale(1)}82%{transform:translate(0, -1px) rotate(calc(var(--r,0deg) + .4deg))}to{opacity:1;transform:translate(0, 0) rotate(var(--r,0deg))}}@keyframes tape-stretch{0%{transform:rotate(var(--tr,0deg)) scaleX(0)}to{transform:rotate(var(--tr,0deg)) scaleX(1)}}@keyframes sticker-press{0%{opacity:0;transform:scale(1.5) rotate(calc(var(--r,0deg) - 14deg))}55%{opacity:1;transform:scale(.92) rotate(var(--r,0deg))}to{opacity:1;transform:scale(1) rotate(var(--r,0deg))}}@keyframes tag-swing{0%{opacity:0;transform:translateY(-24px) rotate(calc(var(--r,0deg) - 14deg))}30%{opacity:1;transform:translateY(0) rotate(calc(var(--r,0deg) + 7deg))}55%{transform:rotate(calc(var(--r,0deg) - 3.5deg))}78%{transform:rotate(calc(var(--r,0deg) + 1.4deg))}to{opacity:1;transform:rotate(var(--r,0deg))}}@keyframes reply-in{0%{opacity:0;transform:translateX(-24px) rotate(var(--r,0deg))}to{opacity:1;transform:translateX(0) rotate(var(--r,0deg))}}@keyframes doodle-draw{0%{stroke-dashoffset:var(--len,300)}to{stroke-dashoffset:0}}.tilt{transform:rotate(var(--r,0deg))}.tape{transform:rotate(var(--tr,0deg))}@media (prefers-reduced-motion:no-preference){.invite-circle{stroke-dasharray:140;stroke-dashoffset:140px;animation:.8s ease-out .2s forwards invite-draw}.invite-tick{animation:.45s ease-out both invite-tick;display:inline-block}.place-now{animation:drop-settle .9s cubic-bezier(.25, .8, .3, 1) var(--d,0s) both}.press-now{animation:sticker-press .55s cubic-bezier(.3, 1.4, .5, 1) var(--d,0s) both}.tape-now{animation:tape-stretch .45s cubic-bezier(.3, .9, .4, 1) var(--d,0s) both}.draw-now{stroke-dasharray:var(--len,300);animation:doodle-draw 1.1s ease-out var(--d,0s) both}.scrap-js [data-place].is-placed{animation:drop-settle .85s cubic-bezier(.25, .8, .3, 1) var(--d,0s) both}.scrap-js [data-place=press].is-placed{animation:sticker-press .55s cubic-bezier(.3, 1.4, .5, 1) var(--d,0s) both}.scrap-js [data-place=swing].is-placed{transform-origin:22px;animation:tag-swing 1.4s cubic-bezier(.3, .7, .4, 1) var(--d,0s) both}.scrap-js [data-place].is-placed .tape{animation:tape-stretch .4s cubic-bezier(.3, .9, .4, 1) calc(var(--d,0s) + .55s) both}.scrap-js [data-place].is-placed .draw-later{stroke-dasharray:var(--len,300);animation:doodle-draw 1s ease-out calc(var(--d,0s) + .3s) both}.reply-in{animation:.5s cubic-bezier(.22,.7,.2,1) both reply-in}.note-in{animation:.75s cubic-bezier(.25,.8,.3,1) both drop-settle}.lift-hover{transition:transform .22s cubic-bezier(.3,1.3,.5,1),box-shadow .22s}.lift-hover:hover{transform:rotate(var(--r,0deg)) translateY(-3px) scale(1.015);box-shadow:0 2px 2px var(--scrap-shadow), 0 22px 30px -18px var(--scrap-shadow)}}