@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Marhey:wght@500;700&display=swap');*{box-sizing:border-box}body{margin:0;background:#0d1723;color:#f5f0e7;font-family:Cairo,Tahoma;min-height:100vh;background-image:linear-gradient(135deg,#17364e33,transparent 40%)}nav{height:63px;padding:0 max(18px,calc((100vw - 1300px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #b6cee023;background:#0c1620dc;position:sticky;top:0;z-index:10}nav a{color:#a9c8dc;text-decoration:none;font-size:11px}header{width:min(1300px,calc(100% - 30px));margin:32px auto 0}header small{color:#e79263}h1{font-family:Marhey;font-size:clamp(42px,7vw,78px);margin:7px 0}header p{color:#9fb3c1}.era{border:1px solid #7896a72c;background:#132231;color:#bcd0dc;padding:9px 14px;border-radius:20px;margin:4px}.era.active{background:#dd7449;color:white}main{width:min(1300px,calc(100% - 30px));margin:22px auto;display:grid;grid-template-columns:1fr 340px;gap:20px}.rail{min-height:580px;border-radius:24px;background:#111e2b;padding:45px 30px;overflow:auto;position:relative}.line{position:absolute;right:80px;top:45px;bottom:45px;width:4px;background:linear-gradient(#e9895d,#4b87a6,#d9b35d);border-radius:5px}.events{display:flex;flex-direction:column;gap:18px}.event{margin-right:75px;width:calc(100% - 95px);min-height:100px;border:1px solid #9bb4c426;background:#182838;color:white;border-radius:18px;padding:16px 20px;text-align:right;position:relative;cursor:pointer}.event:before{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:var(--c);right:-31px;top:38px;box-shadow:0 0 0 8px #11202d}.event:after{content:"";position:absolute;width:26px;height:2px;background:#7d9aab52;right:-26px;top:46px}.event .year{font-size:24px;font-weight:800;color:var(--c)}.event b{display:block;font-size:16px}.event small{color:#9fb3c1}.event:hover,.event.active{transform:translateX(-8px);border-color:var(--c)}aside{background:#f2ede1;color:#19313e;border-radius:24px;padding:24px;height:max-content;position:sticky;top:82px}.detail-year{font-size:42px;font-weight:800;color:#d86f48}.detail-title{font-family:Marhey;font-size:28px}.detail-text{line-height:2;color:#60727c;font-size:12px}.impact{background:#e8ddc6;border-right:4px solid #c59c50;padding:13px;border-radius:10px}.empty{text-align:center;color:#71818a;padding:80px 10px}@media(max-width:850px){main{grid-template-columns:1fr}aside{position:static}.rail{min-height:500px}}