:root{color-scheme:light;--purple:#6b45ee;--lime:#dcff76;--ink:#242032;--orange:#ff9d79;--white:#fffdf5;--font:Manrope,'Noto Sans Arabic',Arial,sans-serif}*{box-sizing:border-box}html{min-height:100%;background:var(--purple)}body{margin:0;font-family:var(--font);color:var(--white);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font-family:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--white);outline-offset:8px}::selection{background:var(--lime);color:var(--ink)}[hidden]{display:none!important}.backdrop{position:fixed;inset:0;pointer-events:none;overflow:hidden;background-image:radial-gradient(#ffffff20 .8px,transparent .8px);background-size:22px 22px}.doodle{position:absolute;fill:none;stroke-width:2;stroke:var(--lime);stroke-linecap:round;stroke-linejoin:round}.doodle-star{width:95px;left:8%;top:27%;transform:rotate(-12deg)}.doodle-loop{width:170px;right:3%;top:40%;transform:rotate(-14deg);stroke:var(--orange)}.doodle-flower{width:78px;right:12%;bottom:16%;stroke:var(--white);transform:rotate(15deg)}.mini-cross{position:absolute;color:var(--orange);font-size:32px;font-weight:400}.cross-one{left:24%;top:17%;transform:rotate(13deg)}.cross-two{right:18%;top:21%;font-size:22px;color:var(--lime)}.cross-three{bottom:20%;left:9%;color:var(--white);font-size:26px}
.page{position:relative;min-height:100svh;max-width:1600px;margin:auto;padding:29px 48px 22px;display:flex;flex-direction:column}.header{display:flex;justify-content:space-between;align-items:center;gap:18px}.school{display:flex;gap:11px;align-items:center;color:var(--white);text-decoration:none;font-size:14px;line-height:1.2;font-weight:800;letter-spacing:-.5px}.school>svg{width:32px;height:32px;fill:var(--lime)}.school-dot{color:var(--lime)}.class-pill{display:flex;align-items:center;gap:9px;background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:30px;padding:9px 15px;font-size:10px;font-weight:600;letter-spacing:.4px;box-shadow:3px 3px 0 var(--ink);transform:rotate(3deg)}.class-pill strong{font-size:15px;font-weight:800;letter-spacing:-.5px}.class-pill>span{font-size:19px;line-height:1}.main{flex:1;display:flex;align-items:center;justify-content:center;padding:42px 0 40px}.closed-view{width:100%;text-align:center}.eyebrow{display:flex;align-items:center;justify-content:center;gap:13px;margin:0 0 7px;font-size:10px;letter-spacing:2px;font-weight:600}.eyebrow>span{color:var(--lime);font-size:17px}.name{font-weight:800;overflow-wrap:anywhere;text-wrap:balance}.recipient{font-size:clamp(68px,8.8vw,120px);line-height:1.1;letter-spacing:-5px;margin:0 auto;max-width:1100px;color:var(--lime)}.name bdi{font-weight:inherit}.intro{font-size:13px;margin:15px 0 0;line-height:1.6;color:#eee9ff}.mail-area{position:relative;max-width:480px;margin:38px auto 0}.envelope-button{position:relative;width:100%;padding:0;border:0;display:block;background:transparent;cursor:pointer;color:var(--ink);touch-action:manipulation}.mail-stage{position:relative;display:block;aspect-ratio:480/290;transform:rotate(-4deg);transition:transform .3s cubic-bezier(.2,.8,.2,1);isolation:isolate;perspective:1000px}.envelope-button:hover .mail-stage{transform:rotate(-1deg) translateY(-5px)}.envelope-button:active .mail-stage{transform:rotate(0) translateY(0)}.envelope-back{position:absolute;inset:0;background:#b6d850;border:2.5px solid var(--ink);border-radius:12px;box-shadow:8px 9px 0 var(--ink);z-index:1}.peek-paper{position:absolute;inset:12px 17px 14px;background:var(--white);border:2px solid var(--ink);border-radius:8px;z-index:2;display:grid;place-items:start center;padding:30px 10px;color:var(--purple);font-size:25px;font-weight:800;transform:translateY(0);opacity:0}.flap{position:absolute;top:1px;left:1px;right:1px;height:58%;clip-path:polygon(0 0,100% 0,50% 100%);background:#e8ff9e;z-index:5;transform-origin:50% 0%;transition:transform .6s cubic-bezier(.4,0,.2,1);backface-visibility:visible;border-radius:10px 10px 0 0}.flap svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:2}.envelope-front{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 0 transparent)}.envelope-front path{stroke:var(--ink);stroke-width:2;stroke-linejoin:round}.fold-left{fill:#d2f66d}.fold-right{fill:#c9ef61}.fold-bottom{fill:var(--lime)}.seal{position:absolute;left:50%;top:49%;width:61px;height:61px;transform:translate(-50%,-50%) rotate(9deg);border-radius:50%;background:var(--orange);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);z-index:6;display:grid;place-items:center;transition:opacity .2s,scale .2s}.seal svg{width:27px;height:27px;fill:var(--ink)}.envelope-label{position:absolute;bottom:15%;left:0;right:0;z-index:4;font-size:9px;letter-spacing:1.7px;font-weight:800}.postage{position:absolute;right:6%;top:8%;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:51px;background:var(--white);border:2px dashed var(--ink);color:var(--purple);font-size:23px;line-height:1}.postage small{font-size:11px;margin-top:2px;font-weight:800}.open-hint{display:inline-flex;align-items:center;justify-content:center;gap:15px;background:var(--white);border:2px solid var(--ink);border-radius:40px;box-shadow:4px 4px 0 var(--ink);margin-top:34px;padding:13px 23px;font-size:11px;font-weight:800;letter-spacing:1px;transition:background .2s,translate .2s}.open-hint svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.envelope-button:hover .open-hint{background:var(--orange);translate:0 -2px}.side-note{position:absolute;left:-116px;top:33%;font-size:15px;font-weight:600;text-align:center;line-height:1.3;transform:rotate(-12deg);color:var(--white)}.side-note svg{position:absolute;width:68px;right:-50px;top:28px;fill:none;stroke:var(--white);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(8deg)}.sticker{position:absolute;right:-42px;top:-22px;width:84px;height:84px;background:var(--orange);border:2px solid var(--ink);border-radius:50%;display:grid;place-content:center;font-size:11px;font-weight:800;line-height:1.15;letter-spacing:.5px;color:var(--ink);transform:rotate(15deg);z-index:8;box-shadow:3px 3px 0 var(--ink);pointer-events:none}
.footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #ffffff40;padding-top:19px;font-size:8px;letter-spacing:1.6px;font-weight:600}.footer-center{color:var(--lime);font-size:18px;line-height:1}.footer>span:last-child>span{font-size:16px;color:var(--lime);margin-left:7px}.note-view{width:100%;max-width:650px;text-align:center;padding:2px 0}.note-topline{display:flex;justify-content:center;align-items:center;gap:13px;font-size:9px;letter-spacing:1.8px;font-weight:600;margin-bottom:25px}.note-spark{color:var(--lime);font-size:17px}.note-card{position:relative;background:var(--white);color:var(--ink);padding:24px 42px 29px;border:2.5px solid var(--ink);border-radius:16px;box-shadow:9px 9px 0 var(--ink);animation:letter-in .65s cubic-bezier(.15,.7,.3,1) both}.note-tape{position:absolute;width:108px;height:31px;background:#ffb491ed;top:-17px;left:50%;transform:translateX(-50%) rotate(-5deg);border-left:2px dashed #ed916a;border-right:2px dashed #ed916a}.note-meta{display:flex;justify-content:space-between;align-items:center;text-align:left;font-size:8px;letter-spacing:1.4px;font-weight:600;color:#686174;margin-bottom:18px}.note-meta>span:last-child{font-size:27px;line-height:1;color:var(--purple)}.hey{margin:0 0 3px;font-size:13px;letter-spacing:3px;font-weight:800}.note-name{font-size:clamp(64px,8vw,100px);color:var(--purple);line-height:1.06;letter-spacing:-5px;margin:0 auto 26px;padding:0 0 5px;outline:none}.thank-you{position:relative;display:inline-flex;flex-direction:column;align-items:center;line-height:1.25;font-size:25px;font-weight:600;letter-spacing:-1px}.thank-you strong{font-size:34px;font-weight:800;letter-spacing:-1.6px}.accent-dot{color:var(--purple)}.thank-you svg{position:absolute;bottom:-9px;width:100%;height:13px;stroke:var(--orange);stroke-width:4;fill:none;stroke-linecap:round}.note-message{font-size:13px;line-height:1.9;margin:29px 0;color:#62596d}.note-signature{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px;padding-top:20px;border-top:1px dashed #bbb1c7}.note-signature p{font-size:8px;letter-spacing:.7px;font-weight:800;margin:0;line-height:1.8}.note-signature p>span{display:block;font-size:10px;font-weight:500;letter-spacing:0}.signature-star{font-size:30px;color:var(--purple);line-height:1}.signature-heart{font-size:30px;line-height:1;color:var(--purple);transform:rotate(15deg)}.back-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;color:var(--white);background:transparent;border:1px solid #ffffff75;border-radius:30px;padding:13px 20px;cursor:pointer;min-height:44px;margin-top:27px;font-size:9px;letter-spacing:1px;font-weight:600;transition:background .2s}.back-button:hover{background:#ffffff20}.back-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.name.is-long{font-size:clamp(32px,5.8vw,68px);letter-spacing:-1.5px;line-height:1.15}.note-name.is-long{font-size:clamp(32px,5.8vw,64px)}
.opening .flap{transform:rotateX(180deg);z-index:2}.opening .seal{opacity:0;scale:.65}.opening .postage{opacity:0;transition:opacity .15s}.opening .peek-paper{animation:paper-lift .75s .18s cubic-bezier(.2,.8,.3,1) both}.opening .mail-stage{transform:rotate(0deg)!important}.opening .open-hint{opacity:0;transition:opacity .2s}.opening .closed-view{animation:envelope-out .3s .7s both}.opening .envelope-button{cursor:default}.confetti{position:fixed;z-index:20;left:50%;top:48%;width:9px;height:14px;pointer-events:none;background:var(--color);border-radius:2px;animation:confetti 1.6s cubic-bezier(.2,.75,.5,1) both;animation-delay:var(--delay)}.noscript-message{max-width:500px;background:var(--white);color:var(--ink);padding:20px;border-radius:12px;margin:25px auto;line-height:1.7}@keyframes paper-lift{0%{opacity:1;transform:translateY(0)}65%,100%{opacity:1;transform:translateY(-40%) rotate(3deg)}}@keyframes envelope-out{to{opacity:0;transform:translateY(15px) scale(.96)}}@keyframes letter-in{from{opacity:0;transform:translateY(55px) scale(.88) rotate(-5deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}@keyframes confetti{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.5)}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--turn)) scale(.6)}}
@media(min-width:1600px){.page{padding-top:40px;padding-bottom:30px}.mail-area{margin-top:45px}}
@media(max-width:900px){.side-note{left:-95px;font-size:13px}.doodle-star{left:3%;width:65px;top:29%}.doodle-loop{right:-65px;top:38%;width:130px}.doodle-flower{right:7%;width:55px}.cross-one{left:16%}.cross-three{left:4%;bottom:15%}}
@media(max-width:600px){.page{padding:23px 23px 19px}.header{gap:10px}.school{font-size:12px;gap:8px;letter-spacing:-.3px}.school>svg{width:25px;height:25px}.class-pill{font-size:8px;padding:8px 11px;gap:5px;box-shadow:2px 2px 0 var(--ink)}.class-pill strong{font-size:12px}.class-pill>span{font-size:15px}.main{padding:46px 0 43px}.eyebrow{font-size:8px;letter-spacing:1.4px;gap:10px}.eyebrow>span{font-size:14px}.recipient{font-size:clamp(58px,15vw,82px);letter-spacing:-3px;line-height:1.15}.intro{font-size:10px;margin-top:12px}.mail-area{width:calc(100% - 20px);margin-top:42px}.mail-stage{transform:rotate(-5deg)}.envelope-back{border-radius:9px;box-shadow:6px 7px 0 var(--ink)}.envelope-label{font-size:6.5px;letter-spacing:1.1px;bottom:14%}.seal{width:45px;height:45px;box-shadow:2px 2px 0 var(--ink)}.seal svg{width:21px;height:21px}.postage{width:32px;height:38px;font-size:18px}.postage small{font-size:8px}.open-hint{font-size:9px;padding:12px 19px;gap:11px;margin-top:32px;box-shadow:3px 3px 0 var(--ink)}.open-hint svg{width:19px;height:19px}.sticker{width:65px;height:65px;right:-13px;top:-28px;font-size:9px}.side-note{display:none}.footer{font-size:6px;letter-spacing:.8px;gap:8px;padding-top:16px;line-height:1.7}.footer>span:first-child{max-width:110px}.footer>span:last-child{max-width:134px;text-align:right}.footer>span:last-child>span{font-size:12px;margin-left:3px}.footer-center{font-size:16px}.doodle-star{width:43px;left:-14px;top:21%}.doodle-loop{width:89px;right:-35px;top:66%;transform:rotate(55deg)}.doodle-flower{width:43px;right:3%;bottom:14%}.cross-one{left:21%;top:15%;font-size:22px}.cross-two{right:16%;top:18%;font-size:15px}.cross-three{left:6%;bottom:21%;font-size:18px}.note-topline{font-size:7px;letter-spacing:1.2px;gap:9px;margin-bottom:25px}.note-spark{font-size:15px}.note-card{padding:21px 20px 25px;border-radius:13px;box-shadow:6px 7px 0 var(--ink)}.note-tape{width:86px;height:28px;top:-15px}.note-meta{font-size:6px;letter-spacing:1.1px;margin-bottom:18px}.note-meta>span:last-child{font-size:24px}.hey{font-size:11px;letter-spacing:2px}.note-name{font-size:clamp(52px,14.6vw,78px);letter-spacing:-3px;margin-bottom:25px}.thank-you{font-size:21px}.thank-you strong{font-size:29px;letter-spacing:-1.2px}.note-message{font-size:11px;line-height:1.9;margin-top:27px}.note-signature{margin-top:24px;padding-top:17px;gap:10px}.note-signature p{font-size:7px}.note-signature p>span{font-size:9px}.signature-star,.signature-heart{font-size:25px}.back-button{font-size:8px;margin-top:23px}.name.is-long{font-size:clamp(30px,9.5vw,48px);letter-spacing:-1px}.note-name.is-long{font-size:clamp(28px,9vw,44px)}.peek-paper{padding-top:20px;font-size:19px}}
@media(max-width:359px){.page{padding-left:18px;padding-right:18px}.school{font-size:10px}.class-pill{font-size:7px;padding:7px 9px}.class-pill strong{font-size:11px}.main{padding-top:43px}.intro{font-size:9px}.mail-area{width:calc(100% - 12px)}.envelope-label{font-size:5.8px;letter-spacing:.7px}.note-card{padding-left:15px;padding-right:15px}.thank-you{font-size:19px}.thank-you strong{font-size:26px}.note-name{font-size:52px}.footer{font-size:5.5px;letter-spacing:.5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.confetti{display:none}.opening .closed-view{opacity:0}}