:root{--cream:#fff0d2;--paper:#fffcf4;--ink:#402018;--shadow:#35180f;--wine:#98254e;--yellow:#f5bd43;--gold:#ffd36a;--orange:#e98b35;--pink:#f5d8cb;--muted:#8a6854}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:var(--cream);color:var(--ink);font-family:'Comic Sans MS','Segoe Print',cursive;background-image:radial-gradient(#b9824d22 .8px,transparent .8px);background-size:13px 13px}.paper-grain{position:fixed;inset:0;pointer-events:none;opacity:.16;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}.decorations{position:fixed;inset:0;overflow:hidden;pointer-events:none}.deco{position:absolute;width:38px;height:38px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-style:normal;box-shadow:3px 4px var(--shadow);animation:float 5s ease-in-out infinite}.d1,.d6,.d11{background:var(--yellow)}.d2,.d8,.d13{background:var(--wine);color:white}.d3,.d7,.d12{background:var(--orange)}.d4,.d9,.d14{background:var(--gold)}.d5,.d10{background:var(--pink)}.d1{left:5%;top:18%}.d2{left:7%;top:43%}.d3{left:7%;bottom:17%}.d4{right:10%;top:20%}.d5{right:8%;bottom:37%}.d6{right:8%;bottom:12%}.d7{left:28%;top:5%}.d8{right:24%;bottom:7%}.d9{right:18%;top:5%}.d10{left:30%;bottom:5%}.d11{left:2%;top:66%}.d12{right:2%;top:43%}.d13{left:42%;top:3%}.d14{right:42%;bottom:4%}@keyframes float{50%{transform:translateY(-9px) rotate(8deg)}}#app{height:100dvh;display:grid;place-items:center;padding:20px;position:relative;z-index:1}.paper-card{position:relative;width:min(800px,94vw);height:min(640px,88dvh);min-height:450px;background:var(--paper);border:3px solid var(--ink);border-radius:13px;box-shadow:9px 10px 0 var(--shadow);padding:48px 40px 30px;animation:cardIn .58s cubic-bezier(.2,.8,.2,1) both;display:flex;flex-direction:column}@keyframes cardIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}.tape{position:absolute;z-index:3;top:-13px;left:50%;transform:translateX(-50%) rotate(-1.5deg);width:104px;height:30px;background:repeating-linear-gradient(135deg,#f5bd43 0 8px,#ffd36a 8px 14px);border:1px solid var(--ink);opacity:.95}.badge{position:absolute;z-index:4;right:-17px;top:-20px;width:79px;height:79px;border-radius:50%;background:var(--wine);border:3px solid var(--ink);box-shadow:3px 4px 0 var(--shadow);color:white;text-align:center;display:grid;align-content:center;font:700 10px/1.25 Arial;letter-spacing:1px;transform:rotate(9deg)}h1{font-size:clamp(27px,4vw,40px);line-height:1.12;margin:0 0 15px}p{margin:0}.intro-card{width:min(620px,90vw);height:min(590px,84dvh);text-align:center;justify-content:center}.envelope-stage{display:flex;flex-direction:column;align-items:center}.envelope{position:relative;border:0;background:none;width:min(330px,70vw);height:210px;margin:26px auto 14px;cursor:pointer;filter:drop-shadow(5px 6px 0 var(--shadow));transition:transform .2s}.envelope:active{transform:scale(.975) translateY(3px)}.env-back,.env-front,.env-flap,.letter-slip{position:absolute;inset:0;border:3px solid var(--ink);border-radius:7px}.env-back{background:var(--yellow)}.env-front{background:#efac31;clip-path:polygon(0 34%,50% 74%,100% 34%,100% 100%,0 100%)}.env-flap{background:var(--gold);clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:top;transition:transform .65s;z-index:3}.seal{position:absolute;z-index:4;left:50%;top:60%;transform:translate(-50%,-50%);width:47px;height:47px;border-radius:50%;background:var(--wine);color:white;display:grid;place-items:center;border:2px solid var(--ink);font-size:22px}.letter-slip{inset:auto 18px 24px;height:165px;background:var(--paper);z-index:1;padding-top:20px;font-size:14px;transition:transform .65s .18s}.opening .env-flap{transform:rotateX(180deg);z-index:0}.opening .letter-slip{transform:translateY(-80px)}.tap{font-size:17px;margin:5px}.destined{letter-spacing:3px;color:var(--muted);font:10px Arial;margin-top:12px}.letter-card{width:min(850px,94vw);height:min(600px,88dvh);justify-content:center}.letter-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:38px;align-items:center;height:100%}.photo-print{position:relative;background:white;border:2px solid var(--ink);border-radius:8px;padding:8px;box-shadow:5px 6px #40201855;transform:rotate(-3deg);aspect-ratio:4/5}.photo-print img,.photo-frame img,.polaroid-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.photo-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:17px;background:repeating-linear-gradient(45deg,#f8ead4,#f8ead4 8px,#fff7e9 8px,#fff7e9 16px)}.photo-print .photo-fallback,.photo-frame .photo-fallback{inset:8px}.letter-copy h1{font-size:clamp(26px,3vw,34px)}.letter-copy p{font-size:16px;line-height:1.55}.letter-copy .intro{font-weight:bold;margin:0 0 8px}.typed{min-height:150px}.typed:not(.done)::after{content:' ';border-right:2px solid var(--wine);animation:blink .8s steps(2) infinite}@keyframes blink{50%{opacity:0}}.signature{text-align:right;font-style:italic;margin:9px 0 15px!important}.btn{font:700 15px 'Comic Sans MS','Segoe Print',cursive;letter-spacing:.8px;color:white;background:var(--wine);border:2px solid var(--ink);border-radius:7px;padding:12px 25px;box-shadow:4px 5px var(--shadow);cursor:pointer;transition:transform .16s,box-shadow .16s;min-height:46px}.btn:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:5px 7px var(--shadow)}.btn:active{transform:translate(3px,4px);box-shadow:1px 1px var(--shadow)}.balloon-card{width:min(730px,94vw);height:min(650px,90dvh);padding:44px 30px 24px;text-align:center}.balloon-head h1{margin:4px 0}.balloon-head p{color:var(--muted);font-size:17px}.progress{font:12px Arial;color:var(--wine);letter-spacing:1px;margin-top:8px}.balloon-field{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);place-items:center;padding:12px 38px 4px}.balloon{position:relative;width:clamp(82px,12vw,115px);height:clamp(105px,16vw,145px);border:2px solid var(--ink);border-radius:52% 48% 50% 50%/45% 46% 54% 55%;box-shadow:inset -11px -10px 13px #35180f26,3px 5px #35180f40;cursor:pointer;animation:balloonFloat var(--dur,4s) ease-in-out infinite;transition:filter .2s}.balloon:hover{filter:brightness(1.08);scale:1.08}.balloon.gold{background:radial-gradient(ellipse at 30% 25%,#fff5c4 0 8%,transparent 10%),linear-gradient(120deg,#ffe58a,#f5bd43 60%,#d99a27)}.balloon.wine{background:radial-gradient(ellipse at 30% 25%,#f5c4cf 0 8%,transparent 10%),linear-gradient(120deg,#c84e78,#98254e 60%,#6d1837)}.balloon.orange{background:radial-gradient(ellipse at 30% 25%,#ffe0ad 0 8%,transparent 10%),linear-gradient(120deg,#ffc878,#e98b35 60%,#bd5f25)}.balloon.red{background:radial-gradient(ellipse at 30% 25%,#ffc3a6 0 8%,transparent 10%),linear-gradient(120deg,#fb9966,#cc4d35 65%,#902d27)}.balloon.mustard{background:radial-gradient(ellipse at 30% 25%,#fff0ac 0 8%,transparent 10%),linear-gradient(120deg,#ffda65,#dca52e 65%,#ad7622)}.balloon.pink{background:radial-gradient(ellipse at 30% 25%,#ffd8e7 0 8%,transparent 10%),linear-gradient(120deg,#e6608e,#a32659 65%,#751b3d)}.shine{position:absolute;top:17%;left:19%;width:13px;height:35px;border-radius:50%;background:#fff9;transform:rotate(22deg)}.knot{position:absolute;bottom:-8px;left:calc(50% - 8px);width:15px;height:14px;background:inherit;clip-path:polygon(0 0,100% 0,50% 100%)}.string{position:absolute;top:100%;left:50%;height:38px;border-left:1px dashed var(--muted)}.b1{--dur:4.2s}.b2{--dur:5s;animation-delay:-2s}.b3{--dur:3.8s;animation-delay:-.6s}.b4{--dur:4.7s;animation-delay:-2.7s}.b5{--dur:5.3s;animation-delay:-1.8s}.b6{--dur:4s;animation-delay:-3s}@keyframes balloonFloat{0%,100%{translate:0 3px;rotate:-3deg}50%{translate:4px -12px;rotate:4deg}}.balloon.pop{animation:pop .38s ease-in forwards;pointer-events:none}@keyframes pop{0%{scale:1}45%{scale:1.2 .72}70%{scale:.3}100%{scale:0;opacity:0}}.burst{position:absolute;inset:-20px;display:grid;place-items:center;color:var(--wine);font-size:60px;animation:burst .4s ease-out forwards}@keyframes burst{to{opacity:0;scale:1.5;rotate:50deg}}.balloon-note{font:11px Arial;letter-spacing:1px;color:var(--muted)}#overlay-root{position:fixed;z-index:10;inset:0;pointer-events:none}.scrim{pointer-events:auto;position:absolute;inset:0;background:#28130fc2;backdrop-filter:blur(5px);display:grid;place-items:center;padding:18px;animation:fade .35s both}@keyframes fade{from{opacity:0}to{opacity:1}}.message-modal{width:min(440px,91vw);max-height:90dvh;overflow:auto;background:var(--paper);border:3px solid var(--ink);border-radius:12px;box-shadow:8px 9px var(--shadow);padding:28px 34px 30px;text-align:center;animation:modalIn .55s cubic-bezier(.2,.8,.2,1) both}@keyframes modalIn{from{opacity:0;transform:scale(.75) rotate(8deg)}to{opacity:1;transform:scale(1) rotate(-1deg)}}.polaroid{background:#fffefa;border:2px solid var(--ink);box-shadow:5px 6px #35180f77}.message-polaroid{width:min(255px,70vw);padding:9px 9px 0;margin:0 auto 22px;transform:rotate(2deg)}.polaroid-photo{position:relative;aspect-ratio:1.08;background:#f7e7cd;overflow:hidden}.polaroid>p{padding:10px 2px 11px;font-size:17px}.message-text{font-size:19px;line-height:1.45;margin:0 auto 23px;max-width:340px}.btn.yellow{background:var(--yellow);color:var(--ink)}.gallery-card{width:min(890px,95vw);height:min(670px,91dvh);padding:48px 38px 22px;text-align:center}.gallery-head h1{font-size:clamp(25px,3.4vw,35px);margin-bottom:5px}.gallery-head p{font:700 11px Arial;letter-spacing:2.2px;color:var(--wine)}.gallery-layout{flex:1;display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center;min-height:0;padding:15px 24px}.gallery-main,.gallery-side{height:100%;position:relative;display:grid;place-items:center}.photo-frame{position:relative;background:white;padding:9px;border:2px solid var(--ink);box-shadow:6px 7px #35180f66;overflow:hidden}.photo-frame.large{width:min(350px,90%);height:80%;transform:rotate(-3deg)}.polaroid-photo{position:relative;aspect-ratio:1;background:#f7e7cd;overflow:hidden}.gallery-side .polaroid{width:min(230px,90%);padding:9px 9px 0;transform:rotate(3deg)}.gallery-side .polaroid>p{font-size:17px}.sticker{position:absolute;z-index:2;background:var(--gold);border:1.5px solid var(--ink);box-shadow:2px 3px var(--shadow);padding:7px 10px;font-size:14px;line-height:1.1;transform:rotate(-7deg)}.s1{top:5%;left:0}.s2{top:18%;right:0;background:var(--pink);transform:rotate(5deg)}.s3{bottom:8%;left:-1%;background:#f3ceaa;transform:rotate(-4deg)}.sparkle{position:absolute;right:3%;top:12%;font-size:37px;color:var(--orange)}.back-btn{align-self:flex-start;background:var(--yellow);color:var(--ink);padding:8px 20px;min-height:38px;font-size:13px}
@media(max-width:650px){#app{padding:13px}.deco{width:29px;height:29px;font-size:13px}.paper-card{height:min(680px,92dvh);min-height:0;padding:40px 20px 20px;border-width:2px;box-shadow:6px 7px var(--shadow)}.badge{width:65px;height:65px;right:-12px;top:-15px;font-size:8px}.tape{width:84px;height:24px}.intro-card{height:min(560px,86dvh)}.envelope{height:175px;width:min(290px,76vw)}.letter-card{height:min(700px,92dvh)}.letter-layout{grid-template-columns:.88fr 1.12fr;gap:18px}.letter-copy h1{font-size:23px}.letter-copy p{font-size:13px;line-height:1.45}.typed{min-height:145px}.letter-copy .btn{padding:10px 19px}.balloon-card{height:min(700px,94dvh);padding:42px 12px 17px}.balloon-head h1{font-size:27px}.balloon-head p{font-size:15px}.balloon-field{padding:10px;row-gap:15px}.balloon{width:clamp(75px,24vw,105px);height:clamp(94px,31vw,130px)}.string{height:28px}.gallery-card{height:min(700px,94dvh);padding:40px 15px 14px}.gallery-layout{gap:10px;padding:12px 5px}.photo-frame.large{height:65%;width:95%}.gallery-side .polaroid{width:100%;padding:6px 6px 0}.gallery-side .polaroid>p{font-size:14px;padding:7px 0}.sticker{font-size:11px;padding:5px 7px}.s1{left:-5px;top:13%}.s2{right:-5px;top:26%}.s3{left:-7px;bottom:13%}.sparkle{font-size:29px}.message-modal{padding:21px 20px 24px}.message-text{font-size:17px}}@media(max-width:390px){.letter-layout{gap:12px;grid-template-columns:.9fr 1.1fr}.letter-copy h1{font-size:20px}.letter-copy p{font-size:12px}.typed{min-height:160px}.balloon-card{padding-inline:7px}.balloon-field{padding-inline:0}.gallery-head h1{font-size:24px}.sticker{font-size:10px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
/* Fixed balloon board: explicit coordinates come from src/content.js. */
.balloon-field{position:relative;display:block;padding:0;min-height:0}
.balloon{position:absolute;left:var(--balloon-x);top:var(--balloon-y);transform:translate(-50%,-50%);animation:none!important;transition:filter .2s}
.balloon:hover{filter:brightness(1.08);scale:1}
/* Keep the long personalized letter inside its existing two-column card. */
.letter-copy{height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center}
.letter-copy .typed{height:clamp(165px,32dvh,210px);min-height:0;flex:0 1 auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9a181 transparent}
/* Bound the copy column to the paper card; the typed paragraph can scroll. */
.letter-layout{grid-template-rows:minmax(0,1fr);min-height:0;min-width:0}
.letter-copy{height:100%;max-height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.letter-copy .typed{height:clamp(165px,32dvh,210px);max-height:clamp(165px,32dvh,210px);min-height:0;flex:0 1 auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9a181 transparent}
/* Readable default typography; handwritten faces stay on personal scrapbook details. */
body{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
button,input,select,textarea{font:inherit}
.btn{font-family:inherit;font-weight:700}
.letter-copy h1,.signature,.sticker,.polaroid>p,.letter-slip{font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive}
.letter-copy h1{font-weight:700}
.photo-fallback,.letter-copy .intro,.letter-copy .typed,.message-text,.tap,.balloon-head p,.progress,.balloon-note,.gallery-head p{font-family:inherit}
@media(max-width:430px){
  #app{height:100svh;height:100dvh;padding:max(8px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))}
  .paper-card{width:min(800px,calc(100vw - 20px));min-height:0;border-width:2px;border-radius:12px;box-shadow:6px 7px 0 var(--shadow)}
  .badge{width:62px;height:62px;right:-9px;top:-12px;font-size:8px;letter-spacing:.7px;line-height:1.16}
  .tape{width:82px;height:24px;top:-11px}
  .intro-card{height:min(560px,calc(100dvh - 24px));padding:42px 16px 20px}
  .intro-card h1{font-size:clamp(25px,7vw,31px);margin-bottom:12px}
  .envelope{width:min(300px,78vw);height:clamp(150px,44vw,180px);margin:20px auto 10px}
  .letter-slip{font-size:14px;padding:18px 8px 0}
  .tap{font-size:16px}
  .letter-card{height:min(720px,calc(100dvh - 20px));padding:38px 15px 13px}
  .letter-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px;align-items:stretch;min-height:0}
  .photo-print{width:88px;max-height:110px;aspect-ratio:4/5;justify-self:center;padding:5px;border-radius:6px}
  .photo-print .photo-fallback{inset:5px;font-size:11px}
  .letter-copy{width:100%;height:100%;max-height:100%;min-height:0;justify-content:flex-start;overflow:hidden}
  .letter-copy h1{font-size:clamp(22px,6vw,26px);text-align:center;margin:0 0 4px}
  .letter-copy p{font-size:14px;line-height:1.42}
  .letter-copy .intro{margin-bottom:4px;font-size:14px}
  .letter-copy .typed{height:clamp(118px,23dvh,190px);max-height:clamp(118px,23dvh,190px);flex:0 1 auto;font-size:14px;line-height:1.42}
  .signature{font-size:14px;margin:5px 0 8px!important}
  .letter-copy .btn{align-self:flex-end;min-width:108px;min-height:46px;padding:9px 18px}
  .balloon-card{height:min(700px,calc(100dvh - 20px));padding:42px 12px 14px}
  .balloon-head h1{font-size:clamp(22px,6.4vw,27px);line-height:1.15;margin:3px 0 4px}
  .balloon-head p{font-size:14px;line-height:1.3}
  .progress{font-size:11px;margin-top:6px}
  .balloon-field{flex:1;min-height:190px;padding:0}
  .balloon{width:clamp(70px,21vw,90px);height:clamp(88px,27vw,112px)}
  .shine{width:10px;height:28px}
  .string{height:22px}
  .balloon-note{font-size:10px;line-height:1.2;padding-bottom:2px}
  .gallery-card{height:min(720px,calc(100dvh - 20px));padding:40px 13px 13px}
  .gallery-head{padding:0 18px}
  .gallery-head h1{font-size:clamp(22px,6.2vw,27px);line-height:1.12;margin:2px 0 5px}
  .gallery-head p{font-size:10px;letter-spacing:1.3px;line-height:1.3}
  .gallery-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:9px;padding:10px 3px;min-height:0}
  .photo-frame.large{width:96%;height:62%;padding:6px}
  .photo-frame.large .photo-fallback{inset:6px;font-size:13px}
  .gallery-side .polaroid{width:min(100%,170px);padding:6px 6px 0}
  .polaroid-photo{aspect-ratio:1/1}
  .gallery-side .polaroid>p{font-size:14px;line-height:1.2;padding:7px 1px}
  .sticker{font-size:clamp(9px,2.8vw,11px);padding:5px 7px;max-width:46%;line-height:1.15}
  .s1{left:-3px;top:11%}
  .s2{right:-3px;top:23%}
  .s3{left:-3px;bottom:11%;max-width:55%}
  .sparkle{font-size:27px;right:2%;top:12%}
  .back-btn{min-height:44px;padding:8px 19px;font-size:13px}
  .message-modal{width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:20px 18px 22px}
  .message-polaroid{width:min(240px,68vw);margin-bottom:16px}
  .message-text{font-size:clamp(16px,4.5vw,18px);line-height:1.4;margin-bottom:17px}
  .message-modal .btn{min-height:48px;padding:10px 21px}
}
@media(max-width:375px){
  .paper-card{width:calc(100vw - 18px)}
  .letter-card{padding-left:12px;padding-right:12px}
  .letter-layout{gap:6px}
  .letter-copy .intro,.letter-copy .typed{font-size:13.5px}
  .letter-copy .typed{height:clamp(112px,22dvh,175px);max-height:clamp(112px,22dvh,175px)}
  .balloon-card{padding-left:8px;padding-right:8px}
  .balloon{width:clamp(66px,20vw,78px);height:clamp(82px,25vw,98px)}
  .gallery-card{padding-left:10px;padding-right:10px}
  .gallery-layout{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:6px;padding-inline:1px}
  .gallery-side .polaroid{padding:5px 5px 0}
  .gallery-side .polaroid>p{font-size:12px}
  .sticker{font-size:9px;padding:4px 6px}
}
@media(max-width:360px){
  .intro-card{padding-inline:12px}
  .envelope{width:76vw}
  .letter-card{padding-top:35px}
  .photo-print{width:80px;max-height:100px}
  .letter-copy h1{font-size:21px}
  .letter-copy .intro,.letter-copy .typed{font-size:13px}
  .letter-copy .typed{height:clamp(108px,21dvh,160px);max-height:clamp(108px,21dvh,160px)}
  .balloon-head h1{font-size:21px}
  .balloon{width:66px;height:82px}
  .gallery-head h1{font-size:21px}
  .gallery-head p{font-size:9px;letter-spacing:1px}
  .sparkle{font-size:23px}
}
/* On phones keep the photo beside the letter and let the text use the full column height. */
@media(max-width:430px){
  .letter-layout{grid-template-columns:clamp(76px,23vw,92px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:10px;align-items:stretch}
  .photo-print{width:100%;max-height:120px;aspect-ratio:4/5;justify-self:stretch;align-self:start;margin-top:2px}
  .photo-print .photo-fallback{font-size:11px}
  .letter-copy{width:100%;height:100%;max-height:100%;min-height:0;justify-content:flex-start;overflow:hidden}
  .letter-copy h1{font-size:clamp(20px,5.5vw,24px);text-align:left;line-height:1.1;margin:0 0 6px}
  .letter-copy p{font-size:clamp(12px,3.5vw,14px);line-height:1.42}
  .letter-copy .intro{font-size:clamp(12px,3.5vw,14px);margin:0 0 5px}
  .letter-copy .typed{height:auto;max-height:none;min-height:0;flex:1 1 0;overflow-y:auto;font-size:clamp(12px,3.5vw,14px);line-height:1.42}
  .signature{font-size:14px;margin:6px 0 8px!important}
  .letter-copy .btn{align-self:flex-end;min-width:104px;min-height:46px;padding:9px 16px}
}
@media(max-width:375px){
  .letter-layout{grid-template-columns:clamp(68px,22vw,82px) minmax(0,1fr);gap:8px}
  .photo-print{max-height:105px}
  .letter-copy h1{font-size:clamp(19px,5.4vw,22px)}
  .letter-copy p,.letter-copy .intro,.letter-copy .typed{font-size:clamp(12px,3.45vw,13px)}
}
/* Give the letter photo more presence on phones and keep the reading area tall. */
@media(max-width:430px){
  .letter-layout{grid-template-columns:clamp(90px,27vw,112px) minmax(0,1fr);gap:9px}
  .photo-print{max-height:150px}
  .letter-copy{min-height:0}
  .letter-copy .typed{flex:1 1 auto;min-height:0}
}
@media(max-width:375px){
  .letter-layout{grid-template-columns:clamp(86px,25vw,100px) minmax(0,1fr);gap:8px}
  .photo-print{max-height:140px}
}
/* Gujarati copy: clear script rendering with comfortable line spacing. */
:root{font-family:"Noto Sans Gujarati","Nirmala UI",sans-serif}
body,.btn,.badge,.progress,.balloon-note,.sticker,.gallery-head p,.photo-fallback{font-family:"Noto Sans Gujarati","Nirmala UI",sans-serif}
body{line-height:1.65}
.btn{font-family:"Noto Sans Gujarati","Nirmala UI",sans-serif;letter-spacing:0;font-weight:700}
.badge{font-family:"Noto Sans Gujarati","Nirmala UI",sans-serif;letter-spacing:0;line-height:1.3}
.letter-copy p,.message-text{line-height:1.72}
.typed{white-space:pre-line}
.gallery-head p{letter-spacing:0;line-height:1.5}
.photo-print img,.photo-frame img,.polaroid-photo img{object-position:center top}
@media(max-width:650px){
  .balloon-head h1{font-size:clamp(18px,5.2vw,23px);line-height:1.4}
  .balloon-head p{font-size:14px;line-height:1.6}
  .progress{font-size:12px;letter-spacing:0}
  .gallery-head h1{font-size:clamp(19px,5.6vw,24px);line-height:1.45}
  .gallery-head p{font-size:10px;line-height:1.6}
  .sticker{letter-spacing:0;line-height:1.45}
  .message-text{font-size:clamp(15px,4.5vw,18px);line-height:1.7}
  .letter-copy .typed,.letter-copy .intro{line-height:1.7}
}