@font-face { font-family: "Birthday Numbers"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/numbers.ttf") format("truetype"); }
@font-face { font-family: "Birthday Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/script.ttf") format("truetype"); }

:root {
  color-scheme: dark;
  --ink: #f5f4ed;
  --muted: #bfc9c2;
  --pink: #edb5c4;
  --line: rgb(228 239 230 / 18%);
  --serif: "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  --sans: "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #111d19; }
body { margin: 0; color: var(--ink); font-family: var(--sans); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--pink); outline-offset: 6px; }
button svg { width: 18px; height: 18px; stroke-width: 1.5; flex-shrink: 0; }
button:disabled { cursor: default; }
::selection { background: #edb5c4; color: #192820; }
[hidden] { display: none !important; }

.garden { position: fixed; inset: 0; overflow: hidden; z-index: -2; background: #111d19; }
.garden-image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 58%; animation: garden-breathe 32s ease-in-out infinite alternate; }
.garden-shade { position: absolute; inset: 0; background: rgb(9 23 17 / 75%); box-shadow: inset 0 0 180px 80px rgb(7 16 12 / 45%); }
.page { min-height: 100svh; display: flex; flex-direction: column; padding: 36px 64px 26px; }
.header { width: 100%; max-width: 1600px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); font-size: 16px; }
.brand-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgb(237 181 196 / 35%); border-radius: 50%; color: var(--pink); }
.brand-icon svg { width: 20px; height: 20px; stroke-width: 1.3; }
.brand small { display: block; font-family: Georgia, serif; font-size: 9px; color: var(--muted); margin-top: 5px; }
.header-right { display: flex; align-items: center; gap: 24px; }
.header-date { font-family: Georgia, serif; font-size: 11px; color: var(--muted); }
.header-date b { font-size: 19px; font-weight: 400; color: var(--ink); padding-left: 7px; }
.icon-button { display: grid; place-items: center; padding: 0; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); transition: background .2s, color .2s; }
.icon-button:hover { background: rgb(255 255 255 / 8%); color: var(--pink); }
.icon-button[aria-pressed="true"] { color: var(--pink); background: rgb(237 181 196 / 10%); }

.main { width: 100%; max-width: 900px; margin: auto; padding: 38px 0 36px; text-align: center; }
.occasion { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--muted); font-family: Georgia, serif; font-size: 10px; }
.occasion > span { width: 28px; height: 1px; background: var(--pink); opacity: .55; }
.title-wrap { margin-top: 25px; position: relative; }
.handwritten { margin: 0 0 -5px; font-family: "Birthday Script", "URW Chancery L", cursive; font-size: 35px; font-weight: 400; line-height: 1.2; color: var(--pink); transform: rotate(-5deg); }
h1 { font-family: var(--serif); font-size: 68px; font-weight: 400; line-height: 1.6; margin: 0; }
h1 > span { color: var(--pink); }
.intro { color: #d2dad3; font-size: 14px; font-weight: 300; margin: 12px 0 0; line-height: 1.8; }
.countdown-section { margin-top: 43px; }
.countdown-caption { font-size: 12px; color: var(--muted); margin: 0 0 16px; }
.countdown-caption strong { font-weight: 400; color: var(--pink); }
.countdown { display: grid; grid-template-columns: minmax(0, 1.2fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr); align-items: start; max-width: 716px; margin: 0 auto; }
.time-unit { min-width: 0; }
.number { display: block; height: 112px; line-height: 112px; font-size: 100px; font-family: "Birthday Numbers", "Times New Roman", serif; font-weight: 300; font-variant-numeric: tabular-nums lining-nums; }
.seconds { color: var(--pink); }
.separator { height: 112px; line-height: 96px; color: rgb(237 181 196 / 55%); font-family: Georgia, serif; font-size: 34px; font-weight: 400; }
.unit-label { display: block; padding-top: 12px; color: #d1dbd3; font-size: 12px; line-height: 20px; }
.unit-label small { display: block; font-family: Georgia, serif; color: #92a699; font-size: 8px; margin-top: 3px; }
.target-date { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; font-size: 10px; }
.target-date time { font-family: Georgia, serif; font-size: 12px; color: #cbd8ce; }
.timezone { color: #95a99c; }
.date-rule { height: 1px; width: 60px; background: var(--line); }
.waiting-note { margin-top: 36px; }
.tiny-flower { display: inline-flex; color: var(--pink); }
.tiny-flower svg { width: 21px; height: 21px; stroke-width: 1; }
.waiting-note p { margin: 12px 0 21px; font-family: var(--serif); font-size: 17px; line-height: 1.8; color: #e0e6df; }
.calendar-button { display: inline-flex; gap: 9px; align-items: center; justify-content: center; background: transparent; border: 1px solid rgb(237 181 196 / 30%); border-radius: 4px; color: #d3dcd4; padding: 11px 16px; font-size: 11px; min-height: 42px; transition: background .2s, border-color .2s; }
.calendar-button:hover { border-color: var(--pink); background: rgb(237 181 196 / 8%); }
.calendar-button > svg:first-child { color: var(--pink); width: 16px; height: 16px; }
.calendar-arrow { width: 13px; height: 13px; margin-left: 8px; color: #97ac9f; }
.birthday-message { font-family: var(--serif); font-size: 24px; line-height: 1.8; padding: 20px 12px; color: var(--pink); }
.is-birthday .handwritten { margin-bottom: 4px; }
.is-birthday .countdown-section { margin-top: 28px; }
.is-birthday .number { color: var(--pink); }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 1600px; margin: 0 auto; border-top: 1px solid var(--line); padding-top: 22px; font-size: 10px; color: #a9b9ad; }
.footer-note { display: inline-flex; gap: 8px; align-items: center; }
.footer-heart { color: var(--pink); font-size: 18px; }
.footer-sign { font-family: Georgia, serif; display: flex; gap: 12px; align-items: center; font-size: 9px; }
.footer-sign > span:last-child { color: var(--pink); }
.noscript { font-size: 12px; line-height: 1.8; color: var(--muted); }
.toast { position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 12px); background: #f1f3eb; color: #22372a; border-radius: 4px; box-shadow: 0 4px 20px rgb(0 0 0 / 20%); padding: 12px 20px; font-size: 12px; width: max-content; max-width: calc(100% - 40px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; z-index: 5; }
.toast.visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.heart-trail { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.floating-heart { position: absolute; color: var(--pink); font-family: Georgia, serif; font-size: 18px; animation: heart-rise 2.8s ease-out forwards; }
.enter { animation: appear 1s ease both; }
.title-wrap.enter { animation-delay: .1s; }
.intro.enter { animation-delay: .2s; }
.countdown-section.enter { animation-delay: .3s; }
.waiting-note.enter { animation-delay: .4s; }
.footer.enter { animation-delay: .5s; }
.motion-paused .garden-image { animation-play-state: paused; }
.motion-paused .enter { animation: none; }
.motion-paused .floating-heart { display: none; }

@keyframes appear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes garden-breathe { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes heart-rise { 0% { opacity: 0; transform: translate(-50%, 0) rotate(0); } 15% { opacity: .85; } 100% { opacity: 0; transform: translate(calc(-50% + var(--drift)), -160px) rotate(var(--turn)); } }

@media (min-width: 1700px) {
  .page { padding-top: 44px; padding-bottom: 32px; }
  .main { padding-top: 70px; padding-bottom: 70px; }
}

@media (max-height: 820px) and (min-width: 701px) {
  .page { padding-top: 25px; padding-bottom: 22px; }
  .main { padding: 25px 0; }
  .title-wrap { margin-top: 12px; }
  h1 { font-size: 56px; }
  .handwritten { font-size: 30px; }
  .countdown-section { margin-top: 22px; }
  .target-date { margin-top: 22px; }
  .waiting-note { margin-top: 20px; }
  .waiting-note p { margin-bottom: 16px; }
  .footer { padding-top: 12px; }
}

@media (max-width: 700px) {
  .page { padding: 24px 24px 20px; }
  .brand { gap: 9px; font-size: 13px; }
  .brand-icon { width: 34px; height: 34px; }
  .brand-icon svg { width: 17px; height: 17px; }
  .brand small { font-size: 7px; margin-top: 4px; }
  .header-right { gap: 13px; }
  .header-date { font-size: 8px; }
  .header-date b { font-size: 16px; padding-left: 3px; }
  .icon-button { width: 34px; height: 34px; }
  .icon-button svg { width: 16px; height: 16px; }
  .main { padding: 60px 0 47px; max-width: 470px; }
  .occasion { font-size: 8px; gap: 10px; }
  .occasion > span { width: 19px; }
  .title-wrap { margin-top: 30px; }
  .handwritten { font-size: 30px; margin-bottom: 3px; }
  h1 { font-size: 46px; line-height: 1.65; }
  .intro { font-size: 12px; margin-top: 10px; }
  .countdown-section { margin-top: 40px; }
  .countdown-caption { font-size: 11px; margin-bottom: 19px; }
  .countdown { grid-template-columns: minmax(0, 1.2fr) 8px minmax(0, 1fr) 8px minmax(0, 1fr) 8px minmax(0, 1fr); }
  .number { font-size: 52px; height: 64px; line-height: 64px; }
  .separator { height: 64px; line-height: 57px; font-size: 21px; }
  .unit-label { padding-top: 14px; font-size: 11px; }
  .unit-label small { font-size: 7px; margin-top: 1px; }
  .target-date { gap: 9px; margin-top: 24px; }
  .target-date time { font-size: 11px; }
  .timezone { font-size: 9px; }
  .date-rule { width: 27px; }
  .waiting-note { margin-top: 34px; }
  .waiting-note p { font-size: 15px; margin-top: 10px; margin-bottom: 22px; }
  .waiting-note p span { display: block; }
  .footer { padding-top: 17px; gap: 8px; font-size: 9px; }
  .footer-sign { font-size: 7px; gap: 5px; }
  .footer-heart { font-size: 15px; }
  .garden-image { object-position: 58% center; }
  .garden-shade { background: rgb(9 23 17 / 76%); box-shadow: inset 0 0 100px 25px rgb(7 16 12 / 45%); }
  .birthday-message { font-size: 19px; }
}

@media (max-width: 360px) {
  .page { padding-left: 18px; padding-right: 18px; }
  .header-date { display: none; }
  h1 { font-size: 41px; }
  .number { font-size: 46px; }
  .footer-sign { font-size: 6px; }
}

@media (max-width: 700px) and (max-height: 740px) {
  .page { padding-top: 20px; padding-bottom: 16px; }
  .main { padding: 20px 0 17px; }
  .title-wrap { margin-top: 17px; }
  h1 { line-height: 1.45; }
  .countdown-section { margin-top: 26px; }
  .countdown-caption { margin-bottom: 12px; }
  .unit-label { padding-top: 10px; line-height: 17px; }
  .target-date { margin-top: 20px; }
  .waiting-note { margin-top: 22px; }
  .waiting-note p { margin: 8px 0 15px; }
  .footer { padding-top: 12px; }
}

@media (max-width: 700px) and (max-height: 620px) {
  .page { padding-top: 16px; padding-bottom: 12px; }
  .main { padding: 8px 0 10px; }
  .title-wrap { margin-top: 12px; }
  .handwritten { font-size: 25px; }
  h1 { font-size: 40px; line-height: 1.3; }
  .intro { margin-top: 6px; }
  .countdown-section { margin-top: 18px; }
  .countdown-caption { margin-bottom: 8px; }
  .unit-label { padding-top: 6px; }
  .target-date { margin-top: 14px; }
  .waiting-note { margin-top: 16px; }
  .waiting-note p { margin: 6px 0 10px; font-size: 14px; line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .floating-heart { display: none; }
}