:root {
  color-scheme: light;
  --serif: "Iowan Old Style", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --sans: "Avenir Next", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --bg: #f5ecde;
  --text: #302820;
  --muted: #756a61;
  --accent: #b85f45;
  --control-bg: rgba(255,255,255,.46);
  --control-line: rgba(56,45,36,.18);
  --scene-shift-x: 0px;
  --scene-shift-y: 0px;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
html { background: var(--bg); }
body {
  margin: 0; color: var(--text); background: var(--bg);
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
  transition: color .55s ease, background-color .55s ease;
}
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 50; left: 20px; top: 14px; padding: 10px 14px; color: #fff; background: #211c18; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.birthday-cover {
  position: relative; min-height: 100dvh; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(25px,3.8vh,46px) clamp(32px,5.5vw,92px) clamp(24px,3.5vh,42px);
  isolation: isolate;
}

.scene { position: absolute; z-index: -2; inset: -20px; overflow: hidden; background: var(--bg); }
.scene::after {
  position: absolute; inset: 0; content: ""; pointer-events: none;
  background: rgba(255,255,255,0);
  transition: background-color .6s ease;
}
.scene-image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center; transform: translate3d(var(--scene-shift-x),var(--scene-shift-y),0) scale(1.035);
  transition: opacity .72s cubic-bezier(.2,.75,.2,1), transform 1.8s cubic-bezier(.2,.75,.2,1), filter .6s ease;
  will-change: opacity, transform;
}
.scene-image-next { opacity: 0; }
.scene.is-switching .scene-image-current { opacity: 0; transform: translate3d(calc(var(--scene-shift-x) * -.4),var(--scene-shift-y),0) scale(1.055); }
.scene.is-switching .scene-image-next { opacity: 1; }
.atmosphere {
  position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover;
  pointer-events: none; opacity: 0; mix-blend-mode: screen;
  transform: translate3d(0,0,0) scale(1.02); will-change: opacity, transform, filter;
}
.paw-trail { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.trail-paw {
  position: absolute; left: var(--paw-left); top: var(--paw-top); width: var(--paw-size);
  height: auto; opacity: 0; transform: translate(-50%,-50%) rotate(var(--paw-angle)) scale(.72);
  filter: sepia(.08) saturate(.82) drop-shadow(0 4px 8px rgba(103,61,43,.12));
  animation: pawMemory var(--paw-life) cubic-bezier(.2,.72,.2,1) forwards;
  will-change: opacity, transform;
}

.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 26px; }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; font: 650 14px/1 var(--sans); letter-spacing: .18em; }
.brand i { width: 28px; height: 1px; background: var(--accent); }

.theme-switcher { display: flex; align-items: center; gap: 14px; }
.switcher-label { color: var(--muted); font: 500 10px/1 var(--sans); letter-spacing: .08em; }
.theme-switcher > div {
  display: flex; padding: 4px; border: 1px solid var(--control-line); border-radius: 5px;
  background: var(--control-bg); backdrop-filter: blur(16px) saturate(120%);
}
.theme-switcher button {
  display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px;
  border: 0; border-radius: 3px; background: transparent; cursor: pointer;
  font: 550 11px/1 var(--sans); letter-spacing: .05em;
  transition: color .22s ease, background-color .22s ease, transform .22s ease;
}
.theme-switcher button:hover { transform: translateY(-1px); }
.theme-switcher button[aria-pressed="true"] { color: var(--bg); background: var(--text); }
.theme-switcher button i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }

.hero { align-self: center; width: min(48vw,680px); padding: 56px 0 32px; }
.hero.is-entering > * { animation: textArrive .62s cubic-bezier(.2,.75,.2,1) both; }
.hero.is-entering > *:nth-child(2) { animation-delay: .05s; }
.hero.is-entering > *:nth-child(3) { animation-delay: .1s; }
.hero.is-entering > *:nth-child(4) { animation-delay: .15s; }
.eyebrow { margin: 0 0 24px; color: var(--accent); font: 600 10px/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
h1 { margin: 0; font: 600 clamp(62px,6vw,102px)/.96 var(--serif); letter-spacing: -.07em; }
h1 span { display: block; }
.intro { margin: 28px 0 0; color: var(--muted); font: 400 clamp(15px,1.15vw,19px)/1.85 var(--sans); }

.countdown { margin-top: clamp(34px,5vh,58px); }
.countdown-label { margin: 0 0 17px; font: 500 clamp(14px,1.15vw,17px)/1.4 var(--serif); letter-spacing: .02em; }
.countdown-values { display: flex; align-items: flex-start; gap: clamp(9px,1.25vw,21px); }
.countdown-values > div { min-width: clamp(58px,5.4vw,84px); }
.countdown-values strong { display: block; font: 500 clamp(40px,4vw,64px)/.95 var(--serif); letter-spacing: -.045em; font-variant-numeric: tabular-nums; transform-origin: center bottom; }
.countdown-values strong.tick { animation: numberTick .42s cubic-bezier(.25,.8,.25,1); }
.countdown-values span { display: block; margin-top: 10px; color: var(--muted); font: 500 10px/1 var(--sans); letter-spacing: .08em; }
.countdown-values > i { margin-top: 13px; color: var(--accent); font: 500 16px/1 var(--serif); }

.date { display: flex; align-items: center; gap: 12px; width: min(325px,100%); margin: 29px 0 0; color: var(--accent); font: 600 11px/1 var(--sans); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.date i { flex: 1; height: 1px; background: currentColor; opacity: .5; }
blockquote { margin: 27px 0 0; color: var(--text); font: 500 15px/1.8 var(--serif); }

.birthday-message { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-top: 42px; }
.birthday-message[hidden] { display: none; }
.birthday-message strong { color: var(--accent); font: 500 72px/1 var(--serif); }
.birthday-message p { margin: 0; font: 500 18px/1.7 var(--serif); }
.birthday .countdown { display: none; }

footer { display: flex; align-items: flex-end; justify-content: space-between; color: var(--muted); font: 500 9px/1.5 var(--sans); letter-spacing: .13em; }
footer p { margin: 0; font-family: var(--serif); }
.motion-note { position: absolute; right: clamp(32px,5.5vw,92px); bottom: clamp(56px,8vh,88px); margin: 0; color: var(--muted); font: 500 9px/1 var(--sans); letter-spacing: .06em; }
.motion-note i { display: inline-block; width: 18px; height: 1px; margin-right: 8px; vertical-align: middle; background: var(--accent); animation: breathe 2.2s ease-in-out infinite; }

/* Morning Letter */
body[data-theme="morning"] { --bg:#f6eddf; --text:#352b23; --muted:#76685d; --accent:#b85f45; --control-bg:rgba(255,250,242,.56); --control-line:rgba(79,61,47,.17); }
body[data-theme="morning"] .scene-image { object-position: center; }
body[data-theme="morning"] .scene::after { background: rgba(255,248,238,.02); }
body[data-theme="morning"] .scene-image-current { animation: morningWarmth 8.5s ease-in-out infinite alternate; }
body[data-theme="morning"] .atmosphere-morning {
  opacity: .42; animation: curtainLight 7.8s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

/* Moonlit Cat Garden */
body[data-theme="moon"] { color-scheme:dark; --bg:#26374d; --text:#fff1cb; --muted:#d4c9b5; --accent:#e7c87e; --control-bg:rgba(23,37,55,.48); --control-line:rgba(255,241,203,.22); }
body[data-theme="moon"] .scene-image { object-position: center; filter: brightness(.92) saturate(.9); }
body[data-theme="moon"] .scene::after { background: rgba(19,31,47,.05); }
body[data-theme="moon"] .atmosphere-stars { opacity: .58; }
body[data-theme="moon"] .atmosphere-stars-a { animation: moonBreath 6.2s ease-in-out infinite alternate; }
body[data-theme="moon"] .atmosphere-stars-b {
  opacity: .22; transform: scaleX(-1) scale(1.055); filter: blur(.25px);
  animation: starTwinkle 3.1s ease-in-out -1.2s infinite alternate;
}
body[data-theme="moon"] .theme-switcher button[aria-pressed="true"] { color:#26374d; background:#fff1cb; }
body[data-theme="moon"] h1 { font-weight: 500; letter-spacing: -.04em; }
body[data-theme="moon"] blockquote { color:#fff1cb; }
body[data-theme="moon"] .eyebrow { color:#e7c87e; }

/* Cream Film Diary */
body[data-theme="film"] { --bg:#f5ecdf; --text:#363027; --muted:#786f64; --accent:#ce7158; --control-bg:rgba(255,255,255,.52); --control-line:rgba(70,57,45,.17); }
body[data-theme="film"] .scene-image { object-position: center; }
body[data-theme="film"] h1 { font-weight: 600; }
body[data-theme="film"] .countdown-values strong { padding: 7px 8px 5px; border-radius: 3px; background: rgba(255,255,255,.54); box-shadow: 0 4px 9px rgba(62,49,38,.08); }

@keyframes textArrive { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes numberTick { 0% { opacity:.45; transform:translateY(-5px) rotateX(36deg); } 100% { opacity:1; transform:translateY(0) rotateX(0); } }
@keyframes breathe { 0%,100% { transform:scaleX(.55); transform-origin:left; opacity:.5; } 50% { transform:scaleX(1); transform-origin:left; opacity:1; } }
@keyframes morningWarmth { 0% { filter:brightness(.97) saturate(.94); } 100% { filter:brightness(1.045) saturate(1.02); } }
@keyframes curtainLight {
  0% { opacity:.22; transform:translate3d(-2.5%,0,0) scale(1.025); filter:blur(.4px) brightness(.92); }
  48% { opacity:.52; }
  100% { opacity:.35; transform:translate3d(2.2%,-.8%,0) scale(1.075); filter:blur(1.2px) brightness(1.12); }
}
@keyframes moonBreath {
  0% { opacity:.34; transform:scale(1.015); filter:brightness(.9); }
  52% { opacity:.66; }
  100% { opacity:.47; transform:scale(1.055) translate3d(-.4%,-.25%,0); filter:brightness(1.2); }
}
@keyframes starTwinkle {
  0%,18% { opacity:.1; filter:blur(.5px) brightness(.8); }
  41% { opacity:.38; filter:blur(0) brightness(1.45); }
  63% { opacity:.16; }
  100% { opacity:.42; filter:blur(.25px) brightness(1.18); }
}
@keyframes pawMemory {
  0% { opacity:0; transform:translate(-50%,-50%) rotate(var(--paw-angle)) scale(.66); }
  16% { opacity:var(--paw-opacity); transform:translate(-50%,-50%) rotate(var(--paw-angle)) scale(1); }
  58% { opacity:.24; }
  100% { opacity:0; transform:translate(-50%,-54%) rotate(calc(var(--paw-angle) + 2deg)) scale(1.035); }
}

@media (max-width: 760px) {
  html,body { width:100%; min-height:100%; overflow:hidden; }
  .birthday-cover {
    width:100%; height:100svh; height:100dvh; min-height:620px;
    grid-template-rows:auto 1fr auto; padding: max(20px,env(safe-area-inset-top)) 20px max(18px,env(safe-area-inset-bottom));
  }
  .scene { inset:0; }
  .scene::after { display:block; z-index:2; }
  .scene-image { transform:scale(1.025); }
  .atmosphere { inset: -3%; width:106%; height:106%; object-position:72% center; }
  .scene.is-switching .scene-image-current { transform:scale(1.045); }
  .topbar { align-items:center; }
  .brand { font-size:12px; }
  .brand i { width:18px; }
  .switcher-label { display:none; }
  .theme-switcher > div { padding:3px; }
  .theme-switcher button { min-height:32px; padding:0 9px; font-size:10px; }
  .theme-switcher button i { display:none; }
  .hero { position:relative; z-index:3; align-self:start; width:100%; padding:clamp(36px,6.5vh,58px) 0 86px; }
  .eyebrow { width:290px; margin-bottom:13px; font-size:8px; letter-spacing:.16em; }
  h1 { font-size:clamp(52px,15vw,61px); line-height:.94; }
  body[data-theme="moon"] h1 { max-width:350px; font-size:clamp(42px,11.8vw,48px); line-height:1.02; }
  body[data-theme="film"] h1 { font-size:clamp(49px,14vw,57px); }
  .intro { margin-top:16px; font-size:13px; line-height:1.72; }
  .countdown { margin-top:clamp(22px,3.4vh,30px); }
  .countdown-label { margin-bottom:11px; font-size:12px; }
  .countdown-values { justify-content:space-between; gap:5px; }
  .countdown-values > div { min-width:0; }
  .countdown-values strong { font-size:clamp(34px,10.2vw,42px); }
  .countdown-values > i { margin-top:7px; }
  .countdown-values span { margin-top:6px; font-size:8px; }
  .date { width:min(310px,100%); margin-top:17px; font-size:9px; }
  blockquote { margin-top:14px; font-size:12px; line-height:1.6; }
  footer { position:relative; z-index:3; color:var(--text); text-shadow:0 1px 8px var(--bg); }
  body[data-theme="moon"] footer { color:#fff1cb; }
  .motion-note { display:none; }

  body[data-theme="morning"] .scene-image { object-position:67% center; }
  body[data-theme="morning"] .atmosphere { object-position:68% center; }
  body[data-theme="morning"] .scene::after {
    background:linear-gradient(180deg,rgba(246,237,223,.98) 0%,rgba(246,237,223,.91) 43%,rgba(246,237,223,.48) 64%,rgba(246,237,223,.04) 82%);
  }
  body[data-theme="moon"] .scene-image { object-position:70% center; }
  body[data-theme="moon"] .atmosphere { object-position:70% center; }
  body[data-theme="moon"] .scene::after {
    background:linear-gradient(180deg,rgba(31,48,70,.94) 0%,rgba(31,48,70,.84) 47%,rgba(31,48,70,.34) 69%,rgba(31,48,70,.04) 84%);
  }
  body[data-theme="film"] .scene-image { object-position:61% center; }
  body[data-theme="film"] .scene::after {
    background:linear-gradient(180deg,rgba(245,236,223,.98) 0%,rgba(245,236,223,.92) 44%,rgba(245,236,223,.5) 65%,rgba(245,236,223,.05) 83%);
  }
}

@media (max-width: 390px) {
  .theme-switcher button { padding-inline:7px; }
  .hero { padding-top:clamp(30px,5.2vh,44px); }
}

@media (max-width:760px) and (max-height:700px) {
  .birthday-cover { min-height:560px; padding-top:14px; padding-bottom:13px; }
  .hero { padding-top:20px; padding-bottom:50px; }
  .eyebrow { margin-bottom:9px; }
  h1 { font-size:49px; }
  body[data-theme="moon"] h1 { font-size:40px; }
  body[data-theme="film"] h1 { font-size:47px; }
  .intro { margin-top:11px; font-size:12px; }
  .countdown { margin-top:17px; }
  .date { margin-top:12px; }
  blockquote { margin-top:10px; font-size:11px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .scene-image { transform:none !important; }
  body[data-theme="morning"] .atmosphere-morning { opacity:.3; }
  body[data-theme="moon"] .atmosphere-stars-a { opacity:.44; }
  body[data-theme="moon"] .atmosphere-stars-b { opacity:.14; }
  .trail-paw { opacity:.32; }
  .motion-note { display:none; }
}