.portal-route{--route-frame-ratio: 16 / 9;--route-frame-min-height: clamp(16rem, 34vw, 24rem);position:relative;display:block;overflow:visible;border-radius:1.25rem;background:radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--route-accent) 18%,transparent),transparent 38%),radial-gradient(circle at 92% 88%,color-mix(in srgb,var(--route-accent) 12%,transparent),transparent 35%),linear-gradient(180deg,oklch(.14 .03 var(--hue) / .72),oklch(.1 .03 var(--hue) / .62));border:1px solid color-mix(in srgb,var(--route-accent) 28%,transparent);backdrop-filter:blur(18px) saturate(1.12);box-shadow:inset 0 1px #ffffff14,0 22px 60px #0000003d;transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease}.portal-route:before{content:"";position:absolute;z-index:-1;inset:-1.4rem;border-radius:2.65rem;pointer-events:none;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--route-accent) 28%,transparent),transparent 68%),radial-gradient(circle at 18% 22%,color-mix(in srgb,var(--route-accent) 14%,transparent),transparent 42%);opacity:0;filter:blur(22px);transform:scale(.96);transition:opacity .45s ease,transform .65s ease,filter .65s ease}.portal-route:after{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,transparent 0 48%,color-mix(in srgb,var(--route-accent) 10%,transparent) 50%,transparent 52%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px);opacity:.34;mix-blend-mode:screen;transition:opacity .35s ease}.portal-route:hover{border-color:color-mix(in srgb,var(--route-accent) 46%,white);box-shadow:inset 0 1px #ffffff1c,0 26px 72px #0000004d,0 0 46px color-mix(in srgb,var(--route-accent) 14%,transparent)}.portal-route:hover:before{opacity:.72;transform:scale(1.05);filter:blur(34px)}.portal-route:hover:after{opacity:.48}.route-copy{position:absolute;z-index:3;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(42rem,calc(100% - 2rem));min-height:auto;padding:clamp(1.25rem,4vw,2.35rem);text-align:center;border:1px solid color-mix(in srgb,var(--route-accent) 24%,rgba(255,255,255,.18));border-radius:1.35rem;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--route-accent) 18%,transparent),transparent 58%),#0000003d;box-shadow:0 24px 70px #0003,inset 0 1px #ffffff0a;backdrop-filter:blur(10px) saturate(1.08);transition:border-color .35s ease,background .35s ease,box-shadow .35s ease,transform .35s ease}.portal-route:hover .route-copy{border-color:color-mix(in srgb,var(--route-accent) 48%,rgba(255,255,255,.28));background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--route-accent) 22%,transparent),transparent 58%),#0000004d;box-shadow:0 28px 82px #00000042,0 0 34px color-mix(in srgb,var(--route-accent) 12%,transparent),inset 0 1px #ffffff12}.route-kicker{margin-bottom:.65rem;color:color-mix(in srgb,var(--route-accent) 76%,white);font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase}.route-copy h3{margin:0;color:#fff;font-size:clamp(1.55rem,4vw,2.65rem);line-height:1.02;letter-spacing:-.04em}.route-copy p{margin:.9rem 0 0;max-width:34rem;color:oklch(.78 .03 var(--hue));font-size:.98rem;line-height:1.65}.route-link{display:inline-flex;align-items:center;gap:.5rem;width:-moz-fit-content;width:fit-content;margin-top:1.35rem;padding:.72rem .92rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--route-accent) 45%,transparent);background:color-mix(in srgb,var(--route-accent) 13%,rgba(0,0,0,.2));color:color-mix(in srgb,var(--route-accent) 72%,white);font-size:.74rem;font-weight:800;letter-spacing:.12em;text-decoration:none;text-transform:uppercase;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.route-link:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--route-accent) 78%,white);box-shadow:0 0 28px color-mix(in srgb,var(--route-accent) 20%,transparent)}.route-link__icon{width:1rem;height:1rem;transition:transform .2s ease}.route-link:hover .route-link__icon{transform:translate(3px)}.route-viewport{position:relative;z-index:1;overflow:hidden;aspect-ratio:var(--route-frame-ratio);min-height:var(--route-frame-min-height);border-radius:inherit;border:0;background:oklch(.08 .03 var(--hue) / .78)}.route-viewport--timeline:before{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(90deg,#00000057,#00000008 48%,#00000057),var(--timeline-preview-bg) center / cover no-repeat;transform:scale(1.04);transition:transform 1.2s ease,filter .8s ease}.portal-route:hover .route-viewport--timeline:before{transform:scale(1.075);filter:saturate(1.16) brightness(1.08)}.route-viewport--timeline .timeline-wrapper{position:relative;z-index:1;height:100%!important;min-height:100%!important;border-radius:inherit;pointer-events:none!important}.route-viewport--timeline .timeline-viewport,.route-viewport--timeline .timeline-view-container,.route-viewport--timeline .timeline-view-container>.card-base,.route-viewport--timeline .timeline-map-shell,.route-viewport--timeline .timeline-stage,.route-viewport--timeline .timeline-event-button,.route-viewport--timeline .timeline-active-card{height:100%!important;min-height:100%!important;border-radius:inherit;pointer-events:none!important}.route-viewport--timeline .timeline-view-container>.card-base{border:0;background:transparent!important;box-shadow:none}.route-viewport--timeline .timeline-map-controls,.route-viewport--timeline .timeline-era-status{display:none}.route-viewport__shade{position:absolute;z-index:2;inset:0;pointer-events:none;background:radial-gradient(circle at center,#00000005,#00000047 68%,#00000085),linear-gradient(180deg,rgba(0,0,0,.12),transparent 30%,rgba(0,0,0,.26))}.route-viewport__label{position:absolute;z-index:4;left:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border:1px solid color-mix(in srgb,var(--route-accent) 38%,transparent);border-radius:999px;background:#0000007a;color:color-mix(in srgb,var(--route-accent) 74%,white);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(14px)}@media(max-width:900px){.portal-route{--route-frame-min-height: clamp(15rem, 44vw, 21rem)}}@media(max-width:540px){.portal-route{display:flex;flex-direction:column;gap:.72rem;min-height:0;padding:.7rem;border-radius:1rem;background:linear-gradient(180deg,oklch(.14 .03 var(--hue) / .7),oklch(.1 .03 var(--hue) / .6));backdrop-filter:blur(10px) saturate(1.04);box-shadow:inset 0 1px #ffffff0f,0 14px 34px #0000002e}.portal-route:before{inset:-.75rem;filter:blur(14px)}.route-viewport{order:1;height:auto;min-height:0;aspect-ratio:16 / 10.5;border-radius:.9rem}.route-copy{position:static;z-index:1;order:2;inset:auto;transform:none;justify-content:flex-start;align-items:flex-start;width:auto;min-height:0;padding:.15rem .2rem 0;text-align:left;border:0;background:transparent;box-shadow:none;backdrop-filter:none;text-shadow:none}.portal-route:hover .route-copy{transform:none;border-color:transparent;background:transparent;box-shadow:none}.route-copy h3{font-size:clamp(1.35rem,8vw,2rem)}.route-copy p{font-size:.88rem;line-height:1.42;margin-top:.5rem;max-width:none}.route-link{margin-top:.9rem;padding:.62rem .82rem}.route-viewport__label{left:.65rem;right:.65rem;bottom:.65rem;justify-content:center;padding:.46rem .62rem;font-size:.66rem}}