body{margin:0;padding:0;background:#fff}.box{position:absolute;top:calc(50% - 125px);top:-webkit-calc(50% - 125px);left:calc(50% - 300px);left:-webkit-calc(50% - 300px)}.ticket{width:600px;height:250px;background:#ff333a;border-radius:3px;box-shadow:0 0 100px #aaa;border-top:1px solid rgb(230,46,52);border-bottom:1px solid rgb(230,46,52)}.left{margin:0;padding:0;list-style:none;position:absolute;top:0;left:-5px}.left li{width:0px;height:0px}.left li:nth-child(-n+2){margin-top:8px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid rgb(255,51,58)}.left li:nth-child(3),.left li:nth-child(6){margin-top:8px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #EEEEEE}.left li:nth-child(4){margin-top:8px;margin-left:2px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #EEEEEE}.left li:nth-child(5){margin-top:8px;margin-left:-1px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #EEEEEE}.left li:nth-child(7),.left li:nth-child(9),.left li:nth-child(11),.left li:nth-child(12){margin-top:7px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #E5E5E5}.left li:nth-child(8){margin-top:7px;margin-left:2px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #E5E5E5}.left li:nth-child(10){margin-top:7px;margin-left:1px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #E5E5E5}.left li:nth-child(13){margin-top:7px;margin-left:2px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid rgb(230,46,52)}.left li:nth-child(14){margin-top:7px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid rgb(230,46,52)}.right{margin:0;padding:0;list-style:none;position:absolute;top:0;right:-5px}.right li:nth-child(-n+2){margin-top:8px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid rgb(230,46,52)}.right li:nth-child(3),.right li:nth-child(4),.right li:nth-child(6){margin-top:8px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #EEEEEE}.right li:nth-child(5){margin-top:8px;margin-left:-2px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #EEEEEE}.right li:nth-child(8),.right li:nth-child(9),.right li:nth-child(11){margin-top:7px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #E5E5E5}.right li:nth-child(7){margin-top:7px;margin-left:-3px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #E5E5E5}.right li:nth-child(10){margin-top:7px;margin-left:-2px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #E5E5E5}.right li:nth-child(12){margin-top:7px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #E5E5E5}.right li:nth-child(13),.right li:nth-child(14){margin-top:7px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid rgb(230,46,52)}.ticket:after{content:"";position:absolute;right:200px;top:0;width:2px;height:250px;box-shadow:inset 0 0 #fff,inset 0 -10px #999,inset 0 -20px #ff333a,inset 0 -30px #999,inset 0 -40px #ff333a,inset 0 -50px #999,inset 0 -60px #e5e5e5,inset 0 -70px #999,inset 0 -80px #e5e5e5,inset 0 -90px #999,inset 0 -100px #e5e5e5,inset 0 -110px #999,inset 0 -120px #e5e5e5,inset 0 -130px #999,inset 0 -140px #e5e5e5,inset 0 -150px #b0b0b0,inset 0 -160px #eee,inset 0 -170px #b0b0b0,inset 0 -180px #eee,inset 0 -190px #b0b0b0,inset 0 -200px #eee,inset 0 -210px #b0b0b0,inset 0 -220px #ff333a,inset 0 -230px #999,inset 0 -240px #ff333a,inset 0 -250px #999}.ticket:before{content:"";position:absolute;z-index:5;right:199px;top:0;width:1px;height:250px;box-shadow:inset 0 0 #ff333a,inset 0 -10px #ff969a,inset 0 -20px #ff333a,inset 0 -30px #ff969a,inset 0 -40px #ff333a,inset 0 -50px #fff,inset 0 -60px #e5e5e5,inset 0 -70px #fff,inset 0 -80px #e5e5e5,inset 0 -90px #fff,inset 0 -100px #e5e5e5,inset 0 -110px #fff,inset 0 -120px #e5e5e5,inset 0 -130px #fff,inset 0 -140px #e5e5e5,inset 0 -150px #fff,inset 0 -160px #eee,inset 0 -170px #fff,inset 0 -180px #eee,inset 0 -190px #fff,inset 0 -200px #eee,inset 0 -210px #fff,inset 0 -220px #ff333a,inset 0 -230px #ff969a,inset 0 -240px #ff333a,inset 0 -250px #ff969a}.content{position:absolute;top:40px;width:100%;height:170px;background:#eee}.airline{position:absolute;top:10px;left:10px;font-family:Arial;font-size:20px;font-weight:700;color:#fff}.boarding{position:absolute;top:10px;right:220px;font-family:Arial;font-size:18px;color:#fff9}.yyz{position:absolute;top:10px;left:20px;font-family:Arial;font-size:38px;color:#222}.yvr{position:absolute;top:10px;left:180px;font-family:Arial;font-size:38px;color:#222}.plane{position:absolute;left:105px;top:0}.sub-content{background:#e5e5e5;width:100%;height:100px;position:absolute;top:70px}.watermark{position:absolute;left:5px;top:-10px;font-family:Arial;font-size:110px;font-weight:700;color:#fff3}.name{position:absolute;top:10px;left:10px;font-family:Arial Narrow,Arial;font-weight:700;font-size:14px;color:#999}.name span{color:#555;font-size:17px}.flight{position:absolute;top:10px;left:180px;font-family:Arial Narrow,Arial;font-weight:700;font-size:14px;color:#999}.flight span{color:#555;font-size:17px}.gate{position:absolute;top:10px;left:280px;font-family:Arial Narrow,Arial;font-weight:700;font-size:14px;color:#999}.gate span{color:#555;font-size:17px}.seat{position:absolute;top:10px;left:350px;font-family:Arial Narrow,Arial;font-weight:700;font-size:14px;color:#999}.seat span{color:#555;font-size:17px}.boardingtime{position:absolute;top:60px;left:10px;font-family:Arial Narrow,Arial;font-weight:700;font-size:14px;color:#999}.boardingtime span{color:#555;font-size:17px}.barcode{position:absolute;left:8px;bottom:6px;height:30px;width:90px;background:#222;box-shadow:inset 0 1px #ff333a,inset -2px 0 #ff333a,inset -4px 0 #222,inset -5px 0 #ff333a,inset -6px 0 #222,inset -9px 0 #ff333a,inset -12px 0 #222,inset -13px 0 #ff333a,inset -14px 0 #222,inset -15px 0 #ff333a,inset -16px 0 #222,inset -17px 0 #ff333a,inset -19px 0 #222,inset -20px 0 #ff333a,inset -23px 0 #222,inset -25px 0 #ff333a,inset -26px 0 #222,inset -26px 0 #ff333a,inset -27px 0 #222,inset -30px 0 #ff333a,inset -31px 0 #222,inset -33px 0 #ff333a,inset -35px 0 #222,inset -37px 0 #ff333a,inset -40px 0 #222,inset -43px 0 #ff333a,inset -44px 0 #222,inset -45px 0 #ff333a,inset -46px 0 #222,inset -48px 0 #ff333a,inset -49px 0 #222,inset -50px 0 #ff333a,inset -52px 0 #222,inset -54px 0 #ff333a,inset -55px 0 #222,inset -57px 0 #ff333a,inset -59px 0 #222,inset -61px 0 #ff333a,inset -64px 0 #222,inset -66px 0 #ff333a,inset -67px 0 #222,inset -68px 0 #ff333a,inset -69px 0 #222,inset -71px 0 #ff333a,inset -72px 0 #222,inset -73px 0 #ff333a,inset -75px 0 #222,inset -77px 0 #ff333a,inset -80px 0 #222,inset -82px 0 #ff333a,inset -83px 0 #222,inset -84px 0 #ff333a,inset -86px 0 #222,inset -88px 0 #ff333a,inset -89px 0 #222,inset -90px 0 #000}.slip{left:455px}.nameslip{top:60px;left:410px}.flightslip{left:410px}.seatslip{left:540px}.yyzslip{font-size:30px;top:20px;left:410px}.yvrslip{font-size:30px;top:20px;left:530px}.planeslip{top:10px;left:475px}.airlineslip{left:455px}#curtain{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#32b1c7;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity .5s ease-in-out;z-index:1000;padding:48px 24px;box-sizing:border-box;gap:32px;text-align:center}#reveal-button{padding:20px 40px;font-size:2em;cursor:pointer;border:4px solid white;background-color:transparent;color:#fff;border-radius:10px;transition:background-color .3s,color .3s;font-weight:800}#reveal-button:hover{background-color:#fff;color:#0abab5}#gift-content{display:none;text-align:center;padding:40px 20px 80px;min-height:100vh;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:flex-start;gap:40px}#typed-message{display:inline-block;font-size:3em;font-family:Courier New,Courier,monospace;font-weight:700;white-space:normal;border-right:.15em solid #ff333a;margin-bottom:30px;opacity:0;line-height:1.3;min-height:1.3em;max-width:100%}.typewriter-hidden{opacity:0}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:#ff333a}}#typed-message.typing,#typed-message.typing-complete{opacity:1}#typed-message.typing{animation:blink-caret .7s step-end infinite}#typed-message.typing-complete{animation:none;border-right:none}body.is-revealed #gift-content{display:flex}body.is-revealed #curtain{opacity:0;pointer-events:none}#curtain h1{color:#fff;font-size:3em;margin-bottom:0;text-align:center;font-family:Arial,sans-serif}#confetti-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1001}#birthday-photo{width:min(70vw,340px);aspect-ratio:1 / 1;border-radius:50%;object-fit:contain;margin-bottom:20px}@media(max-width:768px){#typed-message{font-size:2.2em}.box{transform:scale(.9)}}@media(max-width:640px){#typed-message{font-size:2em}.box{transform:scale(.82)}}@media(max-width:600px){#typed-message{font-size:1.8em}#gift-content{gap:30px;padding:32px 16px 60px}.box{transform:scale(.75)}}@media(max-width:480px){#typed-message{font-size:1.5em}#gift-content{gap:24px;padding:28px 12px 56px}.box{transform:scale(.65)}.ticket{box-shadow:0 0 40px #00000026}}@media(max-width:390px){#typed-message{font-size:1.35em}.box{transform:scale(.58)}}@media(min-width:1100px){#birthday-photo{width:400px}#curtain h1{font-size:3.4em;margin-bottom:16px}}@media(max-width:768px){#curtain{padding:40px 20px}#birthday-photo{width:min(70vw,300px)}#curtain h1{font-size:2.4em;margin-bottom:12px}#reveal-button{font-size:1.6em;padding:16px 32px;border-width:3px}}@media(max-width:540px){#curtain{padding:32px 16px;gap:24px}#birthday-photo{width:min(75vw,260px)}#curtain h1{font-size:2em}#reveal-button{font-size:1.4em;padding:14px 28px}}@media(max-width:420px){#birthday-photo{width:min(78vw,230px)}#curtain h1{font-size:1.8em}#reveal-button{font-size:1.25em;padding:12px 24px}}