@font-face{font-family:Arabic;src:url(../assets/arabic.ttf) format("truetype");font-display:swap}
@font-face{font-family:Display;src:url(../assets/display.ttf) format("truetype");font-weight:700;font-display:swap}
:root{color-scheme:dark;--bg:#08172c;--ink:#f1f8ff;--muted:#b5cbe1;--ice:#90d8ff;--line:#9bcefa38;--wash:#122c48;--paper:#e8f4fc;--dark-ink:#143352}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arabic,Arial,sans-serif;line-height:1.85}
body:has(dialog[open]){overflow:hidden}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:Display,Arabic,serif;line-height:1.24}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{opacity:.42;cursor:default}
a:focus-visible,button:focus-visible{outline:2px solid #9ce3ff;outline-offset:5px}
.wrap{width:min(1120px,calc(100% - 88px));margin-inline:auto}
.top{height:72px;padding-inline:max(28px,calc((100% - 1280px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px;background:#08182bf7;border-bottom:1px solid var(--line);position:relative;z-index:2}
.brand{display:flex;gap:10px;align-items:center;font-size:19px;white-space:nowrap}
.brand small{color:var(--ice);font:11px Arial;margin-inline-start:5px;letter-spacing:.1em}
.brand-mark{display:grid;place-items:center;width:35px;height:35px;border:1px solid var(--line);border-radius:50%;color:var(--ice)}
nav{display:flex;gap:clamp(14px,3vw,44px);font-size:13px;color:var(--muted)}
nav a:hover,footer a:hover{color:var(--ice)}
.pill,.primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);border-radius:99px;padding:7px 16px;min-height:42px;background:#122f50;color:var(--ink);font-size:14px;transition:background .2s,transform .2s}
.pill:hover:not(:disabled){background:#21466a}
.audio{white-space:nowrap;font-size:12px}
.audio[aria-pressed=true]{border-color:#84d8ff91}
.primary{background:#b5e5ff;border-color:#d6f2ff;color:#082440;min-height:50px;padding:8px 22px;box-shadow:0 5px 34px #50bfff27}
.primary:hover{background:#e4f6ff;transform:translateY(-2px)}
.eyebrow{color:var(--ice);display:flex;align-items:center;gap:10px;font-size:13px}
.eyebrow i{width:7px;height:7px;transform:rotate(45deg);background:var(--ice);box-shadow:0 0 14px #8bdcff}
.signature{display:flex;align-items:center;gap:12px;color:#a6d9f9;margin-top:20px;font-size:14px}
.signature span{width:27px;height:1px;background:currentColor}
.close{position:absolute;z-index:2;width:40px;height:40px;display:grid;place-items:center;border:1px solid #b6e0ff60;border-radius:50%;background:#0a2446e8;color:#f3f9ff}
.chapter{min-height:455px;display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;padding-block:68px}
.chapter-text h2,.section-heading h2{font-size:clamp(36px,5.2vw,69px);margin:12px 0 10px}
.chapter-text p,.section-heading p{color:var(--muted);font-size:16px;max-width:380px}
.chapter-text .primary{margin-top:21px}
.envelope-scene,.book-scene{background:none;border:0;padding:15px;display:grid;justify-items:center;gap:22px;perspective:850px;width:100%;border-radius:16px}
.envelope{width:min(100%,328px);aspect-ratio:1.52;position:relative;display:block;transform-style:preserve-3d;transform:rotateX(15deg) rotateY(-16deg) rotateZ(-5deg);background:#a4cbe5;border-radius:10px;box-shadow:17px 27px 55px #010b1cd6;transition:transform .6s}
.envelope-scene:hover .envelope,.envelope-scene.is-opening .envelope{transform:rotateX(6deg) rotateY(0) rotateZ(0)}
.envelope-paper{position:absolute;inset:10% 12%;background:#eaf6ff;color:#234964;text-align:center;padding-top:7%;font:700 31px Display;transform:translateZ(2px);transition:transform .55s}
.envelope-front,.envelope-flap{position:absolute;inset:0;border-radius:10px}
.envelope-front{transform:translateZ(4px);clip-path:polygon(0 0,50% 61%,100% 0,100% 100%,0 100%);background:linear-gradient(143deg,#a7d4f2,#679fc6 50%,#93c0e0 51%,#d9efff)}
.envelope-flap{transform-origin:top;transform:translateZ(6px);clip-path:polygon(0 0,100% 0,50% 66%);background:linear-gradient(165deg,#e6f5ff,#9fc9e6 65%);transition:transform .5s}
.wax{position:absolute;inset:47% 0 auto;margin:auto;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;transform:translateZ(9px);border:4px double #cbeeff77;background:radial-gradient(circle at 26% 20%,#569fd0,#194b80 75%);color:#e6f7ff;font:700 24px Display;box-shadow:0 2px 5px #0c335c73;transition:opacity .25s}
.envelope-scene.is-opening .envelope-paper{transform:translateY(-33%) translateZ(2px)}
.envelope-scene.is-opening .envelope-flap{transform:translateZ(6px) rotateX(150deg)}
.envelope-scene.is-opening .wax{opacity:0}
.object-caption{font-size:14px;color:var(--ice)}
.book-band{background:radial-gradient(ellipse at 22% 50%,#1d4668,#0c213a 55%);border-block:1px solid var(--line)}
.book-object{width:min(64%,230px);aspect-ratio:3/4;position:relative;display:grid;align-items:stretch;transform:rotateY(22deg) rotateZ(9deg);transform-style:preserve-3d;transition:transform .45s;box-shadow:20px 28px 45px #01091b9c}
.book-scene:hover .book-object{transform:rotateY(8deg) rotateZ(3deg) translateY(-7px)}
.book-object::after{content:"";position:absolute;inset:4px auto 4px -13px;width:16px;background:repeating-linear-gradient(90deg,#b6ccdc 0 1px,#e4f3f9 1px 3px);transform-origin:right;transform:rotateY(-60deg);border-radius:1px}
.book-title{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;line-height:1.3;padding:9px;border:1px solid #a2d9f98c;border-radius:3px 8px 8px 3px;background:radial-gradient(ellipse at 55% 40%,#276892,#0c2b4d 72%);box-shadow:inset -7px 0 12px #060f20ad;color:#f0faff;text-align:center}
.book-title::before{content:"";position:absolute;inset:10px;border:1px solid #bce6ff5f;pointer-events:none}
.book-title small{font-size:10px;color:#bde7ff}
.book-title b{font:700 clamp(16px,3vw,30px)/1.2 Display,serif}
.book-title i{font-style:normal;color:#afe4ff;font-size:24px}
.chapter-wide{padding-block:76px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:26px;margin-bottom:28px}
.section-heading p{padding-bottom:7px}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;perspective:1000px}
.photo-card{position:relative;padding:8px;min-width:0;display:grid;gap:4px;text-align:start;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,#163653,#0c2037);transition:transform .25s,background .25s}
.photo-card:hover{transform:translateY(-4px) rotateX(5deg);background:#1d4164}
.photo-card img{width:100%;height:clamp(130px,22vw,230px);display:block;object-fit:contain;border-radius:10px;background:#07182a}
.photo-card span{padding-inline:6px;display:flex;justify-content:space-between;gap:4px;color:#c3def3;font-size:12px}
.surprise-band{border-block:1px solid var(--line);background:#0b2038}
.surprise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.surprise{position:relative;padding:21px 18px 24px;text-align:center;border:1px solid var(--line);border-radius:19px;background:radial-gradient(ellipse at 50% 35%,#173e63,#0b1d33 73%)}
.badge{position:absolute;top:13px;inset-inline-start:15px;font-size:11px;color:var(--ice)}
.surprise h3{font-size:26px}
.surprise p{font-size:13px;color:var(--muted);margin:5px 0 13px}
.surprise-art,#heart-art{display:grid;place-items:center;width:min(100%,240px);height:145px;margin:0 auto 9px}
.star-art{font-size:78px;color:#c5eaff;text-shadow:0 0 12px #a7dfff,0 0 42px #55b9ff}
.clock-art{font:34px Arial;letter-spacing:.12em;color:#d4f1ff;text-shadow:0 0 27px #62c6ff}
footer{padding:35px 0 42px}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:15px}
footer p{font:700 25px Display}
footer span,footer a{font-size:12px;color:var(--muted)}
footer bdi{margin-inline-start:7px}
.modal{position:fixed;inset:0;width:min(615px,calc(100% - 24px));max-height:calc(100% - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:28px;border:1px solid #81b9e69c;border-radius:21px;background:#0b233d;color:var(--ink);box-shadow:0 14px 70px #020a1bd9;overscroll-behavior:contain}
.modal::backdrop{background:#030e20d8}
.modal .close{top:10px;inset-inline-end:10px;font:23px Arial}
.modal h2{font-size:clamp(25px,5vw,41px);padding-inline-end:35px;margin:9px 0 13px}
.modal p{line-height:1.95}
.letter-modal p+p{margin-top:14px}
.letter-modal{background:linear-gradient(150deg,#f0f9ff,#d5ebf9);color:var(--dark-ink)}
.letter-modal .eyebrow,.letter-modal .signature{color:#245f88}
.letter-modal .eyebrow i{background:#245f88}
.reader{perspective:1050px}
.page{min-height:210px;position:relative;padding:17px 22px;background:linear-gradient(100deg,#c3d8e6,#e9f4fb 8%,#e9f4fb 96%,#cee2ef);color:#102f4c;border-radius:10px;box-shadow:0 8px 16px #020a1f65;transform-origin:right center}
.page.turn-forward{--turn-angle:-40deg;animation:turn .36s ease-out}
.page.turn-back{--turn-angle:40deg;animation:turn .36s ease-out}
@keyframes turn{0%{transform:rotateY(var(--turn-angle));opacity:.65}100%{transform:rotateY(0);opacity:1}}
.page h3{font-size:29px;margin:8px 0 6px}
.page p{font-size:17px}
.page-no,.page-sign{font-size:12px;color:#315d7c}
.page-sign{display:block;margin-top:9px}
.page-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.lightbox{text-align:center;padding:15px}
.lightbox h2{font-size:24px;margin:7px 0 13px;padding-inline:35px}
.photo-view{max-height:62vh;height:62vh;background:#051326;border-radius:12px;overflow:auto;overscroll-behavior:contain}
.photo-view img{width:100%;height:100%;display:block;object-fit:contain}
.photo-view.zoomed img{width:200%;height:200%;max-width:none;object-fit:contain}
#photo-count{margin-top:4px;font-size:12px;color:var(--muted)}
.little-modal{text-align:center}
.little-modal h2{padding:0}
.little-modal .eyebrow{justify-content:center}
.dialog-symbol{font:45px Arial;color:var(--ice);text-shadow:0 0 20px #65c1ff}
.stars{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:15px 0}
.stars button{min-width:43px;min-height:43px;border:1px solid var(--line);border-radius:50%;background:#0a1b31;color:#acd9f6;font-size:21px}
.stars button[aria-pressed=true]{color:white;background:#285a83;box-shadow:0 0 12px #75cfff78}
.star-progress{font-size:12px;color:var(--ice);margin-top:10px}
@media(max-width:760px){
  .wrap{width:calc(100% - 38px)}
  .top{height:62px;padding-inline:19px;gap:8px}
  nav{display:none}
  .chapter{grid-template-columns:1fr;gap:25px;padding-block:48px;min-height:0}
  .chapter-wide{padding-block:48px}
  .section-heading{display:block;margin-bottom:18px}
  .photo-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .photo-card{padding:5px}
  .surprise-grid{grid-template-columns:1fr}
  footer .wrap{flex-wrap:wrap}
}
@media(max-width:375px){.modal{padding:18px}.page{padding:12px}.page p{font-size:15px}.page-nav .pill{font-size:12px;padding-inline:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.top{position:absolute;inset:0 0 auto;height:74px;background:#06162c75;border-color:#e0f3ff30;backdrop-filter:blur(12px)}
.top nav{color:#f1f8ff}
.hero{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:grid;place-items:end center;overflow:hidden;background:#143758 url(../assets/poster.webp) center 52%/cover}
.hero-video,.hero-shade{position:absolute;inset:0;width:100%;height:100%}
.hero-video{z-index:-2;object-fit:cover;object-position:center 50%}
.hero-shade{z-index:-1;background:linear-gradient(180deg,#030e1d4d 0%,#081b3545 25%,#07172cb3 57%,#071b37 100%),radial-gradient(ellipse at center,#061a3554,transparent 70%)}
.hero-copy{width:min(94%,900px);text-align:center;padding:126px 12px clamp(78px,11vh,124px);display:grid;justify-items:center;gap:15px}
.hero-date{display:flex;align-items:center;gap:12px;font-size:13px;color:#eff7ff;padding:5px 15px;border:1px solid #f0f8ff62;border-radius:99px;background:#142d486b}
.hero-date bdi{font:12px Arial;letter-spacing:.22em}
.hero-quote{font-size:clamp(18px,3.1vw,30px);color:#def4ff;text-shadow:0 2px 18px #051225;line-height:1.55}
.hero h1{font-size:clamp(29px,8.6vw,122px);line-height:1.14;white-space:nowrap;text-shadow:0 0 14px #c3eaff91,0 0 42px #67c9ff98,0 5px 17px #071a3b;padding:6px 0 0}
.hero-copy .primary{margin-top:8px;background:#dff3ff;color:#0d2a46}
.play-film{position:absolute;bottom:18px;inset-inline-end:clamp(15px,4vw,48px);background:#0c234a9e;font-size:12px}
.sky-band{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 30% 38%,#1b5987 0%,#103e69 25%,#092748 54%,#071b37 88%);border-bottom:1px solid #a8d8ff3d}
.sky-band::before{content:"";position:absolute;z-index:-1;inset:0;background:url(../assets/blue.webp) 50% 45%/cover;opacity:.1;mix-blend-mode:screen;mask-image:linear-gradient(transparent,#000,transparent)}
.sky-grid{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:48px;min-height:555px;padding-block:66px}
.sky-grid .chapter-text h2{font-size:clamp(50px,8vw,97px);line-height:.99;margin-block:21px 14px}
.chapter[id=letter]{background:radial-gradient(ellipse at 25% 44%,#143452 0%,transparent 58%)}
.mail-band{background:linear-gradient(130deg,#163b61,#0c2646 55%,#0c2c50);border-block:1px solid var(--line)}
.mail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;perspective:950px}
.mail-card{min-height:175px;border:1px solid #c2e8ff61;border-radius:19px;background:radial-gradient(ellipse at 48% 0,#39749a,#1b456e 62%,#112b4a);box-shadow:0 12px 20px #06172c8c,inset 0 1px 0 #effaff5e;text-align:center;padding:14px;display:grid;place-content:center;gap:3px;transition:transform .3s,background .3s}
.mail-card:hover,.mail-card:focus-visible{transform:translateZ(16px) translateY(-5px) rotateX(5deg)}
.mail-icon{font:37px Arial;color:#e1f4ff;text-shadow:0 0 20px #93cfff;min-height:49px}
.mail-title{font:700 25px Display,serif}
.mail-total{font-size:12px;color:#d9edff}
.surprise-grid{perspective:1000px}
.surprise{transform-style:preserve-3d;transition:transform .32s,box-shadow .32s}
.surprise:hover,.surprise:focus-within{transform:translateY(-5px) rotateX(4deg);box-shadow:0 10px 24px #04142780}
.rain-art{font:bold 85px/1 Arial;color:#aff2ff;text-shadow:0 0 25px #6ed1fd;transform:rotate(20deg)}
.shell-art{font:76px/1 Arial;color:#f9e6c6;text-shadow:0 0 30px #e3bb87}
.sky-modal{background:radial-gradient(ellipse at 50% 0,#1f5078,#0e2847 73%)}
.message-copy{font-size:19px;min-height:4em}
.drop-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:16px 0}
.drop{width:43px;height:43px;border-radius:60% 50% 55% 15%;transform:rotate(-45deg);background:#2c5a85;border:1px solid #a5e2ff82;color:#f6fbff;box-shadow:inset 0 0 9px #9ce0ff48}
.drop span{display:inline-block;transform:rotate(45deg)}
.drop[aria-pressed=true]{background:#a5e2ff;color:#153a59}
@media(max-width:760px){
  .top{height:62px}
  .hero-copy{gap:13px;padding-bottom:92px}
  .hero-quote{font-size:clamp(16px,4.6vw,24px)}
  .hero-video{object-position:center 50%}
  .sky-grid{grid-template-columns:1fr;gap:10px;padding-block:50px;min-height:0}
  .sky-caption{bottom:0}
  .mail-grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .mail-card{min-height:144px;padding:11px 6px}
  .mail-title{font-size:21px}
  .message-copy{font-size:17px}
}

.hero-date{background:#0d253bdd;border-color:#d9f3ff88}
.hero-date bdi{font-size:clamp(16px,3.2vw,32px);font-weight:700;letter-spacing:.1em;color:#fff;line-height:1.3;text-shadow:0 0 9px #bfe9ff,0 0 22px #72caff}
.sky-grid{grid-template-columns:minmax(0,.77fr) minmax(0,1.23fr);gap:32px}
#sky-art{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;opacity:0}
.webgl-ready #sky-art{opacity:1}
.sun-orbit{position:absolute;pointer-events:none;left:44.9%;top:11.3%;width:33.6%;height:35.4%;border:1px solid #ffe0a65c;border-radius:50%;box-shadow:0 0 12px #ffce751b}
.sun-name{--orbit-x:15.7%;--orbit-y:5.9%;--orbit-scale:1;--orbit-light:1;position:absolute;left:calc(61.7% + var(--orbit-x));top:calc(29% + var(--orbit-y));z-index:2;pointer-events:none;white-space:nowrap;transform:translate(-50%,-50%) scale(var(--orbit-scale));font:700 clamp(19px,4vw,40px)/1 Display,serif;color:#fff4cf;opacity:var(--orbit-light);text-shadow:0 1px 2px #60370a,0 0 12px #ffe2a3,0 0 24px #ffc667}
.sun{position:absolute;z-index:3;left:52.8%;top:15.75%;width:17.8%;height:26.5%;min-width:42px;min-height:42px;border-radius:50%;border:0;background:transparent;transition:box-shadow .2s}
.sun:hover,.sun:focus-visible{box-shadow:0 0 22px 8px #ffc87d88}

.envelope{background:#ad7749 url(../assets/roman-paper.svg) center/100% 100%;box-shadow:17px 27px 52px #010b1cd6,inset 0 0 15px #784c35;border-radius:7px}
.envelope-front,.envelope-flap{border-radius:7px}
.envelope-paper{background:#efdbb0 url(../assets/roman-paper.svg) center/100% 100%;color:#53311e;text-shadow:0 1px 1px #edc999;box-shadow:0 2px 8px #4d251978}
.envelope-front{background:linear-gradient(145deg,#87503040,#f6d7a62b 49.7%,#74422352 50%,transparent 51%),url(../assets/roman-paper.svg) center/100% 100%}
.envelope-flap{background:linear-gradient(145deg,#7d51304d,#f5deb15c 49%,#8a503554),url(../assets/roman-paper.svg) center/100% 100%;filter:drop-shadow(0 3px 4px #58301e90)}
.wax{border:4px double #ffa99880;background:radial-gradient(circle at 25% 20%,#b95d4b,#7e281f 55%,#4e201d);color:#ffdcc3;box-shadow:0 4px 8px #3e1b147e,inset 0 2px 4px #e9986d7a}
.letter-modal{background:#eed8ae url(../assets/roman-paper.svg) center/100% 100%;color:#412918;border-color:#ac7b4f;padding:40px clamp(26px,6vw,48px)}
.letter-modal .eyebrow,.letter-modal .signature{color:#744724}
.letter-modal .eyebrow i{background:#744724}
.letter-modal .close{background:#5a3826;color:#fff1d6}
.book-title{background:radial-gradient(ellipse at 38% 22%,#864f37,#593524 54%,#372015);border-color:#e1bd878c;box-shadow:inset -7px 0 12px #27120dad,inset 0 0 12px #f9c67b29;color:#ffeed2}
.book-title::before{border:3px double #ebc18f8f}
.book-title small,.book-title i{color:#f2d4a5}
.page{background:#efdbb0 url(../assets/roman-paper.svg) center/100% 100%;color:#40291c;padding:23px 27px}
.page-no,.page-sign{color:#72482f}

#heart-art{background:url(../assets/heart-still.webp) center/contain no-repeat;filter:drop-shadow(0 0 14px #5fa9ff70)}
.webgl-ready #heart-art{background:none}
.star-art{display:block;position:relative;background:radial-gradient(ellipse,#1b416895,transparent 69%)}
.star-art span,.stars button::before{position:absolute;border-radius:50%;background:radial-gradient(circle,#fff 0%,#e4f7ff 14%,#9ecbffb0 27%,#75b8ff49 42%,transparent 69%);box-shadow:0 0 13px #93c5ff66}
.star-art span::after,.stars button::after{content:"";position:absolute;inset:-45%;background:conic-gradient(from 0deg,transparent 3deg,#d9efffb0 5deg,transparent 8deg,transparent 88deg,#d9efff95 90deg,transparent 92deg,transparent 177deg,#d9efff9f 180deg,transparent 184deg,transparent 267deg,#d9efff95 270deg,transparent 273deg);mask-image:radial-gradient(circle,#000 5%,#0007 35%,transparent 68%)}
.star-art span:nth-child(1){left:41%;top:33%;width:37px;height:37px}
.star-art span:nth-child(2){left:24%;top:60%;width:15px;height:15px}
.star-art span:nth-child(3){left:72%;top:25%;width:13px;height:13px}
.stars button{position:relative}
.stars button::before{content:"";inset:10px}
.stars button::after{inset:5px;opacity:.6}
.stars button[aria-pressed=true]::before{background:radial-gradient(circle,#fff 0%,#fff5c5 18%,#ffce7f9c 32%,transparent 66%)}
.stars button[aria-pressed=true]::after{opacity:1}
.clock-art{perspective:480px}
.clock-face{position:relative;width:121px;aspect-ratio:1;border:7px ridge #c7a46b;border-radius:50%;background:radial-gradient(circle at 34% 28%,#f6ead0,#d8b987 68%,#a57b50);color:#49311f;box-shadow:0 8px 18px #030b1aab,inset 0 0 12px #6d432961;transform:rotateX(9deg) rotateY(-19deg);transition:transform .25s;text-shadow:none}
.clock-art:hover .clock-face{transform:rotateX(0) rotateY(0)}
.clock-ticks{position:absolute;inset:4px;border-radius:50%;background:repeating-conic-gradient(#64482d 0 1deg,transparent 1deg 6deg);mask-image:radial-gradient(transparent 64%,#000 66%)}
.clock-face span:not(.clock-ticks){position:absolute}
.clock-xii,.clock-iii,.clock-vi,.clock-ix{font:700 10px Georgia,serif;letter-spacing:0}
.clock-xii{top:11%;left:50%;translate:-50% 0}.clock-iii{right:11%;top:50%;translate:0 -50%}
.clock-vi{bottom:11%;left:50%;translate:-50% 0}.clock-ix{left:11%;top:50%;translate:0 -50%}
.clock-hour,.clock-minute{left:calc(50% - 2px);bottom:50%;height:27%;width:4px;border-radius:90% 90% 30% 30%;background:#473220;transform-origin:50% 100%;transform:rotate(335.5deg);box-shadow:1px 1px 3px #6d4d31}
.clock-minute{height:38%;width:3px;transform:rotate(66deg);left:calc(50% - 1.5px)}
.clock-pin{left:50%;top:50%;translate:-50% -50%;width:8px;aspect-ratio:1;border-radius:50%;background:#9b6234;border:1px solid #f0c57d}
.rain-art,.rain-window{overflow:hidden;position:relative;border-radius:14px;background:radial-gradient(ellipse at 51% 95%,#396788,#0b2340 72%);box-shadow:inset 0 0 14px #010d1b6e}
.rain-art{transform:none}
.rain-art canvas,.rain-window canvas{position:absolute;inset:0;width:100%;height:100%}
.rain-window{height:106px;margin:12px auto 18px}
.drop{background:radial-gradient(ellipse at 64% 28%,#93d6ff7a,#163859 57%,#061830 78%);box-shadow:inset 2px -4px 9px #73bdff69,0 2px 8px #06192d9e}
.drop[aria-pressed=true]{background:radial-gradient(ellipse at 65% 30%,#e3faff,#84cff7 69%);color:#123653}
@media(max-width:760px){
  .sky-grid{grid-template-columns:1fr}
  .letter-modal{padding:30px 24px}
}
@property --orbit-angle{syntax:"<angle>";inherits:false;initial-value:20deg}
.sun-name{
  left:calc(61.7% + cos(var(--orbit-angle))*16.8%);
  top:calc(29% + sin(var(--orbit-angle))*17.7%);
  --orbit-scale:calc(.95 + sin(var(--orbit-angle))*.14);
  --orbit-light:calc(.83 + sin(var(--orbit-angle))*.15);
  animation:solar-orbit 10s linear infinite;
}
@keyframes solar-orbit{to{--orbit-angle:380deg}}
@media(prefers-reduced-motion:no-preference){
  .surprise.rendered-motion:not(.webgl-ready) #heart-art{background-image:url(../assets/heart-motion.webp)}
}
.sky-grid .chapter-text h2{font-size:clamp(49px,6.2vw,83px)}
.stars{min-height:120px;align-content:center;padding:12px 8px;border-radius:12px;background:radial-gradient(ellipse at 35% 36%,#3d6a9d57,transparent 52%),radial-gradient(ellipse at 70% 65%,#2747746b,#07182e 72%);border:1px solid #8bc5ff36}
.stars button{background:#11284680;border-color:#90c6f942}
@media(max-width:760px){.hero h1{font-size:clamp(29px,10.2vw,71px)}}

.hero-date span,.hero-quote{color:#f6fdff;text-shadow:0 0 8px #c3f3ff,0 0 21px #72c9ff,0 2px 8px #082744}
.hero-quote{font-weight:700}
.sky-grid .chapter-text h2{font-size:clamp(34px,4.7vw,67px)}
.sun-name{
  color:#fffef1;z-index:4;
  --orbit-light:calc(.94 + sin(var(--orbit-angle))*.06);
  text-shadow:0 0 2px #fff,0 0 7px #fff0b1,0 0 15px #ffbd42,0 0 29px #ff861e,0 2px 5px #713808;
  -webkit-text-stroke:.25px #fff6d5;
}
#letter .letter-intro{font-size:clamp(19px,3.3vw,31px);font-family:Display,Arabic,serif;color:#e4effb}
#page-text{white-space:pre-line;margin-block:12px 4px}

/* A single continuous sky behind the foreground. */
body{background:#07162c}
.site-atmosphere{
  position:fixed;inset:0;z-index:0;overflow:hidden;isolation:isolate;
  background:#081c35;pointer-events:none;
}
.world-sky{
  --sun-x:33.333%;--sun-y:25.5%;--orbit-radius-x:13.3%;--orbit-radius-y:18.6%;
  position:absolute;top:50%;left:50%;width:max(calc(100vw + 60px),calc(150svh + 60px));
  aspect-ratio:3/2;transform:translate(-50%,calc(-50% + var(--camera-y,0px)));
  background:#0d2947 url(../assets/sky-still.webp) center/cover no-repeat;
}
#sky-art{border-radius:0}
.world-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#030e2124 0%,#07162936 37%,#030d24b0 76%,#020b20cf 100%),
             linear-gradient(180deg,#03102721 3%,transparent 35%,#06162e59 72%,#040e23cc);
}
#world-rain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;opacity:.76}
.sun-orbit{
  left:calc(var(--sun-x) - var(--orbit-radius-x));top:calc(var(--sun-y) - var(--orbit-radius-y));
  width:calc(2 * var(--orbit-radius-x));height:calc(2 * var(--orbit-radius-y));
  border-color:#ffe2aa64;
}
.sun-name{
  left:calc(var(--sun-x) + cos(var(--orbit-angle))*var(--orbit-radius-x));
  top:calc(var(--sun-y) + sin(var(--orbit-angle))*var(--orbit-radius-y));
}
.sun{
  left:var(--sun-x);top:var(--sun-y);transform:translate(-50%,-50%);
  pointer-events:none;visibility:hidden;
}
.sun.sun-active{pointer-events:auto;visibility:visible}
.sun:hover,.sun:focus-visible{box-shadow:0 0 34px 10px #ffc87d88}
main,footer{position:relative;z-index:1;pointer-events:none}
main :is(a,button,h1,h2,h3,p),footer :is(a,p){pointer-events:auto}
.top{
  background:linear-gradient(180deg,#071426c7,#0b1c34a3);
  border-color:#d1efff24;
}
.hero{background:transparent;border:0}
.hero-video{
  opacity:.34;mask-image:linear-gradient(90deg,transparent 0%,#0004 22%,#000 58%);
}
.hero-shade{
  background:linear-gradient(180deg,#07132635 10%,#081a2e32 37%,#081b35c2 100%),
             radial-gradient(ellipse at 51% 64%,#06162b81,transparent 70%);
}
.hero-date{background:#112d486b;backdrop-filter:blur(7px)}
.sky-band,.sky-band::before,.book-band,.mail-band,.surprise-band,
.chapter[id=letter]{background:none;border:0}
.sky-band::before{content:none}
.sky-grid{display:flex;min-height:76svh;justify-content:flex-start;padding-block:85px 95px}
.sky-grid .chapter-text{width:min(100%,490px)}
.sky-grid .chapter-text h2{font-size:clamp(45px,6vw,88px);margin-block:0 21px}
#letter,#book .chapter{min-height:65svh}
.chapter h2,.chapter-wide h2,.sky-grid h2,footer p{text-shadow:0 3px 25px #020d22e6}
.object-caption{padding:5px 14px;border:1px solid #c0e6ff4d;border-radius:99px;background:#081b30d9;color:#edf8ff;text-shadow:0 1px 7px #051025}
.section-heading{margin-bottom:32px}
.surprise,.mail-card,.photo-card{
  border-color:#d1eaff4d;
  background:linear-gradient(142deg,#284e747d,#0b2037dd 70%);
  box-shadow:0 14px 36px #030b1e57,inset 0 1px 0 #d9efff32;
  backdrop-filter:blur(10px);
}
.photo-card img{background:#08182a9c}
.photo-card:hover,.mail-card:hover,.surprise:hover{border-color:#c7e9ff95}
.surprise h3,.mail-title{color:#f3faff;text-shadow:0 2px 12px #051021c9}
footer{
  border-top:1px solid #c1e4ff34;
  background:linear-gradient(180deg,#08182f21,#040e23bb);
}
.modal::backdrop{background:#020b1ca3;backdrop-filter:blur(4px)}
@media(prefers-reduced-motion:no-preference){
  .world-sky.rendered-motion:not(.webgl-ready){background-image:url(../assets/sky-motion.webp)}
}
@media(max-width:760px){
  .world-sky{left:calc(50% + 21svh);--orbit-radius-x:9.6%;--orbit-radius-y:17.5%}
  .world-veil{background:linear-gradient(180deg,#06182c12 0%,#06162d22 28%,#06172d7e 60%,#040e23cc 100%)}
  .hero-video{opacity:.29;mask-image:linear-gradient(180deg,transparent 0%,#0006 25%,#000 62%)}
  .hero-shade{background:linear-gradient(180deg,#03102344,transparent 35%,#06172cb3)}
  .sky-grid{min-height:78svh;align-items:flex-end;padding-block:60px 80px}
  .sky-grid .chapter-text h2{font-size:clamp(40px,9vw,66px)}
  #letter,#book .chapter{min-height:0}
}

/* Finishing treatments for the continuous-sky composition. */
@font-face{
  font-family:NoorCalligraphy;
  src:url(../assets/noor-calligraphy.woff) format("woff");
  font-weight:700;
  font-display:swap;
}
:root{
  --gold:#e4bc81;--pale-gold:#ffedc8;--gold-line:#e9bc7a63;
  --glass-navy:#08182ee8;--header-height:68px;
}
html{scroll-padding-top:calc(var(--header-height) + 15px)}
.wrap{width:min(1160px,calc(100% - 88px))}
.top{
  position:fixed;height:var(--header-height);
  display:grid;grid-template-columns:1fr auto 1fr;gap:18px;
  padding-inline:clamp(22px,4.5vw,72px);
  background:linear-gradient(180deg,#060f20ed,#0b1a2ec4);
  border-bottom:1px solid #ebc88d38;box-shadow:0 12px 35px #02081555;
  backdrop-filter:blur(18px);
}
.brand{justify-self:start}
.brand small{color:var(--pale-gold)}
.brand-mark{
  width:34px;height:34px;color:var(--pale-gold);
  border-color:var(--gold-line);background:#e9bd7e13;
  box-shadow:inset 0 0 13px #e9bb8131,0 0 21px #dfaf5e26;
}
.top nav{gap:clamp(10px,2.25vw,32px);align-items:center}
.top nav a{
  display:block;position:relative;padding:8px 0;
  color:#e1eaf8;white-space:nowrap;font-size:12px;
}
.top nav a[aria-current="location"],.top nav a:hover{color:var(--pale-gold)}
.top nav a[aria-current="location"]::after{
  content:"";position:absolute;inset:auto 22% 2px;height:1px;background:var(--gold);
  box-shadow:0 0 8px var(--gold);
}
.audio{justify-self:end;border-color:var(--gold-line);background:#122740c2;color:#ffeac2}
.audio[aria-pressed=true]{border-color:#eccd94a8;background:#493a3059}
.primary,.hero-copy .primary{
  min-height:49px;padding-inline:23px;
  border-color:#ffedc8;background:linear-gradient(145deg,#fff5de,#e3bd83);
  color:#2b1c18;font-weight:700;
  box-shadow:0 7px 31px #020a1d95,0 0 19px #e8b77a42,inset 0 1px 1px #fff;
}
.primary:hover,.hero-copy .primary:hover{background:linear-gradient(145deg,#fff9e9,#efd2a5)}
.hero-copy{width:min(96%,1120px);gap:17px;padding-bottom:clamp(78px,12vh,130px)}
.hero h1{
  font-size:clamp(34px,8.4vw,119px);color:#fff6e8;line-height:1.12;
  text-shadow:0 4px 24px #040a17,0 0 29px #e2b46a7d;
}
.hero-date{
  padding:7px 16px;gap:13px;
  border-color:var(--gold-line);background:#081426b8;
  box-shadow:inset 0 1px 0 #f8d2942b,0 8px 25px #07101fa8;
}
.hero-date span{color:#ffedcb;text-shadow:0 0 12px #ffe1a280}
.hero-date bdi{
  font-family:Georgia,serif;letter-spacing:.06em;color:#fff1d3;
  text-shadow:0 0 11px #ffcc8e91,0 0 24px #e6a96872;
  padding-left:12px;border-left:1px solid var(--gold-line);
}
.hero-quote{color:#f5f3ee;text-shadow:0 2px 10px #030b1b,0 0 13px #bad8ff80}
.world-veil{
  background:linear-gradient(90deg,#060e2126,#07162b27 35%,#060d22ba 79%,#02091cdb),
             linear-gradient(180deg,#030c2024 3%,transparent 40%,#06162d54 70%,#040e21c4);
}
.sun-orbit{border-color:#f3cc897a;box-shadow:0 0 18px #ffce7522,inset 0 0 12px #ffce7519}
.sun-name{
  font:700 clamp(31px,5.1vw,76px)/1.55 NoorCalligraphy,Display,serif;
  color:#fff7d7;-webkit-text-stroke:.35px #8f541b;
  text-shadow:0 2px 5px #452307,0 0 11px #ffdf83,0 0 27px #ff9d25ac;
}
.chapter,.chapter-wide{padding-block:clamp(54px,7.1vw,104px)}
.sky-grid{min-height:77svh;padding-block:80px}
.chapter h2,.chapter-wide h2,.sky-grid h2{
  color:#fff4e5;text-shadow:0 4px 18px #020819,0 0 24px #000a;
  text-wrap:balance;
}
.chapter-text .eyebrow,.section-heading .eyebrow{color:#f7d89c}
.eyebrow i{background:var(--gold);box-shadow:0 0 13px #ffd9929c}
#letter .letter-intro{color:#f0dec7}
#letter,#book .chapter{
  position:relative;min-height:58svh;gap:clamp(25px,5vw,82px);
}
#letter .chapter-text,#book .chapter-text{
  padding:clamp(22px,4vw,51px);
  border:1px solid #e9c78a3d;border-radius:21px;
  background:linear-gradient(142deg,#0e233be8,#0a1626ab);
  box-shadow:0 16px 52px #02081960,inset 0 1px #ffdf9822;
  backdrop-filter:blur(11px);
}
#letter .chapter-text h2,#book .chapter-text h2{margin-top:0}
.envelope,.book-object{filter:drop-shadow(0 0 14px #f5cc9138)}
.object-caption{border-color:var(--gold-line);color:#ffedcf}
.section-heading{
  margin:0 0 clamp(23px,3.5vw,45px);padding-bottom:clamp(11px,2vw,20px);
  border-bottom:1px solid #edcd9950;position:relative;
}
.section-heading::after{
  content:"";position:absolute;bottom:-1px;inset-inline-start:0;width:56px;height:1px;
  background:#eccb94;box-shadow:0 0 8px #f8ce8b77;
}
.section-heading h2{margin-block:8px 0}
.photo-grid,.mail-grid,.surprise-grid{gap:clamp(12px,1.8vw,22px)}
.photo-card,.mail-card,.surprise{
  border-color:#e0c18a54;border-radius:18px;
  background:linear-gradient(151deg,#18304dd9,#09172ae8 76%);
  box-shadow:0 15px 38px #02081776,inset 0 1px 0 #ffe0aa27;
}
.photo-card:hover,.mail-card:hover,.surprise:hover{border-color:#f1d097bb}
.photo-card{padding:9px}
.photo-card img{border-radius:11px;background:#040d1ddb}
.mail-card{min-height:158px}
.mail-icon,.mail-total{color:#f6dcaf}
.mail-icon{text-shadow:0 0 17px #ebb77f7d}
.surprise-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.surprise{grid-column:span 2;padding:22px 14px 25px}
.surprise:nth-last-child(-n+2){grid-column:span 3}
.surprise .badge{color:#f5d599}
.surprise .pill{border-color:var(--gold-line);background:#122742;color:#ffedce}
.surprise .pill:hover{background:#2b3f56}
footer{
  padding:45px 0 55px;border-color:#e9c68742;
  background:linear-gradient(180deg,#09162c7a,#040b1ce8);
}
footer .wrap{justify-content:center;flex-direction:column;gap:7px;text-align:center}
footer p{font-size:clamp(24px,4vw,41px);color:#ffedcf}
footer span{color:#eed7b4}
footer a{margin-top:9px;padding:6px 14px;border-radius:99px;border:1px solid var(--gold-line)}
.reader,.lightbox,.little-modal{border-color:#e4bc818c;box-shadow:0 24px 82px #020719d9,inset 0 1px 0 #ffe1a92c}
.page{line-height:2}
@media(max-width:760px){
  :root{--header-height:95px}
  .wrap{width:calc(100% - 34px)}
  .top{grid-template-columns:1fr 1fr;grid-template-rows:51px 37px;column-gap:10px;row-gap:0;padding-inline:17px}
  .top nav{
    display:flex;grid-row:2;grid-column:1/-1;
    justify-content:space-between;gap:12px;
    overflow-x:auto;scrollbar-width:none;padding-inline:2px;
  }
  .top nav a{font-size:11px}
  .audio{grid-row:1;grid-column:2;min-height:34px;font-size:11px;padding:4px 12px}
  .brand{grid-row:1;grid-column:1}
  .brand-mark{width:30px;height:30px}
  .world-veil{background:linear-gradient(180deg,#06172b14,#0716292e 34%,#07142b82 65%,#040d21db)}
  .hero-copy{gap:14px;padding-bottom:83px}
  .hero h1{font-size:clamp(29px,10.3vw,72px)}
  .sun-name{font-size:clamp(26px,9vw,50px)}
  .sky-grid{min-height:77svh;padding-block:50px 65px}
  #letter,#book .chapter{min-height:auto;gap:22px}
  #letter .chapter-text,#book .chapter-text{padding:21px;border-radius:17px}
  .section-heading{margin-bottom:17px}
  .photo-card{padding:6px}
  .photo-card img{border-radius:9px}
  .mail-card{min-height:132px}
  .surprise-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .surprise,.surprise:nth-last-child(-n+2){grid-column:auto;padding:18px 9px}
  .surprise:last-child{grid-column:1/-1}
  .surprise h3{font-size:21px}
  .surprise .pill{font-size:11px;padding-inline:10px}
  .surprise-art,#heart-art{height:112px}
  .clock-face{width:91px}
}
.world-sky{--orbit-center-y:calc(var(--sun-y) + 1.5%);--orbit-radius-y:16%}
.sun-orbit{top:calc(var(--orbit-center-y) - var(--orbit-radius-y))}
.sun-name{top:calc(var(--orbit-center-y) + sin(var(--orbit-angle))*var(--orbit-radius-y))}
.hero-video{
  mask-image:radial-gradient(ellipse 31% 34% at 34% 25%,transparent 48%,#000 100%),
             linear-gradient(90deg,transparent 0%,#0004 22%,#000 58%);
  mask-composite:intersect;
}
@media(max-width:760px){
  .world-sky{--orbit-center-y:calc(var(--sun-y) + 4%);--orbit-radius-y:14%}
  .hero-video{
    mask-image:radial-gradient(ellipse 55% 37% at 44% 25%,transparent 48%,#000 100%),
               linear-gradient(180deg,transparent 0%,#0006 25%,#000 62%);
  }
}

/* Handwritten notes share the same aged stationery and blue ink. */
@font-face{
  font-family:PenScript;
  src:url(../assets/aref-ruqaa-regular.ttf) format("truetype");
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:MohammedSignature;
  src:url(../assets/mohammed-signature.woff) format("woff");
  font-weight:700;
  font-display:swap;
}
.ink-paper{
  --ballpoint:#142d64;
  color:var(--ballpoint);
  border:1px solid #8f603b9e;
  border-radius:10px 7px 14px 8px / 8px 14px 9px 11px;
  background:#efdcb3 url(../assets/aged-paper.svg) center/100% 100% no-repeat;
  box-shadow:0 14px 35px #04081869,inset 0 0 16px #713d2440,inset 0 0 2px #7d4820b8;
}
.ink-paper p{
  color:var(--ballpoint);
  font:400 clamp(22px,2.55vw,28px)/1.48 PenScript,Arabic,serif;
  font-synthesis:none;
  text-shadow:.16px .24px #293e7145;
  word-spacing:.04em;
}
.letter-modal.ink-paper{
  padding:clamp(27px,5vw,50px);
  box-shadow:0 20px 80px #020614dd,inset 0 0 30px #78412250;
}
.letter-modal.ink-paper h2{
  color:var(--ballpoint);
  font:400 clamp(37px,6vw,54px)/1.15 PenScript,Arabic,serif;
  margin-top:8px;
}
.letter-modal.ink-paper .close{background:#65442e;color:#fff3d5}
.letter-modal.ink-paper p+p:not(.paper-signoff){margin-top:10px}
.envelope-paper{
  background:#efdcb3 url(../assets/aged-paper.svg) center/100% 100%;
  color:#142d64;font-family:PenScript,Arabic,serif;font-weight:400;
}
.note-sheet{
  padding:clamp(18px,4vw,34px);
  margin-block:12px 5px;
  text-align:start;
}
.note-sheet .message-copy{min-height:0}
.page.ink-paper{padding:clamp(19px,4vw,33px)}
.page-no{color:#775839}
#page-text{margin-block:10px 5px}
.ink-paper .paper-signoff{
  margin:9px 0 0;
  text-align:left;
  color:var(--ballpoint);
  font:400 clamp(17px,2.25vw,22px)/1.5 PenScript,Arabic,serif;
}
.paper-signoff .pen-signature{
  display:inline-block;position:relative;
  margin-inline-start:.26em;padding:.12em .14em .25em;
  font:700 clamp(25px,4.25vw,42px)/1.25 MohammedSignature,PenScript,serif;
  color:#162d69;transform:rotate(-7deg);
  text-shadow:.45px .3px #233a6c65;
}
.pen-signature::after{
  content:"";position:absolute;inset:auto -8% 7%;height:.22em;
  border-bottom:1.4px solid #20366da6;border-radius:0 0 48% 36%;
  transform:rotate(-4deg);pointer-events:none;
}
@media(max-width:430px){
  .ink-paper p{font-size:23px;line-height:1.49}
  .ink-paper .paper-signoff{font-size:17px}
  .letter-modal.ink-paper{padding:26px 21px}
  .note-sheet,.page.ink-paper{padding:17px 16px}
}


.ink-filter{position:absolute;pointer-events:none}
.handwritten-copy{
  white-space:pre-line;
  filter:url(#pen-pressure);
}
.pen-word{
  display:inline-block;
  opacity:var(--pen-weight,1);
  transform:translateY(var(--pen-rise,0px)) rotate(var(--pen-tilt,0deg)) scaleX(var(--pen-width,1));
}

.ending-video{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  block-size:100vh;
  block-size:100svh;
  scroll-margin-top:calc(0px - var(--header-height) - 15px);
  background:#080e18;
}
.ending-video::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-20px;
  background:linear-gradient(#05091570,#050915bd),url(../assets/ending-poster.webp) center/cover;
  filter:blur(20px);
}
.ending-video video{
  display:block;
  inline-size:100%;
  block-size:100%;
  object-fit:contain;
  pointer-events:auto;
}

.final-letter{
  display:grid;
  justify-items:center;
  padding-block:clamp(64px,11vw,145px);
}
.final-letter-panel{
  position:relative;
  isolation:isolate;
  width:min(100%,630px);
  padding:clamp(28px,6vw,60px) clamp(21px,5vw,46px);
  text-align:center;
  border:1px solid #dcb87a69;
  border-radius:24px;
  background:radial-gradient(ellipse at 50% 0,#6a493045,transparent 52%),linear-gradient(150deg,#142742f0,#081321f5);
  box-shadow:0 24px 62px #020813a6,inset 0 1px #ffdc9f38;
}
.final-letter-panel::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:8px;
  border:1px solid #ffe1ac25;
  border-radius:17px;
}
.final-letter-panel .eyebrow{justify-content:center;color:#f6d79e}
.final-letter-panel h2{margin:.22em 0 .12em;font-size:clamp(43px,7vw,78px);color:#fff1da}
.final-letter-panel p{color:#e6e0d6;margin:0 0 24px}
.final-letter-emblem{
  display:grid;
  place-items:center;
  width:81px;
  aspect-ratio:1;
  margin:0 auto 17px;
  border:1px solid #f0c78388;
  border-radius:50%;
  background:radial-gradient(circle at 35% 22%,#59453a,#19263c 70%);
  color:#f5d499;
  box-shadow:0 0 27px #efbe6447,inset 0 0 15px #eec17c32;
}
.final-letter-emblem svg{width:40px;height:49px;transform:rotate(-14deg)}
.final-letter-dialog .fingerprint-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:18px 0 12px;
}
.fingerprint{
  display:grid;
  justify-items:center;
  gap:4px;
  padding:10px 4px;
  border:1px solid #6d4d4070;
  border-radius:9px;
  color:#2a4385;
  font:400 clamp(18px,3vw,24px)/1.3 PenScript,Arabic,serif;
  background:#fff8e240;
}
.fingerprint svg{width:47px;height:56px;transform:rotate(-11deg)}
.fingerprint-noor{border-style:dashed;color:#594979}
.fingerprint-noor svg{opacity:.23;transform:rotate(12deg)}
.fingerprint-pair[data-stamped=true] .fingerprint-noor{border-style:solid;background:#614b9810}
.fingerprint-pair[data-stamped=true] .fingerprint-noor svg{opacity:1}
.stamp-placed .fingerprint-noor svg{animation:stamp-ink .56s cubic-bezier(.2,.72,.21,1) both}
@keyframes stamp-ink{
  0%{opacity:.23;transform:rotate(8deg) scale(1.36)}
  60%{opacity:1;transform:rotate(12deg) scale(.94)}
  100%{opacity:1;transform:rotate(12deg) scale(1)}
}
.fingerprint-action{display:grid;justify-items:center;gap:7px;text-align:center}
.fingerprint-action button{
  min-height:44px;
  padding:7px 17px;
  border:1px solid #544364;
  border-radius:99px;
  background:#282b52;
  color:#fff3d5;
  font-size:14px;
}
.fingerprint-action button:hover{background:#373862}
.fingerprint-action button[aria-disabled=true]{background:#f6e8c2;color:#332758;cursor:default}
.fingerprint-action small{color:#513c33;font-size:11px}
@media(prefers-reduced-motion:reduce){.stamp-placed .fingerprint-noor svg{animation:none}}