@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#293029;background:#fbf8e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #8b4265;outline-offset:5px}button{color:inherit}a{color:inherit}.site-header{max-width:1400px;margin:auto;padding:30px 56px;display:flex;justify-content:space-between;align-items:center}.brand{text-decoration:none;font-family:'DM Serif Display',Georgia,serif;font-size:36px;letter-spacing:-1.5px}.brand>span:first-child{color:#747650}.brand-star{display:inline-block;font-family:Georgia,serif;font-size:33px;margin-left:13px;color:#a3466b;vertical-align:middle}.header-note{font-size:14px;color:#626554}main{max-width:780px;margin:auto;padding:22px 24px 20px}.intro{text-align:center}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;margin:0 0 16px;color:#64674b}h1{font-family:'DM Serif Display',Georgia,serif;font-size:62px;line-height:1.07;letter-spacing:-1.9px;font-weight:400;margin:0}h1 em{font-weight:400;position:relative;white-space:nowrap;isolation:isolate}h1 em:after{content:'';position:absolute;z-index:-1;background:#f4b6cb;bottom:7px;left:-5px;right:-9px;height:16px;transform:rotate(-2deg)}.intro>p{font-size:16px;color:#636651;margin:21px 0 29px}.mode-picker{display:flex;width:max-content;max-width:100%;padding:5px;background:#eeecd9;border:1px solid #e4e1ce;border-radius:40px;margin:0 auto 23px;gap:3px}.mode-picker button{border:0;background:transparent;border-radius:30px;padding:11px 25px;font-size:14px;font-weight:600;color:#646651}.mode-picker button[aria-pressed=true]{color:#fffdf4;background:#30382a;box-shadow:0 2px 4px #25302112}.paper{background:#fffefa;border:1px solid #e4e0d3;border-radius:5px;padding:25px 36px 23px;box-shadow:0 5px 0 -1px #f8f5e9,0 6px 0 #ddd9c9,0 12px 30px #3b361008;position:relative}.paper-top,.paper-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px}.paper-top{font-size:10px;letter-spacing:1.8px;color:#7b7d69;font-weight:600;margin-bottom:22px}.paper-top>span:last-child{font-size:29px;color:#ad4869;line-height:1}.sentence{font-family:'DM Serif Display',Georgia,serif;font-size:30px;display:flex;flex-wrap:wrap;gap:8px 13px;align-items:baseline;line-height:1.65}.sentence input{width:180px;min-width:0;font-family:inherit;border:0;border-bottom:1px dashed #abae8e;background:transparent;border-radius:0;color:#3d4838;padding:0 2px 2px}.sentence input::placeholder{color:#8b8f71;opacity:1}.sentence input:focus,textarea:focus{outline:0;border-bottom:2px solid #a34769}textarea{resize:vertical;min-height:95px;max-height:260px;width:100%;font-family:'DM Serif Display',Georgia,serif;font-size:32px;line-height:1.45;border:0;border-bottom:1px dashed #abae8e;border-radius:0;background:transparent;color:#3d4838;margin:8px 0 24px;padding:0 2px}textarea::placeholder{color:#95967f;opacity:1}.paper-bottom{font-size:12px;color:#797c66}.signature{font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-size:20px;color:#986079;white-space:nowrap;transform:rotate(-4deg)}.actions{display:flex;justify-content:center;align-items:center;gap:23px;margin-top:29px}.primary{border:1px solid #30372b;background:#30372b;color:#fffdf4;border-radius:7px;padding:16px 25px;font-size:15px;font-weight:600;transition:transform .15s,background .15s}.primary:hover{background:#48503b;transform:translateY(-2px)}.primary>span{margin-left:26px;font-size:21px;font-weight:400}.copy{background:transparent;border:0;font-size:14px;padding:14px 0}.copy>span{margin-left:10px;font-size:20px}.privacy{font-size:13px;line-height:1.8;text-align:center;color:#676b57;margin-top:17px}.privacy span{font-size:12px;color:#757864}.inspiration{margin:32px auto 10px;padding:20px 24px;background:#f1efd9;border-radius:5px;max-width:630px;min-height:130px}.inspiration-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:1.4px;color:#686d4e;font-weight:700}.inspiration-heading button{font-size:12px;letter-spacing:0;font-weight:400;border:0;background:transparent;padding:3px;color:#626746}.inspiration p{font-family:'DM Serif Display',Georgia,serif;font-size:23px;margin:13px 0 5px;line-height:1.35}.inspiration p span{color:#767a58}.example-credit{font-size:12px;color:#74775e}footer{max-width:1400px;margin:25px auto 0;padding:20px 56px 27px;display:flex;justify-content:space-between;gap:20px;color:#777a65;font-size:12px}footer>span:last-child>span{color:#a34d6e;margin-left:7px}.status{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#30372b;color:#fffdf4;border-radius:8px;padding:13px 24px;max-width:90vw;text-align:center;box-shadow:0 6px 24px #0002;z-index:5;font-size:14px}.status:empty{display:none}.received{text-align:center;margin:30px 0}.received .paper{padding-top:30px;padding-bottom:30px}.received h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:32px;overflow-wrap:anywhere;margin:28px 0 14px}.received #received-promise{font-family:'DM Serif Display',Georgia,serif;font-size:42px;line-height:1.25;overflow-wrap:anywhere;white-space:pre-wrap;margin:15px 0 40px;color:#92526e}.received .primary{margin-top:30px}.fallback{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:min(550px,94vw);background:#fffefa;border:1px solid #aaa;padding:20px;z-index:8;box-shadow:0 0 40px #0002;border-radius:8px}.fallback label{font-size:14px}.fallback input{width:100%;margin:15px 0;padding:12px}.fallback button{padding:8px 16px}[hidden]{display:none!important}.example-enter{animation:appear .45s ease}@keyframes appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1500px){main{padding-top:45px}.intro>p{margin-bottom:34px}footer{margin-top:40px}}@media(max-width:600px){.site-header{padding:22px 24px}.brand{font-size:30px}.brand-star{font-size:25px}.header-note{font-size:12px;max-width:85px;text-align:right}main{padding:22px 20px 12px}h1{font-size:45px;letter-spacing:-1.2px}.eyebrow{font-size:10px}.intro>p{font-size:14px;line-height:1.65;max-width:280px;margin:18px auto 24px}.mode-picker button{padding:11px 17px;font-size:13px}.paper{padding:22px}.sentence{font-size:27px;gap:6px 10px}.sentence input{width:calc(50% - 6px);min-width:115px}.sentence #connector{font-size:25px}textarea{font-size:28px;margin-bottom:22px;min-height:100px}.paper-top{letter-spacing:1px;font-size:9px}.paper-bottom{font-size:11px}.signature{font-size:18px}.actions{gap:20px}.primary{padding:14px 17px;font-size:14px}.primary>span{margin-left:12px}.copy{font-size:13px}.inspiration{margin-top:26px;padding:18px}.inspiration-heading{font-size:9px;letter-spacing:.8px}.inspiration p{font-size:22px}footer{padding:12px 24px 25px;flex-direction:column;align-items:center;gap:9px;text-align:center;font-size:11px}.received #received-promise{font-size:34px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

@media(min-width:601px) and (max-width:780px){h1{font-size:48px}.sentence input{width:150px}.intro>p{font-size:15px}.site-header{padding:25px 32px}}

/* Handmade stationery: the texture sits behind the editable text. */
.paper {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
  filter: drop-shadow(0 1px 1px #51462c38) drop-shadow(1px 3px 3px #51462c24);
}
.paper::before {
  content: '';
  position: absolute;
  inset: -8px -10px;
  z-index: -1;
  pointer-events: none;
  background: url('handmade-paper.png') center / 100% 100% no-repeat;
  filter: brightness(1.035) saturate(.55) contrast(1.04);
  clip-path: polygon(2.3% 5%,4% 4.3%,6% 5.5%,8.4% 4.3%,11% 5.1%,14% 4.6%,18% 5.4%,21% 4%,24% 3.8%,28% 5.2%,32% 4.5%,36% 5.4%,40% 4.5%,44% 5.3%,48% 3.2%,51% 4.8%,55% 5.7%,59% 4.7%,63% 5.4%,67% 4.5%,71% 5.4%,75% 4.3%,79% 5.1%,83% 4.2%,87% 5.3%,91% 4.7%,95% 5.3%,98% 4.7%,97.6% 12%,98.1% 20%,97.5% 28%,98% 36%,97.3% 43%,98% 51%,97.3% 60%,98% 68%,97.6% 76%,98.2% 84%,97.4% 92%,98% 95%,94% 96%,90% 95.2%,86% 96%,82% 95%,78% 96%,74% 95.3%,70% 96.4%,66% 95%,62% 96.2%,58% 95.1%,54% 96.5%,50% 95.3%,46% 96.6%,42% 96%,38% 97%,34% 95.8%,30% 96.8%,26% 95.3%,22% 96%,18% 94.7%,14% 95.6%,10% 94.9%,6% 96%,2.2% 95.5%,2.8% 88%,2.1% 80%,2.8% 72%,2% 64%,2.8% 56%,2% 49%,3% 42%,2.3% 34%,2.8% 26%,2.1% 18%,2.8% 11%);
}
.paper-top { color: #666a54; }
.paper-bottom { color: #686d55; }
textarea::placeholder { color: #7b8067; }
@media(max-width:600px) {
  .paper { padding: 28px 24px; }
  .paper::before { inset: -8px; }
}

.status.celebration-message {
  background: #f9e4ec;
  color: #58374a;
  border: 1px solid #dfb5c5;
  padding: 20px 28px;
  width: max-content;
  max-width: calc(100vw - 32px);
  box-shadow: 0 4px 18px #51344520;
}
.celebration-message strong {
  display: block;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 7px;
}
.celebration-message span { display: block; font-size: 14px; line-height: 1.5; }
.heart-burst { position: fixed; z-index: 10; pointer-events: none; width: 0; height: 0; }
.heart-burst span {
  position: absolute;
  opacity: 0;
  line-height: 1;
  animation: promise-hearts 1700ms ease-out var(--delay) both;
}
@keyframes promise-hearts {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.3); }
  12% { opacity: 1; }
  65% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--turn)) scale(1.1); }
}
@media(prefers-reduced-motion: reduce) { .heart-burst { display: none; } }