/* KaryaDigitalLab: distinct read-only demonstration renderers (N11, N12, N18) */
.design-builder{display:grid;gap:14px;margin-top:4px}
.design-builder .design-note{font-size:12px;color:#536960;margin:0}
.design-builder .design-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 13px}
.design-builder .design-fields .full{grid-column:1/-1}
.design-builder .design-fields label{margin:0 0 4px;font-size:12px;line-height:1.3}
.design-builder .design-fields input,.design-builder .design-fields select{width:100%;min-width:0;padding:10px;border:1px solid #bccfc6;border-radius:8px;background:#fff;color:#153a32;font:inherit}
.design-builder .design-fields select{cursor:pointer}
#out:has(.design-preview){background:#edf2f0;white-space:normal;padding:16px}
.design-preview{position:relative;overflow:hidden;isolation:isolate;width:100%;margin:auto;min-height:360px;max-width:750px;box-shadow:0 15px 45px #142b2730;text-align:center}
.design-preview *{box-sizing:border-box}
.design-preview .demo-stamp{position:absolute;right:12px;bottom:10px;border-radius:18px;padding:4px 9px;letter-spacing:.07em;font:700 9px/1.4 system-ui,sans-serif;background:#fffdf5db;color:#415b56;border:1px solid #ffffff77;z-index:3}
.design-preview .eyebrow{text-transform:uppercase;letter-spacing:.23em;font-size:10px;font-weight:700}
.design-preview .primary-title{font-size:clamp(25px,5vw,45px);font-weight:650;line-height:1.12;margin:10px auto;overflow-wrap:anywhere}
.design-preview .sep{margin:15px auto;width:65px;height:1px;background:currentColor;opacity:.4}
.design-preview .subtext{margin:9px auto;max-width:440px;font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.design-preview .pill{display:inline-block;padding:7px 14px;font-size:11px;font-weight:700;letter-spacing:.08em;border-radius:99px}
.design-preview .info-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:17px auto;font-size:12px}
.design-preview .info-row>div{min-width:100px}
.design-preview .info-row b{display:block}
.design-preview .info-row small{display:block;opacity:.85}
.design-preview.invitation{padding:40px 28px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.design-preview.invitation.formal{background:radial-gradient(circle at 50% 5%,#315556 0%,#102f35 58%,#0c242a 100%);color:#f5e6c4;border:10px solid #102f35;outline:2px solid #d9b977;outline-offset:-19px}
.design-preview.invitation.formal:before,.design-preview.invitation.formal:after{content:"✧";position:absolute;top:12px;left:20px;font-family:Georgia,serif;font-size:34px;color:#c8ac6e;opacity:.85}
.design-preview.invitation.formal:after{left:auto;right:20px;transform:rotate(90deg)}
.design-preview.invitation.formal .primary-title{font-family:Georgia,serif;font-weight:400}
.design-preview.invitation.formal .pill{background:#cfb574;color:#173b3d}
.design-preview.invitation.formal .eyebrow{color:#ead2a1}
.design-preview.invitation.floral{background:radial-gradient(circle at 15% 10%,#f6e4dd,#fff9f2 48%,#f0eddb 100%);color:#5f4b46;border:1px solid #d8b6a7}
.design-preview.invitation.floral:before,.design-preview.invitation.floral:after{content:"❀  ✿  ❀";position:absolute;font-size:30px;color:#b27c7c;letter-spacing:7px;transform:rotate(-30deg);opacity:.7}
.design-preview.invitation.floral:before{top:15px;left:-15px}
.design-preview.invitation.floral:after{bottom:15px;right:-15px;transform:rotate(145deg)}
.design-preview.invitation.floral .primary-title{font-family:Georgia,serif;font-weight:400;color:#874f5c}
.design-preview.invitation.floral .pill{color:#8d4b5a;background:#f4d5db}
.design-preview.certificate{min-height:435px;aspect-ratio:1.45;padding:35px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.design-preview.certificate.classic{background:#fffdf5;color:#544225;border:12px solid #f4e7bd;outline:4px double #b9984e;outline-offset:-23px}
.design-preview.certificate.classic .primary-title{font:500 clamp(23px,4.6vw,38px)/1.13 Georgia,serif;color:#8e672a}
.design-preview.certificate.classic .recipient{font:italic 500 clamp(22px,4vw,34px)/1.1 Georgia,serif;color:#5f4428;border-bottom:1px solid #ccb577;padding:4px 28px 10px}
.design-preview.certificate.classic .medal{color:#b48a37;background:#fbf0d1}
.design-preview.certificate.modern{background:linear-gradient(120deg,#f4f8ff,#ffffff 45%,#f4f6fa);color:#193653;border-top:17px solid #173b63;border-bottom:17px solid #173b63}
.design-preview.certificate.modern:before{content:"";position:absolute;top:0;left:0;width:125px;height:125px;background:linear-gradient(140deg,#5daab3,#2a6682);clip-path:polygon(0 0,100% 0,0 100%);opacity:.85}
.design-preview.certificate.modern .primary-title{font-family:system-ui,sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(20px,3.8vw,30px);color:#153f68}
.design-preview.certificate.modern .recipient{font:700 clamp(23px,4.3vw,33px)/1.2 system-ui,sans-serif;color:#174d7b}
.design-preview.certificate.modern .medal{background:#e3f4f6;color:#13586c}
.design-preview.certificate .org{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:11px;margin-bottom:10px}
.design-preview.certificate .recipient{max-width:90%;overflow-wrap:anywhere;margin:8px auto}
.design-preview.certificate .medal{width:57px;height:57px;border-radius:50%;display:grid;place-items:center;font-size:30px;margin:7px auto}
.design-preview.certificate .signature-row{display:flex;justify-content:space-between;width:100%;gap:25px;margin-top:25px}
.design-preview.certificate .signature-row div{min-width:0;flex:1;font-size:11px}
.design-preview.certificate .signature-row strong{display:block;font-size:12px;border-top:1px solid #a7aaa5;padding-top:6px;margin:20px auto 0;max-width:175px;overflow-wrap:anywhere}
.design-preview.menu{padding:28px 25px;text-align:left;min-height:460px}
.design-preview.menu.cafe{background:radial-gradient(circle at right top,#3b4b42,#152c27 60%,#0d2421);color:#f1edda}
.design-preview.menu.warung{background:repeating-linear-gradient(160deg,#fff5dc,#fff5dc 16px,#fff0cb 17px,#fff0cb 18px);color:#5d3e21;border:8px solid #dc8c34}
.design-preview.menu .menu-top{text-align:center;padding:8px 0 18px;border-bottom:1px solid currentColor}
.design-preview.menu .menu-top h3{font-size:clamp(26px,5vw,40px);line-height:1.08;margin:4px 0;overflow-wrap:anywhere}
.design-preview.menu.cafe .menu-top h3{font-family:Georgia,serif;color:#ffdda0}
.design-preview.menu.warung .menu-top h3{font-weight:850;color:#9d441b;text-transform:uppercase}
.design-preview.menu .menu-groups{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:25px}
.design-preview.menu .menu-group h4{font-size:13px;text-transform:uppercase;letter-spacing:.11em;border-bottom:2px solid currentColor;padding:0 0 7px;margin:0 0 10px}
.design-preview.menu.cafe .menu-group h4{color:#e4c58a}
.design-preview.menu.warung .menu-group h4{color:#b3511a}
.design-preview.menu .menu-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 14px;font-size:12px}
.design-preview.menu .menu-line .item-name{min-width:0;overflow-wrap:anywhere;font-weight:600}
.design-preview.menu .menu-line .price{white-space:nowrap;font-weight:800}
.design-preview.menu .menu-promo{display:inline-block;font-size:9px;border-radius:3px;padding:2px 5px;margin:3px 0 0;font-weight:750}
.design-preview.menu.cafe .menu-promo{background:#b98a45;color:#112e29}
.design-preview.menu.warung .menu-promo{background:#e5a241;color:#502d16}
.design-preview.menu .menu-foot{font-size:11px;text-align:center;opacity:.8;margin-top:25px}
@media(max-width:620px){
 .design-builder .design-fields{grid-template-columns:1fr}
 .design-preview.certificate{aspect-ratio:auto;min-height:400px;padding:25px 15px}
 .design-preview.menu .menu-groups{grid-template-columns:1fr;gap:8px}
 .design-preview.menu{padding:19px}
 .design-preview.invitation{padding:44px 18px}
 #out:has(.design-preview){padding:8px}
}