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