@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,800;1,9..144,400&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  --bg: #fff6f1; --bg2: #ffe7ee; --bg3: #fdeee0;
  --card: rgba(255, 255, 255, .78); --card-solid: #fffdfb;
  --ink: #4b3042; --ink2: #6e5063; --muted: #a08494; --line: rgba(120, 70, 100, .14);
  --rose: #f0829a; --rose-d: #d9577a; --blush: #ffd9e0; --peach: #ffcfae; --lav: #d6c8ff;
  --mint: #bfe5cf; --sun: #ffe29a; --sky: #bfe0ff;
  --shadow: 0 14px 34px -16px rgba(176, 84, 120, .45);
  --shadow-s: 0 6px 16px -8px rgba(176, 84, 120, .35);
  --r: 22px;
  --f-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  color-scheme: light;
}
html[data-theme='dark'] {
  --bg: #1b1322; --bg2: #2a1a33; --bg3: #231729;
  --card: rgba(46, 31, 56, .72); --card-solid: #2b1d33;
  --ink: #f6e6ee; --ink2: #ddc3d1; --muted: #a58c9d; --line: rgba(255, 214, 232, .13);
  --rose: #ff94ac; --rose-d: #ff6f93; --blush: #4b2a3e; --peach: #6b4337; --lav: #473a6e;
  --mint: #28483a; --sun: #6b5a2a; --sky: #2a4160;
  --shadow: 0 14px 34px -16px rgba(0, 0, 0, .7); --shadow-s: 0 6px 16px -8px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
/* Gentle mode: migraine-friendly — dim, calm, no motion */
html[data-gentle='1'] body { filter: saturate(.72) brightness(.9); }
html[data-gentle='1'] *, html[data-gentle='1'] *::before, html[data-gentle='1'] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.5;
  background: radial-gradient(1200px 700px at 8% -10%, var(--bg2), transparent 60%), radial-gradient(900px 600px at 100% 0%, var(--bg3), transparent 55%), var(--bg);
  background-attachment: fixed;
  overflow-x: hidden;
}
h1, h2, h3, .display { font-family: var(--f-head); font-weight: 600; letter-spacing: -.01em; margin: 0 0 .3em; }
.hand { font-family: var(--f-hand); font-weight: 700; }
.muted { color: var(--muted); }
a { color: var(--rose-d); }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--blush); }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 10px;
  padding: 10px max(14px, env(safe-area-inset-left)); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom: 1px solid var(--line);
}
.nav .title { font-family: var(--f-head); font-weight: 600; font-size: 19px; display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav .title span.e { display: inline-block; animation: bob 3.2s ease-in-out infinite; }
.iconbtn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink); width: 40px; height: 40px; border-radius: 14px; cursor: pointer;
  display: inline-grid; place-items: center; font-size: 18px; transition: transform .2s, box-shadow .2s, background .2s; text-decoration: none; flex: none;
}
.iconbtn:hover { transform: translateY(-2px) rotate(-4deg); box-shadow: var(--shadow-s); }
.iconbtn.on { background: var(--blush); }

/* ---- surfaces ---- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 22px 16px 90px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.center { text-align: center; }
.hidden { display: none !important; }

/* ---- buttons / inputs ---- */
.btn {
  border: 1px solid var(--line); background: var(--card-solid); color: var(--ink); padding: 10px 18px; border-radius: 999px; cursor: pointer; font-weight: 700;
  transition: transform .18s, box-shadow .18s, background .18s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-s); }
.btn:active { transform: translateY(0) scale(.97); }
.btn.primary { background: linear-gradient(135deg, var(--rose), var(--rose-d)); color: #fff; border-color: transparent; box-shadow: 0 10px 22px -10px var(--rose-d); }
.btn.soft { background: var(--blush); }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 12px; font-size: 14px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
input, textarea, select {
  width: 100%; border: 1.5px solid var(--line); background: var(--card-solid); border-radius: 14px; padding: 10px 14px; outline: none; transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus { border-color: var(--rose); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rose) 22%, transparent); }
textarea { resize: vertical; min-height: 90px; }
label.f { display: block; font-weight: 700; font-size: 13px; color: var(--ink2); margin: 12px 0 5px; letter-spacing: .02em; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--blush); font-size: 13px; font-weight: 700; border: 1px solid var(--line); }
.tabs { display: flex; gap: 6px; padding: 5px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; width: fit-content; max-width: 100%; overflow-x: auto; }
.tabs { scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; }
.tabs button { border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-weight: 700; color: var(--ink2); white-space: nowrap; transition: background .2s, color .2s; }
.tabs button.on { background: linear-gradient(135deg, var(--rose), var(--rose-d)); color: #fff; box-shadow: var(--shadow-s); }

/* ---- modal / toast ---- */
.scrim { position: fixed; inset: 0; z-index: 100; background: rgba(40, 18, 36, .45); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; animation: fade .25s both; overflow-y: auto; }
.sheet { background: var(--card-solid); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); width: min(560px, 100%); max-height: 92vh; overflow-y: auto; padding: 24px; animation: pop .38s cubic-bezier(.2, 1.4, .4, 1) both; position: relative; }
.sheet .x { position: absolute; top: 12px; right: 12px; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 200; background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow); font-weight: 700; animation: toast 3s both; max-width: 90vw; text-align: center; }

/* ---- decor ---- */
.hearts-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hearts-layer i { position: absolute; bottom: -40px; font-style: normal; opacity: 0; animation: rise linear infinite; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; width: 100vw; height: 100vh; }
.skeleton { background: linear-gradient(90deg, var(--blush), var(--card-solid), var(--blush)); background-size: 200% 100%; animation: shimmer 1.6s infinite; border-radius: 14px; }

@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { from { opacity: 0; transform: scale(.88) translateY(14px) } to { opacity: 1; transform: none } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg) } 50% { transform: translateY(-4px) rotate(4deg) } }
@keyframes rise { 0% { transform: translateY(0) translateX(0) scale(.6) rotate(0); opacity: 0 } 12% { opacity: .55 } 100% { transform: translateY(-110vh) translateX(var(--dx, 30px)) scale(1.1) rotate(var(--rot, 25deg)); opacity: 0 } }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 20px) } 10%, 85% { opacity: 1; transform: translate(-50%, 0) } 100% { opacity: 0; transform: translate(-50%, 10px) } }
@keyframes shimmer { to { background-position: -200% 0 } }
@keyframes wiggle { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-6deg) } 75% { transform: rotate(6deg) } }
@keyframes heartbeat { 0%, 100% { transform: scale(1) } 14% { transform: scale(1.18) } 28% { transform: scale(1) } 42% { transform: scale(1.12) } 70% { transform: scale(1) } }

@media (max-width: 560px) { .wrap { padding: 16px 12px 90px; } .nav .title { font-size: 17px; } .sheet { padding: 20px 16px; border-radius: 22px; } }

.embed .wrap{padding-top:8px}