/* CSS interpretation of the supplied emerald arabesque and quatrefoil. */
.css-frame{--corner-size:clamp(60px,8vw,108px)}.css-frame .frame-knot::before{inset:3px 8% 8% 3px;border-width:3px;border-radius:60% 0 0 0}.css-frame .frame-knot::after{inset:12% 24% 24% 12%;border-width:2px;border-radius:70% 0 0 0}.frame-knot .leaf{left:22%;top:22%;inline-size:44%;block-size:23%;transform:rotate(calc(var(--leaf)*22.5deg));border-radius:85% 5% 85% 10%;border-color:#edc66e;background:linear-gradient(135deg,#397d54,#0f4930 35%,#052c1d 75%,#2c6341);box-shadow:0 1px 0 #fff3b6 inset,0 -2px 0 #865c24 inset,0 2px 2px #00170b99}.frame-knot .jewel{left:25%;top:27%;inline-size:15%;block-size:15%;z-index:2}.arabesque-bloom{position:absolute;left:10%;top:10%;inline-size:46%;block-size:46%;transform:rotate(-45deg);display:block;z-index:1}.arabesque-bloom>i{position:absolute;left:42%;top:7%;inline-size:23%;block-size:43%;transform-origin:50% 100%;transform:rotate(calc(var(--petal)*90deg));border:2px solid #e5b957;border-radius:85% 8% 85% 8%;background:linear-gradient(135deg,#ffe8a3,#a77328 27%,#ffe9ae 44%,#ae7a2a 64%,#f9d381);box-shadow:0 1px 1px #fff7 inset,0 2px 2px #09261999}.arabesque-bloom>i::after{content:'';position:absolute;inset:20% 24%;border-radius:inherit;background:linear-gradient(135deg,#4c8b61,#0b3926);border:1px solid #e9bc67}.vine{position:absolute;inset:5% 5% 36% 36%;border:2px solid #e5bd6c;border-radius:60% 10% 60% 15%;background:none;box-shadow:1px 1px 0 #795025,-1px -1px 0 #ffe9a6;transform:rotate(18deg)}.vine-b{inset:36% 36% 5% 5%;transform:rotate(-18deg)}.ornate-title.css-frame{--corner-size:44px}.ornate-title .arabesque-bloom>i{border-width:1px}.ornate-title .vine{border-width:1px}.ornate-divider{position:relative;display:flex;align-items:center;justify-content:center;inline-size:min(360px,80%);block-size:42px;margin:12px auto 28px;gap:0;direction:ltr;pointer-events:none}.divider-rail{flex:1;min-inline-size:0;height:4px;background:linear-gradient(#fff0b9,#c39338 45%,#795021 65%,#f8d98e);box-shadow:0 1px 1px #00170b44;clip-path:polygon(0 50%,100% 0,100% 100%)}.divider-rail:last-child{transform:rotate(180deg)}.divider-flower{position:relative;inline-size:42px;block-size:42px;flex:0 0 42px}.divider-flower>i{position:absolute;left:39%;top:4%;inline-size:26%;block-size:45%;transform-origin:50% 100%;transform:rotate(calc(var(--petal)*90deg));border-radius:85% 5% 85% 5%;border:2px solid #d5a248;background:linear-gradient(135deg,#f8df96,#a57024 29%,#ffeeb8 46%,#bb8b3b 65%,#f3cd7b);box-shadow:0 1px 1px #fff8 inset,0 1px 2px #00170d55}.divider-flower>i::after{content:'';position:absolute;inset:22% 24%;border-radius:inherit;background:linear-gradient(135deg,#fffdf0,#e9d8b5);border:1px solid #d3a653}.divider-flower>b{position:absolute;left:42%;top:42%;width:25%;height:25%;border-radius:50%;border:1px solid #d5a54c;background:radial-gradient(circle at 30% 25%,#fff6cb,#dab15c 45%,#8e6325);box-shadow:0 1px 2px #00170d77}.frame-content>h2:has(+.ornate-divider){margin-bottom:0}.css-frame>.frame-content{padding-top:calc(var(--corner-size) + 12px);padding-bottom:calc(var(--corner-size) + 12px)}@media(max-width:600px){.css-frame{--corner-size:62px}.css-frame>.frame-content{padding:76px 26px}.ornate-title.css-frame{--corner-size:34px}.ornate-divider{inline-size:75%;block-size:34px;margin-block:14px 24px}.divider-flower{inline-size:34px;block-size:34px;flex-basis:34px}.divider-flower>i{border-width:1px}.arabesque-bloom>i{border-width:1px}.frame-knot .vine{border-width:1px}.frame-knot .jewel{border-width:1px}}