:root{
  --bg:#0f1116;
  --bg2:#161922;
  --panel:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.10);
  --text:#f5f1ea;
  --muted:rgba(245,241,234,.66);
  --muted2:rgba(245,241,234,.42);
  --accent:#d9aca4;
  --accent2:#e8d7bf;
  --shadow:rgba(0,0,0,.36);
}

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

html,body{
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
  "Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:
    linear-gradient(rgba(8,10,14,.38), rgba(8,10,14,.38)),
    url("background.webp") center / cover no-repeat fixed;
}

body{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px 14px;
}

canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

#stars{z-index:0;opacity:.75}
#cursorTrail{z-index:1;opacity:.9}
#fireworks{z-index:5}

.page{
  position:relative;
  z-index:2;
  width:min(980px,100%);
}

.shell{
  overflow:visible;
}

.top{
  text-align:center;
  padding:clamp(28px,5vw,52px) clamp(22px,5vw,54px) 18px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.dot{
  width:7px;height:7px;border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 16px rgba(217,172,164,.55);
}

h1{
  font-size:clamp(32px,6.5vw,62px);
  line-height:1.08;
  font-weight:650;
  letter-spacing:.02em;
  margin-bottom:14px;
}

.since{
  color:var(--muted);
  font-size:clamp(14px,2.2vw,17px);
  line-height:1.8;
}

.main{
  padding:18px clamp(16px,4.5vw,50px) 28px;
}

.main-label{
  text-align:center;
  color:var(--muted);
  font-size:14px;
  letter-spacing:.16em;
  margin-bottom:20px;
}

.inline-timer-wrap{
  padding:18px 18px 16px;
}

.inline-timer{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:baseline;
  gap:14px 18px;
  text-align:center;
}

.inline-item{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
}

.num{
  display:inline-block;
  min-width:1.3em;
  text-align:right;
  font-size:clamp(34px,6vw,56px);
  line-height:1;
  font-weight:760;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  text-shadow:0 8px 22px rgba(0,0,0,.22);
}

.num.changed{
  animation:fadeUp .35s ease;
}

@keyframes fadeUp{
  from{opacity:.2;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.unit{
  font-size:clamp(18px,3vw,24px);
  font-weight:600;
  color:var(--text);
  opacity:.95;
  transform:translateY(-1px);
}

.summary{
  text-align:center;
  margin-top:18px;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}

.summary strong{
  color:var(--accent2);
  font-weight:600;
}

.milestones{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:6px clamp(16px,4.5vw,50px) 30px;
}

.milestone{
  padding:22px 22px 20px;
}

.milestone-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  color:var(--muted);
  font-size:14px;
}

.tag{
  padding:5px 10px;
  border-radius:999px;
  color:var(--accent2);
  font-size:12px;
  white-space:nowrap;
}

.countdown{
  font-size:clamp(24px,3.6vw,36px);
  line-height:1.25;
  font-weight:680;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  color:var(--text);
  margin-bottom:12px;
}

.date{
  color:var(--muted2);
  font-size:13px;
  line-height:1.7;
}

.bottom{
  padding:18px 22px 24px;
  text-align:center;
  color:var(--muted2);
  font-size:13px;
  line-height:1.8;
}

.click-tip{color:var(--muted)}

@media (max-width:760px){
  .milestones{grid-template-columns:1fr}
  .inline-timer{gap:12px 14px}
  .inline-timer-wrap{padding:14px 10px}
  .num{font-size:clamp(30px,8vw,46px)}
  .unit{font-size:clamp(16px,4.4vw,22px)}
}

@media (max-width:450px){
  body{padding:12px 8px}
  .inline-timer{gap:10px 12px}
  .milestone{padding:18px 18px 16px}
  .countdown{font-size:24px}
}