*,*:before,*:after{box-sizing:border-box}:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;min-width:320px;min-height:100vh;background:#333}:root{--color-primary: #6a4b3d;--color-primary-dark: color-mix(in srgb, var(--color-primary) 50%, black);--color-primary-light-overlay: color-mix(in srgb, var(--color-primary) 35%, white)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background-color:#333;font-family:Lora,serif;font-size:16px;-webkit-font-smoothing:antialiased}body a{text-decoration:none;color:inherit}body img{max-width:100%}#root{width:100%;margin:0;padding:0}.card-wrapper{max-width:575px;margin:auto;background-color:#fff;overflow:hidden;display:flex;flex-direction:column}.card-section{position:relative;padding:50px 0}@keyframes cloudslideInRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:1}}@keyframes cloudslideInLeft{0%{transform:translate(0);opacity:1}to{transform:translate(-110%);opacity:1}}#card-opening-sides{height:100%;width:100%;position:fixed;left:50%;transform:translate(-50%);top:0;z-index:99;max-width:575px;overflow:hidden}#card-opening-sides._animating .card-side{animation-play-state:running!important}#card-opening-sides.default .card-side{position:absolute;width:68%;height:100%;top:0;animation-fill-mode:forwards;animation-play-state:paused}#card-opening-sides.default .card-side.right{right:0;background-color:var(--color-primary);z-index:0;width:50%;animation-name:cloudslideInRight;animation-duration:4s;animation-timing-function:ease-out;animation-fill-mode:forwards;animation-delay:.5s}#card-opening-sides.default .card-side.left{background:linear-gradient(to right,var(--color-primary) 0,var(--color-primary) 96.5%,#e9e9e9 96.5%,#e9e9e9 100%);left:0;z-index:1;animation-name:cloudslideInLeft;animation-duration:4s;animation-timing-function:ease-out;animation-fill-mode:forwards;animation-delay:.5s}#card-opening-sides .seal-icon{position:absolute;top:50%;right:-19.5px;transform:translateY(-50%);width:78px;height:78px;border-radius:50%;z-index:2;pointer-events:none;display:flex;align-items:center;justify-content:center}#card-opening-sides .seal-icon img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}#card-opening-sides .card-side.left .wedding-save-the-date{position:absolute;top:calc(4vh + 20px);left:clamp(16px,4vw,32px);font-family:High Spirited,serif;font-size:clamp(34px,9.5vw,60px);line-height:1;color:#fffffff5;text-align:left;display:inline-block;padding-left:80px;pointer-events:none;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.25);z-index:2}#card-opening-sides .card-side.left .wedding-save-the-date span{position:absolute;left:0;bottom:-20px;font-size:clamp(70px,15vw,116px);line-height:.8}#card-opening-sides .card-side.left .opening-names{position:absolute;top:calc(18vh + 88px);left:clamp(24px,6vw,44px);color:#fff;display:flex;flex-direction:column;gap:0;z-index:2;pointer-events:none;text-align:left;max-width:70%}#card-opening-sides .card-side.left .opening-names .name{font-family:DancingScript;font-size:clamp(32px,7vw,48px);line-height:1.02;text-shadow:0 1px 2px rgba(0,0,0,.25)}#card-opening-sides .card-side.left .opening-names .and{font-family:Flavinda;font-size:clamp(28px,5.6vw,40px);line-height:.9;margin-top:6px;margin-bottom:14px;color:#ffffffe6;transform:translate(2px) rotate(-5deg);text-shadow:0 1px 2px rgba(0,0,0,.2)}#card-opening-sides .card-side.left .opening-invite{position:absolute;bottom:clamp(20px,6vh,48px);left:clamp(24px,6vw,44px);color:#ffffffe6;font-family:Lora,serif;font-size:clamp(14px,3.8vw,18px);line-height:1.2;letter-spacing:.04em;font-style:italic;z-index:2;pointer-events:none}.card-banner{position:relative;aspect-ratio:420/692;background-size:cover;background-position:top;background-repeat:no-repeat}.card-banner:before{z-index:0;height:400px;width:100%;position:absolute;left:0;bottom:0;content:"";display:block;background-image:linear-gradient(#fdfbfb00,#0000009c)}.card-banner .card-banner-inner{text-align:center;position:absolute;left:0;bottom:0;width:100%;padding:50px 0;z-index:1}.card-banner .wedding-save-the-date{font-family:High Spirited;font-size:65px;line-height:1.5;color:#fff;text-align:center;position:relative;display:inline-block;padding-left:80px}.card-banner .wedding-save-the-date span{font-size:110px;position:absolute;left:0;bottom:-24px}.card-banner .wedding-name{font-size:28px;line-height:1.6;color:#fff;text-align:center;margin:-5px 0 0;text-transform:uppercase}.card-banner .wedding-date{font-size:25px;line-height:1;color:#fff;text-align:center}#groom-bride{position:relative;text-align:center;overflow:hidden;background-color:var(--color-primary-dark);padding:50px 40px}#groom-bride .decor-flower1{position:absolute;z-index:0;top:-5%;right:0;width:60%}#groom-bride .decor-flower2{position:absolute;z-index:0;bottom:-10%;left:0;width:50%}#groom-bride .groom-bride-box{position:relative;z-index:1}#groom-bride .gb-box{aspect-ratio:317/404;width:100%;display:block;position:relative;background-size:cover;background-position:50% 0%;border-radius:21px;box-shadow:#000 -5px 13px 7px -15px}#groom-bride .gb-box:before{z-index:0;height:33%;width:100%;position:absolute;left:0;bottom:0;content:"";display:block;border-radius:0 0 21px 21px;background-image:linear-gradient(#fdfbfb00,#000000b5)}#groom-bride .gb-box+.gb-box{margin-top:40px}#groom-bride .gb-box .info{position:absolute;width:100%;bottom:0;left:0;padding:24px 12px;text-align:center;z-index:1}#groom-bride .gb-box .info .label{font-family:Arcittya-Begatri;font-size:50px;line-height:1;color:#fff}#groom-bride .gb-box .info .fullname{font-size:24px;line-height:1.3;color:#fff;text-transform:uppercase;margin-top:-5px}#card-info{position:relative;text-align:center}#card-info:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;background-image:url(https://miuwedding.com/templates/wedding/002/images/bg-paper.jpg);background-repeat:repeat;background-position:left top;filter:brightness(106%)}#card-info .inner{position:relative;z-index:1;padding:50px 16px}#card-info .parents{display:flex;align-items:flex-start;margin-bottom:12px;gap:24px}#card-info .parents .parent{flex:1;text-align:center;font-size:13px;line-height:1.6;color:var(--color-primary);display:flex;flex-direction:column}#card-info .parents .parent .label{font-weight:700;font-size:15px;color:var(--color-primary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}#card-info .parents .parent .names{display:flex;flex-direction:column;gap:2px}#card-info .signature{text-align:center;margin-top:24px}#card-info .signature .signature-inner{position:relative;display:inline-block}#card-info .signature img{width:70px}#card-info .signature .character{font-family:DancingScript;font-size:50px;line-height:1.6;color:var(--color-primary);text-transform:uppercase;position:absolute}#card-info .signature .character.groom{top:10px;left:14px}#card-info .signature .character.bride{top:25px;left:23px}#card-info .welcome-text{margin-top:24px;margin-bottom:24px;font-size:17px;line-height:1.3;color:var(--color-primary);text-align:center;padding:0 16px}#card-info .vertical-line{height:42px;display:block;border-left:2px solid var(--color-primary);margin:16px auto;width:0}#card-info .groom-bride-names{margin-top:-12px}#card-info .groom-bride-names .name{font-size:30px;line-height:1.6;color:var(--color-primary);text-transform:uppercase;text-align:center}#card-info .groom-bride-names .name.groom{margin-bottom:-20px}#card-info .groom-bride-names .name.bride{margin-top:-5px}#card-info .groom-bride-names .and{font-family:Flavinda;font-size:67px;line-height:1;color:var(--color-primary);text-align:center}#card-info .dual-events-container{margin-top:30px}#card-info .event-block{margin-bottom:24px}#card-info .wedding-side-title{display:inline-block;margin-top:10px;background:var(--color-primary);color:#fff;padding:6px 32px;border-radius:24px;font-size:16px;font-weight:600;text-transform:uppercase}#card-info .date-and-time{display:flex;justify-content:center;align-items:center;gap:16px;padding:10px 0}#card-info .date-and-time .time{font-size:17px;line-height:1.6;color:var(--color-primary);text-transform:uppercase;text-align:right;flex:1}#card-info .date-and-time .dayofweek{font-size:17px;line-height:1.6;color:var(--color-primary);text-transform:uppercase;text-align:left;flex:1}#card-info .date-and-time .date{font-size:43px;line-height:1.1;color:var(--color-primary);text-align:center}#card-info .lunar-date{font-size:16px;line-height:1.6;color:var(--color-primary);text-align:center}#card-info .locations{margin-top:20px}#card-info .locations .label{font-size:18px;line-height:1.6;color:var(--color-primary);text-align:center;margin-bottom:4px}#card-info .location{text-align:center;color:var(--color-primary);line-height:1.6}#card-info .location .name{font-size:17px;font-weight:700;margin-bottom:4px;text-transform:uppercase}#card-info .location .address{font-size:16px}#card-info .location .map-btn{margin-top:16px;font-size:18px;display:inline-flex;align-items:center;font-weight:700;text-transform:uppercase;color:var(--color-primary);cursor:pointer;text-decoration:none}#card-info .horizontal-line{border-top:2px dashed var(--color-primary);margin:32px 24px 12px;opacity:.2}#card-photo-just-married{aspect-ratio:420/280;width:100%;background-size:cover;background-position:50% 0%;background-repeat:no-repeat;position:relative}#card-photo-just-married:before{content:"";display:block;width:100%;position:absolute;left:0;bottom:0;height:40%;background-image:linear-gradient(#fff0,#ffffff1f)}#card-photo-just-married .text{position:absolute;bottom:0;left:0;width:100%;padding:16px;z-index:1;text-align:right}#card-photo-just-married .text .just{font-family:Flavinda;font-size:66px;line-height:1;color:var(--color-primary);display:inline-block}#card-photo-just-married .text .married{font-family:Ergisa-Regular;font-size:42px;line-height:1;color:var(--color-primary);text-transform:uppercase;letter-spacing:3px;text-align:right;margin-top:-8px}#card-calendar{text-align:center;position:relative}#card-calendar:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;background-image:url(https://miuwedding.com/templates/wedding/002/images/bg-paper.jpg);background-repeat:repeat;filter:brightness(106%)}#card-calendar>.inner{position:relative;z-index:1;padding:50px 16px}#card-calendar .calendar-header{margin-bottom:10px}#card-calendar .calendar-header .year{font-family:Ergisa-Regular;font-size:95px;line-height:1;color:var(--color-primary);text-align:center;margin-bottom:-45px}#card-calendar .calendar-header .month{font-family:High Spirited;font-size:80px;line-height:1;color:var(--color-primary);text-align:center}.mini-cal-table{margin:30px auto;border-collapse:collapse;width:320px;color:var(--color-primary)}.mini-cal-table th,.mini-cal-table td{width:45px;height:35px;text-align:center;font-size:14px}.mini-cal-table th{text-transform:uppercase;font-weight:600;padding-bottom:8px;border-bottom:1px solid var(--color-primary)}.mini-cal-table td.wedding-day{font-weight:700;color:#fff;position:relative;z-index:1}.mini-cal-table td.wedding-day:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);width:36px;height:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236a4b3d' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;z-index:-1;animation:heartbeat 1.4s ease-in-out infinite}@keyframes heartbeat{0%,to{transform:translate(-50%,-52%) scale(1)}14%{transform:translate(-50%,-52%) scale(1.2)}28%{transform:translate(-50%,-52%) scale(1)}42%{transform:translate(-50%,-52%) scale(1.15)}70%{transform:translate(-50%,-52%) scale(1)}}.mini-cal-table td.wedding-day:after{content:none}#countdown{margin-top:30px}#countdown .countdown-title{font-size:18px;line-height:1.6;color:var(--color-primary);text-align:center;margin-bottom:16px}#countdown .countdown-inner{display:flex;align-items:center;justify-content:center}#countdown .box,#countdown .colon{font-size:36px;color:var(--color-primary)}#countdown .colon{padding:0 12px;line-height:1}#countdown .box{text-align:center;min-width:60px}#card-gallery{position:relative}#card-gallery:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;background-image:url(https://miuwedding.com/templates/wedding/002/images/bg-paper.jpg);background-repeat:repeat;filter:brightness(106%)}#card-gallery .inner{position:relative;z-index:1;padding:50px 0}#card-gallery .image-split-container{display:flex;gap:6px;width:100%;align-items:center;justify-content:center}#card-gallery .image-split-container .image-part{background-repeat:no-repeat;background-position:center center;transition:height .3s ease;overflow:hidden;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))}#card-gallery .image-split-container .left-part,#card-gallery .image-split-container .right-part{flex:1;height:250px;background-size:300% auto}#card-gallery .image-split-container .left-part{background-position:0% center}#card-gallery .image-split-container .right-part{background-position:100% center}#card-gallery .image-split-container .middle-part{flex:none;width:33%;height:350px;background-size:320% auto;background-position:50% center}#card-gallery .card-gallery-title{font-family:High Spirited;font-size:87px;line-height:1.6;color:var(--color-primary);text-align:center}.photo-grid{column-count:2;column-gap:5px;padding:0 5px}.photo-grid .photo{width:100%;display:block;margin-bottom:5px;break-inside:avoid}.photo-grid .photo img{width:100%;display:block}#loingo-section{padding:50px 35px}#loingo,#loingoen{color:var(--color-primary);font-size:16px;line-height:1.6;text-align:center;margin-bottom:24px}#card-comments{position:relative}#card-comments:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;background-image:url(https://miuwedding.com/templates/wedding/002/images/bg-paper.jpg);background-repeat:repeat;filter:brightness(106%)}#card-comments .decor-flower-right{position:absolute;right:0;bottom:50px;width:15%;z-index:1}#card-comments .decor-flower-left{position:absolute;left:0;top:50px;width:20%;z-index:1}#card-comments .inner{position:relative;z-index:1;padding:0 16px 50px}#card-comments .card-section-title{font-size:80px;line-height:1;font-family:High Spirited;color:var(--color-primary);text-align:center;margin-bottom:0}#card-comments .card-section-subtitle{margin-bottom:24px;color:var(--color-primary);text-align:center;font-size:15px}#card-comments .comment-form{background-color:var(--color-primary-light-overlay);padding:24px;border-radius:8px}#card-comments .comment-form .form-group{margin-bottom:12px}#card-comments .comment-form .form-control{width:100%;padding:10px 14px;font-size:14px;font-family:Lora,serif;border:1px solid rgba(78,100,55,.3);border-radius:6px;outline:none;background:#fff;color:#333;resize:vertical}#card-comments .comment-form .form-control:focus{border-color:var(--color-primary)}#card-comments .comment-form .btn{background-color:var(--color-primary);color:#fff;border:none;padding:10px 32px;border-radius:24px;font-size:16px;font-family:Lora,serif;cursor:pointer;transition:opacity .2s}#card-comments .comment-form .btn:hover{opacity:.85}#card-comments .text-center{text-align:center}.comment-list{margin-top:24px}.comment-box{border-bottom:1px solid rgba(78,100,55,.15);padding:16px 0}.comment-box .fullname{font-weight:700;color:var(--color-primary);font-size:15px}.comment-box .timestamp{font-size:12px;color:#888;margin:2px 0 6px}.comment-box .content{font-size:14px;line-height:1.6;color:#444}.no-comments{text-align:center;color:var(--color-primary);opacity:.6;padding:24px 0}#card-banks{background:#fff}.qr-button-section{text-align:center;padding:15px 20px;background:linear-gradient(135deg,#4e64370d,#4e643726)}.qr-gift-button{background:var(--color-primary);color:#fff;border:none;padding:16px 40px;font-size:18px;font-weight:600;font-family:Lora,serif;border-radius:50px;cursor:pointer;box-shadow:0 4px 15px #4e64374d;transition:all .3s ease;display:inline-flex;align-items:center;gap:8px}.qr-gift-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4e643766}.qr-gift-button i{font-size:22px}.qr-modal{display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000c;animation:fadeIn .3s ease}.qr-modal.show{display:flex;align-items:center;justify-content:center}.qr-modal-content{background:#fff;width:90%;max-width:500px;border-radius:20px;overflow:hidden;position:relative;animation:slideUp .4s ease;box-shadow:0 10px 40px #0000004d}.qr-modal-close{position:absolute;right:15px;top:15px;width:40px;height:40px;background:#ffffffe6;border:none;border-radius:50%;font-size:28px;line-height:1;cursor:pointer;z-index:10;color:#333;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.qr-modal-close:hover{background:#fff;transform:rotate(90deg)}.qr-modal-header{height:200px;background-size:cover;background-position:center;position:relative}.qr-modal-header-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#0000001a,#ffffffe6)}.qr-modal-body{padding:30px 20px}.qr-cards{display:flex;justify-content:center}.qr-card{flex:1;text-align:center;max-width:220px;background:#fff;border:2px solid var(--color-primary);border-radius:15px;padding:20px 15px;display:flex;flex-direction:column}.qr-card-image{border-radius:10px;margin:0 auto}.qr-card-image img{width:100%;max-width:180px;height:auto;display:block;margin:0 auto}.qr-card-name{font-size:15px;font-weight:600;color:var(--color-primary);text-align:center;margin:8px 0 4px;word-break:break-word;min-height:44px;display:flex;align-items:center;justify-content:center}.qr-card-bank{font-size:14px;color:var(--color-primary);text-align:center;margin:0;font-weight:600}.qr-card-account{font-size:13px;color:#666;text-align:center;font-family:monospace;letter-spacing:1px;margin-top:4px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}#card-footer{aspect-ratio:420/280;position:relative;background-repeat:no-repeat;background-size:cover;background-position:center;overflow:hidden}#card-footer:before{content:"";display:block;position:absolute;background-color:#0003;left:0;bottom:0;width:100%;height:100%}#card-footer .card-footer-inner{position:absolute;z-index:1;color:#fff;bottom:0;right:0;text-align:right;padding:24px}#card-footer .card-footer-inner .title{font-family:Flavinda;font-size:80px;line-height:1.6;color:#fff;text-align:left;margin-right:58px;margin-bottom:-30px}#card-footer .card-footer-inner .text{font-family:DancingScript;font-size:20px;line-height:1.5;color:#fff;text-align:left;display:inline-block}#audioToggleBtn{position:fixed;bottom:20px;right:15px;width:50px;height:50px;border-radius:50%;border:none;background-color:#00000080;color:#fff;font-size:24px;cursor:pointer;box-shadow:0 4px 10px #0000004d;z-index:999;transition:background-color .3s ease;opacity:.4}#audioToggleBtn:before{content:"";font-family:bootstrap-icons!important;display:inline-block;position:absolute;z-index:1;font-size:24px;left:50%;top:50%;transform:translate(-50%,-50%)}#audioToggleBtn.playing{animation:spin 5s linear infinite}#audioToggleBtn.playing:after{content:none}#audioToggleBtn:after{content:"";border-left:3px solid #fff;height:36px;display:block;width:0;left:25px;top:7px;position:absolute;transform:rotate(45deg);z-index:1}#audioToggleBtn:hover{opacity:1}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.miu-branding{padding:14px 16px 22px;text-align:center;font-size:12px;line-height:1.5;opacity:.7}.miu-branding a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}.miu-branding a:hover{opacity:.9}@media screen and (min-width:480px){.card-banner .wedding-save-the-date{font-size:72px;padding-left:85px}.card-banner .wedding-save-the-date span{font-size:118px;bottom:-24px}.card-banner .wedding-name{font-size:42px;margin-top:-15px}.card-banner .wedding-date{font-size:28px}#groom-bride .gb-box .info .label{font-size:61px}#groom-bride .gb-box .info .fullname{font-size:30px}#card-info .parents .parent{font-size:14px}#card-info .welcome-text{font-size:19px}#card-info .groom-bride-names .name{font-size:36px}}
