/* Airy Japanese picnic-paper scenery, kept behind all content. */
body{background:radial-gradient(ellipse at 93% 2%,#d2eab9 0,transparent 34%),radial-gradient(ellipse at 0 26%,#f4f8db 0,transparent 25%),var(--canvas)}
.hero{isolation:isolate}
.hero-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:clip;mask-image:linear-gradient(to bottom,transparent,#000 85px)}
.hero-backdrop:before{content:'';position:absolute;left:-24%;top:-38%;width:78%;height:105%;background:#f9fbdc;border-radius:46% 54% 62% 38% / 54% 58% 42% 46%;opacity:.54;transform:rotate(-16deg)}
.hero-backdrop:after{content:'';position:absolute;right:-14%;bottom:-28%;width:69%;height:104%;background:#c7e3ad;border-radius:51% 49% 38% 62% / 54% 55% 45% 46%;opacity:.48;transform:rotate(-12deg)}
.wave-patch{position:absolute;left:-4%;bottom:5%;width:490px;height:200px;background:url('assets/waves.svg') repeat;background-size:104px 52px;opacity:.17;mask-image:linear-gradient(to top,#000,transparent 95%);transform:rotate(-9deg)}
.wave-patch.two{left:auto;right:-4%;top:0;bottom:auto;width:430px;height:170px;opacity:.12;mask-image:linear-gradient(to bottom,#000,transparent 95%);transform:rotate(9deg)}
.garden-doodle{position:absolute;fill:none;stroke:#75975d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.5;animation:leaf-drift 8s ease-in-out infinite;--tilt:0deg}
.garden-doodle.leaf-one{width:72px;height:80px;left:2%;top:5%;--tilt:-24deg}
.garden-doodle.leaf-two{width:53px;height:64px;left:46%;top:3%;--tilt:28deg;animation-delay:-3s}
.garden-doodle.bean{width:104px;height:66px;left:38%;bottom:10%;--tilt:-20deg;opacity:.3;animation-delay:-5s}
.garden-doodle.radish{width:64px;height:83px;right:2%;top:3%;--tilt:18deg;opacity:.3;animation-delay:-2s}
.garden-doodle .leaf-fill{fill:#a7c985;fill-opacity:.35}
.sesame-speck{position:absolute;width:5px;height:12px;border-radius:50%;background:#719554;opacity:.25;transform:rotate(35deg)}
.sesame-speck.s1{left:35%;top:10%}.sesame-speck.s2{left:36.5%;top:11%;transform:rotate(75deg)}.sesame-speck.s3{left:48%;bottom:11%}.sesame-speck.s4{left:49.5%;bottom:10%;transform:rotate(-25deg)}.sesame-speck.s5{right:4%;top:31%;transform:rotate(-35deg)}
.bowls{position:relative;isolation:isolate;background:linear-gradient(145deg,#f4f9e6bb,transparent 70%)}
.bowls:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(#72945530 .75px,transparent .75px);background-size:19px 19px;mask-image:linear-gradient(90deg,transparent 50%,#000)}
.recipe{background-image:url('assets/waves.svg');background-size:135px 68px;background-blend-mode:soft-light;background-color:#cde5bc}
.recipe-title,.recipe-steps{position:relative;z-index:1}.recipe:before{content:'';position:absolute;inset:0;background:#cde5bcee;pointer-events:none}
@keyframes leaf-drift{0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-12px) rotate(calc(var(--tilt) + 12deg))}}
@media(max-width:760px){.hero-backdrop:before{left:-60%;top:-15%;width:135%;height:66%;opacity:.48}.hero-backdrop:after{right:-70%;bottom:-15%;width:165%;height:67%;opacity:.5}.wave-patch{left:-16%;bottom:2%;width:275px;height:135px;background-size:82px 41px;opacity:.15}.wave-patch.two{right:-22%;top:2%;width:190px;height:110px;opacity:.14}.garden-doodle.leaf-one{left:1%;top:6%;width:39px;height:46px;opacity:.4}.garden-doodle.leaf-two{left:86%;top:29%;width:34px;height:41px;opacity:.3}.garden-doodle.bean{left:1%;bottom:7%;width:64px;height:43px;opacity:.25}.garden-doodle.radish{display:none}.sesame-speck.s1{left:9%;top:30%}.sesame-speck.s2{left:12%;top:31%}.sesame-speck.s3{left:84%;bottom:4%}.sesame-speck.s4{left:88%;bottom:3%}}
@media(prefers-reduced-motion:reduce){.garden-doodle{animation:none}}