/* The sample designs are responsive artwork. Each stage provides its own type scale. */
.design-stage{container-type:inline-size;position:relative;isolation:isolate;display:grid;place-items:center;overflow:hidden;background:#e8e0ed}
.design-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,#fff5 0%,transparent 38%,#3417310b);pointer-events:none}
.design-sheet{position:relative;overflow:hidden;width:72%;aspect-ratio:1.62;box-shadow:1px 2px 0 #fff8,3px 4px 0 #30223922,1.6cqw 3cqw 3.9cqw #31203539;transform:rotate(-7deg);transition:transform .22s ease;line-height:1.05}
.template-card:hover .design-sheet{transform:rotate(-5deg) translateY(-2px)}.art-micro{display:flex;align-items:center;justify-content:space-between;gap:1cqw;font:650 1.35cqw/1.12 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.stage-forma{background:linear-gradient(125deg,#ddd1ef,#b99fd3)}.sheet-forma{background:#563393;color:#fbebcd;display:flex;flex-direction:column;justify-content:space-between;padding:4cqw 4.3cqw;box-shadow:1px 2px 0 #c5addc,2px 4px 0 #785198,3px 6px 0 #a082b8,1.6cqw 3cqw 4cqw #35254548}
.forma-name{display:flex;justify-content:space-between;align-items:center;font-size:16.1cqw;line-height:.85;font-weight:760;letter-spacing:-.083em}.forma-name span{font-size:10cqw;font-weight:450;line-height:1;letter-spacing:0}.art-rule{height:1px;background:#e6d5eb85;margin-bottom:-1.8cqw}
.stage-gul{background:linear-gradient(135deg,#d7e2cf,#acc4ac)}.sheet-gul{width:60%;aspect-ratio:1.18;transform:rotate(6deg);background:#f1ebd8;color:#294b34}
.template-card:hover .sheet-gul{transform:rotate(4deg) translateY(-2px)}.gul-frame{position:absolute;inset:8%;border:1px solid #7d906e;display:flex;flex-direction:column;justify-content:space-around;align-items:center;text-align:center;padding:2.7cqw 0}
.gul-frame strong{font:400 10cqw/.75 Georgia,serif;letter-spacing:-.06em}.gul-frame strong i{font:italic 1.06em/.84 var(--serif)}.gul-frame .art-micro{font-size:1.02cqw;letter-spacing:.14em}
.garden-leaves{position:absolute;width:25%;height:70%;background:repeating-radial-gradient(ellipse at 0 80%,#587456 0 12%,transparent 13% 28%);opacity:.62;border-radius:90% 0 90% 12%}.leaves-a{bottom:-24%;left:0;transform:rotate(-32deg)}.leaves-b{top:-22%;right:-1%;transform:rotate(135deg)}
.stage-open{background:linear-gradient(130deg,#f3cab3,#e6aa92)}.sheet-open{background:#e55d39;color:#33223e;width:70%;aspect-ratio:1.42;display:flex;align-items:stretch;transform:rotate(-6deg)}
.open-arch{position:absolute;inset:5% 5% 6% 52%;overflow:hidden;border-radius:50% 50% 0 0;background:repeating-radial-gradient(ellipse at 50% 100%,#f6c2a4 0 6%,#982d4b 6.5% 10%,#e98268 10.5% 15%)}
.open-type{position:relative;z-index:1;padding:3cqw;display:flex;flex-direction:column;justify-content:space-between}.open-type strong{font-size:9.1cqw;letter-spacing:-.092em;line-height:.86;font-weight:750}.open-type .art-micro{font-size:1.2cqw}
.stage-citrus{background:linear-gradient(115deg,#fff0bd,#eac971)}.sheet-citrus{background:repeating-linear-gradient(0deg,#f4d68c,#f4d68c 1px,#f4cf80 1px,#f4cf80 5px);width:68%;padding:2cqw;display:grid;place-items:center}
.citrus-label{position:relative;z-index:1;width:58%;aspect-ratio:1.2;color:#fff5ce;background:#2a5948;border:.7cqw solid #fff0c2;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;transform:rotate(8deg)}
.citrus-label strong{font:700 6cqw/.78 Georgia,serif;letter-spacing:-.065em;text-align:center}.citrus-label strong i{font:italic 1.15em/.8 var(--serif)}.citrus-label .art-micro{font-size:.9cqw}
.citrus-slice{position:absolute;right:-8%;bottom:-20%;width:52%;aspect-ratio:1;border:1.3cqw solid #fff1bd;border-radius:50%;background:repeating-conic-gradient(#ec733a 0 31deg,#fee4a6 32deg 36deg)}
.stage-ledger{background:linear-gradient(110deg,#d5dfd7,#acc8c0)}.sheet-ledger{background:#f5f4df;color:#2d625f;padding:3cqw;width:65%;aspect-ratio:1.27}
.ledger-head{display:flex;justify-content:space-between;align-items:center;padding:1.3cqw 2cqw;background:#24605e;color:#faf3dd}.ledger-head span{font-size:3cqw;letter-spacing:-.06em;font-weight:580}.ledger-head small{font-size:2.1cqw;letter-spacing:.05em}
.ledger-lines{height:45%;margin:2.8cqw 0;background:repeating-linear-gradient(0deg,#7faba1 0 1px,transparent 1px 3.6cqw),repeating-linear-gradient(90deg,#96b3a7 0 1px,transparent 1px 13cqw)}
.stage-margin{background:linear-gradient(135deg,#ccdbeb,#acbcd2)}.sheet-margin{width:58%;aspect-ratio:1.06;color:#273e8e;background:#f4f0e8;padding:3.6cqw;transform:rotate(6deg)}
.template-card:hover .sheet-margin{transform:rotate(4deg) translateY(-2px)}.margin-head{justify-content:flex-start;gap:1.4cqw}.margin-head b{font-size:6cqw;line-height:1}.margin-head span{font-size:1.2cqw}.sheet-margin>strong{display:block;letter-spacing:-.045em;margin:3cqw 0 2cqw;font-size:3.4cqw}.margin-lines{height:30%;width:83%;background:repeating-linear-gradient(0deg,#9b9b9c 0 1px,transparent 1px 2.3cqw)}.margin-foot{position:absolute;bottom:3cqw;left:3.6cqw;right:3.6cqw;border-top:1px solid #3147a5;padding-top:.9cqw;font-size:.94cqw}
.stage-field{background:linear-gradient(120deg,#dccbdd,#bba7c1)}.sheet-field{width:55%;aspect-ratio:1.04;background:linear-gradient(90deg,#cb922b 6%,#b47b28 6.2%,#efb539 7.2%,#eab039 100%);color:#54332c;display:flex;flex-direction:column;justify-content:space-between;padding:3.5cqw 4cqw 3.2cqw 5.7cqw}
.sheet-field>strong{font:600 8.6cqw/.82 Georgia,serif;letter-spacing:-.08em}.sheet-field>strong i{font:italic 1.07em var(--serif);line-height:.8}.field-sun{position:absolute;right:10%;top:26%;font-size:7cqw}.sheet-field .art-micro{font-size:1cqw}
.stage-assembly{background:linear-gradient(135deg,#f3cfbd,#d7aa9c)}.sheet-assembly{width:61%;aspect-ratio:1.16;background:#fae0bf;color:#432452;transform:rotate(5deg)}.template-card:hover .sheet-assembly{transform:rotate(3deg) translateY(-2px)}.assembly-art{position:absolute;inset:5% 7% 36% 13%;overflow:hidden}.assembly-art i,.assembly-art b{position:absolute;width:64%;height:86%;background:#673b7e;border-radius:80% 0 75% 12%;transform:rotate(-18deg);left:4%;top:15%}.assembly-art b{left:39%;top:0;background:#e65e3b;transform:rotate(30deg)}
.assembly-type{position:absolute;inset:55% 7% 6%;display:flex;flex-direction:column;justify-content:space-between}.assembly-type strong{font-size:6cqw;line-height:.85;font-weight:780;letter-spacing:-.073em}.assembly-type .art-micro{font-size:1cqw}
@media(prefers-reduced-motion:reduce){.design-sheet{transition:none}}