:root {
  --sky-top: #f4a8ca;
  --sky-mid: #f7c6dc;
  --sky-bottom: #ffe2e9;
  --ink: #4e1e3d;
  --berry: #d82f71;
  --berry-dark: #9e2256;
  --cream: #fff7f2;
  --lavender: #bba9d8;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--ink); font-family: "Trebuchet MS", system-ui, sans-serif; background: var(--sky-top); }
button { font: inherit; }
.page-shell { min-height: 100vh; min-height: 100svh; position: relative; overflow: hidden; padding: 30px 28px 46px; display: flex; flex-direction: column; align-items: center; background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-bottom) 100%); isolation: isolate; }
.sky-noise { position: absolute; inset: 0; opacity: .09; pointer-events: none; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 5px 5px; mask-image: linear-gradient(#000, transparent 86%); z-index: -1; }
.topbar { width: min(100%, 950px); display: flex; justify-content: space-between; align-items: center; color: rgba(78, 30, 61, .72); font-family: "Courier New", monospace; font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; z-index: 4; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand-heart { color: var(--berry); font-size: 17px; text-shadow: 2px 2px 0 rgba(255,255,255,.5); }
.top-actions { display: flex; align-items: center; gap: 12px; } .top-note { letter-spacing: .08em; text-transform: none; font-size: 12px; }
.music-toggle { padding: 6px 8px; color: var(--berry-dark); background: rgba(255,247,242,.46); border: 2px solid rgba(158,34,86,.3); border-radius: 5px; cursor: pointer; font: 700 10px "Courier New", monospace; letter-spacing: .04em; text-transform: lowercase; } .music-toggle:hover { background: rgba(255,247,242,.8); } .music-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.invite-card { width: min(100%, 620px); margin: 22px auto 0; text-align: center; z-index: 3; display: flex; align-items: center; flex-direction: column; }
.card-kicker { display: inline-block; color: var(--berry-dark); font-family: "Courier New", monospace; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,247,242,.5); padding: 7px 11px; border: 2px solid rgba(158,34,86,.18); box-shadow: 3px 3px 0 rgba(158,34,86,.1); }
.character-frame { width: 184px; height: 177px; margin: 18px 0 21px; position: relative; display: grid; place-items: center; background: #381a32; border: 5px solid var(--berry-dark); outline: 3px solid #ffedf2; box-shadow: 5px 5px 0 #8f2451, 8px 8px 0 rgba(102, 31, 72, .2); image-rendering: pixelated; }
.character-frame::before { content: ""; position: absolute; inset: 7px; border: 2px solid #f06599; opacity: .8; }
.frame-corner { width: 11px; height: 11px; position: absolute; z-index: 2; border-color: #ff9cba; border-style: solid; }
.corner-tl { top: 1px; left: 1px; border-width: 2px 0 0 2px; } .corner-tr { top: 1px; right: 1px; border-width: 2px 2px 0 0; } .corner-bl { bottom: 1px; left: 1px; border-width: 0 0 2px 2px; } .corner-br { bottom: 1px; right: 1px; border-width: 0 2px 2px 0; }
.screen-shine { position: absolute; top: 12px; left: 15px; width: 26px; height: 4px; background: #ffe7f1; opacity: .7; transform: rotate(-42deg); }
.mascot { position: relative; color: #f9f8ff; font-size: 24px; text-shadow: 2px 2px 0 #9f92b6; transform: translateY(3px); animation: bob 3.5s ease-in-out infinite; }
.mascot-body { position: relative; z-index: 1; padding: 24px 9px 14px; min-width: 100px; border-radius: 48% 48% 40% 40%; background: #f5f4fb; color: #554565; font-size: 13px; letter-spacing: -2px; box-shadow: 3px 3px 0 #b8abc9; }
.mascot-ears::before, .mascot-ears::after { content: ""; position: absolute; top: 10px; width: 23px; height: 28px; background: #f5f4fb; border: 3px solid #b8abc9; z-index: 0; }
.mascot-ears::before { left: 10px; transform: rotate(-24deg) skewY(18deg); } .mascot-ears::after { right: 10px; transform: rotate(24deg) skewY(-18deg); }
.mascot-feet { position: absolute; bottom: 4px; left: 18px; right: 18px; display: flex; justify-content: space-between; } .mascot-feet i { display: block; width: 15px; height: 8px; background: #f5f4fb; border-radius: 50%; }
.mascot-heart { position: absolute; right: 1px; top: 2px; color: #f77aa5; font-size: 14px; text-shadow: none; }
.eyebrow { margin: 6px 0 8px; font-family: "Courier New", monospace; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--berry-dark); text-transform: uppercase; }
h1 { margin: 0; font-family: "Courier New", monospace; font-size: clamp(34px, 7vw, 63px); line-height: .96; letter-spacing: -.07em; text-transform: uppercase; color: var(--cream); text-shadow: 3px 3px 0 var(--berry), 6px 6px 0 rgba(157,34,86,.22); }
h1 em { color: #fffafc; font-style: normal; }
.subcopy { margin: 19px 0 18px; font-size: 14px; line-height: 1.55; color: rgba(78, 30, 61, .75); }
.actions { display: flex; align-items: flex-start; justify-content: center; gap: 16px; min-height: 78px; position: relative; width: min(100%, 420px); }
.no-wrap { display: flex; flex-direction: column; align-items: center; min-width: 118px; }
.no-message { width: 185px; min-height: 18px; margin: 12px 0 0; color: var(--berry-dark); font: 700 12px/1.25 "Courier New", monospace; text-align: center; }
.pixel-button { min-width: 118px; padding: 12px 21px 10px; border: 3px solid var(--berry-dark); border-radius: 11px; cursor: pointer; font-family: "Courier New", monospace; font-size: 15px; font-weight: 900; letter-spacing: .08em; color: var(--cream); background: var(--berry); box-shadow: 3px 4px 0 var(--berry-dark), inset 0 2px 0 rgba(255,255,255,.38); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.pixel-button:hover { transform: translate(-1px, -2px); box-shadow: 4px 6px 0 var(--berry-dark), inset 0 2px 0 rgba(255,255,255,.38); }
.pixel-button:active { transform: translate(2px, 2px); box-shadow: 1px 2px 0 var(--berry-dark); }
.pixel-button:focus-visible, .reset-link:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
.no-button { color: var(--berry-dark); background: rgba(255,247,242,.76); border-color: #e07fa5; box-shadow: 3px 4px 0 #c75c88; }
.no-button:hover { background: #fff7f2; box-shadow: 4px 6px 0 #c75c88; }
.hint { min-height: 18px; margin: 13px 0 0; font-size: 11px; color: rgba(78,30,61,.55); }
.success-panel { width: min(100%, 680px); margin: 28px auto 0; text-align: center; z-index: 5; animation: pop .45s cubic-bezier(.2,1.5,.5,1) both; }
.success-badge { display: inline-block; padding: 8px 15px; color: var(--cream); background: var(--berry); border: 3px solid var(--berry-dark); box-shadow: 3px 3px 0 var(--berry-dark); font: 900 13px "Courier New", monospace; letter-spacing: .1em; }
.success-panel h2 { margin: 16px 0 5px; font: 900 clamp(42px, 9vw, 72px)/.95 "Courier New", monospace; letter-spacing: -.08em; color: var(--cream); text-shadow: 4px 4px 0 var(--berry); }
.success-panel p { margin: 14px 0; font-size: 16px; line-height: 1.55; color: rgba(78,30,61,.78); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(100%, 540px); margin: 19px auto 20px; }
.gallery-card { margin: 0; padding: 7px 7px 9px; background: #fff7f2; border: 3px solid #e07fa5; box-shadow: 3px 3px 0 rgba(158,34,86,.25); transform: rotate(-2deg); }
.gallery-card:nth-child(2) { transform: rotate(2deg) translateY(-4px); } .gallery-card:nth-child(3) { transform: rotate(-1deg); }
.photo-art { height: 104px; position: relative; overflow: hidden; display: grid; place-items: center; color: #fff7f2; font: 900 32px "Courier New", monospace; border: 2px solid rgba(78,30,61,.22); }
.photo-art::after { content: ""; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 5px 5px; }
.photo-sky { background: linear-gradient(180deg, #e995bb 0 48%, #f8c4d9 49% 68%, #fff0f4 69%); } .photo-picnic { background: linear-gradient(180deg, #a892c9 0 55%, #f3a2b9 56% 100%); } .photo-stars { background: linear-gradient(180deg, #4c315c, #bd6d9c 70%, #f6b6ce); }
.photo-art span { position: relative; z-index: 1; text-shadow: 3px 3px 0 rgba(78,30,61,.35); } .photo-art b { position: absolute; right: 9px; top: 5px; z-index: 1; color: #fff; font-size: 17px; }
.gallery-card p { margin: 7px 0 0; color: var(--berry-dark); font: 700 10px "Courier New", monospace; letter-spacing: .05em; text-transform: uppercase; }
.date-planner { width: min(100%, 540px); margin: 0 auto 15px; padding: 15px 16px 17px; background: rgba(255,247,242,.62); border: 2px dashed rgba(158,34,86,.42); }
.planner-title { margin: 0 0 10px !important; color: var(--berry-dark) !important; font: 900 12px "Courier New", monospace; letter-spacing: .12em; text-transform: uppercase; }
.planner-fields { display: flex; justify-content: center; gap: 10px; } .planner-fields label { display: flex; flex-direction: column; gap: 5px; color: rgba(78,30,61,.7); font: 900 10px "Courier New", monospace; letter-spacing: .08em; }
.planner-fields input { width: 150px; padding: 8px 7px; color: var(--ink); background: #fff; border: 2px solid #e07fa5; border-radius: 6px; font: 700 12px "Courier New", monospace; } .planner-fields input:focus { outline: 3px solid #fff; outline-offset: 2px; }
.countdown { margin-top: 13px; color: var(--berry-dark); font: 900 clamp(16px, 3vw, 24px) "Courier New", monospace; letter-spacing: .04em; }
.activity-picker { width: min(100%, 540px); margin: 0 auto 16px; padding: 15px 16px 17px; background: rgba(255,247,242,.72); border: 2px solid rgba(216,47,113,.38); box-shadow: 4px 4px 0 rgba(158,34,86,.16); }
.activity-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .activity-option input { position: absolute; opacity: 0; } .activity-option span { display: block; padding: 8px 10px; color: var(--berry-dark); background: #fff; border: 2px solid #e07fa5; border-radius: 7px; cursor: pointer; font: 700 11px "Courier New", monospace; } .activity-option span:hover, .activity-option input:checked + span { color: var(--cream); background: var(--berry); border-color: var(--berry-dark); box-shadow: 2px 2px 0 var(--berry-dark); } .activity-option input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.lock-button { margin-top: 14px; padding: 10px 18px; color: var(--cream); background: var(--berry); border: 3px solid var(--berry-dark); border-radius: 8px; box-shadow: 3px 3px 0 var(--berry-dark); cursor: pointer; font: 900 12px "Courier New", monospace; text-transform: uppercase; } .lock-button:disabled { opacity: .45; cursor: not-allowed; box-shadow: 2px 2px 0 rgba(78,30,61,.3); } .lock-button:not(:disabled):hover { transform: translateY(-2px); }
.final-date { width: min(100%, 590px); margin: 18px auto 12px; } .final-heading-row { display: flex; align-items: center; justify-content: center; gap: 18px; } .final-copy h3 { margin: 13px 0 9px; color: var(--cream); font: 900 clamp(29px, 6vw, 44px) "Courier New", monospace; text-shadow: 3px 3px 0 var(--berry); } .date-summary { display: grid; gap: 7px; width: min(100%, 390px); margin: 0 auto; padding: 15px 17px; color: var(--berry-dark); background: rgba(255,247,242,.86); border: 3px solid #e07fa5; box-shadow: 4px 4px 0 rgba(158,34,86,.2); font: 700 12px/1.35 "Courier New", monospace; } .date-summary strong { color: var(--ink); font-size: 14px; }
.secret-note-tab { display: flex; align-items: center; gap: 7px; padding: 9px 11px 9px 8px; color: var(--cream); background: var(--berry); border: 3px solid var(--berry-dark); border-radius: 7px; box-shadow: 3px 3px 0 var(--berry-dark); cursor: pointer; font: 900 11px "Courier New", monospace; transform: rotate(3deg); animation: envelope-float 2.6s ease-in-out infinite; } .envelope-icon { display: inline-grid; place-items: center; width: 23px; height: 18px; color: var(--berry-dark); background: #fff7f2; border: 2px solid var(--berry-dark); font-size: 15px; line-height: 1; } .secret-note-tab:hover { animation-play-state: paused; transform: rotate(0) translateY(-2px); } .secret-note-tab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .love-letter { position: relative; width: min(100%, 500px); margin: 16px auto 0; padding: 24px 24px 18px; color: var(--ink); background: #fff7f2; border: 4px solid var(--berry-dark); box-shadow: 6px 6px 0 rgba(78,30,61,.26); text-align: left; animation: pop .35s ease-out both; } .love-letter p { margin: 0; font: 700 13px/1.6 "Trebuchet MS", system-ui, sans-serif; } .love-letter .letter-signoff { margin-top: 12px; text-align: right; font-family: "Courier New", monospace; color: var(--berry-dark); } .close-letter { position: absolute; top: 4px; right: 8px; border: 0; background: transparent; color: var(--berry-dark); cursor: pointer; font-size: 23px; }
.reset-link { border: 0; background: transparent; color: var(--berry-dark); font: 700 12px "Courier New", monospace; text-decoration: underline; cursor: pointer; padding: 8px; }
.cloud { position: absolute; pointer-events: none; z-index: 1; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud-back { bottom: 8%; width: 260px; height: 38px; background: rgba(248,234,244,.75); border-radius: 30px; filter: drop-shadow(0 8px 0 rgba(222,167,203,.2)); }
.cloud-back::before { width: 94px; height: 75px; left: 38px; bottom: 0; } .cloud-back::after { width: 115px; height: 62px; right: 22px; bottom: 0; }
.cloud-front { bottom: 2%; width: 350px; height: 55px; background: #fff0f4; border-radius: 30px; filter: drop-shadow(0 8px 0 rgba(227,159,195,.35)); }
.cloud-front::before { width: 130px; height: 94px; left: 44px; bottom: 0; } .cloud-front::after { width: 155px; height: 78px; right: 21px; bottom: 0; }
.cloud-back-one { left: -60px; } .cloud-back-two { right: -78px; bottom: 16%; transform: scale(.75); } .cloud-front-one { left: -105px; } .cloud-front-two { right: -125px; transform: scale(.82); }
.footer-note { position: absolute; bottom: 13px; z-index: 4; color: rgba(78,30,61,.48); font: 10px "Courier New", monospace; letter-spacing: .12em; text-transform: uppercase; }
.star, .sparkle { position: absolute; color: rgba(255,247,252,.9); z-index: 0; text-shadow: 0 0 6px rgba(255,255,255,.65); animation: twinkle 2.7s ease-in-out infinite; }
.star { font-size: 20px; } .sparkle { font: 700 25px "Courier New", monospace; } .star-one { top: 13%; left: 10%; } .star-two { top: 27%; right: 13%; animation-delay: 1s; } .star-three { top: 44%; left: 20%; animation-delay: .5s; } .sparkle-one { top: 19%; left: 4%; } .sparkle-two { top: 36%; right: 5%; animation-delay: 1.3s; }
.heart-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; } .floating-heart { position: absolute; bottom: -34px; color: rgba(216,47,113,.48); font-size: var(--heart-size); text-shadow: 2px 2px 0 rgba(255,247,242,.55); animation: float-heart var(--heart-duration) ease-in var(--heart-delay) forwards; }
@keyframes bob { 0%,100% { transform: translateY(3px); } 50% { transform: translateY(-5px); } } @keyframes twinkle { 0%,100% { opacity: .4; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(12deg); } } @keyframes pop { from { opacity: 0; transform: scale(.75) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes float-heart { 0% { opacity: 0; transform: translate(0, 0) scale(.65) rotate(-8deg); } 12% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--heart-drift), -110vh) scale(1.1) rotate(18deg); } }
@media (max-width: 520px) { .page-shell { padding: 22px 18px 42px; } .topbar { font-size: 9px; } .top-note { font-size: 10px; } .top-actions { gap: 6px; } .music-toggle { font-size: 9px; padding: 5px 6px; } .final-heading-row { gap: 8px; align-items: center; } .final-copy h3 { font-size: 28px; } .secret-note-tab { font-size: 9px; padding-right: 7px; } .love-letter { width: calc(100% - 12px); padding: 22px 18px 16px; } .love-letter p { font-size: 12px; } .invite-card { margin-top: 18px; } .character-frame { width: 166px; height: 160px; } .subcopy { font-size: 13px; } .actions { gap: 10px; } .pixel-button { min-width: 108px; padding-left: 13px; padding-right: 13px; } .no-wrap { min-width: 108px; } .no-message { width: 150px; font-size: 11px; } .gallery { gap: 7px; } .photo-art { height: 78px; font-size: 25px; } .gallery-card { padding: 5px 5px 7px; } .gallery-card p { font-size: 8px; } .planner-fields input { width: 132px; } .countdown { font-size: 16px; } .activity-options { gap: 6px; } .activity-option span { font-size: 10px; padding: 7px 8px; } .cloud-front { transform: scale(.7); } .cloud-front-two { transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }