:root {
  color-scheme: light;
  --paper: #f7f5ee;
  --ink: #294e70;
  --muted: #73899a;
  --serif: "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid #6e91ad; outline-offset: 6px; }
[hidden] { display: none !important; }
p, h1 { margin: 0; }
.gift { width: min(100%, 460px); margin-inline: auto; min-height: 100svh; padding: max(36px, env(safe-area-inset-top)) 29px max(28px, env(safe-area-inset-bottom)); text-align: center; position: relative; isolation: isolate; }
.gift::before { content: ""; position: fixed; z-index: -1; inset: 0; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23808080' d='M0 0h150v150H0z' filter='url(%23p)'/%3E%3C/svg%3E"); }
.brand { font: 500 13px/1.5 var(--serif); letter-spacing: .36em; text-indent: .36em; }
.dedication { margin-top: 10px; color: #8d9da8; font: 9px/1.5 Georgia, serif; letter-spacing: .22em; text-indent: .22em; }
.blessing { margin-top: clamp(40px, 7svh, 62px); font-family: var(--serif); font-size: clamp(19px, 5.2vw, 22px); font-weight: 400; line-height: 1.95; letter-spacing: .025em; }
.blessing h1 { font-size: clamp(30px, 8.1vw, 35px); font-weight: 400; line-height: 1.5; letter-spacing: .11em; text-indent: .11em; margin-bottom: 22px; color: #234c70; }
.verse { display: block; }
.unfolding { color: #5b7388; }
.color-line { color: #194a75; position: relative; display: table; margin-inline: auto; }
.color-line::after { content: ""; display: block; height: 1px; width: calc(100% - .6em); position: absolute; left: .3em; bottom: 1px; background: #9bb4c580; }
.second-wish { margin-top: 23px; color: #4b657e; }
.film { margin-top: clamp(35px, 6svh, 48px); }
.film-poster { display: block; position: relative; padding: 0; width: 100%; border: 0; border-radius: 4px; aspect-ratio: 16 / 9; overflow: hidden; color: #2b5779; background: #e2e7e7; cursor: pointer; box-shadow: 0 1px 0 #244d6d12; }
.film-poster > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.play-disc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 49px; height: 49px; border: 1px solid #ffffffd9; border-radius: 50%; background: #fafbf4ed; backdrop-filter: blur(5px); box-shadow: 0 2px 16px #15395414; transition: background .18s, box-shadow .18s; }
.play-disc svg { width: 23px; height: 23px; fill: currentColor; margin-left: 3px; }
.film-poster:hover .play-disc { background: #fff; box-shadow: 0 2px 22px #15395424; }
.film-caption { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 13px; color: #758b9b; font-size: 10px; line-height: 1.5; letter-spacing: .08em; }
.duration { font-family: Georgia, serif; font-variant-numeric: tabular-nums; letter-spacing: .035em; }
.film-help { margin-top: 13px; color: #8495a0; font-size: 10px; line-height: 1.6; letter-spacing: .15em; text-indent: .15em; }
.signoff { margin-top: clamp(32px, 6svh, 48px); color: #7a8f9f; font-size: 10px; line-height: 1.7; letter-spacing: .14em; text-indent: .14em; }
.signoff-line { display: block; width: 23px; height: 1px; margin: 0 auto 17px; background: #a4b6c0; }
.no-script { margin-top: 15px; font-size: 13px; }
.no-script a { color: var(--ink); }
.watching { overflow: hidden; }
.player { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; z-index: 30; background: #080b10; display: flex; align-items: center; justify-content: center; color: white; overflow: hidden; overscroll-behavior: contain; touch-action: manipulation; }
.player:fullscreen { width: 100vw; height: 100vh; }
.player:-webkit-full-screen { width: 100vw; height: 100vh; }
.player video { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; background: #080b10; }
.player video::-webkit-media-controls { display: none !important; }
.player-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#0008, transparent 20%, transparent 70%, #000b); transition: opacity .2s; }
.player-button { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 44px; min-height: 44px; border: 0; color: #fff; background: transparent; cursor: pointer; }
.player-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.close-film { position: absolute; right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); padding: 7px 13px 7px 9px; gap: 5px; border: 1px solid #ffffff40; border-radius: 24px; background: #121c29b3; font-size: 12px; z-index: 3; }
.close-film svg { width: 21px; height: 21px; }
.center-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 66px; height: 66px; border: 1px solid #ffffff70; border-radius: 50%; background: #0c1b2b70; backdrop-filter: blur(5px); }
.center-play svg, .play-icon { fill: currentColor !important; stroke: none !important; }
.center-play svg { margin-left: 4px; width: 27px; height: 27px; }
.player.is-playing .center-play, .player.is-playing .play-icon { display: none; }
.player:not(.is-playing) .pause-icon { display: none; }
.player-controls { position: absolute; left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); bottom: max(21px, env(safe-area-inset-bottom)); z-index: 3; transition: opacity .2s; }
.timeline { display: flex; align-items: center; min-height: 36px; }
#seek { --progress: 0%; appearance: none; -webkit-appearance: none; width: 100%; height: 3px; border-radius: 5px; background: linear-gradient(to right, #d6e4ee var(--progress), #ffffff35 var(--progress)); cursor: pointer; margin: 0; padding: 0; }
#seek::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #eff4f7; box-shadow: 0 0 0 9px #ffffff01; }
#seek::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #eff4f7; }
#seek:focus-visible { outline: 2px solid #9abbd3; outline-offset: 9px; }
.control-row { display: flex; align-items: center; gap: 7px; }
.toggle-play { margin-left: -10px; }
.play-time { font-size: 11px; color: #e4eaf0; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.time-divider { padding: 0 8px; opacity: .5; }
.mute { margin-left: auto; margin-right: -10px; }
.muted-icon, .is-muted .sound-icon { display: none; }
.is-muted .muted-icon { display: block; }
.player.hide-controls .player-controls, .player.hide-controls .player-shade { opacity: 0; pointer-events: none; }
.loading { position: absolute; left: 0; right: 0; top: calc(50% + 52px); text-align: center; font-size: 12px; color: #dae4ed; display: flex; align-items: center; justify-content: center; gap: 9px; }
.spinner { width: 15px; height: 15px; border: 1.5px solid #ffffff40; border-top-color: white; border-radius: 50%; animation: spin 1s linear infinite; }
.player-message { position: absolute; left: 24px; right: 24px; top: calc(50% + 62px); text-align: center; color: #e4eaf0; font-size: 12px; line-height: 1.8; }
.download-fallback { position: absolute; left: 50%; top: calc(50% + 126px); transform: translateX(-50%); color: #c4dae9; font-size: 12px; padding: 10px; }
.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; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 700px) { .gift { padding-top: 47px; padding-bottom: 40px; } .blessing { margin-top: 48px; } }
@media (max-width: 350px) { .gift { padding-inline: 23px; } .blessing { font-size: 18px; } .blessing h1 { font-size: 29px; } }
@media (max-height: 720px) and (orientation: portrait) { .gift { padding-top: max(25px, env(safe-area-inset-top)); } .blessing { margin-top: 28px; font-size: 19px; line-height: 1.8; } .blessing h1 { margin-bottom: 16px; font-size: 30px; } .second-wish { margin-top: 18px; } .film { margin-top: 29px; } .signoff { margin-top: 26px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }