:root {
  --ink: #38242d;
  --muted: #8d6977;
  --pink-50: #fff7fa;
  --pink-100: #ffeaf1;
  --pink-200: #ffd0df;
  --pink-300: #f7a7c2;
  --pink-400: #ea739c;
  --pink-500: #d94d7d;
  --red: #b83d61;
  --line: rgba(122, 61, 84, .15);
  --shadow: 0 24px 70px rgba(176, 77, 112, .13);
  --radius: 28px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--pink-50); font-family: "DM Sans", sans-serif; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .2; z-index: 50; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%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='.08'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
button, a, input { font: inherit; }
button, a { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.section-shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.loader { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; align-content: center; gap: 11px; color: #fff; background: linear-gradient(145deg, #eb7da3, #c94b7a); transition: opacity .8s ease, visibility .8s ease; }
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader p { margin: 30px 0 0; font-family: "Playfair Display", serif; font-size: clamp(1.4rem, 3vw, 2.1rem); }
.loader small { font-family: "DM Mono", monospace; font-size: .7rem; letter-spacing: .17em; text-transform: uppercase; opacity: .8; }
.loader-glow { position: absolute; width: min(65vw, 520px); height: min(65vw, 520px); border-radius: 50%; background: rgba(255, 255, 255, .13); filter: blur(4px); }
.loader-bow, .big-bow, .final-bow { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.loader-bow span, .big-bow span, .final-bow span { width: 82px; height: 66px; border: 2px solid rgba(255,255,255,.65); background: rgba(255,255,255,.22); }
.loader-bow span:first-child, .big-bow span:first-child, .final-bow span:first-child { border-radius: 72% 25% 72% 25%; transform: rotate(18deg); }
.loader-bow span:last-child, .big-bow span:last-child, .final-bow span:last-child { border-radius: 25% 72% 25% 72%; transform: rotate(-18deg); }
.loader-bow i, .big-bow i, .final-bow i { position: absolute; width: 25px; height: 25px; border-radius: 50%; background: #fff; box-shadow: 0 0 20px #fff; }
.loader-dots { display: flex; gap: 7px; margin-top: 10px; }
.loader-dots b { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
.loader-dots b:nth-child(2) { animation-delay: .2s; }.loader-dots b:nth-child(3) { animation-delay: .4s; }
.topbar { position: absolute; z-index: 5; top: 0; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; align-items: center; width: min(1120px, calc(100% - 48px)); height: 90px; }
.wordmark { font-family: "Playfair Display", serif; font-size: 1.55rem; font-weight: 700; }.wordmark span { color: var(--pink-500); margin-left: 4px; }
.nav-links { display: flex; gap: 27px; color: var(--muted); font-size: .77rem; font-weight: 600; letter-spacing: .04em; }.nav-links a { transition: color .2s; }.nav-links a:hover { color: var(--pink-500); }
.tiny-bow { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: var(--shadow); transition: transform .25s; }.tiny-bow:hover { transform: rotate(12deg) scale(1.1); }
.hero { position: relative; min-height: 830px; display: grid; grid-template-columns: 1fr .95fr; align-items: center; gap: 42px; padding-top: 90px; }
.hero-copy { position: relative; z-index: 2; }.eyebrow, .section-kicker { color: var(--pink-500); font-family: "DM Mono", monospace; font-size: .69rem; letter-spacing: .13em; text-transform: uppercase; }.eyebrow-dot { display: inline-block; width: 7px; height: 7px; margin: 0 8px; border-radius: 50%; background: var(--pink-300); }
h1, h2 { margin: 16px 0 0; font-family: "Playfair Display", serif; font-weight: 600; line-height: .98; letter-spacing: -.04em; } h1 { max-width: 650px; font-size: clamp(4rem, 8.3vw, 7.7rem); } h1 em, h2 em { color: var(--pink-500); font-style: italic; }.bow-mark { font-family: sans-serif; font-size: .35em; vertical-align: top; letter-spacing: 0; }
.hero-subtitle { margin: 27px 0 0; color: #5d414d; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.25; }.hero-note { margin: 17px 0 31px; color: var(--muted); font-size: .9rem; }
.primary-button, .secondary-button, .ghost-button, .chaos-button { border: 0; border-radius: 999px; transition: transform .24s ease, box-shadow .24s ease, background .24s ease; }.primary-button { padding: 15px 23px; color: #fff; background: var(--pink-500); box-shadow: 0 12px 24px rgba(217,77,125,.28); font-weight: 700; }.primary-button:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 30px rgba(217,77,125,.35); }.primary-button span { margin-left: 8px; }
.hero-art { position: relative; min-height: 530px; display: grid; place-items: center; }.hero-card { position: relative; z-index: 1; width: min(355px, 74vw); aspect-ratio: .77; padding: 24px; border: 1px solid rgba(255,255,255,.85); border-radius: 180px 180px 34px 34px; background: linear-gradient(155deg, #f9a9c3, #d95584); box-shadow: 22px 24px 0 rgba(221, 104, 144, .13), 0 35px 75px rgba(183,67,108,.26); transform: rotate(4deg); animation: bob 5s ease-in-out infinite; color: #fff; }.hero-card-top { display: flex; justify-content: space-between; font-family: "DM Mono", monospace; font-size: .7rem; letter-spacing: .15em; }.big-bow { margin: 100px 0 40px; }.big-bow span { width: 83px; height: 67px; }.big-bow i { width: 27px; height: 27px; background: var(--pink-200); box-shadow: 0 0 0 4px rgba(255,255,255,.26); }.hero-card p { margin: 0; font-family: "Playfair Display", serif; font-size: 2rem; line-height: .95; }.hero-card p strong { font-size: 2.55rem; }.hero-card-stars { position: absolute; bottom: 24px; left: 0; width: 100%; text-align: center; letter-spacing: 20px; opacity: .75; }
.orb { position: absolute; border-radius: 50%; filter: blur(1px); }.orb-one { width: 230px; height: 230px; top: 18%; right: 7%; background: rgba(247,167,194,.5); }.orb-two { width: 110px; height: 110px; bottom: 10%; left: 8%; background: rgba(255,226,235,.75); }.float-sticker { position: absolute; color: var(--pink-500); font-size: 2.1rem; animation: drift 4s ease-in-out infinite; }.sticker-one { left: 6%; top: 25%; }.sticker-two { right: 7%; bottom: 25%; color: #e887aa; animation-delay: .6s; }.sticker-three { left: 13%; bottom: 17%; font-size: 1.6rem; animation-delay: 1s; }.scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: var(--muted); font-family: "DM Mono", monospace; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }.scroll-cue span { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--pink-300); }
.intro-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.46); }.strip-inner { min-height: 105px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }.strip-label { color: var(--pink-500); font-family: "DM Mono", monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }.strip-inner p { margin: 0; max-width: 585px; color: var(--muted); font-size: .9rem; line-height: 1.6; }.strip-inner p strong { color: var(--ink); }.strip-sparkles { color: var(--pink-400); letter-spacing: 9px; }
.about-section, .messages-section, .silly-section { padding: 150px 0; }.section-heading { max-width: 590px; }.section-heading h2, .corner-heading h2, .note-card h2 { font-size: clamp(2.8rem, 5.5vw, 5rem); }.section-heading p, .corner-heading p { color: var(--muted); line-height: 1.6; }.about-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 52px; }.about-card { min-height: 260px; padding: 23px; border: 1px solid rgba(217,77,125,.13); border-radius: var(--radius); background: rgba(255,255,255,.72); box-shadow: 0 12px 36px rgba(183, 82, 117, .07); transition: transform .25s, box-shadow .25s; }.about-card:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: var(--shadow); }.about-card:nth-child(even) { transform: translateY(22px); }.about-card:nth-child(even):hover { transform: translateY(14px) rotate(1deg); }.card-icon { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 16px; color: var(--pink-500); background: var(--pink-100); font-size: 1.5rem; }.about-card h3 { margin: 29px 0 12px; font-size: 1.02rem; }.about-card p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.65; }
.corner-section { position: relative; isolation: isolate; overflow: hidden; padding: 130px 0 150px; color: #fff; background: linear-gradient(135deg, #ec7fa6, #c64b7c); }.corner-section::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .25; background: radial-gradient(circle at 10% 10%, #fff 0 1px, transparent 2px) 0 0/40px 40px; }.corner-cloud { position: absolute; width: 370px; height: 135px; border-radius: 50%; background: rgba(255,255,255,.12); filter: blur(2px); }.cloud-left { top: 20%; left: -140px; }.cloud-right { right: -160px; bottom: 14%; }.corner-heading { position: relative; z-index: 1; }.section-kicker.light { color: #ffe5ee; }.corner-heading h2 { color: #fff; }.corner-heading h2 em { color: #fff3f7; }.corner-heading p { color: #ffe5ee; }.button-row { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }.light-button { color: var(--red); background: #fff; }.ghost-button { padding: 14px 19px; color: #fff; border: 1px solid rgba(255,255,255,.5); background: transparent; font-size: .78rem; font-weight: 700; }.ghost-button:hover { background: rgba(255,255,255,.14); }.pink-stage { position: relative; min-height: 365px; margin-top: 65px; overflow: hidden; border: 1px solid rgba(255,255,255,.35); border-radius: 38px; background: linear-gradient(180deg, rgba(255,198,219,.43), rgba(255,240,246,.17)); }.pink-sun { position: absolute; top: 45px; left: 50%; width: 185px; height: 185px; transform: translateX(-50%); border-radius: 50%; background: #ffc8db; box-shadow: 0 0 70px rgba(255,255,255,.3); }.pink-window { position: absolute; z-index: 1; left: 50%; bottom: -25px; width: min(490px, 70%); height: 270px; transform: translateX(-50%); border: 8px solid #fff1f6; border-bottom: 0; border-radius: 120px 120px 0 0; background: #efa1be; box-shadow: 0 0 0 2px rgba(197,65,112,.14); }.window-bar { display: flex; gap: 7px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.35); }.window-bar span { width: 7px; height: 7px; border-radius: 50%; background: #fff; }.window-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 23px; color: #fff; font-family: "DM Mono", monospace; font-size: .6rem; text-transform: uppercase; }.window-content strong { grid-column: 1 / -1; margin-top: 22px; font-family: "Playfair Display", serif; font-size: 2rem; line-height: 1; text-transform: none; }.pink-cloud { position: absolute; width: 180px; height: 52px; border-radius: 50px; background: rgba(255,255,255,.37); }.pink-cloud::before, .pink-cloud::after { content: ""; position: absolute; bottom: 10px; border-radius: 50%; background: inherit; }.pink-cloud::before { left: 27px; width: 76px; height: 76px; }.pink-cloud::after { left: 88px; width: 58px; height: 58px; }.cloud-a { top: 130px; left: 8%; }.cloud-b { top: 195px; right: 6%; transform: scale(.8); }.stage-sticker { position: absolute; z-index: 2; font-size: 2.8rem; animation: drift 5s ease-in-out infinite; }.stage-bow { top: 32px; left: 9%; }.stage-flower { right: 13%; top: 44px; color: #fff7fb; animation-delay: .7s; }.stage-star { bottom: 27%; left: 22%; color: #fff; animation-delay: 1.2s; }
.envelope-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 52px; }.envelope { position: relative; min-height: 210px; padding: 18px; border: 1px solid rgba(217,77,125,.14); border-radius: 23px; color: var(--pink-500); background: #fff; box-shadow: 0 10px 30px rgba(183,82,117,.07); text-align: left; transition: transform .25s, background .25s; }.envelope:hover { transform: translateY(-7px); background: var(--pink-100); }.envelope-top { display: flex; justify-content: space-between; font-family: "DM Mono", monospace; font-size: .62rem; }.envelope-mark { position: absolute; left: 50%; top: 43%; transform: translate(-50%, -50%); font-size: 3.1rem; }.envelope p { position: absolute; left: 18px; right: 18px; bottom: 12px; margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.4; }.envelope.open { color: #fff; background: var(--pink-500); transform: translateY(-7px) rotate(1deg); }.envelope.open p { color: #fff; }
.silly-section { padding-top: 40px; }.silly-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 32px; align-items: stretch; margin-top: 52px; }.silly-menu { display: flex; flex-direction: column; gap: 10px; }.silly-button { min-height: 57px; padding: 0 18px; border: 1px solid var(--line); border-radius: 17px; color: var(--ink); background: rgba(255,255,255,.65); text-align: left; font-weight: 700; transition: .2s; }.silly-button span { display: inline-block; width: 28px; color: var(--pink-500); }.silly-button:hover, .silly-button.active { border-color: var(--pink-300); background: var(--pink-100); transform: translateX(5px); }.chaos-button { min-height: 57px; margin-top: 18px; color: #fff; background: var(--red); font-weight: 800; letter-spacing: .03em; }.chaos-button:hover { transform: rotate(-2deg) scale(1.02); box-shadow: 0 13px 25px rgba(184,61,97,.25); }.chaos-button span { float: right; }.silly-output { position: relative; display: flex; min-height: 320px; flex-direction: column; justify-content: center; padding: 40px; overflow: hidden; border-radius: 28px; background: linear-gradient(145deg, #fff, #ffe6ef); box-shadow: var(--shadow); }.output-label { color: var(--pink-500); font-family: "DM Mono", monospace; font-size: .67rem; letter-spacing: .13em; text-transform: uppercase; }.silly-output p { max-width: 520px; margin: 22px 0 0; color: var(--pink-500); background: linear-gradient(120deg, #c83d70, #ea739c 55%, #f7a7c2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: "Playfair Display", serif; font-size: clamp(1.9rem, 4vw, 3.3rem); line-height: 1.08; }.output-mark { position: absolute; right: 34px; bottom: 25px; color: var(--pink-300); font-size: 3rem; }
.note-section { padding: 80px 0 150px; }.note-wrap { display: grid; grid-template-columns: 100px 1fr 100px; align-items: center; gap: 20px; }.note-decor { color: var(--pink-400); font-size: 2.4rem; line-height: 1.8; text-align: center; }.note-decor.right { color: var(--pink-300); }.note-card { position: relative; padding: 65px clamp(28px, 7vw, 90px); overflow: hidden; border: 1px solid rgba(217,77,125,.16); border-radius: 31px; background: linear-gradient(135deg, #fff, #fff0f5); box-shadow: var(--shadow); }.note-card::after { content: "♡"; position: absolute; right: 35px; top: 22px; color: var(--pink-200); font-size: 3rem; }.note-card p { max-width: 750px; margin: 29px 0; color: #6e4c59; font-family: "Playfair Display", serif; font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.6; }.signature, .final-signature { color: var(--pink-500); font-family: "Playfair Display", serif; font-style: italic; font-size: 1.2rem; }
.guestbook-status { min-height: 1.3em; margin: 12px 0 0; color: var(--pink-500); font-size: .78rem; }
.guestbook-card button:disabled { cursor: wait; opacity: .65; }
.final-section { position: relative; isolation: isolate; min-height: 680px; display: grid; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(160deg, #ee82a8, #bd4677); }.final-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.25), transparent 25%), radial-gradient(circle at 20% 85%, rgba(255,218,232,.2), transparent 22%); }.final-content { position: relative; z-index: 2; text-align: center; }.final-bow { margin: 0 auto 40px; }.final-bow span { width: 57px; height: 46px; border-color: rgba(255,255,255,.7); }.final-bow i { width: 20px; height: 20px; }.final-content h2 { font-size: clamp(2.7rem, 6vw, 5.6rem); }.final-content h2 em { color: #fff; }.final-content > p:not(.section-kicker) { margin: 27px 0 8px; color: #ffe8f0; }.final-signature { display: block; margin-bottom: 30px; color: #fff; }.final-cloud { position: absolute; width: 420px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.12); filter: blur(1px); }.final-cloud-one { left: -120px; bottom: 13%; }.final-cloud-two { right: -140px; top: 16%; }.final-stars { position: absolute; top: 22%; width: 100%; color: rgba(255,255,255,.75); text-align: center; letter-spacing: 38px; }.final-flower { position: absolute; color: #ffd5e4; font-size: 4rem; }.flower-one { left: 13%; bottom: 17%; }.flower-two { right: 13%; top: 26%; font-size: 2.5rem; }
.extra-pink { --pink-50: #ffeaf3; --pink-100: #ffd4e4; --pink-200: #ffb8d1; --pink-300: #f58fb5; --pink-400: #e65f91; --pink-500: #c83d70; --red: #aa3158; background: var(--pink-50); }
.extra-pink .intro-strip { background: rgba(255, 214, 230, .6); }
.extra-pink .corner-section { background: linear-gradient(135deg, #f58db2, #b93168); }.extra-pink .pink-stage { box-shadow: 0 0 80px rgba(255, 255, 255, .28); }.extra-pink .about-card, .extra-pink .envelope { border-color: rgba(217,77,125,.35); }
.pink-power-button { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 17px 10px 12px; color: #b83d61; border: 1px solid rgba(255,255,255,.65); background: linear-gradient(135deg, #fff, #ffe3ed); box-shadow: 0 12px 24px rgba(93, 22, 53, .2); font-weight: 800; text-align: left; }.pink-power-button::after { content: ""; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(110deg, transparent, rgba(255,255,255,.75), transparent); transition: transform .5s ease; }.pink-power-button:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 18px 30px rgba(93, 22, 53, .28); }.pink-power-button:hover::after { transform: translateX(110%); }.pink-power-button[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, #b83d61, #e65f91); }.button-icon, .button-copy, .button-arrow { position: relative; z-index: 1; }.button-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: rgba(255,255,255,.72); font-size: 1.2rem; }.button-copy { display: grid; gap: 2px; }.button-copy strong { font-size: .82rem; }.button-copy small { color: var(--muted); font-size: .63rem; font-weight: 600; }.pink-power-button[aria-pressed="true"] .button-copy small { color: #ffe5ee; }.button-arrow { margin-left: 4px; font-size: 1.15rem; }
.kitty-section { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 55px; align-items: center; padding: 120px 0 90px; }.kitty-section::before { content: "♡  ✦  ♡"; position: absolute; top: 55px; right: 0; color: var(--pink-200); font-size: 1.4rem; letter-spacing: 18px; }.kitty-section-copy { max-width: 380px; }.kitty-section-copy h2 { font-size: clamp(2.8rem, 5vw, 4.5rem); }.kitty-section-copy p { color: var(--muted); line-height: 1.7; }.kitty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.kitty-card { position: relative; min-height: 265px; padding: 24px 19px; overflow: hidden; border: 1px solid rgba(217,77,125,.15); border-radius: 25px; background: linear-gradient(155deg, #fff, #fff0f5); box-shadow: 0 16px 40px rgba(183,82,117,.09); }.kitty-card::after { content: "✦"; position: absolute; right: 15px; top: 13px; color: var(--pink-300); }.kitty-card h3 { margin: 20px 0 9px; font-size: .98rem; }.kitty-card p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }.kitty-card:hover { transform: translateY(-8px) rotate(1deg); box-shadow: var(--shadow); }
.kitty-mascot, .kitty-float, .secret-kitty { position: relative; width: 86px; height: 76px; margin: 0 auto; color: var(--pink-500); }.kitty-face { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 0; display: grid; place-items: center; height: 57px; border: 2px solid currentColor; border-radius: 48% 48% 44% 44%; background: #fff; font-family: "DM Sans", sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: .12em; }.kitty-face::before, .kitty-face::after { content: ""; position: absolute; top: 25px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.kitty-face::before { left: 19px; }.kitty-face::after { right: 19px; }.kitty-ear { position: absolute; z-index: 0; top: 7px; width: 29px; height: 29px; border: 2px solid currentColor; background: #fff; transform: rotate(45deg); }.kitty-ear:first-child { left: 14px; }.kitty-ear:nth-child(2) { right: 14px; }.kitty-bow { position: absolute; z-index: 2; right: -7px; top: 19px; font-size: 1.45rem; transform: rotate(10deg); }.kitty-mascot { transition: transform .3s ease; animation: kittyFloat 4s ease-in-out infinite; }.kitty-card:hover .kitty-mascot { transform: rotate(-6deg) scale(1.08); }.kitty-mascot.sleepy { animation-delay: .7s; }.kitty-mascot.happy { animation-delay: 1.3s; }.kitty-float { position: absolute; z-index: 3; width: 74px; height: 66px; animation: kittyFloat 4.5s ease-in-out infinite; }.kitty-float-one { top: 14%; right: 8%; transform: rotate(9deg); }.stage-kitty { right: 12%; bottom: 24%; transform: rotate(-8deg) scale(.9); color: #fff; }.stage-kitty .kitty-face, .stage-kitty .kitty-ear { background: #fff4f8; }.secret-kitty { margin-bottom: 18px; transform: scale(1.15); animation: kittyPeek .8s ease-out both; }
.secret-box { width: min(520px, 100%); padding: 42px 36px 38px; border: 1px solid rgba(217,77,125,.16); background: linear-gradient(145deg, #fff8fb, #ffeaf2); }.secret-box h2 { margin-top: 13px; font-size: clamp(2.35rem, 7vw, 3.5rem); }.secret-box p { max-width: 390px; margin: 17px auto; }.secret-reveal { animation: revealNote .45s ease-out both; }
.reveal.visible.kitty-card { animation: cardPop .65s both; }
@keyframes kittyFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(4deg); } } @keyframes kittyPeek { from { opacity: 0; transform: translateY(12px) scale(.8); } to { opacity: 1; transform: translateY(0) scale(1.15); } } @keyframes cardPop { 0% { opacity: 0; transform: translateY(20px) scale(.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes revealNote { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.secret-modal { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(74,24,45,.35); backdrop-filter: blur(8px); }
.secret-modal[hidden] { display: none; }
.secret-box { position: relative; width: min(470px, 100%); padding: 48px 36px; border-radius: 27px; background: #fff8fb; box-shadow: 0 24px 80px rgba(74,24,45,.25); text-align: center; }.secret-box h2 { font-size: 2.8rem; }.secret-box p { color: var(--muted); line-height: 1.6; }.modal-close { position: absolute; top: 15px; right: 16px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--muted); background: var(--pink-100); font-size: 1.5rem; }.secret-reveal { margin-top: 24px; padding: 15px; border-radius: 14px; color: var(--pink-500) !important; background: var(--pink-100); font-family: "DM Mono", monospace; font-size: .72rem; }.toast { position: fixed; z-index: 90; left: 50%; bottom: 25px; padding: 13px 18px; border-radius: 999px; color: #fff; background: var(--red); box-shadow: 0 12px 25px rgba(184,61,97,.25); font-size: .8rem; transform: translate(-50%, 110px); transition: transform .35s ease; }.toast.show { transform: translate(-50%, 0); }.cursor-sparkle { position: fixed; z-index: 70; pointer-events: none; color: var(--pink-500); opacity: 0; transform: translate(-50%, -50%); transition: opacity .2s; }.falling-layer { position: fixed; z-index: 60; inset: 0; pointer-events: none; overflow: hidden; }.falling-item { position: absolute; top: -40px; color: var(--pink-500); animation: fall 3.8s linear forwards; }
.secret-modal:not([hidden]) .secret-box { animation: modalPop .42s cubic-bezier(.2,.8,.2,1) both; }.secret-modal:not([hidden]) { animation: modalFade .25s ease-out both; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }.reveal.visible { opacity: 1; transform: none; }
.memories-section { padding: 55px 0 145px; }.memory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }.memory-card { position: relative; min-height: 215px; padding: 28px; border: 1px solid rgba(217,77,125,.15); border-radius: 25px; background: linear-gradient(145deg, #fff, #fff0f5); box-shadow: 0 15px 38px rgba(183,82,117,.08); transition: transform .3s ease, box-shadow .3s ease; }.memory-card:nth-child(2) { transform: translateY(18px); }.memory-card:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: var(--shadow); }.memory-card:nth-child(2):hover { transform: translateY(10px) rotate(1deg); }.memory-card > span { color: var(--pink-400); font-family: "DM Mono", monospace; font-size: .7rem; letter-spacing: .12em; }.memory-card h3 { margin: 32px 0 11px; font-family: "Playfair Display", serif; font-size: 1.5rem; }.memory-card p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.65; }
.guestbook-section { padding: 10px 0 145px; }.guestbook-card { max-width: 760px; margin-top: 45px; padding: 28px; border: 1px solid rgba(217,77,125,.15); border-radius: 25px; background: linear-gradient(145deg, #fff, #fff0f5); box-shadow: 0 15px 38px rgba(183,82,117,.08); }.guestbook-card label { display: block; margin-bottom: 10px; color: var(--pink-500); font-family: "DM Mono", monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }.guestbook-row { display: flex; gap: 12px; }.guestbook-row input { flex: 1; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.8); }.saved-note { margin: 20px 0 0; padding: 15px 18px; border-radius: 16px; color: var(--pink-500); background: var(--pink-100); font-family: "Playfair Display", serif; font-size: 1.2rem; }
@keyframes bob { 0%,100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-14px); } } @keyframes drift { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-13px) rotate(5deg); } } @keyframes blink { 0%,100% { opacity: .25; } 50% { opacity: 1; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes notes { 0% { opacity: 0; transform: translateY(10px) rotate(-10deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-24px) rotate(14deg); } } @keyframes fall { to { top: 110%; transform: translateX(80px) rotate(360deg); opacity: 0; } }
@media (max-width: 850px) { .nav-links { display: none; }.hero { min-height: 920px; grid-template-columns: 1fr; padding-top: 120px; text-align: center; }.hero-copy { display: flex; flex-direction: column; align-items: center; }.hero-art { min-height: 470px; }.scroll-cue { bottom: 15px; }.kitty-section { grid-template-columns: 1fr; gap: 32px; padding-top: 90px; }.kitty-section-copy { max-width: 590px; }.about-grid { grid-template-columns: repeat(2, 1fr); }.memory-grid { grid-template-columns: repeat(2, 1fr); }.envelope-grid { grid-template-columns: repeat(3, 1fr); }.silly-layout { grid-template-columns: 1fr; }.note-wrap { grid-template-columns: 1fr; }.note-decor { display: none; }.note-card { padding: 42px 27px; }.strip-inner { flex-wrap: wrap; padding: 25px 0; } }
@media (max-width: 560px) { .section-shell, .topbar { width: min(100% - 30px, 1120px); }.topbar { height: 70px; }.hero { min-height: 810px; padding-top: 100px; }.hero-art { min-height: 400px; }.hero-card { width: min(290px, 78vw); }.big-bow { margin: 80px 0 35px; }.big-bow span { width: 67px; height: 55px; }.kitty-section { padding: 80px 0 60px; }.kitty-grid { grid-template-columns: 1fr; }.kitty-card { min-height: 220px; }.kitty-section::before { right: 10px; }.about-section, .messages-section, .silly-section { padding: 100px 0; }.memories-section { padding: 20px 0 100px; }.memory-grid { grid-template-columns: 1fr; margin-top: 35px; }.memory-card:nth-child(2) { transform: none; }.memory-card:nth-child(2):hover { transform: translateY(-8px) rotate(1deg); }.about-grid { grid-template-columns: 1fr; }.about-card:nth-child(even) { transform: none; }.about-card:nth-child(even):hover { transform: translateY(-8px) rotate(1deg); }.envelope-grid { grid-template-columns: repeat(2, 1fr); }.envelope { min-height: 180px; }.pink-window { width: 88%; }.window-content { padding: 17px; }.window-content strong { font-size: 1.55rem; }.corner-section { padding: 95px 0; }.silly-output { padding: 27px; min-height: 260px; }.silly-output p { font-size: 2.1rem; }.final-section { min-height: 610px; padding: 65px 20px; text-align: center; }.final-stars { letter-spacing: 10px; }.desktop-only { display: none; } }
@media (max-width: 560px) { .section-shell, .topbar { width: min(100% - 30px, 1120px); }.topbar { height: 70px; }.hero { min-height: 810px; padding-top: 100px; }.hero-art { min-height: 400px; }.hero-card { width: min(290px, 78vw); }.big-bow { margin: 80px 0 35px; }.big-bow span { width: 67px; height: 55px; }.kitty-section { padding: 80px 0 60px; }.kitty-grid { grid-template-columns: 1fr; }.kitty-card { min-height: 220px; }.kitty-section::before { right: 10px; }.about-section, .messages-section, .silly-section { padding: 100px 0; }.memories-section { padding: 20px 0 100px; }.memory-grid { grid-template-columns: 1fr; margin-top: 35px; }.memory-card:nth-child(2) { transform: none; }.memory-card:nth-child(2):hover { transform: translateY(-8px) rotate(1deg); }.about-grid { grid-template-columns: 1fr; }.about-card:nth-child(even) { transform: none; }.about-card:nth-child(even):hover { transform: translateY(-8px) rotate(1deg); }.envelope-grid { grid-template-columns: repeat(2, 1fr); }.envelope { min-height: 180px; }.pink-window { width: 88%; }.window-content { padding: 17px; }.window-content strong { font-size: 1.55rem; }.corner-section { padding: 95px 0; }.silly-output { padding: 27px; min-height: 260px; }.silly-output p { font-size: 2.1rem; }.guestbook-row { flex-direction: column; }.guestbook-row .primary-button { width: 100%; }.final-section { min-height: 610px; padding: 65px 20px; text-align: center; }.final-stars { letter-spacing: 10px; }.desktop-only { display: none; } }
@media (hover: none), (pointer: coarse) { .cursor-sparkle { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
.kitty-sky { position: fixed; z-index: 1; inset: 0; pointer-events: none; overflow: hidden; opacity: .5; }.kitty-sky span { position: absolute; color: var(--pink-300); font-size: 1.2rem; animation: kittyFloatAcross 12s ease-in-out infinite; }.kitty-sky span:nth-child(1) { left: 7%; top: 17%; animation-delay: -2s; }.kitty-sky span:nth-child(2) { left: 88%; top: 32%; animation-delay: -5s; }.kitty-sky span:nth-child(3) { left: 15%; top: 74%; animation-delay: -8s; }.kitty-sky span:nth-child(4) { left: 78%; top: 76%; animation-delay: -10s; }.kitty-sky span:nth-child(5) { left: 52%; top: 10%; animation-delay: -6s; } body::after { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 22%, rgba(255, 213, 229, .55) 0 2px, transparent 3px), radial-gradient(circle at 85% 68%, rgba(255, 213, 229, .5) 0 2px, transparent 3px); background-size: 120px 120px, 170px 170px; animation: backgroundTwinkle 8s ease-in-out infinite alternate; }.hero-card { border-color: rgba(255,255,255,.95); }.hero-card::before { content: "♡"; position: absolute; right: 28px; top: 82px; font-size: 1.8rem; color: rgba(255,255,255,.7); animation: heartbeat 2.2s ease-in-out infinite; }.kitty-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }.kitty-card:hover { border-color: var(--pink-400); }.section-kicker.light { letter-spacing: .16em; }
.nav-actions { display: flex; align-items: center; gap: 9px; }.theme-toggle { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--pink-500); background: rgba(255,255,255,.75); box-shadow: var(--shadow); transition: transform .25s, background .25s; }.theme-toggle:hover { transform: rotate(-12deg) scale(1.08); background: var(--pink-100); }
.night-kitty { --ink: #fff0f6; --muted: #d9a9bb; --pink-50: #241622; --pink-100: #422338; --pink-200: #663650; --pink-300: #b96d91; --pink-400: #ed8fb5; --pink-500: #ffb2ce; --red: #d95c89; --line: rgba(255, 190, 216, .2); --shadow: 0 24px 70px rgba(0, 0, 0, .28); background: var(--pink-50); }.night-kitty .topbar, .night-kitty .intro-strip, .night-kitty .about-card, .night-kitty .envelope, .night-kitty .silly-button, .night-kitty .note-card, .night-kitty .silly-output { background-color: rgba(51, 26, 43, .92); }.night-kitty .intro-strip { border-color: rgba(255, 190, 216, .24); background: #331a2b; }.night-kitty .strip-label, .night-kitty .strip-sparkles { color: #ffb2ce; }.night-kitty .strip-inner p, .night-kitty .section-heading p, .night-kitty .kitty-section-copy p, .night-kitty .memory-card p { color: #e6bfd0; }.night-kitty .hero-subtitle, .night-kitty .note-card p { color: #f0c9d9; }.night-kitty .envelope { color: #ffb2ce; border-color: rgba(255, 178, 206, .3); background: #331a2b; }.night-kitty .envelope p { color: #f0c9d9; }.night-kitty .envelope:hover, .night-kitty .silly-button:hover, .night-kitty .silly-button.active { background: #4b2740; }.night-kitty .envelope.open { color: #fff; background: #b84f7c; }.night-kitty .envelope.open p { color: #fff; }.night-kitty .pink-power-button { color: #5d2942; }.night-kitty .ghost-button { color: #fff0f6; border-color: rgba(255, 220, 232, .6); }.night-kitty .theme-toggle { color: #ffd36e; background: #422338; }.night-kitty .kitty-face, .night-kitty .kitty-ear { background: #fff6fa; }.night-kitty .kitty-sky { opacity: .8; }.night-kitty .corner-section, .night-kitty .final-section { filter: saturate(.92) brightness(.8); }
.night-kitty main { background: #241622; }.night-kitty .hero, .night-kitty .kitty-section, .night-kitty .about-section, .night-kitty .memories-section, .night-kitty .messages-section, .night-kitty .silly-section, .night-kitty .note-section { background: #241622; }.night-kitty .about-card h3, .night-kitty .memory-card h3, .night-kitty .silly-button { color: #fff0f6; }.night-kitty .about-card, .night-kitty .memory-card, .night-kitty .silly-output, .night-kitty .note-card { border-color: rgba(255, 178, 206, .22); }.night-kitty .memory-card { background: linear-gradient(145deg, #331a2b, #422338); }.night-kitty .silly-output { background: #331a2b; }.night-kitty .silly-output p { background: linear-gradient(120deg, #ffb2ce, #fff0f6 55%, #ed8fb5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }.night-kitty .silly-output .output-label { color: #ffb2ce; }.night-kitty .silly-output .output-mark { color: #ed8fb5; }.night-kitty .wordmark { color: #fff0f6; }
.night-kitty .guestbook-card { background: linear-gradient(145deg, #331a2b, #422338); border-color: rgba(255, 178, 206, .22); }.night-kitty .guestbook-row input { color: #fff0f6; background: #241622; border-color: rgba(255, 178, 206, .3); }.night-kitty .guestbook-row input::placeholder { color: #d9a9bb; }
@keyframes kittyFloatAcross { 0%,100% { transform: translate3d(0, 0, 0) rotate(-8deg); } 50% { transform: translate3d(12px, -18px, 0) rotate(8deg); } } @keyframes backgroundTwinkle { from { opacity: .45; } to { opacity: .9; } } @keyframes heartbeat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } } @keyframes modalPop { from { opacity: 0; transform: translateY(16px) scale(.94) rotate(-1deg); } to { opacity: 1; transform: none; } }
.note-card::after { content: "\2661"; }
.kitty-section::before { content: "\2661  \2726  \2661"; }
.kitty-card::after { content: "\2726"; }
.hero-card::before { content: "\2661"; }
.again-button { display: inline-flex; align-items: center; gap: 11px; min-height: 58px; padding: 9px 19px 9px 10px; color: var(--red); border: 1px solid rgba(255,255,255,.65); background: rgba(255,255,255,.9); box-shadow: 0 12px 26px rgba(92, 22, 53, .18); text-align: left; }.again-button:hover { transform: translateY(-4px); box-shadow: 0 18px 32px rgba(92, 22, 53, .25); }.again-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; color: #fff; background: var(--pink-500); font-size: 1.25rem; }.again-button > span:last-child { display: grid; gap: 1px; }.again-button strong { font-size: .82rem; }.again-button small { color: var(--muted); font-size: .62rem; font-weight: 600; }.night-kitty .again-button { color: #fff; border-color: rgba(255,220,232,.45); background: rgba(66,35,56,.92); }.night-kitty .again-button small { color: #e6bfd0; }
.pink-power-button { color: #fff; border-color: rgba(255,255,255,.38); background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,205,224,.28)); }
.pink-power-button .button-icon { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.16); }
.pink-power-button .button-copy small { color: #ffe5ee; }
.night-kitty .pink-power-button { color: #fff; border-color: rgba(255,220,232,.45); background: linear-gradient(135deg, rgba(255,178,206,.2), rgba(255,120,172,.28)); }
.pink-power-button { overflow: hidden; }
.pink-power-button::after { pointer-events: none; }
.kitty-sky span:nth-child(6) { left: 34%; top: 42%; animation-delay: -4s; font-size: 1.5rem; }
.kitty-sky span:nth-child(7) { left: 93%; top: 86%; animation-delay: -7s; }
.kitty-sky span:nth-child(8) { left: 4%; top: 58%; animation-delay: -1s; }
.kitty-sky span:nth-child(9) { left: 64%; top: 87%; animation-delay: -9s; }
.kitty-sky span:nth-child(10) { left: 43%; top: 68%; animation-delay: -3s; }
.love-reveal { animation: loveReveal .7s cubic-bezier(.2,.8,.2,1) both; }
.love-reveal p { font-size: clamp(2.2rem, 5vw, 4rem); }
@keyframes loveReveal { 0% { transform: scale(.96); box-shadow: 0 0 0 rgba(217,77,125,0); } 45% { transform: scale(1.02); box-shadow: 0 0 55px rgba(255, 132, 179, .55); } 100% { transform: scale(1); } }