/* 全部尺寸以手机竖屏为先；桌面保留一张居中的生日情书。 */
:root {
  color-scheme:dark;
  --ink:#f9efe6;
  --muted:#b5a6a5;
  --pink:#efb7c6;
  --gold:#d4b47d;
  --line:rgba(233,201,180,.18);
  --sans:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --serif:"Songti SC","STSong","SimSun",Georgia,serif;
  --hand:"STXingkai","Xingkai SC","KaiTi","STKaiti",cursive;
  --ease:cubic-bezier(.22,.68,0,1)
}

* {
  box-sizing:border-box
}

html,body {
  margin:0;
  min-height:100%;
  width:100%
}

body {
  min-height:100svh;
  background:#101014;
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  display:grid;
  place-items:center;
  overflow-x:hidden
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 35%,#2a222b55,transparent 60%)
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
  border:0;
  -webkit-tap-highlight-color:transparent
}

button:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:5px
}

button:active {
  filter:brightness(1.17)
}

button:disabled {
  cursor:default
}

h1,p {
  margin:0
}

img {
  max-width:100%;
  display:block
}

svg.icon {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none
}

.icon.small {
  width:18px;
  height:18px
}

.icon.tiny {
  width:14px;
  height:14px
}

.icon-definitions {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.phone-shell {
  width:100%;
  max-width:460px;
  height:100svh;
  min-height:500px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#151318
}

.scenery {
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:-2;
  background:linear-gradient(165deg,#252333,#313146 42%,#51404a 66%,#1c171e);
  opacity:1;
  transition:opacity .8s
}

.scenery>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:53% 50%;
  filter:blur(1px) saturate(.65);
  transform:scale(1.025)
}

.scenery-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(15,15,24,.74) 0%,rgba(19,20,29,.57) 32%,rgba(28,22,29,.33) 58%,rgba(20,15,23,.93) 88%,#16131a 100%)
}

.scenery-glow {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 48% 61%,#eab3941c,transparent 53%);
  box-shadow:inset 0 0 100px #12121c99
}

.phone-shell[data-scene="intro"] .scenery {
  opacity:0
}

.phone-shell[data-scene="memories"] .scenery,.phone-shell[data-scene="wishes"] .scenery {
  opacity:.45
}

.phone-shell[data-scene="memories"] .scenery-shade,.phone-shell[data-scene="wishes"] .scenery-shade {
  background:linear-gradient(180deg,#201c2bd9,#201c26bc 55%,#17141bef)
}

/* .is-active 是唯一可交互场景，离场和进场共享 650ms，避免重复动画。 */
.scene {
  position:absolute;
  inset:0;
  visibility:hidden;
  opacity:0;
  transform:translateY(12px) scale(.985);
  transition:opacity .65s var(--ease),transform .65s var(--ease),visibility .65s;
  pointer-events:none;
  overflow:hidden
}

.scene.is-active {
  opacity:1;
  transform:none;
  visibility:visible;
  pointer-events:auto
}

/* 隐藏场景直接复位，避免离场后再反向过渡到默认缩放位置。 */
.scene:not(.is-active) {
  transition:none
}

.scene.is-leaving {
  opacity:0;
  transform:translateY(-9px) scale(1.015);
  visibility:visible;
  pointer-events:none
}

.scene:not(.is-active) *,.is-paused * {
  animation-play-state:paused!important
}

.scene-masthead {
  height:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--gold);
  font-family:Georgia,serif;
  font-size:8px;
  letter-spacing:2px;
  flex:none
}

.scene-masthead>.icon {
  color:var(--pink)
}

.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  color:var(--gold)
}

.intro-scene {
  background:radial-gradient(ellipse at 50% 49%,#2d202633 0,transparent 56%),#111114;
  padding:calc(25px + env(safe-area-inset-top)) 29px calc(23px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column
}

.intro-top {
  display:flex;
  gap:9px;
  align-items:center;
  color:#c7ad94;
  font-size:8px;
  letter-spacing:1.9px;
  height:22px
}

.intro-top>.icon {
  color:var(--pink)
}

.edition {
  margin-left:auto;
  font-family:Georgia,serif;
  font-size:8px;
  letter-spacing:1px;
  color:#8c7b74
}

.intro-content {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-bottom:12px
}

.intro-eyebrow {
  font-size:10px;
  letter-spacing:3px;
  color:#bb9d89;
  margin-bottom:24px
}

.intro-content h1 {
  text-align:center;
  font-family:var(--serif);
  font-size:clamp(33px,8.9vw,42px);
  font-weight:400;
  line-height:1.55;
  letter-spacing:5px
}

.intro-content h1 em {
  font-style:normal;
  color:#edc1c8
}

.intro-subtitle {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:12px;
  color:#9a8887;
  letter-spacing:.2px;
  margin-top:15px
}

.intro-cake-wrap {
  position:relative;
  width:min(73vw,290px);
  aspect-ratio:1;
  margin:15px 0 17px;
  display:grid;
  place-items:center
}

.cake-button {
  width:100%;
  padding:12px;
  background:none;
  position:relative;
  z-index:2;
  animation:cake-breathe 3.8s ease-in-out infinite;
  transition:filter .3s
}

.cake-button img {
  width:100%;
  height:auto
}

.cake-button:hover {
  filter:drop-shadow(0 0 12px #f7c5d331)
}

.cake-button.is-opening {
  animation:open-cake .45s var(--ease) both
}

.cake-halo {
  position:absolute;
  inset:23% 12% 10%;
  border-radius:50%;
  background:radial-gradient(ellipse,#efacbd0d,transparent 68%);
  filter:blur(12px);
  pointer-events:none
}

.hand-star {
  position:absolute;
  color:var(--pink);
  font-family:Georgia,serif;
  animation:star-breathe 3s ease-in-out infinite;
  pointer-events:none
}

.star-one {
  left:0;
  top:26%;
  font-size:27px;
  transform:rotate(-15deg)
}

.star-two {
  right:1%;
  top:48%;
  font-size:14px;
  animation-delay:-1s
}

.star-three {
  right:12%;
  top:13%;
  font-size:20px;
  opacity:.6;
  animation-delay:-2s
}

.intro-invitation {
  display:flex;
  align-items:center;
  gap:13px;
  justify-content:center;
  color:#d6bbb9
}

.intro-invitation p {
  font-size:11px;
  letter-spacing:1.5px;
  white-space:nowrap
}

.invitation-line {
  height:1px;
  width:20px;
  background:#9e7c6a80
}

.small-note {
  margin-top:12px;
  color:#786d70;
  font-size:9px;
  letter-spacing:2px
}

.intro-footer {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#86746f;
  font-family:Georgia,serif;
  font-size:7px;
  letter-spacing:2px
}

.intro-footer .icon {
  width:10px;
  height:10px;
  color:#c3979f
}

.birthday-layout {
  position:relative;
  height:100%;
  padding:calc(19px + env(safe-area-inset-top)) 26px calc(91px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  z-index:2;
  pointer-events:none
}

.birthday-layout button {
  pointer-events:auto
}

.music-button {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid #e5b8a12b;
  background:#c6b3a009;
  border-radius:50%;
  position:relative
}

.music-button .icon {
  width:15px;
  height:15px;
  opacity:.7
}

.music-indicator {
  width:4px;
  height:4px;
  background:#8b8075;
  border-radius:50%;
  position:absolute;
  bottom:5px;
  right:5px
}

.music-button[aria-pressed="true"] .music-indicator {
  background:var(--gold);
  box-shadow:0 0 7px var(--gold)
}

.music-button[aria-pressed="true"] .icon {
  opacity:1
}

.birthday-heading {
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  margin-top:20px;
  margin-bottom:21px;
  flex:none;
  position:relative
}

.birthday-title-block {
  padding-top:3px
}

.birthday-title-block>.eyebrow {
  font-size:8px;
  letter-spacing:2px;
  color:#d7c1ad;
  margin-bottom:9px
}

.birthday-title-block h1 {
  position:relative;
  font-family:var(--hand);
  font-weight:400;
  font-size:clamp(36px,10.6vw,49px);
  letter-spacing:1px;
  line-height:1.2;
  color:#f5e5df;
  white-space:nowrap;
  text-shadow:0 2px 20px #eec4a21c
}

.title-star {
  font-family:Georgia,serif;
  font-size:20px;
  position:absolute;
  right:-17px;
  top:-6px;
  color:var(--gold);
  transform:rotate(-15deg)
}

.birthday-english {
  font-family:Georgia,serif;
  letter-spacing:3.1px;
  font-size:8px;
  margin-top:10px;
  color:#d2beb1
}

.birthday-date {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  min-width:75px
}

.date-month {
  font-size:13px;
  letter-spacing:3px;
  color:#e2c58c
}

.date-number {
  display:flex;
  align-items:baseline;
  gap:3px;
  margin-top:-3px
}

.date-number strong {
  font-family:Georgia,"Times New Roman",serif;
  font-size:59px;
  line-height:1.12;
  font-weight:700;
  letter-spacing:-3px;
  color:#b4d3e9;
  text-shadow:0 2px 15px #a6cffc1a
}

.date-number>span {
  font-size:11px;
  color:#e3d9cf
}

.lunar-date {
  font-size:10px;
  letter-spacing:2px;
  color:#e1c080;
  margin-top:2px
}

.calendar-wrap {
  align-self:center;
  width:236px;
  max-width:78%;
  flex:none;
  position:relative;
  z-index:3
}

.calendar-caption {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:6px;
  letter-spacing:2px;
  color:#baa78e;
  font-family:Georgia,serif;
  margin-bottom:8px
}

.calendar-caption>span {
  height:1px;
  width:21px;
  background:#dac1a433
}

.calendar-card {
  background:linear-gradient(135deg,#c4aaa513,#18192425);
  border:1px solid #dec3b132;
  border-radius:3px;
  padding:12px 15px 8px;
  box-shadow:0 6px 24px #00000014;
  backdrop-filter:blur(7px)
}

.calendar-header {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:10px;
  color:#efddcf
}

.calendar-header>span:first-child {
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:3px
}

.calendar-header>span:last-child {
  font-family:Georgia,serif;
  font-size:11px;
  letter-spacing:2px;
  color:#c3ac91
}

.calendar-weekdays,.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  text-align:center
}

.calendar-weekdays {
  font-size:8px;
  color:#ac9998;
  margin-bottom:6px
}

.calendar-grid {
  row-gap:2px
}

.calendar-grid>span,.calendar-grid>.calendar-day {
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  height:22px;
  font-family:Georgia,serif;
  font-size:11px;
  color:#e6d7d0
}

.calendar-grid>:nth-child(7n+1) {
  color:#be9b9e
}

.calendar-grid .birthday-day {
  color:#38232e!important;
  font-weight:bold;
  z-index:1;
  isolation:isolate
}

.birthday-day>span:last-child {
  z-index:1;
  position:relative
}

.heart-shape {
  position:absolute!important;
  width:20px;
  height:20px;
  inset:1px auto auto;
  z-index:-1!important;
  background:var(--pink);
  transform:rotate(-45deg) scale(.78);
  border-radius:3px;
  animation:heart-beat 2.5s ease-in-out infinite;
  filter:drop-shadow(0 0 6px #ffc4d24d)
}

.heart-shape::before,.heart-shape::after {
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  border-radius:50%;
  background:inherit
}

.heart-shape::before {
  top:-10px;
  left:0
}

.heart-shape::after {
  left:10px;
  top:0
}

.calendar-footnote {
  text-align:center;
  font-size:7px;
  letter-spacing:1px;
  color:#b29f98;
  margin-top:9px;
  padding-top:7px;
  border-top:1px solid #d2b7a415
}

.tiny-heart {
  color:var(--pink);
  font-size:8px;
  margin-right:3px
}

.birthday-stage {
  position:relative;
  flex:1;
  min-height:175px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 -26px;
  isolation:isolate
}

.birthday-stage::after {
  content:"";
  position:absolute;
  bottom:21%;
  left:13%;
  right:10%;
  height:22%;
  background:#b0867b1a;
  border-radius:50%;
  filter:blur(28px);
  z-index:-1
}

.cake-illustration {
  position:relative;
  width:113%;
  max-width:490px;
  flex-shrink:0;
  transform:translateY(-4px);
  animation:cake-breathe 5s ease-in-out infinite
}

.cake-illustration>img {
  width:100%;
  height:auto;
  filter:drop-shadow(0 14px 12px #07081266)
}

.candle-flame {
  position:absolute;
  left:45%;
  top:13.9%;
  width:10px;
  height:22px;
  border-radius:70% 20% 65% 35%;
  background:linear-gradient(0deg,#ffe5a4,#ffeac0 38%,#ffbd62 86%);
  transform-origin:50% 100%;
  transform:translateX(-50%) rotate(6deg);
  box-shadow:0 0 11px 4px #ffd2875c,0 0 32px 12px #ffaa5c1c;
  animation:flame-flicker 1.8s ease-in-out infinite
}

.candle-flame i {
  position:absolute;
  bottom:1px;
  left:25%;
  width:50%;
  height:45%;
  background:#fff6d0;
  border-radius:50%
}

.viewfinder {
  position:absolute;
  z-index:3;
  left:24px;
  top:23%;
  width:59px;
  height:84px;
  color:#e9d6bd;
  opacity:.73
}

.recording {
  position:absolute;
  top:-17px;
  left:0;
  display:flex;
  align-items:center;
  gap:4px;
  font-family:Georgia,serif;
  font-size:7px;
  letter-spacing:1px
}

.recording i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#e591a2;
  box-shadow:0 0 5px #e591a244
}

.camera-corner {
  position:absolute;
  width:11px;
  height:11px;
  border-color:#e8ccb680;
  border-style:solid
}

.camera-corner.tl {
  top:0;
  left:0;
  border-width:1px 0 0 1px
}

.camera-corner.tr {
  top:0;
  right:0;
  border-width:1px 1px 0 0
}

.camera-corner.bl {
  bottom:0;
  left:0;
  border-width:0 0 1px 1px
}

.camera-corner.br {
  bottom:0;
  right:0;
  border-width:0 1px 1px 0
}

.focus-cross {
  position:absolute;
  top:32px;
  left:25px;
  color:#e2c4a978;
  font-size:13px
}

.camera-info {
  position:absolute;
  left:0;
  bottom:-27px;
  font-family:Georgia,serif;
  font-size:6px;
  line-height:1.7;
  letter-spacing:.8px;
  opacity:.7
}

.floating-notes {
  position:absolute;
  z-index:5;
  left:17%;
  top:23%;
  width:49px;
  height:67px;
  color:#d9bb83;
  pointer-events:none
}

.floating-notes>span {
  position:absolute;
  font-family:Georgia,serif;
  font-size:22px;
  animation:note-float 3.2s ease-in-out infinite
}

.floating-notes>span:nth-child(2) {
  left:26px;
  top:20px;
  font-size:17px;
  animation-delay:-1.2s
}

.floating-notes>span:nth-child(3) {
  left:6px;
  top:48px;
  font-size:13px;
  animation-delay:-2.1s
}

.stage-caption {
  position:absolute;
  bottom:5px;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#cbb6a4;
  font-size:7px;
  font-family:Georgia,var(--serif);
  letter-spacing:2px
}

.stage-caption span {
  color:var(--gold);
  font-size:11px
}

.birthday-bottom {
  text-align:center;
  margin-top:12px;
  flex:none
}

.birthday-bottom>p {
  font-family:var(--serif);
  font-size:16px;
  letter-spacing:2px;
  color:#f2dace;
  text-shadow:0 0 14px #ffcfaa24
}

.text-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:transparent;
  padding:10px 8px;
  font-size:9px;
  letter-spacing:1px;
  color:#bbaa9c;
  min-height:36px
}

.text-button .icon {
  width:12px;
  height:12px
}

.replay-button {
  margin-top:3px;
  padding:8px
}

.replay-button .icon {
  width:11px;
  height:11px
}

#particle-canvas {
  position:absolute;
  inset:0;
  pointer-events:none;
  width:100%;
  height:100%;
  z-index:4;
  opacity:.85
}

/* 单次开场：焦点、标题、日历分别在 0 / 1 / 2 秒启动。 */
.birthday-scene:not(.is-playing):not(.is-complete) .birthday-heading,.birthday-scene:not(.is-playing):not(.is-complete) .calendar-wrap,.birthday-scene:not(.is-playing):not(.is-complete) .floating-notes,.birthday-scene:not(.is-playing):not(.is-complete) .birthday-bottom {
  opacity:0
}

.birthday-scene.is-playing .birthday-stage {
  animation:focus-in 1s var(--ease) both
}

.birthday-scene.is-playing .birthday-heading {
  animation:soft-reveal .9s var(--ease) 1s both
}

.birthday-scene.is-playing .floating-notes {
  animation:soft-reveal .8s var(--ease) 1.2s both
}

.birthday-scene.is-playing .calendar-wrap {
  animation:calendar-reveal .9s var(--ease) 2s both
}

.birthday-scene.is-playing .birthday-bottom {
  animation:soft-reveal 1s var(--ease) 2.5s both
}

.birthday-scene.is-playing .viewfinder {
  animation:focus-frame 1.1s ease both
}

.birthday-scene.is-playing .heart-shape {
  animation:heart-beat 2.5s ease-in-out 2.7s infinite,heart-emphasis .7s ease 2.8s
}

.phone-shell.is-focusing .scenery>img {
  animation:background-focus 1s var(--ease) both
}

.bottom-nav {
  position:absolute;
  left:22px;
  right:22px;
  bottom:calc(13px + env(safe-area-inset-bottom));
  height:62px;
  display:flex;
  align-items:center;
  border-top:1px solid #d2b7a423;
  z-index:10;
  background:linear-gradient(180deg,#17141b00,#17141bd9 45%);
  transition:opacity .45s,transform .45s
}

.phone-shell[data-scene="intro"] .bottom-nav {
  opacity:0;
  transform:translateY(20px);
  pointer-events:none;
  visibility:hidden
}

.nav-button {
  flex:1;
  height:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:none;
  color:#8f8184;
  font-size:8px;
  letter-spacing:1px;
  position:relative
}

.nav-button>.icon {
  width:19px;
  height:19px
}

.nav-button[aria-current="page"] {
  color:#ecc1c8
}

.nav-button[aria-current="page"]::before {
  content:"";
  position:absolute;
  top:-1px;
  left:calc(50% - 12px);
  width:24px;
  height:1px;
  background:#e3b8bf;
  box-shadow:0 0 8px #e3b8bf88
}

.nav-button:hover {
  color:var(--pink)
}

.inner-scene-content {
  height:100%;
  padding:calc(19px + env(safe-area-inset-top)) 28px calc(99px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#a68e7744 transparent;
  overscroll-behavior-y:contain
}

.chapter-heading {
  margin-top:29px;
  text-align:center;
  flex:none
}

.chapter-heading>.eyebrow {
  font-size:9px;
  letter-spacing:2px;
  color:#cfb496
}

.chapter-heading h1 {
  font-family:var(--serif);
  font-size:34px;
  letter-spacing:4px;
  font-weight:400;
  margin-top:16px;
  line-height:1.4
}

.heading-dot {
  color:#e4b2bf;
  font-family:Georgia,serif;
  letter-spacing:0;
  margin-left:1px
}

.chapter-subtitle {
  font-family:Georgia,serif;
  font-size:11px;
  font-style:italic;
  color:#a99a99;
  margin-top:10px;
  letter-spacing:.3px
}

.album-area {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:380px;
  position:relative;
  padding-top:28px
}

.album-scribble {
  position:relative;
  align-self:flex-end;
  right:5px;
  top:7px;
  color:#d9b293;
  font-family:var(--hand);
  font-size:16px;
  font-style:italic;
  transform:rotate(8deg);
  z-index:3
}

.photo-stage {
  position:relative;
  width:86%;
  max-width:300px;
  aspect-ratio:.83;
  touch-action:pan-y;
  margin:15px 0 20px
}

.polaroid,.photo-behind {
  position:absolute;
  inset:0;
  background:#eee2d7;
  border:1px solid #ead4c3;
  border-radius:1px;
  box-shadow:0 12px 28px #00000040;
  transform:rotate(-4deg)
}

.photo-behind {
  pointer-events:none
}

.behind-one {
  transform:rotate(5deg);
  background:#d5c0b1
}

.behind-two {
  transform:rotate(1deg) translate(3px,-2px);
  background:#e3d4c6
}

.polaroid {
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:12px 12px 0;
  text-align:left;
  transition:transform .4s var(--ease),opacity .18s ease;
  background:linear-gradient(135deg,#f8eee5,#ecded1);
  color:#57443f
}

.polaroid:hover {
  transform:rotate(-2deg) translateY(-3px)
}

.photo-stage.is-changing .polaroid {
  opacity:0;
  transform:translateX(-15px) rotate(-6deg)
}

.photo-image-wrap {
  display:block;
  position:relative;
  flex:1;
  min-height:0;
  width:100%;
  overflow:hidden;
  background:#b9a79d
}

.photo-image-wrap>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}

.photo-expand {
  position:absolute;
  right:8px;
  bottom:8px;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  background:#19171b65;
  color:white;
  border-radius:50%
}

.photo-expand .icon {
  width:13px;
  height:13px
}

.photo-tape {
  position:absolute;
  top:-12px;
  left:calc(50% - 33px);
  width:66px;
  height:26px;
  transform:rotate(3deg);
  background:repeating-linear-gradient(90deg,#c6a77e88 0 2px,#d9ba9588 2px 4px);
  clip-path:polygon(2% 0,98% 3%,100% 93%,0 100%);
  z-index:2;
  opacity:.9
}

.polaroid-note {
  min-height:61px;
  width:100%;
  padding:12px 0 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}

.polaroid-note>span:first-child {
  font-family:var(--hand);
  font-size:15px;
  letter-spacing:1px
}

.polaroid-note>span:last-child {
  font-family:Georgia,serif;
  font-size:8px;
  color:#9a7f70;
  letter-spacing:.4px;
  white-space:nowrap
}

.album-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:35px;
  width:100%;
  margin-top:1px
}

.round-button {
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid #c9a99138;
  background:#d5b19207;
  display:grid;
  place-items:center;
  color:#d1b79e;
  transition:background .2s,transform .2s
}

.round-button:hover {
  background:#d5b19218
}

.round-button:active {
  transform:scale(.92)
}

.round-button .icon {
  width:17px;
  height:17px
}

.flip {
  transform:rotate(180deg)
}

.album-pagination {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:Georgia,serif;
  font-size:11px;
  color:#a68e85;
  letter-spacing:1px
}

#photo-index {
  color:#efd4c3;
  font-size:16px
}

.pagination-line {
  width:22px;
  height:1px;
  background:#c3a28a50
}

.photo-dots {
  display:flex;
  justify-content:center;
  gap:2px;
  height:20px;
  margin:5px 0 2px
}

.photo-dots button {
  width:20px;
  height:20px;
  padding:7px;
  background:transparent
}

.photo-dots button::after {
  content:"";
  display:block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#806e6d;
  transition:background .3s,transform .3s
}

.photo-dots button[aria-current="true"]::after,.photo-dots button.is-active::after {
  background:#e4b5bf;
  transform:scale(1.4)
}

.photo-caption {
  text-align:center;
  font-size:10px;
  line-height:1.9;
  color:#d6c0b4;
  letter-spacing:.5px;
  max-width:94%;
  min-height:20px
}

.photo-hint {
  font-size:8px;
  color:#867776;
  letter-spacing:1px;
  margin-top:9px
}

.chapter-next {
  align-self:center;
  color:#bc9f8d;
  font-size:9px;
  margin-top:16px;
  flex:none
}

.chapter-next>.icon {
  margin-left:6px
}

.wishes-scroll {
  display:block;
  padding-bottom:calc(110px + env(safe-area-inset-bottom))
}

.wishes-heading {
  margin-top:27px
}

.wishes-heading h1 {
  font-size:30px;
  letter-spacing:2px
}

.wishes-intro {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:8px;
  letter-spacing:1px;
  color:#b49b90;
  margin:29px 0 20px
}

.wishes-line {
  height:1px;
  width:24px;
  background:#c8a18440
}

.wish-list {
  display:flex;
  flex-direction:column;
  gap:12px
}

.wish-card {
  border:1px solid #dbc0b522;
  background:linear-gradient(135deg,#e0b6a90c,#d5a7b205);
  border-radius:5px;
  padding:17px 17px 16px;
  display:grid;
  grid-template-columns:34px 1fr;
  column-gap:11px;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
  transition-delay:calc(var(--i,0)*70ms)
}

.wish-card.is-revealed {
  opacity:1;
  transform:none
}

.avatar {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:#d5a2ac1c;
  border:1px solid #d3b2ac29;
  color:#e0b3bf;
  font-size:12px;
  font-family:var(--serif);
  grid-row:1 / 3
}

.avatar img {
  width:100%;
  height:100%;
  object-fit:cover
}

.wish-card:nth-child(3n+2) .avatar {
  background:#c5ab7b1a;
  color:#d4ba8e
}

.wish-card:nth-child(3n) .avatar {
  background:#a9bfd015;
  color:#b4c6d8
}

.wish-meta {
  display:flex;
  justify-content:space-between;
  gap:9px;
  align-items:center;
  min-height:34px
}

.wish-name {
  font-size:11px;
  letter-spacing:1px;
  color:#e9d4c9;
  font-weight:400
}

.wish-relation {
  font-size:7px;
  letter-spacing:1px;
  color:#947d77;
  border:1px solid #c19a8427;
  border-radius:2px;
  padding:3px 5px
}

.wish-content {
  grid-column:2;
  font-size:10px;
  line-height:1.95;
  letter-spacing:.3px;
  color:#bfaeaa;
  margin:4px 0 0;
  overflow-wrap:anywhere
}

.closing-letter {
  margin:29px 0 24px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center
}

.closing-letter>.icon {
  width:18px;
  height:18px;
  color:#c9a875;
  margin-bottom:12px
}

.closing-letter p {
  font-family:var(--serif);
  font-size:13px;
  line-height:2;
  letter-spacing:1.5px;
  color:#dcc5b6
}

.closing-letter>span {
  font-family:Georgia,serif;
  font-size:6px;
  letter-spacing:2px;
  color:#927b71;
  margin-top:13px
}

.ending-actions {
  display:flex;
  gap:10px
}

.primary-button,.secondary-button {
  min-height:42px;
  border:1px solid #caa58c55;
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  letter-spacing:1px;
  gap:8px;
  padding:10px 13px;
  transition:transform .2s,background .2s
}

.secondary-button {
  background:transparent;
  flex:1;
  color:#cbb5a9
}

.primary-button {
  background:#d7b6a1;
  color:#31252b;
  flex:1.4;
  border-color:#d7b6a1
}

.primary-button .icon {
  width:14px;
  height:14px
}

.primary-button:active,.secondary-button:active {
  transform:scale(.97)
}

.preset-note {
  text-align:center;
  font-size:7px;
  letter-spacing:1px;
  color:#77676b;
  margin-top:15px
}

.photo-dialog {
  width:min(92vw,560px);
  max-height:92svh;
  padding:15px 15px 18px;
  border:1px solid #d2b49d4d;
  border-radius:7px;
  background:#1c181f;
  color:var(--ink);
  box-shadow:0 25px 90px #000a;
  overflow:auto
}

.photo-dialog::backdrop {
  background:#08080de8;
  backdrop-filter:blur(8px)
}

.preview-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  gap:12px
}

.preview-toolbar>p {
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:2px
}

.preview-toolbar .round-button {
  width:34px;
  height:34px
}

.photo-dialog>img {
  max-height:68svh;
  width:100%;
  object-fit:contain;
  min-height:140px;
  background:#29212b
}

.preview-note {
  text-align:center;
  color:#a28b83;
  font-size:9px;
  letter-spacing:1px;
  line-height:1.8;
  margin-top:15px
}

.desktop-note {
  display:none
}

.noscript-note {
  position:fixed;
  inset:auto 0 0;
  background:#eed6c0;
  color:#211b20;
  text-align:center;
  padding:12px;
  z-index:100;
  font-size:12px
}

[hidden] {
  display:none!important
}

.is-document-hidden * {
  animation-play-state:paused!important
}

.birthday-scene.is-complete .birthday-heading,.birthday-scene.is-complete .calendar-wrap,.birthday-scene.is-complete .floating-notes,.birthday-scene.is-complete .birthday-bottom {
  animation:none;
  opacity:1;
  transform:none
}

.birthday-scene.is-complete .birthday-stage,.birthday-scene.is-complete .viewfinder {
  animation:none
}

.candle-flame {
  left:45.67%;
  top:13.5%
}

.bottom-nav {
  background:linear-gradient(180deg,#19161df0,#17141b);
  box-shadow:0 10px 0 15px #17141b
}

.wish-content {
  font-size:11px;
  line-height:1.95
}

.wish-name {
  font-size:12px
}

.round-button {
  width:44px;
  height:44px
}

.music-button {
  width:40px;
  height:40px
}

.replay-button {
  min-height:38px
}

.wish-card {
  transition-delay:calc(min(var(--i,0),3)*70ms)
}

@keyframes cake-breathe {
  0%,100% {
    transform:translateY(0) scale(1)
  }
  50% {
    transform:translateY(-5px) scale(1.012)
  }
}

@keyframes star-breathe {
  0%,100% {
    opacity:.4
  }
  50% {
    opacity:.9
  }
}

@keyframes open-cake {
  0% {
    transform:scale(1)
  }
  65% {
    transform:scale(1.11);
    filter:drop-shadow(0 0 22px #f4bfd477)
  }
  100% {
    transform:scale(1.06);
    filter:drop-shadow(0 0 30px #f4bfd455)
  }
}

@keyframes flame-flicker {
  0%,100% {
    transform:translateX(-50%) rotate(5deg) scale(1,1)
  }
  25% {
    transform:translateX(-50%) rotate(-4deg) scale(.92,1.08)
  }
  60% {
    transform:translateX(-50%) rotate(7deg) scale(1.07,.93)
  }
  80% {
    transform:translateX(-50%) rotate(-2deg) scale(.97,1.04)
  }
}

@keyframes note-float {
  0%,100% {
    transform:translateY(0) rotate(-10deg);
    opacity:.4
  }
  50% {
    transform:translateY(-8px) rotate(9deg);
    opacity:.8
  }
}

@keyframes heart-beat {
  0%,100% {
    transform:rotate(-45deg) scale(.68)
  }
  50% {
    transform:rotate(-45deg) scale(.76)
  }
}

@keyframes heart-emphasis {
  0%,100% {
    filter:drop-shadow(0 0 6px #ffc4d24d)
  }
  50% {
    filter:drop-shadow(0 0 15px #ffc4d2bb);
    transform:rotate(-45deg) scale(.9)
  }
}

@keyframes soft-reveal {
  from {
    opacity:0;
    transform:translateY(12px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@keyframes calendar-reveal {
  from {
    opacity:0;
    transform:translateY(18px) scale(.93)
  }
  to {
    opacity:1;
    transform:none
  }
}

@keyframes focus-in {
  from {
    filter:blur(5px);
    transform:scale(1.035)
  }
  to {
    filter:blur(0);
    transform:none
  }
}

@keyframes background-focus {
  from {
    filter:blur(7px) saturate(.65);
    transform:scale(1.07)
  }
  to {
    filter:blur(1px) saturate(.65);
    transform:scale(1.025)
  }
}

@keyframes focus-frame {
  0%,60% {
    opacity:1;
    transform:scale(1.08)
  }
  100% {
    opacity:.73;
    transform:scale(1)
  }
}

@media(min-width:700px) {
  body {
    padding:26px
  }
  .phone-shell {
    height:min(900px,calc(100svh - 52px));
    border:1px solid #c2a4a11a;
    border-radius:9px;
    box-shadow:0 25px 100px #0006
  }
  .desktop-note {
    display:flex;
    position:fixed;
    left:calc(50% - 390px);
    top:47%;
    transform:translateY(-50%);
    flex-direction:column;
    gap:22px;
    width:120px;
    color:#bea494;
    font-family:Georgia,serif;
    font-size:9px;
    line-height:1.9;
    letter-spacing:2px
  }
  .desktop-star {
    font-size:28px;
    color:#d9b1bc
  }
  .desktop-line {
    height:1px;
    width:32px;
    background:#997d6744
  }
  .desktop-sub {
    font-family:var(--serif);
    font-size:9px;
    letter-spacing:1px;
    line-height:2;
    color:#76666b;
    writing-mode:vertical-rl
  }
  .intro-content h1 {
    font-size:42px
  }
  .birthday-title-block h1 {
    font-size:49px
  }
}

@media(min-width:700px) and (max-width:1000px) {
  .desktop-note {
    display:none
  }
}

/* 矮屏收紧留白；极矮屏保留阅读滚动，主体不被导航遮挡。 */
@media(max-height:760px) {
  .birthday-layout {
    padding-top:calc(10px + env(safe-area-inset-top));
    padding-bottom:calc(82px + env(safe-area-inset-bottom))
  }
  .birthday-heading {
    margin-top:9px;
    margin-bottom:12px
  }
  .birthday-title-block h1 {
    font-size:39px
  }
  .date-number strong {
    font-size:49px
  }
  .calendar-card {
    padding:9px 13px 6px
  }
  .calendar-grid>span,.calendar-grid>.calendar-day {
    height:20px
  }
  .calendar-header {
    margin-bottom:7px
  }
  .calendar-caption {
    margin-bottom:6px
  }
  .calendar-footnote {
    margin-top:6px;
    padding-top:5px
  }
  .birthday-stage {
    min-height:152px
  }
  .cake-illustration {
    width:101%;
    max-width:430px
  }
  .birthday-bottom {
    margin-top:7px
  }
  .birthday-bottom>p {
    font-size:14px
  }
  .stage-caption {
    bottom:1px
  }
  .replay-button {
    margin-top:0;
    min-height:28px
  }
  .bottom-nav {
    height:57px;
    bottom:calc(8px + env(safe-area-inset-bottom))
  }
  .nav-button {
    height:54px
  }
  .intro-content h1 {
    font-size:35px
  }
  .intro-eyebrow {
    margin-bottom:17px
  }
  .intro-cake-wrap {
    width:min(65vw,245px);
    margin-top:8px;
    margin-bottom:8px
  }
  .intro-subtitle {
    margin-top:11px
  }
  .chapter-heading {
    margin-top:19px
  }
  .chapter-heading h1 {
    font-size:30px;
    margin-top:12px
  }
  .album-area {
    min-height:330px;
    padding-top:17px
  }
  .photo-stage {
    width:74%;
    max-width:260px;
    aspect-ratio:.88;
    margin-top:9px;
    margin-bottom:13px
  }
  .album-controls {
    gap:31px
  }
  .chapter-next {
    margin-top:10px
  }
  .inner-scene-content {
    padding-bottom:calc(87px + env(safe-area-inset-bottom))
  }
  .wishes-scroll {
    padding-bottom:calc(100px + env(safe-area-inset-bottom))
  }
}

@media(max-height:650px) {
  .birthday-layout {
    padding-left:22px;
    padding-right:22px
  }
  .scene-masthead {
    height:24px
  }
  .birthday-heading {
    margin-top:8px;
    margin-bottom:9px
  }
  .birthday-title-block>.eyebrow {
    margin-bottom:6px;
    font-size:7px
  }
  .birthday-title-block h1 {
    font-size:34px
  }
  .birthday-english {
    margin-top:5px;
    font-size:7px
  }
  .date-month {
    font-size:11px
  }
  .date-number strong {
    font-size:43px
  }
  .lunar-date {
    font-size:8px
  }
  .calendar-wrap {
    width:216px
  }
  .calendar-card {
    padding-top:7px
  }
  .calendar-header {
    margin-bottom:6px
  }
  .calendar-grid>span,.calendar-grid>.calendar-day {
    height:18px;
    font-size:10px
  }
  .calendar-weekdays {
    margin-bottom:3px
  }
  .calendar-footnote {
    font-size:6px;
    padding-top:4px;
    margin-top:4px
  }
  .calendar-caption {
    font-size:5px;
    margin-bottom:4px
  }
  .calendar-header>span:first-child {
    font-size:13px
  }
  .calendar-header>span:last-child {
    font-size:10px
  }
  .birthday-stage {
    min-height:132px
  }
  .cake-illustration {
    width:88%;
    max-width:350px
  }
  .viewfinder {
    left:25px;
    top:18%;
    width:44px;
    height:62px;
    opacity:.5
  }
  .floating-notes {
    left:17%;
    top:13%;
    transform:scale(.8)
  }
  .camera-info {
    display:none
  }
  .focus-cross {
    top:20px;
    left:18px
  }
  .birthday-bottom {
    margin-top:5px
  }
  .birthday-bottom>p {
    font-size:12px;
    letter-spacing:1.5px
  }
  .stage-caption {
    font-size:6px
  }
  .intro-scene {
    padding-top:19px;
    padding-bottom:17px
  }
  .intro-eyebrow {
    font-size:8px;
    margin-bottom:12px
  }
  .intro-content h1 {
    font-size:30px;
    line-height:1.5
  }
  .intro-subtitle {
    font-size:10px;
    margin-top:10px
  }
  .intro-cake-wrap {
    width:205px;
    margin:4px 0
  }
  .intro-invitation p {
    font-size:9px
  }
  .small-note {
    font-size:8px;
    margin-top:9px
  }
  .intro-footer {
    font-size:6px
  }
  .inner-scene-content {
    padding-top:12px
  }
  .chapter-heading {
    margin-top:13px
  }
  .chapter-heading h1 {
    font-size:26px;
    margin-top:9px
  }
  .chapter-subtitle {
    font-size:9px;
    margin-top:7px
  }
  .chapter-heading>.eyebrow {
    font-size:8px
  }
  .album-area {
    min-height:305px;
    padding-top:4px
  }
  .album-scribble {
    font-size:13px;
    right:18px
  }
  .photo-stage {
    width:64%;
    aspect-ratio:.9;
    max-width:220px;
    margin-bottom:10px
  }
  .polaroid {
    padding:9px 9px 0
  }
  .polaroid-note {
    min-height:45px;
    padding:8px 0
  }
  .polaroid-note>span:first-child {
    font-size:12px
  }
  .polaroid-note>span:last-child {
    font-size:6px
  }
  .round-button {
    width:32px;
    height:32px
  }
  .photo-caption {
    font-size:9px
  }
  .photo-hint {
    font-size:7px;
    margin-top:5px
  }
  .photo-dots {
    margin:1px 0
  }
  .chapter-next {
    margin-top:2px;
    min-height:30px
  }
  .wishes-heading h1 {
    font-size:26px
  }
  .wishes-intro {
    margin:21px 0 16px
  }
}

@media(max-width:360px) {
  .intro-scene {
    padding-left:22px;
    padding-right:22px
  }
  .birthday-layout {
    padding-left:20px;
    padding-right:20px
  }
  .birthday-title-block h1 {
    font-size:36px
  }
  .birthday-title-block>.eyebrow {
    letter-spacing:1px
  }
  .birthday-heading {
    gap:3px
  }
  .date-number strong {
    font-size:48px
  }
  .birthday-english {
    letter-spacing:2.3px
  }
  .birthday-date {
    min-width:66px
  }
  .title-star {
    font-size:16px;
    right:-12px
  }
  .inner-scene-content {
    padding-left:22px;
    padding-right:22px
  }
  .wishes-heading h1 {
    font-size:26px
  }
  .polaroid-note {
    gap:4px
  }
  .polaroid-note>span:first-child {
    font-size:12px
  }
  .polaroid-note>span:last-child {
    font-size:7px
  }
}

/* 按舞台的实际剩余高度约束蛋糕，短屏下不覆盖祝福和日历。 */
@supports(width:1cqh) {
  .birthday-stage {
    container-type:size
  }
  .cake-illustration {
    position:absolute;
    width:min(113%,calc((100cqh + 30px)*1.3636));
    max-width:490px
  }
}

@media(max-height:650px) {
  .calendar-wrap {
    width:206px
  }
  .calendar-card {
    padding:6px 12px
  }
  .calendar-header {
    margin-bottom:4px
  }
  .calendar-grid {
    row-gap:1px
  }
  .calendar-grid>span,.calendar-grid>.calendar-day {
    height:16px
  }
  .calendar-footnote {
    margin-top:3px;
    padding-top:3px
  }
  .calendar-header>span:first-child {
    font-size:12px
  }
  .stage-caption {
    display:none
  }
  .round-button {
    width:40px;
    height:40px
  }
  .birthday-layout {
    padding-bottom:calc(80px + env(safe-area-inset-bottom))
  }
  .wish-relation {
    letter-spacing:0;
    font-size:6px
  }
  .wish-content {
    font-size:11px
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    animation-delay:0s!important;
    transition-duration:.12s!important;
    transition-delay:0s!important
  }
  .birthday-scene.is-playing .birthday-heading,.birthday-scene.is-playing .calendar-wrap,.birthday-scene.is-playing .floating-notes,.birthday-scene.is-playing .birthday-bottom {
    opacity:1;
    transform:none
  }
  .candle-flame {
    box-shadow:0 0 14px 4px #ffd28740
  }
  .scenery>img {
    filter:saturate(.65)
  }
}
/* 主场景参考视频修订：仅覆盖非首页，不触碰首页尺寸、动画或转场。 */
#app.nav-hidden .bottom-nav { display:none; }
#app.nav-hidden #memories .inner-scene-content { padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
#app.nav-hidden #wishes .inner-scene-content { padding-bottom:calc(30px + env(safe-area-inset-bottom)); }
#app[data-scene="birthday"] .scenery { opacity:0; }
#birthday { background:#03070d; container-type:size; }
.reference-photo { position:absolute; bottom:0; left:50%; height:92%; aspect-ratio:544/720; min-width:100%; transform:translateX(-50%); }
.reference-photo>img { width:100%;height:100%;object-fit:fill; }
.reference-photo::after {content:"";position:absolute;inset:0;background:linear-gradient(#03070d 0%,transparent 20%,transparent 76%,#0003);pointer-events:none;}
.reference-flame {position:absolute;left:46.9%;top:38.3%;width:2%;height:5.5%;border-radius:65% 35% 50% 50%;background:linear-gradient(0deg,#8697ff,#fff5c8 22%,#fff1b2 70%,#ffbd65);box-shadow:0 0 10px 4px #ffd08c88,0 0 30px 12px #ffab4930;transform-origin:50% 100%;animation:reference-flame 1.4s ease-in-out infinite;z-index:2;}
.reference-flame i{position:absolute;bottom:10%;left:25%;width:50%;height:65%;border-radius:50%;background:#fffbe4;}
#birthday .birthday-layout{position:absolute;inset:0;padding:0;display:block;}
#birthday .scene-masthead{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:8;height:auto;}
#birthday .scene-masthead>span{display:none;}
#birthday .music-button{width:32px;height:32px;opacity:.75;background:#0005;}
#birthday .birthday-heading{position:absolute;top:6%;left:5%;right:5%;margin:0;align-items:start;}
#birthday .birthday-title-block{padding:0;}
#birthday .birthday-title-block>.eyebrow{display:none;}
#birthday .birthday-title-block h1{font-size:clamp(30px,9vw,46px);font-family:var(--hand);letter-spacing:0;text-shadow:1px 2px 2px #000;transform:rotate(-6deg);}
#birthday .title-star{display:none;}
#birthday .birthday-english{font-size:6px;letter-spacing:1.3px;color:#fff0b9;margin-top:5px;}
#birthday .birthday-date{display:block;position:relative;min-width:46%;padding-right:17px;text-align:right;}
#birthday .date-month{position:absolute;left:0;top:25px;font-size:22px;color:#fff428;font-family:var(--serif);font-weight:bold;letter-spacing:0;text-shadow:1px 2px #000;}
#birthday .date-number{display:block;margin-top:-12px;}
#birthday .date-number strong{font-size:76px;line-height:1;font-family:Georgia,serif;color:#e8f6ff;text-shadow:2px 3px #6ba8cf,-1px -1px #fff;letter-spacing:2px;}
#birthday .date-number>span{display:block;color:#fff329;font-size:24px;font-weight:bold;line-height:1;margin-right:0;}
#birthday .lunar-date{display:block;color:#fff329;letter-spacing:1px;font-size:12px;margin-top:8px;}
#birthday .calendar-wrap{position:absolute;top:21%;left:7%;width:76%;max-width:none;height:42%;z-index:3;}
#birthday .calendar-caption,#birthday .calendar-footnote{display:none;}
#birthday .calendar-card{height:100%;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;}
#birthday .calendar-header{justify-content:start;gap:0;margin:0 0 16px;text-shadow:0 2px 3px #000;}
#birthday .calendar-header>span:first-child{order:2;font-family:var(--sans);font-size:15px;letter-spacing:0;}
#birthday .calendar-header>span:last-child{order:1;font-family:var(--sans);font-size:15px;letter-spacing:0;color:white;}
#birthday .calendar-weekdays{font-size:10px;color:white;margin-bottom:11px;}
#birthday .calendar-grid{height:calc(100% - 60px);grid-auto-rows:1fr;row-gap:3px;}
#birthday .calendar-grid>.calendar-day{height:auto;font-size:14px;color:#fff;text-shadow:0 1px 3px #000;font-family:var(--sans);font-weight:500;}
#birthday .calendar-grid .birthday-day{color:white!important;}
#birthday .heart-shape{top:calc(50% - 8px);background:#e94199;filter:drop-shadow(0 0 6px #ff9ed9);}
#birthday .birthday-stage{position:absolute;inset:0;margin:0;min-height:0;container-type:normal;pointer-events:none;}
#birthday .cake-illustration,#birthday .stage-caption,#birthday .birthday-stage::after{display:none;}
#birthday .viewfinder{left:6%;top:35%;width:48px;height:58px;}
#birthday .camera-corner,#birthday .focus-cross{display:none;}
#birthday .recording{display:none;}
#birthday .camera-info{display:block;top:0;bottom:auto;font-family:var(--sans);font-size:9px;color:#fff;line-height:1.1;opacity:1;}
#birthday .floating-notes{left:11%;top:33%;width:85px;height:30px;transform:rotate(-12deg);color:#ebfff4;}
#birthday .floating-notes::before{content:"";position:absolute;inset:-5px -10px;border-bottom:3px double #e5fff9aa;border-radius:50%;transform:rotate(5deg);}
#birthday .floating-notes>span{font-size:17px;}
#birthday .floating-notes>span:nth-child(2){left:37px;top:4px;}
#birthday .floating-notes>span:nth-child(3){left:63px;top:-5px;}
#birthday .birthday-bottom{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));left:0;right:0;margin:0;z-index:6;}
#birthday .birthday-bottom>p{font-family:var(--hand);font-size:19px;letter-spacing:2px;color:white;text-shadow:0 1px 4px #000;}
.birthday-script{display:block;font-family:Georgia,cursive;font-style:italic;font-size:17px;margin-bottom:9px;color:#f1c3e6;text-shadow:1px 1px #adca83,-1px -1px #fff7c1;}
#birthday .replay-button{color:#f2e2d1;background:#0004;border-radius:20px;padding:5px 13px;margin-top:10px;min-height:32px;}
.reference-focus{position:absolute;left:40%;top:40%;width:19%;height:13%;z-index:5;background:linear-gradient(white,white) left top/28% 1px no-repeat,linear-gradient(white,white) left top/1px 28% no-repeat,linear-gradient(white,white) right top/28% 1px no-repeat,linear-gradient(white,white) right top/1px 28% no-repeat,linear-gradient(white,white) left bottom/28% 1px no-repeat,linear-gradient(white,white) left bottom/1px 28% no-repeat,linear-gradient(white,white) right bottom/28% 1px no-repeat,linear-gradient(white,white) right bottom/1px 28% no-repeat;opacity:0;pointer-events:none;}
.reference-focus i{position:absolute;width:4px;height:4px;background:white;border-radius:50%;left:50%;top:50%;}
#birthday.is-playing .reference-photo{animation:reference-focus-in 1.1s ease both;}
#birthday.is-playing .reference-focus{animation:reference-focus-box 1.6s ease both;}
#birthday.is-playing .birthday-heading{animation:soft-reveal .8s ease 1s both;}
#birthday.is-playing .calendar-wrap{animation:reference-calendar 1.7s var(--ease) 3.6s both;}
#birthday.is-playing .birthday-bottom{animation:soft-reveal .8s ease .9s both;}
#birthday.is-complete .reference-photo{animation:none;}
#birthday.is-complete .calendar-wrap{animation:none;opacity:1;transform:none;}
#birthday .swipe-cue{position:absolute;bottom:4px;left:0;right:0;text-align:center;color:#e9dfd6;font-size:8px;letter-spacing:2px;z-index:7;}
.scene.vertical-enter-next,.scene.vertical-enter-prev {
  visibility:visible;
  opacity:0;
  transform:translateY(100%);
  transition:none;
}
.scene.vertical-enter-prev {transform:translateY(-100%);}
.scene.is-active.vertical-enter-next,.scene.is-active.vertical-enter-prev {
  opacity:1;
  transform:none;
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
.scene.is-leaving.vertical-leave-next {transform:translateY(-45%);}
.scene.is-leaving.vertical-leave-prev {transform:translateY(45%);}
.scene.vertical-enter-next,.scene.vertical-enter-prev,
.scene.vertical-leave-next,.scene.vertical-leave-prev {will-change:transform,opacity;}
@keyframes reference-flame{0%,100%{transform:rotate(3deg) scale(.9,1)}40%{transform:rotate(-4deg) scale(1.08,.93)}70%{transform:rotate(5deg) scale(.95,1.06)}}
@keyframes reference-focus-in{from{filter:blur(5px);opacity:.35}to{filter:blur(0);opacity:1}}
@keyframes reference-focus-box{0%,55%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1)}}
@keyframes reference-calendar{from{opacity:0;transform:translate(30%,20%) scale(.65)}to{opacity:1;transform:none}}
@media(max-height:650px){#birthday .birthday-heading{top:5%;}#birthday .date-number strong{font-size:59px;}#birthday .date-month{font-size:18px;top:17px;}#birthday .date-number>span{font-size:19px;}#birthday .lunar-date{font-size:10px;margin-top:4px;}#birthday .calendar-wrap{top:22%;height:43%;}#birthday .calendar-grid>.calendar-day{font-size:12px;}#birthday .birthday-bottom>p{font-size:15px;}.birthday-script{font-size:14px;margin-bottom:5px;}}
@media(prefers-reduced-motion:reduce){#birthday.is-playing .reference-photo,#birthday.is-playing .calendar-wrap{animation:none;opacity:1;transform:translateX(0);}#birthday.is-playing .reference-photo{transform:translateX(-50%);} .reference-flame{animation:none;} .scene[class*="vertical-"]{animation-duration:.12s!important;}}
/* 保留完整蛋糕与右侧花束，避免竖屏 cover 裁掉参考素材的装饰。 */
#birthday .reference-photo{width:112%;height:auto;min-width:0;aspect-ratio:544/720;bottom:4%;}
#birthday .reference-photo::after{background:linear-gradient(#03070d 0%,transparent 20%,transparent 80%,#03070d 100%);}
#birthday.reference-unavailable .cake-illustration{display:block;position:absolute;bottom:10%;left:0;width:100%;}
#app:not(.nav-hidden) #birthday .birthday-bottom{bottom:calc(91px + env(safe-area-inset-bottom));}
#app:not(.nav-hidden) #birthday .swipe-cue{bottom:82px;}
@media(max-height:650px){#birthday .reference-photo{width:100%;bottom:2%;}}
#birthday .reference-photo{pointer-events:none;}

/* 参考 2 秒左右的金色放射闪光，随后由 Canvas 接续飘落光点。 */
#birthday .reference-burst{position:absolute;inset:12% -35% -5%;z-index:4;opacity:0;pointer-events:none;background:repeating-conic-gradient(from 12deg,transparent 0deg 19deg,#ffe6a388 20deg 22deg,transparent 23deg 30deg);mask-image:radial-gradient(circle,transparent 3%,#000 17%,#0004 55%,transparent 68%);}
#birthday.is-playing .reference-burst{animation:reference-gold-burst 1.7s ease-out 1.85s both;}
#birthday.is-complete .reference-burst{animation:none;opacity:0;}
@keyframes reference-gold-burst{0%{opacity:0;transform:scale(.2) rotate(-8deg)}18%{opacity:.9}100%{opacity:0;transform:scale(1.7) rotate(8deg)}}
@media(prefers-reduced-motion:reduce){#birthday .reference-burst{display:none;}}
#birthday,#memories{user-select:none;-webkit-user-select:none;}
#birthday.is-complete .birthday-heading,#birthday.is-complete .birthday-bottom,#birthday.is-complete .floating-notes{animation:none;opacity:1;transform:none;} #birthday.is-complete .reference-focus{animation:none;opacity:0;}
/* v3 日历修订：双历、紧凑五行、浅金双层爱心。仅作用于生日场景。 */
#birthday .calendar-wrap {
  top:20%;left:6%;width:86%;max-width:none;
  height:clamp(205px,33.2cqh,276px);
}
#birthday .calendar-card {
  display:flex;flex-direction:column;padding:9px 5px 7px;
  background:linear-gradient(100deg,#02081132,transparent 85%);
  border:0;border-radius:0;box-shadow:none;backdrop-filter:none;
}
#birthday .calendar-header {flex:none;height:19px;margin:0 0 9px;line-height:19px;}
#birthday .calendar-header>span {font-size:14px!important;}
#birthday .calendar-weekdays {flex:none;height:12px;font-size:9px;line-height:12px;margin:0 0 8px;color:#edeff2;}
#birthday .calendar-grid {
  height:auto;min-height:0;flex:1;grid-template-rows:repeat(var(--calendar-rows,5),minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);row-gap:4px;
}
#birthday .calendar-grid>.calendar-day {
  display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;
  height:auto;gap:3px;isolation:isolate;overflow:visible;text-shadow:0 1px 3px #000b;
}
#birthday .calendar-day>.day-number {position:relative;z-index:2;font-family:var(--sans);font-size:14px;font-weight:500;line-height:17px;color:#fff;}
#birthday .calendar-day>.lunar-day {position:relative;z-index:2;font-family:var(--sans);font-size:8px;font-weight:400;line-height:10px;letter-spacing:0;white-space:nowrap;color:#e4e1d8;}
#birthday .calendar-day.birthday-day>.day-number {font-family:Georgia,serif;font-size:20px;font-weight:600;text-shadow:0 0 8px #ffb0db,0 1px 2px #ad287d;}
#birthday .calendar-day.birthday-day>.lunar-day {color:#fff3e6;text-shadow:0 1px 3px #000;}
#birthday .birthday-heart {
  position:absolute;left:50%;top:50%;z-index:0;width:clamp(45px,15vw,61px);height:auto;aspect-ratio:100/92;
  pointer-events:none;transform:translate(-50%,-50%) rotate(-4deg);transform-origin:center;
  animation:video-heart-pulse 2.6s ease-in-out infinite;
}
#birthday .birthday-heart svg {display:block;width:100%;height:100%;overflow:visible;}
#birthday .birthday-heart .heart-outline {stroke:#ffefcc;stroke-width:1.45;stroke-linejoin:round;}
#birthday .birthday-heart .outer {opacity:.68;}
#birthday .birthday-heart .inner {opacity:.94;stroke-width:1.15;}
#birthday.is-playing .calendar-wrap {animation:calendar-v3-arrival 1.4s cubic-bezier(.18,.7,.23,1) 3.6s both;}
#birthday.is-playing .birthday-heart {animation:video-heart-arrival .75s ease-out 4.7s both,video-heart-pulse 2.6s ease-in-out 5.45s infinite;}
#birthday.is-complete .birthday-heart {animation:video-heart-pulse 2.6s ease-in-out infinite;}
#birthday .viewfinder {top:calc(20% + clamp(205px,33.2cqh,276px) + 11px);}
#birthday .floating-notes {top:calc(20% + clamp(205px,33.2cqh,276px) + 8px);}
@keyframes calendar-v3-arrival {0%{opacity:0;transform:translate(18%,10%) scale(.8)}70%{opacity:1;transform:translate(-1%,0) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes video-heart-pulse {0%,100%{transform:translate(-50%,-50%) rotate(-4deg) scale(1);opacity:.9}42%{transform:translate(-50%,-50%) rotate(-4deg) scale(1.055);opacity:1}65%{transform:translate(-50%,-50%) rotate(-4deg) scale(1.015);opacity:.95}}
@keyframes video-heart-arrival {0%{transform:translate(-50%,-50%) rotate(-4deg) scale(.8);opacity:0}60%{transform:translate(-50%,-50%) rotate(-4deg) scale(1.1);opacity:1}100%{transform:translate(-50%,-50%) rotate(-4deg) scale(1);opacity:1}}
@media(max-height:650px){
  #birthday .calendar-wrap {top:21%;height:205px;}
  #birthday .calendar-card {padding-top:4px;padding-bottom:4px;}
  #birthday .calendar-header {height:17px;line-height:17px;margin-bottom:6px;}
  #birthday .calendar-header>span {font-size:12px!important;}
  #birthday .calendar-weekdays {height:10px;line-height:10px;margin-bottom:5px;}
  #birthday .calendar-grid {row-gap:3px;}
  #birthday .calendar-day>.day-number {font-size:12px;line-height:15px;}
  #birthday .calendar-day>.lunar-day {font-size:8px;line-height:9px;}
  #birthday .calendar-day.birthday-day>.day-number {font-size:18px;}
  #birthday .birthday-heart {width:47px;}
  #birthday .viewfinder {top:calc(21% + 214px);}
  #birthday .floating-notes {top:calc(21% + 211px);}
}
@media(prefers-reduced-motion:reduce){
  #birthday.is-playing .calendar-wrap {animation:none;opacity:1;transform:none;}
  #birthday .birthday-heart,#birthday.is-playing .birthday-heart,#birthday.is-complete .birthday-heart {animation:none;opacity:1;transform:translate(-50%,-50%) rotate(-4deg);}
}
#birthday .calendar-day>.lunar-day{font-size:9px;line-height:11px;}
@media(max-height:650px){#birthday .calendar-day>.lunar-day{font-size:8.5px;line-height:10px;}}
/* v3.1：照片 544×720 原始像素坐标。外层锁定烛芯，内层才执行摇曳。 */
#birthday .reference-photo {container-type:inline-size;--photo-bottom-space:4cqh;}
#birthday .reference-flame {
  left:46.7830882353%;top:44.1666666667%; /* wick (254.5,318) / (544,720) */
  width:2.7573529412%;height:6.1111111111%; /* 15×44 source pixels */
  transform:translate(-50%,-100%);transform-origin:50% 100%;
  animation:none;background:none;border-radius:0;box-shadow:none;
}
#birthday .reference-flame>i {
  display:block;position:absolute;inset:0;width:100%;height:100%;
  border-radius:62% 38% 48% 52%;transform-origin:50% 100%;
  background:linear-gradient(0deg,#7897fa 0%,#eee9ff 10%,#fff9dc 24%,#fff2b8 65%,#ffca82 95%);
  box-shadow:0 0 1.1cqw .3cqw #ffdaae85,0 0 4cqw 1.3cqw #ffb96530;
  animation:wick-pinned-flicker 1.65s ease-in-out infinite;
}
#birthday .reference-flame>i::after {content:"";position:absolute;left:28%;bottom:12%;width:44%;height:70%;border-radius:55% 45% 50% 50%;background:#fffbea;opacity:.9;}
@keyframes wick-pinned-flicker {
  0%,100%{transform:rotate(1deg) scale(.98,1)}
  28%{transform:rotate(-2deg) scale(.94,1.035)}
  53%{transform:rotate(2.5deg) scale(1.025,.97)}
  76%{transform:rotate(-1deg) scale(.97,1.015)}
}
@font-face {font-family:"Birthday Wish CN";src:url("assets/fonts/birthday-wish-cn.woff2") format("woff2");font-display:swap;font-weight:300 400;}
@font-face {font-family:"Birthday Wish Script";src:url("assets/fonts/birthday-wish-script.woff2") format("woff2");font-display:swap;font-weight:400;}
@font-face {font-family:"Kaushan Script";src:url("assets/fonts/kaushan-script.woff2") format("woff2");font-display:swap;font-weight:400;}
/* 文案与照片共用坐标平面；参考：小标题约 y600、英文 y635、中文 y675。 */
#birthday .video-wish-copy {
  position:absolute;inset:0;z-index:3;pointer-events:none;
  transform:translateY(min(0px,calc(var(--photo-bottom-space) + 4cqw - env(safe-area-inset-bottom))));
}
#birthday .video-wish-inner {position:absolute;inset:0;}
#birthday .video-wish-mini {
  position:absolute;top:82.15%;left:51.5%;display:block;white-space:nowrap;
  font-family:"Birthday Wish CN","KaiTi","STKaiti",serif;font-size:2.57cqw;font-weight:400;line-height:1.2;
  color:#fffaf0;letter-spacing:0;transform:translateX(-50%) rotate(-20deg);
  text-shadow:0 .08cqw .2cqw #72584c66;
}
#birthday .video-wish-copy .birthday-script {
  position:absolute;top:86.1%;left:0;width:100%;margin:0;line-height:1.15;text-align:center;
  font-family:"Birthday Wish Script","Brush Script MT","Segoe Script",cursive;font-style:normal;font-weight:400;
  font-size:5.88cqw;letter-spacing:.08cqw;white-space:nowrap;
  color:#f1bada;background:linear-gradient(100deg,#f3afd6 12%,#d6a8e8 26%,#a9c9ee 40%,#a8dcb4 55%,#f2df9e 72%,#f5c78e 86%,#f4bedb 100%);
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:.075cqw #fff1dc;text-shadow:none;filter:drop-shadow(0 .15cqw .13cqw #e6c89880);
}
#birthday #birthday-wish {
  position:absolute;left:0;top:91.3%;width:100%;margin:0;padding:0 3%;
  font-family:var(--serif);font-weight:400;
  font-size:4.7794cqw;line-height:1.25;letter-spacing:.2757cqw;text-align:center;
  color:#fffdf6;white-space:nowrap;-webkit-text-stroke:0 transparent;
  text-shadow:0 .1cqw .25cqw #805c4566,0 0 .18cqw #fff8e440;
}
#birthday:not(.is-playing):not(.is-complete) .video-wish-inner {opacity:0;}
#birthday.is-playing .video-wish-inner {animation:video-wish-arrival .3s ease-out .8s both;}
#birthday.is-complete .video-wish-inner {animation:none;opacity:1;transform:none;}
@keyframes video-wish-arrival {from{opacity:0;transform:translateY(.6cqw)}to{opacity:1;transform:none}}
@media(max-height:650px){#birthday .reference-photo{--photo-bottom-space:2cqh;}}
@media(prefers-reduced-motion:reduce){#birthday .reference-flame>i{animation:none;}#birthday.is-playing .video-wish-inner{animation:none;opacity:1;transform:none;}}
/* 保留彩色字芯，细白描边只勾轮廓。 */
#birthday .video-wish-copy .birthday-script {background-image:linear-gradient(100deg,#f29aca 12%,#caa2e0 26%,#a4c6ea 40%,#a2d8ae 55%,#f0dc9c 72%,#f2c48c 86%,#eea8cc 100%);-webkit-text-stroke:.035cqw #fff3dc;}
/* 短屏仅抬升文字，避让原有重播按钮及底部安全区；按钮本身保持原样。 */
#birthday .video-wish-copy {transform:translateY(min(0px,calc(var(--photo-bottom-space) + 4cqw - env(safe-area-inset-bottom) - 57px)));}