:root{
  --bg-1:#fff7fb; --bg-2:#fdeaf4;
  --ink:#4a3b42; --muted:#7b6b73;
  --accent:#e39bb8; --accent-2:#f6c7da;
  --highlight:#ffe9f3; --ring:#f2b7cf;
  --shadow-lg: 0 30px 60px rgba(227,155,184,.35), 0 12px 24px rgba(25,10,20,.18);
  --shadow-md: 0 18px 32px rgba(227,155,184,.28), 0 8px 16px rgba(25,10,20,.12);
  --r-2xl: 28px; --r-xl:20px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  display:grid; place-items:center;
  overflow-y:auto;
  overflow-x:hidden;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(255,255,255,.7), transparent 40%),
    radial-gradient(900px 700px at 110% 10%, rgba(255,255,255,.7), transparent 45%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  transition: background .9s ease, filter .9s ease;
}

/* Weather backgrounds */
body.weather-day.weather-clear{
  background:
    radial-gradient(900px 600px at 10% 0%, rgba(255,255,255,.85), transparent 55%),
    radial-gradient(900px 700px at 110% 10%, rgba(255,255,255,.7), transparent 60%),
    linear-gradient(180deg, #cbe9ff, #93c9ff 55%, #fbe9ff);
}
body.weather-day.weather-clouds{
  background:
    radial-gradient(900px 600px at 0% 0%, rgba(255,255,255,.9), transparent 55%),
    linear-gradient(180deg, #dbe4f2, #a5b3c9 60%, #f5e9f5);
}
body.weather-day.weather-rain{
  background:
    radial-gradient(900px 600px at 0% 0%, rgba(255,255,255,.7), transparent 55%),
    linear-gradient(180deg, #a3b3c7, #6b7a8e 60%, #3d4250);
}
body.weather-day.weather-snow{
  background:
    radial-gradient(1000px 700px at 10% 0%, rgba(255,255,255,.95), transparent 55%),
    linear-gradient(180deg, #e6f4ff, #c0d2e8 55%, #fdf7ff);
}
body.weather-day.weather-storm{ background: linear-gradient(180deg, #55586a, #323544 60%, #151726); filter: contrast(1.05) saturate(1.05) }
body.weather-day.weather-mist{ background: linear-gradient(180deg, #dde0e6, #b7bcc5 60%, #e8e3ec); filter: saturate(.9) }

body.weather-night.weather-clear{
  background:
    radial-gradient(900px 700px at 10% -10%, rgba(255,255,255,.13), transparent 60%),
    radial-gradient(900px 700px at 90% -10%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, #050717, #070b22 55%, #050712);
}
body.weather-night.weather-clouds{
  background:
    radial-gradient(900px 700px at 0% -10%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, #181b27, #141824 55%, #070812);
}
body.weather-night.weather-rain{ background: linear-gradient(180deg, #161927, #0f111e 60%, #05050b) }
body.weather-night.weather-snow{
  background:
    radial-gradient(900px 700px at 10% -10%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(180deg, #171b2a, #101321 55%, #060711);
}
body.weather-night.weather-storm{ background: linear-gradient(180deg, #1d1f2f, #050512 65%, #000); filter: contrast(1.1) saturate(1.08) }
body.weather-night.weather-mist{ background: linear-gradient(180deg, #131621, #161823 60%, #0c0d12); filter: saturate(.85) }

/* Rain/Snow overlay */
.weather-particles{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:2 }
.rain-layer,.snow-layer{ position:absolute; inset:0; opacity:0; transition:opacity .7s ease }
body.weather-rain .rain-layer, body.weather-storm .rain-layer{ opacity:1 }
body.weather-snow .snow-layer{ opacity:1 }
.raindrop{ position:absolute; width:2px; height:18px; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(163,193,255,.9)); opacity:0; top:-10vh; animation: raindrop 1.1s linear infinite }
@keyframes raindrop{ 0%{top:-10vh;opacity:0} 15%{opacity:1} 100%{top:110vh;opacity:0} }
.snowflake{ position:absolute; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.95); box-shadow:0 0 8px rgba(255,255,255,.9); opacity:0; top:-10vh; animation: snowflake 6s linear infinite }
@keyframes snowflake{ 0%{top:-10vh;transform:translateX(0);opacity:0} 10%{opacity:1} 60%{top:60vh;transform:translateX(12px);opacity:.9} 100%{top:110vh;transform:translateX(-8px);opacity:0} }

/* Scene + card */
.scene{ position:relative; width:min(92vw,780px); padding:32px; perspective:1200px; z-index:3 }
.floral{ position:absolute; inset:0; display:grid; place-items:center; z-index:0; opacity:.35; filter:blur(.3px) drop-shadow(0 10px 30px rgba(227,155,184,.35)); animation:spin 28s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
.floral svg{ width:min(68vw,560px); height:auto }

.card{
  position:relative; z-index:1;
  padding:clamp(22px,4vw,40px);
  border-radius:var(--r-2xl);
  background:
    radial-gradient(220% 140% at 10% 5%, rgba(255,255,255,.9), rgba(255,255,255,.75) 45%, rgba(255,255,255,.60)),
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.55));
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.7);
  outline:2px solid rgba(242,183,207,.35);
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease;
  animation:float 8s ease-in-out infinite;

  /* fixed box height ~90% of viewport */
  height:90vh;
  display:flex;
  flex-direction:column;
}
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.card:hover{ transform:translateY(-4px) rotateX(3deg) rotateY(-3deg); box-shadow:var(--shadow-md) }

.quote-mark{
  position:absolute; font-size:clamp(3.5rem, 8vw, 5rem); line-height:1; color:transparent;
  -webkit-text-stroke:1px var(--ring); text-stroke:1px var(--ring);
  opacity:.8; user-select:none; pointer-events:none; filter:drop-shadow(0 6px 10px rgba(227,155,184,.35));
}
.quote-mark.left{ top:-10px; left:-2px }
.quote-mark.right{ bottom:-22px; right:6px }

/* Weather pill */
.weather{ display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78)); box-shadow:0 14px 24px rgba(227,155,184,.25); border:1px solid rgba(255,255,255,.95); min-width:220px }
.weather-visual{ position:relative; width:50px; height:50px; border-radius:50%; overflow:hidden; background:radial-gradient(120% 120% at 30% 0%, #fff, #ffe9f3 52%, #f6c7da 100%); filter:drop-shadow(0 8px 16px rgba(227,155,184,.35)); transition:background .4s ease }
.weather-visual.is-night{ background:radial-gradient(120% 120% at 30% 0%, #fff, #3b3042 52%, #201827 100%) }
.sun,.moon{ position:absolute; width:26px; height:26px; border-radius:50%; top:10px; left:11px; box-shadow:0 0 16px rgba(255,255,255,.9); opacity:0; transform:translateY(10px) scale(.55); transition:opacity .45s ease, transform .45s ease }
.sun{ background:radial-gradient(circle at 30% 30%, #fffde7, #ffd169) }
.moon{ background:radial-gradient(circle at 30% 30%, #ffffff, #d2d5e8); box-shadow:0 0 16px rgba(210,213,232,.9) }
.weather-visual.is-day .sun{ opacity:1; transform:translateY(0) scale(1) }
.weather-visual.is-night .moon{ opacity:1; transform:translateY(0) scale(1) }
.cloud{ position:absolute; width:40px; height:22px; background:#ffffff; border-radius:999px; top:24px; left:4px; box-shadow:0 8px 12px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.8); opacity:0; transform:translateX(-6px); transition:opacity .4s ease }
.cloud::before,.cloud::after{ content:""; position:absolute; background:#fff; border-radius:999px }
.cloud::before{ width:22px; height:22px; left:4px; top:-10px }
.cloud::after{ width:18px; height:18px; right:4px; top:-8px }
.cloud-1{ animation:cloud-drift 22s linear infinite }
.cloud-2{ top:18px; left:10px; transform:scale(.85); animation:cloud-drift 26s linear infinite reverse }
@keyframes cloud-drift{ 0%{ transform:translateX(-12px) } 50%{ transform:translateX(6px) } 100%{ transform:translateX(-12px) } }
.rain,.snow,.storm{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s ease }
.rain .drop{ position:absolute; width:3px; height:12px; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(123,171,255,.9)); top:-8px; left:16px; animation: rain-fall 1.1s linear infinite }
.rain .drop.d2{ left:24px; animation-delay:.2s } .rain .drop.d3{ left:32px; animation-delay:.4s }
@keyframes rain-fall{ 0%{ transform:translateY(-6px); opacity:0 } 15%{ opacity:1 } 100%{ transform:translateY(30px); opacity:0 } }
.snow .flake{ position:absolute; width:6px; height:6px; border-radius:50%; border:1px solid rgba(255,255,255,.9); box-shadow:0 0 6px rgba(255,255,255,.9); top:-6px; left:16px; animation:snow-fall 2.4s linear infinite }
.snow .flake.f2{ left:26px; animation-delay:.4s } .snow .flake.f3{ left:34px; animation-delay:.9s }
@keyframes snow-fall{ 0%{ transform:translateY(-4px) translateX(0); opacity:0 } 20%{ opacity:1 } 60%{ transform:translateY(24px) translateX(3px) } 100%{ transform:translateY(34px) translateX(-3px); opacity:0 } }
.storm .bolt{ position:absolute; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:18px solid #ffe066; left:26px; top:12px; transform:skewX(-12deg); filter:drop-shadow(0 0 10px rgba(255,224,102,.9)); animation:bolt-flash 1.8s infinite }
@keyframes bolt-flash{ 0%,60%,100%{ opacity:0; transform:translateY(0) skewX(-12deg) } 5%,10%{ opacity:1; transform:translateY(2px) skewX(-12deg) } 15%{ opacity:.2 } }

/* Quote carousel — fills remaining vertical space */
.carousel{
  position:relative;
  margin-top:18px;
  padding-bottom:52px;          /* room for arrows */
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.carousel .viewport{
  flex:1;
  min-height:0;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.carousel .viewport::-webkit-scrollbar{ width:0; height:0 }

.carousel .track{
  display:flex;
  align-items:stretch;
  min-height:0;
  height:100%;
}
.carousel .slide{
  position:relative;
  flex:0 0 100%;
  scroll-snap-align:center;
  padding:6px 4px;
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* Quote text scrolls vertically when long */
blockquote{
  margin:0;
  position:relative;
  font-size:clamp(1.05rem, 2.2vw, 1.45rem);
  color:var(--ink);
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-right:6px;

  /* hide scrollbar by default (desktop) */
  scrollbar-width:none;
}
blockquote::-webkit-scrollbar{
  width:0;
  height:0;
}

/* Arrows */
.carousel .arrow{
  position:absolute; bottom:8px; top:auto; transform:none;
  width:38px; height:38px; border:none; border-radius:999px; cursor:pointer;
  background:linear-gradient(180deg,#fff,var(--highlight));
  box-shadow:0 10px 18px rgba(227,155,184,.35), 0 2px 6px rgba(0,0,0,.06);
  outline:1px solid rgba(242,183,207,.6);
  z-index:2;
}
.carousel .arrow:active{ transform:scale(.98) }
.carousel .prev{ left:10px } .carousel .next{ right:10px }

.actions{ margin-top:14px; display:flex; gap:12px; flex-wrap:wrap }
.btn{
  border:0; cursor:pointer; padding:10px 16px; border-radius:999px;
  background:linear-gradient(180deg,#fff,var(--highlight));
  color:var(--ink); font-weight:600;
  box-shadow:0 10px 18px rgba(227,155,184,.35), 0 2px 6px rgba(0,0,0,.06);
  outline:1px solid rgba(242,183,207,.6);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0); box-shadow:0 6px 12px rgba(227,155,184,.25),0 1px 3px rgba(0,0,0,.08) }

/* About modal */
.about-backdrop[hidden]{ display:none }
.about-backdrop{
  position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  padding:16px; background:radial-gradient(circle at 10% 0, rgba(255,255,255,.4), transparent 55%), rgba(20,10,20,.35);
  backdrop-filter:blur(8px);
}
.about-card{
  position:relative; max-width:480px; width:100%; padding:20px 22px 18px; border-radius:var(--r-xl);
  background:
    radial-gradient(180% 160% at 0% 0%, rgba(255,255,255,.96), rgba(255,255,255,.8) 40%, rgba(255,255,255,.75)),
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.7));
  box-shadow:var(--shadow-md); border:1px solid rgba(255,255,255,.85); outline:1px solid rgba(242,183,207,.65);
  max-height:80vh; overflow-y:auto;
}
.about-title{ margin:0 0 6px; font-size:1.1rem }
.about-sub{ margin:0 0 12px; font-size:.9rem; color:var(--muted) }
.about-body{ font-size:.9rem; white-space:pre-line }
.about-close{ position:absolute; top:10px; right:10px; border:0; background:transparent; font-size:1.1rem; cursor:pointer; line-height:1; color:var(--muted) }
.about-close:hover{ color:var(--ink) }

/* MOBILE: show a visible vertical scrollbar inside the quote */
@media (max-width:600px){
  .scene{ padding-inline:18px }
  .carousel{ padding-bottom:60px }
  .carousel .arrow{ width:34px; height:34px }

  blockquote{
    scrollbar-width:thin;              /* Firefox */
  }
  blockquote::-webkit-scrollbar{
    width:6px;                         /* iOS/Chrome */
  }
  blockquote::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.18);
    border-radius:999px;
  }
  blockquote::-webkit-scrollbar-track{
    background:rgba(255,255,255,.55);
    border-radius:999px;
  }
}

@media (prefers-reduced-motion:reduce){
  .floral,.card,.cloud-1,.cloud-2,.rain .drop,.snow .flake,.storm .bolt,.raindrop,.snowflake{ animation:none!important }
}