.graduation-frame{--grad-night:#100d0b;--grad-espresso:#251910;--grad-walnut:#4b3321;--grad-gold:#bd8d3f;--grad-gold-light:#e4c88f;--grad-gold-pale:#f2dfb6;--grad-paper:#f2e8d2;--grad-paper-light:#fff9ea;--grad-ink:#34251a;--grad-muted:#806b57;--gold:var(--grad-gold);--gold-deep:#8e652c;--text-muted:var(--grad-muted);--text-body:var(--grad-ink);--rose-deep:var(--grad-walnut);--plum:var(--grad-ink);--ruqaa:var(--font-display), "Aref Ruqaa", serif;--amiri:var(--font-elysee-body), "Amiri", serif;--body:var(--font-body), "Noto Kufi Arabic", sans-serif;background:var(--grad-night);width:100%;min-width:320px;min-height:100dvh;color:var(--grad-ink);font-family:var(--body);text-rendering:optimizelegibility;overflow-x:clip}.graduation-frame,.graduation-frame *{box-sizing:border-box}.graduation-frame h1,.graduation-frame h2,.graduation-frame h3,.graduation-frame p,.graduation-frame blockquote,.graduation-frame ol,.graduation-frame ul{margin:0}.graduation-frame button,.graduation-frame input,.graduation-frame textarea,.graduation-frame select{font:inherit}.graduation-frame :focus-visible{outline:3px solid var(--grad-gold-light);outline-offset:4px}.graduation-frame.is-closed .graduation-experience{visibility:hidden;height:100svh;overflow:hidden}.graduation-opening{z-index:100;isolation:isolate;color:var(--grad-paper-light);background:#17110d;transition:opacity .68s,transform .68s cubic-bezier(.2,.8,.2,1);position:fixed;inset:0;overflow:hidden}.graduation-opening--leaving{opacity:0;pointer-events:none;transform:scale(1.025)}.graduation-opening__video,.graduation-opening__shade{width:100%;height:100%;position:absolute;inset:0}.graduation-opening__video{z-index:0;object-fit:cover;object-position:center}.graduation-opening__shade{z-index:1;pointer-events:none;background:linear-gradient(#080604b8,#0806041a 28%,#0000 53%,#080604db),radial-gradient(circle at 50% 43%,#0000 16%,#08050340 100%);transition:opacity .5s}.graduation-opening__frame{inset:max(14px, calc(env(safe-area-inset-top,0px) + 10px)) 14px max(14px, calc(env(safe-area-inset-bottom,0px) + 10px));z-index:2;opacity:.82;pointer-events:none;border:1px solid #e4c88f5c;transition:opacity .42s;animation:1.1s cubic-bezier(.22,1,.36,1) both graduation-frame-in;position:absolute;box-shadow:inset 0 0 42px #07040224,0 0 24px #07040229}.graduation-opening__frame:before{content:"";border:1px solid #e4c88f21;position:absolute;inset:7px}.graduation-opening__frame:after,.graduation-opening__frame>span{content:"";background:#170f09bd;border:1px solid #f2dfb69e;width:7px;height:7px;position:absolute;left:50%;transform:translate(-50%)rotate(45deg);box-shadow:0 0 0 5px #170f094d}.graduation-opening__frame:after{top:-4px}.graduation-opening__frame>span{bottom:-4px}.graduation-opening--playing .graduation-opening__shade,.graduation-opening--leaving .graduation-opening__shade{opacity:.22}.graduation-opening--playing .graduation-opening__frame,.graduation-opening--leaving .graduation-opening__frame{opacity:0;animation:none}.graduation-opening--show-graduate .graduation-opening__shade{opacity:.72;background:linear-gradient(#07050352,#0000 25% 72%,#0705037a),radial-gradient(circle at 50% 47%,#0805039e 0%,#0000 53%)}.graduation-opening__graduate{z-index:3;color:var(--grad-paper-light);text-align:center;text-shadow:0 2px 12px #000000e0,0 8px 36px #000000b8;opacity:0;filter:blur(7px);pointer-events:none;justify-items:center;transition:opacity .85s,filter .85s,transform .85s cubic-bezier(.22,1,.36,1);display:grid;position:absolute;top:47%;left:24px;right:24px;transform:translateY(calc(18px - 50%))}.graduation-opening--show-graduate .graduation-opening__graduate{opacity:1;filter:blur();transform:translateY(-50%)}.graduation-opening__graduate h1{max-width:100%;font-family:var(--ruqaa);text-wrap:balance;font-size:clamp(2.25rem,10.5vw,4.6rem);font-weight:700;line-height:1.35}.graduation-opening__graduate>span{background:linear-gradient(90deg, transparent, var(--grad-gold-light), transparent);width:min(136px,38vw);height:1px;margin:clamp(14px,3vh,24px) 0 10px;box-shadow:0 0 18px #e4c88f6b}.graduation-opening__graduate p{color:var(--grad-gold-pale);letter-spacing:.08em;font-size:clamp(.76rem,3.3vw,1rem);font-weight:700}.graduation-opening__copy{top:max(6vh, calc(env(safe-area-inset-top,0px) + 36px));z-index:3;text-align:center;text-shadow:0 2px 14px #000000eb,0 8px 34px #0000008f;transition:opacity .4s,transform .6s;animation:.9s cubic-bezier(.22,1,.36,1) .12s both graduation-opening-copy-in;position:absolute;left:38px;right:38px}.graduation-opening--playing .graduation-opening__copy,.graduation-opening--leaving .graduation-opening__copy{opacity:0;animation:none;transform:translateY(-14px)}.graduation-opening__copy p{max-width:480px;color:var(--grad-paper-light);font-family:var(--amiri);text-wrap:balance;margin-inline:auto;font-size:clamp(1.22rem,5vw,1.72rem);font-weight:700;line-height:1.7}.graduation-opening__copy>span{color:var(--grad-gold-light);justify-content:center;align-items:center;gap:10px;margin:7px 0 5px;font-size:.62rem;display:flex}.graduation-opening__copy>span:before,.graduation-opening__copy>span:after{content:"";background:linear-gradient(90deg,#0000,#e4c88f9e);width:min(44px,12vw);height:1px}.graduation-opening__copy>span:after{transform:scaleX(-1)}.graduation-opening__copy strong{color:var(--grad-gold-pale);letter-spacing:.1em;font-size:.72rem;font-weight:700}.graduation-opening__trigger{right:50%;bottom:max(7vh, calc(env(safe-area-inset-bottom,0px) + 42px));z-index:3;width:min(310px,100% - 48px);color:var(--grad-paper-light);text-shadow:0 2px 12px #000,0 8px 28px #000000b8;cursor:pointer;background:0 0;border:0;justify-items:center;padding:0;animation:.9s cubic-bezier(.22,1,.36,1) .26s both graduation-trigger-in;display:grid;position:absolute;transform:translate(50%)}.graduation-opening__play{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:radial-gradient(circle at 35% 28%,#f2dfb626,#0000 32%),#140d0894;border:1px solid #f2dfb6d1;border-radius:50%;place-items:center;width:70px;height:70px;margin-bottom:18px;transition:border-color .22s,background-color .22s,transform .28s cubic-bezier(.22,1,.36,1);animation:2.3s ease-in-out infinite graduation-play-pulse;display:grid;position:relative;box-shadow:0 0 0 9px #f2dfb60f,0 0 0 10px #f2dfb62e,inset 0 0 18px #f2dfb614,0 14px 42px #00000075}.graduation-opening__play:before{border-radius:inherit;content:"";border:1px solid #f2dfb62e;position:absolute;inset:7px}.graduation-opening__play svg{fill:currentColor;stroke-width:1.5px;width:24px;height:24px;margin-inline-start:3px}.graduation-opening__trigger b{font-family:var(--amiri);text-wrap:balance;font-size:clamp(1.15rem,4.7vw,1.48rem);font-weight:700;line-height:1.6;display:block;position:relative}.graduation-opening__trigger b:after{background:linear-gradient(90deg, transparent, var(--grad-gold-light), transparent);content:"";opacity:.65;width:72px;height:1px;margin:7px auto 0;display:block}.graduation-opening__trigger:hover .graduation-opening__play{border-color:var(--grad-paper-light);background-color:#2a1b10b8;transform:translateY(-3px)scale(1.035)}.graduation-opening__trigger:active .graduation-opening__play{transform:scale(.97)}.template-shell--preview .graduation-opening__trigger{bottom:max(9vh, calc(env(safe-area-inset-bottom,0px) + 58px))}.graduation-opening__skip{top:max(18px, calc(env(safe-area-inset-top,0px) + 12px));z-index:4;min-height:42px;color:var(--grad-paper-light);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);background:#140d088a;border:1px solid #f2dfb680;border-radius:999px;align-items:center;gap:8px;padding:8px 15px;display:inline-flex;position:absolute;inset-inline-end:18px}.graduation-opening__skip svg{width:17px;height:17px}.graduation-experience{opacity:0;transition:opacity .9s .2s}.graduation-frame.is-opened .graduation-experience{opacity:1}.graduation-hero{isolation:isolate;background:linear-gradient(90deg,#0000 49.75%,#e4c88f1a 50%,#0000 50.25%),radial-gradient(circle at 50% 45%,#bd8d3f2e,#0000 38%),linear-gradient(145deg,#100c09,#2b1d13 55%,#110e0b);place-items:center;min-height:100svh;padding:clamp(48px,8vh,92px) 20px;display:grid;position:relative;overflow:hidden}.graduation-hero:before,.graduation-hero:after{z-index:-1;content:"";border:1px solid #e4c88f1c;width:42vw;height:76%;position:absolute;transform:skewY(-8deg)}.graduation-hero:before{top:-16%;left:-19%}.graduation-hero:after{bottom:-20%;right:-20%}.graduation-hero__glow{background:linear-gradient(#0000,#e4c88f8a,#0000);width:2px;height:34%;position:absolute;top:5%;right:50%;box-shadow:0 0 54px 14px #bd8d3f21}.graduation-certificate-wrap{opacity:0;width:min(540px,92vw);animation:1.15s cubic-bezier(.18,.8,.2,1) .24s forwards graduation-certificate-in;transform:perspective(1000px)rotateX(6deg)translateY(28px)scale(.96)}.graduation-certificate{outline-offset:-11px;background:linear-gradient(90deg, transparent 0 48%, #764f2808 50%, transparent 52%), repeating-linear-gradient(2deg, #49301c05 0 1px, transparent 1px 5px), var(--grad-paper);text-align:center;border:1px solid #d7b875;outline:1px solid #80572373;align-content:center;justify-items:center;min-height:min(700px,79svh);padding:clamp(46px,7vh,72px) clamp(28px,7vw,60px);display:grid;position:relative;overflow:hidden;box-shadow:0 35px 90px #0000007a,inset 0 0 80px #5c3c1f21}.graduation-certificate:before,.graduation-certificate:after{content:"";border:1px solid #8e652c73;width:115px;height:115px;position:absolute;transform:rotate(45deg)}.graduation-certificate:before{top:-72px;right:-72px}.graduation-certificate:after{bottom:-72px;left:-72px}.graduation-certificate__corner{pointer-events:none;border:1px solid #8e652c33;position:absolute;inset:19px}.graduation-certificate__year{color:#846535;letter-spacing:.08em;font-size:.66rem;font-weight:800;position:absolute;top:29px}.graduation-certificate__cap{color:#9d712e;stroke-width:1.25px;width:46px;height:46px;margin-bottom:15px}.graduation-certificate__kicker{color:#725937;font-family:var(--amiri);font-size:clamp(1.2rem,4.5vw,1.6rem)}.graduation-certificate__rule{background:linear-gradient(90deg,#0000,#a57a36,#0000);width:74px;height:1px;margin:14px 0 17px}.graduation-certificate__honorific{color:var(--grad-muted);font-size:clamp(.72rem,2.7vw,.88rem);font-weight:700}.graduation-certificate h1{color:#271b13;font-family:var(--font-display), "Aref Ruqaa", serif;margin:7px 0 10px;font-size:clamp(2.45rem,11vw,4.8rem);font-weight:700;line-height:1.16}.graduation-certificate__degree{color:#6f4c24;font-family:var(--amiri);font-size:clamp(1rem,3.6vw,1.28rem);font-weight:700}.graduation-certificate__academic{color:var(--grad-muted);flex-wrap:wrap;justify-content:center;gap:5px 13px;margin-top:8px;font-size:clamp(.68rem,2.5vw,.78rem);display:flex}.graduation-certificate__academic span+span:before{color:var(--grad-gold);content:"✦";margin-inline-end:13px;font-size:.6em}.graduation-certificate__sub{color:#5e4e3c;max-width:360px;font-family:var(--amiri);margin-top:22px;font-size:clamp(1rem,3.8vw,1.25rem);line-height:1.9}.graduation-certificate__seal{width:57px;height:57px;box-shadow:inset 0 0 0 5px var(--grad-paper), inset 0 0 0 6px #9e742f70;color:#8e652c;border:1px solid #9e742f;border-radius:50%;place-items:center;margin-top:21px;display:grid}.graduation-certificate__seal i{font-family:var(--font-display), serif;font-size:1.35rem;font-style:normal}.graduation-certificate small{color:#8a755d;font-size:.62rem;position:absolute;bottom:27px;left:0;right:0}.graduation-hero__tassel{top:-12px;transform-origin:top;width:52px;height:37vh;animation:6s ease-in-out infinite graduation-tassel;position:absolute;inset-inline-start:max(20px,7vw)}.graduation-hero__tassel i{background:linear-gradient(#7e5727,#d4ad64);width:2px;height:calc(100% - 55px);position:absolute;top:0;right:50%}.graduation-hero__tassel span{clip-path:polygon(34% 0,66% 0,100% 100%,0 100%);background:repeating-linear-gradient(90deg,#8d632e 0 2px,#d0a457 2px 4px);border-radius:50% 50% 10% 10%;width:18px;height:64px;position:absolute;bottom:0;right:17px}.graduation-scroll-cue{color:var(--grad-gold-light);font-size:1.25rem;animation:1.8s ease-in-out infinite graduation-scroll;position:absolute;bottom:12px;right:50%}.graduation-paper{background:radial-gradient(circle at 5% 10%, #9b71390d, transparent 28%), repeating-linear-gradient(3deg, transparent 0 6px, #452b1804 7px), var(--grad-paper-light);width:min(680px,100%);margin-inline:auto;padding:clamp(70px,11vw,105px) clamp(20px,6vw,56px);position:relative;box-shadow:0 0 0 1px #bd8d3f2e}.graduation-paper:before{content:"";pointer-events:none;border:1px solid #bd8d3f29;position:absolute;inset:28px}.graduation-section{text-align:center;padding:42px 0;position:relative}.graduation-section+.graduation-section,.section-reveal+.section-reveal .graduation-section{border-top:1px solid #8e652c2e}.graduation-title{justify-content:center;align-items:center;gap:12px;margin-bottom:25px;display:flex}.graduation-title span{background:linear-gradient(90deg, transparent, var(--grad-gold));width:min(48px,10vw);height:1px}.graduation-title span:last-child{transform:scaleX(-1)}.graduation-title h2{color:#6c4822;font-family:var(--amiri);font-size:clamp(1.45rem,5.5vw,2rem);line-height:1.3}.graduation-verse{color:#735127;justify-content:center;align-items:center;gap:8px;display:flex}.graduation-verse span{color:var(--grad-gold);font-family:var(--amiri);font-size:2.2rem}.graduation-verse blockquote{font-family:var(--amiri);font-size:clamp(1.45rem,6vw,2.05rem);font-weight:700}.graduation-invitation>p{color:#584735;max-width:520px;font-family:var(--amiri);margin-inline:auto;font-size:clamp(1.08rem,3.9vw,1.3rem);line-height:2.15}.graduation-invitation>strong{color:#7c5729;font-family:var(--amiri);margin-top:24px;font-size:1.05rem;line-height:1.8;display:block}.graduation-countdown>div{grid-template-columns:repeat(4,1fr);gap:7px;display:grid}.graduation-countdown>div>span{background:#ffffff57;border:1px solid #8e652c3d;gap:5px;min-width:0;padding:15px 4px;display:grid}.graduation-countdown strong{color:#6b4722;font-family:var(--font-elysee-display), serif;font-variant-numeric:tabular-nums;font-size:clamp(1.6rem,7vw,2.55rem);font-weight:500}.graduation-countdown small{color:var(--grad-muted);font-size:clamp(.55rem,2vw,.68rem)}.graduation-countdown__done{color:#6b4722;font-family:var(--amiri);font-size:1.25rem}.graduation-program ol{gap:0;padding:0;list-style:none;display:grid}.graduation-program li{color:#554534;grid-template-columns:minmax(75px,.85fr) 34px minmax(120px,1.3fr);align-items:center;min-height:74px;display:grid}.graduation-program li+li{border-top:1px dashed #8e652c38}.graduation-program time{color:#80643d;font-size:.72rem;font-weight:700}.graduation-program li>span{border:1px solid var(--grad-gold);color:#7b5627;width:28px;height:28px;font-family:var(--font-elysee-display), serif;border-radius:50%;place-items:center;font-size:.82rem;display:grid}.graduation-program li>p{text-align:start;font-size:.82rem;font-weight:700}.graduation-venue__seal{border:1px solid var(--grad-gold);color:#855d28;border-radius:50%;place-items:center;width:52px;height:52px;margin:0 auto 17px;display:grid}.graduation-venue__seal svg{width:21px;height:21px}.graduation-venue h3{color:#3e2b1c;font-family:var(--amiri);font-size:1.45rem}.graduation-venue>p{color:var(--grad-muted);margin-top:7px;font-size:.78rem}.graduation-venue>a,.graduation-contact>a{color:#6c4822;background:0 0;border:1px solid #9b7031;justify-content:center;align-items:center;gap:9px;min-height:44px;margin-top:20px;padding:9px 20px;font-size:.75rem;font-weight:800;text-decoration:none;display:inline-flex}.graduation-venue>a svg,.graduation-contact>a svg{width:17px;height:17px}.graduation-notes ul{gap:12px;max-width:460px;margin-inline:auto;padding:0;list-style:none;display:grid}.graduation-notes li{color:#5d4b38;text-align:start;align-items:flex-start;gap:10px;font-size:.8rem;line-height:1.8;display:flex}.graduation-notes li span{color:var(--grad-gold);margin-top:.35em;font-size:.55rem}.graduation-contact>span{color:var(--grad-muted);font-family:var(--amiri);font-size:1.1rem;display:block}.graduation-closing>svg{width:47px;height:47px;color:var(--grad-gold);stroke-width:1.25px;margin-bottom:16px}.graduation-closing p{color:#58402a;font-family:var(--amiri);font-size:clamp(1.2rem,4.8vw,1.55rem)}.graduation-closing strong{color:#987039;margin-top:14px;font-size:.72rem;display:block}.graduation-shared{width:min(680px,100%);color:var(--grad-ink);background:var(--grad-paper-light);text-align:center;margin-inline:auto}.graduation-shared--calendar{padding:10px 20px 58px}.graduation-shared--responses{padding:10px 12px 64px}.graduation-shared .calendar-card,.graduation-shared .rsvp-section,.graduation-shared .wishes-section{background:#f7edda;border-radius:2px}.graduation-shared .calendar-card>header{background:linear-gradient(135deg,#3b2a1d,#9a7034)}.graduation-shared .golden-action{background:linear-gradient(#b4863f,#8d642d);border-radius:2px}.graduation-credit{min-height:170px;color:var(--grad-gold-pale);background:radial-gradient(circle at 50% 0, #bd8d3f26, transparent 45%), var(--grad-night);text-align:center;place-content:center;gap:11px;padding:38px 24px;font-size:.72rem;display:grid}.graduation-credit strong{color:#fff4d5}.graduation-credit a{color:var(--grad-gold-light);font-weight:800}.graduation-frame .music-button{color:#f3dfb2;background:#1e140de0;border-color:#e4c88fa8}@keyframes graduation-play-pulse{50%{box-shadow:0 0 0 14px #f2dfb605,0 0 0 15px #f2dfb617,inset 0 0 24px #f2dfb61c,0 16px 48px #00000085}}@keyframes graduation-frame-in{0%{opacity:0;transform:scale(1.025)}}@keyframes graduation-opening-copy-in{0%{opacity:0;transform:translateY(-12px)}}@keyframes graduation-trigger-in{0%{opacity:0;transform:translate(50%)translateY(18px)}}@keyframes graduation-certificate-in{to{opacity:1;transform:none}}@keyframes graduation-tassel{0%,to{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}@keyframes graduation-scroll{50%{opacity:.45;transform:translateY(5px)}}@media (min-width:700px){.graduation-paper,.graduation-shared{border-inline:1px solid #bd8d3f26}.graduation-program li>p{font-size:.9rem}}@media (max-width:420px){.graduation-certificate{min-height:76svh;padding-inline:25px}.graduation-certificate__academic{display:grid}.graduation-certificate__academic span+span:before{margin-inline-end:7px}.graduation-countdown>div{gap:4px}.graduation-paper:before{left:14px;right:14px}}@media (max-height:680px){.graduation-opening__copy{top:max(4.5vh, calc(env(safe-area-inset-top,0px) + 24px))}.graduation-opening__copy p{font-size:1.08rem}.graduation-opening__trigger{bottom:max(4.5vh, calc(env(safe-area-inset-bottom,0px) + 28px))}.graduation-opening__play{width:60px;height:60px;margin-bottom:12px}}@media (prefers-reduced-motion:reduce){.graduation-opening,.graduation-experience,.graduation-certificate-wrap{transition:none}.graduation-opening__frame,.graduation-opening__copy,.graduation-opening__trigger,.graduation-opening__play,.graduation-certificate-wrap,.graduation-hero__tassel,.graduation-scroll-cue{animation:none}.graduation-certificate-wrap{opacity:1;transform:none}}