:root{color:#211e1f;font-synthesis:none;-webkit-font-smoothing:antialiased;--u:min(1vw, 5.2px);--brown:#82501f;background:#d8d0c3;font-family:Arial,PingFang HK,Microsoft JhengHei,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button,a,input,select,textarea,[tabindex]{outline-offset:calc(1 * var(--u))}:focus-visible{outline:calc(.55 * var(--u)) solid #82501f}button{color:inherit;border:0}.app{width:calc(100 * var(--u));min-height:max(100svh, calc(188 * var(--u)));background:#e2dace url(/assets/background.webp) 50%/100% 100% no-repeat;margin:0 auto;position:relative;overflow:hidden}.header{width:100%;height:calc(18 * var(--u));position:absolute;top:0;left:0}.header-logo{left:calc(4.2 * var(--u));top:calc(4.3 * var(--u));width:calc(7.6 * var(--u));height:calc(7.9 * var(--u));position:absolute}.home-button{right:calc(3.1 * var(--u));top:calc(3.4 * var(--u));width:calc(11 * var(--u));height:calc(11 * var(--u));padding:calc(2 * var(--u));background:0 0;position:absolute}.home-button img{width:calc(6.4 * var(--u));height:calc(7.2 * var(--u));left:calc(2.3 * var(--u));top:calc(1.6 * var(--u));position:absolute}.script-heading{left:0;top:calc(18.5 * var(--u));text-align:center;width:100%;font:400 calc(8.7 * var(--u))/1.5 Pacifico, cursive;outline:none;margin:0;position:absolute}.gold-button{left:calc(23 * var(--u));width:calc(54 * var(--u));height:calc(16.4 * var(--u));padding:0 calc(3 * var(--u)) calc(1.4 * var(--u)) 0;font-weight:700;font-size:calc(6.1 * var(--u));color:#ab550d;background:url(/assets/gold-button.webp) 50%/100% 100% no-repeat;line-height:1;transition:filter .15s,transform .15s;position:absolute}.gold-button:hover{filter:brightness(1.035)}.gold-button:active{transform:translateY(calc(.5 * var(--u)))}.gold-button:disabled{filter:saturate(.65)}.welcome-logo{top:calc(21 * var(--u));left:calc(41 * var(--u));width:calc(18 * var(--u));height:calc(18.6 * var(--u));position:absolute}.welcome-campaign{top:calc(62 * var(--u));left:calc(8 * var(--u));width:calc(84 * var(--u));height:auto;position:absolute}.welcome-caption{top:calc(99 * var(--u));left:calc(9 * var(--u));width:calc(82 * var(--u));text-align:center;color:var(--brown);font-size:calc(5.8 * var(--u));margin:0;line-height:1.3;position:absolute}.enter-button{top:calc(125 * var(--u))}.landing-balloons{width:calc(34 * var(--u));height:auto;position:absolute;top:0;left:0;-webkit-mask-image:linear-gradient(#000 0 80%,#0000 98%);mask-image:linear-gradient(#000 0 80%,#0000 98%)}.card-frame{left:calc(18 * var(--u));top:calc(36 * var(--u));width:calc(64 * var(--u));height:calc(96 * var(--u));position:absolute}.card-frame canvas{width:100%;height:100%;position:absolute;top:0;left:0}.template-carousel{left:0;top:calc(36 * var(--u));width:100%;height:calc(96 * var(--u));scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;cursor:grab;position:absolute;overflow:auto hidden}.template-carousel::-webkit-scrollbar{display:none}.template-carousel.dragging{scroll-snap-type:none;cursor:grabbing}.template-rail{width:calc(404 * var(--u));height:100%;position:absolute;top:0;left:0}.template-slide{width:calc(100 * var(--u));scroll-snap-align:center;scroll-snap-stop:always;height:100%;position:absolute;top:0}.template-carousel .card-frame{top:0}.template-next{top:calc(143 * var(--u))}.details-form{top:calc(19 * var(--u));width:100%;height:calc((169 + var(--extra)) * var(--u));position:absolute;left:0}.screen-details{min-height:max(100svh, calc((184 + var(--extra)) * var(--u)))}.field{left:calc(12.5 * var(--u));width:calc(75 * var(--u));height:calc(8 * var(--u));border:calc(.38 * var(--u)) solid #dba422;border-radius:calc(6 * var(--u));padding:0 calc(3.5 * var(--u));font-size:max(16px, calc(3.7 * var(--u)));color:#211e1f;background:#fff;position:absolute}.field input,.field select{border-radius:inherit;width:100%;height:100%;padding:0 calc(11 * var(--u)) 0 calc(3.5 * var(--u));color:inherit;background:0 0;border:0;position:absolute;top:0;left:0}.field input::placeholder,input.field::placeholder{color:#999;opacity:1}.field select{appearance:none}.field select:has(option:checked[value=""]){color:#999}.field-end{right:calc(-.05 * var(--u));top:calc(-.05 * var(--u));width:calc(7.5 * var(--u));height:calc(7.5 * var(--u));color:#fff;font-size:calc(6 * var(--u));line-height:calc(7.3 * var(--u));text-align:center;pointer-events:none;background:url(/assets/gold-down.webp) 50%/100% 100% no-repeat;border-radius:50%;padding:0;position:absolute}button.field-end{pointer-events:auto;background:#cc9b4a}button.field-end.add-recipient{background:url(/assets/gold-plus.webp) 50%/100% 100% no-repeat}.form-label{left:calc(12.8 * var(--u));font-size:calc(4.2 * var(--u));color:#000;font-weight:700;line-height:1.2;position:absolute}.hint{left:calc(12.8 * var(--u));width:calc(76 * var(--u));font-size:calc(2.25 * var(--u));color:var(--brown);margin:0;font-weight:700;line-height:1.25;position:absolute}.from-label{top:0}.department-field{top:calc(6 * var(--u))}.sender-hint{top:calc(17 * var(--u))}.sender-name-field{top:calc(22 * var(--u))}.sender-email-field{top:calc(33 * var(--u))}.to-label{top:calc(46 * var(--u))}.recipient-hint{top:calc(52 * var(--u))}.recipient-name-field{top:calc(57 * var(--u))}.email-hint{top:calc(68 * var(--u))}.message-label{top:calc((86 + var(--extra)) * var(--u))}.message-hint{top:calc((92 + var(--extra)) * var(--u))}.message-field{top:calc((98 + var(--extra)) * var(--u));left:calc(12.5 * var(--u));width:calc(75 * var(--u));height:calc(28 * var(--u));border:calc(.38 * var(--u)) solid #dba422;border-radius:calc(5 * var(--u));resize:none;padding:calc(3 * var(--u));font-size:max(16px, calc(4.2 * var(--u)));background:#fff;line-height:1.4;position:absolute}.form-error{top:calc((127 + var(--extra)) * var(--u));left:calc(12.5 * var(--u));width:calc(75 * var(--u));color:#a52222;font-size:calc(2.5 * var(--u));margin:0;position:absolute}.form-next{top:calc((135 + var(--extra)) * var(--u))}.form-back{top:calc((151 + var(--extra)) * var(--u))}.placed-sticker{border:calc(.4 * var(--u)) solid transparent;touch-action:none;cursor:grab;position:absolute}.placed-sticker:active{cursor:grabbing}.placed-sticker.selected{border-style:dashed;border-color:#8a572c}.remove-sticker{top:calc(-3 * var(--u));right:calc(-3 * var(--u));width:calc(7 * var(--u));height:calc(7 * var(--u));color:#211e1f;font-size:calc(5 * var(--u));box-shadow:0 calc(.3 * var(--u)) calc(.9 * var(--u)) #0002;background:#fff;border-radius:50%;padding:0;line-height:1;position:absolute}.screen-stickers{min-height:max(100svh, calc(198 * var(--u)))}.screen-stickers .script-heading{top:calc(15 * var(--u))}.screen-stickers .card-frame{top:calc(30 * var(--u));left:calc(20 * var(--u));width:calc(60 * var(--u));height:calc(90 * var(--u))}.sticker-instruction{top:calc(123 * var(--u));text-align:center;width:100%;font-size:calc(2.6 * var(--u));color:var(--brown);margin:0;position:absolute;left:0}.sticker-panel{top:calc(130 * var(--u));left:calc(11 * var(--u));width:calc(78 * var(--u));height:calc(43 * var(--u));border:calc(.35 * var(--u)) solid #dfb132;border-radius:calc(5 * var(--u));background:#fff;position:absolute;overflow:hidden}.sticker-scroll{overscroll-behavior:contain;scrollbar-color:#d1b56b transparent;scrollbar-width:thin;position:absolute;inset:0;overflow-y:auto}.sticker-scroll:after{content:"";top:calc(109 * var(--u));width:1px;height:calc(2 * var(--u));position:absolute}.sticker-option{width:calc(16 * var(--u));height:calc(16 * var(--u));border-radius:calc(2 * var(--u));padding:calc(.7 * var(--u));background:#e6e6e6;position:absolute}.sticker-option img{left:calc(.7 * var(--u));top:calc(.7 * var(--u));width:calc(14.6 * var(--u));height:calc(14.6 * var(--u));object-fit:contain;position:absolute}.sticker-option:hover{background:#f4e6bc}.sticker-next{top:calc(179 * var(--u));left:calc(15 * var(--u));width:calc(36 * var(--u));height:calc(12 * var(--u));font-size:calc(4.6 * var(--u))}.sticker-back{top:calc(179 * var(--u));left:calc(51 * var(--u));width:calc(36 * var(--u));height:calc(12 * var(--u));font-size:calc(4.6 * var(--u))}.preview-next{top:calc(147 * var(--u))}.preview-back{top:calc(164 * var(--u))}.screen-finish{min-height:max(100svh, calc(201 * var(--u)))}.submit-button{top:calc(140 * var(--u))}.save-button{top:calc(157 * var(--u))}.finish-back{top:calc(174 * var(--u))}.submission-success{top:calc(134 * var(--u));left:calc(12 * var(--u));width:calc(76 * var(--u));color:var(--brown);text-align:center;font-size:calc(3 * var(--u));margin:0;font-weight:700;position:absolute}.toast{z-index:10;bottom:max(calc(5 * var(--u)), env(safe-area-inset-bottom));width:calc(86 * var(--u));border:calc(.3 * var(--u)) solid #b38a37;border-radius:calc(3 * var(--u));color:#71451c;padding:calc(3.5 * var(--u));box-shadow:0 calc(1 * var(--u)) calc(4 * var(--u)) #0002;font-size:calc(3.4 * var(--u));text-align:center;background:#fffaf0;position:fixed;left:50%;transform:translate(-50%)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}.script-heading img{width:auto;height:calc(8.8 * var(--u));max-width:calc(78 * var(--u));left:50%;top:calc(2 * var(--u));object-fit:contain;position:absolute;transform:translate(-50%)}.script-heading{height:calc(14 * var(--u))}
