@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/body-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/body-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/body-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/hand-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/hand-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/hand-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Embedded in the standalone preview and served locally on Cloudflare. */
:root{--ink:#132d50;--muted:#466582;--blue:#1d4b7b;--blue-dark:#15395f;--line:#284d752b;--paper:#fffdf7;--light:#edf5fa;--script:'Dancing Script',cursive;--hand:'Patrick Hand',cursive;color:var(--ink);background:#edf5fa;font-family:var(--hand);font-size:19px;color-scheme:light;overflow-x:clip}
*{box-sizing:border-box}
body{margin:0;min-width:280px}
body::after{position:fixed;inset:0 0 auto;height:100%;content:"";z-index:-1;pointer-events:none;background:linear-gradient(to bottom,#f8fbfd 0%,#f6fafcfa 22%,#f3f8fbde 47%,#e8f4f97d 70%,#c8dfea48 100%),url('assets/cong-truong.webp') center 84%/cover no-repeat;opacity:.83;mask-image:linear-gradient(to right,transparent,#000 13%,#000 87%,transparent)}
body:has(.garden:not([hidden]))::after{opacity:.69}
body:has(.letter:not([hidden]),.memories:not([hidden]))::after{opacity:.62}
body::before{position:fixed;inset:0;content:"";z-index:-2;background:linear-gradient(180deg,#f7fbff20,transparent 30%,#cfe4f033),url('assets/garden.webp') center bottom/cover no-repeat,#edf5fa}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,[tabindex="0"]:focus-visible{outline:3px solid #ae7438;outline-offset:4px}
button:disabled{opacity:.38;cursor:default}
h1,h2,p{margin:0}
h1,h2{font-family:var(--script);font-weight:700;line-height:1.04;text-wrap:balance}
h1:focus,h2:focus{outline:none}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.masthead{position:relative;z-index:3;margin:0 clamp(20px,5vw,84px);min-height:84px;display:flex;justify-content:space-between;align-items:center;gap:14px;border-bottom:1px solid var(--line)}
.brand{display:flex;gap:12px;align-items:center;text-align:left;background:none;border:0;padding:0}
.brand img{width:50px;height:50px;object-fit:cover;border-radius:50%;border:1px solid #17385d40;box-shadow:0 0 0 3px #fff9}
.brand strong,.brand small{display:block;line-height:1.05}
.brand strong{font:700 27px/1 var(--script)}
.brand small{font-size:15px;color:var(--muted);margin-top:4px}
nav{display:flex;align-items:center;gap:clamp(12px,3vw,42px)}
nav button{border:0;border-bottom:1px solid transparent;background:none;padding:8px 0;white-space:nowrap}
nav button:hover,nav button[aria-current="page"]{border-color:#35648b}
nav .firework-nav{background:#f6faffdf;border:1px solid #335c8545;border-radius:999px;padding:7px 12px;white-space:nowrap;color:#1d466d}
.firework-nav span{color:#9b622d}
.screen{min-height:calc(100svh - 84px);padding:28px clamp(18px,5vw,84px) 28px;animation:entrance .42s ease both}
@keyframes entrance{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.home{display:grid;grid-template-columns:1.04fr .96fr;align-items:center;max-width:1540px;margin:auto;gap:4%;padding-bottom:clamp(44px,12vh,125px)}
.cover-copy{padding-left:clamp(0px,3vw,44px);position:relative;z-index:1}
.edition{font-size:clamp(18px,2vw,23px);color:#456784;display:flex;gap:10px;align-items:center;line-height:1.18}
.edition span{display:inline-block;width:29px;height:1px;background:#547c9e;flex:none}
.home h1{font-size:clamp(61px,7.3vw,113px);margin:15px 0 16px}
.home h1 em{display:block;font-style:normal;color:#2f6797}
.occasion{font:700 clamp(28px,3.1vw,47px)/1.14 var(--script)}
.intro{font-size:clamp(19px,2vw,24px);color:var(--muted);margin:12px 0 25px}
.pill{border-radius:999px;min-height:45px;padding:9px 22px;display:inline-flex;align-items:center;justify-content:center;gap:12px;line-height:1.1;border:1px solid transparent;white-space:nowrap;transition:background .2s,transform .2s,box-shadow .2s}
.pill:hover:not(:disabled),.circle:hover:not(:disabled){transform:translateY(-2px)}
.pill span{font-size:1.25em;line-height:.75}
.primary{background:var(--blue-dark);color:#fff9e8;box-shadow:0 8px 22px #183a6435}
.primary:hover:not(:disabled){background:#23517c}
.subtle{background:#fbfcf7de;border-color:#335c8535;color:#213f63}
.circle{width:44px;height:44px;border-radius:50%;padding:0;display:grid;place-items:center;border:1px solid #35608640;background:#fbfff5ec;font:35px/1 var(--hand);transition:transform .2s,background .2s}
.circle:hover:not(:disabled){background:#fff}
.cover-art{position:relative;width:100%;margin:auto;min-height:355px;display:grid;place-items:center;isolation:isolate}
.cover-art::before{content:"";position:absolute;width:84%;aspect-ratio:1;z-index:-1;border-radius:50%;background:radial-gradient(circle,#fef9ddc9 0%,#f4f6eb44 58%,transparent 70%)}
.envelope{width:min(92%,423px);aspect-ratio:1.48;position:relative;transform:rotate(-8deg) translateY(25px);border-radius:6px;filter:drop-shadow(0 21px 17px #16355e45);margin:auto}
.envelope::before{position:absolute;inset:0;content:"";background:#9fbed7;border-radius:6px}
.letter-peek{position:absolute;display:grid;align-content:start;justify-items:center;inset:-26% 11% 19% 10%;padding:10% 1% 0;background:repeating-linear-gradient(0deg,transparent 0 24px,#a7bed125 24px 25px),#fffdf5;border:1px solid #b9cbdc;transform:rotate(15deg);box-shadow:0 8px 20px #18395e26;border-radius:3px;text-align:center;color:#3b6085}
.letter-peek span{font:700 clamp(25px,4vw,48px)/1.1 var(--script)}
.letter-peek i{width:37%;height:11px;border-bottom:1px solid #8e5e36;border-radius:50%}
.envelope-body,.envelope-flap{position:absolute;inset:0;border-radius:6px}
.envelope-body{background:linear-gradient(33deg,#769fc2,#c1d9ea);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.envelope-body::after{content:"";position:absolute;inset:0;background:linear-gradient(35deg,#b9d3e7,#e4eef3);clip-path:polygon(0 100%,50% 41%,100% 100%)}
.envelope-flap{clip-path:polygon(0 0,100% 0,51% 66%);background:linear-gradient(156deg,#d4e4ef,#a4c1d9 72%,#7e9db8)}
.seal{position:absolute;top:48%;left:50%;width:22%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-12%);background:#194c79;box-shadow:0 4px 10px #15395480,inset 0 0 0 3px #7fa6c9;border:2px solid #234c77}
.seal img{width:78%;height:78%;border-radius:50%;object-fit:cover}
.glint{position:absolute;color:#856844;font-family:serif;font-size:31px}
.glint-one{top:5%;right:12%}.glint-two{bottom:12%;right:4%;color:#527b9a}.glint-three{top:20%;left:4%;font-size:18px}
.section-heading{text-align:center;position:relative;z-index:1}
.section-heading .edition{justify-content:center;margin-bottom:7px}
.section-heading h2{font-size:clamp(54px,7.8vw,90px);margin-bottom:7px}
.section-heading>p:last-child{font-size:clamp(18px,2vw,23px);color:var(--muted);line-height:1.15;max-width:36ch;margin:0 auto}
.garden,.memories{display:flex;flex-direction:column;align-items:center;justify-content:center}
.portrait-deck{height:clamp(280px,47vh,490px);width:min(100%,1280px);position:relative;overflow:hidden;touch-action:pan-y pinch-zoom;isolation:isolate;margin:5px auto 8px;mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%)}
.portrait-deck::before{position:absolute;content:"";inset:10px 0 70px;background:radial-gradient(ellipse at 50% 62%,#fffbe4b0,transparent 59%);pointer-events:none}
#portrait-deck,#letter-stage,.filmstrip,.teacher-card{cursor:grab;user-select:none;-webkit-user-select:none}
#portrait-deck.dragging,#letter-stage.dragging,.filmstrip.dragging,#portrait-deck.dragging *,.filmstrip.dragging *{cursor:grabbing}
.teacher-card{position:absolute;left:50%;bottom:0;width:clamp(145px,20.8%,300px);height:96%;display:flex;align-items:center;justify-content:end;flex-direction:column;transform:translate3d(calc(-50% + var(--card-x,0px)),0,0) scale(var(--card-scale,1));transform-origin:center bottom;transition:transform .23s cubic-bezier(.2,.7,.2,1),opacity .23s ease;opacity:var(--card-alpha,1);background:none;border:0;padding:0;white-space:normal}
.portrait-deck.dragging .teacher-card{transition:none}
.teacher-card:hover{opacity:1}
.teacher-card img,.teacher-card .photo-placeholder{display:block;object-fit:contain;object-position:50% 100%;width:100%;height:calc(100% - 78px);min-height:0;filter:drop-shadow(0 7px 12px #133e663a)}
.teacher-card .photo-placeholder{display:grid;place-items:center}
.photo-placeholder .small-envelope{font:70px/1 var(--hand);color:#446c91;background:#e0ecf6;box-shadow:inset 0 0 0 2px #7fa9c77d,0 9px 32px #25538126;border-radius:24px;width:130px;height:110px;display:grid;place-items:center}
.teacher-label{position:relative;display:grid;align-content:center;justify-items:center;background:#fffdf5ed;border:1px solid #557b9b40;box-shadow:0 5px 13px #1839601c;border-radius:14px;padding:6px 8px;width:100%;height:78px;flex:none}
.teacher-label strong{font:700 clamp(20px,2.12vw,31px)/1.03 var(--script)}
.teacher-label small{font-size:15px;color:var(--muted);line-height:1.14}
.garden-actions,.letter-actions,.memory-actions,.letter-top{display:flex;gap:13px;align-items:center;justify-content:center}

.letter{max-width:1210px;margin:auto}
.letter-top{justify-content:space-between;margin:0 auto 12px;max-width:1090px}
.swipe-hint{background:#fffdf1e5;border-radius:30px;padding:7px 13px;color:#3c5b78;text-align:center;font-size:17px}
.letter-stage{touch-action:pan-y pinch-zoom;overflow:hidden;border-radius:9px;box-shadow:0 14px 30px #15355526}
.letter-sheet{transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.letter-stage.dragging .letter-sheet{transition:none}
#next-letter-label{font-size:1em;line-height:1.1}
.letter-sheet{position:relative;display:grid;grid-template-columns:minmax(200px,30%) 1fr;gap:clamp(16px,3vw,40px);background:linear-gradient(100deg,#eaf2f7ec,#fffdf6 39%);border:1px solid #7795af6e;box-shadow:0 14px 30px #15355526;border-radius:8px;overflow:hidden;padding:clamp(17px,4vw,44px);min-height:400px}
.letter-photo{position:relative;display:grid;place-items:end center;min-width:0;isolation:isolate;align-self:center}
.letter-photo::before{content:"";position:absolute;inset:14% 5% 5%;border-radius:50% 50% 16% 16%;background:radial-gradient(ellipse at 50% 30%,#fcf9e7,#bdd6e7d9 66%,#c8deee11);z-index:-1}
.letter-photo img,.letter-photo .photo-placeholder{width:100%;height:clamp(250px,40vh,400px);object-fit:contain;object-position:bottom;filter:drop-shadow(0 5px 9px #2e567a33)}
.letter-photo .photo-placeholder{display:grid;place-items:center}
.letter-copy{position:relative;min-width:0;padding-bottom:3px}
.letter-copy h2{font-size:clamp(40px,5.5vw,72px);margin:7px 0 12px;text-wrap:pretty}
#letter-body{font-size:clamp(20px,2vw,25px);line-height:1.36;overflow-wrap:break-word}
#letter-body p+p{margin-top:.55em}
.signature{margin-top:15px;font:600 25px/1.16 var(--script);color:#28567d}
.signature strong{font-size:1.16em}
.letter-actions{margin-top:15px}

.filmstrip{position:relative;display:flex;align-items:stretch;overflow:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;width:min(100%,1150px);gap:13px;padding:22px 15px;margin:24px 0 17px;background:#1b4067;border-radius:8px;box-shadow:0 14px 28px #203d5c4d;background-image:repeating-linear-gradient(90deg,#f1edce 0px 10px,transparent 10px 27px),repeating-linear-gradient(90deg,#f1edce 0px 10px,transparent 10px 27px);background-size:auto 6px;background-repeat:repeat-x;background-position:0 6px,0 calc(100% - 6px);scrollbar-width:none}
.filmstrip::-webkit-scrollbar{display:none}
.memory{flex:0 0 32%;height:clamp(170px,41vh,440px);scroll-snap-align:start;display:grid;place-items:center;background:#b0c8db;border:1px solid #c6e0f1;min-width:0;padding:0;overflow:hidden}
.memory img{width:100%;height:100%;object-fit:contain;min-height:0}
.memory:hover img{filter:brightness(1.05)}
.memory{cursor:inherit}
.filmstrip{scroll-padding-inline:15px;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior-x:contain}
.filmstrip.dragging{scroll-snap-type:none;scroll-behavior:auto}
.final-copy{display:none;position:absolute;top:40%;left:4%;right:4%;color:#fff0c5;text-align:center;font-family:Arial,sans-serif}
.final-copy.visible{display:grid;gap:.65em}
.final-copy strong{font-size:clamp(26px,5vw,65px)}
.final-copy span{font-size:clamp(18px,3vw,37px)}
dialog{padding:0;border:none;max-width:min(92vw,1150px);max-height:89svh;background:#13263e;border-radius:8px;overflow:hidden}
dialog::backdrop{background:#071b31de}
dialog>img{display:block;max-width:100%;max-height:89svh;object-fit:contain}
.lightbox-close{position:absolute;right:7px;top:7px}
.finale{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 47%,#081327,#020407 64%,#010102);isolation:isolate;animation:none;min-height:100svh;z-index:5;display:grid;place-items:center;margin:0;padding:0;overflow:hidden}
#sparks{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen}
.final-controls{position:absolute;flex-wrap:wrap;bottom:clamp(18px,5vh,52px);left:0;right:0;display:flex;gap:10px;justify-content:center;padding:0 10px}
.final-button{color:#fff3cb;background:#0b1e38db;border-color:#d1b87d66}
.final-button:hover{background:#233b5c}
@media(max-width:760px){
 .masthead{min-height:68px;margin-inline:15px;gap:9px}
 .brand{gap:7px}.brand img{width:41px;height:41px}.brand strong{font-size:25px}.brand small{font-size:13px}
 nav{font-size:16px;gap:10px}
 nav .firework-nav{padding:6px 8px}
 .firework-nav span{display:none}
 body::after{background:linear-gradient(to bottom,#f7fbfd 2%,#f7fbfbbd 34%,#d4e9f42b 75%,#d3e8f45e),url('assets/cong-truong.webp') center bottom/auto clamp(245px,45svh,440px) no-repeat;mask-image:linear-gradient(to bottom,transparent 44%,#000 61%);opacity:.84}
 .home{isolation:isolate}
 .cover-copy{border-radius:24%;background:radial-gradient(ellipse,#f7fbffdf,transparent 73%)}
 .screen{min-height:calc(100svh - 68px);padding:19px 13px 23px}
 .home{display:flex;flex-direction:column;justify-content:center;gap:0;text-align:center;padding-top:clamp(21px,5vh,54px)}
 .cover-copy{padding:0}.cover-copy .edition{justify-content:center}.home h1{font-size:clamp(47px,11vw,70px);margin:9px 0 10px}
 .occasion{font-size:clamp(28px,7vw,42px)}.intro{margin:8px auto 14px;font-size:18px;max-width:30ch}
 .cover-art{max-width:355px;min-height:0;height:clamp(170px,31vh,260px);margin:22px auto 0}
 .envelope{width:min(67%,239px);transform:rotate(-8deg) translateY(23px)}
 .letter-peek span{font-size:clamp(22px,6vw,34px)}
 .glint-one{right:12%;top:10%}.glint-two{right:6%;bottom:22%}.glint-three{left:10%;top:19%}
 .garden,.memories{justify-content:flex-start;padding-top:clamp(24px,5vh,60px)}
 .portrait-deck{width:calc(100% + 26px);height:clamp(270px,49svh,460px);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);margin:12px -13px}
 .teacher-card{width:min(67%,284px)}
 .teacher-label strong{font-size:clamp(23px,5.9vw,32px)}
 .letter-top{margin-bottom:8px}.letter-top .pill{padding-inline:10px}
 .letter-sheet{grid-template-columns:1fr;padding:12px 15px 17px;gap:3px;background:linear-gradient(#dfedf5f2,#fffdf6 37%)}
 .letter-photo{width:100%;margin:auto}.letter-photo img,.letter-photo .photo-placeholder{height:clamp(130px,24svh,220px);max-width:245px}
 .letter-photo::before{inset:9% 25% 3%}
 .letter-copy h2{margin:5px 0 10px}.letter-copy .edition{font-size:18px}
 #letter-body{font-size:21px}
 .filmstrip{max-width:445px;margin-top:20px;gap:9px}
 .memory{flex:0 0 86%;height:clamp(220px,49svh,410px)}
 .memory img{height:100%;width:100%}
}
@media(max-width:385px){.brand small{display:none}nav{gap:8px;font-size:15px}.home h1{font-size:43px}.pill{padding-inline:15px}.letter-actions{gap:7px}.swipe-hint{padding-inline:7px;font-size:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media(min-width:761px){
 .home h1{font-size:clamp(51px,6.2vw,100px);text-wrap:initial}
 .cover-copy{padding-bottom:clamp(14px,4vh,42px)}
}
.letter-peek{padding-top:6%}

.music-toggle[aria-pressed="true"] .music-icon-mark,.music-icon[aria-pressed="true"] span{color:#bf823e}
nav .music-icon{width:38px;height:38px;display:grid;place-items:center;flex:none;border:1px solid #335c8545;border-radius:50%;background:#f6faffd9;padding:0;line-height:1}
nav .music-icon span{font-family:system-ui,sans-serif;font-size:20px}
nav .music-icon[aria-pressed="true"]{background:#e7f0f7;border-color:#476887}
.final-button.music-toggle span[data-music-text]{font-size:1em;line-height:1.1}
@media(max-width:520px){
 .masthead{margin-inline:11px}
 .brand small{display:none}
 nav{gap:8px}
 nav .music-icon{width:30px;height:30px}
 nav .music-icon span{font-size:17px}
 .final-button{padding-inline:11px;gap:6px;font-size:17px}
}
@media(max-width:340px){nav{gap:5px;font-size:14px}.masthead{gap:6px}.brand img{width:32px;height:32px}}