.letter{
  background:
    radial-gradient(ellipse 70% 55% at 18% 12%, oklch(42% .07 62 / .55), transparent 58%),
    radial-gradient(ellipse 80% 40% at 80% 0%, oklch(30% .04 55 / .4), transparent 50%),
    var(--night);
  color:var(--night-text);overflow:hidden;
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
  position:relative;
}
.letter-inner{max-width:420px;margin:0 auto;padding:clamp(90px,13vh,150px) var(--pad-x);position:relative;z-index:1}
.letter-inner .kicker{color:var(--lamp)}
.letter-inner .kicker::before{background:var(--lamp)}

.phone{
  background:#1c1410;
  border:10px solid #2c1f19;
  border-radius:32px;
  padding:10px 10px 18px;
  box-shadow:
    0 0 0 1px rgba(255,220,180,.06),
    0 30px 60px -24px rgba(0,0,0,.55);
}
.phone-bar{
  height:16px;display:flex;justify-content:center;margin-bottom:4px;
}
.phone-bar span{width:78px;height:5px;border-radius:99px;background:#3a2a24}
.phone-head{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-size:.88rem;color:var(--night-text);
  padding:.35em 0 .85em;border-bottom:1px solid rgba(255,236,214,.08);margin-bottom:.85em;
}
.phone-head .avatar{
  width:22px;height:22px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, #f6d7c8, #d9a08c 55%, #b56c68);
}

.chat{display:flex;flex-direction:column;gap:10px;min-height:160px;padding:0 4px}
.chat .when{
  align-self:center;width:100%;text-align:center;
  font-size:.68rem;color:oklch(70% .02 70);font-family:var(--sans);
  margin:.15em 0 .35em;padding:0 8px;flex-shrink:0;
}
.chat .msg{
  max-width:78%;padding:8px 12px;font-size:.95rem;line-height:1.6;
  font-family:var(--sans);opacity:0;transform:translateY(8px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  position:relative;
}
.chat .msg.inview{opacity:1;transform:none}
.chat .msg.her{
  align-self:flex-start;background:var(--wx-you);color:#2a211c;
  border-radius:4px 12px 12px 12px;
}
.chat .msg.her::before{
  content:"";position:absolute;left:-6px;top:8px;
  border-style:solid;border-width:6px 8px 6px 0;border-color:transparent var(--wx-you) transparent transparent;
}
.chat .msg.him{
  align-self:flex-end;background:var(--wx-me);color:#173012;
  border-radius:12px 4px 12px 12px;
}
.chat .msg.him::after{
  content:"";position:absolute;right:-6px;top:8px;
  border-style:solid;border-width:6px 0 6px 8px;border-color:transparent transparent transparent var(--wx-me);
}

:root{interpolate-size:allow-keywords}
.letter-body{
  margin-top:1.4em;overflow:hidden;height:0;
  transition:height .55s var(--ease);
}
.letter-body.open{height:auto}
.letter-sheet{
  background:var(--paper);
  color:var(--ink);
  padding:26px 22px 22px;
  border-radius:3px;
  box-shadow:var(--shadow-lamp);
  transform:rotate(-.4deg);
}
.letter-body p{
  font-size:1.02rem;line-height:1.9;color:var(--ink-soft);
  margin-bottom:.9em;font-family:var(--serif);
}
.letter-body .sign{
  margin-top:1.1em;text-align:right;font-family:var(--latin);font-style:italic;
  color:var(--rose);font-size:1.05rem;
}
.letter-toggle{
  margin-top:1.3em;display:inline-flex;align-items:center;
  font-size:.82rem;font-family:var(--sans);color:var(--night-mute);
  border:1px solid color-mix(in oklab,var(--night-text) 20%, transparent);
  border-radius:99px;padding:.6em 1.3em;transition:.25s;min-height:44px;
}
.letter-toggle:hover{border-color:var(--lamp);color:var(--lamp)}

.ending-sec{
  background:var(--night-deep);color:var(--night-text);text-align:center;
  padding:clamp(120px,18vh,210px) var(--pad-x) clamp(80px,12vh,130px);
  position:relative;overflow:hidden;
  content-visibility:auto;
  contain-intrinsic-size:auto 500px;
}
.ending-sec .line1{font-size:clamp(1.25rem,2.8vw,1.9rem);font-weight:600;line-height:1.7}
.ending-sec .line2{
  font-size:clamp(2.2rem,6.4vw,4.4rem);font-weight:700;margin-top:.3em;color:var(--lamp);
}
.ending-sec .sign{
  margin-top:2em;font-family:var(--latin);font-style:italic;color:var(--night-mute);font-size:1rem;
}
.ending-sec .restart{
  margin-top:2.4em;display:inline-flex;
  font-size:.82rem;font-family:var(--sans);color:var(--night-mute);
  border:1px solid color-mix(in oklab,var(--night-text) 18%, transparent);
  border-radius:99px;padding:.65em 1.4em;min-height:44px;transition:.25s;
}
.ending-sec .restart:hover,.ending-sec .restart:focus-visible{border-color:var(--lamp);color:var(--lamp)}