@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');
:root {
  color-scheme: dark;
  --bg: #140d22;
  --white: #fff9fa;
  --pink: #ff9fbe;
  --pink-light: #ffd7e5;
  --border: rgba(255, 225, 242, .17);
  --font: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Playfair Display', Georgia, serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--white);
  background: radial-gradient(ellipse at 8% 10%, #372044 0%, transparent 36%), radial-gradient(ellipse at 100% 82%, #342039 0%, transparent 42%), var(--bg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible { outline: 3px solid #ffe3ef; outline-offset: 4px; }
.ambient { position: fixed; z-index: 0; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .36; }
.ambient-one { width: 25rem; height: 25rem; top: -12rem; right: -7rem; background: #ad4f88; }
.ambient-two { width: 26rem; height: 26rem; bottom: -12rem; left: -9rem; background: #78458e; }
.stars { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.stars span { position: absolute; color: #eab5da; opacity: .38; animation: twinkle 5s ease-in-out infinite; font-size: 1.2rem; }
.stars span:nth-child(1) { top: 17%; left: 10%; animation-delay: 1s; }
.stars span:nth-child(2) { top: 33%; right: 7%; animation-delay: 3s; }
.stars span:nth-child(3) { bottom: 16%; left: 13%; animation-delay: 2s; }
.stars span:nth-child(4) { bottom: 22%; right: 13%; animation-delay: 1.7s; }
.stars span:nth-child(5) { top: 11%; right: 36%; animation-delay: .2s; }
.stars span:nth-child(6) { bottom: 9%; right: 34%; animation-delay: 4s; }
.page-shell {
  position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; width: 100%; max-width: 1450px;
  margin: auto; padding: 29px clamp(20px, 5vw, 70px) 21px;
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: #f6e7f0; font-size: .9rem; letter-spacing: .02em; }
.brand strong { font-weight: 700; color: white; }
.brand-mark { font-family: Georgia, serif; display: grid; place-items: center; font-size: 1.45rem; color: #fda6cb; border: 1px solid #935b79; width: 36px; height: 36px; border-radius: 12px; }
.sound-button { display: flex; align-items: center; gap: 8px; color: #e7d1df; font-size: .77rem; letter-spacing: .025em; background: rgba(255,255,255,.07); border: 1px solid var(--border); border-radius: 999px; padding: 10px 13px; cursor: pointer; transition: background .2s, border-color .2s; }
.sound-button:hover { background: rgba(255,255,255,.12); }
.sound-icon { color: var(--pink-light); font-size: 1.1rem; line-height: 0; }
.sound-bars { display: flex; align-items: flex-end; gap: 2px; height: 13px; margin-left: 2px; }
.sound-bars i { display: block; width: 2px; height: 4px; border-radius: 5px; background: var(--pink); }
.sound-button.playing .sound-bars i { animation: meter 650ms ease-in-out infinite alternate; }
.sound-button.playing .sound-bars i:nth-child(2) { animation-duration: 450ms; animation-delay: .3s; }
.sound-button.playing .sound-bars i:nth-child(3) { animation-duration: 820ms; animation-delay: .1s; }
.story-layout { flex: 1; width: 100%; min-height: 610px; display: flex; align-items: center; justify-content: center; position: relative; padding: 32px 0 25px; }
.story-card {
  position: relative; width: min(100%, 775px); min-height: 550px;
  display: flex; flex-direction: column; padding: 27px clamp(25px, 5vw, 55px);
  background: linear-gradient(152deg, rgba(65, 42, 82,.88), rgba(31, 22, 49,.94) 54%, rgba(38, 26, 54,.91));
  border: 1px solid var(--border); border-radius: 30px;
  box-shadow: 0 29px 90px rgba(9,4,19,.38), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden; isolation: isolate;
}
.story-card::before { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; right: -108px; top: -145px; background: rgba(245,132,177,.09); filter: blur(18px); pointer-events: none; }
.story-card::after { content: ''; position: absolute; width: 350px; height: 350px; bottom: -300px; left: -150px; background: rgba(180,104,228,.08); border-radius: 50%; pointer-events: none; }
.card-top, .card-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.tiny-caps { display: flex; align-items: center; gap: 9px; font-size: .67rem; letter-spacing: .2em; font-weight: 700; color: #f7bfd5; }
.pulse-dot { flex: none; width: 7px; height: 7px; background: #f8a3bd; border-radius: 50%; box-shadow: 0 0 0 5px rgba(248,163,189,.12); }
.chapter { font-size: .72rem; color: #b8a6c6; white-space: nowrap; }
.slide-content { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; padding: 28px 0 21px; }
.slide-content.change { animation: slideIn .5s ease both; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,165,202,.1); color: #ffc3da; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding: 9px 13px; border: 1px solid rgba(255,185,213,.18); border-radius: 999px; margin-bottom: 19px; font-weight: 700; }
h1, h2, p { margin: 0; }
h1, h2 { font-family: var(--display); line-height: 1.16; font-weight: 600; letter-spacing: -.033em; text-wrap: balance; }
h1 { font-size: clamp(3.2rem, 8vw, 5.7rem); }
h2 { font-size: clamp(2.5rem, 6.5vw, 4.1rem); }
h1 .name, h2 .name { color: var(--pink); font-style: italic; }
.lead { max-width: 550px; color: #e8dce9; line-height: 1.77; font-size: clamp(.94rem, 1.8vw, 1.08rem); margin-top: 18px; text-wrap: pretty; }
.lead strong { color: #ffe2ed; font-weight: 700; }
.lead-followup { margin-top: 10px; }
.small-copy { margin-top: 17px; font-size: .79rem; line-height: 1.5; color: #cbb8d0; }
.hero-heart { font-size: 3.4rem; display: block; line-height: 1; margin-bottom: 13px; color: #ffb0cb; text-shadow: 0 10px 28px rgba(255,126,176,.37); animation: heartbeat 2.4s ease-in-out infinite; }
.big-emoji { font-size: 4.15rem; line-height: 1; margin-bottom: 17px; display: block; filter: drop-shadow(0 7px 15px rgba(248,150,182,.17)); }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 29px; }
.primary-button, .secondary-button, .back-button { border: 0; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease; }
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px); }
.primary-button { min-height: 49px; border-radius: 999px; background: linear-gradient(110deg, #ffbdd5, #ff90b9); color: #33152e; font-weight: 700; letter-spacing: .004em; padding: 14px 28px; box-shadow: 0 9px 22px rgba(249,107,163,.23); }
.primary-button:hover { box-shadow: 0 13px 30px rgba(249,107,163,.36); }
.primary-button:disabled, .secondary-button:disabled { opacity: .58; pointer-events: none; }
.secondary-button { min-height: 49px; border-radius: 999px; color: #f4d6e3; background: rgba(255,255,255,.06); padding: 14px 28px; border: 1px solid rgba(255,210,230,.25); }
.back-button { background: transparent; color: #c9b5d2; font-size: .79rem; margin-top: 17px; padding: 9px 15px; }
.back-button:hover { color: white; }
.music-hint { display: flex; align-items: center; gap: 7px; color: #bcaac4; font-size: .75rem; justify-content: center; margin-top: 18px; }
.card-bottom { padding-top: 11px; border-top: 1px solid rgba(255,255,255,.065); }
.progress { display: flex; gap: 7px; align-items: center; }
.progress span { display: block; width: 24px; height: 4px; border-radius: 20px; background: #55415d; transition: width .25s ease, background .25s ease; }
.progress span.active { background: #ffb1ce; width: 39px; }
.progress span.done { background: #ae7594; }
.footer-label { font-size: .66rem; color: #b09bb8; text-align: right; }
.site-footer { color: #a898b2; display: flex; justify-content: space-between; gap: 15px; font-size: .7rem; letter-spacing: .035em; }
.site-footer > span:last-child { color: var(--pink); font-size: 1.1rem; }
.tiny-note { position: absolute; color: #b6a0b9; font-size: .75rem; font-family: Georgia, serif; font-style: italic; line-height: 1.5; max-width: 125px; opacity: .72; }
.tiny-note span { display: block; font-family: var(--font); font-style: normal; font-weight: 700; font-size: .65rem; color: #edabca; }
.note-left { left: -16px; top: 37%; transform: rotate(-9deg); }
.note-right { right: -21px; bottom: 30%; transform: rotate(8deg); }
.saved-status { min-height: 1.5em; font-size: .76rem; line-height: 1.65; margin-top: 17px; color: #d7bfd5; }
.saved-status.good { color: #bce9d9; }
.saved-status.error { color: #ffc0c0; }
.shy-note { color: #f6b8d3; font-family: var(--display); font-style: italic; font-size: 1.3rem; margin-top: 17px; }
.heart-rain { pointer-events: none; position: fixed; z-index: 20; inset: 0; overflow: hidden; }
.heart-rain span { position: absolute; top: -20px; animation: fall 3.6s linear forwards; font-size: 1.4rem; }
@keyframes slideIn { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes heartbeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes twinkle { 0%,100% { opacity: .16; transform: scale(.8); } 50% { opacity: .65; transform: scale(1.25); } }
@keyframes meter { from { height: 3px; } to { height: 12px; } }
@keyframes fall { to { transform: translateY(110vh) rotate(280deg); opacity: 0; } }
@media (max-width: 1110px) { .tiny-note { display: none; } }
@media (max-width: 600px) {
  .page-shell { padding: 15px 14px max(15px, env(safe-area-inset-bottom)); }
  .brand { font-size: .82rem; }
  .sound-button { padding: 9px 11px; }
  .story-layout { min-height: 0; padding: 20px 0; }
  .story-card { min-height: min(570px, calc(100dvh - 154px)); padding: 22px clamp(17px, 5vw, 28px) 20px; border-radius: 25px; }
  .slide-content { padding: 24px 0; }
  .lead { line-height: 1.65; margin-top: 15px; }
  .lead-followup { margin-top: 8px; }
  .eyebrow { font-size: .59rem; letter-spacing: .1em; margin-bottom: 15px; }
  .footer-label { max-width: 175px; font-size: .58rem; }
  .card-top .chapter { font-size: .66rem; }
  .actions { gap: 10px; margin-top: 23px; }
  .primary-button, .secondary-button { font-size: .88rem; padding: 13px 18px; }
  .site-footer { font-size: .64rem; }
}
@media (max-width: 420px) {
  .story-card { border-radius: 22px; }
  h1 { font-size: clamp(2.9rem, 14vw, 3.75rem); }
  h2 { font-size: clamp(2.25rem, 10.2vw, 3.1rem); }
  .lead { font-size: .91rem; }
  .big-emoji { font-size: 3.6rem; }
  .eyebrow { padding: 7px 10px; }
  .proposal-actions { width: 100%; }
  .proposal-actions button { flex: 1 1 125px; }
}
@media (max-width: 345px) {
  .page-shell { padding-left: 10px; padding-right: 10px; }
  .brand { font-size: .73rem; }
  .chapter { display: none; }
  .tiny-caps { font-size: .59rem; }
  .story-card { padding-left: 16px; padding-right: 16px; }
  .proposal-actions button { flex-basis: 100%; }
  .slide-content { padding-block: 18px; }
}
@media (max-height: 620px) and (min-width: 601px) { .story-layout { min-height: 0; } .story-card { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }