:root{--timeline-color:#ddd;--border-color:#e0e0e0;--card-shadow:0 4px 12px rgba(0,0,0,.1);--primary-color:#06c;--light-text:#444;--transition-speed:0.3s;--secondary-color:#f90;--dark-text:#1a1a1a}.timeline-page{min-height:100vh;background:linear-gradient(135deg,rgba(0,102,204,.02),rgba(255,153,0,.02))}.timeline-hero{padding:clamp(40px,5vw,80px) clamp(20px,5vw,40px);color:#fff;text-align:center;background:linear-gradient(135deg,#06c,#0052a3)}.timeline-hero h1{font-size:clamp(32px,5vw,48px);font-weight:700;margin-bottom:16px;text-shadow:0 2px 4px rgba(0,0,0,.2)}.timeline-hero p{font-size:clamp(14px,2vw,18px);max-width:600px;opacity:.95;margin:0 auto}.filters-section{padding:clamp(24px,4vw,40px) clamp(20px,5vw,40px);position:sticky;border-bottom:2px solid var(--border-color);top:0;box-shadow:0 2px 8px rgba(0,0,0,.05);background:#fff;z-index:50}.filters-container{max-width:1200px;gap:20px;margin:0 auto;display:grid}.filter-group{flex-direction:column;gap:10px;display:flex}.filter-label{font-size:clamp(12px,1.5vw,14px);font-weight:600;color:var(--dark-text);text-transform:uppercase;letter-spacing:.5px}.search-box{position:relative}.search-box input{padding:12px 16px 12px 40px;font-size:14px;border:2px solid var(--border-color);transition:border-color var(--transition-speed);border-radius:8px;width:100%}.search-box input:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px rgba(0,102,204,.1)}.search-icon{transform:translateY(-50%);pointer-events:none;color:var(--light-text);position:absolute;top:50%;left:12px}.filter-buttons{flex-wrap:wrap;gap:10px;display:flex}.filter-btn{padding:10px 16px;font-size:14px;border:2px solid var(--border-color);font-weight:500;color:var(--dark-text);transition:all var(--transition-speed);border-radius:24px;background:#fff;cursor:pointer;white-space:nowrap}.filter-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.filter-btn.active{border-color:var(--primary-color);color:#fff;background:var(--primary-color)}.filter-btn.era-btn{min-width:100px}.filter-btn.sort-btn{margin-left:auto}.date-range-input{gap:12px;align-items:center;display:flex}.date-range-input input[type=range]{flex:1;height:6px;-webkit-appearance:none;appearance:none;outline:none;border-radius:3px;background:var(--border-color)}.date-range-input input[type=range]::-webkit-slider-thumb{height:20px;-webkit-appearance:none;appearance:none;box-shadow:0 2px 4px rgba(0,0,0,.2);border-radius:50%;background:var(--primary-color);cursor:pointer;width:20px}.date-range-input input[type=range]::-moz-range-thumb{height:20px;border:none;box-shadow:0 2px 4px rgba(0,0,0,.2);border-radius:50%;background:var(--primary-color);cursor:pointer;width:20px}.date-range-output{font-size:14px;font-weight:600;color:var(--primary-color);min-width:120px;text-align:right}.reset-filters-btn{padding:10px 16px;font-size:14px;border:none;font-weight:500;color:#fff;transition:all var(--transition-speed);border-radius:24px;background:var(--light-text);cursor:pointer}.reset-filters-btn:hover{background:var(--dark-text)}.timeline-container{padding:clamp(40px,5vw,80px) clamp(20px,5vw,40px);position:relative;max-width:1000px;margin:0 auto}.timeline-container:before{height:100%;transform:translateX(-50%);content:"";position:absolute;top:0;background:linear-gradient(to bottom,var(--primary-color),var(--secondary-color));left:50%;width:4px}@media (max-width:768px){.timeline-container:before{left:20px}}.timeline-items{position:relative;flex-direction:column;gap:40px;display:flex}.timeline-item{animation:fadeIn .6s ease-out forwards;grid-template-columns:1fr 1fr;position:relative;opacity:0;gap:40px;display:grid}@keyframes fadeIn{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.timeline-item:nth-child(odd) .timeline-card{order:2}.timeline-item:nth-child(odd) .timeline-dot{left:calc(50% + 20px)}.timeline-item:nth-child(2n) .timeline-card{order:1}.timeline-item:nth-child(2n) .timeline-dot{right:calc(50% + 20px);left:auto}@media (max-width:768px){.timeline-item{grid-template-columns:1fr;gap:20px;padding-left:60px}.timeline-item .timeline-card{order:2!important}.timeline-item .timeline-dot{right:auto!important;left:20px!important}}.timeline-dot{height:20px;transform:translateX(-50%);border:4px solid var(--primary-color);position:absolute;top:20px;box-shadow:0 0 0 4px rgba(0,102,204,.1);border-radius:50%;background:#fff;left:50%;width:20px;z-index:10}.timeline-card{padding:clamp(20px,3vw,30px);transition:all var(--transition-speed);box-shadow:var(--card-shadow);border-radius:12px;background:#fff;cursor:pointer}.timeline-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.15)}.timeline-card.expanded{grid-column:1/-1;position:relative}@media (max-width:768px){.timeline-card{padding:20px}}.card-header{margin-bottom:16px;gap:16px;display:flex}.card-image{height:80px;overflow:hidden;flex-shrink:0;justify-content:center;font-size:12px;color:#fff;text-align:center;align-items:center;border-radius:8px;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));width:80px;display:flex}.card-image img{height:100%;object-fit:cover;width:100%}.card-info h3{font-size:clamp(16px,2vw,20px);font-weight:700;color:var(--dark-text);margin:0 0 4px}.card-meta{font-size:13px;margin-bottom:8px;color:var(--light-text)}.card-meta span{margin-right:12px;display:inline-block}.card-badge{padding:4px 10px;font-size:12px;font-weight:600;margin-right:8px;color:var(--primary-color);border-radius:12px;background:rgba(0,102,204,.1);display:inline-block}.card-body p{font-size:14px;color:var(--light-text);margin:0;line-height:1.6}.inventions-preview{padding-top:12px;font-size:13px;color:var(--light-text);border-top:1px solid var(--border-color);margin-top:12px}.inventions-preview strong{color:var(--dark-text)}.card-footer{gap:10px;align-items:center;margin-top:16px;display:flex}.expand-btn{padding:8px 16px;font-size:13px;border:none;font-weight:600;color:#fff;transition:all var(--transition-speed);border-radius:6px;background:var(--primary-color);cursor:pointer}.expand-btn:hover{transform:translateX(2px);background:#0052a3}.expand-btn.expanded:after{content:" ∧"}.expand-btn:not(.expanded):after{content:" ∨"}.detail-panel{grid-column:1/-1;padding:clamp(24px,4vw,40px);border:2px solid var(--border-color);border-radius:12px;background:linear-gradient(135deg,rgba(0,102,204,.02),rgba(255,153,0,.02));margin-top:20px;display:none}.detail-panel.active{animation:expandPanel .3s ease-out;display:block}@keyframes expandPanel{0%{max-height:0;opacity:0}to{max-height:2000px;opacity:1}}.detail-tabs{overflow-x:auto;margin-bottom:24px;border-bottom:2px solid var(--border-color);gap:10px;display:flex}.detail-tab{padding:12px 20px;font-size:14px;border:none;font-weight:600;color:var(--light-text);transition:all var(--transition-speed);border-bottom:3px solid transparent;background:none;cursor:pointer;white-space:nowrap}.detail-tab.active,.detail-tab:hover{color:var(--primary-color)}.detail-tab.active{border-bottom-color:var(--primary-color)}.detail-content{display:none}.detail-content.active{animation:fadeIn .3s ease-out;display:block}.biography-content{font-size:15px;color:var(--light-text);line-height:1.8}.biography-content p{margin-bottom:16px}.inventions-list{flex-direction:column;gap:16px;display:flex}.invention-item{border-left:4px solid var(--secondary-color);padding:16px;border-radius:6px;background:#fff}.invention-item h4{font-weight:700;color:var(--dark-text);margin:0 0 8px}.invention-item .year{padding:4px 10px;font-size:13px;font-weight:600;margin-bottom:8px;color:var(--primary-color);border-radius:4px;background:rgba(0,102,204,.1);display:inline-block}.invention-item p{font-size:14px;color:var(--light-text);margin:8px 0 0;line-height:1.6}.invention-item .patent{font-size:13px;font-style:italic;color:var(--light-text);margin-top:8px}.life-timeline{position:relative;flex-direction:column;gap:16px;padding-left:30px;display:flex}.life-timeline:before{content:"";position:absolute;bottom:0;top:0;background:var(--primary-color);left:8px;width:2px}.timeline-event{position:relative;padding-bottom:16px}.timeline-event:before{height:12px;border:3px solid #fff;content:"";position:absolute;top:4px;box-shadow:0 0 0 2px var(--primary-color);border-radius:50%;background:var(--primary-color);left:-30px;width:12px}.timeline-event .event-year{font-size:14px;font-weight:700;color:var(--primary-color)}.timeline-event .event-text{font-size:14px;color:var(--light-text);margin-top:4px}.image-gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;display:grid}.gallery-item{overflow:hidden;position:relative;aspect-ratio:1;border-radius:8px;background:var(--border-color)}.gallery-item img{height:100%;transition:transform var(--transition-speed);object-fit:cover;width:100%}.gallery-item:hover img{transform:scale(1.1)}.gallery-caption{transform:translateY(100%);padding:8px;font-size:12px;right:0;color:#fff;transition:transform var(--transition-speed);position:absolute;bottom:0;background:rgba(0,0,0,.7);left:0}.gallery-item:hover .gallery-caption{transform:translateY(0)}.videos-container{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;display:grid}.video-item{overflow:hidden;position:relative;aspect-ratio:16/9;border-radius:8px;background:#000}.video-frame{height:100%;border:none;width:100%}.video-title{font-size:14px;font-weight:600;color:var(--dark-text);margin-top:12px}.related-inventors{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;display:grid}.related-inventor{padding:16px;border:2px solid var(--border-color);transition:all var(--transition-speed);text-align:center;border-radius:8px;background:#fff;cursor:pointer}.related-inventor:hover{border-color:var(--primary-color);box-shadow:var(--card-shadow)}.related-inventor-avatar{height:60px;justify-content:center;font-weight:700;color:#fff;margin:0 auto 12px;align-items:center;border-radius:50%;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));width:60px;display:flex}.related-inventor-name{font-size:14px;font-weight:600;color:var(--dark-text)}.load-more-container{padding:20px;justify-content:center;margin-top:60px;display:flex}.load-more-btn{padding:14px 32px;font-size:16px;border:none;font-weight:700;color:#fff;transition:all var(--transition-speed);min-width:200px;border-radius:8px;background:var(--primary-color);cursor:pointer}.load-more-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,102,204,.3);background:#0052a3}.load-more-btn:disabled{color:var(--light-text);background:var(--border-color);cursor:not-allowed}.load-more-btn.loading:after{animation:spin 1s linear infinite;content:" ⟳"}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.empty-state{padding:60px 20px;color:var(--light-text);text-align:center}.empty-state-icon{font-size:64px;margin-bottom:16px;opacity:.6}.empty-state h3{margin-bottom:8px;color:var(--dark-text)}.empty-state p{margin-bottom:24px}@media (max-width:768px){.filters-container{grid-template-columns:1fr}.filter-buttons{flex-direction:column}.filter-btn{width:100%}.filter-btn.sort-btn{margin-left:0}.timeline-item{grid-template-columns:1fr}.card-image{height:60px;width:60px}.detail-tabs{flex-wrap:wrap}.image-gallery{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.videos-container{grid-template-columns:1fr}.related-inventors{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.timeline-hero h1{font-size:28px}.card-header{flex-direction:column;text-align:center;align-items:center}.card-info h3{font-size:16px}.detail-panel{padding:16px}.filter-label{font-size:12px}.related-inventors{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-iteration-count:1!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (prefers-color-scheme:dark){:root{--timeline-color:#505050;--border-color:#404040;--light-text:#b0b0b0;--dark-text:#e0e0e0}.timeline-page{background:#1a1a1a}.detail-panel,.filters-section,.invention-item,.related-inventor,.search-box input,.timeline-card{background-color:#2a2a2a}.search-box input{color:var(--dark-text)}.detail-panel{background:linear-gradient(135deg,rgba(0,102,204,.1),rgba(255,153,0,.1))}}