:root{
  color-scheme:dark;

  --bg:#100b15;
  --bg2:#1c1221;

  --pink:#f3b6d5;
  --pink2:#d985b4;

  --gold:#f4d397;
  --gold2:#bc8d50;

  --text:#fff8fc;
  --muted:rgba(255,248,252,.60);

  --line:rgba(255,224,238,.13);

  font-family:
    Inter,
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  min-height:100vh;

  color:var(--text);

  background:
    radial-gradient(
      circle at 50% -15%,
      #3b213e 0,
      transparent 38%
    ),
    linear-gradient(
      180deg,
      var(--bg2),
      var(--bg)
    );

  overflow-x:hidden;
}

button,
input,
textarea{
  font:inherit;
}

a{
  color:inherit;
}

.page-glow{
  position:fixed;

  width:440px;
  height:440px;

  border-radius:50%;

  filter:blur(100px);

  opacity:.10;

  pointer-events:none;
}

.page-glow-a{
  left:-200px;
  top:20%;

  background:#ffacd8;
}

.page-glow-b{
  right:-220px;
  top:55%;

  background:#f8d79b;
}

.topbar{
  position:relative;
  z-index:5;

  display:flex;
  justify-content:space-between;
  align-items:center;

  width:min(1100px,calc(100% - 36px));

  margin:auto;

  padding:
    24px 0;
}

.brand{
  font-size:14px;
  font-weight:950;

  letter-spacing:.24em;

  text-decoration:none;
}

.back{
  color:var(--muted);

  font-size:9px;
  font-weight:900;

  letter-spacing:.16em;

  text-decoration:none;
}

main{
  position:relative;

  z-index:1;

  width:min(
    1050px,
    calc(100% - 30px)
  );

  margin:auto;
}

.hero{
  min-height:
    min(
      780px,
      calc(100vh - 70px)
    );

  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;

  padding:
    70px 10px 100px;

  text-align:center;
}

.eyebrow{
  margin:0;

  color:var(--gold);

  font-size:9px;
  font-weight:950;

  letter-spacing:.28em;
}

.anniversary-number{
  display:flex;
  align-items:flex-start;

  margin-top:18px;

  line-height:.8;
}

.anniversary-number span{
  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      130px,
      26vw,
      250px
    );

  font-style:italic;

  color:transparent;

  -webkit-text-stroke:
    1px
    rgba(248,216,158,.55);

  text-shadow:
    0 0 70px
    rgba(246,199,142,.08);
}

.anniversary-number small{
  margin-top:12px;

  color:var(--pink);

  font-family:Georgia,serif;

  font-size:
    clamp(
      24px,
      5vw,
      48px
    );

  font-style:italic;
}

.hero h1{
  margin:
    -6px 0 0;

  font-size:
    clamp(
      28px,
      8vw,
      66px
    );

  line-height:.95;

  letter-spacing:.11em;
}

.hero h1 span{
  display:block;

  margin-top:9px;

  color:var(--pink);

  font-size:.42em;

  letter-spacing:.34em;
}

.hero-copy{
  margin:
    30px 0 0;

  color:var(--muted);

  font-size:
    clamp(
      12px,
      3.2vw,
      15px
    );

  line-height:2;
}

.countdown{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:7px;

  width:
    min(
      530px,
      100%
    );

  margin-top:36px;
}

.countdown div{
  padding:
    16px 8px;

  border:
    1px solid
    var(--line);

  border-radius:18px;

  background:
    rgba(255,255,255,.025);

  backdrop-filter:
    blur(14px);
}

.countdown strong{
  display:block;

  color:var(--gold);

  font-size:
    clamp(
      23px,
      6vw,
      37px
    );

  font-weight:400;

  font-family:Georgia,serif;
}

.countdown span{
  display:block;

  margin-top:6px;

  color:
    rgba(255,255,255,.42);

  font-size:7px;
  font-weight:900;

  letter-spacing:.14em;
}

.anniversary-day{
  margin-top:34px;

  padding:
    22px 32px;

  border:
    1px solid
    rgba(245,212,153,.30);

  border-radius:24px;

  background:
    rgba(255,220,156,.05);
}

.anniversary-day span{
  color:var(--pink);

  font-size:23px;
}

.anniversary-day strong{
  display:block;

  margin-top:8px;

  color:var(--gold);

  font-size:
    clamp(
      18px,
      5vw,
      29px
    );

  letter-spacing:.08em;
}

.anniversary-day small{
  display:block;

  margin-top:5px;

  color:var(--muted);

  letter-spacing:.18em;
}

.hero-cta{
  margin-top:34px;

  padding:
    15px 24px;

  border:
    1px solid
    rgba(242,183,214,.32);

  border-radius:999px;

  background:
    rgba(243,182,213,.07);

  font-size:11px;
  font-weight:900;

  letter-spacing:.06em;

  text-decoration:none;
}

.message-section,
.board-section{
  width:
    min(
      780px,
      100%
    );

  margin:
    0 auto 120px;
}

.section-heading p,
.board-heading p{
  margin:0;

  color:var(--pink);

  font-size:8px;
  font-weight:950;

  letter-spacing:.20em;
}

.section-heading h2,
.board-heading h2{
  margin:
    8px 0 0;

  font-size:
    clamp(
      27px,
      7vw,
      45px
    );

  line-height:1.25;
}

.section-heading > span{
  display:block;

  margin-top:17px;

  color:var(--muted);

  font-size:12px;

  line-height:1.8;
}

.message-form{
  margin-top:32px;

  padding:
    clamp(
      20px,
      5vw,
      36px
    );

  border:
    1px solid
    var(--line);

  border-radius:28px;

  background:
    rgba(255,255,255,.025);

  box-shadow:
    0 25px 90px
    rgba(0,0,0,.20);
}

.message-form label{
  display:block;

  margin-bottom:23px;
}

.message-form label > span:first-child{
  display:flex;
  align-items:center;

  gap:8px;

  margin-bottom:9px;

  color:
    rgba(255,255,255,.75);

  font-size:9px;
  font-weight:950;

  letter-spacing:.16em;
}

.message-form label small{
  color:
    rgba(255,255,255,.34);

  font-weight:700;
}

.message-form input[type=text],
.message-form textarea{
  width:100%;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:15px;

  outline:none;

  color:#fff;

  background:
    rgba(0,0,0,.16);

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.message-form input[type=text]{
  padding:
    14px 15px;
}

.message-form textarea{
  min-height:180px;

  resize:vertical;

  padding:
    15px;

  line-height:1.8;
}

.message-form input:focus,
.message-form textarea:focus{
  border-color:
    rgba(243,182,213,.50);

  box-shadow:
    0 0 0 3px
    rgba(243,182,213,.05);
}

.message-form em{
  display:block;

  margin-top:7px;

  color:
    rgba(255,255,255,.35);

  font-size:8px;
  font-style:normal;

  text-align:right;
}

.public-check{
  display:flex!important;
  align-items:center;

  gap:10px;
}

.public-check input{
  width:17px;
  height:17px;

  accent-color:#e8a8c9;
}

.public-check span{
  margin:0!important;

  color:
    rgba(255,255,255,.65)!important;

  font-size:10px!important;

  letter-spacing:.02em!important;
}

.honeypot{
  position:absolute;

  left:-10000px;

  width:1px;
  height:1px;

  overflow:hidden;
}

.form-note{
  color:
    rgba(255,255,255,.38);

  font-size:9px;

  line-height:1.7;
}

.submit-button{
  width:100%;

  margin-top:9px;

  padding:
    15px;

  border:
    1px solid
    rgba(255,219,158,.35);

  border-radius:16px;

  color:#251821;

  background:
    linear-gradient(
      110deg,
      #efb6d2,
      #f3d69f
    );

  cursor:pointer;
}

.submit-button span{
  display:block;

  font-size:12px;
  font-weight:950;

  letter-spacing:.13em;
}

.submit-button small{
  display:block;

  margin-top:3px;

  font-size:8px;
  font-weight:800;

  opacity:.7;
}

.submit-button:disabled{
  opacity:.55;

  cursor:wait;
}

.form-status{
  min-height:20px;

  margin:
    11px 0 0;

  color:var(--pink);

  font-size:10px;

  text-align:center;
}

.sent-card{
  width:
    min(
      610px,
      100%
    );

  margin:
    -60px auto 120px;

  padding:
    40px 25px;

  border:
    1px solid
    rgba(255,218,157,.30);

  border-radius:30px;

  text-align:center;

  background:
    radial-gradient(
      circle at 50% 0,
      rgba(246,194,219,.15),
      transparent 48%
    ),
    rgba(255,255,255,.025);
}

.sent-label{
  margin:0;

  color:var(--pink);

  font-size:9px;
  font-weight:950;

  letter-spacing:.25em;
}

.sent-card > strong{
  display:block;

  margin-top:12px;

  color:var(--gold);

  font-size:
    clamp(
      27px,
      8vw,
      44px
    );

  font-family:Georgia,serif;
}

.sent-card > span{
  display:block;

  margin-top:18px;

  color:var(--muted);

  line-height:1.9;
}

.sent-card > small{
  display:block;

  margin-top:22px;

  color:
    rgba(255,255,255,.37);

  font-size:8px;

  letter-spacing:.16em;
}

.share-actions{
  display:flex;
  justify-content:center;

  gap:9px;

  margin-top:25px;
}

.share-actions button,
.share-actions a{
  padding:
    11px 15px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:999px;

  color:#fff;

  background:
    rgba(255,255,255,.04);

  font-size:9px;
  font-weight:900;

  text-decoration:none;

  cursor:pointer;
}

.board-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;

  gap:20px;

  margin-bottom:28px;
}

.message-total{
  flex:
    0 0 auto;

  text-align:right;
}

.message-total strong{
  display:block;

  color:var(--gold);

  font-family:Georgia,serif;

  font-size:36px;
}

.message-total span{
  display:block;

  color:
    rgba(255,255,255,.35);

  font-size:7px;
  font-weight:950;

  letter-spacing:.15em;
}

.message-board{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:12px;
}

.message-card{
  padding:
    20px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:21px;

  background:
    rgba(255,255,255,.022);
}

.message-card .quote{
  color:
    rgba(243,182,213,.62);

  font-size:25px;

  font-family:Georgia,serif;
}

.message-card p{
  min-height:70px;

  margin:
    6px 0 16px;

  color:
    rgba(255,255,255,.78);

  font-size:11px;

  line-height:1.9;

  white-space:pre-wrap;

  overflow-wrap:anywhere;
}

.message-card footer{
  display:flex;
  justify-content:space-between;

  gap:10px;

  margin:0;
  padding:0;

  border:0;

  color:
    rgba(255,255,255,.36);

  background:none;

  font-size:8px;
}

.board-loading,
.board-empty{
  grid-column:1/-1;

  padding:35px;

  color:
    rgba(255,255,255,.35);

  text-align:center;

  font-size:9px;

  letter-spacing:.12em;
}

.site-link{
  width:
    min(
      680px,
      100%
    );

  margin:
    0 auto 120px;

  text-align:center;
}

.site-link p{
  color:var(--pink);

  font-size:8px;
  font-weight:950;

  letter-spacing:.22em;
}

.site-link strong{
  display:block;

  margin-top:8px;

  font-size:
    clamp(
      24px,
      7vw,
      42px
    );
}

.site-link span{
  display:block;

  margin-top:20px;

  color:var(--muted);

  font-size:11px;

  line-height:1.9;
}

.site-link a{
  display:inline-block;

  margin-top:25px;

  padding:
    12px 19px;

  border:
    1px solid
    rgba(243,182,213,.25);

  border-radius:999px;

  font-size:9px;
  font-weight:900;

  text-decoration:none;
}

body > footer{
  display:flex;
  justify-content:space-between;

  gap:15px;

  width:
    min(
      1050px,
      calc(100% - 30px)
    );

  margin:auto;

  padding:
    30px 0;

  border-top:
    1px solid
    rgba(255,255,255,.06);

  color:
    rgba(255,255,255,.30);

  font-size:7px;

  letter-spacing:.13em;
}


@media(max-width:640px){

  .topbar{
    padding-top:
      max(
        20px,
        env(safe-area-inset-top)
      );
  }

  .hero{
    padding-top:45px;
  }

  .countdown div{
    padding:
      13px 3px;
  }

  .message-board{
    grid-template-columns:1fr;
  }

  .board-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .message-total{
    text-align:left;
  }

  .share-actions{
    flex-direction:column;
  }

  body > footer{
    flex-direction:column;
  }
}


/* =========================================================
   ANNIVERSARY SPECIAL MODE Ver.2
   ========================================================= */

.anniversary-special-copy{
  max-width:520px;

  margin:
    14px auto 0;

  color:
    rgba(255,255,255,.68);

  font-size:
    clamp(
      11px,
      3vw,
      14px
    );

  line-height:1.9;
}


body.is-anniversary-special-day .hero{
  position:relative;
}


body.is-anniversary-special-day .hero::before{
  content:"";

  position:absolute;

  inset:
    8% 8% auto;

  height:460px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(245,184,214,.20),
      rgba(242,211,154,.08) 35%,
      transparent 70%
    );

  filter:
    blur(30px);

  pointer-events:none;

  animation:
    anniversary-special-glow
    4s ease-in-out
    infinite alternate;
}


body.is-anniversary-special-day
.anniversary-day{
  position:relative;
  z-index:3;

  overflow:hidden;

  border-color:
    rgba(247,218,163,.52);

  background:
    linear-gradient(
      135deg,
      rgba(244,180,212,.12),
      rgba(242,211,154,.09)
    );

  box-shadow:
    0 0 80px
    rgba(236,179,211,.13);
}


body.is-anniversary-special-day
.anniversary-day::before{
  content:"";

  position:absolute;

  inset:-80% -20%;

  background:
    linear-gradient(
      105deg,
      transparent 38%,
      rgba(255,255,255,.16) 50%,
      transparent 62%
    );

  transform:
    translateX(-60%);

  animation:
    anniversary-shine
    4.5s ease-in-out
    infinite;

  pointer-events:none;
}


body.is-anniversary-special-day
.anniversary-day > *{
  position:relative;
  z-index:2;
}


body.is-anniversary-special-day
.anniversary-day strong{
  text-shadow:
    0 0 24px
    rgba(245,209,156,.20);
}


body.is-anniversary-thanks
.anniversary-day{
  border-color:
    rgba(240,185,214,.30);

  background:
    linear-gradient(
      135deg,
      rgba(236,181,209,.08),
      rgba(255,255,255,.025)
    );
}


.anniversary-special-particles{
  position:fixed;

  inset:0;

  z-index:999;

  overflow:hidden;

  pointer-events:none;
}


.anniversary-special-particles span{
  position:absolute;

  left:var(--x);
  top:-40px;

  color:
    rgba(244,208,162,.76);

  font-size:
    var(--size);

  opacity:0;

  animation:
    anniversary-particle-fall
    var(--duration)
    linear
    var(--delay)
    infinite;

  filter:
    drop-shadow(
      0 0 5px
      rgba(244,182,214,.22)
    );
}


.anniversary-special-particles
span:nth-child(3n){
  color:
    rgba(242,177,211,.78);
}


.anniversary-special-particles
span:nth-child(4n){
  color:
    rgba(255,255,255,.65);
}


@keyframes anniversary-particle-fall{

  0%{
    transform:
      translate3d(
        0,
        -50px,
        0
      )
      rotate(0deg);

    opacity:0;
  }

  10%{
    opacity:.85;
  }

  90%{
    opacity:.65;
  }

  100%{
    transform:
      translate3d(
        var(--drift),
        calc(100vh + 80px),
        0
      )
      rotate(360deg);

    opacity:0;
  }

}


@keyframes anniversary-special-glow{

  from{
    opacity:.55;

    transform:
      scale(.96);
  }

  to{
    opacity:1;

    transform:
      scale(1.04);
  }

}


@keyframes anniversary-shine{

  0%,
  55%{
    transform:
      translateX(-65%);
  }

  85%,
  100%{
    transform:
      translateX(65%);
  }

}


@media(
  prefers-reduced-motion:
  reduce
){

  .anniversary-special-particles{
    display:none;
  }

  body.is-anniversary-special-day
  .hero::before,

  body.is-anniversary-special-day
  .anniversary-day::before{
    animation:none;
  }

}



/* =========================================================
   ANNIVERSARY OWNER PREVIEW Ver.1
   ========================================================= */

.anniversary-preview-badge{
  position:fixed;

  z-index:10000;

  top:
    max(
      10px,
      env(safe-area-inset-top)
    );

  left:50%;

  display:flex;
  align-items:center;

  gap:12px;

  max-width:
    calc(100% - 24px);

  padding:
    10px 14px;

  border:
    1px solid
    rgba(244,211,151,.45);

  border-radius:999px;

  color:#fff;

  background:
    rgba(20,12,24,.94);

  box-shadow:
    0 12px 45px
    rgba(0,0,0,.35);

  backdrop-filter:
    blur(16px);

  transform:
    translateX(-50%);
}


.anniversary-preview-badge strong{
  color:#f2d39b;

  font-size:9px;

  letter-spacing:.12em;

  white-space:nowrap;
}


.anniversary-preview-badge span{
  color:
    rgba(255,255,255,.70);

  font-size:8px;

  white-space:nowrap;
}


.anniversary-preview-badge a{
  padding-left:11px;

  border-left:
    1px solid
    rgba(255,255,255,.12);

  color:#efb8d5;

  font-size:8px;
  font-weight:800;

  text-decoration:none;

  white-space:nowrap;
}


body.is-anniversary-owner-preview{
  padding-top:52px;
}


@media(max-width:600px){

  .anniversary-preview-badge{
    align-items:flex-start;
    flex-direction:column;

    gap:3px;

    width:
      calc(100% - 24px);

    border-radius:16px;
  }


  .anniversary-preview-badge a{
    margin-top:4px;
    padding:
      5px 0 0;

    border-top:
      1px solid
      rgba(255,255,255,.10);

    border-left:0;
  }


  body.is-anniversary-owner-preview{
    padding-top:96px;
  }

}



/* =========================================================
   OFFICIAL SITE GRAND OPEN COUNTDOWN Ver.1
   ========================================================= */

.site-launch-countdown{
  position:relative;

  width:
    min(
      680px,
      100%
    );

  margin:
    0 auto 80px;

  padding:
    clamp(
      24px,
      6vw,
      42px
    );

  overflow:hidden;

  border:
    1px solid
    rgba(244,211,151,.20);

  border-radius:28px;

  text-align:center;

  background:
    radial-gradient(
      circle at 80% 0,
      rgba(239,181,211,.12),
      transparent 45%
    ),
    rgba(255,255,255,.022);
}


.site-launch-countdown::after{
  content:"";

  position:absolute;

  width:240px;
  height:240px;

  right:-100px;
  bottom:-130px;

  border-radius:50%;

  background:
    rgba(240,208,153,.08);

  filter:
    blur(40px);

  pointer-events:none;
}


.site-launch-kicker{
  position:relative;
  z-index:1;

  margin:0;

  color:var(--pink);

  font-size:8px;
  font-weight:950;

  letter-spacing:.22em;
}


.site-launch-countdown h2{
  position:relative;
  z-index:1;

  margin:
    9px 0 0;

  color:var(--gold);

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      35px,
      10vw,
      58px
    );

  font-weight:400;

  letter-spacing:.08em;
}


.site-launch-copy{
  position:relative;
  z-index:1;

  margin:
    15px 0 0;

  color:var(--muted);

  font-size:11px;

  line-height:1.9;
}


.site-launch-timer{
  position:relative;
  z-index:1;

  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:7px;

  margin-top:24px;
}


.site-launch-timer > div{
  padding:
    13px 4px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:14px;

  background:
    rgba(0,0,0,.10);
}


.site-launch-timer strong{
  display:block;

  color:var(--gold);

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      21px,
      6vw,
      32px
    );

  font-weight:400;
}


.site-launch-timer span{
  display:block;

  margin-top:4px;

  color:
    rgba(255,255,255,.34);

  font-size:7px;
  font-weight:900;

  letter-spacing:.12em;
}


.site-launch-open{
  position:relative;
  z-index:1;

  margin-top:24px;

  padding:19px;

  border:
    1px solid
    rgba(244,211,151,.28);

  border-radius:17px;

  background:
    rgba(244,211,151,.05);
}


.site-launch-open span{
  color:var(--pink);

  font-size:18px;
}


.site-launch-open strong{
  display:block;

  margin-top:5px;

  color:var(--gold);

  font-size:
    clamp(
      16px,
      5vw,
      24px
    );
}


.site-launch-open a{
  display:inline-block;

  margin-top:13px;

  padding:
    9px 14px;

  border:
    1px solid
    rgba(239,184,213,.25);

  border-radius:999px;

  color:#fff;

  font-size:9px;
  font-weight:900;

  text-decoration:none;
}


.site-launch-countdown [hidden]{
  display:none !important;
}