:root{
  --bg:#071426;
  --bg2:#0b1f39;
  --paper:#f8f3ea;
  --text:#223;
  --accent:#d4b06a;
  --white:#fdfdfd;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  min-height:100vh;
  overflow-x:hidden;
  background:radial-gradient(circle at top,#12345b 0%,var(--bg) 55%,#040b16 100%);
  color:var(--white);
  font-family:"Source Serif 4",serif;
}

#stars{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.45;
  background-image:
    radial-gradient(2px 2px at 15% 20%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 70% 10%,#fff,transparent),
    radial-gradient(2px 2px at 82% 35%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 25% 75%,#fff,transparent),
    radial-gradient(2px 2px at 55% 60%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 92% 82%,#fff,transparent);
  animation:twinkle 8s ease-in-out infinite alternate;
}

@keyframes twinkle{
  from{opacity:.25}
  to{opacity:.55}
}

#app{
  width:min(92%,900px);
  margin:auto;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:3rem 1.5rem;
}

.panel{text-align:center}

h1{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(3rem,7vw,4.8rem);
  margin-bottom:1rem;
}

.intro{
  max-width:560px;
  margin:auto;
  color:#d7dfec;
  line-height:1.8;
}

#openButton{
  margin-top:3rem;
  border:1px solid rgba(212,176,106,.7);
  background:rgba(255,255,255,.05);
  color:var(--accent);
  padding:1rem 2.8rem;
  border-radius:999px;
  font-size:1rem;
  cursor:pointer;
  transition:.3s ease;
  animation:pulse 2.4s infinite;
  backdrop-filter:blur(8px);
}

#openButton:hover{
  transform:translateY(-2px) scale(1.03);
  background:rgba(255,255,255,.08);
}

@keyframes pulse{
  0%,100%{box-shadow:0 0 0 rgba(212,176,106,0)}
  50%{box-shadow:0 0 18px rgba(212,176,106,.35)}
}

.hidden{display:none}

.letter{
  background:var(--paper);
  color:var(--text);
  border-radius:18px;
  padding:clamp(2rem,5vw,4rem);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  max-width:760px;
}

.letter h2{
  font-family:"Cormorant Garamond",serif;
  font-size:2.2rem;
  margin-bottom:2rem;
}

#typedLetter{
  white-space:pre-wrap;
  line-height:2;
  font-size:1.08rem;
}

.signature{
  margin-top:3rem;
}

#expiredSection{
  text-align:center;
}

@media (max-width:700px){
  .letter{padding:2rem 1.5rem}
}