.timeline-page{display:flex;height:calc(100vh - var(--navHeight));overflow:hidden}.timeline-nav{width:220px;min-width:220px;display:flex;align-items:center;justify-content:center;padding:var(--spacingXl) 0;position:relative;user-select:none}.card-stack{position:relative;width:100%;height:400px;overflow:hidden}.card-stack:before,.card-stack:after{content:"";position:absolute;left:0;right:0;height:60px;z-index:1;pointer-events:none}.card-stack:before{top:0;background:linear-gradient(to bottom,var(--colorBackground),transparent)}.card-stack:after{bottom:0;background:linear-gradient(to top,var(--colorBackground),transparent)}.year-card{position:absolute;left:16px;right:16px;top:42%;height:48px;margin-top:-24px;padding:0 16px;display:flex;flex-direction:column;justify-content:center;border-radius:12px;background:transparent;cursor:pointer;transition:transform .42s cubic-bezier(.25,.46,.45,.94),opacity .35s ease,background-color .3s ease,box-shadow .3s ease;will-change:transform,opacity}.year-card:hover{background:var(--colorBackgroundHover)}.card-year{font-family:var(--fontDisplay);font-size:var(--fontSizeSm);color:var(--colorTextMuted);line-height:1.2;transition:font-size .25s ease,color .25s ease;white-space:nowrap}.card-title{font-family:var(--fontBody);font-size:11px;color:var(--colorTextMuted);line-height:1.3;margin-top:2px;opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s ease 80ms}.year-card.active{background:var(--colorPrimaryAlpha5);box-shadow:0 1px 3px var(--colorShadow2),0 4px 12px var(--colorShadow1)}.year-card.active .card-year{font-size:var(--fontSizeBase);color:var(--colorPrimary);font-weight:700}.year-card.active .card-title{opacity:.65}.timeline-mobile{display:none}.timeline-content{flex:1;padding:var(--spacingXl) var(--spacing3xl) var(--spacing3xl);overflow-y:auto;background:var(--colorBackgroundAlt);border-radius:20px;margin:24px 24px 24px 0}.content-wrapper{max-width:900px}.year-section{display:none;animation:fadeIn .4s ease}.year-section.active{display:block}.year-title{font-family:var(--fontDisplay);font-size:var(--fontSize4xl);font-weight:700;color:var(--colorText);margin-bottom:var(--spacingXl);letter-spacing:-.02em}.year-text{font-family:var(--fontBody);font-size:var(--fontSizeSm);line-height:1.7;color:var(--colorText)}.year-text p{margin-bottom:var(--spacingLg);text-align:justify}@keyframes fadeIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@media(max-width:1024px){.timeline-nav{width:180px;min-width:180px}.card-stack{height:340px}.timeline-content{padding:var(--spacingLg) var(--spacing2xl) var(--spacing2xl)}.year-title{font-size:var(--fontSize3xl)}}@media(max-width:768px){.timeline-page{flex-direction:column}.timeline-nav{width:100%;min-width:100%;height:auto;padding:var(--spacingMd);position:relative}.timeline-nav:before,.timeline-nav:after{content:"";position:absolute;top:var(--spacingMd);bottom:var(--spacingMd);width:24px;pointer-events:none;z-index:2}.timeline-nav:before{left:0;background:linear-gradient(to right,var(--colorBackground) 0%,transparent 100%)}.timeline-nav:after{right:0;background:linear-gradient(to left,var(--colorBackground) 0%,transparent 100%)}.card-stack{display:none}.timeline-mobile{display:flex;align-items:center;gap:var(--spacingSm);overflow-x:auto;padding:var(--spacingSm) 0;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scroll-snap-type:x proximity;scrollbar-width:none}.timeline-mobile::-webkit-scrollbar{display:none}.mobile-year-btn{scroll-snap-align:center;flex-shrink:0;padding:6px 14px;font-family:var(--fontDisplay);font-size:var(--fontSizeSm);color:var(--colorTextMuted);background:none;border:none;border-radius:20px;cursor:pointer;transition:all var(--transitionNormal);opacity:.5}.mobile-year-btn:active{transform:scale(.95)}.mobile-year-btn.active{color:var(--colorPrimary);background:var(--colorPrimaryAlpha6);opacity:1;font-weight:700}.mobile-year-btn.adjacent{opacity:.7;color:var(--colorPrimary)}.timeline-content{padding:var(--spacingMd) var(--spacingLg) var(--spacingLg);border-radius:16px 16px 0 0;margin:12px 12px 0}.year-title{font-size:var(--fontSize2xl)}}@media(max-width:480px){.timeline-mobile{padding:var(--spacingXs) 0}.mobile-year-btn{padding:5px 12px;font-size:var(--fontSizeXs);border-radius:16px}.timeline-content{padding:var(--spacingSm) var(--spacingMd) var(--spacingMd);margin:8px 8px 0}.year-title{font-size:var(--fontSizeXl);margin-bottom:var(--spacingMd)}.year-text{font-size:var(--fontSizeXs);line-height:1.65}.year-text p{margin-bottom:var(--spacingMd)}}
