:root {
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-blue: #0066FF;
  --color-gray-300: #D4D4D4;
  --color-gray-400: #A3A3A3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --font-medium: 500;
  --font-bold: 700;
  --radius-full: 9999px;
  --transition-fast: 150ms ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-snap-type:y mandatory;scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;line-height:1.6;color:#000;background:#F8FAFF;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:#0066FF;color:#fff}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#F5F5F5}
::-webkit-scrollbar-thumb{background:#A3A3A3;border-radius:9999px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

.global-bg{display:none}

.container{width:100%;max-width:1100px;margin:0 auto}
.section-label{display:inline-block;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-blue);text-transform:uppercase;letter-spacing:0.2em;margin-bottom:var(--spacing-md);text-align:center}
.section-title{font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--color-black);margin-bottom:var(--spacing-lg);line-height:1.1;letter-spacing:-0.02em;text-align:center}
.section-text{font-size:var(--text-lg);color:var(--color-gray-600);line-height:1.7;text-align:center}

.hero{scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--spacing-xl);position:relative;z-index:1}
.hero-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hero-title{font-size:4rem;font-weight:700;color:#000;margin-bottom:2rem;letter-spacing:-0.02em;line-height:1}
.hero-subtitle{font-size:1rem;color:#0066FF;margin-bottom:1.5rem;font-weight:500}
.hero-text{font-size:0.9rem;color:#525252;margin-bottom:3rem;line-height:1.8}
.scroll-indicator{display:none}

.animate-on-scroll{opacity:1;transform:none;transition:none}
.animate-on-scroll.visible{opacity:1;transform:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}

.sticky-section{min-height:auto;padding:0;position:relative}
.sticky-container{display:flex;flex-direction:column;min-height:auto;height:auto}
.sticky-side{display:none}
.desktop-only{display:none}
.sticky-slides{width:100%;height:auto;position:relative;overflow:visible;touch-action:auto}

.sticky-slide{scroll-snap-align:start;scroll-snap-stop:always;position:relative;height:100vh;width:100%;opacity:1;z-index:1;transform:none;transition:opacity 0.3s ease;display:flex;align-items:center;justify-content:center;background:#F8FAFF}
.sticky-slide.active{opacity:1;z-index:1;transform:none}
.sticky-slide-title{display:flex}

.slide-content{max-width:90%;padding:var(--spacing-xl);text-align:center;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}
.slide-number{display:flex;justify-content:center;align-items:center;width:100%;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-blue);margin-bottom:var(--spacing-md);letter-spacing:0.1em}
.slide-title{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-black);margin-bottom:var(--spacing-md);text-align:center;width:100%}
.slide-text{font-size:var(--text-base);color:var(--color-gray-600);line-height:1.7;margin-bottom:var(--spacing-xl);text-align:center;width:100%}
.slide-date{display:flex;justify-content:center;align-items:center;width:100%;margin-bottom:var(--spacing-md)}
.slide-year{display:inline-block;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-blue);letter-spacing:0.1em;margin-right:var(--spacing-md)}
.slide-month{display:inline-block;font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-black)}
.slide-day{display:inline-block;font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-black);margin-left:0.25rem}

.sticky-left .slide-content,.sticky-right .slide-content{margin:0 auto;padding:var(--spacing-xl)}

.sticky-slides-image .sticky-slide{height:100vh;position:relative}
.sticky-slides-image .slide-image{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.sticky-slides-image .sticky-slide::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(255,255,255,0.95) 0%,rgba(255,255,255,0.85) 40%,rgba(255,255,255,0.7) 100%);z-index:1}
.slide-content-overlay{padding:var(--spacing-xl);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:2}
.slide-content-overlay .slide-title{color:var(--color-black)}
.slide-content-overlay .slide-text{color:var(--color-gray-600)}

.social-links{display:flex;flex-wrap:wrap;gap:var(--spacing-md);justify-content:center}
.social-link{font-size:var(--text-base);font-weight:var(--font-medium);color:var(--color-black);text-decoration:none;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-gray-300);border-radius:var(--radius-full);transition:all var(--transition-fast)}
.social-link:hover{color:var(--color-blue);border-color:var(--color-blue)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:0.75rem 1.5rem;font-size:var(--text-base);font-weight:var(--font-medium);border-radius:var(--radius-full);transition:all 300ms ease;cursor:pointer;min-height:48px;text-decoration:none;border:none;outline:none;margin:0 auto}
.btn-primary{background-color:var(--color-blue);color:var(--color-white)}
.btn-primary:hover{background-color:#0052CC}

.ending-section{scroll-snap-align:start;scroll-snap-stop:always;min-height:100vh;background:#F8FAFF;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--spacing-3xl)}
.ending-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:600px}
.ending-text{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-black);margin-bottom:var(--spacing-lg);letter-spacing:-0.01em}
.ending-subtext{font-size:var(--text-base);color:var(--color-gray-500);line-height:1.7}

.font-transition{transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1),filter 0.6s cubic-bezier(0.4,0,0.2,1),transform 0.6s cubic-bezier(0.4,0,0.2,1);opacity:1;filter:blur(0);transform:scale(1)}
body.fonts-loaded .font-transition{animation:fontDropIn 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards}
@keyframes fontDropIn{0%{opacity:0.6;filter:blur(2px);transform:scale(0.98)}50%{opacity:0.85;filter:blur(1px);transform:scale(0.99)}100%{opacity:1;filter:blur(0);transform:scale(1)}}
body.fonts-loaded .hero-title,body.fonts-loaded .section-title,body.fonts-loaded .slide-title{font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Arial,sans-serif}

@media(max-width:480px){
  .hero-title{font-size:3rem}
  .slide-title{font-size:var(--text-xl)}
  .section-title{font-size:var(--text-2xl)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}
  .animate-on-scroll{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
}