.timeline-modern{padding:2rem;max-width:100%;margin:0 auto;font-family:system-ui,-apple-system,sans-serif}.timeline-header{margin-top:2rem;margin-bottom:2rem;text-align:center}.timeline-header h2{font-size:2rem;margin:0 0 .5rem;color:#333}.timeline-header p{color:#666;font-size:1rem;margin:0}.timeline-viewport{overflow-x:auto;overflow-y:auto;border:1px solid #e0e0e0;border-radius:8px;background:#fafafa;padding:0;max-height:70vh;position:relative}.timeline-viewport::-webkit-scrollbar{height:12px;width:12px}.timeline-viewport::-webkit-scrollbar-track{background:#f1f1f1}.timeline-viewport::-webkit-scrollbar-thumb{background:#888;border-radius:6px}.timeline-viewport::-webkit-scrollbar-thumb:hover{background:#555}.timeline-content{position:relative;min-height:100%;padding:0 1rem 1rem}.timeline-years{position:-webkit-sticky;position:sticky;top:0;z-index:100;height:50px;background:#fafafa;border-bottom:2px solid #ddd;margin-bottom:1rem;padding-top:10px;margin-top:0}.year-marker{position:absolute;height:calc(100% + 10px);border-left:2px solid #ccc;padding-left:8px;top:-10px}.year-marker span{font-weight:600;color:#666;font-size:.875rem;position:relative;top:20px}.timeline-grid{position:relative;min-height:600px}.project-row{position:absolute;width:100%;height:28px;display:flex;align-items:center}.project-label{position:-webkit-sticky;position:sticky;left:0;background:linear-gradient(90deg,#fafafa 80%,transparent);padding:.25rem .5rem;font-size:.75rem;color:#555;font-weight:500;z-index:10;min-width:150px;white-space:nowrap;pointer-events:none}.project-bar{position:absolute;height:20px;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.1)}.project-bar:hover{transform:scaleY(1.2);box-shadow:0 2px 6px rgba(0,0,0,.2);z-index:20}.project-bar:focus{outline:3px solid #4A90E2;outline-offset:2px;z-index:20}.project-bar.selected{transform:scaleY(1.3);box-shadow:0 3px 8px rgba(0,0,0,.25);z-index:20}.project-tooltip{bottom:100%;background:white;padding:.75rem;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);white-space:nowrap;font-size:.875rem;line-height:1.5;margin-bottom:8px;border:1px solid #ddd;color:#333;pointer-events:none;animation:tooltipFade .2s ease}.project-tooltip,.project-tooltip:after{position:absolute;left:50%;transform:translateX(-50%)}.project-tooltip:after{content:"";top:100%;border:6px solid transparent;border-top-color:white}.timeline-instructions{margin-top:1rem;text-align:center;color:#999;font-size:.875rem}@keyframes tooltipFade{0%{opacity:0;transform:translateX(-50%) translateY(-5px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@media (max-width:768px){.timeline-modern{padding:1rem}.timeline-header h2{font-size:1.5rem}.project-label{font-size:.7rem;min-width:120px}.timeline-viewport{max-height:60vh}}header{position:relative}.container{margin:0 auto;max-width:1000px;padding:0 30px}header{position:fixed;top:0;left:0;margin:0 auto;height:50px;width:100%;z-index:2;background:#fff;opacity:90%}header.header-wrapper{display:flex;justify-content:space-between}.header-nav,header.name{display:inline-block}header.name{font-family:"Source Serif 4",serif;padding-top:10px}a:hover,a:visited,header.name a{text-decoration:none;color:$gray}header.header-nav{padding:10px 0 10px 18px;text-align:right}header.header-nav a{padding:9px 0;margin-left:25px;text-decoration:none;font-weight:400}