:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:oklch(29% .045 65);font-synthesis:none;text-rendering:optimizelegibility;--ink:oklch(29% .045 65);--ink-muted:oklch(40% .045 70);--label:oklch(97% .018 82/.88);--shadow:oklch(18% .035 65/.42);--veil:oklch(98% .018 82/.14);background:oklch(91% .025 82);font-family:ui-serif,Georgia,serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:oklch(27% .04 65);--ink:oklch(27% .04 65);--ink-muted:oklch(37% .04 70);--label:oklch(94% .02 80/.84);--shadow:oklch(14% .035 65/.48);--veil:oklch(30% .035 68/.06);background:oklch(78% .035 76)}}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-width:320px;min-height:100vh}.painting{isolation:isolate;background-color:oklch(43% .07 62);background-image:url(/assets/old-painting-wood-continuation-v1.png);background-position:50%;background-size:cover;height:100svh;min-height:100svh;position:relative;overflow:clip}.scene{--fold-left:38.5%;--fold-center:59.2%;--fold-right:49.1%;aspect-ratio:2/3;transform-origin:50%;width:auto;height:130svh;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.painting.is-ready .scene{animation:1.25s cubic-bezier(.16,1,.3,1) both bouquet-arrive}.paper-art{object-fit:contain;pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.paper-front{z-index:3;pointer-events:none;clip-path:polygon(0 var(--fold-left), 47.25% var(--fold-center), 100% var(--fold-right), 100% 100%, 0 100%);background:url(/assets/paper-wrapper-portrait-marie-v1.png) 50%/100% 100% no-repeat;position:absolute;inset:0}@media (aspect-ratio<=7/8){.scene{height:100svh}}.painting:not(.is-ready) .scene{opacity:0}.painting:after{z-index:-1;content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 6rem 1rem oklch(22% .03 70/.18)}.varnish{z-index:4;pointer-events:none;opacity:.09;mix-blend-mode:screen;background:linear-gradient(113deg,#0000 35%,oklch(92% .045 77/.4) 48%,#0000 58%);animation:14s ease-in-out infinite alternate varnish-shift;position:absolute;inset:-18%;transform:translate(-35%)}.kicker,.feedback-echo,.source-note,.card-salutation,.card-headline,.card-note,.card-signoff{margin:0}.feedback-echo{max-width:32ch;color:var(--ink);font-size:.94rem;font-style:italic;line-height:1.45}.controls{z-index:30;color:oklch(95% .018 78);text-shadow:0 1px .45rem oklch(16% .04 55/.86);gap:.35rem;width:min(17rem,28vw);display:grid;position:absolute;bottom:clamp(4.4rem,8vh,6.4rem);left:clamp(1.5rem,4vw,4rem)}.source-space{align-items:end;min-height:4.7rem;display:grid}.source-note{width:fit-content;max-width:23rem;color:var(--ink-muted);border:1px solid color-mix(in oklch, var(--ink) 20%, transparent);background:var(--label);text-shadow:none;gap:.16rem;padding:.65rem .75rem;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.7rem;line-height:1.45;display:grid;transform:rotate(-.6deg);box-shadow:0 .55rem 1.6rem oklch(18% .025 70/.16)}.source-artist{width:fit-content;color:var(--ink);text-underline-offset:.18rem;font-family:ui-serif,Georgia,serif;font-size:.98rem;font-weight:720;line-height:1.1;text-decoration-thickness:1px}.source-work{color:var(--ink-muted);font-family:ui-serif,Georgia,serif;font-size:.75rem;font-style:italic}.arrangement{z-index:1;width:100%;height:100%;clip-path:polygon(0 0, 100% 0, 100% var(--fold-right), 47.25% var(--fold-center), 0 var(--fold-left));place-items:center;padding:0;display:grid;position:relative}.bouquet{width:75%;height:50%;filter:drop-shadow(0 1.35rem 1.1rem var(--shadow));margin-inline:auto;position:relative;transform:translateY(-5%)}.top-fillers{z-index:3;pointer-events:none;position:absolute;inset:-4% 1% 24%;transform:translateY(2%)rotate(-1deg)}.top-filler{top:var(--filler-top);left:var(--filler-left);width:var(--filler-width);pointer-events:none;filter:drop-shadow(0 .65rem .48rem oklch(8% .025 70/.32));transform:rotate(var(--piece-rotate));transform-origin:50% 90%;transition:filter .22s;position:absolute}.top-filler img{pointer-events:none;width:100%;height:auto;display:block}:is(.top-filler:has(.piece-hotspot:hover),.top-filler:has(.piece-hotspot:focus-visible)){z-index:20;filter:drop-shadow(0 .75rem .5rem oklch(8% .025 70/.36))saturate(1.02);animation:.32s cubic-bezier(.22,1,.36,1) both piece-wiggle}.flower-mass{z-index:5;pointer-events:none;position:absolute;inset:0 3% 5%;transform:translateY(4%)rotate(-2deg)}.flower-layer{top:var(--top);left:var(--left);width:var(--width);pointer-events:none;filter:drop-shadow(0 .65rem .48rem oklch(8% .025 70/.38));transform:rotate(var(--piece-rotate));transform-origin:50% 92%;transition:top 1s cubic-bezier(.16,1,.3,1),left 1s cubic-bezier(.16,1,.3,1),width 1s cubic-bezier(.16,1,.3,1),filter .5s,transform .7s cubic-bezier(.16,1,.3,1);display:block;position:absolute}.flower-layer img{pointer-events:none;width:100%;height:auto;display:block}.piece-hotspot{top:var(--hotspot-y);left:var(--hotspot-x);width:var(--hotspot-size);aspect-ratio:1;cursor:pointer;pointer-events:auto;background:0 0;border:0;border-radius:50%;padding:0;position:absolute;transform:translate(-50%,-50%)}.flower-layer.is-active{filter:drop-shadow(0 .68rem .5rem oklch(8% .025 70/.4))saturate(1.02);animation:.32s cubic-bezier(.22,1,.36,1) both piece-wiggle}.flower-layer:has(.piece-hotspot:hover){filter:drop-shadow(0 .68rem .5rem oklch(8% .025 70/.4))saturate(1.02);animation:.32s cubic-bezier(.22,1,.36,1) both piece-wiggle}.flower-layer:has(.piece-hotspot:focus-visible){filter:drop-shadow(0 .68rem .5rem oklch(8% .025 70/.4))saturate(1.02);animation:.32s cubic-bezier(.22,1,.36,1) both piece-wiggle}.piece-hotspot:focus-visible{outline:2px solid var(--ink);outline-offset:4px}.flower-hibiscus,.flower-star-flower{z-index:14!important}.card-pocket{z-index:2;pointer-events:none;position:absolute;inset:0;-webkit-mask:url(/assets/paper-wrapper-portrait-marie-v1.png) 50%/100% 100% no-repeat;mask:url(/assets/paper-wrapper-portrait-marie-v1.png) 50%/100% 100% no-repeat;container-type:size}.card-pocket.is-raised{z-index:40;-webkit-mask:none;mask:none}.bouquet-card{--card-x:0px;--card-y:0px;top:calc(49% + var(--card-y));left:calc(54% + var(--card-x));z-index:1;color:oklch(28% .04 65);clip-path:polygon(1.2% 1.5%,98.7% .3%,99.4% 98.1%,1.1% 99.5%,.2% 53%);cursor:grab;pointer-events:auto;width:34cqw;font:inherit;text-align:left;touch-action:none;transform-origin:48% 100%;-webkit-user-select:none;user-select:none;will-change:transform;background:linear-gradient(oklch(96% .023 83/.94),oklch(92% .03 79/.96)),radial-gradient(circle at 20% 15%,oklch(74% .05 78/.15),#0000 38%);border:0;gap:.6cqw;padding:1.7cqw 1.9cqw 2.7cqw;transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s,filter .42s;display:grid;position:absolute;transform:translate(-50%)rotate(-5deg);box-shadow:0 2cqw 3cqw oklch(16% .035 65/.26),inset 0 0 0 1px oklch(66% .04 78/.28)}.painting.is-ready .bouquet-card{animation:.7s cubic-bezier(.16,1,.3,1) .85s backwards card-emerge}.bouquet-card:hover:not(.is-raised){transform:translate(-50%,-.6cqw)rotate(-4deg)}.bouquet-card.is-raised{z-index:40;transform:translate(-50%,-95%)rotate(-2deg);box-shadow:0 4cqw 5.8cqw oklch(16% .035 65/.4),inset 0 0 0 1px oklch(66% .04 78/.28)}.bouquet-card.is-dragging{cursor:grabbing;filter:saturate(1.03);transition:box-shadow .18s,filter .18s;transform:translate(-50%,-95%)rotate(-2deg)}.bouquet-card:focus-visible{outline-offset:5px;outline:2px solid oklch(28% .04 65)}.bouquet-card:after{z-index:-1;content:"";transform-origin:top;background:linear-gradient(oklch(40% .055 72),oklch(26% .04 68));width:2px;height:16cqw;transition:opacity .18s;position:absolute;top:98%;left:52%;transform:rotate(4deg);box-shadow:1px 0 oklch(82% .045 78/.32)}.bouquet-card.is-raised:after{opacity:0}.card-salutation{letter-spacing:-.055em;font-family:ui-rounded,ui-sans-serif,system-ui,sans-serif;font-size:4cqw;font-weight:850;line-height:.88}.card-headline{font-family:ui-serif,Georgia,serif;font-size:2.45cqw;font-style:italic;font-weight:500;line-height:1.05}.card-note{font-size:2cqw;line-height:1.42}.card-signoff{justify-self:end;font-size:2.1cqw;font-style:italic}@keyframes varnish-shift{to{transform:translate(35%)}}@keyframes bouquet-arrive{0%{opacity:0;transform:translate(-50%,-50%)translateY(12svh)rotate(-3deg)scale(.88)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes card-emerge{0%{opacity:0;translate:0 8cqw}to{opacity:1;translate:0}}@keyframes piece-wiggle{0%{transform:rotate(var(--piece-rotate)) translateY(0)}34%{transform:rotate(calc(var(--piece-rotate) + .65deg)) translateY(-.07rem)}68%{transform:rotate(calc(var(--piece-rotate) - .35deg)) translateY(-.025rem)}to{transform:rotate(var(--piece-rotate)) translateY(0)}}@media (width<=800px){.controls{width:min(20rem,100vw - 2rem);bottom:1rem;left:1rem}.source-space{min-height:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-delay:0s!important}}
