main {
	background: inherit;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 1rem 2rem;
  max-width:1600px;
  margin: 0 auto;
}
.page-heading {
  font-weight: 600;
  font-size: 1.75rem;
  flex: 1;
  text-wrap-mode: nowrap;
}
.view-toggle {
  display: inline-flex;
  gap: 12px;
  align-items: center;
}

.view-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 3px;
  border: 1px solid var(--edge-button-border);
  background: var(--edge-bg-color);
  color: var(--edge-text-color);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: all 160ms cubic-bezier(.2,.8,.2,1);
  min-height: 40px;
}
.view-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.view-btn:not(.active):hover{ 
	background: var(--edge-hover-bg-color); 
}
.view-btn:not(.active):active{ 
	transform: scale(.98);
}
.view-btn:focus-visible{ 
	outline: 3px solid rgba(0,120,212,.45); 	
	outline-offset: 3px;
}
.view-btn.active {
  background: var(--edge-text-color);
  color: var(--edge-active-text-color);
}

#content {
	position: relative;
	background: inherit;
	max-width: 1600px;
    margin: 0 auto;
	overflow: hidden auto;
}
.page{
  min-height:100dvh;
  max-width:1600px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px clamp(12px, 3vw, 40px);
  margin: 0 auto;
  position:relative;
}

.shell{
  width:100%;
  gap:24px;
  position:relative;
  display: flex;
  flex-direction: column;
  min-height: -webkit-fill-available;
}

.edge-nav{
  position:absolute;
  top:50dvh;
  --translate-y: -50%;
  transform: translateY(var(--translate-y));
  z-index:50;
  width:50px;
  height:50px;
  border-radius:14px;
  border:1px solid var(--edge-button-border);
  background:var(--edge-bg-color);
  box-shadow:var(--shadow);
  display:grid;
  place-items:center;
  color:var(--edge-text-color);
  cursor:pointer;
  will-change: transform;
  transition:transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1), background 160ms cubic-bezier(.2,.8,.2,1), border-color 160ms cubic-bezier(.2,.8,.2,1), color 160ms cubic-bezier(.2,.8,.2,1);
}
.edge-nav:hover{ 
	transform: translateY(var(--translate-y)) scale(1.06); 
}
.edge-nav:active{ 
	transform: translateY(var(--translate-y)) scale(.98);
}
.edge-nav:focus-visible{ 
	outline: 3px solid rgba(0,120,212,.45); 	
	outline-offset: 3px;
}
.edge-nav svg{ 
  width:22px;
  height:22px 
}
.edge-nav.left{ 
  opacity: 0; 
  left: -60px; 
  animation: entry-nav-l 1s forwards;
}
.edge-nav.right{ 
  opacity: 0; 
  right: -60px; 
  animation: entry-nav-r 1s forwards;
}
.edge-nav.left.disable{ 
  animation: entry-nav-l-d 1s forwards;
}
.edge-nav.right.disable{ 
  animation: entry-nav-r-d 1s forwards;
}
.edge-nav.fullscreen {
  top: -60px;
  right: 22px;
  opacity: 0;
  --translate-y: 0;
  animation: entry-nav-fs 1s forwards;
}
.edge-nav.fullscreen.exit{ 
  animation: entry-nav-fs-d 1s forwards;
}

.timeline-wrap{
  background: var(--timeline-bg-color);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius:7px;
  box-shadow:var(--shadow);
  border:1px solid var(--timeline-border-color);
  padding:0 clamp(12px, 2vw, 24px);
  position:relative;
  overflow:hidden;
  margin: 0 30%;
  opacity: 0;
  margin-bottom: -40px;
  z-index: 1;
  top: -150px;
  animation: entry 1s forwards;
}
.timeline-wrap.exit {
  animation: exit 1s forwards;
}
@keyframes entry {
	0% {
		opacity: 0;
		top: -150px;
	}
	30% {
		opacity: 1;
		top: 30px;
	}
	100% {
		opacity: 1;
		top: 0;
	}
}
@keyframes exit {
	0% {
		opacity: 1;
		top: 0px;
	}
	70% {
		opacity: 1;
		top: 30px;
	}
	100% {
		opacity: 0;
		top: -150px;
	}
}
@keyframes entry-nav-l {
	0% {
		opacity: 0;
		left: -60px;
	}
	50% {
		opacity: 1;
		left: 40px;
	}
	100% {
		opacity: 1;
		left: 22px;
	}
}
@keyframes entry-nav-r {
	0% {
		opacity: 0;
		right: -60px;
	}
	50% {
		opacity: 1;
		right: 40px;
	}
	100% {
		opacity: 1;
		right: 22px;
	}
}
@keyframes entry-nav-l-d {
	0% {
		opacity: 1;
		left: 22px;
	}
	50% {
		opacity: 1;
		left: 40px;
	}
	100% {
		opacity: 0;
		left: -60px;
	}
}
@keyframes entry-nav-r-d {
	0% {
		opacity: 1;
		right: 22px;
	}
	50% {
		opacity: 1;
		right: 40px;
	}
	100% {
		opacity: 0;
		right: -60px;
	}
}
@keyframes entry-nav-fs {
	0% {
		opacity: 0;
		top: -60px;
	}
	50% {
		opacity: 1;
		top: 40px;
	}
	100% {
		opacity: 1;
		top: 22px;
	}
}
@keyframes entry-nav-fs-d {
	0% {
		opacity: 1;
		top: 22px;
	}
	50% {
		opacity: 1;
		top: 40px;
	}
	100% {
		opacity: 0;
		top: -60px;
	}
}

.timeline-wrap::after{
  content:"";
  position:absolute; 
  inset:auto 0 -2px 0; 
  height:2px;
  background:linear-gradient(90deg, rgba(0,120,212,.35), rgba(0,120,212,0), rgba(0,120,212,.35));
  pointer-events:none;
  opacity:.5;
}

.timeline{
  position:relative;
  overflow-x: visible;
  overflow-y: auto;
  padding-bottom:18px;
  padding-inline: 10px;
}
.timeline::-webkit-scrollbar{ 
  height:8px 
}
.timeline::-webkit-scrollbar-thumb{ 
  background:var(--timeline-scrollbar-bg);
  border-radius:8px 
}

.rail{
  position:relative;
  display:flex;
  align-items:center;
  overflow: visible;
  min-width: max-content;
}

.years-flex{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  gap:0;
  overflow: visible;
}

.track{
  position:absolute;
  left:0; right:0;
  top:calc(50% - 4px/2);
  height:4px;
  border-radius:999px;
  background: var(--track-bg);
  box-shadow: var(--track-box-shadow);
  z-index:1;
}

.progress{
  position:absolute;
  left:0; top:calc(50% - 4px/2);
  height:4px;
  background:linear-gradient(90deg, var(--progress-bg-1), var(--progress-bg-2));
  border-radius:999px;
  width:0%;
  transition:width 750ms cubic-bezier(.3,.8,.2,1);
  z-index:2;
  box-shadow: var(--progress-box-shadow);
}

.progress::after{
  content:"";
  position:absolute; 
  inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 55%, rgba(255,255,255,.35) 80%);
  background-size:200% 100%;
  animation:shine 3.6s linear infinite;
  border-radius:inherit;
  pointer-events:none;
  mix-blend-mode:soft-light;
}
@keyframes shine{
  0%{ background-position: -130% 0 }
  100%{ background-position: 130% 0 }
}

.segment{
  position:relative;
  display:flex;
  align-items:center;
  min-width:24px;
  z-index:3;
  flex-grow: 0;
  transition: min-width 1s, flex-grow 1s;
}

.segment.active {
  flex-grow: 1;
  min-width:48px;
}

.seg-highlight{
  position:absolute;
  left:-2px; 
  right:-2px;
  top: calc(50% - 18px);
  height: 36px;
  border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(0,120,212,.10), rgba(0,120,212,0) 70%);
  opacity: 0;
  transition: opacity 260ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  z-index: 0;
}
.segment.active .seg-highlight{ 
  opacity:1 
}

.year{
  position:relative;
  display:flex;
  align-items:center;
  flex:0 0 auto;
  z-index:5;
  margin:0 4px;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  overflow: visible;
}
.year:focus-visible{ 
  outline:3px solid rgba(0,120,212,.45); 
  outline-offset:6px; 
  border-radius:50% 
}
.year-circle{
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--year-circle-bg);
  border:2px solid var(--year-circle-border-color);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:transform 160ms cubic-bezier(.2,.8,.2,1), border-color 160ms cubic-bezier(.2,.8,.2,1), background 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1), filter 160ms cubic-bezier(.2,.8,.2,1);
}
.year-label{
  position: absolute;
  top: calc(50% + 22px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--year-label-color);
  white-space: nowrap;
  user-select: none;
}
.year.completed .year-circle{
  background: var(--year-completed-bg);
  border-color: var(--year-completed-border-color);
  box-shadow: var(--year-completed-box-shadow);
  filter: saturate(1.05);
}
.year.active .year-circle{
  background: var(--year-active-bg);
  border: 4px solid var(--year-active-border-color);
  box-shadow: 0 8px 18px rgba(0,120,212,.28), 0 2px 4px rgba(0,0,0,.08);
  transform: scale(1.08);
}
.year.upcoming .year-circle{
  background: var(--year-upcoming-bg);
  border-color: var(--year-upcoming-border-color);
}
.year.upcoming:not(:last-child):hover .year-circle{ 
  border-color: var(--year-circle-hover-border-color);
  box-shadow: var(--year-circle-hover-box-shadow);
  transform:scale(1.12);
}

.months-available{
  position:relative;
  width:100%;
  margin: 50px 0;
  z-index:6;
}
.month-dot{
  position:absolute;
  top:calc(50% - 12px/2);
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--month-dot-bg);
  border:2px solid var(--month-dot-border-color);
  box-shadow:0 1px 2px var(--month-dot-box-shadow);
  transform:translateX(-50%) scale(.95);
  transition:transform 160ms cubic-bezier(.2,.8,.2,1), border-color 160ms cubic-bezier(.2,.8,.2,1), background 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1), opacity 160ms cubic-bezier(.2,.8,.2,1);
  cursor:pointer;
  padding: 0;
}
.month-dot:hover{
  transform:translateX(-50%) scale(1.15);
  border-color:var(--month-dot-hover-border-color);
  box-shadow: var(--month-dot-hover-box-shadow);
}
.month-dot.current{
  width:14px;
  height:14px;
  background:var(--month-dot-current-bg);
  border-color:var(--month-dot-current-border-color);
  box-shadow:var(--month-dot-current-box-shadow);
  position:absolute;
  top: calc(50% - 14px / 2);
}
.current-pulse{ 
  position:relative 
}
.current-pulse::after{
  content:"";
  position:absolute;
  left:50%; 
  top:50%;
  width:calc(14px + 2px);
  height:calc(14px + 2px);
  transform:translate(-50%,-50%);
  border-radius:999px;
  animation:var(--current-pulse-anim) 2.8s ease-out infinite;
}
@keyframes pulseBlueLight{
  0%   { box-shadow:0 0 0 0 rgba(0,120,212,.35) }
  70%  { box-shadow:0 0 0 14px rgba(0,120,212,0) }
  100% { box-shadow:0 0 0 0 rgba(0,120,212,0) }
}
@keyframes pulseBlueDark{
  0%   { box-shadow:0 0 0 0 rgba(26,145,255,.45) }
  70%  { box-shadow:0 0 0 16px rgba(26,145,255,0) }
  100% { box-shadow:0 0 0 0 rgba(26,145,255,0) }
}
.month-label{
  position:absolute;
  top:calc(50% + 22px);
  transform:translate(-50%, 6px);
  font-size:12px;
  color:var(--month-label-text-color);
  background:var(--month-label-bg-color);
  padding:2px 8px;
  border-radius:999px;
  box-shadow:var(--month-label-box-shadow-color);
  white-space:nowrap;
  opacity:0;
  transition:opacity 160ms cubic-bezier(.2,.8,.2,1), transform 160ms cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.month-label.persistent{
  opacity:1;
  transform:translate(-50%, 0);
  font-weight:600;
}
.month-dot:hover + .month-label{ 
  opacity:1; 
  transform:translate(-50%, 0) 
}

.card{
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius:7px;
  box-shadow:var(--shadow);
  border:1px solid var(--card-border-color);
  padding:22px clamp(16px, 3vw, 28px);
  display:flex;
  position:relative;
  overflow:hidden;
  opacity: 0;
  transform: translateY(6px);
  flex: 1;
  margin: 0 40px;
  align-items: center;
  justify-content: center;
}
.card:hover{ 
  transform:translateY(-1px) 
}
.card::before {
  content: "";
  position: absolute;
  top: -100px;
  left: -100px;
  width: calc(100% + 200px);
  height: calc(100% + 200px);
  background: radial-gradient(
    circle at bottom right, 
    color-mix(in srgb, var(--card-bg-glow) 35%, transparent) 0%,
    color-mix(in srgb, var(--card-bg-glow) 25%, transparent) 30%,
    transparent 70%
  );
  filter: blur(120px) saturate(150%);
  opacity: 0.8;
  pointer-events: none;
  z-index: -1;
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.card:hover::before {
  transform: scale(1.05) translate(10px, -10px);
  opacity: 1;
}
.card.entry{
  animation: cardEntry 1s forwards;
}
.card.exit{
  animation: cardExit 1s forwards;
}
@keyframes cardEntry {
	0% {
		opacity: 0;
		transform: translateY(6px);
	}
	100% {
		opacity: 1;
		transform:translateY(0);
	}
}
@keyframes cardExit {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform:translateY(6px);
	}
}

.btn:focus-visible,
.month-dot:focus-visible,
.year:focus-visible .year-circle{
  outline:3px solid color-mix(in srgb, var(--focus-color) 60%, transparent);
  outline-offset:3px;
}

.slide-text {
	font-size: 0.85rem;
    color: var(--slide-text-color);
    font-style: italic;
    margin-right: 50px;
    margin-top: -10px;
    align-self: flex-end;
}

.toolbar-list{
    display:grid;
    grid-template-columns: 1fr auto;
    gap:12px;
    align-items:center;
	position: relative;
	top: -150px;
	opacity: 0;
	animation: entry 1s forwards;
}
.toolbar-list.exit {
	opacity: 1;
	top: 0px;
	animation: exit 1s forwards 1s;
}
.searchbar {
	display:flex;
	gap:10px;
	align-items:center;
	background: var(--panel-bg);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border:1px solid var(--panel-border-color);
	box-shadow:var(--shadow);
	border-radius:7px;
	padding:10px 12px;
	max-width: 44px;
	margin: 0 calc(50% - 22px);
	overflow: hidden;
	animation: entry-search 1.5s forwards 1s;
}
.searchbar.exit {
	margin: 0;
	width: 100%;
	max-width: 100%;
	animation: exit-search 1.5s forwards 0.5s;
}
@keyframes entry-search {
	0% {
		margin: 0 calc(50% - 22px);
		max-width: 44px;
		width: 100%;
	}
	33% {
		margin: 0;
		max-width: 44px;
		width: 100%;
	}
	53% {
		margin: 0;
		width: 120%;
		max-width: 120%;
	}
	100% {
		margin: 0;
		width: 100%;
		max-width: 100%;
	}
}
@keyframes exit-search {
	0% {
		margin: 0;
		width: 100%;
		max-width: 100%;
	}
	47% {
		margin: 0;
		width: 120%;
		max-width: 120%;
	}
	67% {
		margin: 0;
		max-width: 44px;
		width: 100%;
	}
	100% {
		margin: 0 calc(50% - 22px);
		max-width: 44px;
		width: 100%;
	}
}
.searchbar svg { 
	width:18px;
	height:18px;
	overflow: unset;
}
.searchbar input {
    flex:1;
    border:none; 
	outline:none; 
	background:transparent;
    font-size:15px;
	min-width: 30px;
}
.iconbtn {
    border:none; 
	background:transparent; 
    display:grid; 
	place-items:center;
    border-radius:10px; 
	padding:6px;
    cursor:pointer; 
	transition:background 140ms cubic-bezier(.2,.8,.2,1), color 140ms cubic-bezier(.2,.8,.2,1), transform 140ms cubic-bezier(.2,.8,.2,1);
}
.iconbtn:hover { 
	background: var(--list-mode-icon-hover-bg); 
	transform:translateY(-1px);
}
.iconbtn:active { 
	background: var(--list-mode-icon-active-bg);
}
.iconbtn:focus-visible{
  outline:3px solid color-mix(in srgb, var(--focus-color) 60%, transparent);
  outline-offset:3px;
}
.right-actions {
    display:flex; 
	gap:10px; 
	align-items:center; 
	flex-wrap:wrap;
	opacity: 0;
	transform: translateX(100%);
	animation: entry-right-act 1s forwards 2s;
}
.right-actions.exit {
	animation: exit-right-act 1s forwards;
}
@keyframes entry-right-act {
	0% {
		opacity: 0;
		transform: translateX(100%);
	}
	30% {
		opacity: 1;
		transform: translateX(-20%);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes exit-right-act {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	30% {
		opacity: 1;
		transform: translateX(-20%);
	}
	100% {
		opacity: 0;
		transform: translateX(100%);
	}
}
.btn{
    border:none; 
	border-radius:10px; 
	padding:10px 14px; 
	font-weight:600; 
	cursor:pointer;
    transition:transform 140ms cubic-bezier(.2,.8,.2,1), box-shadow 140ms cubic-bezier(.2,.8,.2,1), background 140ms cubic-bezier(.2,.8,.2,1), color 140ms cubic-bezier(.2,.8,.2,1), border-color 140ms cubic-bezier(.2,.8,.2,1), filter 140ms cubic-bezier(.2,.8,.2,1);
    background:var(--edge-bg-color);
    color:var(--edge-text-color); 
}
.btn:hover{ 
	transform: scale(1.06); 
}
.btn:active{ 
	transform: scale(.98);
}
.btn:focus-visible{ 
	outline: 3px solid rgba(0,120,212,.45); 	
	outline-offset: 3px;
}

.seg{
    display:flex; 
	gap:8px; 
	align-items:center; 
	flex-wrap:wrap;
    background:var(--panel-bg);
    border:1px solid var(--panel-border-color);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius:7px; 
	padding:7.5px 10px; 
	box-shadow:var(--shadow);
}
.seg .bt{
    font-size:14px; 
    background:transparent; 
	border:none;  
	padding:8px 10px;
}
.seg .bt:hover { 
	background: var(--list-mode-icon-hover-bg);
}
.seg .bt:active, .seg .bt.active { 
	background: var(--list-mode-icon-active-bg);
}
.seg .bt:focus-visible{ 
	outline: 3px solid rgba(0,120,212,.45); 	
	outline-offset: 3px;
}

.sep {
    border: 1px solid var(--sep-color);
    height: -webkit-fill-available;
    margin: 6px 0;
}

.filters{
    display: flex;
    flex-direction: column;
	gap:16px;
	opacity:0; 
	transform:translateY(100%);
	animation: entry-filters 1s forwards;
}
.filters.exit {
	animation: exit-filters 1s forwards;
}
@keyframes entry-filters {
	0% {
		opacity: 0;
		transform: translateY(100%);
	}
	50% {
		opacity: 1;
		transform: translateY(-20%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes exit-filters {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	50% {
		opacity: 1;
		transform: translateY(-20%);
	}
	100% {
		opacity: 0;
		transform: translateY(100%);
	}
}

.filter-panel{
    background:var(--panel-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border:1px solid var(--panel-border-color);
    box-shadow:var(--shadow);
    border-radius:7px; 
	padding:14px;
}
.filter-group{ 
	margin-bottom:14px;
	display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.filter-group h4{ 
	margin:0; 
	color: var(--filter-text-color);
	font-size:13px; 
	letter-spacing:.3px; 
}
.checklist{ 
	display:flex; 
	flex-wrap:wrap; 
	gap:8px 
}
.chips-section {	
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.chips-section.hide {
	display: none;
}
.chip{
    border:1px solid var(--chip-border-color); 
	border-radius:999px; padding:6px 10px; 
	font-size:12px; 
    background:var(--chip-bg-color); 
	cursor:pointer; 
	transition:all 140ms cubic-bezier(.2,.8,.2,1);
}
.chip:hover{ 
	background:var(--chip-hover-bg); 
}
.chip:focus-visible{
  outline:3px solid color-mix(in srgb, var(--focus-color) 60%, transparent);
  outline-offset:3px;
}
.chip.active{ 
	background:var(--chip-active-bg); 
	border-color: var(--chip-active-border-color); 
	color:var(--chip-active-text-color);
}
.chips-line{
    display:flex; 
	gap:8px; 
	flex-wrap:wrap; 
	align-items:center;
    margin-top:2px;
	flex: 1;
}
.active-chip{
    display:flex; 
	align-items:center; 
	gap:6px;
    border-radius:999px; 
	padding:4px 10px; 
	font-size:12px;
    background:var(--active-chip-bg); 
	color:var(--active-chip-text-color);
    border:var(--active-chip-border-color);
}
.active-chip button{
    border:none; 
	background:transparent; 
	color:inherit; 
	cursor:pointer;
	padding:2px; 
	border-radius:6px;
}
.active-chip button:hover{ 
	background:var(--active-chip-button-hover-bg); 
}
.chip-clear-button{
    display:flex; 
	align-items:center; 
	gap:6px;
    border-radius:999px; 
	padding:4px 10px; 
	font-size:12px;
    background:var(--active-chip-bg); 
	color:var(--active-chip-text-color);
    border:var(--active-chip-border-color);
}
.chip-clear-button:hover{ 
	background:var(--clear-button-hover-bg); 
}
.filters-head-div {
	display: flex;
	gap: 4px;
	align-items: center;
	opacity:0; 
	transform:translateY(100%);
	animation: entry-filters 1s forwards;
}
.filters-head-div.exit {
	animation: exit-filters 1s forwards;
}
.filters-head {
	color: var(--filter-text-color);
    font-weight: 600;
    font-size: 20px;
}
.results-count{ 
	font-size:13px; 
	color:var(--filter-text-color);
	margin-top: 2px;
}
.group-header{
	font-size: 20px; 
	align-self: stretch;
    font-weight:600; 
	letter-spacing:.3px;
    color:var(--group-header-text-color); 
	opacity:.9;
	margin: -1rem 0;
    border-top: 1px solid var(--card-border-color);
    text-align: left;
    padding-top: 5px;
}
.no-results{
    color:var(--filter-text-color);
}

.mgdp-button{
    display:inline-flex; 
	align-items:center; 
	justify-content:space-between;
    gap:10px; 
    padding:8px 10px;
    border:none;
    background:transparent;
    cursor:pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    transition: transform 140ms cubic-bezier(.2,.8,.2,1), box-shadow 140ms, border-color 140ms, background 140ms;
	position: relative;
	padding-right: 25px;
	font-size: 14px;
}
.mgdp-button:after {
  font-family: "MGW-Icons";
  content: "";
  position: absolute;
  font-size: 8px;
  display: inline-block;
  color: currentColor;
  font-weight: 700;
  padding-top: 5px;
  right: 10px;
}
.mgdp-button:hover{ 
	background: var(--list-mode-icon-hover-bg); 
}
.mgdp-button:active{ 
	background: var(--list-mode-icon-active-bg);
}
.mgdp-button[aria-expanded="true"] {
    background: var(--list-mode-icon-active-bg);
}
.mgdp-button:focus-visible{ 
	outline: 3px solid rgba(0,120,212,.45); 	
	outline-offset: 3px;
}
.mgdp-button .mgdp-label{
	display:flex; 
	align-items:center; 
	gap:8px; 
	min-width:0;
}
.mgdp-button[aria-expanded="true"]:after {
    content: "";
}

.mgdp-panel{
    position:fixed;
    inset:auto auto auto auto;
    z-index:9999;
    min-width:180px;
    max-width:360px;
    max-height:320px;
    overflow:auto;
    background:var(--mgdp-panel-bg);
    border:1px solid var(--panel-border-color);
    box-shadow:var(--shadow);
    opacity:0; 
	transform:scale(.98);
    visibility:hidden;
    transition: opacity 140ms cubic-bezier(.2,.8,.2,1), transform 140ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 140ms;
}
.mgdp-panel.open{
    opacity:1; 
	transform:scale(1);
    visibility:visible; 
	transition: opacity 140ms, transform 140ms, visibility 0s;
}

.mgdp-list{
    list-style:none; 
	margin:0; 
	padding:6px;
    outline:none;
	display: flex;
	flex-direction: column;
	gap: 4px; 
}
.mgdp-option{
    display:flex; 
	align-items:center; 
	gap:10px;
    padding:10px 10px;
    cursor:pointer; 
    position:relative;
}
.mgdp-option[aria-selected="true"]{
    background:var(--mgdp-opt-selected);
    font-weight:600;
}
.mgdp-option:hover{ 
  background:var(--mgdp-opt-hover) 
}
.mgdp-option[data-active="true"]{
    background: var(--mgdp-opt-active);
    outline: 2px solid rgba(0,120,212,.15);
}
.mgdp-option .check{
    margin-left:auto; 
	color:var(--mgdp-check); 
	visibility:hidden;
}
.mgdp-option[aria-selected="true"] .check{ 
	visibility:visible 
}

@keyframes spinner-anim {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.bolt-spinner-circle {
  transition: opacity 0.2s ease-in-out, right 0.2s ease-in-out;
  border:  2px solid;
  border-color: var(--bolt-loader-border);
  border-top-color: var(--bolt-loader-top-border);
  border-radius: 50%;
  animation-name: spinner-anim;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67);
}

.bolt-spinner-circle.xlarge {
  width: 1.5rem;
  height: 1.5rem;
}

.bolt-spinner-circle.xxlarge {
  width: 2rem;
  height: 2rem;
}

.mg-content-anim-init {
  transform: scale(0.8);
  opacity: 0;
}

.mg-content-anim {
  animation: mgConAnim 1s forwards;
}
.launch-grid {
  display: flex;
  gap: 2rem;
  flex-direction: column;
  transition:transform 420ms cubic-bezier(.2,.8,.2,1), box-shadow 420ms cubic-bezier(.2,.8,.2,1);
  align-items: center;
  justify-content: center;
}
.launch-grid .bolt-spinner-circle {
	margin: 20dvh 0;
	justify-self: center;
}
.launch-grid .no-data-failure {
	margin: 20dvh 0;
	align-items: center;
}
.launch-grid.fade-out{ 
  opacity:0; 
  transform:translateY(6px); 
  transition:opacity 260ms cubic-bezier(.2,.8,.2,1), transform 260ms cubic-bezier(.2,.8,.2,1) 
}
.launch-grid.fade-in{ 
  opacity:1; 
  transform:translateY(0); 
  transition:opacity 260ms cubic-bezier(.2,.8,.2,1), transform 260ms cubic-bezier(.2,.8,.2,1) 
}
.launch-grid.exit{
  animation: cardExit 1s forwards;
}
.list-card-con{
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius:2px;
  box-shadow:var(--shadow);
  border:1px solid var(--card-border-color);
  padding: 1.5rem;
  position:relative;
  overflow:hidden;
  align-self: stretch;
  transition:transform 420ms cubic-bezier(.2,.8,.2,1), box-shadow 420ms cubic-bezier(.2,.8,.2,1);
}
.list-card-con.mg-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
.list-card-con.mg-on-scroll.fade-in {
  opacity: 1;
  transform: translateY(0);
}
.list-card-con:hover{ 
  transform:translateY(-1px) 
}
.list-card-con::before {
  content: "";
  position: absolute;
  top: -100px;
  left: -100px;
  width: calc(100% + 200px);
  height: calc(100% + 200px);
  background: radial-gradient(
    circle at bottom right, 
    color-mix(in srgb, var(--card-bg-glow) 35%, transparent) 0%,
    color-mix(in srgb, var(--card-bg-glow) 25%, transparent) 30%,
    transparent 70%
  );
  filter: blur(120px) saturate(150%);
  opacity: 0.8;
  pointer-events: none;
  z-index: -1;
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.list-card-con:hover::before {
  transform: scale(1.05) translate(10px, -10px);
  opacity: 1;
}
.launch-card {
  display: flex;
  gap: 2rem;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}
.card-column {
  display: flex;
  flex-direction: column;
}
.card-column:first-child {
  flex: 1;
  font-weight: 600;
}
.card-column:nth-child(2) {
  flex: 4;
}
.card-column:nth-child(3) {
  flex: 1.5;
  font-weight: 600;
}
.card-column > p:not(:first-of-type) {
    margin-block-start: 0;
}
.card-column:first-child > :first-child {
  display: inline-flex;
  align-items: center; 
  gap: 0.5rem;
}
.card-column:first-child > :nth-child(2) {
  font-size: 24px;
}
.card-column:first-child > :nth-child(3) {
  font-size: 20px;
}
.card-column:first-child > :nth-child(4) {
  margin-top: 40px;
  display: inline-flex;
  align-items: center; 
  gap: 0.5rem;
}
.card-column:first-child > :nth-child(5) {
  font-size: 24px;
}
.card-column:first-child > :last-child {
  font-size: 20px;
}
.card-column:nth-child(2) > :first-child {
  font-size: 24px;
  font-weight: 600;
}
.card-column:nth-child(3) > span, .card-column:nth-child(3) > a:not(.lm-button) {
  display: inline-flex;
  align-items: center; 
  gap: 0.5rem;
}
.card-column:nth-child(3) > span {
  margin-bottom: 0.5rem;
}
.card-column:nth-child(3) > a:hover {
  text-decoration: underline;
}
.high-text {
	font-size: 1.2rem;
	padding: 0px 10px;
	padding-bottom: 2px;
	background-color: var(--high-text-bg);
	color: var(--high-text-color);
	-webkit-text-fill-color: var(--high-text-color);
	border-radius: 7px;
	font-weight: 600;
}
.high-text.icon-badge {
    display: inline-flex;
    align-items: center; 
    gap: 0.1rem;
}
.lm-button {
  margin-top: 50px;
  align-items: center;
  text-align: center;
  font-weight: 600;
  border: .125rem solid transparent;
  position: relative;
  border-radius: .125rem;
  background-color: var(--main-lm-button-bg-color);
  color: var(--main-lm-button-text-color) !important;
  text-decoration: none !important;
  padding: .625rem .75rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.lm-button:hover {
  background-color: var(--main-lm-button-hover-bg-color);
  color: var(--main-lm-button-hover-text-color) !important;
}
.nf-text {
    align-items: center;
	text-align: center;
    font-weight: 600;
    position: relative;
    color: var(--footer-text-color);
    padding: .625rem .75rem;
    font-size: 0.75rem;
    line-height: 1;
}
@keyframes mgConAnim {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  30% {
    transform: scale(1.05);
    opacity: 0.7;
  }
  100% {
	transform: scale(1);
    opacity: 1; 
  }
}

.no-data-failure {
	display: flex;
    flex-direction: column;
    gap: 12px;
}

:root[data-theme="light"] .no-data-failure svg {  
	filter: invert(1) hue-rotate(200deg);
}

@media (max-width:859px){
	main .toolbar {
		margin-top: 40px;
	}
	.edge-nav{ 
		width:44px;
		height:44px; 
		border-radius:12px 
	}
	@keyframes entry-nav-l {
		0% {
			opacity: 0;
			left: -30px;
		}
		50% {
			opacity: 1;
			left: 15px;
		}
		100% {
			opacity: 1;
			left: 8px;
		}
	}
	@keyframes entry-nav-r {
		0% {
			opacity: 0;
			right: -30px;
		}
		50% {
			opacity: 1;
			right: 15px;
		}
		100% {
			opacity: 1;
			right: 8px;
		}
	}
	@keyframes entry-nav-l-d {
		0% {
			opacity: 1;
			left: 8px;
		}
		50% {
			opacity: 1;
			left: 15px;
		}
		100% {
			opacity: 0;
			left: -30px;
		}
	}
	@keyframes entry-nav-r-d {
		0% {
			opacity: 1;
			right: 8px;
		}
		50% {
			opacity: 1;
			right: 15px;
		}
		100% {
			opacity: 0;
			right: -30px;
		}
	}
	@keyframes entry-nav-fs {
		0% {
			opacity: 0;
			top: -30px;
			right: 8px;
		}
		50% {
			opacity: 1;
			top: 15px;
			right: 8px;
		}
		100% {
			opacity: 1;
			top: 8px;
			right: 8px;
		}
	}
	@keyframes entry-nav-fs-d {
		0% {
			opacity: 1;
			top: 8px;
			right: 8px;
		}
		50% {
			opacity: 1;
			top: 15px;
			right: 8px;
		}
		100% {
			opacity: 0;
			top: -30px;
			right: 8px;
		}
	}
	.title{ 
		font-size:20px 
	}
	.desc{ 
		font-size:14px 
	}
	.timeline-wrap {
		margin: 0;
	}
	.year-label{ 
		font-size:11px 
	}
	.month-label{ 
		font-size:11px 
	}
	.launch-card {
		flex-direction: column;
		gap: 2rem;
	}
	.toolbar-list {
		grid-template-columns: 1fr;
	}
	
	.card-column:first-child { order: 2; }
	.card-column:nth-child(2) { order: 1; }
	.card-column:nth-child(3) { order: 3; }
	.card-column:first-child * { animation-delay: 2s; }
	.card-column:nth-child(3) * { animation-delay: 2s; }
}

:root[data-theme="light"] {         
    --bolt-loader-border: rgba( 200, 200, 200 ,  1 );
	--bolt-loader-top-border: rgba(0, 90, 158, 1);
	
	--high-text-bg: #1A2167;
	--high-text-color: #e3e6ff;
	--main-lm-button-bg-color: #5B21B6;
	--main-lm-button-text-color: #F3E8FF;
	--main-lm-button-hover-bg-color: #3B0764;
	--main-lm-button-hover-text-color: #D8B4FE;
	
	--edge-button-border: rgba(180,200,255,.3);
	--edge-bg-color: linear-gradient(180deg, #f6f8ff, #e6ecfa);
	--edge-hover-bg-color: linear-gradient(180deg, #eef2ff, #d9e2f5);
	--edge-active-text-color: #f6f8ff;
	--edge-text-color: #22324d;
	--timeline-bg-color: linear-gradient(180deg, rgba(238,242,255,.9), rgba(230,236,250,.9));
	--timeline-border-color: rgba(180,200,255,.3);
	--timeline-scrollbar-bg: #c7d6f2;
	--track-bg: linear-gradient(180deg, #c0d4f8, #a8c4f0);
	--track-box-shadow: inset 0 1px 0 rgba(200,220,255,.4), inset 0 -1px 0 rgba(40,60,120,.2);
	--progress-bg-1: #0f5ecc;
	--progress-bg-2: #3a8cff;
	--progress-box-shadow: 0 0 0 1px rgba(26,145,255,.3), 0 6px 20px rgba(26,145,255,.35);
	--year-circle-bg: #dde6f9;
	--year-circle-border-color: #6f8fc5;
	--year-circle-hover-border-color: #1a91ff;
	--year-circle-hover-box-shadow: 0 6px 16px rgba(26,145,255,.25);
	--year-completed-bg: #1a91ff;
	--year-completed-border-color: #1a91ff;
	--year-completed-box-shadow: 0 6px 16px rgba(26,145,255,.35);
	--year-active-bg: #1a91ff;
	--year-active-border-color: #2b4876;
	--year-upcoming-bg: #e0e7fa;
	--year-upcoming-border-color: #6f8fc5;
	--year-label-color: #405b7e;
	--month-dot-bg: #dde6f9;
	--month-dot-border-color: #6f8fc5;
	--month-dot-box-shadow: rgba(40,60,120,.25);
	--month-dot-hover-border-color: #1a91ff;
	--month-dot-hover-box-shadow: 0 6px 16px rgba(26,145,255,.25);
	--month-dot-current-bg: #1a91ff;
	--month-dot-current-border-color: #1a91ff;
	--month-dot-current-box-shadow: 0 10px 24px rgba(26,145,255,.35);
	--current-pulse-anim: pulseBlueLight;
	--month-label-text-color: #22324d;
	--month-label-bg-color: rgba(238,242,255,.95);
	--month-label-box-shadow-color: 0 4px 16px rgba(40,60,120,.2);
	--card-bg: linear-gradient(180deg, rgba(245,248,255,.96), rgba(238,242,255,.94));
	--card-border-color: rgba(180,200,255,.3);
	--card-bg-glow: #5fb9ff;
	--focus-color: #1a91ff;
	--slide-text-color: #a0b0c0;
	--shadow: 0 14px 36px rgba(40,60,120,.15), 0 6px 16px rgba(40,60,120,.1);
	--panel-bg: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.90));
	--panel-border-color: rgba(0,0,255,.06);
	--list-mode-icon-hover-bg: rgba(0,0,255,.16);
	--list-mode-icon-active-bg: rgba(0,0,255,.26);
	--sep-color: #c0c8d0;
	--filter-text-color: #2c3e50;
	--chip-border-color: #d5dbe3;
	--chip-bg-color: #e0e7fa;
	--chip-hover-bg: #b3dff5;
	--chip-active-bg: #e5f1fb;
	--chip-active-border-color: color-mix(in srgb, #0078d4 35%, transparent);
	--chip-active-text-color: #0078d4;
	--active-chip-bg: #cce7f8;
	--active-chip-text-color: #0078d4;
	--active-chip-border-color: color-mix(in srgb, #0078d4 35%, transparent);
	--active-chip-button-hover-bg: rgba(0,0,0,.06);
	--clear-button-hover-bg: #b3dff5;
	--group-header-text-color: #1b1a19;
	--mgdp-panel-bg: #e0e7fa;
	--mgdp-opt-hover: #f4f8ff;
    --mgdp-opt-active: #e7f2ff;
    --mgdp-opt-selected: #e6f3ff;
	--mgdp-check: #0078d4;
}

:root[data-theme="dark"] {
	--bolt-loader-border: rgba( 96, 94, 92 ,  1 );
	--bolt-loader-top-border: rgb(71, 158, 245);
	
	--high-text-bg: #e3e6ff;
	--high-text-color: #1A2167;
	--main-lm-button-bg-color: #EDE9FE;
	--main-lm-button-text-color: #4C1D95;
	--main-lm-button-hover-bg-color: #5B21B6;
	--main-lm-button-hover-text-color: #F3E8FF;
	
	--edge-button-border: rgba(220,230,255,.08);
	--edge-bg-color: linear-gradient(180deg, #16233b, #0f1a2f);
	--edge-hover-bg-color: linear-gradient(180deg, #1b2b4a, #14223a);
	--edge-active-text-color: #16233b;
	--edge-text-color: #dbe7f6;
	--timeline-bg-color: linear-gradient(180deg, rgba(18,28,48,.88), rgba(18,28,48,.86));
	--timeline-border-color: rgba(220,230,255,.08);
	--timeline-scrollbar-bg: #2a3a56;
	--track-bg: linear-gradient(180deg, #23324d, #1d2a44);
	--track-box-shadow: inset 0 1px 0 rgba(220,230,255,.06), inset 0 -1px 0 rgba(0,0,40,.6);
	--progress-bg-1: #1a91ff;
	--progress-bg-2: #5fb9ff;
	--progress-box-shadow: 0 0 0 1px rgba(0,0,40,.2), 0 6px 20px rgba(26,145,255,.35);
	--year-circle-bg: #13213a;
	--year-circle-border-color: #39567e;
	--year-circle-hover-border-color: #1a91ff;
	--year-circle-hover-box-shadow: 0 6px 16px rgba(26,145,255,.35);
	--year-completed-bg: #1a91ff;
	--year-completed-border-color: #1a91ff;
	--year-completed-box-shadow: 0 6px 16px rgba(26,145,255,.45);
	--year-active-bg: #1a91ff;
	--year-active-border-color: #2b4876;
	--year-upcoming-bg: #0f1a30;
	--year-upcoming-border-color: #2b4876;
	--year-label-color: #9bb0c8;
	--month-dot-bg: #13213a;
	--month-dot-border-color: #39567e;
	--month-dot-box-shadow: rgba(0,0,40,.6);
	--month-dot-hover-border-color: #1a91ff;
	--month-dot-hover-box-shadow: 0 6px 16px rgba(26,145,255,.35);
	--month-dot-current-bg: #1a91ff;
	--month-dot-current-border-color: #1a91ff;
	--month-dot-current-box-shadow: 0 10px 24px rgba(26,145,255,.45);
	--current-pulse-anim: pulseBlueDark;
	--month-label-text-color: #d8e6f7;
	--month-label-bg-color: rgba(9,15,28,.92);
	--month-label-box-shadow-color: 0 4px 16px rgba(0,0,40,.5);
	--card-bg: linear-gradient(180deg, rgba(18,28,48,.94), rgba(18,28,48,.92));
	--card-border-color: rgba(220,230,255,.08);
	--card-bg-glow: #1a91ff;
	--focus-color: #1a91ff;
	--slide-text-color: #7a8ca0;
	--shadow: 0 14px 36px rgba(0,0,40,.45), 0 6px 16px rgba(0,0,40,.35);
	--panel-bg: linear-gradient(180deg, rgba(20,30,48,.78), rgba(20,30,48,.75));
	--panel-border-color: rgba(120,120,255,.08);
	--list-mode-icon-hover-bg: rgba(120,120,255,.08);
	--list-mode-icon-active-bg: rgba(120,120,255,.18);
	--sep-color: #5a6878;
	--filter-text-color: #9bb0c8;
	--chip-border-color: #2b4876;
	--chip-bg-color: #0f1a30;
	--chip-hover-bg: #1c3e70;
	--chip-active-bg: #0f2747;
	--chip-active-border-color: #1e4980;
	--chip-active-text-color: #a8d6ff;
	--active-chip-bg: #0f2747;
	--active-chip-text-color: #a8d6ff;
	--active-chip-border-color: #1e4980;
	--active-chip-button-hover-bg: rgba(255,255,255,.08);
	--clear-button-hover-bg: #1c3e70;
	--group-header-text-color: #e9eef6;
	--mgdp-panel-bg: #11182d;
	--mgdp-opt-hover: #1a2230;
	--mgdp-opt-active: #223041;
	--mgdp-opt-selected: #26384c; 
	--mgdp-check: #a8d6ff;
}

:root {
  --header-offset: 0px;
}

:root.header-pinned {
  --header-offset: 54px;
}