:root{
  --cream:#fbf7ed;
  --cream-2:#fffdf8;
  --ink:#20322c;
  --muted:#64756b;
  --green:#6f8f76;
  --sage:#dce7d9;
  --lavender:#cfc0df;
  --rose:#e5b9b3;
  --line:#d8dfd2;
  --white:#fffdf8;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,system-ui,sans-serif;
  color:var(--ink);
  background:
    linear-gradient(rgba(251,247,237,.72),rgba(251,247,237,.72)),
    url("oracle-floral-background.png") center center / cover no-repeat fixed;
  overflow-x:hidden;
}
.page-shell{
  min-height:100vh;
  display:grid;
  grid-template-rows:1fr auto 1fr;
  place-items:center;
  padding:36px 20px;
  position:relative;
}
.page-shell::before,
.page-shell::after{
  content:"";
  position:fixed;
  pointer-events:none;
  background:url("botanical-sprig.png") center/contain no-repeat;
  opacity:.28;
  z-index:0;
}
.page-shell::before{
  width:210px;
  height:370px;
  right:4vw;
  top:33vh;
  transform:rotate(-7deg);
}
.page-shell::after{
  width:180px;
  height:320px;
  left:8vw;
  top:8vh;
  transform:rotate(10deg) scaleX(-1);
  opacity:.18;
}
.ad-garden{
  width:min(760px,92vw);
  min-height:90px;
  border-radius:28px;
  opacity:.56;
  position:relative;
  pointer-events:none;
}
.ad-garden::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 50%, rgba(229,185,179,.14), transparent 22%),
    radial-gradient(circle at 54% 45%, rgba(220,231,217,.25), transparent 24%),
    radial-gradient(circle at 82% 58%, rgba(207,192,223,.14), transparent 24%);
  filter:blur(1px);
}
.oracle-card{
  width:min(620px,92vw);
  text-align:center;
  padding:52px 42px 44px;
  border:1px solid rgba(111,143,118,.24);
  border-radius:34px;
  background:rgba(255,253,248,.92);
  box-shadow:0 24px 80px rgba(69,85,71,.12);
  backdrop-filter:blur(10px);
  position:relative;
  z-index:2;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:11px;
  font-weight:600;
  color:var(--green);
  margin:0 0 18px;
}
h1{
  font-family:Fraunces,Georgia,serif;
  font-size:clamp(40px,7vw,70px);
  line-height:.95;
  margin:0 0 38px;
  letter-spacing:-.04em;
}
.question-form{display:grid;gap:14px}
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
textarea{
  width:100%;
  resize:none;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.80);
  padding:18px 20px;
  text-align:center;
  font:500 20px/1.35 Inter,sans-serif;
  color:var(--ink);
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
textarea:focus{
  border-color:var(--green);
  box-shadow:0 0 0 4px rgba(111,143,118,.14);
}
button{
  font:700 13px/1 Inter,sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
  border:0;
  cursor:pointer;
  border-radius:999px;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.primary-button{
  justify-self:center;
  background:var(--ink);
  color:var(--cream);
  padding:16px 28px;
  box-shadow:0 12px 28px rgba(32,50,44,.18);
}
.primary-button:hover,.secondary-button:hover,.close-button:hover{transform:translateY(-1px)}
.hidden{display:none!important}
.modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  z-index:10;
  padding:22px;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(32,50,44,.26);
  backdrop-filter:blur(8px);
}
.share-card{
  width:min(580px,92vw);
  min-height:360px;
  position:relative;
  text-align:center;
  padding:50px 38px 34px;
  border:1px solid rgba(111,143,118,.30);
  border-radius:34px;
  background:
    radial-gradient(circle at 12% 18%, rgba(229,185,179,.20), transparent 20%),
    radial-gradient(circle at 88% 82%, rgba(207,192,223,.24), transparent 24%),
    rgba(255,253,248,.94);
  box-shadow:0 30px 90px rgba(32,50,44,.25);
  overflow:hidden;
  animation:rise .28s ease both;
}
.share-card::before,
.share-card::after{
  content:"";
  position:absolute;
  width:190px;
  height:230px;
  opacity:.36;
  pointer-events:none;
  background:url("botanical-sprig.png") center/contain no-repeat;
  border-radius:999px;
  filter:saturate(.9) blur(.2px);
  z-index:0;
}
.share-card::before{left:-70px;bottom:-62px;transform:rotate(-12deg) scaleX(-1)}
.share-card::after{right:-56px;top:-58px;transform:rotate(14deg)}
.share-card .answer-text::before,
.share-card .answer-text::after{
  content:"";
  position:absolute;
  width:82px;
  height:105px;
  background:url("botanical-sprig.png") center/contain no-repeat;
  opacity:.18;
  pointer-events:none;
}
.share-card .answer-text::before{left:-60px;top:-40px;transform:rotate(18deg) scaleX(-1)}
.share-card .answer-text::after{right:-58px;bottom:-62px;transform:rotate(-14deg)}
.close-button{
  position:absolute;
  top:18px;
  right:18px;
  width:36px;
  height:36px;
  border:1px solid rgba(111,143,118,.22);
  background:rgba(255,255,255,.62);
  color:var(--muted);
  font-size:22px;
  line-height:1;
  letter-spacing:0;
  text-transform:none;
  z-index:2;
}
.card-kicker{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:11px;
  font-weight:700;
  color:var(--green);
  margin:0 0 28px;
  position:relative;
  z-index:1;
}
.answer-text{
  font-family:Fraunces,Georgia,serif;
  font-size:clamp(29px,5vw,45px);
  line-height:1.08;
  margin:0 auto;
  max-width:500px;
  white-space:pre-line;
  position:relative;
  z-index:1;
}
.actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:34px;
  position:relative;
  z-index:1;
}
.secondary-button{
  background:rgba(111,143,118,.12);
  color:var(--ink);
  padding:13px 18px;
  border:1px solid rgba(111,143,118,.22);
}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:740px){
  body{background-attachment:scroll;background-position:center top}
  .page-shell{padding:24px 16px;grid-template-rows:.7fr auto .7fr}
  .ad-garden{min-height:70px}
  .oracle-card{padding:40px 24px 34px;border-radius:26px}
  textarea{font-size:18px}
  .share-card{padding:46px 24px 28px;border-radius:28px}
  .actions{flex-direction:column}
  .secondary-button{width:100%}
}